Friday Jun 05, 2015

HTML5 DataList with Knockout.js

Let's populate an HTML5 DataList with countries via Knockout.js. The result will be as shown below, that is, you will have code completion via your DataList...

...and, when a country is selected, and focus moves out of the DataList (e.g., use the Tab key), its states will be displayed in an unordered list below:

The completed sample code is here:

The starting point is to populate an observable array with your countries and states. I found some JavaScript code on-line that did what I needed and you can see that integrated into my sample here:

Now that we have countries and states, let's create a DataList and populate it and, when a country is selected, list its states:

Line 26 above was definitely the trickiest to figure out, where this provided the missing piece of information.

Thursday Jun 04, 2015

HTML5 Fun Pack for NetBeans IDE (Part 1)

What better way to get familiar with the new HTML5 elements and attributes than to have them integrated into the Component Palette in NetBeans IDE?

Below, when you look in the palette on the right side of the screenshot, you see a new HTML5 category, which currently contains four new palette items, for audio, data list (code completion), required (validation), and video: 

When you double-click an item, or drag it into the HTML editor, new elements and attributes related to the palette item are added to the document. Above, you see what happens when "Data List" is clicked, i.e., everything from line 7 to line 15 in the screenshot above is generated from the Data List palette item.

More items are being added to the HTML5 palette (i.e., it is by no means complete, e.g., the new form controls need to be added), so watch this space. Or contribute to the project here:

To see how trivial it is to add new items to the HTML5 palette, click this link to see the "code" (not really code, simply annotations):

And to use the new HTML5 palette, install the plugin from here in the Plugin Portal:

