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!