Views an XMLbased independent GUI system

1
Views an XML-based independent GUI system

• Judith Bishop
• University of Pretoria, South Africa
• Nigel Horspool
• University of Victoria, Canada

2
Views is ...

• Views is a Vendor Independent Extensible
  Windowing System
• Views2 is a general-purpose tool for creating
  sophisticated graph structures whose nodes are
  arbitrary class instances and where the structure
  layout is defined by a simple XML notation
• Available for download and study from
• http//www.cs.up.ac.za/rotor

3
C Concisely

• First year programming text book due September
  2003
• Addison Wesley, 2003
• Incorporates Views
• Reviewed by Microsoft
• Contents on the Views website
• http//www.cs.up.ac.za/rotor

4
Volunteers on a C course in Africa
Do it in C Naturally!
5
Motivation

• Forward looking
• Move to platform independent GUI systems
• Integration of XML into languages (cf XEN)
• Technical
• Rotor does not have a GUI capability
• Interesting challenges in Reflection, RegEx etc
• Educational
• Dissatisfaction with method-oriented or drag and
  drop GUIs
• Separation of concerns

6
Where GUIs are going

• The reality of a
• single cross-language,
• cross-platform
• GUI interface programming model
• is in sight, based on an
• XML description language
• supported by
• fast native runtimes.
• Russel Jones, DevX, Nov 2002

7
and just today

• Supporting many GUIs
• isn't just a simple process
• of including one set of libraries or another
• it's often a frustrating and error-prone exercise
  
• in writing GUI-specific code.
• Russel Jones, DevX, Aug 2003

8
.NET offerings
Rotor - Microsofts Implementation of the CLI
(plus some)
Microsoft Windows Web service Framework
SSCLI
.NET
CE
9
Rotor CLI Implementation
VS.NET
System.Web (ASP.NET)
System.WinForms
System.WinForms
System.Drawing
System.Data (ADO.NET)
System.Xml
SDK Tools
System
Common Language Runtime


Platform Abstraction
10
GUI building today
11
(No Transcript)
12
Example in WinForms
show.Click new
EventHandler(ActionPerformed) hide.Click new
EventHandler(ActionPerformed) p
ublic void ActionPerformed(Object src,
EventArgs args) if (src
show) pic.Show() else if (src hide)
pic.Hide() i

• Embedded in 115 lines of generated code - do
  not touch
• Unexplained classes and unused objects here

13
End of motivation- Now about Views
14
A GUI using XML
15
GUI building today
16
Example in Views
XML
Views.Form f new Views.Form(_at_"ltFormgt
ltverticalgt lthorizontalgt ltButton
NameShow/gt ltButton NameHide/gt
lt/horizontalgt ltPictureBox Namepic
Image'CJacarandas.jpg' Height175/gt
lt/verticalgt lt/Formgt" )
string c for () c f.GetControl()
switch (c) case Show" ((PictureBox)
f"pic").Show() break case
Hide" ((PictureBox) f"pic").Hide()
break
C

• No pixel positioning
• No generated code
• Separation of concerns

17
DEMO
18
The Views Notation
form ltformgt controlGroup lt/formgt controlGroup lt
verticalgt controlList lt/verticalgt
lthorizontalgt controlList lt/horizontalgt controlList
control textItemList ltitemgt text lt/itemgt
control controlGroup ltButton/gt
ltCheckBox/gt ltCheckedListBoxgt textItemList
lt/CheckedListBoxgt ltDomainUpDowngt textItemList
lt/DomainUpDowngt ltGroupBoxgt radioButtonList
lt/GroupBoxgt ltLabel/gt ltListBox/gt
ltOpenFileDialog/gt ltSaveFileDialog/gt
ltPictureBox/gt ltTextBox/gt ltProgressBar/gt
ltTrackBar/gt radioButtonList ltRadioButton/gt
19
The Eight Handler methods
Essentially five kinds of methods construct clo
se getControl get put PLUS direct access
Form(string spec,params) The constructor. void
CloseGUI( ) Terminates the execution thread
string GetControl( ) Waits for the user to
perform an action string GetText(string
name) Returns the value of the Text
attribute int GetValue(string name) Returns the
Value attribute from TrackBar, ProgressBar and
CheckBox int GetValue(string name, int index)
Returns the status of CheckBox at position
index void PutText(string name, string
s) Displays the string in a TextBox or ListBox
control. void PutValue(string name, int
v) Sets an integer value associated with a
ProgressBar or CheckBox
20
The competition
21
Cross platform

• XWT-XUL Control Engine in Java and ActiveX
  Rendering via XUL.CSS in Mozilla
• SWT (not XML based) Rendering efforts for Win,
  GTK, Mac Supported by IBM and Eclipse
• Views Engine and rendering in Tcl/TK, using
  Rotor for Unix, Win and MacX

22
Cross Language

• XML-XUL Independent schema and specs
  Handlers in JavaScript, in the XML
• SWT For Java only, uses JNI to get to OS
• Views Schema is WinForms oriented but can be
  used in Java with JNI wrapper to the engine

23
Views implementation - the science
24
Views1 implementation

• RegEx API would be nice for normalising XML
• If REs fail to match, hard to create a use
  friendly error message
• did not use the RE package.
• XML API produces poor error messages when reading
  XML
• implemented our own lexical analyzer for the XML
  specifications
• preprocess the users XML then use the XML
  package,
• Views inverts the interaction logic of controls
• normally events cause invocation of handling
  routines asynchronously
