Take a look inside the toolbox

Introducing NetBeans IDE 7.3 – Power tools for HTML5 & JavaScript

Geertjan Wielenga

NetBeans IDE’s Geertjan Wielenga introduces us to some of the new HTML5, JavaScript and CSS3 tools within the NetBeans IDE

NetBeans IDE’s Geertjan Wielenga introduces us to some of
the new HTML5, JavaScript and CSS3 tools within the NetBeans

From NetBeans
IDE 7.3
onwards, released earlier this year, new features have
been introduced to enhance the development experience for
HTML5/JavaScript/CSS3 Web applications. More and more enterprise
applications are moving to the HTML5 platform and NetBeans IDE
wants to help ease that transition.

You can use the HTML5 platform via NetBeans IDE to rapidly and
intuitively create rich Web applications that support responsive
web design paradigms, while targeting desktop and mobile platforms

Accelerated HTML5 Development Support

NetBeans IDE enables accelerated HTML5 Web application
development, right from when you create a HTML5 project. And by
“accelerated”, we mean “really, really fast”! When you start your
development project, the IDE lets you select from a list of popular
online templates for HTML5 projects as a starting point.

Alternatively, you can specify the location of a ZIP archive
containing 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. Also very handy is the fact
that you can open your existing HTML5/JavaScript/CSS3 projects
directly into the IDE. Point to any folder on disk and the IDE will
treat it as a NetBeans project, with a few clicks, and no lengthy
or complicated import processes.

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

Live Preview of Web Pages

Research has shown that WYSIWYG GUI
designers are handy for newbies and for prototyping. However, what
developers really need far more than WYSIWYG designers, throughout
their development cycles, is deep integration with browsers. Being
able to click in the browser and see where the related code is
defined and being able to click in an IDE to see where the related
items in the browser are found is far more useful. Two-way
communication between IDE and browser ensures a genuinely helpful
and seamless connection between your code and the associated page
designs in the browser.

Therefore, now, in NetBeans IDE,
through the use of the remote WebKit APIs accessed via a
NetBeans/Chrome plugin and an embedded browser in NetBeans IDE, you
have complete visibility and control of the code in the IDE, while
getting instant visual feedback from pages loaded in the

Responsive Web Design Capability

The IDE supports the use of
“Responsive Web Design” architectures. It lets you select form
factors for your Web page, directly in the browser, and instantly
lays out visual elements in the Web page in the browser to that
form factor. You can select from preset form factors, ranging from
smart phones to desktops, in either portrait or landscape

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

Enhanced JavaScript Support

JavaScript support in the IDE has been
rewritten from scratch. Support includes JavaSript specific syntax
coloring, code completion inclusive of jQuery code completion, and
JSON. JavaScript refactoring, code hints, and other features are
available. You can also control the formatting options for the
JavaScript language itself, in the Options dialog box.

CSS Styling Support

The deep integration with WebKit
browsers allows you to see changes that you make in the CSS Style
window, live, as they happen, in the browser. No more guessing what
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.


Other new features include the ability
to debug JavaScript code, with either the Chrome or the internal
browser as the target browser. You can configure and run unit tests
on JavaScript files using the Jasmine testing framework and the JS
Test Driver server. 

Also, you can easily access your
enterprise data by creating JavaScript clients for RESTful Web
services. Using the RESTful JavaScript client wizard, you
can quickly generate a JavaScript client for a RESTful Web
service located in a NetBeans project containing the Web service,
as explained in detail on JAXenter
. Finally, you can ensure that your application works
across multiple browsers. With the inline documentation available
within the code completion, the IDE informs you about browser
support for particular code constructs. You can download NetBeans IDE
for free


Geertjan Wielenga is a principal product manager in Oracle for
NetBeans IDE and has been a member of the NetBeans IDE Team since

Geertjan Wielenga

Geertjan Wielenga

All Posts by Geertjan Wielenga

Geertjan Wielenga is a principal product manager in Oracle for NetBeans and has been a member of the NetBeans Team since 2004
comments powered by Disqus