microsoft august 20031 views – an xml-based independent gui system judith bishop university of...

Microsoft August 2003 1

Views – an XML-based independent GUI system

Judith BishopUniversity of Pretoria, South Africa

Nigel HorspoolUniversity of Victoria, Canada


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


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


Volunteers on a C# course in Africa

Do it in C# Naturally!


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


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


… 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]


SSCLI

Rotor - Microsoft’sImplementation ofthe CLI (plus some)

.NET offerings

CLI

ECMA/ISO standardisedCommonLanguageInfrastructure

.NET

Microsoft Windows’Web serviceFramework

CE


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

Jim Miller

Make the next three slides fade transition so it's easy to see how they differ?


GUI building today

GUI BuilderGUI Builder

Add ListenersAdd Listeners

Handlers

widget rendering in the OS


Visual Studio

C#

Windowswidget calls in a language

Application


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


End of motivation- Now about Views


A GUI using XML

Application

Handlers



Control Engine


GUI

XML

Spec

GUI

XML

Spec


GUI building today

GUI BuilderGUI Builder


Handlers



Visual Studio

C#

Windowswidget calls in a language

Application


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#


DEMO


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/> }


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


The competition


Cross platform

Application

Handlers



Control Engine


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


Cross Language

Application

Handlers



Control Engine


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


Views implementation - the science


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":


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.


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

XUL example (for Tic-Tac-Toe) <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>

 <xwt> <template hpad="5" vpad="5"> <box color="white" width="44" height="44" id="inner"> </box> </template> </xwt>

Procedures

XUL handlers <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


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>


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)


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]


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/> }


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 20031 views – an xml-based independent gui system judith bishop university of...

Documents