Geertjan's Blog

  • July 24, 2013

From Auction to Awesome with NetBeans IDE

Geertjan Wielenga
Product Manager

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.

Join the discussion

Comments ( 5 )
  • guest Wednesday, July 24, 2013

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

  • guest Thursday, July 25, 2013

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

  • guest Saturday, August 17, 2013

    Holy shit !

  • guest Tuesday, January 14, 2014

    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


  • guest Saturday, January 24, 2015

    can i have the files in this project?

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha