Views – an XML-based independent GUI system
description
Transcript of Views – an XML-based independent GUI system
Microsoft August 2003 1
Views – an XML-based independent GUI system
Judith BishopUniversity of Pretoria, South Africa
Nigel HorspoolUniversity of Victoria, Canada
Microsoft August 2003 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
Microsoft August 2003 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
Microsoft August 2003 4
Volunteers on a C# course in Africa
Do it in C# Naturally!
Microsoft August 2003 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
Microsoft August 2003 6
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]
Where GUIs are going
Views
Microsoft August 2003 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]
Microsoft August 2003 8
SSCLI
Rotor - Microsoft’sImplementation ofthe CLI (plus some)
.NET offerings
CLI
ECMA/ISO standardisedCommonLanguageInfrastructure
.NET
Microsoft Windows’Web serviceFramework
CE
Microsoft August 2003 9
VS.NET
Common Language Runtime
System
System.Data(ADO.NET)
System.Xml
System.Drawing
System.Web(ASP.NET)
System.WinForms
SDK Tools
Rotor CLI Implementation
C#
JScript
Platform Abstraction
System.WinForms
Microsoft August 2003 10
GUI building today
GUI BuilderGUI Builder
Add ListenersAdd Listeners
Handlers
widget rendering in the OS
widget rendering in the OS
Visual Studio
C#
Windowswidget calls in a language
Application
Microsoft August 2003 11
Microsoft August 2003 12
Example in WinFormsshow.Click += new EventHandler(ActionPerformed);hide.Click += new EventHandler(ActionPerformed);}
public 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
Microsoft August 2003 13
End of motivation- Now about Views
Microsoft August 2003 14
A GUI using XML
Application
Handlers
widget rendering in the OS
widget rendering in the OS
Control Engine
Add ListenersAdd Listeners
GUI
XML
Spec
GUI
XML
Spec
Microsoft August 2003 15
GUI building today
GUI BuilderGUI Builder
Add ListenersAdd Listeners
Handlers
widget rendering in the OS
widget rendering in the OS
Visual Studio
C#
Windowswidget calls in a language
Application
Microsoft August 2003 16
Example in ViewsViews.Form f = new Views.Form(@"<Form> <vertical> <horizontal> <Button Name=Show/> <Button Name=Hide/> </horizontal> <PictureBox Name=pic Image='C:Jacarandas.jpg' Height=175/> </vertical></Form>" );
string c;for (;;) { c = f.GetControl(); switch (c) { case ”Show" : {((PictureBox) f["pic"]).Show(); break; } case ”Hide" : {((PictureBox) f["pic"]).Hide(); break; } } }
No pixel positioning
No generated code
Separation of concerns
XML
C#
Microsoft August 2003 17
DEMO
Microsoft August 2003 18
The Views Notationform: <form> controlGroup </form>controlGroup: <vertical> controlList </vertical>
| <horizontal> controlList </horizontal>controlList: { control }
textItemList: { <item> text </item> }control: controlGroup
| <Button/> | <CheckBox/>| <CheckedListBox> textItemList </CheckedListBox>| <DomainUpDown> textItemList </DomainUpDown>| <GroupBox> radioButtonList </GroupBox>| <Label/> | <ListBox/>| <OpenFileDialog/> | <SaveFileDialog/>| <PictureBox/> | <TextBox/>| <ProgressBar/> | <TrackBar/>
radioButtonList: { <RadioButton/> }
Microsoft August 2003 19
The Eight Handler methodsForm(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
Essentially five kinds of methods:
construct
close
getControl
get
put
PLUS … direct access
Microsoft August 2003 20
The competition
Microsoft August 2003 21
Cross platform
Application
Handlers
widget rendering in the OS
widget rendering in the OS
Control Engine
Add ListenersAdd Listeners
GUI
XML
Spec
GUI
XML
Spec
• 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
Microsoft August 2003 22
Cross Language
Application
Handlers
widget rendering in the OS
widget rendering in the OS
Control Engine
Add ListenersAdd Listeners
GUI
XML
Spec
GUI
XML
Spec
• 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
Microsoft August 2003 23
Views implementation - the science
Microsoft August 2003 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 user’s 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":
Microsoft August 2003 25
Views2 implementation Correspondence can be made to work with reflection:
Views2.Create( "<TagName A1=V1 A2=V2 A3=V2 .. />" )
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
<Button Name="Show" Click="ButtonClick"/>
c.f. show.Click += new EventHandler(ActionPerformed);
where ButtonClick is the name of a method in the calling program with the appropriate signature for handling a click event.
Microsoft August 2003 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
Microsoft August 2003 27
XUL example (for Tic-Tac-Toe)<!-- main.xwt --> <xwt> <template thisbox="frame" width="220" height="260" color="black"> <box orient="vertical"> <box> <cell id="northwest"></cell> <cell id="north"></cell> <cell id="northeast"></cell> </box> ….. and two more of these </box> </template> </xwt>
<!-- cell.xwt --> <xwt> <template hpad="5" vpad="5"> <box color="white" width="44" height="44" id="inner"> </box> </template> </xwt>
Procedures
Microsoft August 2003 28
XUL handlers<!-- cell.xwt --> <xwt> <template hpad="5" vpad="5"> _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"; } } <box color="white" width="44" height="44" id="inner"> </box> </template> </xwt>
JavaScript
Microsoft August 2003 29
UIML from Harmonia<?xml version="1.0"> <!DOCTYPE uiml ... "uiml2_0g.dtd"> <uiml> <interface> <structure> ...</structure> <style> ...</style> <content> ...</content> <behavior> ...</behavior> </interface> <peers> <logic> ...</logic> <presentation>...</presentation> </peers> </uiml>
<structure> <part id="TopLevel" class="JFrame"> <part id="L" class="JLabel"/> <part id="Button" class="JButton"/> </part></structure>
Microsoft August 2003 30
UIML Handlers
<behavior> <condition> <event class="actionPerformed" part-name="Button"/> </condition> <action> <property part-name="L" name="text"> <call name="Counter.increment"/> </property> </action></behavior>
• 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)
Microsoft August 2003 31
XML Positional parameters
// Set up Form parameter item[count] = product; formParameters[2*count] = product; formParameters[2*count+1] = product + ".gif";
// Construct the formform = new Views.Form(v_specs, formParameters);
// Part of the Form specification<vertical> <Button Name={0} Image={1} Width=72 Height=72/> <Button Name={2} Image={3} Width=72 Height=72/> <Button Name={4} Image={5} Width=72 Height=72/> </vertical>
// Handle a specific productselect = Array.IndexOf(item,c);
“Apples”
Views engine returns “Apples”
not item[0]
Microsoft August 2003 32
The Views Notationform: <form> controlGroup </form>controlGroup: <vertical> controlList </vertical>
| <horizontal> controlList </horizontal>controlList: { control }
textItemList: { <item> text </item> }control: controlGroup
| <Button/> | <CheckBox/>| <CheckedListBox> textItemList </CheckedListBox>| <DomainUpDown> textItemList </DomainUpDown>| <GroupBox> radioButtonList </GroupBox>| <Label/> | <ListBox/>| <OpenFileDialog/> | <SaveFileDialog/>| <PictureBox/> | <TextBox/>| <ProgressBar/> | <TrackBar/>
radioButtonList: { <RadioButton/> }
Microsoft August 2003 33
The Eight Handler methodsForm(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
Essentially five kinds of methods:
construct
close
getControl
get
put
PLUS … direct access