Views: A vendor-independent extendable windowing system

1

Views: A vendor-independent extendable windowing system

Nigel Horspool, University of Victoria

Judith Bishop, University of Pretoria

IFIP WG2.4 Dagstuhl 2002 2

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

1

2

3

4


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 WinForms

show.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(); }}

Embedded in 115 lines of generated code labelled “do not touch”

Unexplained classes and unused objects here


Avoiding generated code

Options

Code calls from scratch (e.g. Java awt or Swing) Too early for so many concepts (inheritance, events)

Create a specialised package (e.g. Display or ConsoleGUI) Regarded suspiciously as non-standard

Use an external specification (e.g. tailor-made XML) Additional notation to learn


A GUI using XML

Application

Handlers



Control Engine


GUI

XML

Spec

GUI

XML

Spec


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


Run ShowHide Demos

Winforms Make some changes

Views Make some changes


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


A typical control - Button

<Button/> *Name=SText=SImage=FWidth=MHeight=MForeColor=C BackColor=C

• Creates a push button which is a variable given by the Name S.• The button can be labelled with a Text string or with an Image or both.• The size of the button defaults to something large enough to hold the label, either text or an image or can be set with Width and Height.• Clicking the button causes GetControl to return with the name of the control.

ON

Compulsory

<Button Name=onButton Text=‘ON’ />


The 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


Views.Form v = new Form (@"<form Text= Lucky> <vertical> <TextBox name =Number Text = '13'/> <Button name = Start/> <ListBox name = Day Width = 270/> </vertical> </form>");

int luckyNumber = int.Parse(v.GetText("Number"));

Random r = new Random (luckyNumber); while (v !=null) { string s = v.GetControl( ); switch (s) { case "Start": DateTime luckyDate =

new DateTime(DateTime.Now.Year, r.Next(3,12);, r.Next(1,30);); v.PutText("Day", "Your lucky day will be " + luckyDate.DayOfWeek + " " + luckyDate.ToString("M")); break; }}


Multiple controls - arrays in XML?

• Arrays of product names and images

• Arrays of prices (in the background)

double[ ] unitCost = new double[maxNumProducts]; string[ ] item = new string[maxNumProducts];

<Button Name=??? Image=‘Apples.gif’ Width=72 Height=72/>


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]


Next demo

Till Program Till Program amended

Removing an product (see Run method) Adding controls (see ReadData method) Writing to a ListBox (see ReadDataFile method) Reacting to the Button (see ReadDataFile method) Emergence of scrollbars


Acquiring more control

Views.Form f = new Views.Form( @"<form> <vertical>

<Label Name=label1 Text='Enter Your Name: '/>

<TextBox Name=box1 Width=150/>

</vertical>

</form>"; creates in the Views engine a hash table of controls with the keys being

the strings of the Name attributes Access to an individual control may be obtained by using the indexer

operation, and that access may be used to achieve run-time effects.

TextBox tb = f[”box1"];

tb.Font = new Font(FontFamily.GenericMonospace, 10);

Label lab = f[”label1"];

lab.BackColor = Color.Red;

f.Invalidate(); // force form to be redrawn with new colours


Front ending Views

It is possible to write a GUI builder to emit Views XML

Two projects underway: UVic system (Scholtz) XMLGUI at UP (Miller)


Demo of XMLGUI (Miller)

Create the HideShow program interface Add handlers


2. Fast (and clever) runtime engines

Views is 1800 lines of code Uses XML namespace

Some intelligent uses of C# e.g. implicit operator overloading Result from f[“name”] is a Views.VControl instance; it contains a

reference to the WinForm control. VControl can be coerced to the WinForm type because of the following conversion method:

public static implicit operator Button(VControl xc) {

return if (xc == null) null else (Button) (xc.c);

}


3. 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 (Rajapindar)


4. 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 (Worrall and Lo)


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 in 2000 on mapping to applets, WML and HTML showed this to be “A bridge too far” (Bishop, Ellis, Roux and Steyn)


Conclusions

XML can be written and amended It is no more of an “extra language” than HTML for applets

or SQL for database connectivity Platform independence via re-writing renderers is a

herculean task - Tcl/TK is better Language indepence is good - now for language wars on

XML notations

Points for discussion Take up in education? Take up in industry? Could SWT replace Tcl/TK?


References

www.cs.up.ac.za/polelo or rotor -- for Views http://www.uiml.org/ http://www.xwt.org SWT is all over the place - check Eclipse

http://www.devx.com/xml/Article/9782

Date post:	16-Jan-2016
Category:	Documents
Upload:	shaw
View:	40 times
Download:	0 times

Views: A vendor-independent extendable windowing system

Documents