Arun Gupta, Miles to go ...

TOTD #45: Ajaxifying Java Server Faces using JSF Extensions

TOTD #42 explained how to create a simple Java Server Faces application using NetBeans 6.1 and deploy on GlassFish. In the process it explained some basic JSF concepts as well. If you remember, it built an application that allows you to create a database of cities/country of your choice. In that application, any city/country combination can be entered twice and no errors are reported.

This blog entry extends TOTD #42 and show the list of cities, that have already been entered, starting with the letters entered in the text box. And instead of refreshing the entire page, it uses JSF Extensions to make an Ajax call to the endpoint and show the list of cities based upon the text entered. This behavior is similar to Autocomplete and shows the suggestions in a separate text box.

Let's get started!

1. Download latest JSF-Extensions release.
2. Unzip the bundle as:
   
   

   ~/tools >gunzip -c ~/Downloads/jsf-extensions-0.1.tar.gz | tar xvf -

3. In NetBeans IDE, add the following jars to Project/Libraries
   
   
4. Edit "welcomeJSF.jsp"
1. Add the following to the required tag libraries
   
   

   <%@taglib prefix="jsfExt" uri="http://java.sun.com/jsf/extensions/dynafaces" %>

   
   The updated page looks like:
   
   
2. Add the following tag as the first tag inside <f:view>
   
   

   <jsfExt:scripts />

   
   The updated page looks like:
   
   
3. Add prependId="false" to "<h:form>" tag. The updated tag looks like:
   
   
4. Add the following fragment as an attribute to <h:inputText> tag with "cityName" id:
   
   

   onkeyup="DynaFaces.fireAjaxTransaction(this, { execute: 'cityName', render: 'city_choices', immediate: true});"

   
   This is the magic fragment that issues an Ajax call to the endpoint. It ensures execute portion of the request lifecycle is executed for "cityName" and "city_choices" (defined later) is rendered.
   
   The updated page looks like:
   
   
5. Add a new <h:outputText> tag after <h:commandButton> tag (to hold the suggestions output):
   
   

   <h:outputText id="city_choices" value="#{dbUtil.cityChoices}"></h:outputText>

   
   The updated page looks like:
   
   
5. Add the following fragment to web.xml
   
   

   <init-param>           <param-name>javax.faces.LIFECYCLE_ID</param-name>           <param-value>com.sun.faces.lifecycle.PARTIAL</param-value>         </init-param>

   
   The updated file looks like:
   
   
6. Edit "server.Cities" class
1. Add a new NamedQuery in Cities class (at the mark after yellow-highlighted parentheses):
   
   
   
   
   The query is:
   
   

   @NamedQuery(name = "Cities.findSimilarName", query = "SELECT c FROM Cities c WHERE LOWER(c.cityName) LIKE :searchString"),

   
   This NamedQuery queries the database and return a list of city names that matches the pattern specified in "searchString" parameter.
   
2. Change the toString() method implementation to return "cityName". The updated method looks like:
   
   
   
   This allows the city name to be printed clearly.
7. Add a new method in "server.DatabaseUtil" as:
   
   

   public Collection<Cities> getCityChoices() {         Collection<Cities> allCities = new ArrayList<Cities>();         if (cities.getCityName() != null && !cities.getCityName().equals("")) {             List list = entityManager.createNamedQuery("Cities.findSimilarName").                     setParameter("searchString", cities.getCityName().toLowerCase() + "%").                     getResultList();             for (int i = 0; i < list.size(); i++) {                 allCities.add((Cities) list.get(i));             }                     }         return allCities;     }

   
   This method uses previously defined NamedQuery and adds a parameter for pattern matching.
   

1. JSF Extensions Getting Started Guide
2. Tech Tip: Adding Ajax to Java Server Faces Technology with Dynamic Faces
3. JSF Extensions Ajax Reference

Posted by Arun Gupta in web2.0  |  Comments[3]

Travel Schedule - Next 5 weeks

Here is my travel schedule for next 5 weeks:

• How Metro provides enterprise-grade open source Web services stack for meeting all your needs
• How jMaki allows you to create Rich Internet Applications
• How Rails applications can be powered by GlassFish & jMaki
• Asynchronous Ajax that allows you to scale your applications tremendously
• And any other topic that you are interested in :)

