Tampereen teknillinen yliopisto. Ohjelmistotekniikan laitos.

Raportti 8
Tampere University of Technology. Department of Software Systems. Report 8

Antero Taivalsaari & Tommi Mikkonen

Simplifying Interactive Programming with
Keywords ’that’ and ’those’
Tampereen teknillinen yliopisto. Ohjelmistotekniikan laitos. Raportti 8
Tampere University of Technology. Department of Software Systems. Report 8

Antero Taivalsaari & Tommi Mikkonen

Simplifying Interactive Programming with Keywords ’that’ and

’those’

Tampereen teknillinen yliopisto. Ohjelmistotekniikan laitos

Tampere 2009
ISBN 978-952-15-2284-0 (PDF)
ISSN 1797-836X
 Simplifying Interactive Programming
with Keywords 'that' and 'those'
Antero Taivalsaari Tommi Mikkonen
Tampere University of Technology Tampere University of Technology
Korkeakoulunkatu 1 Korkeakoulunkatu 1
FI-33720 Tampere FI-33720 Tampere
FINLAND FINLAND
[email protected] [email protected]
ABSTRACT application to refer to the variables and functions of the current
Most object-oriented programming and scripting languages object instance (in Smalltalk parlance: the current message
provide a keyword called self or this that allows applications receiver). In this paper, we introduce two new keywords that
to refer to the variables and functions of the current object and those to facilitate interactive programming. The key idea
instance. In this paper we introduce two new keywords that behind these "demonstrative pronouns" is to make it easy to
and those to facilitate interactive programming. The key idea refer programmatically to those objects that are currently under
behind these keywords is to make it easy to refer manipulation in the user interface. The main benefit of the
programmatically to those objects that are currently under proposed new keywords is that they simplify the interplay
manipulation in the graphical user interface. between the graphical user interface and source code that is
written and evaluated interactively.

Keywords
Graphical user interfaces, dynamic languages, interactive 2.THAT
programming, scripting. Most computer systems today are based on the WIMP
(Windows, Icons, Menus and a Pointing device) metaphor
invented at Xerox PARC in the 1970s and popularized by the
1.INTRODUCTION Macintosh computer in the 1980s. A pointing device (such as a
The software industry is currently experiencing a paradigm shift mouse or a stylus) is used for choosing the object that the user
towards web-based software. Applications that were wants to manipulate (e.g., to move or resize the object).
conventionally written for specific operating systems, CPU
architectures or devices are now increasingly targeted to the Our proposal is to associate a keyword called that at the
Web, to be downloaded and executed inside the web browser. source code level with the object that has been manipulated in
Web applications are far more dynamic than conventional the user interface most recently. Such a keyword can be
desktop applications, e.g., in that they usually require no extremely useful especially for interactive programming,
compilation, binaries or explicit installation. scripting and debugging. Consider the following example. In
Figure 1, we show a starting position in which there are two
The emergence of the Web as an application platform has led to objects on the screen: a digital clock and a simple gray
a renaissance of dynamic languages. A whole new generation of rectangle. In addition, there is a source code evaluator that
programmers are growing up with languages such as JavaScript, allows the user to enter source code (in this case: JavaScript
Perl, PHP, Python or Ruby. The attention that dynamic source code) and evaluate that code on the fly.
languages are receiving is remarkable, and is something that has
not been witnessed since the early days of personal computers
and the widespread use of the BASIC programming language in
the 1970s and 1980s. Applications that used to be written using
static programming languages such as C, C++ or Java, are now
commonly built with dynamic languages such as JavaScript.
One of the key characteristics of dynamic programming
languages is support for interactive development. With a
dynamic language, software development and testing (and
deployment) can occur seamlessly within a uniform graphical
user interface, as demonstrated originally by the Smalltalk
programming environment [2]. In the context of the Web, it is
the web browser that is now used not only for executing
applications but also for developing them interactively.
Examples of such interactive web-based development
environments include Microsoft Popfly [3], Sun Labs Lively
Kernel [13], Yahoo Pipes [6] and the Lively for Qt system [8]
that we use in the examples shown in this paper.
Most object-oriented programming and scripting languages
provide a keyword called self or this that allows the Figure 1. that keyword illustrated: starting position

