Oracle Blog

NetBeans Web Client

Monday Apr 29, 2013

Emmet is an amazing tool that greatly improves the coding productivity for web applications. It is well known among web developers, and in fact, many NetBeans users have requested support for Emmet in NetBeans. The good news is that thanks to Sergey Chikuyonok, the creator of Emmet, and Lorenzo Stanco, the author of the original Zen Coding plugin, theEmmet plugin is now available on the Update Center for NetBeans IDE 7.3 (as well as 7.2). Let's see how it works.

First, we need to install the plugin. In your NetBeans IDE 7.3, choose Tools | Options in the main menu, and select Available Plugins.

In the Search field, type Emmet, and the plugin will be found. Check the Install checkbox, press the Install button, and follow the plugin installation wizard. At the end of the wizard, you will be prompted to restart the IDE.

Once the plugin is installed, you will notice that there is a new Emmet submenu in the IDE's Edit menu, which gives you access to all the great features of Emmet. In addition to this, the most important Emmet actions have keyboard shortcuts, so you will not need to use mouse to activate them.

For example, type the following text inside a HTML document in NetBeans: #page>div.logo+ul#navigation>li*5>a{Item $}.

When you now press Ctrl-Alt-N (or Ctrl-Cmd-N on Mac), the magic will happen, and this text will be expanded to 10 lines of HTML code, that would be pretty tedious to type manually:

Note that the keyboard shortcut for all Emmet actions (including Expand Abbreviation) can be defined in IDE options - just go to Tools | Options | Keymap.

This screenshot also illustrates that beyond expanding abbreviations as shown in the example above, Emmet offers numerous other features and actions, that are worth exploring. Additionally, Emmet supports extensions that further enhance its functionality. Extensions can be set up in NetBeans using Tools | Options | Miscellaneous | Emmet, so IDE users can take advantage of them.

For more information, check out also the official README for the NetBeans plugin at the Emmet website.

Wednesday Apr 24, 2013

During the NetBeans 7.3 release cycle, the NetBeans team received a lot of great and positive comments about the HTML5 development features, known as Project Easel. At the same time, we received one piece of feedback very often: while these new features are currently available in the HTML5 (i.e. client-side-only) project, users would like to use them with their existing Java web applications and PHP applications. This blog post describes how this is being addressed for the NetBeans 7.4 release.

To walk through the new features, we will use a Auction application sample, which is a Maven-based Java web application, which also happens to be using some new Java EE 7 features, such as Java API for WebSocket. For the client-side part, it uses plain HTML5 code, i.e. no server-side web framework, just ordinary HTML/CSS/JavaScript code. (Though we could use an Ant-based Java web project or a PHP project just as well - the workflow would be analogous.)

The first thing you may notice in development builds of NetBeans 7.4 is the new web browser switcher in the main toolbar. This switcher is the entry point to the NetBeans Visual CSS editing and JavaScript debugging features - though it can also be used to conveniently and easily test your application with various browsers.

As an aside, you may be wondering what the iOS and Android items in the browser list are - but this is a whole new topic that deserves a separate blog post, so let's not worry about these for now.

An analogous browser switcher is also available in the project properties - here is the one for Maven web projects.

Let's select one of the browsers that provides integration with NetBeans - such as Chrome with NetBeans Integration. When we now run the project, NetBeans will deploy it to the application server (e.g. GlassFish) as we would expect, but it will also connect to the Chrome browser. This is indicated by the NetBeans icon in the address bar, and the yellow infobar in Chrome.

One nice side effect of this is that if you run your server in debug mode (by choosing Debug Project instead of Run Project), you can now debug both the client and the server at the same time: now there are two debug sessions available (one for Java and the other for JavaScript), and you can easily switch between them.

Let's now see what Visual CSS Editing looks like with our project. When we click the NetBeans icon in the Chrome address bar, we can enable Inspect in NetBeans Mode.

After that, we can hover over elements in the NetBeans navigator to highlight the corresponding element in Chrome, or vice versa. Most importantly, we can modify CSS properties using the NetBeans CSS Styles window, and the changes will be reflected in the browser and in the source code. The following screenshot shows the NetBeans CSS Styles window side by side with Chrome.

Besides the features we've covered so far, many other features are now available in Java web projects (Maven as well as Ant based) and PHP projects:

Friday Apr 12, 2013

Using plain CSS files in today's complex web applications often quickly reaches the limits of the technology and lot of people bothered by maintaining huge amount of styles calls for help. Though CSS3 tries to address some of the complains, the new modules specification creation process is quite slow and the adoption of the results in browsers is not instant.

Several CSS preprocessor frameworks addresses most of the sore points of using plain CSS and adds plenty of useful features like nested rules, variables, mixins, useful functions and much more.

The NetBeans editor now supports the most common frameworks: SASS (Sassy CSS syntax) and LESS.

Here is the list of basic features:

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