NewAndNoteworthy hidden Easel

(Difference between revisions)
(Backbone based REST client generation)
(Backbone based REST client generation)
Line 157: Line 157:

Revision as of 11:11, 25 September 2012


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.

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:



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:


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.


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.




Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo