JAX London 2014: A retrospective
Take a look inside the toolbox

Introducing NetBeans IDE 7.3 – Power tools for HTML5 & JavaScript

Geertjan Wielenga
netbeans-logo-new.1

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 IDE

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 simultaneously. 

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 browser.

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 modes.

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.

Miscellaneous

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 here. 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 today.

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

Author
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
comments powered by Disqus