Thread by @conways_law

HIW02

Wiring diagrams: components, wires, connectors, projectors.

Here we’re going to show the “Hello, World!” of wiring.

1/13

Here’s our starting point: a screenshot of the wiring tool prototype (including the user interface of the application being built) in the lower part, with annotation above and all around.

2/13

The three components on the right are “projector” components. A projector is a component that renders its input on a part of the application’s user interface.

3/13

The Window Projector component renders the window frame and provides a software environment in which its input projectors can render their parts. This particular window projector provides for the title bar, the menu bar, and stacking up six inputs vertically.

4/13

(If you notice that this looks strange, know that the wiring tool was built in Smalltalk for Windows 3.1 in 1992-1995. This Smalltalk stopped being supported in 1996 and is now being run in Windows XP in a Parallels Desktop virtual machine on a Mac.)

5/13

(Those quotes in the EditLine projection are a bug I’m working on.)

Let’s cover some of the details. You don’t see the whole wiring tool, so you don’t see how “Hello, World!” was entered into the Text Source component as a Parameter. You’ll see this later in a video.

6/13

Parameters are objects that persist within individual components. Here are some parameters in this app’s components.
TextSource: the text string
Window: opening rectangle
Button: Text on projection, rectangle (default: 68x25)
EditLine: rectangle (default: enclosing widthx24)
7/13

The EditLine projector allows editing of the text it projects. The change is confirmed when the Button is clicked. There are several questions to be answered around this:

8/13

1. How does change made in the projection alter the underlying data source?
2. What is the connection between the EditLine and the Button?
3. How do Buttons (and projectors in general that can take user events) work?

9/13

As a preview I’m going to show the result when the projection of the EditLine projector (i.e., the text line in the window) is edited to read “Hello, Dolly!” and the Button is clicked.

10/13

Note that the projection of the parameter of the TextSource component has changed. This is because there is only one copy of that string in the whole system. Recall from HIW01 the DOer-SHOWer picture of this system, shown here. The string is in the Unitary App.

11/13

Here is the DOer-SHOWer picture showing the respective responsibilities of the three parts. One copy of the string value, held by the DOer, is projected by the TextSource component in the tool and by two projectors in the app, once by the Window and once by the EditLine.

12/13

Next I intend to create a video showing the building of this app. This could take a while. Your welcome questions will help me improve everything to come.

13/13