HTML5 Web Development Support

Java Enterprise application development in the NetBeans IDE
Click image for fullscreen preview

Starting with NetBeans IDE 7.3, new features to support and enhance the development experience with client side Web applications that utilize the HTML5 family of technologies have been introduced. You can use this to rapidly and intuitively create rich Web applications that support the responsive web design paradigm targeting desktop and mobile platforms simultaneously.

 

Accelerated HTML5 Development Support

The NetBeans IDE enables accelerated HTML5 Web application development right from when you create a HTML5 project. You can select from a list of popular online templates for HTML5 projects or specify the location of a .zip archive of a site template. When you create a project based on a site template, the files, libraries and the structure of the project are determined by the template.

Once set up, the live preview of Web pages, editor support, debugging capabilities and other features, help in developing, testing and debugging your HTML5 applications.

Getting started with HTML5 Development

 

Live Preview of Web Page

Better than WYSIWYG as most professional developers would confess, the deep integration with Chrome and the internal browser, both of which are Webkit based, ensures a seamless connection between your code and the page design.

Through the use of the remote webkit api's, you continue to have complete visibility and control of the code in the IDE while getting instant visual feedback from the browser page.

 

Responsive Web Design Capability

NetBeans IDE supports the use of Responsive Web Design architectures by letting you select various form factors for your Web page and instantly laying out the visual elements of the Web page in the browser to that form factor. You can select from a range of preset form factors ranging from smart phones to desktops, in either portrait or landscape modes.

In addition to enhancing the browsers capabilities, the IDE's CSS Style editor is also aware of the media query that the browser is currently displaying and will place edits to the CSS into that media query automatically.

 

Enhanced JavaScript Support

The JavaScript support in the IDE has been overhauled. Support includes JavaSript specific syntax coloring, code completion inclusive of jQuery code completion and JSON. JavaScript refactoring is available.

You can also now control the formatting options for the JavaScript language itself, in the Options dialog box.

Learn more about the JavaScript support

 

CSS Styling Support

The deep integration with the Webkit browsers, allows you to see the changes that you make in the CSS Style window, live, as they happen, in the browser. No more guessing what the CSS changes will look like until you refresh the browser. The changes are live and in the source code.

You can also "inspect" from the browser and the CSS Style window will display the CSS rules of the element you have selected in the browser automatically. You can now edit your CSS from the CSS Style window using properties, or go directly to the CSS source code and edit from there, with code completion and inline documentation.

Working with CSS in HTML5 applications

 

Debugging & Testing

Web Services Consumption

Cross Browser Compliance


With either the Chrome or the internal browser as the target browser you can now debug JavaScript code.

Configure and run unit tests on JavaScript files using the Jasmine testing framework and the JS Test Driver server.

Debugging and Testing JavaScript


Easily access your enterprise data by creating JavaScript clients for RESTful Web services. Using the RESTful JavaScript client wizard, quickly generate a JavaScript client for a RESTful Web service located in a NetBeans project containing the Web service.


Ensure that your application works across multiple browsers. With the inline documentation available with the code completion the IDE informs you about the browser support for the particular code constructs.

See Also