Posted by Arun Gupta in General  |  Comments[2]

TOTD #20: How to create a new jMaki widget ?

This TOTD explains how to create a new jMaki widget and make it available in the NetBeans palette.

In order to create a jMaki widget, it's important to understand the jMaki Widget Model.

Basically, "component.htm", "component.js" and an optional "component.css" together make a jMaki widget.

Here are the files for a Hello World widget that takes an argument, concatenates it with the string "Hello" and displays the result on the page.

component.htm

component.js

component.css

The following files are required if you like to package your component as a reusable widget library in the NetBeans IDE:

hello.jsp

Bundle.properties (top-level)

Bundle.properties (templates)

widget.json

Package these files together in the following directory structure (choose any zip file name):

And then you zip up these files together, that's it! Now this zip file can be added to the jMaki palette in the NetBeans IDE as shown here. Really simple!

After the widget is added to NetBeans palette, it looks like as shown below:

Now, just like any other jMaki widget, you can drag-and-drop "Hello" from the jMaki palette in your JSP page and the following code fragment is generated:

<a:widget name="hello" args="{name: 'Duke'}" />

After the application is deployed, the page is rendered in the browser as shown below:

Couple of points ...

1. Templates for other languages such as Ruby or PHP can be added in the templates directory. This enables drag-and-drop of your widget in those languages as well.
2. It's important to maintain the case sensitivity of the property names in Bundle.properties otherwise they will not be recognized.

Please leave suggestions on other TOTD that you'd like to see. A complete archive is available here.

Technorati: totd jmaki web2.0 widgets ajax netbeans

Posted by Arun Gupta in web2.0  |  Comments[12]

Next Gen Web Slides

Follow up from my previous entry, here is a list of slides for the next generation Web application, a.k.a "Web 2.0", sessions from Sun.

Technorati: Javaone Web2.0 Ajax jmaki REST

Posted by Arun Gupta in web2.0  |  Comments[0]

AJAX vs Ajax - Ajax ofcourse!

Ajax is a popular term for past few months but is still being written incorrectly as "AJAX" (all capitals) instead of "Ajax" (camel case). I started using AJAX but then corrected myself and have been using Ajax since then. So the correct term is Ajax, not AJAX.

