1. AJAX Example Web Application

Getting Started with AJAX Right Away

ECruiser® can help you create powerful AJAX web applications quickly and easily. How easily? Our Address Book is a modest AJAX example that shows how to implement the basics of a data driven web application. This includes displaying a list of records and then selecting, updating, inserting and deleting records from the list - all within a single page, and all fully AJAX-enabled.

Let's have a quick look at the application so you can see that this isn't just some stripped down AJAX example that's really too simple to be practical. In just a few minutes, you will see how ECruiser® gives you everything you need to create rich and powerful AJAX applications.

If you haven't already done so, open the demo application and use this guide to help you move through the demo and examine its functions and features.

The AJAX Example - An Address Book

The AJAX example is a simple but functional address book application. You can see the Address Book AJAX example in action by clicking the image below.

Figure 1. Address Book AJAX Example at start up.

The Address Book AJAX example showcases the following features:

	The application is completely AJAX enabled - no full-page refreshes.
	The application allows full insert, delete, and update control over a list of simple objects on the server.
	You can rearrange items in the Address List DataTable by dragging and dropping.
	The Country input has built-in suggest behavior; as you type, the selection list is automatically narrowed. It also features a lookup input button that displays all available choices.
	As you change data in the Address Details input fields, the Address List is seamlessly updated.
	Selecting a row in the Address List automatically updates the Address Details without refresh.
	The Address List DataTable allows more than one repeating data row.
	Controls are disabled and enabled from the server via AJAX.
	The Address List DataTable provides built-in scrolling, sorting, and column resizing.
	The application utilizes the Java EE standard JavaServer Faces (JSF) web programming model.

And you get all of this functionality in this AJAX example with a surprisingly small amount of coding - just four files:

1.	index.jsp - defines the whole user interface using just HTML and simple component tags.
2.	styles.css - a standard CSS style sheet specifyies colors, fonts, and other physical attributes.
3.	AddressBookBean.java - a simple, Plain Old Java Object (POJO) contains all of the application-specific logic.
4.	Data.java - a helper class for initializing the list data.
For completeness, and if you are new to JSF, this application also requires a few simple additions to web.xml and faces-config.xml both found in the web application's WEB-INF directory.

Because this is an AJAX example, you might be wondering "Where is the JavaScript and XML (the 'JAX' part of 'AJAX')?" It's all there, but it's completely encapsulated by the ECruiser® components!

This simple AJAX example shows that with ECruiser® you only need to know basic HTML and Java to create sophisticated AJAX web applications in a snap!

2. Building the AJAX Example User Interface

Defining the user interface (UI) with ECruiser® is simple. Just use plain HTML in a JSP to define the layout and static content of your page, then insert ECruiser® tags for the parts you want to be AJAX-enabled.

Configuring SelectTable to Create the Address List

The solution lies within the <e:selecttable> tags. Take a look at the snippet below and you will see everything needed to create our SelectTable.

<e:selecttable
   id="addressList"
   dataModel="#{addressBean.addressModel}"
   value="#{addressBean.selectedAddress}"
   title="Address List"
   pageSize="-1"
   styleClass="dataTableMain"
   innerCellpadding="2px"
   highlightRow="true"
   selectionMode="row"
   height="400px"
   scrolling="vertical"
   minRows="10"
   onchange="true"
   allowDrag="true"
   allowDrop="true"
   dragType="row"
   dropTypes="row">
     <e:dataTr>
       <e:dataTd id="firstName" labelText="First Name" width="100"/>
         <e:dataTd id="lastName" labelText="Last Name" width="100" nowrap="true"/>
         <e:dataTd id="country" labelText="Country" width="150" nowrap="true"/>
       </e:dataTr>
       <e:dataTr>
         <e:dataTd id="address" colspan="3"/>
       </e:dataTr>
</e:selecttable>


Now, let's take a closer look at some of these properties to see how they contribute to the component's appearance and functionality.

The first thing to note is that the actual styles that define the table's appearance are not part of the JSP; they are stored in a Cascading Style Sheet (CSS), which contains the default style class names used by the SelectTable. So, while you can define inline styles within the JSP for special situations, there really is no need to do so in most cases.

A declaration in the <head> section links the JSP to the CSS file you want to use, and property assignments like this one assign style classes to the component:

    styleClass="dataTableMain"

Beyond that, you simply define the style attributes within the CSS much like you would in any application using CSS. The attribute assignments for our AJAX example look like this for the "dataTableMain" style class:

.dataTableMain {
  border-style: solid;
  border-width: 1px;
  border-color: darkgray;
}

Nothing difficult about that.

If you look to the right of the SelectTable, you should notice the scroll bar. Just another example of functionality made easy. You can also check out the drag-and-drop feature we added to our AJAX example. You can easily add this feature using a simple property statement in the JSP.

Figure 3. SelectTable Drag and Drop, and Scrolling Features.

To add the scrolling, and drag-and-drop functionality, we simply define a few properties as shown here:

   scrolling="vertical"
   minRows="10"
   onchange="true"
   allowDrag="true"
   allowDrop="true"
   dragType="row"
   dropTypes="row">

Bet you thought it would take a lot more programming to add something like drag and drop! That's all there is to it.

And what about the column sort and column resize features? What do you have to do to add that functionality? Nothing at all; they come free with the component's design.

One other thing we'd like to mention here is how the Address List SelectTable binds to the data and the application logic in the backing bean. The dataModel attribute shown in the following snippet tells the SelectTable to assign the addressModel property of the backing bean (called addressBean) to its dataModel property. A data model is a JSF standard way of providing a list of items to a component. (You can learn more about data models, registering backing beans, and the expression language in any JSF reference.)

   dataModel="#{addressBean.addressModel}"
   value="#{addressBean.selectedAddress}"

Similarly, the value attribute has a binding expression that links it to the selectedAddress property of that same bean. As an application developer, if you need to retrieve or change the selectedAddress, you can do so simply by working with this bean property. ECruiser® and JSF do the hard work of synchronizing the client view and the server state during AJAX requests.

Now that we have introduced the SelectTable that makes the address list part of the UI, let's take a look at the other main part-the Address Details pane.