Saturday Nov 30, 2013

Cordova/PhoneGap: Gateway to Native Android Development

Once NetBeans IDE has created a Cordova app for you (as I explain how to do here), switch to the Files window, and you'll see this:

Notice the yellow Android icon above, which is there because I installed the NetBeans Android plugin.

That icon indicates that NetBeans IDE understands that the related folder is somehow special. When you right-click it... you have a native Android application, which you can then develop further as a native Android application:


Nice how Cordova/PhoneGap can form the basis for a native Android application, which can be developed further as a (more or less, i.e., there's still HTML and JS in there, of course) native Android application.

Friday Nov 29, 2013

Cordova Contacts via AngularJS and NetBeans IDE

Starting out from yesterday's blog entry, where I controlled the Android camera via an AngularJS Cordova application, let's now, instead of the Android camera, get hold of the Android contacts list.

So, do everything explained yesterday, except that you need to include the "Contacts" plugin, instead of the "Camera" plugin, via the tools in NetBeans IDE.

Then:

<button ng-contacts>Retrieve Contacts!</button>
<ol ng-repeat="contact in contacts">
    <div ng-show="contact.displayName.length > 0">
        <li style="list-style: circle">
            {{contact.displayName}}
        </li>
    </div>
</ol>

And here's the Directive referred to in the button above:

var app = angular.module('myApp.directives', []);
app.directive('ngContacts', function() {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs, ctrl) {
            elm.on('click', function() {
                navigator.contacts.create();
                var options = new ContactFindOptions();
                options.multiple = true;
                var fields = ["displayName"];
                navigator.contacts.find(fields, function(foundcontacts) {
                    scope.$apply(function() {
                        scope.contacts = foundcontacts;
                    });
                }, function(error) {
                    scope.$apply(function() {
                        alert('error: ' + error);
                    });
                }, options);
            });
        }
    };
});

That's all you need. Click the button and all the contacts are loaded and displayed if the display name has a length.

If you want to search for a particular name, use "options.filter = scope.filter", i.e., on the ContactFindOptions that you see above, set a filter, defined by a "filter" variable in an expression defined in the view.

Spent a lot of time trying to get the contact photo to be displayed, but failed so far.

Related resources:

http://tech.pro/tutorial/1401/phonegap-and-angularjs-contacts

https://issues.apache.org/jira/browse/CB-1045

Thursday Nov 28, 2013

From AngularJS Seed to Cordova Android Camera!

One of my recent holy grails has been to figure out how to get from an AngularJS Seed template to a functioning Cordova app that makes use of the camera on the Android device. And I figured it out, though it took me a day to do so. Not only is this useful for getting the camera to work. The principles you learn along the way should give you the basics for getting you access to all the Android device tools made available via the other Cordova plugins, e.g., "Acceleromatter", "Contacts", and "Geolocation". 

There are many resources to help you get to the end point, though all of them are incomplete in one way or another and get you part of the way on your journey. My aim is to get you all the way to the end, from the very beginning, in this blog entry.

But first, let's look at all the stepping stones I used and give credit where credit is due. Setting up USB debugging for your Android device is important if you, like me, don't want to use Android emulators anymore, since working directly with the Android device is more real and also faster, and you're on Windows. So you need to install the USB driver, assuming you've plugged your Android device into your laptop via a USB cable. Once you're set up and ready to do some coding, the most useful document, providing all the code you actually need is the 1st answer, by asgoth, in How to integrate Phonegap Camera with AngularJS. The solution is based on creating an AngularJS Directive, which is well explained in Build custom directives with AngularJS. You'll come across problems in the early hours of figuring things out and you're going to be happy to have a simple working example, which is what https://github.com/paulorbpacheco/CameraTest-Cordova.git is. Doesn't get you the AngularJS piece of the puzzle, but gets you a working camera on Android via Cordova. And when you're troubleshooting, this and this stackoverflow item could be helpful. 

