Mind over Matters: Rumbles of my mind.. Echo in this blog..

This Javaone, there are a number of sessions which are devoted to Ajax based web development using netbeans. You should be seeing a short speech on woodstock and VW by Deep Bhattacharjee during Netbeans Day during the NB session between 2:35 to 3:30. Also, there is an hands-on lab happening on developing Ajax enabled web-applications using woodstock and visual web on Wednesday .. 

For those who are interested in knowing more, woodstock has a stall set up in the Javaone conference, where you can meet up with the woodstock team and ask questions and explore more about the components.. 

I have written up a small document on how to create custom components for woodstock that you can integrate with netbeans visual web palette. The document is put up at: http://wiki.netbeans.org/WoodstockCustomComponents

You can also take a look at the following links for more information on woodstock components:

https://woodstock.dev.java.net/Documentation.html - Contains links to useful articles on how to use various woodtock components, tld docs, functional specs and tech notes.
http://blogs.sun.com/dmitry/ - Contains info on woodstock architecture in general and ajax text field auto complete features

Project woodstock is about to release its 4.2 GA on April 23rd. You can currently download its RC build from here. The 4.2 release features a lot of bug fixes and two new components, the login component and the ratings component. Meanwhile to 4.3 builds have also started and you can download them here. The new components that are going to be a part of the 4.3 release are the ajaxified tab, tree and table components. 

Here are some of the sites that use woodstock for building their web applications. Mary Lautman, my manager managed to dig up this information from the internet.

www.rgtherapy.com

http://www.sipisuominen.com/

http://www.java-architect.com/ - you need to select the GuestBookView

http://www.ourfaces.net/faces/Home.jsp

http://humantree.org/faces/HumanPage.jsp

http://www.bbjsupport.com/

 Any more?

This blog discusses about developing a simple portal application with
woodstock (VWP) and deploy that  in glassfish in netbeans 6.0.

Getting started:

The first step is to install the portlet container driver for
glassfish. You should find them at:

https://portlet-container.dev.java.net/public/Download.html

You should then install it in your glassfish server location.

In *nix systems, the command would be:

java -jar
portlet-container-configurator.jar /usr/local/glassfish 
/usr/local/glassfish/domains/domain1

where:

/usr/local/glassfish - glassfish install location

/usr/local/glassfish/domains/domain - domain that is being used for
glassfish.



Next, download and install the portat plugin pack for netbeans.

You can download them at:

http://portalpack.netbeans.org/download.html



There are four downloadable plugins available out of which if you are
going to deploy the application in glassfish, you wouldnt need to download the fourth plugin meant for sun java
system portal server 7.x

Creating a portal app

Create a new JavaEE5 web project. You should choose the target
container as glassfish (since we are using that for this example and not tomcat). In the final step of project
creation, where you have a list of frameworks to choose from, you should select VWP and Portal support. Select portlet version
as 2.0 and check the "create portlet" and "create JSP" checkboxes.

(Click on the image for a larger view)






The project should now be created. The Visual web designer screen
though shows up as a white blank screen. You should be still able to drag and drop components initially and set
properties on them.

Drag and drop a text field and a button on to the screen. Let us try to show this simple page on a portal server.

Configuring the application

The following changes needed to be made at present to make a portlet
work properly with woodstock components.

i) Download jsf portlet bridge from
https://jsfportletbridge.dev.java.net/ and make sure you include that
in your application library's classpath.

ii) Make sure you have the following six libraries imported to your
application.

(Click on the image for a larger view)





iii) Edit your portlet.xml file so that it contains the following line.

           
<portlet-class>com.sun.faces.portlet.FacesPortlet</portlet-class>               


Once you do this, there should be some error shown on the visual
designer page and you wouldnt be able to  make visual edits on the components. However you should be able to edit
the JSP pages.

iv) Include a <webuijsf:themeLinks> tag in the JSP page so that
the woodstock theme is included for the app.



v) Right click on the jsp page -> set as initial -> view mode.
(or edit/help mode). Alternatively, you can go to portlet.xml and append it as an init-param. Something like:

        <init-param>

<name>com.sun.faces.portlet.INIT_EDIT</name>

<value>/Page1.jsp</value>

        </init-param>  



Deploying your application



i) Start the glassfish server. Check whether the portlet container
driver is installed for glassfish by going to

http://localhost:8080/portletdriver



ii) Build your web application



iii) Go to the admin tab of the portlet page and upload the web
application's war file.

