[MUSIC PLAYING]
You're about to see a Lapidary demonstration.
Lapidary allows the designer to pictorially specify
all graphical aspects of an application,
including the widgets that the application uses,
as well as the application graphics themselves.
Designers can also interactively specify
any application behavior.
No other interface builder allows the designer
to specify the insides of application windows.
Lapidary is part of the Garnet project at Carnegie Mellon
University.
Garnet is a comprehensive user interface development
environment that makes it significantly easier
to create highly interactive graphical user interfaces.
Lapidary is an acronym, and stands for lisp based assistant
for prototyping interface designs allowing
remarkable yield.
In this demo, I'm going to change the look
and feel of the menu, and then create several application
specific graphics, such as boxes and arrows.
Lapidary runs under Common Lisp index,
and takes advantage of multiple windows
to present different kinds of information.
Our first task is to change the look and feel of this menu
to the look and feel of this floating button menu.
First, we will remove the old feedback objects.
The menus look and feel can be changed by modifying the menu
items prototype.
Lapidary uses a prototype instance model,
in which instances inherit both data and structural components.
This form of structural inheritance
is novel among interface development tools.
Thus, when I add the rectangle I've created to the labels
aggregate, each of the menu items
automatically inherits this new component.
The menu strings can be centered within the buttons using
constraints.
The constraint expresses a geometric relationship
between two objects, such as centering.
Constraints are automatically inherited
by instances of a prototype.
The button should appear to float above the display,
so I will add a shadow to the prototype button.
Lapidary provides iconic menus that define the most commonly
used constraints.
The icons with black boxes correspond
to the object with black selection
handles, and represent the object to be constrained.
The white boxes around the white rectangle correspond
to the object with white selection
handles, and represent the object
that the constraint references.
Notice that Lapidary's explicit use of constraints
differs from the Peridot model, in which
the appropriate constraints are inferred
from the relative positions of objects.
At this point, I'm ready to demonstrate
the button's behavior.
In Garnet, the behaviors are specified separately
from the graphics using special interactor objects,
which Lapidary creates in dialog boxes.
The designer can set parameters, like which mouse button starts
the behavior, and the application function
called when the behavior completes.
Here, we are going to demonstrate
the interim feedback by demonstration.
The interim feedback describes what
happens as the mouse is moving, and final feedback
shows what happens when the mouse stops.
Lapidary creates a copy of the selected object
and places it in a demonstration window.
I will first edit the copy so that the white rectangle covers
the black rectangle.
Lapidary will then compare it the original and the copy,
figure out differences, and generate code
to implement the changes based on the position of the mouse.
The final feedback should be a black x or rectangle that
highlights the selected button.
Notice that, like the other examples in the demo,
this example uses the iconic constraint buttons.
In practice, the constraints represented by these buttons
are almost always the ones designers need to use.
However, if designers need a different constraint,
they can choose the custom constraint button,
which will give them access to a spreadsheet for specifying
constraints.
The final feedback option causes Lapidary
to generalize these constraints so that the feedback can appear
over any button in the menu.
Constraints are generalized by replacing direct references
to objects with indirect references through variables.
By changing the values of these variables,
an object can be constrained to different objects.
The menu can now be added to an application.
As demonstrated, the buttons bounce up and down,
and the black rectangle inverts the selection.
Of course, a designer is not restricted to creating objects
from scratch.
Designers can create instances of predefined gadgets
from prototype libraries, place them
in Lapidary strong windows, and modify either the graphics
or behaviors as they see fit.
In this example, a two dimensional scrolling window
will be constructed from Garnet style widgets.
The horizontal scroll bar is not wide enough to fit the window,
so it is appropriately resized.
Similarly, I can create instances of other prototype
widgets, and customize them as well.
Although it is not shown, the designer can modify the look
and feel of these instances.
Thus, the designer could add additional decorations
such as a background, physically alter the instance
by adding or deleting components,
or change the widgets behavior by using
the appropriate interactor dialog boxes.
While other interface builders also allow designers to choose
widgets from a prototype library,
they typically provide only one look and feel which cannot be
modified by a designer.
Although this promotes uniform interfaces,
it discourages experienced graphics artists
from prototyping new looks and feels.
One reason Lapidary is such a powerful tool
is that it allows designers to experiment with different looks
and feels, but a more important reason
is that designers can create the graphics inside the application
window, which I will do next.
I would like to create the data and narrow objects
for an arithmetic editor.
The data object is created by sweeping out
a rounded rectangle and entering a sample number.
This number's readability can be significantly improved
by enlarging its font, which is done using the text properties
window.
The text properties window also allows the designer
to make the value of a string depend on a constraint, which
is useful for relating an indicator on a gauge
to a property of an application object.
The rounded rectangle should be centered around the number
and be just large enough to contain the number.
The use of constraints ensures that the rounded rectangle
will expand and shrink as the number expands and shrinks.
The label and the rounded rectangle
are next grouped together in an aggregate,
which is named data object.
Finally, the prototypical data object is saved to a file
so that the arithmetic editor can load it and create
instances of it.
A prototypical operator object could be
created in a similar fashion.
Now I will create a second data object
so that I can create an arrow and demonstrate the arrow's
behavior.
When I rotate the arrow, the arrow in the constraint menu
rotates as well.
This makes it easy to determine which endpoint of the arrow I
am constraining.
In this case, the arrows left endpoint
is attached to the right side of an object,
and its right endpoint is attached
to the left side of an object.
These constraints are dynamic constraints,
since the arrow will stay attached to the data
objects if the data objects are moved.
As I've saved the arrow, Lapidary
notices that the arrow's constrains reference objects
that are not being saved.
Lapidary infers that these constraints
should be generalized so they can reference any object.
And with my permission, it replaces direct references
with indirect references.
This portion of the arithmetic editor specification
is complete.
Next, we would use Lapidary to create
the other objects and the interactor
for entering numbers.
Then a programmer writes the application functions
for doing arithmetic, and the application
is ready for testing.
The application uses instances of the prototypes Lapidary
just created.
Notice that the rounded rectangles expand
as numbers are input, and that they stay
centered around the numbers as specified in Lapidary.
The user can move both operators and data around,
and the arrows will stay attached to these objects
as dictated by Lapidary.
Lapidary can be used to generate many other types of objects
and behaviors as well.
We can support single or multiple selection,
where multiple selections automatically
duplicate the feedback object.
A designer can specify that these menu items change font
by demonstration.
The feedback for selecting application objects,
such as these Macintosh style selection handles,
can be created.
Box and arrow editors can be easily specified
using Lapidary.
Behaviors, such as the inputting of text strings
or the repositioning and resizing of boxes,
can be specified just as easily as the graphics.
Lapidary defined constraints force
the arrows to stay centered within the labeled boxes,
even as these boxes move or change size.
Finally, Lapidary can construct a more complicated application
objects, such as this truck.
The mileage indicator is constrained
to the truck's x-coordinate, and the truck's weight indicator
depends on the slider.
As the slider goes above 75% of the truck's weight capacity,
the truck's color turns to black.
Lapidary allows the behavior of each of these graphics
to be specified by demonstration.
Even inexperienced computer users
can rapidly generate highly interactive graphical
interfaces.
As Lapidary takes a significant step
forward in the evolution of user interface development tools.
Thank you.