Wednesday Jul 24, 2013

From Auction to Awesome with NetBeans IDE

In NetBeans IDE 7.4, which is currently in its Beta release, go to the New Project wizard and search for 'websocket'. You'll find three very cool WebSocket samples are now bundled with the IDE. Let's play with the "Auction WebSocket (Java EE 7)" sample. Select it and complete the wizard.

Note that the application you now have is a Java EE application on Maven, with HTML, JavaScript, and CSS on the frontend, and Java (using WebSocket as the basis of an auction scenario) on the backend:

Select "Chrome with NetBeans Integration" in the handy new browser switcher in the toolbar. Run the application and the initial page opens in the Chrome browser. In 7.4, for the first time, you'll now see the NetBeans icon in the top right of the browser for your Maven-based Java web project, if you have installed the NetBeans plugin into Chrome. Below the mouse is over "Enter your user name" in the browser.

Prior to NetBeans IDE 7.4, the NetBeans icon in the Chrome browser (provided via a NetBeans plugin for Chrome), which gives you access from the browser to the IDE, was only available for pure HTML projects, i.e., there's a special type of project introduced in NetBeans IDE 7.3, for working with HTML, JavaScript, and CSS files. However, now that special support introduced in 7.3 is also available to Java web projects and PHP projects.

Therefore, you can now select, as has been done in the screenshot above, "Inspect in NetBeans" mode, which lets you click items in the browser, causing the corresponding nodes in the Navigator in the IDE to be highlighted. From a node in the Navigator, you can right-click to jump to the source in the editor. 

In the editor, change something, save, and the browser is automatically refreshed to display your change. 

Conversely, you can browse and identify items in the browser by hovering over the nodes in the Navigator in the IDE. Below, the mouse is over the second to last node in the Navigator.

Next, you can set breakpoints in a JavaScript file in the project. After you've set a breakpoint, simply refresh the browser to start the debug session. In other words, the process of running the application again in debug mode is not needed. Instead, refreshing the browser is all that's needed to pick up the breakpoints set in a file. 

Best of all, you can debug the frontend and backend at the same time, i.e., debug Java and JavaScript simultaneously. Run the application in debug mode. In the Sessions window, you'll see two debug sessions have started up. You can quickly switch between the sessions as needed.

Also, the brand new Network Monitor is available. WebSocket communication is automatically displayed in it:

Awesome, right? 

For further and related information, see the NetBeans WebClient blog's article HTML5 Development for Java EE and PHP projects.


Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.


« July 2013 »