Liste des pays

Principe

La page 'liste des pays' du site ASAMPLE illustre le concept d'accès aux données proposé par XTEND.

Dans notre exemple, la page composée :

D'un bloc liste ABLKCOUNTRIES qui effectue une requête sur le contenu de la table TABCOUNTRY via l'interface ACOUNTRY et qui en affiche le contenu. Le contenu du bloc met en oeuvre :

La sélection d'une ligne par clic souris sur le code du pays et l'affichage du détail de la devise et de la langue en dessous du tableau
L'affichage d'une image liée à chaque élément de la liste (drapeau) via l'utilisation d'un token champ de type 'Accès image'
La pagination
Tri ascendant et descendant sur le code pays

De deux blocs simples ABLKCURRENCY et ABLKLANG liés au bloc ABLKCOUNTRIES qui permettent d'afficher le détail de la devise et de la langue du pays sélectionné

La gestion de l'affichage du détail, en fonction de la sélection ou non d'une ligne, est géré par l'utilisation d'un token lien conditionné ADISPMAINSELECT

D'un bloc ABLKDOCHTML qui affiche le contenu HTML dynamique de la page (description)

Si votre site XTEND a été créé à partir d'une copie du site ASAMPLE les fiches de paramétrages sont déjà créées.

Sinon vous pouvez soit les créer soit les copier une à une à partir du site ASAMPLE avec le bouton d'action X3 'Copie'.

Paramétrage X3

Etape 1 - Création des interfaces

Les trois interfaces ACOUNTRY, ALANGUAGES, ACURRENCIES qui permettent d'acéder respectivement aux tables TABCOUNTRY, TABLAN, TABCUR sont de type 'Accès données'.

Les procédures de création sont identiques.

Seuls les noms des tables et la liste des champs sélectionnés sont différents.

1. Créer la fiche interface

2. Sélectionner la table

3. Enregistrer

4. Générer l'accès après avoir saisi les champs utilisés

5. Enregistrer et valider

6. Générer les champs avec le menu Outils\Création token champs

Type
Accès table

Code table
TABCOUNTRY, TABLAN, TABCUR

Nom de publication
TABCOUNTRY, TABLAN, TABCURRENCY par défaut mais vous pouvez le modifier

Affichage des messages
Tous

Accès protégé
non

Générer l'accès
Sélectionner les champs et générer le web service en cliquant sur OK

Le bouton 'Générer l'accès' effectue les opérations suivante:

propose de saisir le nombre maximum d'enregistrements lus à chaque appel du web service ('Nb max. de lignes')
demande de sélectionner les champs utiles
génère le traitement L4G qui sera appelé par le web service avec pour nom 'W + nom de publication'
crée la fiche sous-programme de description des paramètres
publie le web service avec le nom de publication saisi précédemment

Etape 2 - Création des entités

Comme pour les interfaces, les entités ACOUNTRY, ALANG, ACURRENCY sont créer de la même manière.

Seul le nom de l'interface et la liste des champs sont différents.

1. Créer l'entité de type 'Accès données' basée sur l'interface.
L'entité est utilisée pour stocker les données des requêtes sur la table

2. Associer les champs
S'aider du menu Outils\Aide au remplissage

3. Saisir le champ clé de l'entité dans le tableau 'Champs (sélection)'

4. Enregistrer et valider

Ajout du champ d'affichage du drapeau

Pour afficher le drapeau nous devons créer un token champ COUNTRYFLAG de type 'Accès image' et le paramétrer pour qu'il génère une URL d'accès au fichier .gif qui contient l'image du drapeau.

Le champ COUNTRYFLAG sera inséré dans un tag <img>.

Le paramétrage du token consiste à :

indiquer le répertoire de base (root) des fichier

Design HTML dans notre cas

compléter par le sous-répertoire

FLAGS dans notre cas

indiquer si l'extension est celle définie au niveau du site ou spécifique au champ

gif dans notre cas car la standard du site est jpg

Dans notre cas les fichiers drapeau sont stockés dans un dossier FLAGS du répertoire HTML et ont comme nom le CODEPAYS.gif.

Valider le champ après création.

Mapping du champ d'affichage du drapeau

Le champ COUNTRYFLAG ne fait pas partie de l'interface et il doit être calculé lors de la création de l'entité.

