Université catholique de Louvain (UCL)Louvain Interaction Laboratory (LiLab)Place des Doyens, 1B-1348 Louvain-la-Neuve (Belgium)
by
FlexClock, a Plastic Clock Writtenin Oz with the QTk toolkit
Donatien Grolaux, Peter Van Roy, &Jean Vanderdonckt
Department of Computing Science and Engineering
What interface builders can do
Difference between « what application needs » and « what interface builder offer »
Code generators
From declarative specifications– « What » instead of « how to ».– Limited to UI known before the execution of
the application.– Artificial gate between declaration part and
imperative part
QTk approach
Mixing declarative and imperative approaches inside the same programming language :– User can choose between « what » and « how to » :– Where QTk offers a declarative support, e.g. at GUI
construction.– As they see best fit their purpose.
Programming language requirement :– Inline declarations of arbitrary parameters ⇒
symbolic data structure with a dictionary structure (key → value)
Mozart
Oz records :label(feature1:value1 … featureX:valueX)
Full language support :– Label extraction/replacement– Add/remove/replace one/many feature(s)– Iteration on features– Transformation into/from list– …
Good candidates for declarative specifications of GUIs
QTk example (1)
td(lr(label(text:"Enter your name") entry(handle:E)) button(text:"Ok" action:Ok)) ... {E set(text:"Type here")} ... Result={E get(text:$)}
QTk example (2)
placeholder(handle:P)
…
{P set(label(text:"Hello"))}
…
{P set(label(text:“World"))}
FlexClock
What’s FlexClock? Information needed to define a view :
– UI construction declaration– Update procedure– Size information
17 views = 60 declarative lines + 40 imperative lines View specification code sample :
r(desc: label(handle:H1 glue:nswe bg:white) refresh: proc{$ T} {H1 set(text:{FmtTime T})} end area: 40#10)
FlexClock: different views
FlexClock: calendar widget
UI declared using Oz's natural data structures : records and lists ⇒complete language support for creation/manipulation at runtime.
lr(label(text:"Mo") label(text:"Tu") ... label(text:"Su") newline
lrline(glue:we) lrline(glue:we) ... lrline(glue:we) newline
empty label(text: "1") ... label(text: "6") newline
label(bg:black fg:white text:"7") ... label(text:"13") newline
label(text:"14") label(text:"15") ... label(text:"20") newline
label(text:"21") label(text:"22") ... label(text:"27") newline
label(text:"28") label(text:"29") label(text:"30"))
Definition of view
Software Probe for Plasticity (G. Calvary)
Probe
Initial purpose: software mechanism that is responsible to detect any change of the context of use
FlexClock:– No probe into the
functional core– Event generated
when size changes
proc{Place} WW={QTk.wInfo width(P)} WH={QTk.wInfo height(P)} _#Handle={List.foldRInd Views
fun{$ I W#H#Handle Max#CH} This=(W-WW)*(W-WW)+(H-
WH)*(H-WH)in if W<WW andthen H<WH
andthen (Max==inf orelse
This<Max) then
This#Handle else Max#CH endendinf#local (_#_#H)|_=Views in H
end} in {P set(Handle)} end {P bind(event:'<Configure>'
action:Place)}
Plasticity domain
Initial definitionFlexClock
Current and Next Contexts
Initial definition: they respectively capture the current context of use and the one that will be produced after some detection of a change
FlexClock:– No current context– Next context: is directly computed, but not
stored
Selection rules
Initial definition: reaction to a change of context, selecting the most appropriate– Prologue– Reaction– Epilogue
FlexClock:– No prologue– Computation of a new layout resulting from the
change of window size– No epilogue
Calculation of the reaction
(d1,d2)
(x,y)
(x,y)
(x,y)
Calculation of the reactionproc{Place} WW={QTk.wInfo width(P)} WH={QTk.wInfo height(P)} _#Handle={List.foldRInd Views
fun{$ I W#H#Handle Max#CH} This=(W-WW)*(W-WW)+(H-
WH)*(H-WH)in if W<WW andthen H<WH
andthen (Max==inf orelse
This<Max) then
This#Handle else Max#CH endendinf#local (_#_#H)|_=Views in H
end} in {P set(Handle)} end {P bind(event:'<Configure>'
action:Place)}
Selection rule
Code which changesThe new layout
Returns the handle of theNew layout
History mechanism
Initial definition: it records context transitions along with their migration costs as the user runs the system
FlexClock: none
Conclusion
FlexClock is– Plastic– Multi-platform– Generated at run-time– Uses the software probe
