Thursday Sep 19, 2013

NetBeans 7.4 Release Candidate, with Cordova support

NetBeans IDE 7.4 has reached an important milestone: Release Candidate 1. This means that it is pretty much usable for day to day development, and we expect only a handful of fixes before it hits the final release. You can download the RC1 build from netbeans.org.

NetBeans 7.4 Release Candidate

Among other features and improvements, one notable feature included in NetBeans 7.4 is the new Cordova development support. This feature was not mentioned in this blog until now, because lately we have been busy updating NetBeans to the new Cordova 3.0 release. So, we are pleased to say that NetBeans 7.4 supports this new Cordova release.

Browser switcher with Cordova Mobile development options (scaled down)

Geertjan has a great screencast, whose first part covers getting started with Cordova in NetBeans, and whose sequels will explain all the features in depth. For the impatient, here is the list of features for Cordova development in NetBeans IDE 7.4:

  • Cordova project wizard
  • Building Cordova projects for Android and iOS targets
  • Running on Android and iOS devices and emulators
  • Quick testing on desktop browsers/emulators, such as Chrome with the Ripple emulator
  • On-device visual CSS editing on iOS devices (and iOS Simulator)
  • On-device JavaScript debugging on iOS devices (and iOS Simulator)
  • Cordova sample project included

Visual CSS Styling of Cordova projects on the iOS Simulator

Or, try them out for yourself in NetBeans 7.4 Release Candidate 1.

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 netbeans.org bug database

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

Tuesday May 14, 2013

Develop Mobile Web Applications On Your Android Device

This blog post introduces another exciting new feature in the upcoming NetBeans IDE 7.4. Namely, JavaScript debugging and visual CSS editing on Android devices. So without further ado, let's see how it works.

As a prerequisite, you will need an Android 4.x device. Let's do some setup steps that you only need to do once. First, install the Chrome browser on the device. The Chrome browser is available in the Play store.

Chrome browser for Android 4.x in the Google Play store

Next, you will need to turn on USB debugging both at the system level and in the Chrome browser, which can be done in Android's Developer options in the phone settings. Note that on Android 4.2 and newer, Developer options is hidden by default, so we need to unhide it first. To do that, go to Settings > About phone option in settings, and tap Build number seven (7) times. Then return to the previous screen, and you will find Developer options.

Once Developer options are present, you will see the USB debugging checkbox inside this category. Make sure it is checked.

Next, open the Chrome browser, go to Chrome settings, and under Advanced > Developer tools, check the Enable USB Web debugging checkbox.

Turning on USB debugging in Android Turning on USB debugging in Chrome on Android

We will also need to set up the Android SDK and point NetBeans to it. In NetBeans, go to Tools > Options (or NetBeans > Preferences on Mac OS X), choose Miscellaneous > Mobile Platforms, and specify the location of the Android SDK. In case you don't have the Android SDK installed on your machine, the dialog provides a convenient link to the SDK's download page. This completes the one-time setup.

Setting the Android SDK location in IDE options

Now, to start developing your web application on your Android device:

  • Connect your machine and the Android device with a USB cable
  • Connect your developer machine and the Android device to the same Wi-Fi network (this is necessary so the device can access the web server running on your computer)

As our testing application, we will use the AngularJS Phone Catalog application that is bundled as a sample in NetBeans, but you could of course use any HTML5 application - or a Java web application or a PHP application, as described in a prior blog post

To run the application in Chrome on your Android device, click the new browser switcher icon in the main NetBeans toolbar, and select Android Device (Chrome).

Switching to Chrome browser on Android device

Next, just run the application, and the application will open in Chrome on your device.

Let's now see how we can tweak the style of this application directly on the device. You will notice that in the IDE, a couple more windows opened: Browser DOM and CSS Styles. The Browser DOM window displays the real DOM tree as rendered by the browser on your device. When you select elements in this window, the CSS Styles window refreshes to show the CSS styling information for the currently selected element.

Browser DOM and CSS Styles windows

More interestingly, as you select (or hover over) elements in the Browser DOM, the current element will be highlighted in the page on your device.

Hovering over Browser DOM elements highlights the element on your device

Next, we will want to select elements on the device in order to change them. If we were using the desktop version of Chrome, we could do this by turning on Inspect in NetBeans Mode using the menu item provided by the NetBeans Connector for Chrome. But as Chrome for Android does not support extensions, we will do this using the Inspect Mode in the Browser toggle button at the top right of the CSS Styles window.

Turning on Inspect Mode

Once Inspect Mode is on, the interaction now works in the other direction: tap elements in the page on your device, and both Browser DOM and CSS Styles windows will be synchronized. Once we have selected the element whose style we'd like to modify, we can just do so using the bottom part of the CSS Styles window (Property sheet), and the change will be reflected live on the device. For example, this is the result of increasing the font size of the description text from 13px to 22px.

Modifying CSS style with NetBeans on a mobile device

Note that this example is illustrative only - in a real world example we would likely use media queries to achieve good appearance on both mobile and desktop clients. Speaking of which, media queries (as the main tool to do responsive web design) are supported in NetBeans' visual CSS editor.

Next, we may want to debug the application. For example, to see what happens when we click on an individual item in the list of phones in our application, we will place a breakpoint on line 16 in controllers.js. But in order to tap the item, we first need to turn off Inspect Mode using the toggle button in the CSS Styles window. Then after tapping the item on your device, the IDE will stop on the breakpoint.

Debugging JavaScript on the mobile device

Now we can inspect the variables, step through the code, see the call stack, and in general use all the features of the NetBeans JavaScript debugger.

All this support will be included in NetBeans IDE 7.4, which will be released later in 2013. However, you can already try this out now in a recent nightly build of NetBeans 7.4.

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 {
    @Override
    public ContainerResponse filter(ContainerRequest request, 
                                    ContainerResponse response) {
        response.getHttpHeaders().putSingle(
            "Access-Control-Allow-Origin", "*");
        response.getHttpHeaders().putSingle(
            "Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
        response.getHttpHeaders().putSingle(
            "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.

Wednesday Jan 23, 2013

Article: From database to RESTful web service to HTML5 in 10 minutes

NetBeans product manager and blogger Geertjan has published an article on JAXenter about building HTML5 clients to Java RESTful web services using the new HTML5 development features in NetBeans 7.3. Creating data-driven HTML5 applications is becoming easier!


Friday Jan 11, 2013

Project Easel at JavaOne 2012

The new HTML5 development features in NetBeans 7.3 (codenamed Project Easel) were first publicly introduced at the JavaOne San Francisco conference in October 2012. Project Easel was featured in several conference sessions and BOFs, as well as in the main Technical Keynote.

Project Easel at the JavaOne Technical Keynote

If you did not attend the conference, or missed the Easel sessions, or planned to attend them but could not get into the room (yes, some of the sessions were completely packed!), the good news is that you can watch the recorded sessions online. Presentation slides are available for download as well. This will give you a more in-depth overview of Easel than the screencasts at netbeans.org. So without further ado, here are the links to the recorded JavaOne 2012 sessions related to new HTML5 development features in NetBeans 7.3, by speakers John Brock, David Konecny and John Ceccarelli:

JavaOne Technical Keynote (Easel demo starts at 1:23:30)

Project EASEL: Developing and Managing HTML5 in a Java World

How-to: HTML5 Front-End Applications with a Java EE Back End

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.

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