the ubit toolkit  eric lecolinet  enst

The Ubit GUI toolkit

An "atomic" architecture for GUIs

Eric Lecolinet / ENST INFRES - www.infres.enst.fr/~elc

 

[first slide]

[only one file]

[index]



Classical architecture: Widget model

Widgets = complex objects with

many attributes, many methods... -> complexity

...except the one I need... -> lack of flexibility

Static architecture

subclassing is often difficult (or impossible)

hard to reuse features from one widget to another

to many subclasses

Ubit Toolkit

"Atomic" architecture

small set of very lightweighted + specialized objects

can be dynamically combined

pseudo-declarative encoding with a procedural language (C++)

-> Construction game

     

Ubit "Bricks"

Viewable elements:

UStr, UIma, USymbol ...

Graphical properties

UColor, UBgcolor, UBackground, UBorder, UScale, UAlpha ...

transparency, translucency, scaling, zooming ...

View renderers

Interaction modes

Callback objects

Generic containers

Ubit "Widgets"

Dynamic model

Widgets = dynamic combinations of Bricks

containers = "glue" or "dorsal spin"

Sharable model

all objects can be shared (including "widgets")

attributes are inherited in the instance graph (DAG)

Example

Pseudo-declarative code in C++

     

UColor col = UColor::black;
UFont  fnt = UFont::italic;

UBox& b1 = uhbox
   ( "This is " 
     + uima("colors.gif")
     + UColor::red + UFont::bold + " multi-color text"
     + col + fnt + " that contains a "
     + ...
   );

UBox& b2 = ubutton
   ( "Try!"
     + ubutton( UColor::red   + " ") 
     + ubutton( UColor::blue  + " ")
     + ubutton( UColor::green + " ")
     + ubutton( USymbol::down + umenu(...))
   );

b1.add(b2);      // classical "OO" API

Callback bricks

Function and method call-backs

C++ templates => arg. types checked by the compiler

class MyClass {
  void moo(int i) { ... }
  ...
};

void foo(char* s, double d) { ... }


main() {
  MyClass* obj = new MyClass();

  UBox& box = uhbox
  (
    "my button"
    + UOn::mpress / ucall(obj, 5, &MyClass::moo) 
    + UOn::action / ucall("abcd", 3.14, foo)
  );
}

Local and inherited conditions

Local conditions

can be applied to any object

  UBox& box = uhbox
  (
    UOn::enter      / UBgcolor::yellow
    + UOn::select   / uima(minus.gif")
    + UOn::unselect / uima(plus.gif")
    + "my button"
    + UOn::action   / ucall("abcd", obj, foo)
  );

Global conditions

inherited in the instance graph

Sharing (1)

Bricks are "reactive" and can be shared

-> synchronization: parents are automatically updated

-> can also have callbacks

 
  UStr str;
  UColor col;

  utextbox( uedit() + str );
  ubutton( col + str )
  udialog( col + uhbox( ...) )

with declarative call-backs

  ubutton( col + str
          + UOn::select   / uset(&col, UColor::red) 
          + UOn::unselect / uset(&col, ucolor("#aabbcc")) 
         );

Sharing (2)

Containers (= Widgets) can also be "shared"

-> visually replicated in parents

Sharing (3)

Recursive replication

a graph of widgets can be visually replicated

can be rendered in a different way

Sharing and Multiple Displays

Widgets can be shown on remote displays

shared widgets -> automatic synchronization

-> groupware

Centralized architecture

one application / several GUIs

simple

limitations:

only a few users

network with enough bandwith

Containers and Widgets

3 types of generic containers

UGroup : "local context":

base class for mark-up tags

UBox : UView management

base class for "Widgets" : UButton, ULabel, UTextbox...

UWin : separate windows

base class for UFrame, UDialog, UMenu

Tags and Widgets

Trivial derivations of the 3 generic containers

can be dynamically changed one into another!

<b>... </b> == ugroup(UFont::bold + "abcd xyz" + ..)

ubutton( xxx )  == ubox( UMode::CanArm + UBorder::shadowOut + xxx )

utextbox( xxx ) == ubox( UMode::CanSelectText + UBorder::shadowIn + xxx )


UStr str = "bla bla";
ubutton( uedit() + UBorder::etchedIn + str + ubutton(...) ) 

Anatomy of a Widget (1)

DAG of objects

multiple UView trees

Anatomy of a Widget (2)

Widgets do not "have" attributes

Attributes are either:

default values defined in UStyle specifications

inherited from the instance graph

(dynamically) added as children

Generic controller

common to all Containers

parameterized by widgets

ex: UMode::CanArm, UMode::CanSelectText

can cooperate with sub-controllers

ex: ubutton( uedit() + str + ... )

Flags and Variants

Inherited conditions :

one specification => several variants

  UFlag f1,f2,f3;

  b = ubutton( f1 / ustr("abcde")
               + f2 / uima("whatever.jpg")
               + f3 / ufilebox( f4 /...)
              );

  x = udialog(  udefFlag(f1) + b);
  y = umenu(    udefFlag(f2) + b);
  z = utextbox( udefFlag(f3) + udefFlag(f4) + b);

Magic Lenses

Combination of two features :

multiple views

conditional specifications

1 specification => n different views

Zoomable interfaces

Combination of two features :

recursive scaling factors

conditional scaling ranges

b = ubutton( usrange(-3,-1)   / ustr("abcde")
             + usrange(0, 3)  / uima("whatever.jpg")
             + usrange(4, 99) / ufilebox( uscale(-2) + ...)
           );

UScale sc = -1;
x = udialog(sc + b);

Transparency and translucency

       

Widgets can be:

fully transparent or alpha blended

transparent dalogs, menus, scrollbars, Control menus

umenu( UBgcolor::grey + ualpha(0.5)
       + ubutton(UBgcolor::orange + ualpha(0.3) 
                 + "bla bla bla")
       + ...
     );

Transparent tools

Events can be:

filtered and modified by widgets

then sent to the widgets underneath

Bi-manual interaction

Ubit applications can handle:

several event flows

alternate sources of input (files, sockets, timers)

Each event flow:

can be identified

is controlled independently from others

Geometry management

Automatical by default

performed by the View Renderers

HBox, VBox, FlowBox, Table, Pane, Scrollbar

HTML "compatible"

udialog( uhflex()
         + utop() + menubar + toolbar
         + uvflex() + warea1 + warea2
         + ubottom() + statusbar
       )

Styles & "fancy" widgets

Current Status

The library is reasonably small

22 000 lines of C++ code

(headers: 4 000 / implementation 18 000)

binary: 1.5 Mo

OS: Unix (Solaris / Linux / BSD / Mac...)

ported on embbeded Linux on the Ipaq PDA

Graphics implementation

X Window

Open GL (partial port)

Open Source:

www.infres.enst.fr/~elc

Open GL

Advantages

efficiency: alpha blending, scaling, etc.

rotations, immersion in a 3D space

Problems: 3D concepts noticeably differ

single graphics context

single window

global rendering (rather than "damaged" rendering)

clipping (-> stencils)

Single window problem

"soft" window mode managed by Ubit