1. Multiple Device User Interface A Rule Approach Paul D. Johnson Final Presentation (SE690) Supervised by Dr. Jia http://shrike.edu.depaul/~pjohnso2

2. 2 Agenda  Introduction  Framework Architecture  Multiple Device Markup Language  Rule Specification  Demo  Advantages/Disadvantages  Questions

3. 3 Introduction  Problem Separate the User Interface from the structure and behavior. Many User Interfaces with many Platforms and Devices need many different toolkits.  Solution One User Interface Description produces multiple User Interfaces.

4. 4 Solution Multiple Device Markup Language (XML) Framework SWING HTMLJ2ME SWT

5. 5 Profiles

6. 6 Framework Architecture  Display Engine Read GUI Description File (MDML) Into UINodeTree and DisplayTable Object.  Rule Engine Reads Rule File Into RuleTable Object  Handler ClassHandler creates Language.xml  Code Generator ZOOM Code Generator creates class.java

7. 7 Architecture

8. 8 Multiple Device Markup Language  XML User Interface for cross platform development.  Schema http://shrike.depaul.edu/~pjohnso2/UISchema.xsd  MDML Documentation and Usage http://shrike.depaul.edu/~pjohnso2/MDMLAppendixD.htm

9. 9 MDML Tags  CONTAINER WINDOW PANEL TABBEDPANE SPLITPANE  BORDER MATTE COMPOUND BEVEL LINE ETCHED TITLED  WIDGETS BUTTON TEXTBOX COMBOBOX TREE PROGRESSBAR SCALE LABEL CHECKBOX RADIOBUTTON SLIDER IMAGE SEPARATOR TABLE LIST

10. 10 Rule File  Profile describes properties of the toolkit and environment.  Events describe the methods that are used to add listeners and classes that are used to provide the functionality  Tags consists of rules for MDML tags that can be mapped to some GUI Toolkit attributes or methods.

11. 11  Swing Profile javax.swing.* javax.swing.event.* javax.swing.border.* java.awt.* java.awt.event.* javax.swing.tree.* show SWING name

12. 12  Swing Events ActionEventHandler FocusEventHandler WindowEventHandler ListSelectionEventHandler MouseEventHandler MouseMotionEventHandler

13. 13  Define a new MDML mapping  Define the widget mapping Button = JButton  Define the attribute mapping text = setText(“text”)  Define additional definitions JButton btn2;  Define the composition mapping JPanel.add(JButton btn);

14. 14 Requirement  Requirement User A needs a Calculator based on SWING.  Solution Create a rule specification for SWING.

15. 15 Calculator MDML (Condensed) <GridLayout rows="4" columns="6" icolumns="6" horizontalSpacing="4"/> <TextBox type="text" editable="false" columns="40" bounds="bounds" leftx="1" lefty="2" rightx="170" righty="20"/> <GridLayout rows="1" columns="4" icolumns="4" horizontalSpacing="16"/>

16. 16 Calculator Example  Calculator User Interface Description Full Example: http://shrike.depaul.edu/~pjohnso2/calculator.htm

17. 17  Example A JButton  Example B Menu $Parent #SWT.BAR

18. 18  Example A setTitle setName  Example B setText setMenu $MenuObject

19. 19  Example A  Example B $TopContainer #SWT.DROP_DOWN

20. 20  Example A  Example B $Parent #SWT.PUSH $Parent #SWT.CASCADE

21. 21 Swing Rule Specification  MENUBAR JMenuBar setTitle setName -

22. 22 Swing Rule Specification  MENU JMenu setText setName setTitle

23. 23 Swing Rule Specification  MENUITEM JMenuItem setText setName setMnemonic

24. 24 Swing Rule Specification  BUTTON JButton setTitle setText

25. 25 Swing Rule Specification  TEXTBOX JTextField setBackground setColumns

26. 26 Swing Rule Specification  See Website for Swing Rule Specification. http://shrike.depaul.edu/~pjohnso2/rule.xml

27. 27 Swing GUI

28. 28 Requirement Update  New Requirement User A needs another Calculator based on SWT.  Solution Write A Parser and Engine to Map MDML or some XML User Interface to SWT. Create new rule specification for SWT.

29. 29 SWT Rule Specification  MENUBAR Menu $Parent #SWT.BAR $MenuBar #SWT.CASCADE

30. 30 SWT Rule Specification  MENUITEM MenuItem setText

31. 31 SWT Rule Specification  MENU MenuItem setText setMenu $MenuObject $TopContainer #SWT.DROP_DOWN $Parent #SWT.PUSH $Parent #SWT.CASCADE

32. 32 SWT Rule Specification  TEXTBOX Text setText setBounds $leftx $lefty $rightx $righty

33. 33 SWT Rule Specification  See Website for SWT Rule Specification. http://shrike.depaul.edu/~pjohnso2/rulesSWT.xml

34. 34 SWT GUI

35. 35 Swing Event Handler Implementation import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; import javax.swing.border.*; import java.awt.*; import java.awt.event.*; import javax.swing.tree.*; public class ActionEventHandler implements ActionListener { boolean init = true; public void actionPerformed(ActionEvent e) { Object source = e.getSource(); if (!init) { Object dest = SampleGui.getInstance().getComponent("JComboBox15"); if (source.equals(dest) ) { System.out.println("Event Handler"); JComboBox addBox = (JComboBox)dest; addBox.addItem("kiwi"); } }else { init = false; }

36. 36 Project Information  Website: http://shrike.depaul.edu/~pjohnso2/

37. 37 UI Framework Advantages  Separation of User Interface from Behavior and Structure User Interface design and development is not tied to any functionality.  Loose Coupling MDML is only mapped to GUI toolkit methods through a rule specification. This mapping is changeable. Code Generator Input file is a xml file; XSLT can provide the input for another code generator.

38. 38 UI Framework Disadvantage  Overhead As with any XML based project a user must first write the xml. In this case the rule specification and the MDML. But, once the rule specification is written this a one time event unless the toolkit changes.

39. 39 Project Schedule

40. 40 Questions Next Topic: Mobile Profile Research!