Monday Jul 15, 2013

NetBeans 7.4 Beta release

NetBeans 7.4 Beta

NetBeans IDE 7.4 Beta was released today, and you can download it now from the release page. As the second release in a row that focuses on HTML5 development, it includes a number of features in this area, such as:

The complete list of new features is available in the New and Noteworthy document. All these features are a part of the beta release, so you can try them out right now. We will be focusing on stabilization and bugfixing for the next couple months, so if you find any problems with the beta release, please don't hesitate to file them in the bug database

Again, hit this link to download NetBeans IDE 7.4 Beta. 

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.

Sunday Mar 24, 2013

Network Monitor for REST and WebSockets communication

One of the features which we have not managed to finish for NetBeans 7.3 was a Network Monitor. When developing an application which talks to a server all sorts of problems can happen. Server may not respond and simply abort communication; server may send different data than expected; the data which our application sent to a server were not processed on the server as expected; etc. In times like that it is invaluable to be able to analyse what exactly is being exchanged between the server and our application. Did our application used the right URL? did it set right request headers? what exact data are being send to server? what exact data has server responded with? in what format the data are? These and other questions can now be answered with help of the Network Monitor. The feature just landed into nightly builds of next NetBeans release. It is not completely finished, the UI needs to be polished but it is good enough for a first round of review.

Let's look at what it does. When running a project in "Chrome with NetBeans Integration" browser or "Embedded WebKit" browser the Network Monitor monitor window will open automatically similarly to the Browser Log window or debugging session windows:

As I said the UI is preliminary. Trigger a REST or WebSocket communication in your browser application and you will notice network requests to start appearing in the Network Monitor UI. As mentioned on the previous screenshot not all network requests are monitored. The focus of NetBeans network monitoring is to help resolve common problems which happen during development of applications which are using REST and WebSocket communication. Network requests like loading of static resources (ie. images, css, etc.) are automatically filtered out. If you need to see those you can analyse them directly using your browser tooling for example in Chrome Developer Tools. However, any network request which fails is logged and brought to attention regardless of whether it is REST, WebSocket or plain static resource request.

Let's look how network requests are presented:

Above screenshot shows three network requests recorded. First one failed and is therefore shown in red color. The last one is a call to the Twitter Search REST API and shows request and response headers. Switch to Response tab to see data received from the service:

The response from server in this case is JSONP (notice that content-type in the response headers in previous screenshot was "application/javascript") and IDE automatically extracted JSON data from the javascript response and reformatted the single line JSON stream into a more readable form. If it is desirable to see data as they came from the service just tick "Raw Data Response" checkbox at the right bottom corner. In this instance the outcome is:

The last tab shows callstack which triggered this network request and links allow you to quickly dive into your application's code:

For monitoring WebSocket communication the UI is similar but instead of response data you get to see list of textual frames as they happen:

Blue color indicates that WebSocket request is still open and more data frames may be received/sent.

When a network request fails the Network Monitor shows server's status code in the Headers panel, for example "404 - Not Found". There is one error case which the Network Monitor is distinguishing and trying to provide more help than that. It is the case of REST service call which your browser aborted due to Same Origin Policy:

This can happen for example if you are developing REST service and deploying it to a GlassFish server (which by default runs on port 8080) and at the same time you are trying to access this REST service from your HTML5 project which runs on NetBeans lightweight web server (which by default runs on port 8383). In this scenario browser's Same Origin Policy stops your JavaScript code from accessing REST service because the policy says that JavaScript can access only resources on the same server, using the same port and the same protocol.

There are few options how to resolve this. You could run both projects on single server. Or you could enhance your REST service to support JSONP and use JSONP from your JavaScript which would workaround the Same Origin Security policy. However, if you plan to make your REST service publicly accessible then the best approach is to utilize Cross-Origin Resource Sharing (CORS) and amend your REST service to tell browser that it can be called from different domains. For REST services developed in the NetBeans using Jersey this can be as simple as following the "Jersey Cross-Origin Resource Sharing Filter" wizard (in the Web Services category) to create subclass of Jersey's ContainerResponseFilter SPI and provide all necessary CORS headers:

 public class NewCrossOriginResourceSharingFilter
              implements ContainerResponseFilter {
    public ContainerResponse filter(ContainerRequest request, 
                                    ContainerResponse response) {
            "Access-Control-Allow-Origin", "*");
            "Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
            "Access-Control-Allow-Headers", "content-type");
        return response;

The wizard automatically registered the filter in web.xml for you.

Hope you find this feature helpful! Any feedback or suggestions are appreciated.

Thursday Feb 21, 2013

NetBeans IDE 7.3 is out!

NetBeans IDE 7.3, featuring the new HTML5 development support also known as Project Easel, was released today. 

NetBeans 7.3 Overview Video

A great way to explore the new HTML5 features in this release is to watch the screencasts accompanying the release:

The summary of the HTML5 development features is available at the NetBeans IDE Features page. This page also contains the links to the HTML5 development tutorials:

Or, just download NetBeans IDE 7.3 and try it out yourself. 

Thursday Feb 07, 2013

Release Candidate Two

NetBeans 7.3 Release Candidate 2

 The second Release Candidate of NetBeans 7.3 is out and can be downloaded now. This means that the final release of Project Easel is just a couple weeks away. While NetBeans 7.3 is still going through the final test cycle, we feel pretty good about the quality. In the recent weeks, several serious issues and performance problems have been fixed, so if you are using an older build of NetBeans 7.3, we encourage you to install this latest Release Candidate to reap the benefits of improved stability and speed.

Monday Jan 07, 2013

Introducing the NetBeans Web Client blog

Hello, this is a blog of the team that works on the client-side web technologies support in the NetBeans IDE.

NetBeans has always been an IDE for web developers. However, the predominant focus so far was on server-side technologies such as Java EE, PHP or Grails. The upcoming NetBeans IDE 7.3 release adds focus on client side web technologies, i.e. on developing applications that utilize the HTML5 family of technologies.

NetBeans 7.3, which is currently available as a Beta 2 release, and will reach the final release in Q1 2013, contains numerous new features for client-side web development, collectively referred to as Project Easel. This includes:

  • HTML5 Application project with JavaScript testing support
  • JavaScript Editor was improved significantly
  • Page inspector and visual CSS style editor
  • JavaScript Debugger
  • Deep integration with Chrome
  • Embedded WebKit browser
  • and more...

To explore these features, watch the screencast - part 1 and part 2. Or, download the Beta 2 release of NetBeans 7.3 and give it a try. To get more involved, you can also post on our forums, subscribe to the mailing list or file bug reports - see Project Easel wiki for more details on how to participate.

However, it does not all end with NetBeans 7.3 - we already have lots of plans and improvements in the works for future releases of NetBeans. Going forward, information about new features, improvements, highlights, tips, HOWTOs, future plans and more, will be published on this blog.


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


« April 2014