Views an xml based independent gui system
Download
1 / 33

Views – an XML-based independent GUI system - PowerPoint PPT Presentation


  • 106 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Views – an XML-based independent GUI system' - enan


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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

Microsoft August 2003


Views is
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


C concisely
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


Volunteers on a c course in africa
Volunteers on a C# course in Africa

Do it in C# Naturally!

Microsoft August 2003


Motivation
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


Where guis are going

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


And just today
… 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


Net offerings

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


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


Gui building today

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



Example in winforms
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


End of motivation now about views

End of motivation- Now about Views

Microsoft August 2003


A gui using xml

widget rendering in the OS

GUI

XML

Spec

Application

Control Engine

Handlers

Add Listeners

A GUI using XML

Microsoft August 2003


Gui building today1

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


Example in views
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


DEMO

Microsoft August 2003


The views notation
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


The eight handler methods
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


The competition

The competition

Microsoft August 2003


Cross platform

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


Cross language

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


Views implementation the science

Views implementation - the science

Microsoft August 2003


Views1 implementation
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


Views2 implementation
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


Future work
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


Xul example for tic tac toe
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


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


Uiml from harmonia
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


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


Xml positional parameters

“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


The views notation1
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


The eight handler methods1
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


ad