Uniface GUI Sample: HTML Widget and JavaScript

Uniface 9.6.01
Sample Version: 1.0
December 2012


Description

This sample demonstrates how to create interaction between an HTML widget and Proc code. It shows how to call:

The sample consists of a form with an HTML widget and a Uniface button.

Click the left light bulb to turn the lights on or off using JavaScript.
Click the right light bulb to turn the lights on or off using Proc code.
The call that was executed is displayed below the light bulbs.

Files

This sample consists of the following files:

File name

Description

u96_htmljs_readme.htm


u96_htmljs.xml

Uniface export file containing:

Object

Name

Description

Forms U96_HTMLJS The form for this sample

u96_htmljs_screen.png
u96_htmljs_off.gif
u96_htmljs_on.gif

Pictures that are used in the sample.


Knowledge Prerequisites

To use this sample, knowledge of the following topics is assumed:

Uniface Subject

Knowledge Level

Uniface development

Basic

Uniface Proc code

Basic

JavaScript
Basic


Steps

  1. Add the following line as the first line in the [FILES] section of your IDF assignment file.
    u96*.*     .\samples\u96*.*
  2. Create a subfolder samples in your projects folder.
  3. Unzip u96_htmljs.zip and place all files in your samples folder.
  4. Import the Uniface sources.
    /imp u96_htmljs.xml
  5. Compile the Uniface sources.
    /all u96_htmljs*
  6. Run the sample from outside the Uniface Development Environment
    /tst u96_htmljs
  7. Examine the forms in the Component Editor.
    Look at the Extended Triggers of field HTML.DUMMY.
    Look at the Detail trigger of field BULB.DUMMY

Calling Uniface from JavaScript

The left light bulb is implemented in an HTLM widget. The HTML code for the widget is in blockdata in the Execute trigger of the form. This HTML contains some JavaScript.

When the user clicks the light bulb, the onclick event fires and the JavaScript function ChangeImage() is executed.
This function changes the image and then calls a Uniface extended trigger ('Bulb') with parameter 'On':
window.unifaceTriggers('Bulb','On');

The extended trigger Bulb belongs to the current HTML widget (HTML.DUMMY). It changes the image on the Uniface button.

Calling JavaScript from Uniface

The right light bulb is implemented as a Uniface button, with the light bulb image defined in the Default Image property.

When the user clicks the light bulb, the Detail trigger fires.
It changes the image on the button by altering the field properties, and starts a JavaScript function in the HTML widget:
$fieldhandle(HTML.DUMMY)->$widgetoperation("JS:ImageOn")

This line calls the JavaScript function ImageOn in the HTML widget, which changes the image.

More Information