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.

Comments:

very informative post with clear screenshots man :) keep it up

Posted by guest on July 24, 2013 at 09:58 AM PDT #

I can't understand how to run js code like in a chrome console. For example I wish to run some test jquery code (after page was deployed) and see how it works. In chrome I press F12 and go to "Console" tab, where I can do tests with a code. But any time when I press F12 button "Netbeans connector" stops working...

Posted by guest on July 25, 2013 at 04:06 PM PDT #

Holy shit !

Posted by guest on August 16, 2013 at 05:25 PM PDT #

ty sir for this post...sir can you give me your source code?
we have a project that similar to this and i need your help..plss!
send it to my e-mail

aborgarglenn@gmail.com

Posted by guest on January 14, 2014 at 04:12 AM PST #

Post a Comment:
  • HTML Syntax: NOT allowed
About

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.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
12
13
14
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today