flexclock, a plastic clock written in oz with the qtk toolkit
DESCRIPTION
This paper focuses on the techniques involved in building an interactive application using a plastic user interface. These techniques take advantage of the QTk toolkit, a toolkit that features unusual but interesting concepts with respect to more classical object-oriented toolkits. These features are possible thanks to the underlying programming language used, Oz. In particular, it can support all facilities provided by symbolic records like XML structures and more than that. It also exhibits the capacity to wrap any languages entities into higher order data structures. This paper shows by a case study how the combination of QTk and Oz helps developers write plastic user interface very easily.TRANSCRIPT
![Page 1: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/1.jpg)
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
![Page 2: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/2.jpg)
What interface builders can do
Difference between « what application needs » and « what interface builder offer »
![Page 3: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/3.jpg)
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
![Page 4: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/4.jpg)
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)
![Page 5: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/5.jpg)
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
![Page 6: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/6.jpg)
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:$)}
![Page 7: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/7.jpg)
QTk example (2)
placeholder(handle:P)
…
{P set(label(text:"Hello"))}
…
{P set(label(text:“World"))}
![Page 8: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/8.jpg)
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)
![Page 9: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/9.jpg)
FlexClock: different views
![Page 10: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/10.jpg)
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"))
![Page 11: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/11.jpg)
Definition of view
![Page 12: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/12.jpg)
Software Probe for Plasticity (G. Calvary)
![Page 13: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/13.jpg)
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)}
![Page 14: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/14.jpg)
Plasticity domain
Initial definitionFlexClock
![Page 15: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/15.jpg)
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
![Page 16: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/16.jpg)
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
![Page 17: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/17.jpg)
Calculation of the reaction
(d1,d2)
(x,y)
(x,y)
(x,y)
![Page 18: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/18.jpg)
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
![Page 19: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/19.jpg)
History mechanism
Initial definition: it records context transitions along with their migration costs as the user runs the system
FlexClock: none
![Page 20: FlexClock, a Plastic Clock Written in Oz with the QTk toolkit](https://reader035.vdocument.in/reader035/viewer/2022081519/5582a90ad8b42a584c8b47c6/html5/thumbnails/20.jpg)
Conclusion
FlexClock is– Plastic– Multi-platform– Generated at run-time– Uses the software probe