JavaOne 2012: NetBeans - Project Easel

The JavaOne 2012 conference materials listed this presentation as "Project EASEL: Developing and Managing HTML5 in a Java World," but the title slide posted as we wait for the session to begin is titled "NetBeans - Project Easel." The authors and presenters listed on that title slide are John "JB" Brock [1], John Jullion-Ceccarelli [2], and David Konecny [3]. This was my fifth presentation on Monday (5 for 5 so far) to be held in the Hilton, but it was in a new room this time (Continental Ballroom 4).

[4]

John Brock (who goes by JB) introduced and gave the presentation. David Konecny was also at the table and John Ceccarelli contributed a Tweet [5] about JB that was picked up by their example client that accessed the Twitter API. They began by covering "what Project Easel is not" and what it is. Brock said that Project Easel is NOT a WYSIWYG editor. He emphasized that it does not compete with JavaFX, but rather is a tool to use when working with CSS and JavaFX. Brock added that Project Easel is not a web designer and so doesn't compete with PhotoShop or other such applications.

Brock summarized what Project Easel is. It is for client side projects and leverages "new WebKit [6] internal and external browser synchronization." It has a "new JavaScript editor with smart code completion" and includes support for jQuery [7] and a "new JavaScript [8] debugger." The debugger is based off of WebKit's remote debugging API. Project Easel is intended to help developers build responsive designs [9].

Brock only had a few slides and then moved into code and IDE demonstration. He showed how online templates could be downloaded as a starting point and he pointed out that an organization could generate its own template as a common starting point. Brock demonstrated some of the features of the project once a template was downloaded.

Project Easel allows the application to be run off the file system, but also includes a lightweight embedded HTTP server to run JavaScript and other code against. If there is a pre-running server on the same local machine, it can be selected and used.

Brock showed HTML code in the Project Easel editor and pointed out how the IDE treats HTML code the same way we expect in Java code. For example, he showed closing elements and opening elements being visually marked when one was highlighted. The editor has built-in support for HTML5 elements [10]/tags. Hovering over these displays help for using that tag.

Brock stated that Project Easel was designed around the dual browser concept. This means that edits made in the IDE can be reflected in the Chrome browser. Brock differentiated this from using Firebug or Chrome developer tools because Project Easel supports direct changes to the code being reflected in the browser. This is different from making the changes locally in the browser and then having to make them again in the source code once it is determined that the changes address the issue.

One of the powerful features that Brock demonstrated was the ability to click the yellow light bulb icon familiar to NetBeans developers to add CSS styling to any selected CSS style sheet. Brock pointed out that each CSS attribute has a help screen in Project Easel that shows icons for the browsers supporting that particular CSS attribute. If a browser does not support that attribute, its icon is grayed out. One of the most frustrating aspects of web development is browser idiosyncrasies and differing levels of support, so this is is helpful idea. A challenge will remain as far as documenting support for certain attributes across different versions of the same browser.

Because Project Easel uses WebKit's debugging API, the example Brock was demonstrating had the warning banner across the top in bold yellow stating "NetBeans IDE Support Plugin" is debugging this tab." Brock explained that Google Chrome does this anytime debugging is occurring.

Brock showed how Project Easel allows the developer to change the presentation of $ used with jQuery to "JQuery" in an effort to help someone less familiar with jQuery to see what is happening. It doesn't affect the code itself, but merely presents it differently. This feature is page-only and does not affect the entire application.

I liked Brock's statement, "In the world of REST, you're going to get a chunk of something and need to go figure out how to deal with it." He used this as a segue into discussing how to use the Project Easel debugger to ascertain what's available in a RESTful response.

Brock demonstrated the Project Easel capability to generate a JavaScript-based REST client using MVC.

Brock referenced Twitter Bootstrap [11] and explained how building the example application on this enabled it to automatically resize and reposition pieces of the page based on the size of the browser. The main page for Twitter Bootstrap defines it as, "Sleek, intuitive, and powerful front-end framework for faster and easier web development."

Brock also referenced use of the Backbone.js [12] JavaScript library. This library's main page describes it: "Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface."

In response to a question, Brock stated that version 1 ("which we hope to release in the next week or so") of Project Easel requires the HTML5 project to be used in NetBeans. Brock also reminded the audience that of all of the IDEs that Oracle contributes to (NetBeans [13], JDeveloper [14], Oracle Enterprise Pack for Eclipse [15]), NetBeans is the IDE that gets to try out new features. Brock acknowledged that it'd obviously be nice to have Project Easel capabilities in JSF [16] and other non-HTML5 projects (I was thinking this of JavaFX [17]).

In response to another question, Brock stated that Project Easel is aimed at client-side GUIs. It can obviously be deployed to any application servers via WAR files, but the tool's benefit is for client side coding (HTML/CSS/JavaScript).

Brock stated, in response to a question, that the only thing in his demonstration that was HTML5 is drag-and-drop. He says most of it runs on any browser, but the CSS "is what messes you up." He called CSS support across browsers "iffy." An interesting anecdotal story he relayed was that the box shadow started working during his work on the demonstration as Chrome received an update. He said it is "the Wild Wild West" and that they're "shooting from the hip" in trying to stay current with various browsers' support for CSS.

Not surprisingly, Brock mentioned in response to another question that they likely won't add support for browers other than the main ones already covered in Project Easel. In other words, Project Easel probably won't add information on any new browsers related to their support of different CSS mechanisms.

In case it is not obvious, Brock pointed out in response to a different question that Project Easel is tied to NetBeans. He said he is planning on it being made available in the future in JDeveloper, but cannot comment on whether it will become available for Oracle Enterprise Pack for Eclipse [18]. I hope the day comes when NetBeans's support for JavaFX and for Project Easel are all available together.

This session started out about only half-full, but people kept streaming in throughout. With numerous people coming in late and few if any people leaving, it got fairly full. Although this conference room is significantly smaller than Plaza A/B, it is still obvious that Project Easel interests numerous people.

Original posting available at http://marxsoftware.blogspot.com/ [19] (Inspired by Actual Events)