HTML5 Application Project

NetBeans 7.3 introduces a new project type optimized for developing client web applications. Client web application are written using HTML5/CSS3/JavaScript.

Project Creation

This new project type can be found in New Project wizard in "HTML/JavaScript" category:

The wizard allows to create an empty project or utilize one of public online templates:

Similarly a JavaScript files for many libraries and frameworks can be downloaded from public CDNs:

Project Layout

Once the project is created it will contain Site Root (that is your project sources), Unit Tests (your JavaScript unit tests which are located separately from production sources) and Configuration Files (misc configuration files, for example to run your unit tests):

Project Execution

Created project can be run in one of the browsers:

The external Chrome with NetBeans integration browser and Embedded WebKit browser are tighly integrated with the IDE and enable to run JavaScript debugger, instant CSS styling, reload files in browser upon Save and other features which will be described in detail following chapters. When project is run in external Chrome with NetBeans integration the Chrome notifies you that page is being debugged by NetBeans:

Unfortunately the Chrome does not allow to hide the notification - closing it disconnects the NetBeans from the browser.

The execution can be further customize via project properties. By default all files are open via internal lightweight webserver:

Unit Testing

In order to run JavaScript unit tests the js-test-driver server needs to be configured:

and running/debugging JavaScipt unit tests is not different from other languages:

Templating

HTML5 Application project can be turned into a template for new projects. Simply right click project's node and 'Save As Template' it and later user the template from New Project wizard:

HTML5 Sample Applications

Several sample HTML5 applications can be opened directly from the New Project wizard. Some of these are included in NetBeans directly, others are downloaded from GitHub on the fly.

CSS Styling

When you execute a project or a file then the following views are opened by default.

HTML View in Navigator - displays the structure (DOM tree) of the page

Web Browser (embedded or external) - renders the page itself

CSS Styles view - provides information about CSS styles

Rule Editor - allows editing of CSS rules

See more information about each view below.

HTML View in Navigator

HTML View shows the DOM tree of the executed page.

The view shows not only elements present in source
of the page but also all dynamic modifications done
by JavaScript.

Web Browser

When you execute a page then the page is opened in a browser pane
and you can interact with it as you are used to. When you want
to select an element for styling purposes you can either do so
in Navigator or you can switch the browser into Select Mode
and select the element in the browser directly.

Embedded Browser

Select Mode

You can switch the Select Mode on/off using the toolbar button or Ctrl+Shift+S shortcut.

Resizing and Zooming

You can check how the executed page would look on devices with a different resolution.

Chrome

NetBeans IDE is bundled with a Chrome extension that provides a smooth interaction between NetBeans IDE and Chrome.

Select Mode

You can switch the Select Mode on/off using the context menu, Ctrl+Shift+S shortcut or using the popup that is displayed by clicking on a NetBeans cube in the address bar.

CSS Styles

Document section of CSS Styles view shows all stylesheets
used by the executed page. The list of the displayed rules
can be filtered using the field at the top.

Selection section of CSS Styles view shows a summary
of CSS rules affecting the selected element.
Each row of the Styles table shows the selector
of a rule and the name of the element from
which this rule is inherited by the selected element.
Property Summary provides list of all
CSS properties modified by these rules.

You can use Go to Source action (or double-click) on any
rule or property in CSS Styles view to jump to the corresponding
source code.

Rule Editor

When you select a rule in CSS Styles view (or when
you place a caret into a rule in a .css file) then
Rule Editor displays details of the rule
and allows you to edit it.

Note that any modification of a CSS file is reflected
in the executed page immediately.

JavaScript Editor

The JavaScript Editor was rewritten. The new editor brings many improvements and features that ware not in the previous one.

The coloring schema was changed and improved.

New formatter with many options

Model based code completion - new the code completion should be more clever, suggestions should more fit what you need.

JavaScript Debugger

NetBeans 7.3 includes a new JavaScript debugger, which works with either Chrome or the Embedded WebKit browser.
The debugger is launched automatically when running a HTML5 Application or its unit tests, and all the debugger views are open by default as minimized. The debugger views are:

Breakpoints

Call Stack

Variables

Browser Log

The debugger supports debugging both local files that are included in the HTML5 Application, as well as remote JavaScript files that are linked to the application, but are not included in its sources.

Let's now discuss the individual features of the JavaScript debugger.

Breakpoints

The debugger supports several kinds of breakpoint:

Line breakpoints

DOM Breakpoints

Event Breakpoints

XMLHttpRequest Breakpoints

New breakpoints can be set using the Debug -> New Breakpoint... menu item.