• our simple interface has the user invoke Views to
  wait for an event to happen ...
• s form.GetControl()
• switch(s) ...
• case "Push Me"

25
Views2 implementation

• Correspondence can be made to work with
  reflection
• Views2.Create( "ltTagName A1V1 A2V2 A3V2 ..
  /gt" )
• creates an instance of a class or struct type
  named TagName with attributes (or properties) A1,
  A2 ... initialized to have values V1, V2 ...
• Can introduce new tags without preprogramming
  Views for all controls
• Can handle asynchronous events
• ltButton Name"Show" Click"ButtonClick"/gt
• c.f. show.Click new EventHandler(ActionPerforme
  d)
• where ButtonClick is the name of a method in the
  calling program with the appropriate signature
  for handling a click event.

26
Future Work

• Completing Views2 and writing it up
• Completing the TCL/Tk version and looking at
  alternative GUI tools
• Completing a drag and drop stand-alone tool to
  emit Views XML
• Further investigating the pedagogy
• Thinking of asking MS to make Regex available in
  all operating systems
• e.g. PDA .NET environment we've seen
  doesn'tinclude the regexp library, threading,
  reflection or a full version of collections.
• Long term XML checking in the language

27
XUL example (for Tic-Tac-Toe)
lt!-- main.xwt --gt ltxwtgt lttemplate
thisbox"frame" width"220" height"260"
color"black"gt ltbox
orient"vertical"gt ltboxgt
ltcell id"northwest"gtlt/cellgt
ltcell id"north"gtlt/cellgt
ltcell id"northeast"gtlt/cellgt
lt/boxgt .. and two more of these
lt/boxgt lt/templategt lt/xwtgt lt!--
cell.xwt --gt ltxwtgt lttemplate hpad"5"
vpad"5"gt ltbox color"white"
width"44" height"44" id"inner"gt
lt/boxgt lt/templategt lt/xwtgt
Procedures
28
XUL handlers
lt!-- cell.xwt --gt ltxwtgt lttemplate
hpad"5" vpad"5"gt _Press1
function() if (state
"empty") state "x"
_state
function(s) if (s "empty")
inner.image null
else if (s "x")
inner.image "x" else if
(s "o") inner.image
"o"
ltbox color"white" width"44" height"44"
id"inner"gt lt/boxgt
lt/templategt lt/xwtgt
JavaScript
29
UIML from Harmonia
lt?xml version"1.0"gt lt!DOCTYPE uiml ...
"uiml2_0g.dtd"gt ltuimlgt ltinterfacegt
ltstructuregt ...lt/structuregt
ltstylegt ...lt/stylegt ltcontentgt
...lt/contentgt ltbehaviorgt
...lt/behaviorgt lt/interfacegt
ltpeersgt ltlogicgt ...lt/logicgt
ltpresentationgt...lt/presentationgt
lt/peersgt lt/uimlgt
ltstructuregt ltpart id"TopLevel"
class"JFrame"gt ltpart id"L"
class"JLabel"/gt ltpart id"Button"
class"JButton"/gt lt/partgt lt/structuregt
30
UIML Handlers
ltbehaviorgt ltconditiongt ltevent
class"actionPerformed" part-name"Button"/gt
lt/conditiongt ltactiongt
ltproperty part-name"L" name"text"gt
ltcall name"Counter.increment"/gt
lt/propertygt lt/actiongt lt/behaviorgt

• Very Java-based
• Intended to map from UIML to Java, C, HTML, WML,
  VoiceXML)
• Our experiments with UIML on mapping to applets,
  WML and HTML showed this to be A bridge too
  far (Bishop, Ellis, Roux and Steyn)

31
XML Positional parameters
// Set up Form parameter itemcount
product formParameters2count product
formParameters2count1 product ".gif"
// Construct the form form new
Views.Form(v_specs, formParameters) // Part of
the Form specification ltverticalgt ltButton
Name0 Image1 Width72 Height72/gt
ltButton Name2 Image3 Width72 Height72/gt
ltButton Name4 Image5 Width72
Height72/gt lt/verticalgt // Handle a specific
product select Array.IndexOf(item,c)
32
The Views Notation
form ltformgt controlGroup lt/formgt controlGroup lt
verticalgt controlList lt/verticalgt
lthorizontalgt controlList lt/horizontalgt controlList
control textItemList ltitemgt text lt/itemgt
control controlGroup ltButton/gt
ltCheckBox/gt ltCheckedListBoxgt textItemList
lt/CheckedListBoxgt ltDomainUpDowngt textItemList
lt/DomainUpDowngt ltGroupBoxgt radioButtonList
lt/GroupBoxgt ltLabel/gt ltListBox/gt
ltOpenFileDialog/gt ltSaveFileDialog/gt
ltPictureBox/gt ltTextBox/gt ltProgressBar/gt
ltTrackBar/gt radioButtonList ltRadioButton/gt
33
The Eight Handler methods
Essentially five kinds of methods construct clo
se getControl get put PLUS direct access
Form(string spec,params) The constructor. void
CloseGUI( ) Terminates the execution thread
string GetControl( ) Waits for the user to
perform an action string GetText(string
name) Returns the value of the Text
attribute int GetValue(string name) Returns the
Value attribute from TrackBar, ProgressBar and
CheckBox int GetValue(string name, int index)
Returns the status of CheckBox at position
index void PutText(string name, string
s) Displays the string in a TextBox or ListBox
control. void PutValue(string name, int
v) Sets an integer value associated with a
ProgressBar or CheckBox