Thursday Sep 19, 2013

NetBeans 7.4 Release Candidate, with Cordova support

NetBeans IDE 7.4 has reached an important milestone: Release Candidate 1. This means that it is pretty much usable for day to day development, and we expect only a handful of fixes before it hits the final release. You can download the RC1 build from

NetBeans 7.4 Release Candidate

Among other features and improvements, one notable feature included in NetBeans 7.4 is the new Cordova development support. This feature was not mentioned in this blog until now, because lately we have been busy updating NetBeans to the new Cordova 3.0 release. So, we are pleased to say that NetBeans 7.4 supports this new Cordova release.

Browser switcher with Cordova Mobile development options (scaled down)

Geertjan has a great screencast, whose first part covers getting started with Cordova in NetBeans, and whose sequels will explain all the features in depth. For the impatient, here is the list of features for Cordova development in NetBeans IDE 7.4:

  • Cordova project wizard
  • Building Cordova projects for Android and iOS targets
  • Running on Android and iOS devices and emulators
  • Quick testing on desktop browsers/emulators, such as Chrome with the Ripple emulator
  • On-device visual CSS editing on iOS devices (and iOS Simulator)
  • On-device JavaScript debugging on iOS devices (and iOS Simulator)
  • Cordova sample project included

Visual CSS Styling of Cordova projects on the iOS Simulator

Or, try them out for yourself in NetBeans 7.4 Release Candidate 1.

Tuesday Jul 30, 2013

KnockoutJS Web Apps with NetBeans

NetBeans 7.4, now in Beta, has great support for Knockout.js built-in. Here are a couple of screencasts showing how easy it is to do binding, REST, and event handlers.

Basic Bindings


Event Handlers

Monday Jul 15, 2013

NetBeans 7.4 Beta release

NetBeans 7.4 Beta

NetBeans IDE 7.4 Beta was released today, and you can download it now from the release page. As the second release in a row that focuses on HTML5 development, it includes a number of features in this area, such as:

The complete list of new features is available in the New and Noteworthy document. All these features are a part of the beta release, so you can try them out right now. We will be focusing on stabilization and bugfixing for the next couple months, so if you find any problems with the beta release, please don't hesitate to file them in the bug database

Again, hit this link to download NetBeans IDE 7.4 Beta. 

Tuesday May 14, 2013

Develop Mobile Web Applications On Your Android Device

This blog post introduces another exciting new feature in the upcoming NetBeans IDE 7.4. Namely, JavaScript debugging and visual CSS editing on Android devices. So without further ado, let's see how it works.

As a prerequisite, you will need an Android 4.x device. Let's do some setup steps that you only need to do once. First, install the Chrome browser on the device. The Chrome browser is available in the Play store.

Chrome browser for Android 4.x in the Google Play store

Next, you will need to turn on USB debugging both at the system level and in the Chrome browser, which can be done in Android's Developer options in the phone settings. Note that on Android 4.2 and newer, Developer options is hidden by default, so we need to unhide it first. To do that, go to Settings > About phone option in settings, and tap Build number seven (7) times. Then return to the previous screen, and you will find Developer options.

Once Developer options are present, you will see the USB debugging checkbox inside this category. Make sure it is checked.

Next, open the Chrome browser, go to Chrome settings, and under Advanced > Developer tools, check the Enable USB Web debugging checkbox.

Turning on USB debugging in Android Turning on USB debugging in Chrome on Android

We will also need to set up the Android SDK and point NetBeans to it. In NetBeans, go to Tools > Options (or NetBeans > Preferences on Mac OS X), choose Miscellaneous > Mobile Platforms, and specify the location of the Android SDK. In case you don't have the Android SDK installed on your machine, the dialog provides a convenient link to the SDK's download page. This completes the one-time setup.

Setting the Android SDK location in IDE options

Now, to start developing your web application on your Android device:

  • Connect your machine and the Android device with a USB cable
  • Connect your developer machine and the Android device to the same Wi-Fi network (this is necessary so the device can access the web server running on your computer)

As our testing application, we will use the AngularJS Phone Catalog application that is bundled as a sample in NetBeans, but you could of course use any HTML5 application - or a Java web application or a PHP application, as described in a prior blog post

