Post on 16-Dec-2015
Multiple Device User InterfaceA Rule Approach
Paul D. JohnsonFinal Presentation (SE690)
Supervised by Dr. Jiahttp://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 HTMLJ2MESWT
5
Profiles
Multiple Device Markup Language
DESKTOPPROFILE(GUI)
SwingSWT.Net
WEBPROFILE
JSP.Net
MOBILEPROFILE(Cellular Phone, PDA)
J2ME
VOICEPROFILE(Voice System)
VoiceXML
Rich -> Limited
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
DisplayEngine
RuleEngine
RuleDescription
RuleList
Display
DisplayTableUINode Tree
Rule File XML
Multiple Device Markup LanguageXML
UI.propertiesPROPERTY FILE
HandlerInterface
ClassHandler
Langugage.xmlXML Code Generator Input File
ZOOM Code Generatorclass.dtd
class.javaGenerated Executable Code
MyHandler
MyLangugageCode Generator Input File
General Code GeneratorGENERAL SCHEMA/DTD
classGenerated Executable Code
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
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
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) <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>
<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>
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
0 1 2 3 4 5 6 7 8
Research
Architecture
Coding
Presentation
Summer Qtr
Fall Qtr
Winter Qtr
40
Questions
Next Topic: Mobile Profile Research!