Demo

Hello World Tutorial

This tutorial covers all the core functionality included in the AsyncFW framework. While not in-depth, it should provide a solid foundation to build upon.

Standard Request and Return
Framework Data handler
FWDirect java class access
Comet, reverse Ajax
Framework logging

NOTE: The FWDemo database is not used for user validation, or form data. This demo does however user the FWDemo database for the World w/DB sample. So you will need to have the database configured to use that screen.

Assumption: You have gone through the Workstation Setup Tutorials!

Download the AsyncFWSample.war file (it includes source) DOWNLOAD

First some housekeeping

The source files are all included in the demo. The basic file structure is as follows;

Standard Request and Return

The first screen is the Standard Request and return. It does nothing more than accept user input, and parrot that information back in the return. This is the standard starting point for development. In your World.java source file you will see that the Execute method has very little logic, and in fact could have been left empty – but were is the fun in that!

public void Execute(FWSession fwSess) throws FWException {

try{

//MsgLog.debug("This is a debug message from World!");

//fwSess.getSessionReq().toConsole();

if(null != fwSess.getSessionReq().getValue("FirstName")){

if(fwSess.getSessionReq().getValue("FirstName").equalsIgnoreCase("hello")){

fwSess.getSessionResp().setValue("LastName", "World");

}

}else{

MsgLog.debug("FirstName was null");

}

//MsgLog.debug("Response:"+fwSess.getSessionResp().toString());

}catch(Exception err){

err.printStackTrace();

}

There are a number of commented out lines, that you may want to un-comment to play around with the logging. The only logic is a check of the ‘FirstName’ field, if the user enters ‘Hello’ the LastName field is set to ‘World’ – OH NO NOT ANOTHER HELLO WORLD!

Framework Data Handler

This screen demonstrates a simple data handler (well, the search does support wildcards). The user enters a value in the FirstName and/or LastName field(s) and presses ‘Search’ button. The database is searched for a match, and if found, returns the values from the database. Try entering “S%” as the FirstName (no quotes please).

Open the WorldWDB.java file, and take a look at the execute method.

public void Execute(FWSession fwSess) throws FWException {

try{

fwSess.getSessionReq().toConsole();

if(fwSess.getSessionReq().getValue("sysAction").equalsIgnoreCase("init")){

// init = first load of page

}else{

if(null == fwSess.getSessionReq().getValue("FirstName")

&& null == fwSess.getSessionReq().getValue("LastName")){

}else{

new FWData(new WorldWDBdh(fwSess),"jdbc/FWConPool");

}

fwSess.getSessionResp().toConsole();

}catch(Exception err){

err.printStackTrace();

}

Notice we are getting a lot of functionality, with out much code. There is a bit more going on here than meets the eyes, to learn more about data handlers, read this. The source for the data handler is in the project, so have a look.

FWDirect Java Class Access

This screens demonstrates how a JavaScript Client can call a method in a server side java class. This architecture is very easy to implement. For an in-depth discussion of this topic, read this.

To see it in action, simply enter a lower case, or mixed case value in either, or both, the FirstName and LastName fields. Then tab away from the field. When an input field looses focus, it calls the String = Formatter.getProperCase(String input) method of the Formatter class (included in the sample war). The Java script used to make this call is below;

function WorldFWDirect_FNPropCase(obj){

var myob = new Formatter();

myob.setProperCase("ProcessFirstName",getFormValue("FirstName"));

}

The server side code, is simply a java class named Formatter! For more information on FWDirect, read this.

Comet, Reverse Ajax

Comet is still a rather young technology, combine that with JavaScript’s rather uneven implementations across browsers, and you end up with what can seem a rather fragile architecture. While we have tried to simplify, and encapsulate a lot of frustrating bits, there is still a conceptual hurdle to get over.

“Reverse Ajax”, “Server side push” – whatever you choose to call it, at its core it is simply long-waiting, non-blocking IO between the client and server. In essences, the client is saying – “Send me something, anytime you are ready. I am listening.”. The key word is “Listening”, and not “Waiting”.

How does AsyncFW accomplish this? Well, it uses Comet. To read more about Comet, check out this article.

To see Comet in action, you will need to start two (or more) browsers, and click the “World Comet” button for both. Then enter a message in the “Send this:” and click the “Notify” button. The message will then be broadcast to all listeners. The server side code (CometWorld.java) very simple;

public void Execute(FWSession fwSess) throws FWException {

try {

fwSess.getSessionReq().toConsole();

String stAction = fwSess.getRequest().getParameter("sysAction").toLowerCase().trim();

if ("init".equalsIgnoreCase(stAction)){

// on init code

}else if ("listen".equalsIgnoreCase(stAction)){

// any code to indicating that 'listening'

}else if ("notify".equalsIgnoreCase(stAction)){

fwSess.getSessionResp().setText("LastName",

fwSess.getSessionReq().getValue("FirstName"));

}else{

//fwSess.getSessionResp().AddNode("sysError", "Invalid Action Supplied");

}

fwSess.getSessionResp().toConsole();

}catch(Exception err){

err.printStackTrace();

}

The client side code can be seen in the “CometWorld.js” JavaScript file.

Framework Logging

Notice at the bottom of every screen, is a list of the logfiles. The system configuration file FWDefault.properties contains the settings that control the logging. By default the logs are HTML, and links to those are provided. Try the “Info” log, that should have something in it!

S. Chappell