Country list

Principle

The page "Country list" of the ASAMPLE site illustrates the data access concept proposed by XTEND.

In our example, the page is formed of:

A list section ABLKCOUNTRIES carrying out a query on the content of table TABCOUNTRY via interface ACOUNTRY and displaying its content. The section content involves:

The selection of a line by clicking on the country code and displaying the currency detail and the language below the grid
The display of a picture linked to each list element (flag) by using a field token of type "Picture access"
Page numbering
Ascending and descending sort on the country code

Two sections ABLKCURRENCY and ABLKLANG linked to section ABLKCOUNTRIES make it possible to display the detail of the currency and of the selected country language.

The management of detail display, depending on whether a line is selected, is managed by a conditioned link token ADISPMAINSELECT

A section ABLKDOCHTML displaying the dynamic HTML content of the page (description)

If the XTEND site was created from a copy of the ASAMPLE site, the setup records are already present.

Otherwise it is possible to either create them or to copy them one by one from the ASAMPLE site via the X3 action button 'Copy'.

X3 setups

Step no. 1 - Creation of the interfaces

The three interfaces ACOUNTRY, ALANGUAGES, ACURRENCIES are used to access respectively tables TABCOUNTRY, TABLAN, TABCUR are of type 'Data access'.

The creation procedures are identical.

Only the table names and the list of selected fields are different.

1. Create the interface record

2. Select the table

3. Save

4. Generate access after having entered the fields used

5. Save and Validate

6. Generate the fields via menu Tools\Field token creation

Type
Table access

Table code
TABCOUNTRY, TABLAN, TABCUR

Publication name
TABCOUNTRY, TABLAN, TABCURRENCY by default but can be modified

Messages display
All

Protected access
no

Generate access
Select the fields and generate the Web service by clicking on OK

The button 'Generate access' triggers following operations:

offers the possibility to enter the maximum number of recordings read upon calling of the Web service ('Max. nb of lines')
requests to select useful fields
generates the 4GL processing called by the Web service having 'W + Publication name' as name
creates the sub-program record for setup description
loads the Web service with the Publication name entered previously

Step no. 2 - Creation of the entities

Entities ACOUNTRY, ALANG, ACURRENCY are created in the same way as interfaces.

Only the interface name and the list of fields are different.

1. Create the entity of type 'Data access' based on the interface .
The entity is used to store data from table queries

2. Associate fields
with the help of menu Tool\Entry help

3. Enter the entity key field in grid 'Fields (selection)'.

4. Save and Validate

Addition of the Flag display field

In order to display the flag it is necessary to create a field token COUNTRYFLAG to type "Picture access" and to set it up so that it generates an access url to the .gif file containing the flag picture.

The field COUNTRYFLAG will be inserted in a tag <img>.

The token setup consists in:

indicating a root directory for the files

HTML design

indicating the sub-directory

FLAGS

indicating if the extension is that defined at site level or is specific to the field

here it is gif since the site standard extension is jpg

Here the flag files are stored in a FLAGS file of the HTML directory and are named CODEPAYS.gif

Validate the field after creation.

Mapping of the Flag display field

The COUNTRYFLAG field does not belong to the interface and must be calculated upon entity creation.

It is sufficient to add the COUNTRYFLAG field to entity ACOUNTRY and to 'map' it with the CRY field containing the country code.

Upon mapping, the XTEND server adds a COUNTRYFLAG field to the entity and values it with the country code.

Upon display, the field is transformed in an URL in the src attribute of the img tag pointing to file CODEPAYS.gif

In this example, the url points directly to the file in the X3 server.

/xtend/data/remote/ points to an XTEND 'servlet' to read data in X3
SOLSUPV6 points to X3_PUB directory of solution SOLSUPV6 in the X3 server
SUPERV/X_TEND/X_HTML/ points to the root of HTML projects from X3 SUPERV folders.
ASAMPLE/ENG/ points to the root of the HTML project (language ENG) in ASAMPLE site
FLAGS/ATF.gif points to the flag file in the HTML project

Step no. 3 - Creation of the section tokens

The section tokens are inserted in the HTML page. They will trigger the query to X3 and the data read and display.

1. Creation of a section

Select the type and the entity
Select the number of line by section for the "Multi-record" sections

2. Add selection and sort criteria

3. Save and Validate

Country section

For this example a "Multi-record" section ABLKCOUNTRIES was created pointing to entity ACOUNTRY and selecting the records having at least a CRY code (CRY >=AA).

In the test base, some codes have less than two characters.

In order to authorize the sort on the country code, an ascending sort was set up on the CRY country code by default and the sort modification by dynamic link was authorized.

The dynamic link tokens ADLKCOUNTRYSORTDW and ADLKCOUNTRYSORTUP make the grid sort possible.

Sort type
Field

Modifiable sort
Yes

Sort fields
CRY

Section ABLKCOUNTRIES was defined as main section of the Web page ACOUNTRIES. It makes it possible to use the alias AMAIN rather than the section's name to access this section:

the selection of currency and language sections use AMAIN instead of ABLKCOUNTRIES
the html managing the page numbering also uses AMAIN (AMAIN.aDlkNextPage...) and can thus be re-used in other pages

Language and currency sections

The sections ABLKLANG and ABLKCURRENCY are "Single-record' and select respectively entities ALANG and ACURRENCY depending on the language code (LAN) and the currency code (CUR) of the line selected in the main section AMAIN_ (section ABLKCOUNTRIES).

Step no. 4 - Country link to currency and language

Dynamic link token

