Antony Courtney's thesis

218 Pages·2004·1.22 MB·English

Abstract
Modeling User Interfaces in a Functional Language
AntonyAlexanderCourtney
2004
It is widely recognized that programs with Graphical User Interfaces (GUIs) are
difficult to design and implement. One possible reason for this difficulty is the
lack of any clear formal basis for GUI programming. GUI toolkit libraries are
typically described only informally, in terms of implementation artifacts such as
objects, imperativestate andI/Osystems.
In this thesis, we develop Fruit, a Functional Reactive User Interface Toolkit.
FruitisbasedonYampa,anadaptationofFunctionalReactiveProgramming(FRP)
to the Arrows computational framework. Yampa has a clear, simple formal se-
mantics based on a synchronous dataflow model of computation. GUIs in Fruit
are defined compositionally using only the Yampa model and formally tractable
mouse, keyboard and picture types. Fruit and Yampa have been implemented as
librariesfor Haskell,apurelyfunctional programming language.
This thesis presents the semantics and implementations of Yampa and Fruit,
andshowshowtheycanbeusedtowriteconciseexecutablespecificationsofcom-
monGUIprogramming idiomsandcompleteGUIprograms.
Modeling User Interfaces in a Functional
Language
A Dissertation
Presented to the Faculty of the Graduate School
of
Yale University
in Candidacy for the Degree of
Doctor of Philosophy
by
Antony Alexander Courtney
Dissertation Director: Professor Paul Hudak
May 2004
Copyright(cid:1)c 2004byAntony AlexanderCourtney
Allrights reserved.
ii
Contents
Acknowledgments ix
1 Introduction 1
1.1 Background andMotivation . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Dissertation Overview . . . . . . . . . . . . . . . . . . . . . . . . . . 4
I Foundations 5
2 Yampa: ASynchronousDataflowLanguageEmbeddedinHaskell 6
2.1 Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2 ComposingSignal Functions . . . . . . . . . . . . . . . . . . . . . . 7
2.2.1 LiftedFunctions . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2.2 SerialComposition . . . . . . . . . . . . . . . . . . . . . . . . 9
2.2.3 Aggregation andWidening . . . . . . . . . . . . . . . . . . . 9
2.3 Synchronization andConcurrency . . . . . . . . . . . . . . . . . . . 10
2.3.1 Synchrony andAlgebraicLaws . . . . . . . . . . . . . . . . . 11
2.4 ComposingLarger DataflowGraphs . . . . . . . . . . . . . . . . . . 12
2.5 EventsandEventSources . . . . . . . . . . . . . . . . . . . . . . . . 14
2.6 LoopsandDelays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.7 History-Sensitive SignalFunctions . . . . . . . . . . . . . . . . . . . 17
i
2.8 ArrowSyntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.9 Switching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.10 Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.10.1 AnEdgeDetector . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.10.2 Thehold SignalFunction . . . . . . . . . . . . . . . . . . . . . 23
2.10.3 ABoundedCounter . . . . . . . . . . . . . . . . . . . . . . . 25
2.11 AnimatingSignalFunctions . . . . . . . . . . . . . . . . . . . . . . . 27
2.12 ChapterSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3 TheEvolution ofYampa 30
3.1 Origins: Fran . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.1.1 Switching inFran . . . . . . . . . . . . . . . . . . . . . . . . . 33
3.1.2 TheUserType . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
3.1.3 TimeandSpaceLeaksinFran . . . . . . . . . . . . . . . . . . 34
3.2 From Franto FRP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.3 UnderstandingSOEFRP’sConceptualModel . . . . . . . . . . . . . 39
3.3.1 Limits inSOEFRP’sExpressive Power . . . . . . . . . . . . 41
3.4 ExtendingSOE FRPwithrunningIn . . . . . . . . . . . . . . . . . . 42
3.4.1 Difficulties withrunningIn . . . . . . . . . . . . . . . . . . . 43
3.5 Behaviorsthat “escape” . . . . . . . . . . . . . . . . . . . . . . . . . 44
3.6 ChapterSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
4 TheFormalSemanticsofYampa 48
4.1 Direct Denotational Semantics . . . . . . . . . . . . . . . . . . . . . . 49
4.2 OperationalSemantics . . . . . . . . . . . . . . . . . . . . . . . . . . 54
4.3 DerivedCombinators . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
4.4 ChapterSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
ii
5 ImplementingYampa 62
5.1 Synchronized StreamProcessors . . . . . . . . . . . . . . . . . . . . 62
5.2 Continuation-BasedImplementation . . . . . . . . . . . . . . . . . . 64
5.3 ImplementingPrimitives . . . . . . . . . . . . . . . . . . . . . . . . . 65
5.4 EncodingVariability . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
5.5 SimpleDynamic Optimizations . . . . . . . . . . . . . . . . . . . . . 69
5.6 ChapterSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
6 Haven: Functional VectorGraphics 72
6.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
6.1.1 AFunctional Modelof Vector Graphics . . . . . . . . . . . . 73
6.2 BasicConcepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
6.2.1 Points andColors . . . . . . . . . . . . . . . . . . . . . . . . . 75
6.2.2 Regions andRegionAlgebra . . . . . . . . . . . . . . . . . . 76
6.2.3 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
6.3 Geometry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
6.3.1 Paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
6.3.2 Rectangles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
6.3.3 Paths, RegionsandBoundingRectangles . . . . . . . . . . . 81
6.3.4 Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
6.3.5 Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
6.4 RenderingModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
6.4.1 Composition Operators . . . . . . . . . . . . . . . . . . . . . 84
6.4.2 Cropping Images . . . . . . . . . . . . . . . . . . . . . . . . . 85
6.4.3 PensandStroking . . . . . . . . . . . . . . . . . . . . . . . . 86
6.4.4 Fonts andText . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
iii
6.5 Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
6.6 From Imagesto Pictures: ARenderingMonad . . . . . . . . . . . . 91
6.7 Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
6.7.1 Sierpinski Gasket . . . . . . . . . . . . . . . . . . . . . . . . . 93
6.7.2 ALogo for Haven . . . . . . . . . . . . . . . . . . . . . . . . 95
6.8 ChapterSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
7 Fruit: AFunctional GUILibrary 97
7.1 DefiningGUIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
7.1.1 WhatisaGUI? . . . . . . . . . . . . . . . . . . . . . . . . . . 99
7.1.2 Library GUIs . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
7.2 TheGUIInputType . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
7.3 BasicLayout Combinators . . . . . . . . . . . . . . . . . . . . . . . . 102
7.3.1 Transforming GUIs . . . . . . . . . . . . . . . . . . . . . . . . 103
7.4 Specifying LayoutUsingArrows . . . . . . . . . . . . . . . . . . . . 106
7.5 ChapterSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
8 DynamicCollections inYampa 110
8.1 TheNeedfor DynamicCollections . . . . . . . . . . . . . . . . . . . 110
8.2 ParallelComposition andLocalState . . . . . . . . . . . . . . . . . . 111
8.3 AFirst Attempt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
8.4 Continuation-BasedSwitching . . . . . . . . . . . . . . . . . . . . . 115
8.5 ParallelSwitching andSignal Collections . . . . . . . . . . . . . . . 117
8.6 DynamicInterfacesExample . . . . . . . . . . . . . . . . . . . . . . 119
8.7 ChapterSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
iv
II Applications 122
9 Proving PropertiesofYampaApplications 123
9.1 PreliminariesandNotation . . . . . . . . . . . . . . . . . . . . . . . 124
9.1.1 Observing SignalFunctions . . . . . . . . . . . . . . . . . . . 124
9.1.2 The“always”Quantifier . . . . . . . . . . . . . . . . . . . . . 125
9.2 AnInvarianceTheorem . . . . . . . . . . . . . . . . . . . . . . . . . 126
9.3 Example: ASimpleBoundedCounter . . . . . . . . . . . . . . . . . 130
9.3.1 Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . 130
9.3.2 ARudimentaryProof . . . . . . . . . . . . . . . . . . . . . . 131
9.4 ChapterSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
10 TheModel/ View/Controller(MVC)DesignPatterninFruit 139
10.1 “Shallow”MVC:Multiple CameraViews . . . . . . . . . . . . . . . 140
10.1.1 Passive Views . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
10.1.2 Multiple ActiveViews . . . . . . . . . . . . . . . . . . . . . . 143
10.2 Model/View/Controller InFruit . . . . . . . . . . . . . . . . . . . . 144
10.2.1 GUIComponent Refactoring . . . . . . . . . . . . . . . . . . 145
10.3 ChapterSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
11 Application CaseStudies 149
11.1 AMediaController . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
11.2 AWebBrowser with InteractiveHistory . . . . . . . . . . . . . . . . 152
11.2.1 BasicComponents . . . . . . . . . . . . . . . . . . . . . . . . 154
11.2.2 AHistory-less Browser . . . . . . . . . . . . . . . . . . . . . 155
11.2.3 Modeling InteractiveHistory . . . . . . . . . . . . . . . . . . 156
11.3 AnInteractive VideoGame . . . . . . . . . . . . . . . . . . . . . . . 159
v
11.3.1 GamePlay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
11.3.2 GameObjects . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
11.3.3 TheGameProper . . . . . . . . . . . . . . . . . . . . . . . . . 164
11.4 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
11.5 ChapterSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
III Conclusions and Future Work 184
12 RelatedWork,Conclusions andFutureWork 185
12.1 RelatedWork . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
12.1.1 Data FlowLanguages . . . . . . . . . . . . . . . . . . . . . . 185
12.1.2 ImperativeGUIToolkits . . . . . . . . . . . . . . . . . . . . . 187
12.1.3 Functional GUIToolkits . . . . . . . . . . . . . . . . . . . . . 188
12.1.4 Constraints . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
12.1.5 Formal Models ofGUIs . . . . . . . . . . . . . . . . . . . . . 190
12.2 Conclusions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
12.3 Future Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
12.3.1 IncrementalImplementation . . . . . . . . . . . . . . . . . . 193
12.3.2 Integration with StandardWidgetSets . . . . . . . . . . . . . 194
12.3.3 Modeling Systems Software . . . . . . . . . . . . . . . . . . . 196
12.3.4 Model-BasedInterfaceDesign . . . . . . . . . . . . . . . . . 196
Bibliography 196
vi
List of Figures
2.1 ASignalFunction, SFab . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2 CoreArrow Primitives . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.3 OtherArrow Operators . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.4 Arrowloop operator . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.5 Semanticsof hold . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.6 Implementationof edge . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.7 Implementationof dHold . . . . . . . . . . . . . . . . . . . . . . . . . 24
2.8 Implementationof boundedCounter . . . . . . . . . . . . . . . . . . . 27
3.1 Alternativesfor Semantics ofBehaviors . . . . . . . . . . . . . . . . 35
4.1 CorePrimitives ofYampa . . . . . . . . . . . . . . . . . . . . . . . . 48
4.2 OperationalSemantics for CoreYampa. . . . . . . . . . . . . . . . . 54
4.3 FlawedSemantics for Switching . . . . . . . . . . . . . . . . . . . . . 59
4.4 StandardYampaUtility Routines . . . . . . . . . . . . . . . . . . . . 60
6.1 CroppingaMonochrome Imageto aPath . . . . . . . . . . . . . . . 85
6.2 Stroking aPathwithaPen . . . . . . . . . . . . . . . . . . . . . . . . 88
6.3 TheSierpinski Gasket . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
6.4 ALogo for Haven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
vii