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.

Comments:

I was just thinking of how awesome a feature like this would be for PHP. Keep up the good work, NetBeans!

Posted by Eli McMakin on April 30, 2013 at 04:11 AM PDT #

Hi,

I want to know if the Visual CSS Editing feature is available with JSF2 projects.

Thanks for all!

Posted by Pedro Hidalgo on April 30, 2013 at 08:06 AM PDT #

Hi Pedro, yes, JSF visual editing will be supported in NetBeans 7.4 final release. Right now we are still tuning some workflow and usability issues in this area, so things don't work perfectly yet, but the intent is to make this work for the final release.

Posted by Petr Jiricka on April 30, 2013 at 12:54 PM PDT #

Congratulations for the post, loved the blog.

Posted by ricardo on July 05, 2013 at 11:11 AM PDT #

Nice blog,One nice side effect of this is that if we run our server in debug mode we can now debug both the client and the server at the same time.Thanks for the post.

Posted by Neeraj Dhiman on January 03, 2014 at 11:25 PM PST #

Post a Comment:
  • HTML Syntax: NOT allowed
About

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

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today