Now let's actually get started and go from the very beginning to the very end.

  1. In NetBeans IDE, go to File | New Project and then choose HTML5 | HTML5 Application. Click Next. Give the application a name, such as 'AwesomeCamera':

    Click Next.

  2. Choose the AngularJS Seed template:

    Click Finish. After a few moments, during which the template is downloaded from its Git repo and unzipped, you should see this in the Projects window, i.e., the logical view of your AngularJS Seed template:

    In the Files window, you see the complete view, i.e., everything on disk that constitutes your AngularJS Seed template:

  3. Now, assuming that you have already set up Cordova (which I describe how to do in this YouTube movie), you can proceed to let NetBeans IDE add Cordova content to the AngularJS Seed application. Go to the Project Properties dialog of the AwesomeCamera application (right-click it and choose Properties) and then the Cordova tab should show the following:

    (If you don't see the above, you have a fun journey ahead of you in setting up Cordova.) Once you see the above, click the button and wait for the call to the Cordova executable to complete, at which point you will have a Cordova application. What that means you'll see in a few steps below. Now don't forget to switch to the Plugins tab, choose "Camera", and click it to the right of the pane:

    Notice that if you haven't set up the Android SDK yet, the "Mobile Platform Setup" button above gives you an opportunity to do so. Now click OK everywhere to exit the Project Properties dialog. 

  4. In the NetBeans IDE toolbar, use the drop-down to specify you'd like to deploy via Cordova to the Android device that is attached to your laptop via a USB cable:

    Alternatively, you can set the above per-project, in the Run tab of the Project Properties dialog for the AwesomeCamera application.

  5. Now right-click the AwesomeCamera application and choose Build. Since you've set "Cordova (Android Device)" in the previous step, Cordova will build an Android APK package for you. While the build takes place, open the Output window (Ctrl-4) to see the long list of Cordova outputs in the IDE.

    At the end of the process, you'll see no difference in the Projects window, i.e., in the logical view. Switch to the Files window and you'll see that your application has been transformed into a Cordova application. In particular, notice these folders:

    Notice there's a "plugins" folder, containing the downloaded Camera plugin, i.e., during the build process the Git repo was found where the Camera plugin is stored. From there, the Camera plugin was put into the folder you see above. Also notice there's a "platforms" folder which, since we're creating an application for Android, only has content for Android. In particular, notice the "bin" folder and the "gen" folder, which are created whenever you build the project. The Android APK file is created in the "bin" folder. When you invoke the clean command on the project (i.e., right-click the project and choose Clean), the "bin" and "gen" folder will be removed. In other words, these two folders are created from all the other artifacts in the "platforms" and "plugins" folders, which in turn have been defined via the files and settings you define in your AwesomeCamera project.

  6. An interesting thing to note in the above screenshot is that in the "platform/android/assets/www" folder is a file named "cordova.js". That file, very important, provides the entry point to all the Cordova features, including the camera on the Android device. Hence, we need to make sure that we reference that file in our index.html file. Therefore, switch back to the Projects window. (Remember to do all your work in the Projects window because anything in the Files window could/will be overwritten by build commands via Cordova.) Right at the end, before the closing body tag, add this:
    <script src="cordova.js"></script>

    Build the project again and now notice that the index.html file in the "platform/android/assets/www" folder correctly references the cordova.js file. Note there's no need to reference the "cordova_plugins.js" file in your index.html, because that file is referenced in the "cordova.js" file.

    I believe that NetBeans IDE should take this step for you: https://netbeans.org/bugzilla/show_bug.cgi?id=238923

  7. Now we'll use all the code referenced above, i.e., in How to integrate Phonegap Camera with AngularJS, plus a tiny little bit of my own. Switch to the Projects window and then we'll create a directive, a controller, and some HTML:

    In "js/directives.js", remove everything and replace it with this:

    'use strict';
    var app = angular.module('myApp.directives', []);
    app.directive('camera', function() {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function(scope, elm, attrs, ctrl) {
                elm.on('click', function() {
                    navigator.camera.getPicture(
                        function(imageURI) {
                            scope.$apply(function() {
                                ctrl.$setViewValue(imageURI);
                            });
                        },
                        function(err) {
                            ctrl.$setValidity('error', false);
                        }, {quality: 50, 
                            destinationType: Camera.DestinationType.FILE_URI});
                });
            }
        };
    });

    In "js/contollers.js", remove everything and replace it with this:

    'use strict';
    angular.module('myApp.controllers', []).
            controller('MyCtrl1', function($scope) {
                $scope.myPictures = [];
                $scope.$watch('myPicture', function(value) {
                    if (value) {
                        $scope.myPictures.push(value);
                    }
                }, true);
            });

    In "partials/partial1.html", remove everything and replace it with this:

    <button camera ng-model='myPicture'>Take Picture</button>
    
    <ul ng-repeat="onepic in myPictures">
        <li style="list-style: none">
            <input type="image" 
                      src="{{onepic}}" 
                      width="250" 
                      height="390" 
                      alt="error"/>
        </li>
    </ul>

    Note that the "'use strict';" statements were already in the AngularJS Seed files above, so I've just kept them there.

  8. Run the application. Sure, you can deploy the application to the Android device directly from NetBeans IDE. Since you set "(Cordova) Android Device" above, whenever you right-click the project and choose Run, the IDE will deploy the application to the Android device. Once it is deployed to the Android device, you'll simply see a button with the text "Take Picture". Click it. The camera starts up. Take a picture. Save the picture. The picture will then be added as a new image in a list in the view defined via the HTML shown above.

