HTML5 Development

HTML5 Development in Java EE and PHP Applications

You can now use all the HTML5 development features (collectively known as Project Easel) in Java Web applications (Ant or Maven based) and in PHP applications. For a more detailed description, see the Java EE and PHP sections of this document.

PhoneGap

Create a new PhoneGap application from template. A PhoneGap application is just a flavor of a HTML5 application, so you can turn any HTML5 application into a PhoneGap application very easily.

Build, Deploy and Run Mobile Applications developed using standardised web APIs on Android/iOS Simulator or Device.

PhoneGap Sample Application

PhoneGap Sample application shows how to write rich mobile applications in HTML5 and Javascript using JQuery, PhoneGap (Geolocation API and Contacts API) and Google Maps API. The very same code can be tested on both iOS and Android devices.

Support for Android and iOS Browsers

TBD

Browser switcher in the main toolbar

The main IDE toolbar now contains a browser switcher icon, which allows to conveniently switch the target browser for running web applications. This switcher works with HTML5 client-side-only applications, as well as Java web applications (Ant or Maven based) and PHP applications. The available browser include desktop browsers, mobile devices/emulators, and packaging/running PhoneGap applications on the target device or emulator. (The PhoneGap options are available for HTML5 project only.)

CSS Preprocessors

Editing

Basic editing support for Sassy CSS and LESS CSS preprocessor files has been added to Netbeans dev build. The work is still in progress, but the main part is ready to use:

syntactic and semantic (parser based) coloring for the language constructs,

indentation, simple reformat of code,

code folds,

file templates

For variables and mixins we provide:

go to declaration,

mark occurrences,

instant rename,

code completion (also shows items from imported files),

vars, mixins and imported files shown in the navigator,

find usages and refactor rename among files.

Compilation on Save

When you edit Sass and LESS files, the IDE will automatically compile these into CSS when you save the file. You only need to set the output path (or more precisely, mapping from input to output files) in your project's properties.

Then you only need to tell the IDE where to look for the Sass and/or LESS compiler, via the IDE Options.

Live Reload

When you run a page in a browser with NetBeans integration and modify
some SASS or LESS stylesheet then the stylesheet is not only compiled
automatically into the corresponding CSS file but this CSS file
is also reloaded in the displayed page. So, you can see
your changes immediately in the browser.

Debugging Information

When SASS or LESS stylesheet is compiled into CSS stylesheet then an extra/debugging information is included by default. This information allows various tools to find the source of the rule generated into CSS. For example, CSS Styles view uses this information to allow you to jump into the definition of the matched rule.

Take care when you edit properties of CSS rules that come from SASS or LESS stylesheet. These modifications are saved into the CSS stylesheet only and are allowed for experimenting only. Once you are happy with the resulting style, you have to transfer these changes into SASS or LESS stylesheet manually. We hope to provide a better user experience in future releases.

CSS Styling

Browser DOM

Browser DOM view is a replacement for the merged source-browser HTML Navigator
that worked (in NetBeans 7.3) for HTML files only. Browser DOM shows
the DOM of executed page no matter what its source (HTML, PHP, JSF, etc.) is.
Moreover, when the source of the page is HTML then it allows navigation
into the source file as it was possible in HTML Navigator.

Box Model

When a page is executed in a browser with NetBeans integration then you
can see its DOM in Browser DOM view. When you mouse over the nodes in this
view then you can see the corresponding elements highlighted in the browser
(or vice-versa when Inspect mode is turned on in the browser). When an element
is highlighted in the browser then we show its box model. In other words,
we highlight its content, padding, border and margin and we also display
the dimensions of the element.

Styling of hover-based effects

Many interactive pages style some of their elements in a different way
when the mouse is hovering over the element. For example, sub-menu
of a menu is displayed when you are hovering over the menu only.
Hence, it is desirable to have a support for styling of elements
in the 'hover' state. Of course, you cannot have your mouse cursor
over the styled element (to keep it in the desired state)
and over the property editor (that you use to affect the style
of the element) simultaneously. Happily, we can keep the elements in 'hover' state for you.

When the Inspect mode is turned on in the browser (using Ctrl+Shift+S shortcut)
then all the elements that were in the 'hover' state are kept in this state
until the Inspect mode is turned off. You can select such elements and
style them in this state as you are used to style any other element.

This holds not only for CSS-based hover-related effects but also
for JavaScript mouse event-based effects. We attempt to block the page
from majority of mouse events (during Inspect mode) to keep elements
(like open JavaScript menus) in their state.

Saving changes from Chrome Developer Tools

When you edit the files (e.g. CSS files) in your web application inside Chrome Developer Tools, these changes will be saved to NetBeans IDE and preserved in the real file on the disk.

Network Monitor

Network monitor helps to analyze REST related communication, WebSocket communication and any network requests which failed. It is available for Chrome with NetBeans Integration and Embedded WebKit Browser.

For each request it displays request and response headers:

and response received from the server:

and call stack which triggered this network request:

For WebSocket communication all text frames are displayed:

The network monitor tries to provide help in certain common situations:

Hints

Refactoring

Native Packaging

