[ DWR Website | Web Application Index ]

Ticket Center Demo Application

This is a simple demonstration of integrating a GI user interface with Reverse Ajax. Data from DWR is published into GI with DWR's GI integration.

Creating the table

As is usual for General Interface the UI is loaded through a simple div that points to the UI XMl file:

<div style="width:800px; height:350px;" id="gidemo" class="customize">
  <script
      type="text/javascript"
      src="JSX/js/JSX30.js"
      jsxapppath="JSXAPPS/ticketcenter"
      jsxlt="true"> </script>
</div>

This starts the UI widgets loading, meanwhile on the server there is a loop running that simulates the running of a call-center, with calls being setup and closed down. The CallCenter class simulates this using a simple Call JavaBean to record the state of each call:

public class Call {
  private Date callStarted = new Date();
  private String notes = "";
  private boolean supervisorAlert = false;
  private String handlerId;
  private String name;
  private String address;
  private String phoneNumber;
  private int id;
  // Insert getters, setters, equals, etc.
}

The majority of the calls to the server are very simple - there are 5 basic business methods:

Each of these methods does some simple checking and may alter the list of current outstanding calls. Whenever a change happens, the we update the browsers with the list of outstanding calls:

The alertSupervisor() function is fairly typical. It looks like this:

public void alertSupervisor(Call fromWeb)
{
    // This is the ScriptSession of the agent that wishes to alert a supervisor
    ScriptSession session = WebContextFactory.get().getScriptSession();
    Window window = new Window(session);

    // We store the ID of the call we are working on in the ScriptSession
    Object handlingId = session.getAttribute("handlingId");
    if (handlingId == null)
    {
        window.alert("No call found");
        return;
    }

    synchronized (calls)
    {
        // Check to see that the caller has not hung up since the last update
        Call call = findCaller(handlingId);
        if (call == null)
        {
            window.alert("That caller hung up, please select another");
            return;
        }

        // The user isn't handling this call any more
        session.removeAttribute("handlingId");

        // Update the server details from those passed in
        call.setName(fromWeb.getName());
        call.setAddress(fromWeb.getAddress());
        call.setNotes(fromWeb.getNotes());
        call.setHandlerId(null);
        call.setSupervisorAlert(true);

        // Update the screen of the current user
        deselect(session);

        // Update everyone else's screen
        updateAll();
    }
}

A ScriptSession is like an HttpSession, but linked to a web page and not a web browser. It's also a route to getting messages to that page.

The Window class is one of a number of APIs that mirror functionallity on in a browser. When we call window.alert("Hello, World"); DWR generates the JavaScript code to make this happen on the client, and sends it there. We will see further examples of this type of thing with the GI API in a bit.

The deselect() method updates the form on the right hand side to remove the details of the call that we have just been handling. The important lines just clear the form fields:

Server ticketcenter = GI.getServer(session, "ticketcenter");

ticketcenter.getJSXByName("textPhone", TextBox.class).setValue("");
ticketcenter.getJSXByName("textName", TextBox.class).setValue("");
ticketcenter.getJSXByName("textNotes", TextBox.class).setValue("");
ticketcenter.getJSXByName("selectEvent", Select.class).setValue(null);

The GI class is a key start point for manipulating a GI interface. It gives you access to the Server object defined by the namespace of your application. From here you can access any of your GI widgets to customize them.

The updateAll() method is responsible for altering everyone else's list of calls (which has now changed). All we need to do is to create a CDF document, place it into the cache and tell the table widget to update itself.

// Get the script sessions for everyone on the same page
ServerContext serverContext = ServerContextFactory.get();
String page = serverContext.getContextPath() + "/gi/ticketcenter.html";
Collection<ScriptSession> sessions = serverContext.getScriptSessionsByPage(page);

// Populate a CDF document with data about our calls
CdfDocument cdfdoc = new CdfDocument("jsxroot");
for (Call call : calls)
{
    cdfdoc.appendRecord(new Record(call));
}

// Put the CDF doc into the client side cache, and repaint the table
Server tc = GI.getServer(sessions, "ticketcenter");
tc.getCache().setDocument("callers", cdfdoc);
tc.getJSXByName("listCallers", Matrix.class).repaint(null);