NetBeans Visual Web Pack - Real World Apps Tip #1 - Dynamic Content

I promised I would start blogging about my experiences developing the NetBeans Plugin Portal when I gave my BOF at JavaOne this year.  So this blog is the start of that series.  To get some background on the project, you really should look through my slides for the BOF.

There seemed to be the most interest around building a "Tag Cloud" using NetBeans VWP (Visual Web Pack).  So I thought I would start with that topic.  In order to do tag clouds in VWP, you need to understand how to create two things first, dynamic content and dynamic hyperlinks.  This blog will cover the details of creating dynamic content with NetBeans VWP.  I'll then follow up with blogs for dynamic hyperlinks and finally tag clouds.

I do plan to put the source code for the Plugin Portal out on netbeans.org soon but I have to get through another phase and do some cleanup first.  In order to demonstrate these topics, I'll be building simplified projects to be downloaded.

First, what is "Dynamic Content"?  My use of this term focuses on the distinction between the design time UI design and the run time UI.  Content that can not be visually created during design time is content that I refer to as "Dynamic Content" or content that is created during run time.

Representing the Content in the Design Time

One of the greatest features of using VWP is the visual designer.  The designer gives you a pretty good idea what the page will look like at runtime.  So obviously you'd like to use the designer to even help with the dynamic content.  To do this, use a "Layout Panel" as a placeholder for the dynamic content.  Here's a screenshot of the project we will build.  You can see the outline of the "Layout Panel" which I named "dynamicPanel".

layout panel

Creating the Content at Run Time

Now that you have a placeholder for the dynamic content, "dynamicPanel", you can create the content at run time.  We'll target the "preprocess" method of the page backing bean.  For more information on the VWP application model, please see the article, "The Java Studio Creator 2 Application Model".  As you may already know, VWP incorporates most of the Java Studio Creator 2 functionality. The application model in VWP is the same as Java Studio Creator 2.

For this first example, let's simply add a button as dynamic content.  Here's the code to do that.

    public void prerender() {
/\*\*
\* First clear out the layout panel
\*/
if(null != dynamicPanel.getChildren()) {
dynamicPanel.getChildren().clear();
}
/\*\*
\* Now create the button to add.
\*/
Button dynamicButton = new Button();
dynamicButton.setText("My Button");
/\*\*
\* Add the button to the layout panel.
\*/
dynamicPanel.getChildren().add(dynamicButton);
}

Note 1 - If you don't know the type for the component you want to add, visually add the component to the designer and look at the Java source to find the type.

Note 2 - The content you add MUST be a subtype of "UIComponent".

Conclusion

Here's what our page will look like.

page

Now that I have covered the basics of creating dynamic content, in my next blog I'll cover creating dynamic hyperlinks.


You can download the sample "DynamicContent" project I used to get started.  I used NetBeans 5.5 with Visual Web Pack installed to create the project.


Comments:

I'm just making the move into the Creator/NetBeans world for some JSF portlet work and have come across the new Netbeans plugin portal, which is much better than the previous one.

However, coming from non tag based web development point of view that the markup generated by these tools is amazingly bloated and over complex. The front page alone of that plugin homepage is 61Kb which certainly seems overkill for what it shows.

Also, because the tag cloud uses javascript callbacks for setting the category I can't multi click several categories into tabs. All this seems an overly complex way to produce something that doesn't function in a particularly complex way.

Finally, if you want to change one CSS file to update your look and feel with the huge amount of inline styling things will get very messy. Is this really the most efficient way to develop something like this?

Nonetheless, the content of your articles here are very helpful, thanks.

Posted by nathaniel on June 13, 2007 at 12:08 PM MDT #

Great article, thanks. Adding dynamic content to web pages was something I had been trying to do for a while. I was trying to achieve this by using jstl foreach tags, but I guess that this approach just doesn't work....:-)

Posted by Guillaume Radde on January 26, 2008 at 10:41 AM MST #

Post a Comment:
  • HTML Syntax: NOT allowed
About

David Botterill

Search

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