JavaSE projects now support creation of native bundles taking use of the native packaging technology provided by JavaFX

JavaFX RunTime ClassPath support

JavaSE projects now enable automatic extension of classpath to include JavaFX artifacts for JDK versions where this is not the case by default (all JDK7u6+, in JDK8 JavaFX RT is on classpath by default). This option is available in Project Properties dialog, Deployment category, under the name "Keep JavaFX RT artifacts on classpath". This option removes the need to add jfxrt.jar dependence to JavaSE project manually, when users need to use JavaFX classes within SE project. The advantage is twofold - changing JavaPlatform changes the respective JavaFX RT as well, plus the JavaFX RT artifacts are prevented from being copied to dist/lib/ as if they were a true project dependency.

Platform development

Hints

JavaFX

Platform

Explicit FX-enabled Java Platforms have been completely removed (including the Default JavaFX Platform), FX Applications now work with standard NetBeans Java Platforms. No JavaFX specific tab is provided in Java Platforms dialog - its functionality is replaced by the standard JavaSE functionality (JavaDoc and sources can be specified in the standard way). This simplification takes use of the fact that since JDK 7u6 the JavaFX runtime is distributed as part of JDK on all platforms. This also means that NetBeans 7.4 no longer supports the option to choose different JavaFX RT/SDK for use with different JDK; now only the JavaFX RT/SDK from within JDK is used.

Remark: Technically JavaFX RT is not on classpath by default in all supported JDKs. A classpath extension mechanism similar to the one in former FX-enabled Java Platforms is in place; JavaFX RT artifacts are added to classpath wherever needed automatically.

Project

JavaSE and JavaFX project types have been aligned more tightly. JavaSE build script update mechanism is now shared in JavaFX Projects. The same Java Platforms can be used both in JavaSE and JavaFX Projects. JavaSE projects now enable simpler handling of JavaFX artifacts on classpath (see above). JavaSE Project can now be switched to JavaFX deployment mode, i.e., effectively transformed to JavaFX Application project type.

Deployment options have been refined and/or extended. Now it is possible to:

define custom manifest entries

request minimum JavaFX runtime version

select individual installers to be created by native packager

build native package with Java Runtime from non-default Java Platform

Java Class Library is now usable with JavaFX. Technically we do not provide explicit JavaFX Class Library project type, but the JavaFX RunTime ClassPath support added to SE based project infrastructure makes the standard Java Class Library projects easily usable with JavaFX.

Maven

New FXML File dialog now works in Maven projects, producing artifacts in Maven-style locations

JavaFX Maven basic artifact and project template has been added

Java EE

HTML5 Development in Java EE applications

The following HTML5 development features are now available in Java EE applications (both Ant and Maven based):

Browser selection for testing with various browsers

Running on mobile browsers on Android and iOS devices and emulators

Visual CSS editing

JavaScript debugging

HTML5, CSS3 and JavaScript editing (also available in previous releases)

SASS and LESS editing

SASS and LESS compilation and redeployment on save

JavaScript libraries panel in Project Properties

Network Monitor for REST and WebSocket

The screenshots below illustrate some of these features.

JavaServer Faces

Resource Library Contract wizard

@FacesComponent wizard

PHP

HTML5 Development in PHP applications

The following HTML5 development features are now available in PHP applications:

Browser selection for testing with various browsers

Running on mobile browsers on Android and iOS devices and emulators

Visual CSS editing

JavaScript debugging

HTML5, CSS3 and JavaScript editing (also available in previous releases)

SASS and LESS editing

SASS and LESS compilation and redeployment on save

JavaScript libraries panel in Project Properties

Network Monitor for REST and WebSocket

The screenshots below illustrate some of these features.

Editor

Allow "self", "static" and "this" in @return annotation

Generation of getters and setters for static fields

Support for deprecated elements (strike-through element names)

String Auto-Concatenation after Typed Break

Hint to detect depth of nested blocks

Hint to detect unreachable statements

Hint to detect empty statements

Hint to detect direct use of superglobal arrays

Hint conditions should use brackets

Different coloring of single/multi lines comments

Hint to check whether current use of "@" is proper

Hint to check the number of line in a method (class, iface, trait?) declaration

JavaScript

Knockout

Ext Js

Simple support for Ext Js framework providing code completion in JavaScript and HTML files. There are three contexts, where code completion items are offered through the Ext Js framework support:

Code completion for Ext object:

NetBeans understand to defining objects through Ext.define or Ext.apply methods. On the picture you can see navigator, that displays object defined through the Ext.define method and code completions suggester for such object:

NetBeans offers code completion for property names in objects that are parameters for methods like Ext.application, Ext.define etc.:

Rebase Support

Diff between revisions

The diff view allows to select any revisions to compare and displays modifications between the two revisions. This feature can also be used to compare different branches or tags. (issue 207165)

Notifications

New Notifications TC is introduced in 7.4 - main goal is to list all notifications displayed in one IDE session and enable users to go back to a notification's details if then need/want to. For more information see the specification

Network Proxies

User can now reload system proxy settings and doesn't need to restart IDE. Several changes has been done in General Options panel - the Reload button has been added. The user can also test if the connection can pass with the Test connection button.