1
In Figure 2, the user has clicked on the gray rectangle with the pick one of those substructures as a target for interactive
mouse – thereby implicitly setting the that pointer to point to scripting. A simple example of such use is shown in Figure 4.
the gray rectangle – and then pressed the "Evaluate" button of
the source code evaluator. (Note: We assume that clicking on
the code evaluator itself does not change the value of the that
pointer.) The JavaScript code snippet "that.rotate(10);"
shown in the evaluator was then executed to rotate the gray
rectangle by ten decimal degrees, as illustrated in Figure 2.

Figure 4. Using that keyword to create a programmatical

reference to an object
In Figure 4, we assume that the user has clicked on the digital
clock object, thereby implicitly setting the that pointer to refer
to the digital clock. At the source code level, the user then
assigns the current value of that to a new variable called
Figure 2. that keyword illustrated: the situation after myclock, thereby creating a programmatical reference to the
clicking the gray rectangle and then invoking "Evaluate" digital clock object. The myclock variable can then
subsequently be used for manipulating the clock from other
In Figure 3, the user has clicked on the digital clock and then interactive scripts and elsewhere in source code. Variable
pressed the "Evaluate" button again. As seen in Figure 3, now myclock will remain pointing to the digital clock even when
the digital clock has been rotated as well. the value of that will later change.
Figure 5 shows a similar example, except that in this case the
user has clicked on a substructure of a more complex graphical
object in order to manipulate the substructure
programmatically. More specifically, in this example the
programmer wants to obtain a reference to a map view
component that is inside an application that contains various
other components and widgets as well.

Figure 3. that keyword illustrated: the situation after

clicking the digital clock and invoking "Evaluate" again
The that keyword has various use cases. One of the most
practical use cases is to utilize the that keyword to capture
pointers to objects on the screen. This is especially convenient
in situations in which the user has constructed a complex object
Figure 5. Using that keyword to obtain a reference to a
interactively (e.g., a graphical window consisting of multiple
panes and other substructures), and the user would then want to substructure of an application

2
In the example shown in Figure 5, the programmer assigns the
current value of the that pointer to a variable called
myMapView, and then subsequently utilizes the myMapView
variable to pan the map view to the right and down by ten
pixels.
Without the that keyword, the process of picking up pointers
to arbitrary substructures in the graphical user interface can be
really tedious. In a typical situation, the user would have to
open a separate tool – such as a class browser or object
inspector – to visualize the internal structure of the map view
component. By utilizing the information displayed by such a
tool, the programmer could then manually traverse to the
specific location in the application structure, and create a direct
pointer to the desired object. Usually, the programmer would
have to type a rather long path name (something like
myapp.subcomponent.subsubcomponent.subsubsub.map
view) to programmatically obtain a reference to the desired
substructure. The presence of the that keyword makes it
possible to avoid such hassles altogether.