Here is a list of several reasons (some mine and others from my colleague Rick's list):

1. Jesse James Garrett coined the term as Ajax, not AJAX.
   1. A quote from the source "The name is shorthand for Asynchronous JavaScript + XML". It is intended to be a shorthand, not an acronym. And notice it is "+", not an "and" indicating a collection of technologies.
   2. Another quote from the source "I needed something shorter than “Asynchronous JavaScript+CSS+DOM+XMLHttpRequest” to use when discussing this approach with clients.". Ajax is not just Asynchronous JavaScript and XML, it's CSS and DOM as well. Moreover JSON is becoming a more popular format for data interchange. Should "AJAX" then instead be coined as "AJAJ" ? Or if an application happen to use Text instead, will they call it as "AJAT" ?
   3. In an interview on The story behind Ajax, Jesse said "I thought of Ajax as a convenient [term]. It was never intended as an acronym.".

I think the above three bullets should be sufficient to convince anybody to use "Ajax" instead of "AJAX". But if not, here are some more reasons to switch to the correct usage of term:

2. Wikipedia entry clarifies that Ajax is not expected to be an acronym.
3. A Google Fight between AJAX and Ajax shows exactly same numbers and still tries to predict a winner. Is that a bug ?
4. Another reference to Ajax vs AJAX.
5. Bye Bye "AJAX", The Age of "Ajax" is Nigh - If AJAX is indeed an acronym (which it's not) then a comment on the article points out some others as:
   AJACX: Asynchronous JavaScript, CSS and XMLHttpRequest
   ADJACS: Asynchronous DOM, JavaScript and CSS
   ADHJACS: Asynchronous DOM, HTML, JavaScript and CSS
   AJACHS: Asynchronous JavaScript, HTML and CSS
   AJACS: Asynchronous JavaScript, HTML and CSS
6. Dion's (Ajaxian co-founder) first prediction for 2007 is "Ajax beats AJAX in all but bad newspapers."
7. Here is a Google survey of some publishers of Ajax books. They all seem to be using "Ajax", not "AJAX".
   • Addison Wesley Professional  
   • O'Reilly Media, Inc.
   • Manning Publications Co.
   • Apress, Inc.
   • Wrox (John Wiley & Sons, Inc)
8. Some of the common vendors use Ajax
   1. IBM
   2. HP
   3. Oracle
   4. BEA
   5. Adobe

Now there should be no reason to use "AJAX". However if you still feel like using this term, please leave a comment on this blog and let's talk. There are some incorrect usages in sun.com and I'll follow up to get them fixed.

Technorati: ajax Ajax AJAX

Posted by Arun Gupta in web2.0  |  Comments[4]

Day 1 @ The Server Side Java Symposium

I've been in Las Vegas for past 2 days attending The Server Side Java Symposium. Sun is the only platinum sponsor.

The conference is at The Venetian, one of the nicest hotels on the strip, but found two irritating issues for working people:

• Using fitness center facilities require you to pay $35/day charge. That is ridiculous to me. They anyway charge fortune for the room so why this extra fee ? I used the facility yesterday without knowing the charge but found out about the charge as there were folks lined up on the "reservation desk" for the fitness center. I've never seen that for a fitness center in a hotel.
• There are no power connections on the office table. There is a personalized fax machine but I'd rather have a power connection to make it convenient.

TheServerSide sponsored the travel and lodging and check out the pictures of the suite, it's pretty cool!

I missed the opening keynote by Karen Tegan Padir but heard it went well. Later that day, I attended a session by Ben Galbraith and Dion Alamer (co-founders of Ajaxian) on "State of Ajax".

The session started by asking "Does anyone here not know how to do Ajax ?". There were few hands raised and so the session started by creating a simple HTML form that takes a zip code and returns the corresponding city using XMLHttpRequest without any page refresh. Then the talk explained three main Ajaxian architectures:

• Return data (JSON / XML) - Smart clients, parse XML and JSON and populate the front end.
• Return HTML (responseText + innerHTML) - Slightly dumb client, just shows the results as is.
• Return JavaScript (eval) - Really dumb client, invoke the script sent by server.

The talk identified Google Maps, Google Suggest, Housingmaps,  TaDaList as Ajax innovators. In my opinion, Google Suggest was really the first effort that showed Ajax-like interactions.

Ben and Dion divided JavaScript in two camps: "JavaScript is Good" and "JavaScript is Bad". jMaki was classified in the first camp, Google Web Toolkit in the second camp and Direct Web Remoting in partly both the camps. Project Phobos was also classified in "JavaScript is Good" camp as it enables server-side scripting. Ben will be uploading a new video on jMaki showing Craig's list mashup so stay tuned for that.

Prototype, Scriptaculous and Dojo were rated as the most popular toolkits in a survey conducted last year on Ajaxian. The speakers classified Dojo as "Huge Elephant of JavaScript" with support for offline storage, presentation, remoting, charts and many other features.

IntelliJ IDEA 6.0 and NetBeans 5.5 for development and FireBug for debugging were the recommended tools. Then there were few slides on offline storage, especially the upcoming capabilities in Firefox 3 (off-line cache, off-line events, persistent cache), dojo.storage package and Adobe Apollo with offline flash. There was a brief mention of Project Tamarin that will provide approx 10 times faster JavaScript runtime and this will be integrated in a later version of Firefox. And the talk concluded by giving a future slide including topics such as off-line Ajax, fast JavaScript interpreters, HTML 5 and others.

A complete Day 1 report is available here. Ed Ort also posted notes.

Technorati: theserverside Ajax venetian

Posted by Arun Gupta in webservices  |  Comments[2]

More on Sun Web Developer Pack

More buzz on Sun Web Developer Pack ...

• Sun Announces the Next Major Version of the Open Source Java Enterprise Edition 5 (GlassFish v2) Application Server and the New Sun Web Developer Pack (official announcement)
• Sun Unveils GlassFish V2 Beta for Web 2.0 and SOA Development (Linux World)
• GlassFish app server to swim in the enterprise (InfoWorld)
• Sun Web Developer Pack (Flash Web Design)
• Sun Announces GlassFish V2 Beta At AJAXWorld (Sys-Con/Ajax World)
• Sun Pushes Ahead with New App Server, Web Toolset (eweek)
• Sun releases 'enterprise ready' GlassFish beta (Computer Business Review Online)
• Sun Adds Enterprise Features To Open-Source App Server (CRN/Channel Web)
• Sun To Provide Commercial Support for Glassfish (Internet News)
• Sun unveils beta of open source application server: The new features in GlassFish are aimed at enterprises (Computer World)

Technorati: swdp web2.0 ajax scripting glassfish jmaki phobos

Posted by Arun Gupta in web2.0  |  Comments[0]

Sun Web Developer Pack in Blogs

Here is the SWDP buzz so far:

• Sun Web Developer Pack
• Phobos in the Sun Web Developer Pack
• Sun Web Developer Pack (wikipedia)
• Sun Web Developer Pack (Ajaxian)
• Sun Web Developer Pack Announced (Webservices.org)
• Sun Web Developer Pack announced (The Server Side)
• Java EE 5, Web 2.0 with Sun Web Server Update 1 Technology Preview
• Sun Java System Web Server 7.0 Update 1 Technology Preview Ships
• Sun Web Developer Pack R1
• Sun Web Developer Pack R1 with WADL and RESTful WS goodies
• SWDP R1 with RSS and Atom Goodies
• Introducing SWDP

Download it, Get started, and give us feedback. And if you are wondering, it's a FREE download.

Technorati: swdp web2.0 ajax scripting glassfish jmaki phobos

Posted by Arun Gupta in web2.0  |  Comments[1]

Next Gen Web @ JavaOne

Follow up from my previous entry, here is a complete list of all the next generation Web application, a.k.a "Web 2.0", sessions from Sun.

There is more content that has not been publicly announced yet. And while we are working on making presentations for this year richer, fuller and more hands-on, get your self familiar with JavaOne 2006 archives on this topic.

Technorati: Javaone Web2.0 Ajax jmaki REST JavaScript

Posted by Arun Gupta in web2.0  |  Comments[1]

Sun @ The Server Side Java Symposium

Here is the list of Sun Microsystems sessions at The Server Side, Java Symposium, Las Vegas next week:

• JAX-WS and WSIT Tangoing with .NET by Arun Gupta (read more)
• Sun NetBeans Technology Showcase by Karen Tegan Padir
• JRuby: Ruby-Tinted Classes by Charles Nutter and Thomas Enebo
• Enterprise Grade Ajax and JSF and Scripting JSF by Ed Burns
• Filthy Rich Clients by Chet Haase
• Memory Leaks in Java™ Applications: Different Tools for Different Types of Leaks by Greg Sporarr

Stop by and say hello to the folks who bring you this great technology!

_{Technorati: TheServerSide LasVegas Venetian Web services NetBeans Ajax JRuby Ruby GlassFish Sun} presos

Posted by Arun Gupta in web2.0  |  Comments[0]

Introducing Sun Web Developer Pack

Sun Web Developer Pack (SWDP) is a new integrated toolkit from Sun Microsystems that consists of a collection of Web 2.0 technologies that enable next generation Web application development. The toolkit consists of binaries, tutorial, documentation, samples (including source) to build your Web 2.0 applications and deploy them on industry-grade containers. It includes support for building rich user interface using Ajax technologies with Project jMaki & Project Dynamic Faces, light-weight Web services with Atom / REST APIs / WADL and server side scripting with Project Phobos. Check the system requirements to see the list of supported platforms, JDK versions, browsers, web containers and Ant. These applications can be hosted on Sun Java System Application Server 9.x, Sun Java System Web Server 7.0 U1, GlassFish v1 UR1, GlassFish v2 and Apache Tomcat 6. SWDP comes with NetBeans plug-ins that simplifies the design and development of Rich Internet Applications. These modules can be downloaded from NetBeans Update Center Beta with the name "Sun Web Developer Pack R1". Check out how to build jMaki and Phobos applications in a screencast.

Get the Sun Web Developer Pack Simplify development of your Web 2.0 applications with this all-in-one download. » Learn More

You can download SWDP as a stand-alone bundle and install on a supported Web container.  Alternatively, you can download SWDP bundled with Java Application Platform SDK Update 3 Preview. The SDK bundle can be downloaded in three different flavors:

• Only SDK - Need to download JDK and NetBeans separately
• SDK + JDK - Need to download NetBeans separately
• SDK + NetBeans Enterprise Pack 5.5.1 Beta - Need to download JDK separately

After installing SWDP, it's recommended to view the latest online Release Notes. The binaries are accompanied by a comprehensive tutorial and an SWDP forum to post your questions. You can also view the list of SWDP bloggers or subscribe to the aggregated pipe.

You can view and download demos, samples, widgets and much more using these technologies here. Blueprints provide you guidelines and code for building these applications.

_{Technorati: swdp web2.0 ajax scripting javaee javaeesdk glassfish jmaki phobos netbeans}

Posted by Arun Gupta in web2.0  |  Comments[12]

JSON Pros and Cons

Following up on my JSON blog, here is great table summarizing the strengths and weaknesses of JSON as compared to XML.

_{Technorati: XML JSON Web2.0 Ajax}

Posted by Arun Gupta in web2.0  |  Comments[0]

Sun @ Ajax World

Sun Microsystems is a silver sponsor of AJAX World Conference and Expo East 2007, Mar 19-21, New York City. Ajax Architect Greg Murray, Struts creator Craig McClanahan, and Jean Francois Arcand of Grizzly fame, all from Sun, will be speaking. Here are the topics:

• Greg is talking on Enterprise Ajax on Java
• Craig's topic is Encapsulating AJAX Functionality in JavaServer Faces Components
• Jean Francois Arcand is talking on Real-World Web 2.0 Comet-Based Applications

It seems the conference planners really like Greg a lot since they've not only featured him on their main page but given his brief bio thrice  

And his last name is "Murray", not "Murry".

All of them are great speakers. So if you are planning to attend Ajax World, I highly recommend their talk. You'll see/feel the passion. 

_{Technorati: Ajax Web2.0 Sun AjaxWorld presos}

Posted by Arun Gupta in web2.0  |  Comments[2]

Language-neutral data format: XML and JSON

XML and JSON are the two prevalent choices for language-neutral data format. That means a format used to exchange data between client and server, independent of the language used on each end. We are familiar with XML pointy bracket syntax which has served us well so far. With Rich Internet Applications becoming more common, there is a need to have a light-weight data interchange format. And so JSON is catching up (11% for data transfer in 2006).

Basically, JSON is built on two structures:

• A collection of name/value pairs with unique names (associative array)
• An ordered list of values (array)

See message samples formatted in JSON and equivalent XML. Tim Bray summarizes when to use which format.

Here is a collection of interesting articles in case you want to dig deeper:

• JSON: The Fat-Free alternative to XML
• What XML, SOAP and XML-RPC does not have, that JSON does ?
• JSON vs XML: The Debate
• Comparing processing time of JSON and XML
• Bi-directional conversion between JSON and XML
• JSON for Ajax Web services
• XML, HTML or JSON ?

The key advantages of JSON I derived from my reading of the above articles are:

• Much simpler than XML because it is not a markup language and a natural representation of data.
• JSON is better data exchange format, XML is a better document exchange format. 
• JSON is easier to read for machines with no/thin client-side library.
• JSON is a natural fit for data consumption by browser clients, for example Ajax components.
• Ability to represent general data structures: records, lists and trees.
• Wikipedia entry for JSON reports parsing and generating JSON support in 21 languages.

There are some disadvantages as well:

• JSON format is hard to read for humans; for example complicated-looking syntax, like the }}]} at the end of data snippet is frightening and debugging pain.
• JSON is a newer format so not enough tools to help with authoring & parsing. Some available are:
  • JSON Tools - Java Tools for the JSON Format (parser, renderer, serializer, mapper, validator)
  • JSON-lib - Java library for transforming beans, maps, collections, java arrays and XML to JSON and back again to beans.
  • JSON in Java - Java APIs from json.org (see more below)
  • JSON-taglib - JSON-taglib is a JSP 2.0 tag library used to render JSON data from within JSP code.
  • Could not find an editor that would allow me to edit JSON objects.