Note: If you are focused on frontend development, i.e., with PHP and HTML5, make sure you downloaded and installed the "HTML5 & PHP" bundle of NetBeans IDE, which is small and light and comparable to Sublime, (and definitely not the "All" bundle, which is full of things you'll never need):

Wednesday Jun 03, 2015

Enterprise Web Development with Solid Knockout (Part 2)

Let's now use Solid Knockout to access data from a database:

To get to the above point, I made relatively few changes and, most importantly, I made those changes within the modular framework that Solid Knockout provides. Below, the files in green are new, the files in blue are changed.

To get started, expose data from your database via RESTful Web Services, which is trivial to do in NetBeans IDE. Then use the Knockout Client Generator plugin to generate the skeleton client in your application. You should have the two files shown above in green, i.e., rename them and move them to the places where you see them above.

Now we're going to rewrite those files a bit to make them fit in with the Require.js-based enterprise structure provided by Solid Knockout.

Here's the rewritten "customers.js", which will point to a different RESTful Web Service endpoint for you:

define(['knockout','jquery'], function (ko) {
    function CustomersModel() {
        var self = this;
        self.items = ko.observableArray();
                then(function (customers) {
                    $.each(customers, function () {
                            city: ko.observable(,
                            phone: ko.observable(,
                            name: ko.observable(,
                            addressline2: ko.observable(this.addressline2),
                            creditLimit: ko.observable(this.creditLimit),
                            addressline1: ko.observable(this.addressline1),
                            state: ko.observable(this.state),
                            fax: ko.observable(this.fax),
                            email: ko.observable(,
    return {
        viewModel: CustomersModel,
        template: {
            require: 'text!templates/customers.tmpl.html'

And here's the rewritten "customers.tmpl.html":

<div class="container-fluid">
    <table style="margin-top: 1.5cm" border="1">
        <tbody data-bind="foreach: items">
                <td data-bind="text: name"/>
                <td data-bind="text: city"/>
                <td data-bind="text: email"/>

Finally, in "initComponents.js", add your new component:

ko.components.register("customers", {require: 'js/modules/customers'});

And now, anywhere you want to see your customers, in your HTML view, e.g., in your "index.html", simply use it like this:

<div data-bind="component: {name: 'customers'}"></div>

Tuesday Jun 02, 2015

Enterprise Web Development with Solid Knockout (Part 1)

Solid Knockout is a template that encapsulates best practices for enterprise Knockout.js applications.

Essential to enterprise applications is modularity. Require.js is a popular solution for modularity in JavaScript applications.

Wiring up a Knockout.js application with Require.js is not a trivial task. Rather than figuring out how to include Require.js late in the development cycle, it makes sense to have a modular application from the start. That's the reason for Solid Knockout. It has Require.js included, with CSS classes from Bootstrap for providing a basic header and footer, each of which is a Require.js module, consisting of a JavaScript file and an HTML file.

The screenshot below shows you the structure you get out of the box with Solid Knockout.

When you run the application, you see this, i.e., you see the following header and footer, which you can customize and extend however you like, and then add the domain-specific application content in the main part of the page:

Solid Knockout can be found here:

Note: Go here to continue to part 2, where you'll learn how to add data via RESTful Web Services to the application.

Monday Jun 01, 2015

Trip Report: NetBeans Day UK

NetBeans Day UK was held on Friday. Attendees ranged from Java teams at financial organizations (e.g., to HTML5/JavaScript frontend developers (e.g.,, to university/college lecturers and students (e.g., from University of Greenwich and University of Kent).

Also read "13 things you missed if you were not at NetBeans Day UK" by Mark Stephens from IDR Solutions, who organized the event, many thanks Mark! (Also go to Twitter and search for #netbeansday to get some short reports on the event.)

It was especially cool to see devs trying out new technologies they learned about on their own codebase, e.g., below you see the Chrome Connector plugin being tried out live during one of the sessions, enabling the Chrome browser and NetBeans IDE to interact with each other for JavaScript/HTML programming:

Next time, the focus will be a lot more on hands on exercises and tutorials, so that attendees can actively participate in the sessions and go home with new code and techniques that will have been taught during the event.

The University of Greenwich was the location, which was a great location, for which we'd really like to thank Gill Windall and others from the university. Other universities participated too, such as the University of Kent, where BlueJ and Greenfoot are developed, and which were demonstrated, as well as a range of other technologies and organizations, such as the very interesting Praxis LIVE and Sharp Statistics. Praxis LIVE is a truly unique application, for doing hypermedia displays, comparable to Quartz Composer and Isadora, except that it is free and open source, created in Java, and full of really awesome features, including integration with TinkerForge.

Steve Millidge from Payara did an excellent all code, (almost) no slide, demo of creating a Java EE application and deploying to Payara, the "baddass fish" of the application servers!

An interesting highlight came from Nick from ionCube who demonstrated switching on and off his office air conditioning from the IDE! Dorine Flies talked about EPIK, while Luke Mayell showed Minecraft running from NetBeans, which was fun (and a great way to introduce programming to kids)! The day was started with a great keynote on the current state of Java, by London JUG leader Ben Evans, as well as a session (by me) about the NetBeans community, roadmap, unique features, and some small NetBeans demos. With the various contacts that have have been established in the UK, we're looking forward to doing more events in the UK, at least one more in England this year, including sessions and courses dealing with Java, JavaScript, Java EE, Cloud, etc.

NetCAT (the NetBeans Community Acceptance Testing program) was well represented by Mark Stephens from England, John McDonnell from Ireland, and Holger Stenger from Germany! During his session, Mark explained in some detail what NetCAT is all about, watch his session here and here on YouTube.

The lunch and coffee breaks were sponsored by Payara, IDR Solutions, EPIK, ionCube, and jClarity. The day ended with a prize draw, where various organizations had contributed prizes, such as books, t-shirts, and licenses. It was the first time that we've had booths at a NetBeans Day. Several of the above ran a booth and had interaction etc with users:

Throughout the day, recordings were done for the next NetBeans Podcast, which should be out sometime in the coming weeks.

It was great for everyone to see the great turn out and the plan is to have the next NetBeans event in the UK toward the end of this year. If you missed this event, no worries, the next one will be announced here and elsewhere, planning will begin once everyone has recovered from the above event!

Thursday May 28, 2015

HTML5: audio, video, 'required', and data list in NetBeans IDE

HTML5 rocks. Take a look at some of the new HTML elements you can work with out of the box.

Each of the screenshots below can be enlarged, so that you can see how NetBeans IDE, with its new support for shadow DOM elements in the upcoming NetBeans IDE 8.1, can help you understand and style these new HTML elements, of which there are several more but these, audio, video, 'required', and data list (i.e., code completion) are especially cool.

Looking forward to exploring more of these and showing how to work with them and style them, e.g., see this.

Also, I'm going to make an HTML5 Palette for NetBeans IDE, which will make it much easier to know which new HTML elements are available, while providing you a GUI for filling in some of the basic values. Code completion and documentation is already integrated, but an HTML5-specific palette would be pretty handy!

Wednesday May 27, 2015

Into the Shadow DOM

Shadow DOM is the subtree of DOM elements that the browser can include into the rendering of a document, without it being rendered into the main document DOM tree.

A complex HTML element, of which several have been introduced in HTML5, such as the HTML5 slider (input type "range"), is constructed via shadow DOM elements. In the HTML elements below, you can see the slider is used, because input type is set to "range", though you do not see the shadow DOM elements that will be used to construct the slider.

Would be handy if you had a tool to inspect the shadow DOM elements within the HTML5 slider and other main DOM elements that have shadow DOM elements. And NetBeans IDE 8.0.2 provides no help, either. Here's how the HTML5 slider above looks in the Browser DOM window of NetBeans IDE 8.0.2:

However, here it is again, in the upcoming NetBeans IDE 8.1, which, as you can see below in the Browser DOM window, includes support for the shadow DOM (click to enlarge the screenshot below to see the full context). Compared to the screenshot above, I can now inspect the shadow DOM by expanding the subnodes of the main input DOM element, while being able to see its shadow DOM elements:

When a shadow DOM element is selected in the Browser DOM window, as shown above, the embedded browser (and the Chrome browser) automatically selects it so that you know where you are and you can quickly find the elements in the browser, even when they are shadow DOM elements.

Moreover, as you can see below, you can select an element within the shadow DOM and then style that specific element in the CSS Styles window:

In the above scenario, I can press the Up arrow key over the height property, which is highlighted above, and then magically I will see the slider in the browser increase in size, because the related style is automatically changed for me, enabling easy and quick tweaking of the style applied to the shadow DOM element.

Further reading and references:

Tuesday May 26, 2015

Knockout.js Community Interview: Ryan Niemeyer

NetBeans IDE, over several releases now, has been building up an awesome set of tools for frontend web development with Knockout.js:

And there's also a handy plugin for generating a Knockout frontend for a Java EE backend:

These features include a bunch of different things, such as intellisense and documentation within Knockout's data-bind attribute... well as intellisense for the attributes of Knockout components, as shown here:

So, to explore Knockout more broadly, it's time for the NetBeans community to get to know the Knockout community a bit better! To that end, Ryan Niemeyer, one of the active Knockout community members, has kindly responded to some 'getting to know you' questions I recently sent him.

Hi Ryan, thanks for taking the interview, can you tell us a bit about who you are and what you do?

My name is Ryan Niemeyer and I am a web developer who has been in the software industry for over 16 years. I work for a great company called LeanKit ( We have an awesome product for visualizing workflows and I have the chance to work with many wonderful and talented folks. I work remotely from the Madison, Wisconsin area and live with my wife and two girls (7 and 4). I have been interested and involved with open source projects as well for the last 5 years, which has been a very enjoyable and valuable experience.

How and when did you get involved with Knockout.js?

I have always been interested in templating and data-binding technologies. I did a lot of XML/XSL work years back and the combining data with a description of how to present it (a template) always made a lot of sense to me. Eventually I started working with jQuery and jQuery templates, which I felt was a quite powerful tool at the time.

Finally, in 2010 when Knockout was first released, it just clicked for me right away. Knockout was able to eliminate so much of the spaghetti code normally required to wire up an application. At the time, I did not have a ton of my own problems to solve with Knockout, so I started getting heavily involved in the Knockout forums and answering questions on StackOverflow. Soon after that, Steve Sanderson, the author of Knockout, asked me to join him on the core team.

You have a very active Knockout.js blog—what are your aims with it and what should one expect to find there?

My blog is at When I started the blog, there wasn’t a lot of information about Knockout available on-line other than from the official site ( The blog gives me a chance to share some ideas that I have had for solving problems, introduce plugins that I have written, and provide additional background when there are Knockout releases. My posts have been a bit more infrequent lately, as life is busy at the moment, but I certainly intend on keeping the blog going of the long-term.

What do you consider to be the most awesome features of Knockout.js?

I think that Knockout has a very low barrier to entry. It is easy to learn and stays very focused on data-binding and templating concerns. Knockout definitely provides plenty of extensibility points to allow advanced usage, but you can be productive with it right away.

I believe that another great feature of Knockout is that we have worked hard to maintain backwards compatibility and support browsers all the way back to IE6.

There are many other frameworks in the JavaScript ecosystem, what are the strengths/weaknesses of Knockout.js versus others you may have used, e.g., AngularJS?

Tools like Angular and Ember are definitely focused on providing more of a complete out-of-the-box experience for an entire web application, while Knockout stays focused on just the data-binding and templating pieces.

Some like to build their own stack by combining the most appropriate tools for their situation and Knockout can work well with a variety of other libraries.

What are the tools that you've been using with Knockout.js?

Many people can be pretty productive with Knockout in just about any tool. For most uses, it has a pretty low API surface area. I tend to use WebStorm or Sublime Text 3, but have tried a variety editors.

You've seen a bit of the NetBeans tooling via recent blogs—what do you think of them? 

The tooling around Knockout in NetBeans looks very impressive. Having intellisense and even help information is really useful and powerful.

Anything else you'd like to share with the NetBeans community? 

It is an exciting time for web development, as there are so many tools and solutions that are improving each day. I would encourage everyone to add Knockout.js to their list of solutions to evaluate for their web development projects.

Monday May 25, 2015

New: Maltego Training Video for Absolute Beginners

If you've just downloaded Maltego, which is based on the NetBeans Platform, and you're not sure what to do next, you should watch this new introduction video, released this month:

Sunday May 24, 2015

YouTube: Arquallian and NetBeans IDE

Great new screencast, by Thomas Jost, about using NetBeans with Arquallian:

Also see this excellent article from a while ago on the same topic by NetBeans Dream Team member at Red Hat Markus Eisele:

Thursday May 21, 2015

Open LaTeX Studio

Open LaTeX Studio is a lightweight LaTeX editor, with LaTeX code syntax highlight, code completion and live preview of the document in edition. It allows generating PDF files from the editor and provides Dropbox support, by allowing to connect the application with the Dropbox account, saving and uploading files to the remote directories and providing version control of the remote files. The application is delivered for the Windows and Linux platforms.

The project is Open source and is developed as a part of the master's thesis of Sebastian Brudziński.

It is built using the NetBeans Platfrorm 8. The code repository is located at:

and the application website is:

Wednesday May 20, 2015

NetBeans Day Twente

Today NetBeans Day was held in Twente, which is an area in the east of the Netherlands, with a high population of grass and farm animals. The turnout was great, exactly as expected, though the narrow focus on MooTools, while relevant for the audience, limited active participation to cows only:

The photo above was taken during the workshop "JavaScript Developers Are Basically Sheep", which had as a subtitle "Weakly Typed Languages Are For The Birds".

Did you miss NetBeans Day Twente? Not to worry, there's NetBeans Day UK coming up end of this month and NetBeans Day Brazil end of the next!

Monday May 18, 2015

Knockout Simplicity for Bootstrap.css (Part 2)

Continuing the theme from the previous blog entry, here's the current state of my 'menubar' component, i.e., this is all I need to put into an HTML file... get this:

The above is a Bootstrap.css menubar, created from the Knockout component shown above.

The HTML below is the template that styles the menubar, notice that there's JavaScript logic, thanks to Knockout, within the template:

Finally, here's the business logic that connects the template to the component, which receives its parameters from the component:

Sunday May 17, 2015

Knockout Simplicity for Bootstrap.css (Part 1)

Imagine you need to create a menubar for your website:

If you had a choice, which of the two below would you choose as the way to express your menubar?

In both cases, you start by declaring Bootstrap.css:

<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

However, which of the two would you prefer to use, after you have added the stylesheet reference above?

Option 1:

Option 2:

Of course, it's up to you and I won't judge you either way. However, to me, option 2 is much simpler and more expressive. Plus, I can use it in any website where I need a menubar, i.e., it's a simple lightweight generic tag in my HTML ready to be used anytime I need a menubar. It also means I don't need to type all that error-prone HTML code and it is also a lot more readable, as well. It looks a bit like JSON, while option 1 is very heavily loaded with angle brackets and other superfluous noise.

Option 2 is a Knockout component.

It is created like this, in my 'appViewModel.js' file:

ko.components.register("menubar", {require: 'components/menubar/menuBar'});

The above points to a JavaScript file named 'menuBar.js', which has this content:

define([], function () {
    function MenuBarModel(params) {
        self.menus = [];
        for (var key in params) {
            if (key.substring(0, 3)==('tab')) {
    return {
        viewModel: MenuBarModel,
        template: {
            require: 'text!components/menubar/menuBar-template.html'

Above you see the 'template' binding points to an HTML file, which has this content:

<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav" data-bind="foreach: menus">
            <li data-bind="css:  { active: $data.substring(0,1) == '*' }">
                <a data-bind="attr: { href: $data.substring($data.indexOf('/')+1) }">
                    <span data-bind="text: $data.substring(1,$data.indexOf('/'))"/>

And now you can make the menubar a lot fancier:

By means of the above, we have a simple syntax to define (1) the active menu, (2) the name of the menu, and (3) the URL that is returned when the menu is clicked. The Knockout 'menubar' component figures all these things out under the hood so that the user of the menubar doesn't have to think about it themselves. They simply specify the values that should be passed into the component and the component parses the value and figures out what to do with it.

The above provides a simple and comprehensive architecture for component-based development with JavaScript.

Friday May 15, 2015

require.config with Knockout in NetBeans

The application structure discussed yesterday is as follows:

Thanks to require.config, here's a significantly cleaned up version of the code discussed yesterday in 'init.js':

    baseUrl: './',
    paths: {
        knockout: './bower_components/knockout/dist/knockout',
        text: './bower_components/requirejs-text/text',
        appViewModel : './scripts/appViewModel'
    waitSeconds: 2
require(['knockout', 'appViewModel', 'text'], 
   function (ko, appViewModel) {
     ko.applyBindings(new appViewModel());

Putting the above together was simplified via the code completion and documentation in NetBeans:

What's also pretty handy is that you can see all the available configurations when you call up code completion before the start of a word within a 'require.config' block:

And here's the 'appViewModel', also significantly cleaned up, thanks to the 'require.config' in the 'init.js' above:

function (ko) {
    return function appViewModel() {
        ko.components.register("user", {
            viewModel: function (params) {
                this.firstName = ko.observable(params.firstName);
                this.lastName = ko.observable(params.lastName);
                this.fullName = ko.pureComputed(function () {
                    return this.firstName() + " " + this.lastName();
                }, this);
            template: {require: 

Again, notice the editor support below, not only syntax coloring, but when you hold down the Ctrl key and move your mouse over the file reference in the 'text' binding, in line 16 below, the reference becomes a hyperlink, which can be clicked to open the related file.

As shown yesterday, the final step of this scenario is to actually make use of the 'user' component in the view, where again NetBeans has helpful code completion to support you:

The application is modulerized and wired together via RequireJS, with its 'data-main' attribute, e.g., in the 'index.html', where the above is found, there is also the below, providing the entry point into the application, which is the 'init.js' file with which this blog entry started:

More on RequireJS (sorry for the poor audio):

Thursday May 14, 2015

How to Separate HTML Templates in Knockout Apps

A problem with the solution discussed in the recent YouTube clip about component-based Knockout.js development is that you end up with your HTML template embedded in your JavaScript file, as shown below:

From a tooling perspective, the above is suboptimal because you're not able to benefit from code completion and syntax coloring that an HTML editor provides. One approach would be to create an extension to NetBeans that would somehow recognize the above construct as being HTML (i.e., if a "template" binding is encountered, treat everything that follows as HTML), which is doable and something I'll take a look into (using this as a starting point). And here's the initial result of looking into this, i.e., compare the string in the pic above to the string in the pic below; in the lower pic notice the HTML syntax coloring:

However, in a real Knockout application, you're more likely to separate out your HTML into separate files, thus making it possible to hand those HTML files over to your front-end designers, while you continue working separately on the business logic in your JavaScript files.

Starting with this useful article on the Knockout site, I restructured the application discussed in the YouTube clip so that its HTML is now separated out from the JavaScript, which has as an added benefit that all the Knockout support features available out of the box in NetBeans are available to you:

To get to the above point, I followed various articles where 'requirejs' and 'requirejs-text' are described. My application now looks like this:

And here's my 'appViewModel.js', which still has some work to be done to it (which is discussed here), i.e., I need to use 'require.config', which is the next topic I'll be looking at. However, in the meantime, here's how things are set up to get to the above point:

function (ko) {
    return function appViewModel() {
        ko.components.register("user", {
            viewModel: function (params) {
                this.firstName = ko.observable(params.firstName);
                this.lastName = ko.observable(params.lastName);
                this.fullName = ko.pureComputed(function () {
                    return this.firstName() + " " + this.lastName();
                }, this);
            template: {require: 

The rest is the same as here. Finally, as in the YouTube clip, you use the above defined 'user' component in your 'index.html' as follows, again supported by code completion and other Knockout-friendly features in NetBeans:

Wednesday May 13, 2015

YouTube: Component Based Development with Knockout.js

Knockout.js has some extremely handy facilities for doing component based development, as shown in this brand new YouTube screencast:

Tuesday May 12, 2015

Eclipse Recommenders for NetBeans IDE (Part 2)

Following on from part 1 of this series, here's two interesting screenshots to look at:

Above you see Eclipse code recommenders for NetBeans APIs, which is something Andreas Sewe and Marcel Bruch, from the Eclipse code recommenders project, have been working on, together with some NetBeans guys.

Also read Marcel Bruch's tweet on this topic:

Imagine how much easier it will make learning the NetBeans APIs if the code completion box, as shown above, recommends methods to you based on the API class you're currently coding against? Really useful, indeed.

Watch this space for further development.

Monday May 11, 2015

Selecting Content Between Braces with Ctrl-Shift-[

The question of the day comes from my colleague JB Brock who asks: "Is there some key combination (shortcut) in NetBeans that allows me to jump between an opening brace and closing brace, or even better, the ability to select everything between braces? I'm working in a JSON file and want to select a full object between { } braces.  Just looking to see if there is something that could make my life a little easier as I have 105 of these little sections that I need to strip out."

Here's how to do it. Below, notice that my cursor is on line 6, right before the opening brace, which means that its closing brace is helpfully highlighted so that you know which brace is the current opening brace's closing brace:

Now I press Ctrl-Shift-[ and this is the result:

Now you can press Ctrl-C to copy the selection to the clipboard.

In the next scenario, notice that my cursor is still in line 6, this time on the other side of the opening brace:

When I press Ctrl-Shift-[ in the above scenario, the selection covers everything excluding the opening and closing brace:

Now, again, press Ctrl-C and the content above is on the clipboard.

The above works in any other kind of file, as well, e.g., in Java, JavaScript, HTML, etc., which is precisely why it is great to have an integrated development environment—everything you know from one context has the potential to seamlessly be used in another context.

Thursday May 07, 2015

AspectJ and NetBeans IDE 8.0.2

Here's a very nice YouTube screencast created over the last day or two by Valhalla Data Systems about AspectJ support in NetBeans IDE 8.0.2.


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.


« July 2015