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.
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 loadsbeginHandling(int callId)
called when a call is selected from the call listcancelHandling()
called when the cancel button is clicked to stop handling a callcompleteHandling(Call call)
for when the agent has finished booking a ticketalertSupervisor(Call call)
used to alert agents that supervisor attention is neededEach 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);