iv) You should now see the text field and button in all its glory!

For more information on portlets and woodstock you can take a look at Dmitry's blog on Running Woodstock JSF Components in Portlet environment

This short write up explains how to use seam framework with woodstock and develop an application using netbeans 6.0 IDE and deploy it on glassfish. 

I have been playing around with seam and woodstock. One of the things i wanted to do was run seam on glassfish. Glassfish is one of the first containers to be JavaEE 5 compliant and IMO its neat.. . The best JavaEE containers that you can find in the market today.(I have nothing against the JBoss container.. but it just doesnt appeal
to me.. glassfish seems much more faster and simpler to use) And of course i dont think i need to say much about woodstock.. I have already blogged a lot about it

Being a complete newbie.. the first thing i intended to do was start out with seam. This blog entry describes what i did. (sort of an idiot's guide to installing seam).

The next thing was to pick out the simplest of examples that seam provides you and port it to glassfish. The seam installation, does provide a default glassfish compliant application(hotel booking) that you can deploy and try it out.. But whats the fun in using something thats already given to me ready made.. The simplest that i could find was the registration example. This blog from Michael Yuan single handedly made my transition from JBoss container to glassfish completely painless.. You could also refer to Roger Kitan's and Brian Leonard's blogs.

You can take a look at Michael Yuan's blog to see how to port the application to glassfish. Since its all mentioned there clearly, i dont want to mention them here again. It mostly involves including some jars and making property file changes. (and of course using hibernate JPA instead of toplink essentials)

The only extra thing i needed to do was to have a mandatory import.sql file which inserted some dummy users into the data base.

The next thing to be done was to port the application to use woodstock components in the application instead of the JSF RI components. I am not a master with facelets and i didnt want to spend time right now to configure woodstock to use facelets.(hmmm.. sometime later.. not now..)
So, the next simplest thing i did was to create a jsp page which used woodstock components.. Here is how the sample jsp page looks.

 Great.. Now all thats left is including the necessary jars for woodstock components to work. The simplest way again for now is to take the jars present in the example app war that you find in the woodstock site.

I modified the build.xml found for the registration example app so that it included the necessary jar files. Here is what my build.xml included. I took out all the woodstock jars and put them inside a "woodstock" directory inside the examples directory of seam. (this would be helpful if i later experimented with other seam examples)

Next make sure your faces-config.xml has your facelet configuration parameter commented out. Also, make sure your web.xml is modified for woodstock components. Again, here is how mine looks like..  

 Now we are all set..  Compile your own modified registration application and make sure everything is built fine. Importantly make sure the woodstock and its dependent jars are included in the generated "ear" file.

Next just go ahead and deploy this application in glassfish. Here is how my registration application looks like.

Seam is a framework from JBoss which helps you to develop enterprise level web 2.0 web applications. From the JBoss Seam site,

"JBoss Seam is a powerful new application framework for building next
generation Web 2.0 applications by unifying and integrating
technologies such as Asynchronous JavaScript and XML (AJAX), Java
Server Faces (JSF), Enterprise Java Beans (EJB3), Java Portlets and
Business Process Management (BPM)."

If you were to navigate to their home page, you would find them describing the most compelling reasons to use seam. Some of them being

- The first framework to use EJB 3.0 (really cool!)

- Easy way to do Ajax

- Backward compatibility with J2EE

 The most compelling feature i found in this framework was the combination of the JSF managed beans with EJB entity beans, so that you dont have to keep passing data back and forth between the entity beans and the managed beans. Also, you can use hibernate validators in the entity beans for validation instead of writing your own validators or specifying validtaors in the JSP page.

1) To get started, you would need the latest JBoss AS, and seam.(i used jboss 4.2.1 GA and seam 2.0.0.CR2)

You can download them from

http://sourceforge.net/project/showfiles.php?group_id=22866&package_id=16942&release_id=523619

http://sourceforge.net/project/showfiles.php?group_id=22866&package_id=163777

The seam download contains examples which you can use to see seam in action (there are a whole bunch of these examples with different frameworks in use).

2) Edit the build.properties file present in <SEAM-INSTALL> dirs o that the jboss.home references your AS location. For example here is what i put in for my jboss.home in my E:\seam

3) When building seam, i encountered a build failure which expected me to put a jar called jboss-seam-ui.jar and jboss-seam-ui-resources.jar inside a folder called "target" inside the "ui" folder.
i.e /ui/target. These jars can be found in the lib/ and lib/src directories

