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?

Saturday May 17, 2008

Visual Web FAQ revised for NB 6.1

The contents of the Netbeans Visual Web FAQ has been revised for the Netbeans 6.1 release.

This FAQ is not created by development team or doc team, but a collection from articles contributed by various developers and users from blogs, forum etc. Any interested contributer can add to this FAQ. Details at

The main topics covered in this FAQ are

  •  Visual Web Application general concepts
  •  Components
    •  General
    •  Input Components
    •  Output Components
    •  Action Components
    •  Layout Components
    •  AJAX Sample Components
    •  Table Components
    •  Selection Components
    •  Standard Components
    •  Converters and Validators
    •  Data Providers and Binding
    •  Processing and Lifecycle
    •  Portlets and Portal Servers
  •  Migrating From Previous Versions
  •  Database Access
  •  Working with Deployment Servers
  •  Troubleshooting
  •  Working with Java Source Code

Saturday Apr 26, 2008

VW user tip2: User Friendly Error Messages For Woodstock AutoValidation

One of the powerful features of  Woodstock TextField components bundled with Netbeans Visual Web is, client side auto validation. However, it is kind of tricky, if you want to change the default messages it displays. David Heffelfinger sent me this neat tip on how to achieve this.

For other user tips, visit Netbeans Visualweb user tips and code snippets

A while back I was experimenting with Woodstock. One of the things I liked about it was the "ajaxified" auto validation of text fields and text areas. Unfortunately when I tried it out I was disappointed that neither <h:message> nor <webuijsf:message> would "catch" validation errors when auto validation "kicked in". Reading about it I noticed that we can use an alert component to display validation errors, via the "notify" attribute.

Unfortunately by default both the "Header" and the "body" of the alert display the same message, not exactly user friendly.

After some research I found a solution, we need to override the "detail" and "summary" error messages via a resource bundle.

I blogged about this at

Sunday Apr 13, 2008

Netbeans Visualweb user tips and code snippets

I'm planning to post useful programming tidbits provided by Netbeans Visual Web users in my blog.  If you have any interesting tips, code snippets or ideas for enhancements and want to share them with others and get their comments, send me an e-mail at wjprakashATnetbeansDOTorg. I''l post them in my blog.

Friday Apr 11, 2008

Netbeans 6.1 release candidate 1 available for download announces the availability of Netbeans 6.1 release candidate 1, which can be downloaded from here.

Some of the highlights of this release, as listed here, are

  • JavaScript Support (Javscript debugger is not yet part of the product, but will available soon as auto-update module)
  • Performance Enhancements (Up to 40% faster startup and less memory consumption)
  • Support for Popular Web APIs
  • RESTful Web Service Support
  • Spring Framework Support
  • New MySQL Support in Database Explorer
  • Ruby/JRuby Support Enhancements
  • Java Beans Support (back by popular demand)
  • JSF CRUD Generator (back by popular demand)
  • Javadoc Code Completion
  • Sharing Projects (AKA Sharable Libraries)
  • New Update Center Modules for ClearCase, AXIS, Hibernate, and SOAP UI

The main highlights for VisualWeb are

  • Performance improvement (mainly memory consumption)
  • No more mandatory binding attribute
  • Latest Woodstock components (release 4.2 with performance improvement)

Friday Apr 04, 2008

Updated plugin - Visual Web Woodstock Component Theme Builder

I have updated Visual Web Woodstock Component Theme Builder to work with Netbeans  releases. The updated  plugins available are for

For details on how to install and use the  plugin read my previous blog

Creating Netbeans 6.0 Visual Web Components Custom Theme Using Theme Builder

As I mentioned in that blog, you can directly add the jar created using Theme Builder project to any Visual Web Application. Interestingly, if you change CSS or messages in the Theme Builder project, just build the project to create the jar and refresh the page in the Web application that uses that jar. The changes should be  reflected  immediately in that page.  

Note: I noticed that the project build might fail if there are spaces in the project path. Try to create the project with out spaces in the path.

Monday Feb 18, 2008

Understanding Netbeans Visual JSF Web Application

Advanced users might have already figured out how Visual JSF Web Application works under the hood. I have written this article mainly for users new to Visual Web. It is important understand how Visual JSF applications works both at designtime and runtime to write well behaving and scalable application. Read more at

Understanding Netbeans Visual JSF Web Application

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

Sunday Jan 06, 2008

Creating a Flickr enabled Visual Web Application

As mentioned in it's web site, Flickr - almost certainly the best online photo management and sharing application in the world. It is becoming popular to mash up your own photos or other's public pictures from Flickr in to your own web application. Flickr exposes rich sets of open API via Web Services, which allows you to write your own program to fetch Flickr data such as photos, tags, groups and profiles.

I've written an article that explains how to fetch data from Flickr using a proxy client library and displaying the data in a Visual Web Application page. You can read about it at

Sunday Nov 04, 2007

NB 6.0 Tip: Finding the examples for Visual Web Woodstock AJAX Components