The link is made via "dynamic link" token ADLKSELECT selecting the line of a section (specific Web action ABLKSELECT ) and displays the same page again.

This action indicates to the XTEND server that the line containing the link on which the user clicked becomes the selected line.

When a section has a selected line, all the field tokens referring to the section MYBLOCK.MYFIELD take as value the value of the field of the selected line.

Here, since the language (ABLKLANG) and currency (ABLHCURRENCY) sections have as selection AMAIN.LAN et AMAIN.CUR (AMAIN is the alias of section ABLKCOUNTRIES), these sections display automatically the information on the language and the currency of the selected country.

Detail display

Here for the example the result is displayed in the same page and the display is managed by a "conditioned section" token ADISPMAINSELECT displaying or hiding an HTML field depending on whether the main section MAIN has a selected line or not.

Step no. 5 - Sorting dynamic link tokens

Tokens ADLKCOUNTRYSORTUP and ADLKCOUNTRYSORTDW are used to sort the country list by ascending and descending code.

Current page
Yes

Activity tracking
No because it is not necessary to trace this type of action.

Selection on the entity
ACOUNTRY: Entity to select (that of the country section)

Application selection
'Replaces the selection of the main section': The sort/selection sent by the dynamic link to the destination page (in the example it is the same page) replace the sort/selection of the main section AMAIN (section ABLKCOUNTRIES in the example)

Setup of the Selection tab

Type of selection
None: only the section sort criteria are to be modified

Sort type
Field: Here the CRY field with ascending order (ADLKCOUNTRYSORTUP) and descending order (ADLKCOUNTRYSORTDW)

Step no. 6 - Page creation

Create the page ACOUNTRIES (not protected) which has as main section the section ABLKCOUNTRIES.

HTML page

Link to the page

Insertion of the Web page token ACOUNTRIES in the left menu to display the page.

In order to make a simple link (without action nor selection) to a Web page via an anchor tag, it is sufficient to insert a token of type "Web page" in the tag(<a adx="PageWeb"></a>) in order to limit the number of "dynamic link" tokens.

Country display

Displaying the country list consists in positioning the section ABLKCOUNTRIES which makes an iteration on the country list and thus makes it possible to create as many lines in the grid as countries in the list.

For each line it is possible to create as many cells as data to display thanks to a tag adx="".

<table width="100%" border="1">
    <tr class="tabTitle">
        <th width="15%">
           <a adx="ADLKCOUNTRYSORTUP">+</a>  
           <b>Code</b>
           <a adx="ADLKCOUNTRYSORTDW">-</a>  
        </th>
        <th width="20%"><b>Pays</b></th>
        <th width="15%"><b>Continent</b></th>
        <th width="15%"><b>Devise</b></th>
        <th width="15%"><b>Langue</b></th>
        <th width="20%"><b>Drapeau</b></th>
    </tr>
<!adx="ABLKCOUNTRIES:xselect=false">
    <tr adx="aLineStyle:xattr=Class">
        <td><a adx="ADLKSELECT"><span adx="CRY"></span></a></td>
        <td adx="CRYDES"></td>
        <td adx="CONTINENT"></td>
        <td adx="CUR"></td>
        <td adx="LAN"></td>
        <td><img adx="COUNTRYFLAG" height="25" width="40"></td>
    </tr>
<!adx="ABLKCOUNTRIES">
</table>

Setup xselect=false of section ABLKCOUNTRIES indicates not to select the first line by default in order to hide the details provided no line is selected.

The sort links are located in the title of the Code column.

The flag is displayed via a field token of type "Picture access" located in an img tag.

The link to the currency/language detail is inserted in the cell displaying the country code.

The line colors are alternating.

In order to display the lines of a grid with alternating lines, an adx token is set in the tag <tr>.
<tr adx="aLineStyle:xattr=Class">
aLineStyle contains the class name and xAttr=Class indicates that it is necessary to value the class attribute with the field aLineStyle value.
The css classes (aLineStyle) applied in the grid lines are defined in the section setup record.

Display of the selected country

The detail is displayed as soon as a line is selected by clicking on the country code.

The "conditioned link" token ADISPMAINSELECT conditions the display.

Sections ABLKCURRENCY and ABLKLANG trigger the read of country currency and language entities and make possible the detail display.

<!adx="ADISPMAINSELECT">
    <table>
    <!adx="ABLKCURRENCY">
        <tr>
            <td><b>Currency</b></td>
            <td adx="CUR" width="50"></td>
            <td><b>Description</b></td>
            <td adx="INTDES" width="150"></td>
            <td><b>Symbole</b></td>
            <td adx="CURSYM" width="50"></td>
            </td>
         </tr>
    <!adx="ABLKCURRENCY">
    <!adx="ABLKLANG">
        <tr>
            <td><b>Language</b></td>
            <td adx="LAN"></td>
            <td><b>Description</b></td>
            <td adx="INTDES"></td>
            <td></td>
        </tr>
    <!adx="ABLKLANG">
    </table>
<!adx="ADISPMAINSELECT">

Display of the page description

<!adx="ABLKDOCHTML">
<div adx="TEXTE">
</div>
<!adx="ABLKDOCHTML">

Page numbering

In order to manage page numbering, library pagination.lbi is used, which contains a general HTML code that can be used for the main section (AMAIN) in all HTML pages.

In order to call a method (or a field) for an XTEND section, the syntax mySection.myAction or mySection.myField is used.

<a href="" adx="AMAIN.aDlkFirstPage">First</a>
<a href="" adx="AMAIN.aDlkPrevPage">Previous</a>