4) Make sure you have a working direct internet connection. The build process seams to download a lot of jars required for seam to build. If the build fails because it couldnt not download the jars, it instructs you to download them manually and install them. I made sure that i removed my proxy connection and had a direct internet connection so that the build process could go and fetch the jars from the seam repository.

5)  Now we are all set to build and run seam examples. Go inside the examples/ directory and issue an "ant" command.The build will complete successfully.

6) Go inside an example app (i used the registration example. it seemed the simplest of them all). and issue another "ant" command.

7) Start the JBoss app server and deploy the generated "ear" file into the server. (I copied the ".ear" file into <jboss-as-dir>/server/default/deploy dir).

8) Open your web browser and point it to http://localhost:8080/seam-registration.

This particular example uses JSF 1.2 with facelets 

You can go ahead modify these applications and see how things work.

For more instructions, there is a very good JBoss seam wiki at:

http://wiki.jboss.org/wiki/Wiki.jsp?page=JBossSeam

and a good tutorial at:

http://labs.jboss.com/jbossseam/j2ee/part01.html

The woodstock component set has been in the process of introducing new components into the palette. The components that have been introduced of late are:

- Bubble component - The bubble component shows up a "popup div"  on a web page. This is usually invoked on a "onmouseover" event of a component when you want to show more information about the component. You can customize the kind of content that is put inside the bubble such as images, text or hyperlinks. Animesh has a good blog entry which explains more on it.

 - Accordion - Accordion is a very cool component which you can use for navigation and also to display data. The contents of accordion can also be refreshed asynchronously.I have seen accordions in one of gnome's window system. Web based accordion though seems much cooler.

- Menu - There really shouldnt be much to explain about this component. You would have probably used it everyday in a window based system. If not, just press shift+F10 or right click anywhere in your computer. Here is how the woodstock menu looks like.

 You can see these components in action at:

http://webdev2.sun.com/example/faces/index.jsp

These components are not in the default list of components that show up in netbeans 6.0 VWP palette.

However, you can either

a) Go to the JSP view of the page you are creating and write the tags yourself and the beans too.

b) Follow the instructions in

http://wiki.java.net/bin/view/Javatools/InstallingWoodstockComponentsInNetBeans

(Note: As of writing this blog, only bubble component has designtime enabled. Menu and accordion are still work in progress) 

Happy exploring!

I just came across Winston's blog where he wrote about customizing themes for woodstock components being used in Netbeans 6.0.

http://blogs.sun.com/winston/entry/theme_builder

 I thought this was really a cool tool. Customizing themes was one of the most needed features for using the woodstock component set in VWP. I am sure a great many people would love this.

 

Debugging is one of the major pain in the neck if you happen to be writing javascript/html/css. If you are writing jsp pages, you may need to redeploy your application each time you change your code. Firebug is an plugin available to firefox which helps you ease web based application development. I have tried to explain some of the features that i use in this blog.

Debugging Javascript 

Similar to the way you debug java code in your netbeans IDE using breakpoints, you can apply breakpoints to your javascript code and check where the error in your javascript actually happens. You can also hover over each variable that you have in your javascript code to check the value of the variable. Similarly, you can also "go in" to functions or "go over" function calls similar to the way you do in your netbeans debugger. Also, note that the function call "stack" is displayed with the help of "<" marks. Clicking on one of them would take you to that particular function in that particular file and you can check the state of variables over there too.

Here is a snapshot of debugging javascript: 

Great!!

Suppose if you want to see how much time the javascript files took to load. Here is how firebug shows it.

Note that you could also see how long it takes for a round trip ajax request/response to happen  by clicking in the "XHR" tab above. The "All" tab shows the time taken to load all the elements in the web page. The example i showed above simply shows the time taken for the javascript files to load. If i were to click on the "images" tab, then the time taken for the images to be loaded would be shown.

Debugging HTML and CSS 

Using firebug debugger, you can also debug html/css. You can change/add the value of the css or attributes of a particular html dom element and see how it looks like on the browser.

Here is a snapshot of how it looks like for me.

As you can see, with all these features, you should be able to get your web application up and running in your mozilla firefox browser pretty easily. Of course the biggest question mark i can see over here is.. what do i do if my code doesnt work in IE?