3.THOSE
An important additional characteristic of a graphical user
interface based on the WIMP metaphor is multiple selection.
For instance, in Mac OS, Linux or Windows applications, the
user commonly clicks and then drags the mouse to perform text
selection or to select a number of objects in a file browser or
graphics editor.
Our proposal is to associate the objects chosen using multiple Figure 6. Using those keyword to programmatically
selection with a keyword called those. In a simple manipulate objects chosen by multiple selection
implementation, the those keyword refers to a collection (such Without the those pointer, the amount of work that the
as a JavaScript array) that holds the objects that the user has programmer would have to expend to accomplish the equivalent
most recently selected in the user interface, e.g., by "lassoing" behavior would be considerably more significant.
(click-dragging around) a number of objects. The user can then
iterate over those objects using familiar language mechanisms
such as a for loop. 4.EXPERIENCES AND COMMENTS
We have implemented that and those keywords for an
In a more advanced implementation, the those keyword could interactive, visual JavaScript web application and mashup
be implicitly associated with iteration behavior, so that a development environment called Lively for Qt
message sent to those (e.g., "those.move(10,0);" to move (http://lively.cs.tut.fi/qt) [8]. We have used the system in a
all the selected objects ten pixels to the right) would be number of projects, including various international code camps
automatically applied to all the selected objects. and graduate student projects at the Tampere University of
The use of the those keyword is illustrated in Figure 6. The Technology, Finland. In these efforts, we have found the
darker area behind the widgets in Figure 6 represents the range proposed new keywords extremely useful especially during
of multiple selection. In this example, we are setting the value interactive development, testing and debugging, and also during
of each selected object to 10 by manually iterating over the live application demos to large audiences. The keywords serve
objects in the those collection. as a "glue" that bridges the gap between conventional source
code editing and visual GUI-driven development. The proposed
Note that in Figure 6, we use a for loop to iterate over all the keywords can also facilitate interactive debugging considerably,
objects that are currently selected. In a more advanced allowing the user to effortlessly "grab" pointers to visual objects
implementation – with implicit iteration associated with the and their substructures on the screen. Without the that and
those keyword – the programmer could accomplish the same those keywords, the interplay between the GUI and source
behavior in a more direct way by writing code editing would be much more cumbersome.
“those.setValue(10);”.
Furthermore, the proposed new keywords are helpful in a web
Like the that pointer, the those pointer has various uses in an programming environment that is running in a mobile device or
interactive programming and scripting environment. It can be some other “input-constrained” environment. With the help of
used for easily applying the same script programmatically to all the that and those keywords, the user can easily apply the
the objects that the user has pinpointed in the user interface. It same script(s) to different objects on the screen without having
can also be used for obtaining a large number of references that to spend a lot of time editing and customizing the scripts to use
can then be copied to other data structures. different variable names in the source code.

3
5.RELATED WORK 7.ACKNOWLEDGMENTS
Techniques for visual programming and direct manipulation The initial work behind the ideas presented in this paper was
have been studied for decades, starting from Doug Engelbart's completed when the first author was working at Sun
work on the NLS system [1] and Ivan Sutherland's work on Microsystems Laboratories. The authors would like to thank
Sketchpad [12] in the early 1960s. These pioneering activities Sun Labs and the Academy of Finland (grant 115485) for their
were followed by the development of the Smalltalk system at support during this work.
Xerox PARC in the 1970s [2] and Ben Schneiderman's early
research work on user interfaces based on direct manipulation
8.REFERENCES
[10]. Numerous visual programming languages and
[1] Engelbart, D. C. Augmenting Human Intellect: A
environments have been proposed over time. For instance, the
Conceptual Framework. Summary Report AFOSR-3223,
Fabrik system [4] was one of the first truly "program-by-wire"
Stanford Research Institute (Menlo Park, California,
environments in which programming was performed mainly by
USA), October 1962.
visually connecting various graphical elements to each other.
Demonstrational user interfaces [9] took visual programming [2] Goldberg, A. and Robson, D. Smalltalk-80: The Language
further, sometimes attempting to eschew with conventional and its Implementation. Addison-Wesley, 1983.
source code altogether. [3] Griffin, E. Foundations of Popfly: Rapid Mashup
Our work on the that and those keywords has been inspired Development. Apress, 2008.
by more conventional interactive programming environments in [4] Ingalls, D., Wallace, S., Chow, Y-Y., Ludoph, F. and
which source code still plays a central role. For instance, Doyle, K. Fabrik: A Visual Programming Environment. In
Seymour Papert's Logo programming language [7] – developed Proceedings of OOPSLA'88 Conference (San Diego,
originally in the late 1960s – supported a turtle graphics system California, September 25-20, 1988), ACM SIGPLAN
in which the location of the graphics cursor ("turtle") on the Notices 23, 11 (November 1988), 176-190.
screen was maintained automatically by the system. The [5] Korienek, G., Wrensch, T. and Dechow, D. Squeak: A
essential commands of the Logo programming language, such
Quick Trip to ObjectLand. Addison-Wesley, 2001.
as LT (for turning the turtle left), RT (for turning the turtle
right), and FD (for moving the turtle forward), rely on the [6] Loton, T. Mashup Case Studies with Yahoo! Pipes.
implicitly maintained turtle location and direction information, CreateSpace Press, 2008.
so that the user can interactively/programmatically control the [7] Lukas, G. and Lukas, J. The LOGO Language: Learning
movement of the turtle in the user interface. Our that and Mathematics Through Programming. Entelek Press, 1977.
those keywords are similar in spirit but their use is not
[8] Mikkonen, T., Taivalsaari, A. and Terho, M. Lively for Qt:
restricted only to turtle graphics. Rather, our keywords can be
A Platform for Mobile Web Applications. In Proceedings
used for commanding any object(s) that are currently under
of the ACM Mobility Conference 2009 (Sophia Antipolis,
manipulation in the user interface.
France, September 2-4, 2009), ACM Press.
Regarding the possibility of creating pointers to interactively [9] Myers, B. Demonstrational User Interfaces: A Step
created objects in the graphical user interface, our work has Beyond Direct Manipulation. IEEE Computer, 25, 8
been inspired by systems such as Smalltalk [2] and Self [11, (August 1992), 61-73.
14]. In the Self programming environment, for instance, there is
a "drilling" tool that allows the programmer to obtain a "core [10] Schneiderman, B. Direct Manipulation: A Step Beyond
sample": a visual summary of all those objects that are currently Programming Languages. IEEE Computer, 16, 8 (August
under the mouse cursor, starting from the topmost object to the 1983), 57-69.
bottommost graphical object. Similar capabilities are present [11] Smith, R.B., Maloney, J. and Ungar, D. The Self-4.0 User
also in the Squeak Smalltalk environment [5] and in the Sun Interface: Manifesting a System-Wide Vision of
Labs Lively Kernel JavaScript environment [13]. However, in Concreteness, Uniformity and Flexibility. In Proceedings
those systems there is no easy way to convert the obtained of OOPSLA'95 Conference (Austin, Texas, October 15-19,
information into pointers that could be manipulated at the 1995), ACM SIGPLAN Notices 30, 10 (October 1995),
source code level. 47-60.
[12] Sutherland, I.E. Sketchpad: A Man-Machine Graphical
6.CONCLUSION Communication System. Ph.D. Thesis, MIT, January 1963.
In this paper we have introduced two new keywords that and [13] Taivalsaari, A., Mikkonen, T., Ingalls, D. and Palacz, K.
those to facilitate interactive programming. The key idea
Web Browser as an Application Platform: The Lively
behind these new keywords is to make it easy to refer Kernel Experience. Sun Microsystems Laboratories
programmatically to those objects that are currently under Technical Report TR-2008-175, January 2008.
manipulation in the graphical user interface. While the
proposed new keywords are not intended for purely visual [14] Ungar, D. and Smith, R.B. Self: The Power of Simplicity.
programming, the new keywords can be very useful in web- In Proceedings of OOPSLA'87 Conference (Orlando,
based scripting and development environments in which these Florida, October 4-8, 1987), ACM SIGPLAN Notices 22,
is a need to manipulate complex, dynamically created objects 12 (December 1987), 227-241.
from an interactive source code or script evaluator.

4
Tampereen teknillinen yliopisto
PL 527
33101 Tampere

Tampere University of Technology

P.O.B. 527
FIN-33101 Tampere, Finland