1 / 40

Multiple Device User Interface

Explore a rule-based approach for generating multiple user interfaces using a single description. Learn about the framework architecture, multiple device markup language, rule specifications, and more. Dive into demos, advantages, and disadvantages in this final presentation.

jkuntz
Download Presentation

Multiple Device User Interface

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  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. Solution Multiple Device Markup Language (XML) Framework SWING SWT J2ME HTML

  5. Profiles

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

  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. 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 MDML Tags

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

  11. <PROFILE> • Swing Profile <Profile> <Import name="Import"> <Statement>javax.swing.*</Statement> <Statement>javax.swing.event.*</Statement> <Statement>javax.swing.border.*</Statement> <Statement>java.awt.*</Statement> <Statement>java.awt.event.*</Statement> <Statement>javax.swing.tree.*</Statement> </Import> <DisplayMethod>show</DisplayMethod> <ToolKit>SWING</ToolKit> <Accessor> <Method name="getComponent" returnType="Object"> <Parameter type="String">name</Parameter> </Method> </Accessor> </Profile>

  12. <EVENT> • Swing Events <Event> <Action> <Field name="actionListener" method="addActionListener"> <Type>ActionEventHandler</Type> </Field> </Action> <Focus> <Field name="focusListener" method="addFocusListener"> <Type>FocusEventHandler</Type> </Field> </Focus> <Window> <Field name="windowListener" method="addWindowListener"> <Type>WindowEventHandler</Type> </Field> </Window> <Selection> <Field name="selectionListener" method="addListSelectionListener"> <Type>ListSelectionEventHandler</Type> </Field> </Selection> <Mouse> <Field name="mouseListener" method="addMouseListener"> <Type>MouseEventHandler</Type> </Field> </Mouse> <MouseMotion> <Field name="mouseMotionListener" method="addMouseMotionListener"> <Type>MouseMotionEventHandler</Type> </Field> </MouseMotion> </Event>

  13. <TAG> • <rule> • Define a new MDML mapping • <widget> • Define the widget mapping Button = JButton • <attribute> • Define the attribute mapping text = setText(“text”) • <define> • Define additional definitions JButton btn2; • <composition> • Define the composition mapping JPanel.add(JButton btn);

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

  15. Calculator MDML (Condensed) <Window id="String" name="Calculator" show="true"> <MenuBar name="menuBar1"> <Menu text="Edit"> <MenuItem mnenomic="c" text="Copy"/> <MenuItem mnenomic="p" text="Paste"/> </Menu> <Menu text="View"> <MenuItem mnenomic="n" text="Standard"/> <MenuItem mnenomic="u" text="Scientific"/> <MenuItem mnenomic="c" text="Digital Grouping"/> </Menu> <Menu text="Help"> <MenuItem mnenomic="h" text="Help Topics"/> <MenuItem mnenomic="a" text="About Calculator"/> </Menu> </MenuBar> <Panel> <BoxLayout axis="1"/> <Panel> <TextBox type="text" editable="false" columns="40" bounds="bounds" leftx="1" lefty="2" rightx="170" righty="20"/> </Panel> <Panel> <GridLayout rows="1" columns="4" icolumns="4" horizontalSpacing="16"/> <Button text=""/> <Button text="Backspace"/> <Button text="CE"/> <Button text="C"/> </Panel> • <Panel id="Calculator Panel“ name="JCalcPanel"> • <GridLayout rows="4" columns="6" • icolumns="6" horizontalSpacing="4"/> • <Button text="MC"/> • <Button text="7"/> • <Button text="8"/> • <Button text="9"/> • <Button text="/"/> • <Button text="sqrt"/> • <Button text="MR"/> • <Button text="4"/> • <Button text="5"/> • <Button text="6"/> • <Button text="*"/> • <Button text="%"/> • <Button text="MS"/> • <Button text="1"/> • <Button text="2"/> • <Button text="3"/> • <Button text="-"/> • <Button text="1/x"/> • <Button text="M+"/> • <Button text="0"/> • <Button text="+/-"/> • <Button text="."/> • <Button text="+"/> • <Button text="="/> • </Panel> • </Panel> • </Window> • </Start>

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

  17. <WIDGET> • Example A <widget> JButton </widget> • Example B <widget>Menu <Constructor> <Parameter>$Parent</Parameter> <Parameter>#SWT.BAR</Parameter> </Constructor> </widget>

  18. <ATTRIBUTE> • Example A <attribute> <Method name="title" type="String">setTitle</Method> <Method name="name" type="String">setName</Method> </attribute> • Example B <attribute> <Method name="text" type="String">setText</Method> <Method name="addMenu" set="true">setMenu <Parameter type="Menu">$MenuObject</Parameter> </Method> </attribute>

  19. <DEFINE> • Example A <define> <Method name="fillPanelLayout" type="FillLayout"/> </define> • Example B <define> <Method name="MenuObject" order="post" type="Menu"> <Parameter>$TopContainer</Parameter> <Parameter>#SWT.DROP_DOWN</Parameter> </Method> </define>

  20. <COMPOSITION> • Example A <composition> <Menu> <Method name="add" /> </Menu> </composition> • Example B <composition> <MenuItem> <Constructor> <Parameter>$Parent</Parameter> <Parameter>#SWT.PUSH</Parameter> </Constructor> </MenuItem> <Menu> <Constructor> <Parameter>$Parent</Parameter> <Parameter>#SWT.CASCADE</Parameter> </Constructor> </Menu> </composition>

  21. Swing Rule Specification • MENUBAR <rule> <MenuBar> <!-- define the control mapping --> <widget>JMenuBar</widget> <!-- define the attribute mapping --> <attribute> <Method name="title" type="String">setTitle</Method> <Method name="name" type="String">setName</Method> </attribute> <!-- define the composition mapping --> <composition>- <Menu> <Method name="add" /> </Menu> </composition> </MenuBar> </rule>

  22. Swing Rule Specification • MENU <rule> <Menu> <!-- define the control mapping --> <widget>JMenu</widget> <!-- define the attribute mapping --> <attribute> <Method name="text" type="String">setText</Method> <Method name="name" type="String">setName</Method> <Method name="title" type="String">setTitle</Method> </attribute> <!-- define the composition mapping --> <composition> <MenuItem> <method name="add" /> </MenuItem> <MenuItem type="checkbox"> <method name="add" /> </MenuItem> <MenuItem type="radiobutton"> <method name="add" /> </MenuItem> <Menu> <method name="add“/> </Menu> </composition> </Menu> </rule>

  23. Swing Rule Specification • MENUITEM <rule> <MenuItem> <!-- define the control mapping --> <widget>JMenuItem</widget> <!-- define the attribute mapping --> <attribute> <Method name="text" type="String">setText</Method> <Method name="name" type="String">setName</Method> <Method name="mneonomic“ type="char">setMnemonic</Method> </attribute> <!-- define the composition mapping --> </MenuItem> </rule>

  24. Swing Rule Specification • BUTTON <rule> <Button> <!-- define the control mapping --> <widget>JButton</widget> <!-- define the attribute mapping --> <attribute> <Method name="title" type="String">setTitle</Method> <Method name="text" type="String">setText</Method> </attribute> <!-- define the composition mapping --> </Button> </rule>

  25. Swing Rule Specification • TEXTBOX <rule> <TextBox type="text"> <!-- define the control mapping --> <widget>JTextField</widget> <!-- define the attribute mapping --> <attribute> <Method name="background" type="Color">setBackground</Method> <Method name="columns" type="int">setColumns</Method> </attribute> </TextBox> </rule>

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

  27. Swing GUI

  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. SWT Rule Specification • MENUBAR <rule> <MenuBar> <widget>Menu <Constructor> <Parameter>$Parent</Parameter> <Parameter>#SWT.BAR</Parameter> </Constructor> </widget> <composition> <Menu> <Constructor> <Parameter>$MenuBar</Parameter> <Parameter>#SWT.CASCADE</Parameter> </Constructor> </Menu> </composition> </MenuBar> </rule>

  30. SWT Rule Specification • MENUITEM <rule> <MenuItem> <widget create="false"> MenuItem </widget> <!-- define the attribute mapping --> <attribute> <Method name="text" type="String">setText</Method> </attribute> <!-- define the composition mapping --> </MenuItem> </rule>

  31. SWT Rule Specification • MENU <rule> <Menu> <widget create="false">MenuItem</widget> <attribute> <Method name="text" type="String">setText</Method> <Method name="addMenu" set="true">setMenu <Parameter type="Menu">$MenuObject</Parameter> </Method> </attribute> <define> <Method name="MenuObject" order="post" type="Menu"> <Parameter>$TopContainer</Parameter> <Parameter>#SWT.DROP_DOWN</Parameter> </Method> </define> <composition> <MenuItem> <Constructor> <Parameter>$Parent</Parameter> <Parameter>#SWT.PUSH</Parameter> </Constructor> </MenuItem> <Menu> <Constructor> <Parameter>$Parent</Parameter> <Parameter>#SWT.CASCADE</Parameter> </Constructor> </Menu> </composition> </Menu> </rule>

  32. SWT Rule Specification • TEXTBOX <rule> <TextBox type="text"> <widget create="false">Text</widget> <attribute> <Method name="text" type="String">setText</Method> <Method name="bounds">setBounds <Parameter type="int">$leftx</Parameter> <Parameter type="int">$lefty</Parameter> <Parameter type="int">$rightx</Parameter> <Parameter type="int">$righty</Parameter> </Method> </attribute> </TextBox> </rule>

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

  34. SWT GUI

  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. Project Information • Website: • http://shrike.depaul.edu/~pjohnso2/

  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. 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. Project Schedule

  40. Questions Next Topic: Mobile Profile Research!

More Related