Il suffit d'ajouter le champ COUNTRYFLAG à l'entité ACOUNTRY et de le 'mapper' avec le champ CRY qui contient le code pays.

Lors du mapping, le serveur XTEND ajoutera un champ COUNTRYFLAG a l'entité et le valorisera avec le code pays.

Lors de l'affichage, le champ sera transformé en une URL dans l'attribut src du tag img qui pointera sur le fichier CODEPAY.gif

Dans cet exemple l'url pointe directement sur le fichier du serveur X3.

/xtend/data/remote/ pointe sur une 'servlet' XTEND de lecture des données dans X3
SOLSUPV6 pointe sur le répertoire X3_PUB de la solution SOLSUPV6 sur le serveur X3
SUPERV/X_TEND/X_HTML/ pointe sur la racine des projest HTML des dossiers X3 SUPERV
ASAMPLE/FRA/ pointe sur la racine du projet HTML (langue FRA) du site ASAMPLE
FLAGS/ATF.gif pointe sur le fichier drapeau à l'intérieur du projet HTML

Etape 3 - Création des tokens bloc

Les tokens bloc sont insérés dans la page HTML. C'est eux qui déclenchent la requête vers X3, la lecture et l'affichage des données.

1. Créer un bloc

Sélectionner le type et l'entité
Sélectionner le nombre de lignes par bloc pour les bloc 'Multi enregistrements'

2. Ajouter les critères de sélections et de tri

3. Enregistrer et valider

Bloc pays

Pour notre exemple nous avons créer un bloc 'Multi enregistrement' ABLKCOUNTRIES qui pointe sur l'entité ACOUNTRY et qui sélectionne les fiches qui ont au moins un code CRY (CRY >=AA).

Dans notre base de test certains codes ont moins de deux caractères.

Pour autoriser le tri sur le code pays nous avons paramétré un tri ascendant sur le code pays CRY par défaut et autorisé la modification du tri par un lien dynamique.

Ce sont les tokens lien dynamique ADLKCOUNTRYSORTDW et ADLKCOUNTRYSORTUP qui permettront le tri du tableau.

Type de tri
Champ

Tri altérable
Oui

Champs de tri
CRY

Le bloc ABLKCOUNTRIES a été défini comme bloc principal de la page web ACOUNTRIES ce qui permet d'uiliser l'alias AMAIN plutôt que le nom du bloc pour adresser ce bloc :

la sélection des blocs devise et langue utilisent AMAIN à la place de ABLKCOUNTRIES
le html qui gère la pagination utilise aussi AMAIN (AMAIN.aDlkNextPage...) et peut ainsi être réutilisé dans d'autres pages

Blocs langue et devise

Les blocs ABLKLANG et ABLKCURRENCY sont 'Mono enregistrement' et sélectionnent respectivement les entités ALANG et ACURRENCY en fonction du code langue (LAN) et du code devise (CUR) de la ligne sélectionnée dans le bloc principal AMAIN_ (bloc ABLKCOUNTRIES).

Etape 4 - Lien pays vers devise et langue

Token lien dynamique

Le lien est effectué via le token 'lien dynamique' ADLKSELECT qui sélectionne la ligne d'un bloc (action web spéciale ABLKSELECT ) et réaffiche la même page.

Cette cette action indique au serveur XTEND que la ligne qui contient le lien sur lequel l'utilisateur a cliqué devient la ligne sélectionnée.

Lorsqu'un bloc a une ligne sélectionnée, tous les tokens champs qui font référence à ce bloc MYBLOCK.MYFIELD prennent pour valeur la valeur du champ de la ligne sélectionnée.

