Introduction | Your first interface | Building a model | Advanced features | Resources

4.2 Buttons

This section looks at the different types of button available in the Interface Builder and gives examples of how to use them. The model and interfaces used in this section can be downloaded here: trainingButton.zip.

There are four different types of button you can add to a JeLSIM simulation (interface in brackets):

  • Boolean - (trainingButtonBoolean.jsm)
  • Link - (trainingButtonLink.jsm)
  • Action - (trainingButtonAction.jsm)
  • Popup - (trainingButtonPopup.jsm)

Boolean Button

A boolean button can be used to change or display the state of a boolean model variable. In the example below, there are two buttons based upon the same variable. The light switch is one button - when you click on it the variable changes. The bulb is another, although this will only display a different image based upon the variable value and cannot change the variable.

The displayOnly property of a boolean button can be set to true or false - if true, the associated boolean variable will change when the button is clicked, if false, the button will change the image it displays when the variable value changes but not respond to a click.

Different colours and text or images can be associated with boolean buttons depending on whether the associated variable is true or false. The imagePath, trueColor and trueTitle can be used to set the image, text and colour when the variable is true, and falseImagePath, falseColor and falseTitle when it's false. (Note: if an image is used, neither the colour nor text will be shown.)

Link Button

A link button will open a web page. In the example below one button opens a page in this window, one in another window.

The dataPath property is where you tell a link button which html file to link to. This must include the relative path of the html file from the place where the applet will be deployed. So, for example, if your final applet is going to reside in a folder called myApplets and you want to link to myfile.html in a resources folder below that, then the dataPath would be set to resources/myfile.html. You can only use link buttons to link to html files, and since they must be relative to your final applet destination, link buttons will not work in the Interface Builder.

The retargetBrowser property must be set to true to enable a new web page to be displayed. The useNewWindow property allows you to set whether you want the new page to open in the same or another window - if it's set to true and your applet is being displayed in a frameset, the targetFrame allows you to specify the frame in which to open the new page.

Link buttons (like action buttons and popup buttons) have a triggerConditions property that allows you to set a trigger condition to emulate a button press. i.e. when the condition is met, the link specified by the link button is triggered.

Like all buttons, the link button can also display an image using the imagePath property to display the Image Chooser dialog. .gif and .jpg images can be displayed on a button. Setting the borderWidth property to 0 will make the button look flat.

Action Button

An action button is used to perform any method that is registered as an action method within a model. In the example below, the Increase action will increment the displayed number, and the Decrease action will decrement it. There is a third action button, hidden on an overlay (for more information on overlays see Triggers and overlays) that cannot be directly accessed by the user. It has a trigger condition associated with it that will emulate a button press when the condition is met. In this case if the number is less than -10 or greater than 10, the reset button will be triggered.

The actionNumber property is used to select the particular model action to be associated with the button.

Popup Button

A popup button is used to display an additional popup window, as the example below shows.

When you add a popup button to your interface and double-click on it, as well as the property sheet, you will see the new popup window. You can now add objects to this window in the normal way. The popupTitle and popupBackground properties allow you to set the title and background colour of the popup, showCloseButton and showHelp allow you to select whether you want a button to close the window and/or an information panel to be displayed in the popup window. Trigger conditions can also be associated with popup buttons using the triggerCondition property.