Do you know each and every Woodstock AJAX Component bundled with Netbeans 6.0 Visual Web has plenty of examples explaining every details of the component. My recommendation is to go through these examples to learn about the powerful features of these components.

Getting these examples is very easy. They are available in the TLD documents which are bundled in the IDE. To bring up the TLD documentation invoke the action Help -> Javadoc Reference -> Project Woodstock 4.1 Tag Library.

TLD Doc Menu

This brings up the browser with component TLD doc. The examples are embedded in the TLD description

Component Example

Here is an example in the Button TLD doc for Asynchronous Update

Wednesday Oct 31, 2007

NB 6.0 plugin for Predefined Visual Web Page Layouts

One of the glaring gap in the Netbeans Visual Web Application development is lack of ability to create Pages using predefined Page Layouts. Currently Visual Web users create a Visual Web JSF page using New -> Visual JSF page. This creates the "boring" empty page with no page layouts. It is up to the users to create their page layouts. Users tend to create Page Layout using external tools like Dream Weaver and import them in to VW pages. Unfortunately, page layouts created using these external tools require lots of hand crafting to fit in the VW design paradigm. I was thinking, how nice it would be if Visual Web provides some predefined Page Layouts for the users to select when they create their pages. So I wrote this experimental module that allows you to select such predefined Page Layouts.

Disclaimer:This is not a Netbeans 6.0 release supported plugin. It did not go through any rigorous QA tests like other Netbeans 6.0 Visual Web plugins. So comes without out any warranty.

Download the plugin sources:

Steps to install the plugin and create page from Page Layout

  • Download and install Netbeans 6.0 Beta2 (Important: You need NB 6.0 Beta2 or later)

  • Download and install the plugin org-netbeans-modules-visualweb-woodstock-pagetemplates.nbm

  • Once you installed the plugin, it is easy to create a Visual Web Page with one of the predefined Page Layout. Install Page Layout Module

  • Next create a Visual Web Page using New -> Visual Web JSF Page as usual. You will notice that New wizard has one more panel. Page Layout creation wizard

  • Select a Page Layout and click finish. This creates the page with desired layout which can be edited in the designer later.
    Page with Page Layout in the designer

Note: As I mentioned earlier, this is an experimental module and the Page Layouts I've added are experimental too. If you think this module should be converted to an officially supported module, leave a comment to this blog or vote for the feature request at the issue #120748. My idea is to pick some layouts from Open Source Web Design and convert them as Visual Web Page Layouts and present them via the New Page Wizard. Here is an example (andreas01)

OSWD Page Layout

See also

How to Create a CSS based Page Layout
How to create your own Visual Web Page Layout Plugin


Monday Sep 17, 2007

Netbeans 6.0 Beta1 has been released

Today announced that it has released Netbeans Beta1.

It can be downloaded from the page

The News and Note Worthy in this release can be found at the wiki page 

From this NB 6.0 release onwards, to create or work with a J2EE 1.4 Visual Web project which will be deployed to a 1.4 J2EE application server, first you need to install the Visual Web JSF Backwards Compatibility Kit plugin. You can find the details at News and Note Worthy mentioned above.

Monday Apr 30, 2007

Netbeans tip: Creating an AJAX enabled custom JSF component - Part 2

Finally I got some time to complete  part 2 of the Creating an AJAX enabled custom JSF component.

Part1, mainly covers how to write a simple Ajax enabled JSF component (ImageSlider). In this part, I have given the walk through on how to create the Image Slider Component. The Image Slider component would take one or more images and displays each image with a previous and a next link. Clicking on the next or previous link displays the next or previous image. Since the component has Ajax capability, the Image Slider component displays the next or previous image by fetching them with out submitting the form using Ajax transaction.

In Part2, the walk through explains how to add design time to the ImageSlider component and create a complib archive. Also the walk through explains how the complib is imported in to the Netbeans Visual Web Pack application to add the component to a visual web page by drag and drop.

Tuesday Mar 13, 2007

Netbeans tip: Creating an AJAX enabled custom JSF component - Part 1

Netbeans 5.5 Web Application Project provides lots of necessary plumbing to create a custom JSF component. I will be writing few articles explaining how to write an AJAX enabled JSF component. These articles will be concise version of more elaborate tutorial I am writing with Gail and Paul Anderson for JavaOne 2007 Hands-on Labs.

Part1, mainly covers how to write a simple Ajax enabled JSF component (ImageSlider). In this part, I have given the walk through on how to create the Image Slider Component. The Image Slider component would take one or more images and displays each image with a previous and a next link. Clicking on the next or previous link displays the next or previous image. Since the component has Ajax capability, the Image Slider component displays the next or previous image by fetching them with out submitting the form using Ajax transaction.

Wednesday Dec 06, 2006

Final release of Visual Web Pack for Netbeans 5.5 is available now

Visual web pack for Netbeans 5.5 (VWP) has been released today. Thanks to all those who downloaded the Technology Preview of VWP and send us your valuable feedback. Hundreds of bugs have been fixed and several enhancements incorporated for the final release.

You can download the final release at

Continue to provide us with your suggestions and enhancement request via Issuezilla for a better future release.


« July 2016