Calendar Management A Demonstration Application of TopBraid Live

Transcription

1 Brief: Calendar Management Calendar Management A Demonstration of TopBraid Live What you will learn in this Brief: Rapid Semantic Building Full life cycle support from model to app Ease of building User Interfaces Configurability of the Component Architecture How the models drive the application functionality Overview: The Calendar Management application serves as a simple example of how to set up a TopBraid Live (TBL) client application. The application allows the user to manage events and their participants, view the events on a calendar and search for events using criteria based on the event and / or its participants. The TBL User Interface components used to assemble the application are: Calendar The calendar displays the label and start time of an event in the day block in which it starts. Grid Details of the events and persons in the system are located in tabbed grids underneath the calendar. Search Form The search bar to the right allows the user to select any property of an Event to constrain the search; the Participants field can be expanded to constrain the search to events whose participants have certain characteristics, rather than a specific participant. Edit Form This wizard driven edit form is used to create new entries, for example, new events. The application is constructed by creating and customizing ontologies and using the client side libraries of TopBraid Live platform. No changes to the server code are required. 1

2 Brief: Calendar Management Tools Required: TopBraid Composer (develop ontologies and customize displays); the free Flex 1 SDK or Adobe Flex Builder (modify and compile ActionScript files); TopBraid Live is needed to deploy the application, but the application can be tested in a stand alone mode using TopBraid Composer Maestro Edition because it has a built in application server. Skills Required: Some familiarity with using TopBraid Composer (i.e., the ability to create a simple OWL model and customize displays); basic Flex/ActionScript knowledge (how to add UI components to the layout of the user interface and do minimal configuration via a script). We will now explain the steps required to create the Calendar Manager application. Architecture Client side libraries of TopBraid Live are implemented in Adobe Flex/ActionScript. s constructed using the TBL user interface (client side) libraries are composed of three base structures: 1. The base scripts necessary for the flash player to communicate with the browser The base scripts are entirely contained within the html template directory, which can be copied and reused for any TBL client application. index.html.template file contains the JavaScript which is configured for TopBraidLive. 2. The top level application object (MXML file based on a Flex ) CalendarManagerDemo.mxml for this application. This object is responsible for creating and initializing the Manager, handling top level Fault Events and creating the initial UI component representing a splash screen that is visible while loading the main application component. This is a small file shown below. 3. The main application component (MXML file based on a Flex Component) CalendarManagerComponent.mxml for this application. An Outline of How it Works After the Manager determines that initial loading conditions have been met (based on the server type), the initial UI component is replaced with the main application component. The TBL Manager provides the base application functionality such as swapping skins, logging in and out, requesting new sessions and choosing projects from the server. The Manager requires several things in order to be created: a handle to the application instance that is creating it, the Class of the main application component, a handle to the top level fault handler, and optionally a starting Skin implementation (see initialization code below). 1 Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems. 2

3 Brief: Calendar Management /** * The initialization function to start the application. This function is set as the * creationcomplete function of the root XML object of this MXML file. */ protected function init():void var skin:iskin = new Skin( "Good Gray", "assets/css/main.swf", "assets/css/aerozonesmall.swf", "assets/css/goodgray.swf"); Manager.singleton = new Manager(this, logo, CalendarManagerComponent, handlefault, skin ); Manager.singleton.initialize(); /** * The fault handler passed to the Manager instance in the init function. */ private function handlefault(event:faultevent):void trace("event Manager App Fault: " + event.message); Alert.show("Connection error! Please notify your admin and restart"); The Skin provides the Cascading Style Sheet (CSS) configuration for the application. The CSS files must have been compiled into.swf files, broken down into a main, button and skin file for ease of switching themes (loaded in that order). Ideally, the main file (main.css compiled into main.swf) should contain the declarations common to all skins, the button file (aerozonsmall.css compiled to aerozonesmall.swf) should contain the button skin and icon declarations, and the skin file (goodgray.css compiled to goodray.swf) should contain the skin specific decoration and color declarations. The main application component (CalendarManagerComponent.mxml) can be based on any UI container depending on the desired layout, and contains all the visible components of the main application. (In this example, the component is based on a mx:vbox.) It implements the ISessionProvider interface (declared in the attributes of the surrounding class) so that the session generated by the Manager can be set and the configuration initialized. Two methods (preparemappings and prepareui in our example) are implemented: one to be set as the preinitialize callback and one as the creationcomplete callback (also declared in the attributes of the surrounding component). The preinitialize callback function (preparemappings) handles the mapping of component actions; while the creationcomplete callback function (prepareui) handles the setting of the initial state and listeners between components. Code for these methods is shown starting on page 5 of this document. Creating the Calendar Step by Step 1. Define an Ontology Each of the TopBraid Live applications is model (ontology) driven. You can use one of the existing ontologies such as SKOS or FOAF or you can create your own. Ontologies are created using TopBraid Composer and can be harvested from existing assets including spreadsheets, databases and XML. 3