To run the application in Chrome on your Android device, click the new browser switcher icon in the main NetBeans toolbar, and select Android Device (Chrome).

Switching to Chrome browser on Android device

Next, just run the application, and the application will open in Chrome on your device.

Let's now see how we can tweak the style of this application directly on the device. You will notice that in the IDE, a couple more windows opened: Browser DOM and CSS Styles. The Browser DOM window displays the real DOM tree as rendered by the browser on your device. When you select elements in this window, the CSS Styles window refreshes to show the CSS styling information for the currently selected element.

Browser DOM and CSS Styles windows

More interestingly, as you select (or hover over) elements in the Browser DOM, the current element will be highlighted in the page on your device.

Hovering over Browser DOM elements highlights the element on your device

Next, we will want to select elements on the device in order to change them. If we were using the desktop version of Chrome, we could do this by turning on Inspect in NetBeans Mode using the menu item provided by the NetBeans Connector for Chrome. But as Chrome for Android does not support extensions, we will do this using the Inspect Mode in the Browser toggle button at the top right of the CSS Styles window.

Turning on Inspect Mode

Once Inspect Mode is on, the interaction now works in the other direction: tap elements in the page on your device, and both Browser DOM and CSS Styles windows will be synchronized. Once we have selected the element whose style we'd like to modify, we can just do so using the bottom part of the CSS Styles window (Property sheet), and the change will be reflected live on the device. For example, this is the result of increasing the font size of the description text from 13px to 22px.

Modifying CSS style with NetBeans on a mobile device

Note that this example is illustrative only - in a real world example we would likely use media queries to achieve good appearance on both mobile and desktop clients. Speaking of which, media queries (as the main tool to do responsive web design) are supported in NetBeans' visual CSS editor.

Next, we may want to debug the application. For example, to see what happens when we click on an individual item in the list of phones in our application, we will place a breakpoint on line 16 in controllers.js. But in order to tap the item, we first need to turn off Inspect Mode using the toggle button in the CSS Styles window. Then after tapping the item on your device, the IDE will stop on the breakpoint.

Debugging JavaScript on the mobile device

Now we can inspect the variables, step through the code, see the call stack, and in general use all the features of the NetBeans JavaScript debugger.

All this support will be included in NetBeans IDE 7.4, which will be released later in 2013. However, you can already try this out now in a recent nightly build of NetBeans 7.4.

Monday Apr 29, 2013

Emmet plugin for NetBeans 7.3

Emmet is an amazing tool that greatly improves the coding productivity for web applications. It is well known among web developers, and in fact, many NetBeans users have requested support for Emmet in NetBeans. The good news is that thanks to Sergey Chikuyonok, the creator of Emmet, and Lorenzo Stanco, the author of the original Zen Coding plugin, the Emmet plugin is now available on the Update Center for NetBeans IDE 7.3 (as well as 7.2). Let's see how it works.

First, we need to install the plugin. In your NetBeans IDE 7.3, choose Tools | Options in the main menu, and select Available Plugins

Installing the Emmet plugin in NetBeans 7.3

In the Search field, type Emmet, and the plugin will be found. Check the Install checkbox, press the Install button, and follow the plugin installation wizard. At the end of the wizard, you will be prompted to restart the IDE.

Once the plugin is installed, you will notice that there is a new Emmet submenu in the IDE's Edit menu, which gives you access to all the great features of Emmet. In addition to this, the most important Emmet actions have keyboard shortcuts, so you will not need to use mouse to activate them.

Main Emmet menu in NetBeans IDE

For example, type the following text inside a HTML document in NetBeans: #page>div.logo+ul#navigation>li*5>a{Item $}.

Emmet abbreviation

 When you now press Ctrl-Alt-N (or Ctrl-Cmd-N on Mac), the magic will happen, and this text will be expanded to 10 lines of HTML code, that would be pretty tedious to type manually:

Code generated by expanding an Emmet abbreviation

Note that the keyboard shortcut for all Emmet actions (including Expand Abbreviation) can be defined in IDE options - just go to Tools | Options | Keymap.

Configuring Emmet keyboard shortcuts

