In this section you will be guided step by step through the process of creating a presentation. The basics of modifying properties and scripting will come up during these steps. This is done using one of the sample presentations; in the examples directory you will find this example in tutorial.gui.
In the presentation builder window you have to choose File - New Presentation to create a new presentation. A new presentation window will pop up. Next thing to do is adding some widgets. Let's try to make the user interface below:
the
tutorial presentation
When the button is pressed, the textBox at the bottom will be made editable or not editable.
Let's first add the container in which the toggle button resides: choose New - Container - GroupBox, you will see the GroupBox at the topleft corner of the presentation. Right now it is selected, because eight dots are drawn around it.
a
selected widget
When a widget is selected you can drag it to a different location. But more important: you can edit the properties of the selected widget in the presentation builder window. The screenshot below shows the properties for the GroupBox.
Besides the default properties for every widget, additional properties have been defined for every widget. In this case these are align, label and labelfont. Set the value of label to "ButtonGroup" in order to display that name at the top of the group. Don't forget to hit apply in order to apply the setting!
Now we want to put the button in this container. Hold down the Control button and click in the group: you can see that a dashed line appears around it: this line displays which container is currently being edited.
Now choose New - Button - CommandButton to insert a commandButton in the group. Set the label of this button to "Toggle textBox" and hit apply or press return.
Now control click somewhere in the presentation to start editing that container again: the dashed line will be drawn around the presentation again. Last thing to do is add the textBox here. Choose New - Text -TextBox to do that and set the 'text' property to "Marimba" and hit apply or press enter to apply this setting.
Now we would like to test the user interface. To enable this Marimba Bongo has two modes:
To switch to the edit mode choose File - Edit, to switch to the browse mode choose File - Browse.
Now you have created a user interface which does nothing yet. You already
know how to add widgets to a presentation and how to modify their properties.
Now we have to let the button toggle the 'editable' property of textBox.
If you set this property of the textBox to false, the textBox cannot be
edited anymore. If you also set 'disabled' to true, the textBox draws its
border different, this is what the button also has to toggle.
In order to do this we have to do some scripting. A script creates
a subclass of the widget. That means that you can override methods from
the widget in the script. When a widget performs its default action, the
method action() is called. In order to change the behavior of the toggle
button we have to override this method. Below you can see the script of
the toggle button:
public void action() { TextBoxWidget textBox; textBox = (TextBoxWidget) getWidget("textBox"); textBox.setEditable(!textBox.isEditable()); textBox.disable(!textBox.isDisabled()); }
As you can see the action() method has been overridden. Any widget can
get another widget by using the getWidget method, which takes the
name of the widget as an argument. In this case the toggle button assumes
the textbox has the name "textBox". Be sure that the textBox
has this name; it is the first property you see in the properties window.
The getWidget method returns Widget, so you will always have
to do a cast to the correct class. In this case it is a TextBoxWidget of
course. After this all there is left to do is set the editable and disabled
property to the correct value. In this case it sets it to the opposite
of the current value. After that the action method is done.
The getWidget method also accepts hierarchical names: this means
that you can get a widget in a sub-container. If you wanted to get the
toggle button from the textBox script you would have to do something like
this:
CommandButtonWidget toggle; toggle = (CommandButtonWidget) getWidget("buttonGroup.toggle");
assuming that the group is named "buttonGroup" and the button "toggle". If you don't specify an hierarchical name, it is assumed that the widget is in the same container or one of its childs.
Now you also know the basics of scripting. If you have some basic programming
experience, scripting is an easy way of performing small actions and changing
the behavior of widgets.