Click here to Skip to main content
Click here to Skip to main content

Easily Create AJAX Enabled Applications with Swan

, 17 Jun 2008 CPOL
Swan makes building rich web applications easy.

Editorial Note

This article is in the Product Showcase section for our sponsors at CodeProject. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.

Introduction

This paper demonstrates how easy it is to create AJAX-based rich web interfaces using Swan. With Swan, there is no need to learn complex JavaScript libraries in order to integrate AJAX into your web pages. You simply select the components you want to have AJAX enabled and provide the controller class to handle the data and events for your enriched web page. In this tutorial, we’ll present one of the wizards available within Swan to quickly build an AJAX-enabled application.

About Swan

Swan combines an AJAX framework and best practices in software development with easy-to-use development tools that accelerate web application development and enforce consistency. Swan's architecture enables a more natural integration between web pages and server side components.

swan-arch.png

Above: Swan Application Architecture

JavaScript Swan Engine

The JavaScript Swan Engine takes care of all AJAX functionality, transparently integrating it with your web form components and all other Swan-based widgets. Swan is also responsible for the distribution of events handled by either the server or the browser. Swan uses JSON as the means to transport data across.

Server Side SDK

The Server Side SDK provides the framework to build your custom application components that will serve as the model/controller of your web pages. It also provides access to a representation of the UI widgets on the server side, which enable you to easily push data back to the front end, as well as fulfill other requests such as opening a dialog or displaying a message.

Swan Control Bindings

Swan uses an XML descriptor file in order to glue the UI with the Page Model. Here is where the magic happens. You do not need to worry about creating this file. Swan provides the necessary tools to make the creation of this file transparent to you.

Swan Wizards

Swan’s toolkit includes a set of wizards for creating sample applications based on commonly used templates. These wizards are useful, especially if you are new to Swan. In this tutorial, we’ll show the creation of a listing web application with typical CRUD functionality. Now you’ll learn how Swan-based applications are composed. You will see how easy it is to build rich web applications with Swan, even if you don’t know AJAX.

Prerequisite

For this tutorial, you must have Eclipse for J2EE Development and Tomcat 5.5 set up.

Install Swan Plug-in

Download Swan (a ZIP file) and unzip the contents within the plug-in folder of your Eclipse installation. Start or re-start your Eclipse environment in order to activate Swan's plug-in.

Creating Your First Swan Project

The steps for creating a Swan project are as simple as 1-2-3.

  1. Create a Dynamic Web Project
  2. Add Swan's Nature to the new project
  3. Create the Swan application

1 - Create a Dynamic Web Project

The current version of Swan’s toolkit is based on the Eclipse Web Tools Platform. In order to create a Swan Project, you must first create a Dynamic Web Project.

Select New > Dynamic Web Project.

new-project.png

Figure 1 - New Dynamic Web Project

For this tutorial, create a project named ListingApp.

listing-app.png

Figure 2 - New ListingApp Project

2 - Add Swan's Nature

When creating a Swan-based application, we need to prepare the new project with all the required libraries used by Swan. To do this, we just need to add Swan's Nature to the project. This will automatically add the necessary JavaScript libraries and Java libraries to enable the Swan SDK within your project.

Select the ListingApp project and right mouse click to bring the pop-up menu. Now select Add Swan Nature.

swan-add-nature.png

Figure 3 - Add Swan Nature

Adding all required libraries may take a few seconds. Once completed, you should see the updated directory structure as illustrated here.

swan-nature.png

Figure 4 - ListingApp with Swan Nature Folders

This task should have done the following:

  • Added the Swan-engine folder, including Swan's JavaScript libraries
  • Added the required Java libraries to the lib folder under the WEB-INF folder
  • Added the ui_specs folder under the WEB-INF folder to store Swan's binding files
  • Registered Swan's Servlets within the web.xml file

3 - Create the Swan Application

To create the Listing application, we'll use one of the Swan wizards. To open the wizard, select the ListingApp project and then select HTML Page Wizard as illustrated in figure 5.

new-html.png

Figure 5 – Open New HTML Page Wizard

Swan's HTML Page Wizard

swan-wizard.png

Figure 6 - Listing App Wizard Settings

Click Next to add the fields for the Listing application.

Adding Fields to Page

swan-wizard-3.png

Figure 7 - Adding Fields to Listing App

To add fields, click on the Add button -- as illustrated in Figure 7 -- to open the Component Definition Dialog. Select the type of component needed for each field, its label and ID. For this tutorial, add the following fields:

Component Label ID
TextField First Name firstName
TextField Last Name lastName
DateField Date of Hire dateOfHire

Once done, just click Finish. The wizard will generate the necessary HTML page, bindings and Java Controller class, as illustrated in Figure 8.

swan-wizard-4_small.PNG

Figure 8 - Listing App Generated Code

The generated Listing application has the functionality to add, edit and remove records in memory.

Is it really that easy? TEST IT.

To test the application, first create an index.html file as illustrated in Figure 9.

index_page.png

Figure 9 - New index.html File

Once the file index.html is created, add the following code within the body:

<H1>Swan Demo Application</H1>
<a href=&quot;SwanApplication?_open=listingPage&quot;>Listing Application</a>

The HTML page should look something like this:

new-html-3.png

You must have Tomcat installed to proceed.

Select index.html. Right click and select Run As > Run on Server.

run-on-server.png

Select the Tomcat server and click Finish.

run-on-server-2.png

Once the index.html page is displayed, click on the Listing App tab. The browser should display the Listing application, as illustrated here.

application.png

To make this a fully functional application, you’ll need to customize it. Once finished with this tutorial, go ahead and explore the code generated, so that you become familiar with Swan’s API.

Summary

Swan makes building rich web applications easy. During this tutorial, you learned about the Swan framework and how quickly you can create a template application. By exploring the code, you will also learn how easy it is to integrate the web interface with the server side controller.

Resources

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

ObjectWave Corp
ObjectWave Corp.
United States United States
ObjectWave, Corp., is a leading software engineering company headquartered in Chicago, IL.
 
ObjectWave has more then 17 years of experience building enterprise-level object systems and customized developer frameworks using OO technology, emerging technologies and advanced methodologies.

Comments and Discussions

 
Generali don't think this is "EASILY" Pinmembermouhannad26-Aug-08 6:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 17 Jun 2008
Article Copyright 2008 by ObjectWave Corp
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid