280 likes | 406 Views
Views: A vendor-independent extendable windowing system. Nigel Horspool, University of Victoria Judith Bishop, University of Pretoria. 1. 2. 3. 4. Where GUIs are going. The reality of a single cross-language , cross-platform GUI interface programming model
E N D
Views: A vendor-independent extendable windowing system Nigel Horspool, University of Victoria Judith Bishop, University of Pretoria
1 2 3 4 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] IFIP WG2.4 Dagstuhl 2002
widget rendering in the OS widget calls in a language Windows GUI Builder Application Add Listeners Handlers Visual Studio C# GUI building today IFIP WG2.4 Dagstuhl 2002
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 IFIP WG2.4 Dagstuhl 2002
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 IFIP WG2.4 Dagstuhl 2002
widget rendering in the OS GUI XML Spec Application Control Engine Handlers Add Listeners A GUI using XML IFIP WG2.4 Dagstuhl 2002
Example in Views Views.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 IFIP WG2.4 Dagstuhl 2002
Run ShowHide Demos • Winforms • Make some changes • Views • Make some changes IFIP WG2.4 Dagstuhl 2002
The Views Notation form: <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/> } IFIP WG2.4 Dagstuhl 2002
A typical control - Button ON • <Button/> *Name=S • Text=S • Image=F • Width=M • Height=M • ForeColor=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. <Button Name=onButton Text=‘ON’ /> Compulsory IFIP WG2.4 Dagstuhl 2002
The Handler methods Essentially five kinds of methods: construct close 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 IFIP WG2.4 Dagstuhl 2002
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; }} IFIP WG2.4 Dagstuhl 2002
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/> IFIP WG2.4 Dagstuhl 2002
“Apples” Views engine returns “Apples”not item[0] XML Positional parameters // Set up Form parameter item[count] = product; formParameters[2*count] = product; formParameters[2*count+1] = product + ".gif"; // Construct the form form = 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 product select = Array.IndexOf(item,c); IFIP WG2.4 Dagstuhl 2002
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 IFIP WG2.4 Dagstuhl 2002
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 IFIP WG2.4 Dagstuhl 2002
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) IFIP WG2.4 Dagstuhl 2002
Demo of XMLGUI (Miller) • Create the HideShow program interface • Add handlers IFIP WG2.4 Dagstuhl 2002
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); } IFIP WG2.4 Dagstuhl 2002
widget rendering in the OS GUI XML Spec Application Control Engine Handlers Add Listeners 3. 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 (Rajapindar) IFIP WG2.4 Dagstuhl 2002
widget rendering in the OS GUI XML Spec Application Control Engine Handlers Add Listeners 4. 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 (Worrall and Lo) IFIP WG2.4 Dagstuhl 2002
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 IFIP WG2.4 Dagstuhl 2002
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 IFIP WG2.4 Dagstuhl 2002
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> IFIP WG2.4 Dagstuhl 2002
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) IFIP WG2.4 Dagstuhl 2002
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? IFIP WG2.4 Dagstuhl 2002
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 IFIP WG2.4 Dagstuhl 2002