This screenshot also illustrates that beyond expanding abbreviations as shown in the example above, Emmet offers numerous other features and actions, that are worth exploring. Additionally, Emmet supports extensions that further enhance its functionality. Extensions can be set up in NetBeans using Tools | Options | Miscellaneous | Emmet, so IDE users can take advantage of them.

Emmet extensions configuration in NetBeans

For more information, check out also the official README for the NetBeans plugin at the Emmet website. 

Wednesday Apr 24, 2013

HTML5 development in Java EE and PHP projects

During the NetBeans 7.3 release cycle, the NetBeans team received a lot of great and positive comments about the HTML5 development features, known as Project Easel. At the same time, we received one piece of feedback very often: while these new features are currently available in the HTML5 (i.e. client-side-only) project, users would like to use them with their existing Java web applications and PHP applications. This blog post describes how this is being addressed for the NetBeans 7.4 release.

To walk through the new features, we will use a Auction application sample, which is a Maven-based Java web application, which also happens to be using some new Java EE 7 features, such as Java API for WebSocket. For the client-side part, it uses plain HTML5 code, i.e. no server-side web framework, just ordinary HTML/CSS/JavaScript code. (Though we could use an Ant-based Java web project or a PHP project just as well - the workflow would be analogous.)

Auction sample Maven project

The first thing you may notice in development builds of NetBeans 7.4 is the new web browser switcher in the main toolbar. This switcher is the entry point to the NetBeans Visual CSS editing and JavaScript debugging features - though it can also be used to conveniently and easily test your application with various browsers. 

Browser switcher in the main toolbar

As an aside, you may be wondering what the iOS and Android items in the browser list are - but this is a whole new topic that deserves a separate blog post, so let's not worry about these for now.

An analogous browser switcher is also available in the project properties - here is the one for Maven web projects.

Browser switcher in the project properties of a Maven project

 Let's select one of the browsers that provides integration with NetBeans - such as Chrome with NetBeans Integration. When we now run the project, NetBeans will deploy it to the application server (e.g. GlassFish) as we would expect, but it will also connect to the Chrome browser. This is indicated by the NetBeans icon in the address bar, and the yellow infobar in Chrome.

NetBeans IDE is connected to Chrome.

Thanks to this, you can use all the Project Easel features with this Maven project, such as:

One nice side effect of this is that if you run your server in debug mode (by choosing Debug Project instead of Run Project), you can now debug both the client and the server at the same time: now there are two debug sessions available (one for Java and the other for JavaScript), and you can easily switch between them.

Debugging client-side and server-side code at the same time

 Let's now see what Visual CSS Editing looks like with our project. When we click the NetBeans icon in the Chrome address bar, we can enable Inspect in NetBeans Mode.

Enabling Inspect in NetBeans Mode

After that, we can hover over elements in the NetBeans navigator to highlight the corresponding element in Chrome, or vice versa. Most importantly, we can modify CSS properties using the NetBeans CSS Styles window, and the changes will be reflected in the browser and in the source code. The following screenshot shows the NetBeans CSS Styles window side by side with Chrome.

Visual CSS Editing

Besides the features we've covered so far, many other features are now available in Java web projects (Maven as well as Ant based) and PHP projects:

 To try out all these features with your Java or PHP web application,  get the latest nightly build of NetBeans 7.4, and please leave your comments below.

Friday Apr 12, 2013

Editing CSS Preprocessor Sources

Using plain CSS files in today's complex web applications often quickly reaches the limits of the technology and lot of people bothered by maintaining huge amount of styles calls for help. Though CSS3 tries to address some of the complains, the new modules specification creation process is quite slow and the adoption of the results in browsers is not instant. 

Several CSS preprocessor frameworks addresses most of the sore points of using plain CSS and adds plenty of useful features like nested rules, variables, mixins, useful functions and much more. 

The NetBeans editor now supports the most common frameworks: SASS (Sassy CSS syntax) and LESS.

Here is the list of basic features:

  • syntactic and semantic (parser based) coloring for the language constructs, 
  • indentation, simple reformat of code, 
  • code folds, 
  • go to declaration, mark occurrences, instant rename for variables and mixins 
  • code completion for variables and mixins,

  • vars, mixins and imported files shown in the navigator, 

  • find usages and refactor rename among files.

  •  code templates

