Uniface Sample: HTML Widget

Uniface 9.6.01
Sample Version: 1.0
December 2012

Demonstrated Functionality
Files
Knowledge Prerequisites
Environment Dependencies
Steps
The HTML Widget with Readme page
The HTML Widget with dynamic Google Map
The HTML Widget with static Google Map
More Information



Demonstrated Functionality

This sample demonstrates how to:

Sample Description

The sample consists of a main form that shows:

The purpose of this sample is to show how to display HTML and interact with JavaScript.

Screen:

Files

This sample consists of the following files:

File name

Description

u96_htmlwidget_readme.htm

This file

u96_htmlwidget.xml

Uniface export file containing:

Object

Name

Description

Form

U96_HTMLWIDGET

The form

u96_htmlwidget.dat

Test data with persons and addresses

u96_htmlwidget_info_active.png
u96_htmlwidget_info_default.png
u96_htmlwidget_info_focus.png
u96_htmlwidget_info_hover.png
u96_htmlwidget_screen.png

Pictures that are used in this 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 understanding

HTML

Basic understanding

Environment Dependencies

This sample runs only on Microsoft Windows platforms.

A connection to the Internet is required.


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 file u96_htmlwidget.zip and place its files in your samples folder.
  4. Import the Uniface sources.
    /imp u96_htmlwidget.xml
  5. Compile the Uniface sources.
    /all u96_htmlwidget*
  6. Run the sample from outside the IDF
    /tst u96_htmlwidget
  7. Test the form.
    Click some addresses and you will see the map change accordingly.
    Change the map type to Static with the radio button to see the difference.
    Press the numbered buttons to see more information from this readme file.
  8. Examine the Form in the component editor.

The HTML Widget with Readme page

The information from the Readme file is shown in an HTML widget.

This shows you how to load an HTML file and how to position it.

1. Execute trigger

In the Execute trigger we load the HTML file and position it to an HTML anchor.

The loading of the file is done in lpSetupReadme.

The positioning is done in lpShowReadmeTopic.

2. Local Proc Modules

In the Local Proc Modules trigger, the entry lpSetupReadme loads the Readme file in the HTML widget.

; Get the handle of the field that we use to display the Readme info in
$html$ = $fieldhandle("TEXT.MAIN")
; Load the Readme file into the HTML widget
$html$->$widgetoperation("loadURL","file:\\\samples\u96_htmlwidget_readme.html")
if ($procerror <> 0)
   message/error "Loading Readme: $status %%$status%%% $procerror %%$procerror%%%"
endif

In the Local Proc Modules trigger, the entry lpShowReadmeTopic positions the HTML on a given topic.

entry lpShowReadmeTopic
params
   string pTopic : IN
endparams

    Position the Readme file in the HTML widget to the specified HTML anchor
   $html$->$widgetoperation("JS:gotoLink", pTopic)

end

3. JavaScript in the HTML

The readme file contains a tiny JavaScript function.

<script type="text/JavaScript"> function gotoLink(linkId) { window.location.hash=linkId; } </script>

4. Triggers of Info Buttons

The numbered buttons position this readme file on a specific topic.

; Position the Readme file in the HTML widget to the correct topic
call lpShowReadmeTopic("readme")

The HTML Widget with dynamic Google Map

The detail area contains an HTML widget in which a Google Map is displayed and a radio group that controls whether this is a dynamic map with some JavaScript involved or a static map that just generates an image.
The dynamic map shows you how to load a URL that points to a file in the HTML widget, how Uniface triggers are called from JavaScript and how to call JavaScript functions from Proc.

1. Local Proc Module lpShowMap

This entry is called from lpShowDetail and the Value Changed trigger of the map type.
Here we string the address fields together and load an html file with some JavaScript for the Google Maps JavaScript API.

3. File u96_htmlwidget_map.html

The u96_htmlwidget_map.html contains JavaScript that initializes the map, including a call to a Uniface trigger in the HTML widget. A listener makes the JavaScript function initialize fire when the HTML file is loaded. This initializes some properties of the map and sets it to a default location. When the file has been loaded the HTML body calls window.unifaceTriggers('MapInit'). This calls the Uniface extended trigger MapInit of the LOCATION.PERSON field.

4. Extended Trigger MapInit

Here we do a call from Proc code to JavaScript. The statement $fieldhandle("LOCATION.PERSON")->$widgetoperation("JS:showAddress", $Location$) calls the JavaScript function showAddress with the location info as parameter.

5. File u96_htmlwidget_map.html, showAddress function

The geocode API function calculates a latitude and a longitude for the location.
If this was successful the Google API methods map.setCenter and google.maps.Marker are used to center the map and place a marker on it. The Div for the map is made visible. If the geocoding was not successful the Div for the error info is made visible.

The HTML Widget with static Google Map

Besides some normal fields, the detail area also contains an HTML widget in which a Google Map is displayed. The Radio Group controls whether this is a dynamic map with some JavaScript involved or a static map that just generates an image.
The static map shows you how to load an URL on the web in the HTML widget.

1. Local Proc Module lpShowMap

This entry is called from lpShowDetail and the Value Changed trigger of the map type.
Here we string the address fields together and construct a URL for the Static Maps API.
Then this URL is loaded in the HTML widget and we are done.
There is no functionality on the static map because it is just an image.
But if that is all you need, this a very nice and simple solution.

More information