1 / 33

Views – an XML-based independent GUI system

Views – an XML-based independent GUI system. Judith Bishop University of Pretoria, South Africa Nigel Horspool University of Victoria, Canada. Views is. Views is a V endor I ndependent E xtensible W indowing S ystem

enan
Download Presentation

Views – an XML-based independent GUI system

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Views – an XML-based independent GUI system Judith Bishop University of Pretoria, South Africa Nigel Horspool University 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. Views 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] 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. ECMA/ISO standardised Common Language Infrastructure CLI .NET offerings Rotor - Microsoft’s Implementation of the CLI (plus some) Microsoft Windows’ Web service Framework SSCLI .NET CE Microsoft August 2003

  9. JScript C# 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 Microsoft August 2003

  10. widget rendering in the OS widget calls in a language Windows GUI Builder Application Add Listeners Handlers Visual Studio C# GUI building today Microsoft August 2003

  11. Microsoft August 2003

  12. 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(); } }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. widget rendering in the OS GUI XML Spec Application Control Engine Handlers Add Listeners A GUI using XML Microsoft August 2003

  15. widget rendering in the OS widget calls in a language Windows GUI Builder Application Add Listeners Handlers Visual Studio C# GUI building today Microsoft August 2003

  16. Example in Views XML 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; } } } C# • No pixel positioning • No generated code • Separation of concerns Microsoft August 2003

  17. DEMO Microsoft August 2003

  18. 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/> } Microsoft August 2003

  19. The Eight 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 Microsoft August 2003

  20. The competition Microsoft August 2003

  21. widget rendering in the OS GUI XML Spec Application Control Engine Handlers Add Listeners 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 Microsoft August 2003

  22. widget rendering in the OS GUI XML Spec Application Control Engine Handlers Add Listeners 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 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. “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); Microsoft August 2003

  32. 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/> } Microsoft August 2003

  33. The Eight 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 Microsoft August 2003

More Related