Friday Jul 11, 2008

Generic Web Page Designer for Netbeans, anyone?

Visual JSF designer in Netbeans provides a way to design a web page visually. Unfortunately, Visual JSF web page designing is limited  to JSP based JSF web pages created by Visual JSF framework. However, Netbeans users might want to design web pages created by various frameworks. Such pages include HTML, PHP, JSP, RHTML (Ruby on  Rails), XML (facelet) etc. So I thought it is worth a time to explore the concept of a generic Web  Page Designer, with out any restrictions of any particular framework. If you are interested, you can read my proposal for a generic Web Page Designer at The proposal includes Web Page Designer Concept Overview and Web Page Designer Design Concepts.

Web Page Designer

I also spent some time to create a prototype of a HTML designer. This designer will be the foundational designer for all other page designers (like PHP, JSP etc). Other page designers would be extended from this designer. This is obvious because HTML is a subset in all page types.

This HTML designer embeds Mozilla Layout Engine (XULRunner) for rendering the web pages. Therefore, unlike Visual JSF designer, user would get hi-fidelity rendering of the web pages. Details on embedding Mozilla in Netbeans is available here.

I've used JAVA-XPCOM API to interact with underlying XULRunner to facilitate page design. Unlike other Mozilla based Web Page authoring tools like NVU, in this designer I'm not exposing the Mozilla Composer, but directly manipulating the Mozilla DOM for visual editing. The advantage is, I can execute JavaScript on demand using XurRunner API. This helps me to render JavaScript based Web 2.0 AJAX widgets (Yahoo, jMaki, Google etc) in the designer. This unique feature I've not seen available in any of the popular WYSIWYG HTML designers, I could lay my hand on, like DreamWeaver or Microsoft expression. Another interesting feature I implemented, is the direct manipulations of CSS style of a HTML element selected in the designer using the Style Builder view docked in the bottom. Any modification of a CSS property in the Style Builder is immediately reflected in the designer.

Oh!, but one bigger question still bothers me - Are Netbeans users really interested in a Web Page Designer or am I just wasting my time?

Monday Jan 14, 2008

No more mandatory component binding in Visual Web

Netbeans Visual Web Designer (NB 6.0 and before) mandates that each JSF component tag in the JSP must have a binding attribute which is bound to a property in the backing page bean via Expression Language binding. This ends up generation of getter and setters for each of the component in the page bean. Even though, this is convenient to set properties directly to the JSF component used in the page, this is very annoying because 95% of the components declared in the page Java source are not used and unnecessarily bloats the backing page bean.

For Netbeans 6.1 release this is going to change. Following changes have been implemented already and available in the Netbeans 6.1 nightly builds.

  • Newly created pages and page fragments will not have any binding attribute.
  • The generated Java source will not contain tons of getter and setters for corresponding properties.
  • The binding attribute in the JSP and corresponding property in the Java source will not be generated when a component is dropped on to the designer.
  • Users will have the option to add component binding using "Add binding attribute" context menu item of the component in the outline or designer.
  • Users will also have the option to remove component the binding using "Remove binding attribute" context menu item.

Here are some test results after the implementation

  • Create a project
  • In the page drop a table and copy and duplicate it to 20 tables
  • Copy the page and duplicate it to 128 pages.


  • Results With binding attribute for each component
    • Extremely slow to copy and create all the pages (more than 20 minutes)
    • Memory in the memory meter reached 512 MB and OME after copying about 95 pages
    • Copy all 128 pages after restarting IDE.
    • Final project size 10.2 MB
    • Restart IDE and Open project and 10 pages (switch to Java) - Memory 120/190 MB
  • Result With out binding  for each component
    • Reasonably faster to copy and create all the 128 pages (about 5-7 minutes)
    • Final Memory in the memory meter (after GC) 165/340 MB
    • Final project size 1.9 MB
    • Restart IDE and Open project and 10 pages (switch to Java) - Memory 75/140 MB

« July 2016