• JSON does not have a <[CDATA[]]> feature, so it is not well suited to act as a carrier of sounds or images or other large binary payloads.
• Unlike XML, JSON does not provide any display capabilities because it is not a document markup language. JSON was not even intended for that purpose.
• JSON is not extensible - it does not need to be because it's not a document markup language.

In jMaki, we use JSON in Java. Here is a sample code to create a JSON object using these APIs:

import org.json.*;
import java.io.*;

public class JSONSample {
  public static void main(String[] args) throws Exception {

    // basic object creation
    JSONObject person = new JSONObject();
    person.put("name", "duke");
    person.put("age", "10");
    System.out.println(person.toString());

    // how to create array and write to a "writer"
    JSONObject address = new JSONObject();
    JSONArray array = new JSONArray();
    array.put("4140, Network Circle";
    array.put("Santa Clara";
    array.put("CA - 95054";
    address.append("address", array);
    OutputStreamWriter osw = new OutputStreamWriter(System.out);
    address.write(osw);
    osw.flush();

    // XML->JSON conversion
    JSONObject likes = XML.toJSONObject("<likes><running/><skiing/></likes>");
    System.out.println(likes.toString());
  }
}

And here is the corresponding output:

{"age":"10","name":"duke"}
{"address":[["4140, network circle","Santa Clara","CA - 95054"]]}
{"likes":{"skiing":{},"running":{}}}

This API also allows conversion from comma-delimited text, HTTP, Cookie, and CookieList to JSON conversions. The source code for JSON in Java is freely available but here are two suggestions for ease-of-use:

1. Provide a jar file that is ready to use
2. Publish the link to framed version of javadocs on the main page since that is more useful.

In summary, XML is document-oriented and JSON is data-oriented. So if you want to deal with highly structured documents that requires a complex structure, binary data, exact ordering of elements and be able to render itself then use XML. OTOH, if you are focused on light-weight data exchange then JSON is the way to go. 

Follow the JSON blog and enjoy!

_{Technorati: XML JSON DataFormat JavaScript Web2.0 Ajax jMaki}

Posted by Arun Gupta in web2.0  |  Comments[6]

Sun-internal jMaki Day Review

Last Friday jMaki team, at Sun Microsystems, arranged a jMaki Day for Sun-internal audience. The day was planned to introduce the technology and explains it's nuts and bolts with hands-on experience. Even though nobody outside Sun could attend it, but all the presos and lab material is available here. 

The morning sessions gave an overview of jMaki and included: 

• Sun, Web 2.0 and jMaki by Arun Gupta (me)
• Introduction to jMaki by Carla Mott
• Phobos and jMaki by Roberto Chinnici
• jMaki Tooling: State of Union 2007 by Ludovic Champenois
• jMaki State of Union 2007 by Greg Murray

The afternoon was BYOL (Bring Your Own Laptop) hands-on-labs and discussion with the team. It included:

• jMaki Applications - Doris Chen
• jMaki Recipe for building Web 2.0 Apps - Carla Mott
• Mashing it up with jMaki - Greg Murray

The slides for the morning session and hands-on-labs are available. Here are some pictures:

Greg Murray	Attendees	Attendees	Carla Mott
Roberto Chinnici	Doris helping with mic	Ludovic Champenois	Greg Murray
Lunch	Lunch	Hands-on-labs	Hands-on-labs

You can get a flavor of these sessions and labs at Sun Tech Days. 

You can also view a collection of samples (run or download them) put together by Sun's Web 2.0 team. You can also look for a collection of jMaki samples here. All of these samples can be run on GlassFish.

Here are some important jMaki links:

• Value proposition
• Overall framework architecture and features
• Basic Application Structure
• Creating jMaki widgets

Please send any feedback on slides and hands-on-labs to dev-AT-ajax.dev.java.net.

_{Technorati: jmaki ajax netbeans glassfish presos}

Posted by Arun Gupta in web2.0  |  Comments[2]