Gizmos

From IShell Wiki

This article is about the following Gizmos: Area, Button, Check Button, Editable Field, Separators, Sliders, Label, and Tab Button. Gizmos Menus are covered in a separate article.

Gizmos are special elements in iShell designed to mimic operating system GUI elements. Unlike other elements in iShell, Gizmos have basic functionality already built into them; in other words, Gizmos work they way you expect them to work.

iShell draws Gizmos elements using a design template, included in the Burn Resources folder. The template can also be downloaded here. The template can be edited for custom projects using any graphic editor.

To use any of the Gizmos, simply create a Gizmos element in the document outline. The type of Gizmo will be determined by the Kind Attribute.

Attributes

• State
• Position
• Size
• Duration

Types of Gizmos

Area

The Area is simply a shaded rectangle which contains other Gizmos or other elements. The Area funtions like a Box, but includes a border.

The three available Area designs are Box, Tag, and Window.

Button

Just like standard OS buttons, Gizmos Buttons will have separare designs for Mouse Enter and Mouse Down states. These are preprogrammed and do not need to be built in iShell.

Image:Gizmosbutton test.png

In the example above, note that the Former relationship has been used to line up the buttons easily.

Attributes

• Button: This simply refers to the text that will appear to the right of the button. This attribute can be used and modified with the Get Attribute and Set Attribute commands, just like any other attribute.

Events

• Changing
  • Event is sent on Mouse Down.
• Changed
  • Event is sent on Mouse Click.

Radio Buttons and Check Buttons

Radio Buttons and Check Buttons can both be used as menu items. The difference between the two is that, in a series of radio buttons, only one button can be selected at a time. The only way to deselect a radio button is to select a different radio button in the series. A user can select as many or as few check buttons as she likes.

In order to be considered a series, these buttons must appear sequentially in the Outline, as shown below. Note that the Former relationship has been used to line up the buttons easily.

Attributes

• Button: This simply refers to the text that will appear to the right of the button. This attribute can be used and modified with the Get Attribute and Set Attribute commands, just like any other attribute.
• Check: True or false, refers to whether a button is selected.

Events

• Changing
  • The Changing event is sent on Mouse Down on the button holding the event.
• Changed
  • For Check Buttons, the Changed event is sent on Mouse Up on the button carrying the event.
  • For Radio Buttons, the Changed event is sent on Mouse Up on the button carrying the event, or when the button carrying the event is being deselected.

Tab Buttons

Tab buttons are special elements that work like the tabs in web browsers and many other applications. Any elements connected to a tab button will be shown when the tab button is clicked and hidden when another tab button in the same set is clicked.

Just like radio buttons and check buttons, tab buttons must be listed sequentially in the outline in order for iShell to recognize them as a set. See the example below:

In this example, each tab button contains one Field element. When a tab is clicked, the corresponding text is displayed. There are several things to note here:

• The cosmetic rectangle around the text is an Area Gizmo, completely independent of the Tab Buttons. Although it would be possible to draw a separate Area for each tab, this would put unnecessary strain on the Runtime and is therefore not recommended. Use a transparent Box for organizing tab contents instead.
• If you want one of the tabs to be visible when the document is loaded, use the Checked attribute. If more than one tab is checked, the last one in the outline will be given priority. If no tabs are checked, no content will be visible.
• The Tabs should be marked as Shown. The Tab contents should not be marked as Shown unless their tab is to be active when the page is loaded.
• The Former relationship is the best way to line up the tabs easily.

Attributes

• Button: The text on the tab button. Can be accessed or altered using the Get Attribute and Set Attribute commands, just like any other attribute.
• Check: A true/false value, refers to whether the tab is selected. Can be accessed or altered using the Get Attribute and Set Attribute commands, just like any other attribute.

Events

• Changing: Event is sent on every Mouse Down on the tab button, whether the button is currently selected or not.
• Changed: Event is sent on Mouse Up, when the button's status changed from deselected to selected, or from selected to deselected.

Editable Field

The Editable Field is very similar to the Field Element (with cosmetic differences), but there are a few important differences.

First, the Kind attribute allows you to choose how the text will be justified, Left or Right.

Second, the Field Attribute allows you to limit what characters the user can input. Choices are Letters & Numbers, Letters, Integer, Real (any real number), Custom, and All.

The Custom option allows you to indicate which characters will be allowed. In the example below, A, B, C, 1, 2, and 3 are allowed. Note that capital and lowercase letters must be included separately.

Note: The Custom option is not available in iShell 4.5r4; it will be fixed in the next version.

Events

• Changing
  • Event is sent every time a character is inputed.
• Changed
  • Event is sent when the Enter key is pressed.

Horizontal Separator and Vertical Separator

The horizontal and vertical separators are simple cosmetic elements. They have no special functionality.

Horizontal Slider and Vertical Slider

The three vertical slider designs are Left, Right, and Block. The three horizontal slider options are block, up, and down.

The Slider Gizmos are great for any user input more complicated than a simple list of a few choices. For example, a slider could be used to gradually change the size or color of an element onscreen, or to ask a user how much she agrees with a given statement.

Attributes

Kind

As shown at right, there are three different designs available for vertical and horizontal sliders.

Slider Values

Enter the minimum and maximum desired variables for "From" and "To." "Value" indicated the default value for the attribute, as well as the default position for the slider.

In the example below, the Get Attribute and Tell Field commands have been used in conjunction, to display the Slider value in a Field.

Events

• Changing
  • Event is sent every time the slider is dragged.
• Changed
  • Event is sent every on Mouse Up.

Label

Note: This section refers to Gizmos labels. In iShell, Labels can also refer to a type of Field element.

The label is simply a short message on a yellow background. In the example below, it has been programmed to display whenever the mouse enters a certain area of the screen.

Events

• Changing
  • Event is sent on Mouse Down.
• Changed
  • Event is sent every on Mouse Up.