Please give it a try, we're looking forward to your feedback! 

Tuesday Mar 26, 2013

What works better for you? NetBeans IDE or Chrome Developer Tools?

I've heard variations of this question many times: Is the JavaScript Debugger in NetBeans IDE  better than the one in Chrome Developer Tools (CDT)? How do they compare feature by feature? Why should I use the one in NetBeans instead of the JavaScript debugger in CDT?

Apples and Pears

While it is tempting to put together a feature matrix with one column for NetBeans and the other column for CDT, and then compare the number of checkboxes, this comparison would not make much sense. Because it is like comparing apples and pears. No, that's misleading too. It is like comparing a car factory (NetBeans IDE) with a car mechanic (CDT). Both car factory and car mechanic have a very vast and detailed knowledge about cars but they also have a very different focus. A car factory knows what steps there are to build a car from scratch and everything is optimized around this primary function - to build a new car of a certain brand. A car mechanic, on the other hand, is not concerned with most of the aspects of car manufacturing. The primary function of a car mechanic is being able to find what's wrong with a car and fix it. Regardless of the car brand, age, size, and state. You would not ask your local car mechanic workshop to build you a new car, would you? Neither would you drive your Subaru into the Ford factory to get it fixed.

Let's play with this metaphor a little bit more. How does NetBeans help you to build your project from scratch? It tightly integrates many separate tools to work seamlessly and optimizes the daily workflow of a typical developer. It comes with:

  • templates for project creation (e.g., Bootstrap, HTML5 Boilerplate, AngularJS Seed, your custom one, etc.)
  • support for components and libraries (e.g., integration)
  • support for project version control (e.g., GIT, HG, SVN, local versioning, etc.)
  • support for project compilation (e.g., PhoneGap; coming  very soon is SASS compiler)
  • editor with syntax coloring, semantic features like refactorings, active error recognition, code assist, code navigation, etc. (JavaScript, HTML, CSS, SASS, etc.)
  • support for problem diagnostics (e.g., JS debugger, network monitor, etc.)
  • server to run your project on
  • support for writing, running and debugging of unit tests (e.g., jstestdriver runner)
  • support for editing visual part of your project (e.g., CSS styling)
  • support for different target browsers (e.g., Chrome, Embedded WebKit, Android, iOS, PhoneGap native apps)

Seamless Integration

The true advantage, though, is in the seamless integration. An example of what I mean: with a few mouse clicks you can create a new project which uses, e.g., the AngularJS Seed project template; press F6 to start an internal server and open the project in a browser; type some JavaScript and save it and the browser will reload your project automatically; debug your JavaScript code directly in the editor in which you authored it - as simple as adding a breakpoint to a line in the editor; open Browser Log window to see a runtime exception in your code and click on the stack trace to go directly to offending line and column of the code using the same JavaScript editor; with a few clicks create a config file for JsTestDriver and debug unit tests just as regular JavaScript files; get outstanding code completion for jQuery and other selected JS libraries; etc.

This kind of integration is hard to achieve when using disparate tools. Not surprisingly, it was also the number one request in a recent FireFox Dev Tools study.


Using still the same parallel, where the CDT excels is in the role of a car mechanic of web applications. It does not matter who produced the application, nor how, and it does not matter which languages they used, how small/big/new/old the application is, none of this matters. The CDT is there, ready to help you figure out the problem and repair it. And it comes with a very rich set of features suitable for this surgical task.


Now, obviously, there are features which overlap and which both IDE and CDT need. When writing code from scratch, or fixing code at runtime, you always need a JavaScript debugger and some editor. Similarly, for creating a brand new UI or tweaking an existing UI, you need styling support.

There are also areas which, IMO, distinctly belong to a single party only. For example, fine tuning performance should be done in the browser in which the application will run. Project management aspects, on the other hand, should be left to IDEs to deal with as most of the tasks are browser agnostic.


So to answer the original questions which triggered this article: both NetBeans IDE and CDT meet the needs of editing, styling, and debugging but they have different strengths and, according to the task at hand, you should pick one or the other and utilize their strengths to your advantage.