4 Brief: Calendar Management For this example, we have created a simple ontology available at 2. Customize Displays in TopBraid Composer Customization may be needed for some of the UI components Grid, Search and Edit form. Using TopBraid Composer, customize columns to be displayed in the Grids for members of each class (in this example, persons and events) and also define fields to be used for the Search forms for each of the class. Layout of the Edit forms can also be customized. Display customizations are based on the TopBraid user interface ontology included with Composer. All the customizations are stored in RDF in the <ontology>.owl.tbc file where <ontology> is the name of the ontology. Customization file for the Calendar management application is called calendarmanager.owl.tbc. Customizing a display is a straightforward activity. For example, to customize columns shown on a grid, select a class in Composer, go to the Instances View and drag and drop (or select from a dialog) properties to show as columns when members of this class are displayed in the grid. More information about display customization is available in the TopBraid Composer Help facility. For this application, we have customized: The form layouts for the Event and Person classes The columns in the instance grid for the Event and Person classes. 3. Define the initial Screen Layout Flex applications are developed using a combination of MXML and ActionScript. Use MXML to declaratively define the application user interface elements and use ActionScript to define client logic and procedural control. The application component (CalendarManagerComponent.mxml) file is divided into two main areas (1) script specifying the application behavior and (2) MXML definition of the layout of the screen described in terms of the Tab Split Panes (for expand and contract functionality on the area boundaries) with a Drag Tab Navigator and the UI components located in each pane. There are three main screen areas defined in the application as navigators: calendar, grids and search. The calendar, grid and search components are added to the navigators, and displayed as tabs, with the label shown on the tab. All of the components used in this application are also used in the TopBraid Ensemble (TBE) 2 2 TopBraid Ensemble, part of the TopBraid Suite of products, is a multi user semantic web application for collaborative information management. 4

5 Brief: Calendar Management application. A convenient way to create a simple new application, such as this one, is to use the TBE application component as a starting point and modify it as needed. The XML snippet below shows the declaration for the calendar. <tbl:dragtabnavigator width="100%" height="100%" stylename="tabnav" hidecloseids="calendarbox"> <! The calendar > <tblc:tblcalendarbox id="calendarbox" label="calendar" width="100%" height="75%" /> </tbl:dragtabnavigator> Note that once the application starts, any of the tabs can be dragged into any of the navigators, and can be added above, below, to the right, to the left, or in the same tab bar as the component over which it is dragged. For example, as shown below, the Events tab can be dragged to the right of the calendar. The tabs can be blocked from closing by setting the hidecloseids attribute in the navigator. This was done for the calendar component as shown in the code above. This is one change from the TBE; another change is location of the calendar. In the TBE it is located in the bottom right navigator, in this application we have placed it in the top left of the screen. The Tab contents are lazy loaded, so if initial state or listeners must be set for a tab that is not visible when application opens, a separate creationcomplete callback is set in the attributes of that component. As you can see below, this has been set up for the tab containing the People grid since when the application first loads it shows the Event grid. <tbl:wrapper width="100%" height="100%" label="people" id="peoplegridwrapper"> <tbl:resourcegrid id="peoplegrid" stylename="instancegrid" dragenabled="true" showidcolumn="false" allowdragselection="true" allowmultipleselection="true" editable="true" width="100%" height="100%" creationcomplete="preparepeoplegrid()"/> </tbl:wrapper> 5

6 Brief: Calendar Management 4. Set up Component Actions and Options The script in the application component is used to configure components to respond to actions in other components. Many of the pre built TopBraid Live components have available default actions. For example, Grid has actions to create new entry, delete an entry and copy contents. In the script area we specify which components will expose such actions to the user; we do this in the preinitialize callback. Actions can be mapped for each of the components so that when they are shown in a Drag Tab Navigator the available actions appear as icons in the tab bar. The mappings are registered on the singleton Component Action Registry, and need to be registered before the creation of the component (in the preinitialize callback). Since the Component Action Registry is a singleton, components may also self register their action mappings (such as in the Calendar Box component). Each component has some simple set up requirements: The Calendar component is set up (in the creationcomplete callback) by setting the session and setting the predicate to be used. All subjects with matching predicates will be displayed in the calendar. For this application we are using the starttime predicate from our ontology The Grid component is set up by setting instanceclass attribute telling the Grid the class whose members should be displayed in the grid on the initial load and by specifying the resource action events. This is different from TBE where the class for which members are to be displayed in the Grid is determined dynamically based on the selection in the class tree. For this application we have used the Grid component to create the Events grid and the People Grid. The instanceclass attribute of the Events grid in the creationcomplete callback tells the grid to initially load all subjects whose type is Event. A Resource Action Event (double click) is registered on the Events grid to select that date in the calendar when an event is double clicked. Since the People Grid is not initially visible, a separate function is registered as the creationcomplete callback on the People grid instance that loads all subjects whose type is Person. The Search form is set by specifying the class which members are being searched for. Again, this is different from TBE where the class is determined dynamically based on the selection in the class tree. For this application the Search form is set to search for members of the Event class The script area of the application component is shown below. public function preparemappings():void ComponentActionRegistry.singleton.register(new GridMapping()); public function prepareui():void // We can prepare any initially visible components here. If they are not initially visible, // (such as the people grid), then a preparation function may be registered on the // creationcomplete attribute of the non visible component. 6

