Omnis Technical Note TNJC0008Jan 2014

JavaScript Components: Trans Button

for Omnis Studio 6.0.1 or above

The Trans button is a new JavaScript control available in Omnis Studio 6.0.1 onwards that can display a different icon and/or background color when the end user's mouse hovers over the control, or when the button is tapped on touch devices. The equivalent using a standard JavaScript object would be a rollover button. In all other respects the Trans button is like a standard Omnis push button control, insofar as it generates a single evClick event when the button is clicked which can be used to initiate an action in your code. Note the evClick event must be enabled in the $events property for the control for it to be reported.

The Trans button has several properties prefixed “$hot” that relate to the appearance of the button for the hover action (mouse over or tap on touch devices). You can specify two icons for the Trans button: one to represent the “off” state which is specified in $iconid, and the other to represent the “over” state which is specified in $hoticonid: if no $hoticonid is specified the icon specified in $iconid is used. You can also specify a different background color for the hover action in $hotbackcolor, and an alternative border color in $hotbordercolor (you can set the border width in $borderwidth). Therefore using all or some of these “hot” actions you can create a more interactive type of button to use in your web and mobile apps.

Example Trans buttons

The example library contains a simple remote form and a set of trans buttons. Each button has a different icon as well as background and hot back color for the off and over or “hot” state. The icons are contained in an icon set and are referenced using their icon ids specified in the image file name: each icon is provided at standard and high resolution for HD displays. See the tech note TNJC0007 for more information about using HD icons and icon sets.

icons folder

To set up this library, download the file, unzip the contents, place the ‘trans’ folder containing the icons into the ‘html/icons’ folder of your Omnis Studio development tree, and open the trans.lbs library. The remote form in the library should open in your web browser when you open the library. Otherwise to test the remote form, open the library and right click on the ‘rform’ remote form and select Test Form, or open the ‘rform’ remote form in design mode and press Ctrl-T. In this example, each button loads a small block of HTML text into an HTML field on the form. Back in design mode in Omnis Studio, open the remote form, click on one of the trans buttons and examine its properties in the Property Manager (select the button and press F6): the $iconid and other properties are on the Appearance tab.

icons folder

You will notice that each trans button has a different icon and background color for the off and over states. The icon for the off state is specified in $iconid and has an ID of 55545, and the icon for the over or “hot” state is specified in $hoticonid and has an ID of 55546. The icons used in the example are white graphics with transparent background stored as PNGs in the icon set (note the $iconset preference of the library is set to 'trans'). The image file for the off state has its transparency set to 50% to provide a faint appearance and the corresponding icon for the over state has full opacity which provides the rollover effect. The color specified in the $hotbackcolor property is slightly darker than the color in $backcolor to emphasize the over state. By default, the system focus is shown as a colored ring around a button when it is clicked, but if you want to hide this effect you can set the $disablesystemfocus to kTrue: all the buttons in the example have this property set to kTrue to hide the focus ring.

Testing the library on a mobile device

To test the form on a mobile device, you need to keep the library open and enter the following URL in the browser on your device: http://<your-ip-address>:<omnis-port-number>/jschtml/rform.htm. To find the port number of your Omnis Studio, test the remote using Ctrl/Cmnd-T and the port number will be displayed in the browser on your development computer, such as: enter this URL on your mobile device substituting the ip-address of your local host with the real ip-address of your development computer running Omnis (you can use the ipconfig command to find the IP address of your development computer, via the Command prompt on a PC or the Terminal on a Mac). For the app to work your Omnis library must be open and your mobile device must be on the same local network as your development computer running the library.