Genie Button

Buttons can initiate function keys, bring pop-up dialogs, or execute code.

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.

Open

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 or by double-clicking the button.

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.  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”.

Open

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.  The file can be found in your Skin directory on the IFS (e.g. /www/profoundui/htdocs/profoundui/userdata/genie skins/MYSKIN)

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 session will disconnect.

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 dragging it to the screen from the Widget Toolbox.