Hurray you have an application created in HTML and JavaScript that accesses a camera on Android. That's pretty cool, no native code needed to be provided at all, only HTML and JavaScript, which Cordova converted to native code for you.

Wednesday Nov 27, 2013

TestFairy.com: The Place for Android Crowd Testing

One of the really nice people I met at DroidCon in Amsterdam over the past few days was Yair Bar-On, CEO and Co-Founder of TestFairy.com. (By the way, the image to the left is not the real TestFairy logo, just a funny one someone on Twitter suggested as a joke but I think is just perfect.) Aside from confounding me with his evil bookmark gimmick (weird puzzly devices on his booth table for no other purpose than to keep you stuck listening to him while you figure out how to untangle the beads from the bookmark without destroying it), Yair also introduced me to TestFairy.

The idea is that you've developed your Android app and now you have an APK file, either from native Android or from PhoneGap/Cordova. Now you'd like to test that APK file and also monitor what your testers are actually doing with it. So you upload your APK file to TestFairy.com and then tell the world where to get hold of it. One nice thing is that you can distribute a URL to a bar code, which your testers can then install via a bar code scanner on their Android device.

And then you sit back and monitor what they're doing with the app!

Above, you can see the apps I've made available for testing, below you see the testers registered for testing the current app:

And here's a movie of what the current tester actually did with the app:

The above are some of the displays you get on TestFairy.com, including (as the last screenshot shows) a movie that shows exactly what the tester did with the app, including where they touched the screen and the movements of the screen itself during testing.

I think this is a great basis for crowd testing! Everyone in the world could get access to your app, they could try it out, and you'd sit back and monitor what's going on with your app everywhere in the world.

Two approaches are supported. In the first, you don't get the instrumented APK back. In the second, you get the APK back, instrumented, i.e., with all the stuff TestFairy adds to it in order to monitor it. Then you can pass that APK to whoever needs to test it, after you've signed it with whatever stuff you need to add to it prior to testing. But, if you don't need to add your own signatures, then leaving the APK on the TestFairy site during testing is great, especially the bar code approach to distributing the APK is pretty cool.

Would even be better if you could somehow define your own URL. I.e., for my "BeerJudge" app, I'd like to have a URL something like "testfairy.com/apps/beerjudge", which would be easy to tell the rest of the world about. They'd all go there, scan the bar code, and have immediate access to the app and then I could sit back and monitor their activities. It's also useful because it shows which parts of the app are most interesting and which parts the user doesn't care so much about.

Could also be cool to have a menu item on APK files in NetBeans IDE with the display text "Send to TestFairy!" And then the Upload API would be used to pass the APK to TestFairy:

http://app.testfairy.com/api/docs/upload

Watch this space for more info on the NetBeans TestFairy plugin!

Tuesday Nov 26, 2013

RAD.js: Enhancing PhoneGap/Cordova Quickly and Easily

I'm at DroidCon in Amsterdam with Oleg Lola (CEO) and Yuriy Luchaninov (HTML/JS/Android Group Leader) from the RAD.js project at MobiDev, among 1000 or so other people at the conference. RAD.js is yet another cool JavaScript framework:

http://rad-js.com

Click the Download button above and you'll find, among other things, many helpful samples:


What's special about RAD.js? Well, it makes PhoneGap/Cordova applications faster. The problem with PhoneGap/Cordova is that it is basically a wrapper around HTML5 applications and if you create a normal HTML5 application, you'll find that it is optimized for the browser on the deskop and not for the mobile device. Transitions, long lists, etc, are not handled well by PhoneGap/Cordova. RAD.js fixes delay time out problems and the too overloaded DOMs inherent in PhoneGap/Cordova and has components for long lists.

The aim of RAD.js is to make PhoneGap/Cordova applications faster, not via UI tricks, but via structural enhancements inside HTML5 applications.

Many examples are provided when you click the Download button on the page. They run immediately in NetBeans IDE, just use the "HTML5 from Existing Sources" template to set them up.

Here's one of them, click to enlarge the image:

