Monday Apr 29, 2013

Emmet plugin for NetBeans 7.3

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, the Emmet 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

Installing the Emmet plugin in NetBeans 7.3

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.

Main Emmet menu in NetBeans IDE

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

Emmet abbreviation

 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:

Code generated by expanding an Emmet abbreviation

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

Configuring Emmet keyboard shortcuts

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.

Emmet extensions configuration in NetBeans

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

Wednesday Apr 24, 2013

HTML5 development in Java EE and PHP projects

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

Auction sample Maven project

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. 

Browser switcher in the main toolbar

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.

Browser switcher in the project properties of a Maven project

 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.

NetBeans IDE is connected to Chrome.

Thanks to this, you can use all the Project Easel features with this Maven project, such as:

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.

Debugging client-side and server-side code at the same time

 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.

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

Visual CSS Editing

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:

 To try out all these features with your Java or PHP web application,  get the latest nightly build of NetBeans 7.4, and please leave your comments below.

Friday Apr 12, 2013

Editing CSS Preprocessor Sources

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, 
  • indentation, simple reformat of code, 
  • code folds, 
  • go to declaration, mark occurrences, instant rename for variables and mixins 
  • code completion for variables and mixins,

  • vars, mixins and imported files shown in the navigator, 

  • find usages and refactor rename among files.

  •  code templates

Please give it a try, we're looking forward to your feedback! 


This is the blog of the NetBeans client-side web team, which develops the support for HTML5 applications in the NetBeans IDE.


« April 2013 »