Thursday Nov 21, 2013

How to Forget Android Emulators Forever!

There's no need to use Android emulators anymore. Instead, you can interact directly between your code and Android live on the device, either for CSS styling or for JavaScript debugging!

The above is a very quick 2 1/2 minute tour through the awesome Android CSS styling and JavaScript debugging features in NetBeans IDE 7.4, using a small AngularJS application as an example.

How to Deploy and Debug AngularJS on the Android Device

I bought a new Android, Android 4, Ice Cream Sandwich, just so that I can deploy AngularJS applications to the Chrome browser on an actual Android device (not an emulator) from NetBeans IDE and then debug and style the application on the device, i.e., not on the emulator but in the Chrome browser on Android itself!

Right-click a HTML/JS/CSS application in NetBeans IDE and run it, using the drop-down in the toolbar to specify that you'd like to deploy the application to the Chrome browser on the Android device connected via USB to your computer, with USB debugging switched on. Or use the Project Properties dialog to do so, per project. Wait a minute, is that all there is that I need to do? Yes. That's all you need to do. NetBeans IDE lets you deploy applications to the Chrome browser on Android, either the device or the emulator, with just one click. I must say that seeing your app on the Android device is a lot cooler than seeing it on the emulator, plus it is a lot faster as well, even faster than Genymotion.

Here you see the application deployed (of course, it is AngularJS, since I can't help but think that AngularJS is the future of HTML/JS/CSS, it is just SO awesome) to the device. You can see that because I am using Droid@Screen, which is now integrated as a new NetBeans plugin, which I know because I've been working on that, as can be seen (and downloaded) here, directly embedded in NetBeans IDE:

Droid@Screen (above embedded via a plugin into NetBeans IDE and below as a separate application) connects to the Android device and displays what it sees there, handy for when displaying stuff to a group (e.g., at a conference) what's on the device that I'm holding in my hand:

Again, note that above you're NOT seeing an emulator. Instead, you're seeing a 1:1 reflection of what I'm seeing on the Android device, i.e., the same actual device that has mass and presence in the physical universe, the one that I bought, in the real world.

And, in the screenshot above the one immediately above, you can see that the mouse is on a specific item in the Browser DOM window, rendered on the Android device, as shown in Droid@Screen. It is extremely cool that I can move the mouse up and down the DOM presented live in the IDE and then see the currently selected item in the IDE back on the Android device in my hand. I can also look at the application deployed on Android, adjust the colors (or anything else) in the IDE, and immediately see the change on Android because a save in the IDE prompts the IDE to refresh the browser on Android.

Next, above, what you can see is that I can step through my JavaScript, i.e., my AngularJS code, and see the rendering as it happens on Android, again by looking at Droid@Screen which is what you would see at a conference or in some kind of presentation to show what I'm seeing on an actual Android device, above.

Everything you see above you can do right now, today, for free, if you download and install NetBeans IDE 7.4.

All this and more will be shown in detail at DroidCon in Amsterdam next week. I will also be making a new YouTube movie about this all very soon.


Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.


« November 2013 »