Estimated time: 60 minutes.
Technically, a gadget is a user interface component of varying granularity. For example, a line or a figure in a drawing is a gadget, just as the drawing itself is a (composite) gadget. Later on, we shall introduce the term container gadget to express this. Each gadget knows a well-defined communication protocol that allows it to act as an independent functional unit with a life of its own, and it can be integrated into any environment that provides the communication protocol to it. Gadgets can flow along in text, they may be integrated into panels (somewhat equivalent to windows in other systems) or be used in a page layout system. As they are active objects, their editors are built-in, allowing them to be edited or used where they appear. Each gadget instance behaves in its own special way. However, all of them follow a set of guidelines that are already well-known to Oberon users. Most important, they respond to certain mouse clicks and to keyboard input.
A button can be pressed and released by clicking the middle mouse key on it. Try it now.
Alternatively, a button can be defined as a toggling button with two states. In that case the button must be clicked twice for cycling through the two states.
A check box is very similar to a toggling button but it has no caption and the two states are identified by the presence or the absence of a check mark. Try that with a middle mouse key click. Clicking on the check box causes the execution of an Oberon command, if so defined.
A slider is used to set a (hidden) numerical value depending on the relative position of the knob which is positioned by dragging on the middle mouse key.
The minimum and the maximum values are part of the slider's specification (also hidden).
When the slider is manipulated an Oberon command is executed, if so defined.
A list displays a set of strings in alphabetical order without duplicate, as is the case here. Alternatively, the list may be left unsorted in which case duplicate entries are allowed. The control and the behaviour of a list is not so simple anymore compared to that of a button or a check box.
Clicking the left key anywhere in the list focuses the list: a vertical line appears at the left margin. When focused, quick positioning in a longer sorted list is achieved by typing a few initial characters. The list is scrolled to the effect that the list item with matching initial characters is positioned on the first line. Hitting the return key clears the typed word.
Also when focused, a selected text may be copied into the list with a right and middle key interclick. In a sorted list, new items are inserted in alphabetical order and are unique. In an unsorted list, new items are inserted at the end of the list.
Clicking the right key on a list item selects it. Clicking again on the selected item deselects it. Dragging on the right key upward or downward extends the selection to several consecutive items. The list will automatically scroll forward or backward if need be. Clicking on a non-selected item starts a new selection. Scrolling may also be controlled with the scroll bar, if present.
Clicking the middle mouse key on a list item causes the execution of an Oberon command, if so defined.
A text field allows the editing of a single line of text. The focus point is set with a left key click. The text field enters then a local editing mode and full swung Oberon text editing capabilities are available. As soon as the cursor is removed (e.g. when pressing the Esc key) or the Return key is pressed, this local editing mode is left. This is made visible by the changing 3D aspect of the field.
Pressing the Return key causes the execution of an Oberon command, if so defined.
When the mouse focus is located in one or the other of these areas, the gadget responds to mouse events differently.
In the active area, the gadget normally adheres to the Oberon conventions or stays close to them; that is, if you already have a good practice of controlling text with the mouse, you will immediately recognize the similarities so that controlling gadgets will soon be a child's play.
Point key: set the caret, the insertion point for a new gadget. Placing the caret in a gadget is called focusing a gadget. There is only one focused gadget at any one time.
Execute key: a button is pressed, a check box is toggled (checked/unchecked), a slider moved, etc. If a Cmd attribute is defined, that command is executed.
Select key: select a gadget. A selected gadget is covered by a white semi-transparent pattern.
Try those three single key clicks to convince yourself:
Set the caret in the panel and execute the command
Special attention should be paid to the use of the right mouse key:
Finally, remember this:
neutralize the click or interclick.
select gadget(s) and delete the selection.
select gadget(s) and copy the selection over to caret.
set the caret and copy the selection to caret.
Practice with the gadgets in this panel:
The selection is often the target of Oberon commands and reacts to middle mouse clicks as explained below.
Some gadgets do not respond to all of these mouse key clicks.
on a side and dragging on the middle key moves the gadget (the mouse pointer changes into a grabbing hand). Movement is restricted to the current container and may be rejected when attempting to move the gadget completely out of its current container.
in a corner and dragging on the middle key resizes the gadget (the mouse pointer changes into a hand with a pointing index).
In both cases when the key is released, the new location or size is set.
Practice resizing and moving with the three gadgets in this colored panel:
You can easily verify the existence of the control area (or its absence) by slowly moving the mouse across a gadget whilst clicking the middle mouse key repeatedly. The control area is absent if the gadget cannot be resized or moved as described.
Movement to another container can only be done with an explicit left or right key interclick as described below.
left key: the gadget is moved to a new container at the mouse focus or when it remains in the current container, it is brought to the front of overlapping gadgets.
right key: a copy of the gadget is inserted at the mouse focus (in the same or in a different container).
Practice with the three gadgets in this colored panel:
Moving a gadget from one container to another is called a consume operation. The new container consumes the gadget and the gadget is removed from its old location. Not only is this used to move an object from one panel to another, but also to provide a general drag-and-drop facility. The consumer (called the receiver or recipient) may interpret the drop event in different ways: it may either absorb the consumee (which is called the sender or initiator) as a descendant (like most containers do), or it may initiate some other event. For example, a trash can may delete the file gadgets that it consumes, or a compiler may compile source texts. Some (receiver) gadgets may execute a user-defined command on a consume event. The Icon gadget is such a receiver.
There exists an alternative way to move or to copy the selection: press the middle mouse key on any selected gadget and drag the selection to a new location. If more than one gadget was selected, a rectangle spanning all the gadgets appears. An interclick with the left or the right mouse key has the same meaning as for a drag-and-drop operation.
A locked container such as an iconizer, a note book or a panel cannot be resized. It can be moved with the middle mouse key when the mouse focus is positioned anywhere in the control area and it can be selected with a right move click anywhere in the gadget.
Most application interfaces are supplied locked, but they can be unlocked at any time to be customized to the user's requirements or personal taste.
To visualize the value stored in a model gadget the help of a visual gadget like the ones presented above is required. This is the well-known Smalltalk Model-Viewer-Controller framework ( MVC). The model gadget contains the data vizualised by a visual gadget.
In practice, several visual gadgets can show the value of the same model gadget - an example in given below. Each view ensures that it remains consistent with the model it represents. We also say that the visual gadget is linked to a specific model gadget.
The idea behind a model gadget is that it can easily be manipulated by an Oberon program. In return, the visualization of the model is updated accordingly without the application program knowing that or how many such linked visual gadgets exist. This allows application programmers to insulate code against changes made to a user interface.
You should however clearly understand that many visual gadgets (those described earlier are only a small subset of them) are programmed in such a way that they can also function without being linked to a model gadget.
Select a channel
Here are three radio buttons. Like the buttons on a radio or TV tuner, clicking on a radio button selects only one of several (here 3) mutually exclusive options. When an option is selected its associated LED is lit.
This effect is obtained by linking the set of radio buttons to a single integer gadget. Each button is given the specification of an integer value, and when the model gadget has that value, that button appears pressed.
Select a color
Here is another form of radio buttons using check boxes. In this mode, the check mark is replaced by a rectangular mark.
Here also, this effect is obtained by linking the set of check boxes to a single integer gadget. Each check box is given the specification of an integer value, and when the model gadget has that value, that box is checked.
Changing the position of the slider cause the integer gadget to be updated accordingly, which in turn causes the text field to be informed that the value of its model has changed. No programming is required to obtain this effect. It suffices to specify the gadgets and their linking.
Now, look at this similar example in which the integer gadget's value is manipulated by a (very simple!) program capable of only just incrementing and decrementing that value by 1. You can observe that by clicking on either blue triangle.
A panel also support operations on groups of descendant gadgets and operations providing for an optimal layout and alignment of its descendants. A snapping grid allows easy positioning of descendants. These can be aligned to the same baseline, height, size, or width, or organized vertically and horizontally. Operations on panels can be activated from the tools in the
The descendants are organized in priority and may overlap each other. A descendant generally keeps its current priority after being moved. Oberon commands put a gadget behind or in front of other gadgets. Newly inserted gadgets are always placed in front. The simplest way to bring a gadget to the front is to pick it up and consuming it again (Middle + left mouse key interclick).
Here is what is handled differently.
When the panel is not locked:
Execute key: recognized by a descendant gadget when the mouse focus is positioned on it and without effect elsewhere in the active area.
Select key: recognized only when the mouse focus is positioned in the control area.
When the panel is locked:
Execute key: recognized by a descendant gadget when the mouse focus is positioned on it and without effect elsewhere in the active area.
Select key: may be clicked anywhere to select it.
A locked panel cannot be resized, and it can be moved with the middle mouse key when the mouse focus is positioned anywhere in the control area.
Documents can be opened and displayed in the well-known, familiar Oberon viewer system. In addition, documents can be inserted (i.e. opened) in what we call a 'desktop' as will be explained in the next chapter.
A document usually presents itself with a menu bar containing often used commands related to that document, e.g. 'Close', 'Search', 'Store', etc., and a name plate
. This appearance is familiar to Oberon users. Alternatively, a document can be inserted on the desktop without a menu bar.
The document type is determined by what is called the
document New procedure when a new document is opened (see below) which is also recorded in the file when the document is stored. This information is used again when the document is opened. Here is a correspondance table 'Document New Procedure' to 'Document type':
TextDocs.NewDoc Text document PanelDocs.NewDoc Panel document
Try this
.Text Text document .Panel Panel document .Pict Picture document anything else Text document
Example of application: this command is frequently used in the tool documents supplied with the system, such as Desktops.Tool, Programming.Tool, etc. The command is used there in the hypertext links such as [ Desktop ], [ Applications ], etc.
When a desktop is stored, only the layout of the work surface is recorded: the documents on the desktop are not stored, these have to be stored explicitely by the user. Later on the same desktop can be reloaded and recreated from the recorded information.
In this way a user can create many different work environments that are suited to the task at hand and to the display resolution available. Similarly, several users may share the same computer and open their personalised desktop. Like any other file, a desktop can be ported to other computers.
If the middle mouse key is interclicked while dragging, the desktop may be placed anywhere on the display. In particular, it may be relocated across track boundaries. That may of course only be the case in a hybrid (Oberon - Gadgets) display layout.
Try this
You have just realised that the display surface may contain more than one desktop at a time: a desktop is also a (container) gadget. In such a layout, gadgets and documents may be moved or copied across desktops.
Original picture Scaled view #1 Scaled view #2
Behind the scene the situation is comparable to what you have experienced with the model with two views but here the model is a visual gadget (a picture).
Pressing the middle key when the mouse focus is positioned inside one of these views causes a spanning rectangle to appear showing the real dimension of the object being viewed. Dragging on that key in any direction causes the rectangle to move. When the key is released, the new view is drawn. The picture used here is named "Default.Pict" and is included in this Oberon System 3.
A view is also a gadget and views may be nested. A view may be empty, that is displays nothing. Dropping a gadget inside an empty view makes the view display the consumee.
The last example on the right shows a camera view of a panel with a button. The viewpoint can be changed by picking the panel by its border and dragging it a new location.
Learn how to manipulate gadgets from within Oberon programs in Using Gadgets from within Oberon.
If you had liked to develop your own gadgets learn all about it in Programming new Gadgets.