And, of course, a RAD.js plugin for NetBeans IDE is being worked on! It will provide all the RAD.js samples and plug them into the New Project wizard in NetBeans IDE.

Monday Nov 25, 2013

Watch JavaOne 2013 "Hitchhiker's Guide to the NetBeans Platform"

The NetBeans platform is a popular free desktop framework for Java SE applications. It saves years of development time in building any significant desktop application by providing a modular framework that simplifies both developing and updating desktop applications.

Hundreds of organizations in the corporate sector and in open source communities use the NetBeans platform as the basis of their development work. In this panel discussion, you will see developers demonstrating the work they’ve done with the NetBeans platform. You will become familiar with everything you need in order to begin creating meaningful applications yourself on the NetBeans platform.

Below is the "Hitchhiker's Guide to the NetBeans Platform" talk given at JavaOne 2013 this year, by a bunch of NetBeans Platform developers: Bruce Schubert, Henry Arousell, Eirik Bakke, Thomas Boqvist, and myself!

http://parleys.com/play/524f1a1be4b0c4f11ec575f9

Sunday Nov 24, 2013

Watch JavaOne 2013 "Practical Pros and Cons of Replacing Swing with JavaFX in Existing Applications"

JavaFX provides a rich client API as a new and exciting way to develop client user interfaces. What are its key strengths and weaknesses? Is it ready to be used in production to replace Swing?

This panel discussion addresses the relevance of JavaFX in the context of existing Swing applications. It demonstrates and analyzes applications created in farm management, logistics, mission operations, and artificial intelligence. The panelists show how their applications based on the NetBeans application framework leverage JavaFX, and they share their experiences of replacing Swing with JavaFX and porting Swing components to JavaFX.

Missed the session at JavaOne 2013 or want to see it again? Here it is:

http://parleys.com/play/52542802e4b0c4f11ec576dd

Saturday Nov 23, 2013

Simple & Powerful Chrome App Development!

I attended a Devoxx session by Joe Marini entitled Build Native Apps with HTML5? With Chrome Apps, You Can.

Chrome Apps are not Chrome extensions, but off-line applications that run in the Chrome browser. In the above link I read: "Chrome Apps run offline by default, can access the native device hardware, can run on mobile devices, and leverage features not available to traditional Web apps." Very interesting.

During the session, Joe referred to a very nice Git repo full of Chrome App samples:

https://github.com/GoogleChrome/chrome-app-samples

I checked out that repo and ended up with a long list of samples, like this:

Now let's open one of the samples above into NetBeans IDE and see what it can do for us.

  1. In the New Project wizard, use the "HTML5 Application with Existing Source" template:

  2. Choose one of the sample applications, e.g., the "camera-capture" application:

  3. You'll find that NetBeans IDE adds a 'nbproject' folder to the application:

  4. In the IDE, this is how the application looks:

  5. And now you can deploy it. Right-click the application and choose Run and then you have a browser application that contains a button that enables a camera in the browser application. Then take a pic!

  6. After that, use all the cool tools in NetBeans IDE, e.g., the JavaScript editor, JavaScript debugger, Chrome browser integration, Android/iOS development tools (e.g., debug JavaScript on the device), Chrome Developer Tools integration, HTML editor, CSS editor, etc etc etc.

    Above, you can see that I have deployed the Chrome app into the Chrome browser. I have enabled the NetBeans plugin in the Chrome browser. So now I can click in the browser and see where the clicked item is defined in the IDE, via the live Browser DOM window, which you can see in the left of the screenshot.

