Uniface Sample: Images in ValReps

Uniface 9.6.01
Sample Version: 1.0
December 2012

Demonstrated Functionality
Files
Knowledge Prerequisites
Environment Dependencies
Steps
1. Drop-down List
2. List Box
3. HTML Widget
More Information



Demonstrated Functionality

This sample shows how images can be used in drop-down list and list box widgets.
It also shows how to use the HTML Widget to display a web page.

Sample Description

The sample consists of a form that has a drop-down list in which you can select a continent.
When you select a continent, a list box is populated with the countries of that continent.
When you select a country, a map of the country is displayed.
You can click the numbered buttons to see the relevant part of this Readme file.

Form showing continent Europe, country Germany, and readme file set to section 2

Files

This sample consists of the following files:

File name

Description

u96_imgvalrep_readme.html

This file

u96_imgvalrep.xml

Uniface export file containing:

Object

Name

Description

Form

U96_IMGVALREP

The form of this sample.

u96_imgvalrep_info_1.png
u96_imgvalrep_info_2.png
u96_imgvalrep_info_3.png
u96_imgvalrep_info_active.png
u96_imgvalrep_info_default.png
u96_imgvalrep_info_focus.png
u96_imgvalrep_info_hover.png
u96_imgvalrep_screen.png
u96_imgvalrep_dropdown.png
u96_imgvalrep_listbox.png
u96_imgvalrep_html.png
u96_imgvalrep_contXX.png
u96_imgvalrep_XX.gif

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

Environment Dependencies

This sample runs only on Microsoft Windows platforms.
To see the map you will need to be connected to the internet.


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 the file u96_imgvalrep.zip and place all its files in your samples folder.
  4. Import the Uniface sources.
    /imp u96_imgvalrep.xml
  5. Compile the Uniface sources.
    /all u96_imgvalrep*
  6. Run the sample from outside the Uniface Development Environment
    /tst u96_imgvalrep
  7. Test the form:
    1. In The drop-down list, select a continent. Notice that each item has an icon of the continent.
      The list box shows countries from the chosen continent.
    2. In the list box, select a country. Notice that an icon of the country flag precedes each country name in the list box.
      A map is displayed when you choose a country.
    3. The map comes from a web site and is dispayed in an HTML widget.
    4. Click the numbered buttons to see the relevant sections of this readme file. It is also displayed in an HTML widget.
    5. Examine the forms in the Component Editor.

    Drop-Down List

    This drop-down list widget has a ValRep that uses images.

    To use images (files or glyphs) in the Representation use the syntax:
    {@Image or ^Glyph}·!}Text

    For example:
    @u96_imgvalrep_contAF.png·!Africa
    Value Changed trigger Clear the ValRep of the list box.
    Determine which continent was selected and get all the countries for that continent.
    Loop through the countries and for each country, construct a representation and add the country code and the representation to the ValRep of the list box.

    List Box

    This list box widget has a ValRep that uses images. The ValRep is assigned in the Value Changed trigger of the drop-down list.

    To use images (files or glyphs) in the Representation use the syntax:
    {@Image or ^Glyph}·!}Text

    For example:
    @u96_imgvalrep_NL.gif·!Netherlands
    Value Changed trigger There are several systems of country codes in use around the world.
    The CIA World Factbook web site (which is used to show a map of the country) uses FIPS10 codes,
    so we have to translate our ISO 3166 codes to FIPS 10.
    The translation table is in blockdata.

    1. Convert the blockdata to a Uniface list
    2. Get the FIPS 10 code for the current ISO code
    3. Generate a URL that points to a country map on the CIA World Factbook web site
    4. Assign the URL to the HTML Widget

    HTML Widget

    This HTML widget shows a map of the selected country.
    This is done by assigning a URL to the value of the field in the Value Changed trigger of the list box.
    Widget Properties
    • Use field value is checked.

    More Information

    • The Uniface Library describes how to use images in ValReps. Of special interest are the topics:
      • ValRep List Syntax (paragraph Images in ValRep Lists
      • Drop-Down List
      • List Box
    • http://frontline.compuware.com/products/UF/default.aspx
    • http://www.uniface.info