1 / 28

Views: A vendor-independent extendable windowing system

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

shaw
Download Presentation

Views: A vendor-independent extendable windowing 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: A vendor-independent extendable windowing system Nigel Horspool, University of Victoria Judith Bishop, University of Pretoria

  2. 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

  3. 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

  4. IFIP WG2.4 Dagstuhl 2002

  5. 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

  6. 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

  7. widget rendering in the OS GUI XML Spec Application Control Engine Handlers Add Listeners A GUI using XML IFIP WG2.4 Dagstuhl 2002

  8. 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

  9. Run ShowHide Demos • Winforms • Make some changes • Views • Make some changes IFIP WG2.4 Dagstuhl 2002

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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

  15. “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

  16. 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

  17. 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

  18. 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

  19. Demo of XMLGUI (Miller) • Create the HideShow program interface • Add handlers IFIP WG2.4 Dagstuhl 2002

  20. 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

  21. 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

  22. 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

  23. 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

  24. 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

  25. 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

  26. 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

  27. 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

  28. 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

More Related