NetBeans IDE 7.4 is a perfect development environment for Chrome Apps! No plugins are needed. Just install NetBeans IDE 7.4 (https://netbeans.org/downloads) and you can take all the steps described above, immediately.

Friday Nov 22, 2013

Karma: AngularJS Automated Test Runner

Karma (karma-runner.github.io), formerly known as Testacular, by the same guys who created AngularJS, automates testing by automatically kicking off test runs whenever you make changes to a test.

The main goal for Karma is to bring a productive testing environment to developers. The environment being one where they don't have to set up loads of configurations, but rather a place where developers can just write the code and get instant feedback from their tests. Because getting quick feedback is what makes you productive and creative.

I attended a great session on Karma by Brian Ford at Devoxx this year and here's a good document on it, showing how to take a few hours to do what I describe below in a few minutes. Also, here's an excellent intro by Vojta Jina, the main Karma guy:

As Vojta says, above, the main feature of Karma is its workflow, i.e., that you can save tests and immediately get feedback. Another excellent presentation, by @yearofmoo, on this topic is here.

While support for Jasmine in the context of NetBeans IDE has already been documented, Karma integration is now in the works. Below, let's take a look at what the new Karma integration consists of, aimed at making all Karma-related tasks easy and intuitive. After all, setting up a test runner should be a trivial administrative task, rather than the latest release of mission impossible.

To get Karma set up, start by running the following:

  • npm install -g karma
  • npm install -g karma-junit-reporter
  • npm install -g karma-ng-scenario

Then, create a new application from the AngularJS Seed template, e.g., from the New Project dialog, which shows you the following when you open it into NetBeans IDE:

Take note of the "Karma" node, right at the end of the logical view above. Right-click it to see the Karma actions. Choose the configuration file you'd like to work with:


When you try to start Karma without choosing a configuration file, the dialog below opens:


Choose the configuration file you'd like to use and click the "Watch" checkbox:


Next, try start Karma, by right-clicking the node and choosing Run. An error is shown if your browser hasn't been configured correctly:


Below you can see that I changed the "browsers" configuration, so that the full path to the browser is registered. Another error is shown if the "karma-script-launcher" module hasn't been registered, which I did below after seeing the error message:


Now, whenever you make changes to a test and save it, Karma automatically processes the test and shows you the results, whether positive....


...or less positive:


Note: All of the above is currently in development builds for the next version of NetBeans IDE, i.e., not available yet in NetBeans IDE 7.4.

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.

Wednesday Nov 20, 2013

Floss Refactoring in NetBeans IDE

Ralph, the NetBeans refactoring guru, tells me to press "Ctrl-R" below, over the variable "x". Then I see (a very nice small unobtrusive) dialog that shows the label "Apply Rename on Comments", with (even more unobtrusively) "Press 'Ctrl+R' Again for Refactoring Dialog":

Next, when I press Ctrl+R again, I see the Refactoring dialog, in the place and with the functionality that I am used to from other refactoring actions in NetBeans IDE:

So, then, I ask Ralph: "What's the big deal here?"

He says: "Well, this is the first step to fully supporting 'floss refactoring', which means being able to refactor continuously. We do not want to be obstructed by various dialogs, but we want to have the full refactoring engine at our finger tips."

What's the next step, then? "To add full support for all the other options, e.g., renaming getters and setters and copying the same principle to the other refactorings. Extract method will directly show you the extracted method and will  let you configure the new method name in the editor, instead of in a dialog."

Is this all about not needing to open dialogs and, instead, refactoring in-line, within the code? "Yes, this is one of the things we need to support floss refactoring."

OK, so what else do we need? "Drag and drop refactoring..."

So, what's "floss refactoring"?

When we talk about refactoring tactics, we are referring to the choices that you make about how to mix refactoring with your other programing tasks, and how frequently you choose to refactor. To describe the tactics, we use a dental metaphor. We call one tactic "floss refactoring"; this is characterized by frequent refactoring, intermingled with other kinds of program changes. In contrast, we call the other tactic "root canal refactoring". This is characterized by infrequent, protracted periods of refactoring, during which programmers perform few if any other kinds of program changes. You perform floss refactoring to maintain healthy code, and you perform root canal refactoring to correct unhealthy code. Further details: http://web.cecs.pdx.edu/~black/publications/IEEESoftwareRefact.pdf

Tuesday Nov 19, 2013

AngularJS Meets Java EE 7!

A quick introduction to using AngularJS to view data exposed by Java EE 7 RESTful Web Services.

Monday Nov 18, 2013

NetBeans IDE Extension Workshop @ Fontys University of Applied Sciences (Part 1)

I spent some time at Fontys University of Applied Sciences in Venlo, at their invitation, to introduce the topic of extending NetBeans IDE via learning how to create new plugins. At Fontys, they've standardized on NetBeans IDE for teaching purposes and so everyone in the class was very familiar with the IDE. In the beginning we discussed NetBeans IDE features the class likes most and it was interesting that the first item that came up was "great performance". Others included the Profiler and refactoring tools.

Here's a pic of the whole class, click to enlarge it, slightly blurry, but the panorama perspective gives a good impression of the class nonetheless, with three lecturers sitting on the extreme left of the pic:

And here's the slide deck used in the workshop, i.e., I went through all the slides below, which has a video embedded near the end, which is "Five Simple Ways to Extend NetBeans IDE" on YouTube. Through the workshop, the class learned how to create new modules, actions, menu items, toolbar buttons, windows, and option panels.

The slideshare location is here: http://www.slideshare.net/GeertjanWielenga/extending-nbide

Right at the end, we started listening to the global lookup, which will be continued in the next workshop to be held in a few weeks, where we will focus on integrating a web-based student assessment tool into NetBeans IDE.

I'm looking forward to seeing some cool new NetBeans plugins in the NetBeans Plugin Portal, which shouldn't be hard to create for the class, now that they've learned all the basics!

Sunday Nov 17, 2013

AngularJS for Busy Developers (Part 3)

Get to know a bit about AngularJS services via a very simple example that will get you up and running before you know it!

Saturday Nov 16, 2013

AngularJS for Busy Developers (Part 2)

Learn how to use AngularJS to let the user select Christmas presents and show them the total price of all selected items.

Friday Nov 15, 2013

AngularJS for Busy Developers (Part 1)

Busy developers don't have very much time and need to get started quickly. Here's part 1 of a series on AngularJS, just to get your feet wet.

Thursday Nov 14, 2013

Early Maven Christmas Present from Milos Kleint

Ludo ex-Sun ex-Oracle now-Google Champenois pointed out while sitting next to me at the long tables at Devoxx that there's at least one cool Maven feature that IntelliJ IDEA has that he misses from NetBeans IDE:

What you see above are all the goals in a POM file, which can be clicked on to be invoked. In NetBeans IDE, you need to configure the "nb-actions.xml" file to get something similar. As Ludo said: "The context is that for App Engine, for example, it is much easier to click on one of the items in this screen than typing a 'nb-actions.xml' file out of the box on the fresh, clean samples that we get from Github, for example."

So, after a bit of e-mailing to and fro from Antwerp to Prague and back, Milos Kleint, the Maven tooling guru in the NetBeans team, sent this screenshot today, as an early Christmas present, showing the above feature implemented and available in upcoming NetBeans builds:

He adds: "Please note that I will still have to work on some serious filtering capabilities, currently just :help goals are skipped by default, but a lot of goals shown cannot be easily executed as they miss parameters, some don't make sense as they are part of default lifecycle etc. Maybe manual filtering by user should be applied as well."

Thanks Milos! 

Wednesday Nov 13, 2013

Cordova Maps and AT&T ARO Data Analyzer in NetBeans IDE

I started up NetBeans IDE 7.4, installed the AT&T ARO plugin I've been working on since last week when I first heard about AT&T Application Resource Optimizer (it's free! it's open source!) at Oredev from Doug Sillars from AT&T, and then deployed the Cordova Maps sample that comes with NetBeans IDE. I deployed it to an Android emulator, which can be done via one click in NetBeans IDE.

Once the app was installed on the emulator, I started the ARO Data Collector from a menu item in NetBeans IDE. Once the collector had started, I clicked on the Cordova Maps sample in the emulator. I clicked around a bit, saw a spinning circle because a network connection was being made, and the spinning continued for a while. So I stopped the ARO Data Collector, again via a menu item in NetBeans IDE. I was asked where I wanted to store the results of the ARO Data Collector process.

Then I browsed to the results I had stored and opened them, again via a menu item in NetBeans IDE. Here are some of the interesting results shown by the ARO Data Analyzer, which I have embedded via a plugin in NetBeans IDE:

Scrolling down, I saw more details about the ARO tests that had failed:

And even more handy info in another tab:

Pretty cool and handy info. And I haven't even embedded all of the ARO Data Analyzer tool, just two of the five panels so far. But the Cordova Maps sample is a good application to use for trying out the ARO Data Analyzer, that's for sure.

In fact, you don't need the plugin. You can just use the open source standalone Java Swing application. But the plugin is definitely useful if you like integrated tools. Not completely done with it yet, hopefully soon. Will publish the binaries and sources when I'm further along. Alpha testers (i.e., you'll get really bleeding edge binaries) are welcome to make themselves known in the comments to this blog entry.

Tuesday Nov 12, 2013

YouTube: Realtime Graph Sharing on the NetBeans Platform

Yet another really cool movie by the Maltego team in South Africa, this time showing Visual Library widgets in their NetBeans Platform application shared in realtime between different users of the Maltego open source intelligence gathering and analytics software:

What you see above is Maltego CaseFile. Below you find out more about it in the latest blog entry on the Maltego site:

http://maltego.blogspot.be/2013/11/maltego-casefile-v2-released.html

About

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.

Search

Archives
« November 2013 »
SunMonTueWedThuFriSat
     
       
Today