Line Breakpoints

Line breakpoints are triggered when the script reaches a particular code line.

DOM Breakpoints

DOM breakpoints are triggered when there is a change to a particular DOM node.

Besides the New Breakpoint dialog, DOM breakpoints can also be set in the popup menu of the Navigator window for HTML files.

Event Breakpoints

Event breakpoints are triggered when particular events in the page happen.

XMLHttpRequest Breakpoints

XMLHttpRequest breakpoints are hit when network communication using XMLHttpRequest is performed.

Breakpoints deactivation

Breakpoints can be disabled either on a case-by-case basis, or deactivated quickly all at once. This is managed in the Breakpoints window, and reflected in the editor.

Call Stack

Call stack displays the current execution stack of a JavaScript program. Call Stack window has three context actions: "Make Current" (which changes the current frame in which variables are evaluated), "Go to Source" and "Copy Stack" (which copies the stack trace to Clipboard).

Evaluating Variables and Expressions

Variables that are valid in the current scope can be inspected in the Variables window.

Next, it is possible to evaluate arbitrary expressions using the Debug -> Evaluate Expression... menu item. An evaluator window is opened in bottom editor area and evaluation result is visible in Variables window.

Another way to evaluate values of variables is using the debugger tooltip, which has an expandable tree structure.

Browser Log

The Browser Log shows all exceptions, errors, warnings, etc. as they happen in browser.

REST service consumption

NB allows to choose RESTful web service from the existing Web project ( REST as a Java code ) and generate JS client for it.

REST JS client wizard

The generated code requires Backbone.js library so in case the library is already in the project it will be included in the final html with its dependencies. Otherwise user is able to choose local Backbone usage via wizard checkbox. The wizard contains two steps and the second is optional: html file generation could be skipped. It is possible to generate some skeleton code ( without UI with further manual code customization ) and code based on some table grid UI ( tablesorter jQuery plugin ).

Backbone based REST client generation

The result of the wizard is generated JS code and (optionally) HTML file which has a skeleton which gives an idea to the user how the code could be customized. If REST service has an interface around of data collection and Tablesorter UI has been chosen then generated code will be adopted to use it with Tablesorter jQuery plugin. The REST data is rendered as a table grid in the latter case.

Embedded Browser

There is a new full-blown embedded browser based on Webkit. The implementation is provided by JavaFX component WebView. JavaFX SDK version 2.2 or better is required.

Editor

Clipboard History

Access to last 9 clipboard entries.
shortcut: ctrl+shift+D

Show number of matches in searchbar

Breadcrumbs

A new navigation bar shows the current embedding in the editor.

Clicking on the arrows shows the children like members/methods.

Bracket Matching

In the left margin you can now see an extra bracket that shows you how far the block contained in the brackets stretches.

Copy File Path

A new action to copy file path of file to clipboard has been added to the context menu of a file tab. You can also select files or projects in project/files view, invoke the shortcut and their files paths are copied to clipboard separated by new space. When there are spaces within the path, the copied path will be surrounded by quotation marks.

"Remove @Override Annotation" hint

Add catch clause to existing try/catch

Source Menu Actions

Organize Members and Organize Imports hint are now available as explicit actions in the Source menu:

Implement Unimplemented Methods

When the caret is on an implemented interface or extended class, an option is given to implement only the methods from the interface or class:

Invert If

An option is given to invert the condition of the if statement, together with swapping the then and else section of the statement:

Before

After

Move initilization to constructor

An option is given to move a field initialization into constructors:

Before

After

Run inspections&transform for wider scope from fixable hint in editor

For a fixable hint in the editor the "run inspections"/"run inspections&transform" dialogs can now be invoked directly. The dialogs are preinitialized with the given hint and the scope of the inspection can be widened f.e. to project scope. This allows you to search for other occurrences of the hint in the same file/package/project...

Customizable Method Bodies

Bodies of newly created methods can now be customized in Tools/Templates/Java/Code Snippets:

Comparing CPU snapshots

Retained size by class

New Attach Settings dialog

Attach Wizard has been replaced by a much simpler Attach Settings dialog.

Support for Linux ARM architecture

Profiler can now attach to a remote Java application running on a Linux ARM machine.

Java EE

JPA

Stand alone jpql editor is added, you can run your jpql from ide directly instead of running your jpa application, you may need to register connection and database driver on Services tab if connection isn't registered withing Netbeans already and you need to build your application. JPQL Editor support code completion for JPQL keywords and for managed entities, it can provide you SQL representation of your JPQL query if eclipselink or hibernate provider is used or hints what is wrong with your JPQL query.