I've meant to write this for a long time now, but havent got around to actually doing this. The woodstock component set has been expanding of late and we have been adding a lot of new components and functionalities to existing component set.The component renderers are now being rewritten so that they perform client side rendering (output JSON properties and client side javascript widgets take care of the constructing and showing the element on the web page). 

The components that have been rendered client side exhibit Ajax functionalities i.e. they can be updated client side asynchronously(and send data to the server ) without having to submit the form.

To get access to the dom element on the client side, you need to call document.getElementById(<client-id> )

• domNode.setProps - Use this interface to update the component's property on the client side. For example, to update an image's source. you could do something like document.getElementById("form1:image1" ).setProps({src:"/foo/bar/abc.jpg"});
• domNode.getProps - This will return you back a JSON object which contains all the component's properties.
• domNode.refresh(<element-id> ) - Using the refresh interface present on the dom element, to refresh the state of the element with the help of other element whose id  is specified in the bracket.Note that, for this, both the element's properties should be tied up to the same backing bean on the server side.For example. if you want to update the text of the hyperlink with a text that is entered in a text field, you need to do something like:

               <webuijsf:hyperlink id="refreshTest1"  text="#{HyperlinkBean.refreshText}" actionExpression="#{HyperlinkBean.success}"/>                         
                            <webuijsf:textField id="textField1" onKeyPress="setTimeout('refreshHyperlink();', 0);" text="#{HyperlinkBean.refreshText}"
                                label="Enter new text"/>

And in the "refreshHyperlink" javascript function, the code would look something like this:

                    function refreshHyperlink() {
                        // Get hyperlink to refresh.
                        var domNode = document.getElementById("form1:refreshTest1" ) ;
                        domNode.refresh("form1:textField1" ) ; // Update text field value and refresh.
                    }

The above javascript would update the value of the text field on the server side and also update the text of the hyperlink displayed without having to submit the form. Note that the text property of the hyperlink and the textField component are both bound to the same backing bean. 

If you were to invoke refresh function without any argument, the component would refresh itself without the help of any other components.

Also note that the component broadcasts events whenever you refresh the component. If other components are interested in the value of the component, then they can subscribe to these events. 

• domNode.submit() - Use this function to asynchronously submit the value of the component. The component alone will go through the whole JSF lifecycle. You can use this feature if you simply want to inform the server of the state of the component
  

Project Woodstock has been given a mention on netbeans.org front page news.

For those new, woodstock happens to be the next generation set of components that are now a part of Visual Web Pack development kit in netbeans. 

Here is an excerpt:

The Project Woodstock components, the latest generation of web
components, capitalize on those years of experience. Plus, the
components are open sourced. The Project Woodstock components have many
new features, and especially focus on client-side processing. Here's
what this mean for developers:

• A better user experience. The Project
  Woodstock components do as much processing as possible in the user’s
  browser. By doing so, they keep to a minimum requests sent across the
  wire to a web server. This makes the web page user experience much
  richer, as well as faster and more pleasant.
• Easy access to client-side processing. The Project Woodstock components include an API that makes client-side processing available to other developers.
• Dynamic AJAX behavior.
  One of the most exciting additions to the Project Woodstock components
  is AJAX dynamic behavior. Project Woodstock takes many of the Visual
  Web components, such as Textfield, and makes them AJAX enabled. It
  implements this AJAX behavior via JavaServer Faces Dynamic Faces, or
  Dyna-Faces.

I happened to come across this anomaly today. Internet Explorer and Firefox both seem to have different policies while using the title and the alt attributes for the <img> tag.

If an <img> tag for example, had both the title and the alt attributes specified, then these two browsers will display the value present for the title attribute when you hover the mouse on the image. But if the title attribute is not specified for the image, then Internet explorer takes the liberty of showing the text specified for the alt attribute specified for the image as the tooltip when you hover the mouse over the image. However, firefox remains stable and does not do this.

I took a look at the html spec to see what it said about using the alt text if title wasnt specified.  But there wasnt anything mentioned about what action a browser should take if the value of title attribute wasnt specified. I guess this is another instance of IE taking implementation in its own hand and defining its own rules that we have to be aware of.

I just happened to read Ed Burn's latest blog (actually that was written more than a month back.). He has given a brief overview on how JSF 2.0 is going to be structured.He talks about something called "Buy a feature" where customers will need to buy a feature that they want to use. For example, if the customer wants to get the facelets feature up and running for his JSF 2.0 application he would go and buy it giving a certain amount of money. The advantage, put in crude terms, would help us to know what kind of features customers prefer.