[ 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.

- Demo
- How it works

## 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:

- `load()` called when the browser page first loads
- `beginHandling(int callId)` called when a call is selected from the call list
- `cancelHandling()` called when the cancel button is clicked to stop handling a call
- `completeHandling(Call call)` for when the agent has finished booking a ticket
- `alertSupervisor(Call call)` used to alert agents that supervisor attention is needed

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);