On a more idealistic note, I think there is an opportunity for both IDEs and browsers to cooperate more tightly. It's been really great that efforts like the Remote WebKit Debugging protocol has allowed IDEs and other tools to get inside browser internals and build better tooling for developers. To reciprocate, perhaps we should prototype some APIs through which IDE-like tools could share their project context with the browsers. That is, in the CDT case for example, there could be a CDT API callback which CDT could call to retrieve information like: how to map URL to a file in the local filesystem?; where is the source map file for a given production file?; which project files/folders are relevant for the URL being currently opened?; does this file requires compilation? compile the given file; etc. And tools like NetBeans IDE could implement this callback for all NetBeans projects. That way CDT can work better and developers, you and I, will be better off too.

What do you think?

Sunday Mar 24, 2013

Network Monitor for REST and WebSockets communication

One of the features which we have not managed to finish for NetBeans 7.3 was a Network Monitor. When developing an application which talks to a server all sorts of problems can happen. Server may not respond and simply abort communication; server may send different data than expected; the data which our application sent to a server were not processed on the server as expected; etc. In times like that it is invaluable to be able to analyse what exactly is being exchanged between the server and our application. Did our application used the right URL? did it set right request headers? what exact data are being send to server? what exact data has server responded with? in what format the data are? These and other questions can now be answered with help of the Network Monitor. The feature just landed into nightly builds of next NetBeans release. It is not completely finished, the UI needs to be polished but it is good enough for a first round of review.

Let's look at what it does. When running a project in "Chrome with NetBeans Integration" browser or "Embedded WebKit" browser the Network Monitor monitor window will open automatically similarly to the Browser Log window or debugging session windows:

As I said the UI is preliminary. Trigger a REST or WebSocket communication in your browser application and you will notice network requests to start appearing in the Network Monitor UI. As mentioned on the previous screenshot not all network requests are monitored. The focus of NetBeans network monitoring is to help resolve common problems which happen during development of applications which are using REST and WebSocket communication. Network requests like loading of static resources (ie. images, css, etc.) are automatically filtered out. If you need to see those you can analyse them directly using your browser tooling for example in Chrome Developer Tools. However, any network request which fails is logged and brought to attention regardless of whether it is REST, WebSocket or plain static resource request.

Let's look how network requests are presented:

Above screenshot shows three network requests recorded. First one failed and is therefore shown in red color. The last one is a call to the Twitter Search REST API and shows request and response headers. Switch to Response tab to see data received from the service:

The response from server in this case is JSONP (notice that content-type in the response headers in previous screenshot was "application/javascript") and IDE automatically extracted JSON data from the javascript response and reformatted the single line JSON stream into a more readable form. If it is desirable to see data as they came from the service just tick "Raw Data Response" checkbox at the right bottom corner. In this instance the outcome is:

The last tab shows callstack which triggered this network request and links allow you to quickly dive into your application's code:

For monitoring WebSocket communication the UI is similar but instead of response data you get to see list of textual frames as they happen:

Blue color indicates that WebSocket request is still open and more data frames may be received/sent.

When a network request fails the Network Monitor shows server's status code in the Headers panel, for example "404 - Not Found". There is one error case which the Network Monitor is distinguishing and trying to provide more help than that. It is the case of REST service call which your browser aborted due to Same Origin Policy:

This can happen for example if you are developing REST service and deploying it to a GlassFish server (which by default runs on port 8080) and at the same time you are trying to access this REST service from your HTML5 project which runs on NetBeans lightweight web server (which by default runs on port 8383). In this scenario browser's Same Origin Policy stops your JavaScript code from accessing REST service because the policy says that JavaScript can access only resources on the same server, using the same port and the same protocol.

There are few options how to resolve this. You could run both projects on single server. Or you could enhance your REST service to support JSONP and use JSONP from your JavaScript which would workaround the Same Origin Security policy. However, if you plan to make your REST service publicly accessible then the best approach is to utilize Cross-Origin Resource Sharing (CORS) and amend your REST service to tell browser that it can be called from different domains. For REST services developed in the NetBeans using Jersey this can be as simple as following the "Jersey Cross-Origin Resource Sharing Filter" wizard (in the Web Services category) to create subclass of Jersey's ContainerResponseFilter SPI and provide all necessary CORS headers:

 public class NewCrossOriginResourceSharingFilter
              implements ContainerResponseFilter {
    public ContainerResponse filter(ContainerRequest request, 
                                    ContainerResponse response) {
            "Access-Control-Allow-Origin", "*");
            "Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
            "Access-Control-Allow-Headers", "content-type");
        return response;

