Buttons can initiate function keys, bring pop-up dialogs, or execute code (client-side or server-side).
Creating a New Button
A new Button can be created by turning Design mode ON and selecting button from the list of widgets on the left hand side.
A new button will be created with the default text “Click Here”
The text (value) of the button could be changed using the Properties Panel.
Changing the Text on a Button
In the value field property, add the text “Exit”. Your changes should appear instantly.
Changing the Font Color on a Button
You can also change the color of the text displayed on the button. In the color property, select the color you like from the color picker that appears and see your changes take effect instantly.
Changing a Button to a Graphic Button
The Button element can be changed to a Graphic Button in which the combination of icons and/or text can be placed within the button.
Select the button and then choose graphic button from the field type property in the Properties Panel.
Now you are ready to add an icon/image to the button.
You can select one of the icons provided with your default Genie installation. The example in this figure selects a cancel image to the Exit button as shown below.
In addition to the icons that come with your default Genie Installation, you can select a different icon provided that you type in the proper path of the image or icon to use.
To select a different image source, select “Other…” in the “image source” dropdown list of the Properties Panel, and type in the source of the image to display on the button. The source of the image should be a valid relative or absolute http path to the image. The image could be stored on the IBM i IFS or on another system.
Handling Click Events
All of the browser’s native events are supported in Genie and can be accessed through the Properties Panel by selecting the element and finding the Events tree. The onclick event is a native JavaScript event that fires when an object is clicked.
You can initiate a client-side script once the button is clicked to do something interesting around the interface. For instance, you may need an alert box to pop-up when a user clicks on the “Exit” button saying “Good Bye”.
In this case, the alert function is an event handler that fires once the button is clicked. Thus, when you click on the “Exit” button, you should see this pop-up window:
Moreover, you may want to have a confirmation pop-up box when the user clicks the “Exit” button. You may want to display a message like “Are you sure you want to Exit?”
In this case, a little bit of JavaScript code can do the trick. Inside custom.js, past the end of any other existing code, insert a small function (confirmLogOut()) as shown below. Then save the file.
Refer to the Getting Started sections for more information on custom.js.
In the onclick property, type in the name of the custom function.
Here, we are calling confirmLogOut() once the “Exit” button is clicked. As shown in the code, if the user clicks OK (result = = true), a function key is initiated to quit the application. Otherwise, the pop-up window is closed and no action is taken.
Note: ‘Quit’ is a special value passed to the pressKey() api to disconnect the user from the session. Similarly, a keyboard function key, such as ‘F3’ can be used.
This is the confirmation box that should appear when the user clicks on the “Exit” button.
Graphic Buttons
Graphic buttons act just like regular buttons, but allow the combination of icons and/or text to be placed within the button. All the regular Button’s properties are also available for the Graphic Button in addition to adding an image or icon to display on the button.
Creating a New Graphic Button
A new Graphic Button can be created by clicking the Add Element button on the Design Toolbar and selecting Graphic Button from the list. Make sure Design Mode is On in order to add the Graphic Button.