7 Brief: Calendar Management // prepare the calendar by telling it what to use as the driving property calendarbox.session = _session; var properties:set = new Set(); properties.add( _session.graph.uri( " ).id ); calendarbox.selectedproperties = properties; // prepare the eventgrid by telling it the class to use to show all events (initial load) eventgrid.instanceclass = _session.graph.uri( " ); // prepare the search form by telling it what the root class we are going to be looking for is searchform.rootresource = _session.graph.uri( " ); // hook up the listeners between components, using the relayer when appropriate Relayer.singleton.addEventListener(SearchEvent.NAME, eventgrid.handlesearch, false, 0, true); eventgrid.addeventlistener(resourceactionevent.resource_double_click, gotodate, false, 0, true); private function gotodate( event:resourceactionevent ):void var resource:iresource = event.resource; var starttime:inode = GraphUtil.getObject( resource, _session.graph.uri( " ) ); var date:date = DateTimeDatatype.toDate( starttime.label ); calendarbox.gotodate( date.month, date.fullyear.tostring()); 5. Customize Skins private function preparepeoplegrid():void peoplegrid.instanceclass = _session.graph.uri( " ); skins are specified in the top level (CalendarManagerDemo.mxml) object as shown on page 2 of this document. This application uses the good gray, one of the skins provided with TBE, with the following.swf files: assets/css/main.swf, assets/css/aerozonesmall.swf and assets/css/goodgray.swf. The files are also provided in their raw form (same file names but with the.css extension). 6. Test and Deploy The application files supplied with this demo have already been compiled into Flash. If you make any changes, you will need to recompile them using either a free Flex SDK or Adobe Flex Builder. A key advantage of using TopBraid Suite is a seamless transition from the development to deployment. With TopBraid Composer Maestro Edition you can test the application as you develop it directly in Composer. Just open the ontology and then open the 7

8 Brief: Calendar Management CalendarManagerDemo.html file in the web browser as shown in the screenshot above. You can now experiment with the application and make changes as needed. You can modify the ontology including instances view (grids) and forms display customizations and see these directly reflected in the application without the need to recompile. Just reload the web page. If the change to the Flex code is required, recompile and then reload. Once you are happy with the application, upload the workspace to the server hosting TopBraid Live. Conclusion and Next Steps Using a Calendar Manager as an example, we have explained the steps involved in creating an ontology driven rich user interface application with TopBraid Suite. No Java programming skills are required. The application is created by modeling and using a simple scripting language. creation activities can also be easily partitioned. An ontology modeler can develop Ontologies for the application and customize displays. A Flex user interface developer can work with the client components. The developer will not need to know RDF or OWL. Once the application is deployed, it can be easily extended. Some extensions and modifications can be made with no changes to the source code only the model gets modified. As next steps, we recommend trying the following exercises: 1. Extend the model to include a property for different types of events, for example, status meetings, customer presentations, time off. Show them on the grid and the Event entry form. No code changes are required. 2. Extend the model to track the home town of people and the physical location of the meeting. You may also want to add another grid with Location tab. This will require a small change to the application component. 3. Add a class tree to the application. Wire it, so you have only one grid showing members of the class selected in the class tree. By changing the application in this way, no code changes are required to extend the previous exercise in order to add a class and show its members on the grid. Look at the TBE application component to see how it implements this feature. 4. Add a map to show people and events on the map. The TopQuadrant Briefs The TQ AB105 Brief is one of a series of briefs intended to illustrate how the TopBraid Suite can be used. Further briefs are available by request to TopQuadrant. Calendar Manager, along with other applications described in the briefs, is available in the TopBraid Live download site. Access to the download site is provided to all licensed users of TopBraid Live. 8