The wizard automatically registered the filter in web.xml for you.

Hope you find this feature helpful! Any feedback or suggestions are appreciated.

Thursday Feb 21, 2013

NetBeans IDE 7.3 is out!

NetBeans IDE 7.3, featuring the new HTML5 development support also known as Project Easel, was released today. 

NetBeans 7.3 Overview Video

A great way to explore the new HTML5 features in this release is to watch the screencasts accompanying the release:

The summary of the HTML5 development features is available at the NetBeans IDE Features page. This page also contains the links to the HTML5 development tutorials:

Or, just download NetBeans IDE 7.3 and try it out yourself. 

Thursday Feb 07, 2013

Release Candidate Two

NetBeans 7.3 Release Candidate 2

 The second Release Candidate of NetBeans 7.3 is out and can be downloaded now. This means that the final release of Project Easel is just a couple weeks away. While NetBeans 7.3 is still going through the final test cycle, we feel pretty good about the quality. In the recent weeks, several serious issues and performance problems have been fixed, so if you are using an older build of NetBeans 7.3, we encourage you to install this latest Release Candidate to reap the benefits of improved stability and speed.

Wednesday Jan 23, 2013

Article: From database to RESTful web service to HTML5 in 10 minutes

NetBeans product manager and blogger Geertjan has published an article on JAXenter about building HTML5 clients to Java RESTful web services using the new HTML5 development features in NetBeans 7.3. Creating data-driven HTML5 applications is becoming easier!

Friday Jan 11, 2013

Project Easel at JavaOne 2012

The new HTML5 development features in NetBeans 7.3 (codenamed Project Easel) were first publicly introduced at the JavaOne San Francisco conference in October 2012. Project Easel was featured in several conference sessions and BOFs, as well as in the main Technical Keynote.

Project Easel at the JavaOne Technical Keynote

If you did not attend the conference, or missed the Easel sessions, or planned to attend them but could not get into the room (yes, some of the sessions were completely packed!), the good news is that you can watch the recorded sessions online. Presentation slides are available for download as well. This will give you a more in-depth overview of Easel than the screencasts at So without further ado, here are the links to the recorded JavaOne 2012 sessions related to new HTML5 development features in NetBeans 7.3, by speakers John Brock, David Konecny and John Ceccarelli:

JavaOne Technical Keynote (Easel demo starts at 1:23:30)

Project EASEL: Developing and Managing HTML5 in a Java World

How-to: HTML5 Front-End Applications with a Java EE Back End

Monday Jan 07, 2013

Introducing the NetBeans Web Client blog

Hello, this is a blog of the team that works on the client-side web technologies support in the NetBeans IDE.

NetBeans has always been an IDE for web developers. However, the predominant focus so far was on server-side technologies such as Java EE, PHP or Grails. The upcoming NetBeans IDE 7.3 release adds focus on client side web technologies, i.e. on developing applications that utilize the HTML5 family of technologies.

NetBeans 7.3, which is currently available as a Beta 2 release, and will reach the final release in Q1 2013, contains numerous new features for client-side web development, collectively referred to as Project Easel. This includes:

  • HTML5 Application project with JavaScript testing support
  • JavaScript Editor was improved significantly
  • Page inspector and visual CSS style editor
  • JavaScript Debugger
  • Deep integration with Chrome
  • Embedded WebKit browser
  • and more...

To explore these features, watch the screencast - part 1 and part 2. Or, download the Beta 2 release of NetBeans 7.3 and give it a try. To get more involved, you can also post on our forums, subscribe to the mailing list or file bug reports - see Project Easel wiki for more details on how to participate.

However, it does not all end with NetBeans 7.3 - we already have lots of plans and improvements in the works for future releases of NetBeans. Going forward, information about new features, improvements, highlights, tips, HOWTOs, future plans and more, will be published on this blog.


This is the blog of the NetBeans client-side web team, which develops the support for HTML5 applications in the NetBeans IDE.


« July 2016