The following example is for purely illustrative purposes, showing how you would go about implementing a ticket dialog using your own Presenter component.
As well as the Terraces, Towers and Stacks of panels that Webcentric uses to create screen layouts, it also provides windowing components such as menus and popup dialogs. This tutorial will show you how to create a popup dialog containing a trade ticket, which is a popular use for dialog boxes in trading applications. They are also commonly used as component selectors; or forms for submitting and saving data.
The Caplin JS Libraries provide a service through which new dialogs and panels can be created within the application, which is called the WebcentricFrameManager; an implementation of the FrameManager interface offered in the Caplin core library set. FrameManager provides the necessary interface to open dialogs containing a resident component.
If you’ve got a Webcentric application up and running (such as FxTrader, which we will be using for our examples), it creates a new instance of WebcentricFrameManagerservice as it is loading, and registers it as a service on the ServiceRegistry. The call you will make is actually to the FrameManager interface directly, but the WebcentricFrameManager implementation will be used implicitly.
What we’re going to do in this tutorial is to create a dialog containing a ticket component, that will pop-up and display on the screen when we trigger it. The best way to actually construct a ticket (or any similar form-based component), is by utilising the Presenter library. For the sake of this tutorial, we’re going to be using the ticket component already implemented in the ticket blade in FxTrader.
The first line gets a reference to the FrameManager (which as you’ll remember, calls the WebcentricFrameManager class) from the ServiceRegistry. Next, the ticket component is created using the component library. Finally, the openDialog() method is called to display the dialog on screen.
You should now be able to open a new ticket dialog by means of the menu, as shown below.