Dans notre cas, comme les blocs langue(ABLKLANG) et devise(ABLHCURRENCY) ont pour sélection AMAIN.LAN et AMAIN.CUR (AMAIN est l'alias du bloc ABLKCOUNTRIES), ces blocs vont automatiquement afficher les informations sur la langue et la devise du pays sélectionné.

Affichage du détail

Pour notre exemple nous avons choisi d'afficher le résultat dans la même page et de gérer l'affichage via un token 'bloc conditionné' ADISPMAINSELECT qui affiche ou cache une zone HTML selon que le bloc principal MAIN à une ligne sélectionnée ou non.

Etape 5 - Tokens lien dynamiques de tri

Les tokens ADLKCOUNTRYSORTUP et ADLKCOUNTRYSORTDW permettent de trier la liste des pays par code ascendant et descendant.

Page courante
oui

Suivi de l'activité
Non car il n'est pas nécessaire de tracer ce type d'action

Sélection sur l'entité
ACOUNTRY : Entité à sélectionner (celle du bloc des pays)

Application sélection
'Remplace la sélection du bloc principale' : Le tri/sélection postés par le lien dynamique à destination de la page (même page dans notre cas) remplaceront le tri/sélection du bloc principal AMAIN (Blocs ABLKCOUNTRIES dans notre cas)

Paramétrage de l'onglet sélection

Type de sélection
Aucune : car on ne souhaite modifier que les critères de tri du bloc

Type de tri
Champ : Champ CRY dans notre cas avec l'ordre ascendant (ADLKCOUNTRYSORTUP) et descendant (ADLKCOUNTRYSORTDW )

Etape 6 - Création de la page

Créer la page ACOUNTRIES (non protégée) qui a pour bloc principal le bloc ABLKCOUNTRIES.

Page HTML

Lien vers la page

Insertion du token page web ACOUNTRIES dans le menu gauche pour afficher la page.

Pour effectuer un lien simple (sans action ni sélection) vers une page web via un tag ancre il suffit d'insérer un token de type 'page web' dans le tag (<a adx="PageWeb"></a>) afin de limiter le nombre de tokens 'lien dynamiques'.

Affichage des pays

L'affichage de la liste des pays consiste à positionner le bloc ABLKCOUNTRIES qui effectue une itération sur la liste des pays et permet de créer autant de lignes dans le tableau que de pays dans la liste.

Pour chaque ligne on crée autant de cellules avec un tag adx="" que de données à afficher.

<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>

Le paramètre xselect=false du bloc ABLKCOUNTRIES indique de ne pas sélectionner la première ligne par défaut afin de masquer le détail tant que l'utilisateur n'a pas sélectionné une ligne.

Les liens pour le tri sont placés dans le titre de la colonne Code.

Le drapeau est affiché via un token field de type 'Accès image' placé dans un tag img.

Le lien vers le détail devise/langue est inséré dans la cellule qui affiche le code pays.

Les couleurs des lignes sont alternées.

Pour afficher les lignes d'un tableau avec des couleurs alternées on place un token adx dans le tag <tr>.
<tr adx="aLineStyle:xattr=Class">
aLineStyle contient le nom de la classe et xAttr=Class indique qu'il faut valoriser l'attribut classe avec la valeur du champ aLineStyle.
Les classes css (aLineStyle) qui sont appliquées aux lignes du tableau sont définies dans la fiche de paramètrage du bloc.

Affichage du pays sélectionné

Le détail est affiché dès qu'une ligne est sélectionnée via un clic sur le code pays.

C'est le token 'lien conditionné' ADISPMAINSELECT qui conditionne l'affichage.

Les blocs ABLKCURRENCY et ABLKLANG déclenchent la lecture des entités devises et langue du pays sélectionné et permettent l'affichage du détail.

<!adx="ADISPMAINSELECT">
    <table>
    <!adx="ABLKCURRENCY">
        <tr>
            <td><b>Devise</b></td>
            <td adx="CUR" width="50"></td>
            <td><b>Libellé</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>Langue</b></td>
            <td adx="LAN"></td>
            <td><b>Libellé</b></td>
            <td adx="INTDES"></td>
            <td></td>
        </tr>
    <!adx="ABLKLANG">
    </table>
<!adx="ADISPMAINSELECT">

Affichage de la description de la page

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

La pagination

Pour gérer la pagination nous utilisons la librarie pagination.lbi qui contient un code HTML générique qui peut être utilisé pour le bloc principal (AMAIN) de toutes les pages HTML.

Pour appeler une méthode (ou un champ) d'un bloc XTEND on utilise la syntaxe monBloc.monAction ou monBloc.monChamp.

<a href="" adx="AMAIN.aDlkFirstPage">Première</a>
<a href="" adx="AMAIN.aDlkPrevPage">Précedente</a>