Blocs

Prise en main

Principe

Le token bloc est inséré dans la page HTML en utilisant le syntaxe suivante :

<table>
<!adx="MyBlock">
    <tr>
        <td adx="aBLKELMTRANK"></td>
        <td adx="ITEMREF"></td>
    </tr>
<!adx="MyBlock">
</table>

Le moteur XTEND procède de la manière suivante pour traiter les blocs :

Phase de parsing de la page HTML

Cette étape est effectuée une seule fois lors du chargement de la page HTML :

• Création de l'objet bloc et ajout dans l'arborescence,
• Calcul des dépendances entre blocs si la sélection d'un bloc dépend d'un autre bloc.
  Le résultat de ce calcul donne l'ordre d'initialisation des blocs

Phase de génération de la page.

Cette étape est effectuée à chaque affichage de la page HTML :

1. Initialisation des blocs

• Cacul des critères de sélection en fonction du type de sélection,
• Appel du web service 'Accès données' avec les critères de sélection en paramètre,
• Création et stockage en mémoire des entités retournées.

2. Itération sur toutes les entités retournées

• Positionnement de l'entité dans le contexte de données,
• Appel de la méthode de génération du HTML des tokens fils,
• Suppression de l'entité dans le contexte de données.

Dans l'exemple précédent, si la sélection renvoie 3 articles de code PUZ001, PUZ002 et PUZ003 le résultat obtenu sera une tableau de trois lignes :

1	PUZ001
2	PUZ002
3	PUZ003

 Le HTML généré est le suivant :

On voit que le HTML 'fils' du token bloc a été répété 3 fois et recalculé à chaque fois en tenant compte du nouveau contexte de données (ligne courante).

<table>
    <tr>
        <td>1</td>
        <td>PUZ001</td>
    </tr>
    <tr>
        <td>2</td>
        <td>PUZ002</td>
    </tr>
    <tr>
        <td>3</td>
        <td>PUZ003</td>
    </tr>
</table>

Sélection et tri

Outre le fait d'afficher des tableaux de données, le token bloc gère la modification dynamique des critères de sélection et de tri.

Le paramétrage du bloc définit les critères par défaut et on peut autoriser ou non la modification de ces critères par un lien dynamique.

C'est le token lien dynamique, pour lequel on peut aussi définir des paramètres de sélection et de tri, qui peut modifier les critères du bloc.

Seuls les critères de sélection et de tri du bloc principal de la page (alias AMAIN) peuvent être modifiés par ceux des liens dynamiques.

On peut définir plusieurs blocs par page mais un seul (le bloc principal) pourra avoir des critères de sélection et de tri modifiables par l'utilisateur.

Il existe trois types de modifications des critères d'un bloc par un lien dynamique :

• Les critères du lien dynamique 'Remplace la sélection du bloc principal' :
• Sélection du bloc = critères de sélection du lien.

• Les critères du lien dynamique 'S'ajoute à la sélection du bloc principal' :
• Effectue un raffinement de la requête du bloc avec le critères du lien,
• Sélection du bloc = critères de sélection du bloc + critères de sélection du lien

• Les critères du lien dynamique 'Se cumule à la sélection en-cours du bloc principal' :
• Effectue un raffinement de la requête du bloc en ajoutant (ET logique) la sélection du lien dynamique à la requête courante du bloc,
• Cette option est utilisée si la sélection du bloc résulte du cumul de plusieurs liens dynamiques,
• Sélection du bloc = critères de sélection du bloc + somme des critères de tous les liens cliqués.

Ces trois options permettent de gérer la plupart des situations qui se présentent dans les pages web.

La fiche token bloc permet de paramètrer les critères de sélection et de tri du bloc.

Ce sont les critères par défaut qui sont appliqués au premier affichage de la page qui contient le bloc.

Le token bloc propose deux paramètres 'Sélection altérable' et 'Tri altérable' qui indiquent si les critères de sélection et/ou les critères de tri peuvent être modifiés par un lien dynamique.

Ces paramètres s'appliquent seulement si le bloc a été défini comme bloc principal dans la fiche de la page web qui l'affiche.

Bloc avec plusieurs cellules par ligne

Pour afficher un bloc avec plusieurs cellules par ligne on utilise le token spécial ASTAMP pour délimiter la cellule.

Le serveur XTEND répétera autant de fois le code HTML compris entre les deux balises ASTAMP qu'il y a de cellules dans la ligne.

<table>
<!-Itération sur les lignes du bloc-->
<!adx="MYBLOCK">
    <tr>
        <!-Code répété autant de fois qu'il y a de cellules par ligne'-->
        <!adx="ASTAMP">
                <!--Pour alterner la couleur des cellules-->                           
                <td adx="ALINESTYLE:xattr=Class">
                   <!--Code HTML d'une cellule-->
                   <b>Nom</b><p adx="NAME"></p>
                   <b>Prénom</b><p adx="FIRSTNAME"></p>
                </td>
        <!adx="ASTAMP">
    </tr>
<!adx="MYBLOCK">
</table>

Comment remplir les cellules vides

L'exemple ci-dessous montre comment remplir les cellules vides lorsque le nombre d'enregistrements n'est pas un multiple de nombre de cellules par ligne.

On utilise le bloc conditonnéADISPSTAMPEMPTY pour délimiter le HTML dédié aux cellules vides.

<table>
<!-Itération sur les lignes du bloc-->
<!adx="MYBLOCK">
    <tr>
        <!adx="ASTAMP">                        
                <td adx="ALINESTYLE:xattr=Class">
                    <!adx="ADISPSTAMPEMPTY">
                        <!--Cellule vide remplie avec un blanc-->      
                        &nbsp;
                    <!adx="ADISPSTAMPEMPTY">
                    <!adx="ADISPSTAMPEMPTY:xnot">
                        <!--Code HTML d'une cellule non vide-->
                        <b>Nom</b><p adx="NAME"></p>
                        <b>Prénom</b><p adx="FIRSTNAME"></p>   
                    <!adx="ADISPSTAMPEMPTY">
                </td>
        <!adx="ASTAMP">
    </tr>
<!adx="MYBLOCK">
</table>

Les actions qui agissent sur les blocs

Pagination

Les actions ABLKFIRSTPAGE, ABLKNEXTPAGE, ABLKPREVPAGE, ABLKLASTPAGE permettent de gérer la pagination dans les blocs.

Les tokens ADLKFIRSTPAGE, ADLKNEXTPAGE, ADLKPREVPAGE, ADLKLASTPAGE peuvent être utilisés pour le bloc principal de la page.

Les champs aBLKNBELMTS et APAGEPOS affichent le nombre total d'enregistrement et la position de la page par rapport au nombre total de pages.

Les blocs conditionnés AHIDEMAINFIRSTPAGE et AHIDEMAINLASTPAGE gère l'affichage/masquage des boutons de pagination pour les première et dernière pages.

Syntaxe

MonBloc.ADLK*

Exemple :

Pagination avec gestion de l'affichage en début et fin de pagination.

<table width="100%">
    <tr>
        <td align="left" width="20%">
        <!--Hide FirstPage and Previous actions if current page is the first page-->           
            <!adx="aHideMainFirstPage">
                <!---->
                <a href="" adx="AMAIN.aDlkFirstPage">Première</a>
                <a href="" adx="AMAIN.aDlkPrevPage">Précedente</a>
            <!adx="aHideMainFirstPage">
        </td>
        <!--Displays page information-->
        <td align="center" width="60%">
            Page  : <span adx="AMAIN.aPagePos"></span> -
            Nombre d'élements : <span adx="AMAIN.aBlkNbElmts"></span>
        </td>
        <td align="right" width="20%">                         
        <!--Hide LastPage and Next actions if current page is the last page--> 
            <!adx="aHideMainLastPage">
                <a href="" adx="AMAIN.aDlkNextPage">Suivante</a>
                <a href="" adx="AMAIN.aDlkLastPage">Dernière</a>
            <!adx="aHideMainLastPage">
        </td>
    </tr>
</table>

Sélection d'une ligne

Les liens dynamiques ADLKSELECT et ADLKUNSELECT (action ABLKSELECT et ABLKUNSELECT) permettent de sélectionner/désélectionner une ligne d'un bloc.

Utilisation

Insérer les tokens ADLKSELECT et ADLKUNSELECT dans une des cellules de la ligne soit dans un tag <a> soit dans une tag <input type='button'>.

Le champ ABLKSELECTEDLINE contient le rang (1 à N) de la ligne sélectionnée.

Exemple :

Le bloc ABLKCOUNTRIES affiche les pays dans le site ASAMPLE avec sélection de la ligne pour afficher le détail Devise/Langue du pays.

Un clic sur la première cellule (CRY) sélectionne la ligne.

<!adx="ABLKCOUNTRIES:xselect=false"> 
    <tr>
        <td><a adx="ADLKSELECT"><span adx="CRY"></span></a></td>
        <td adx="CRYDES"></td>    
        <td adx="CUR"></td>
        <td adx="LAN"></td>                
    </tr> 
<!adx="ABLKCOUNTRIES"> 
<!--Affichage du N° de ligne sélectionnée-->
<span adx='ABLKCOUNTRIES.ABLKSELECTEDLINE'></span>

Le paramètre HTML 'xSelect=true' permet de sélectionner la première ligne par défaut.

Si ce paramètre n'est pas présent, ou si sa valeur est égale à 'false' le bloc n'a aucune ligne sélectionnée par défaut.

Lorsqu'un bloc a une ligne sélectionnée on peut adresser les champs de cette ligne via la syntaxe MonBloc.MonChamp.

Les valeurs des champs de la ligne sélectionnée peuvent être affichées ou utilisées comme critères dans un bloc, un lien dynamique ou un bloc conditionné.

Le bloc conditionné AHIDEMAINSELECT gère l'affichage/masquage d'une zone de HTML en fonction du fait que le bloc principal a ou n'a pas de ligne sélectionnée (voir page pays du site ASAMPLE).

Retour détail vers liste

L'action ABLKRESTOREMAINCTX permet de retourner vers une page liste à partir d'une page détail sans perdre ni la pagination ni la ligne sélectionnée du bloc principal.

Le lien dynamique ci-dessous permet de retourner à la page FORMQUERYRES avec restauration du contexte du bloc principal .

<input type="button" value="Retour liste" adx="DlkFrmQueryBack" class="xtendButton" >

Accès direct aux données des lignes

La syntaxe suivante permet d'adresser directement les données d'une ligne d'un bloc :

<!--Première ligne-->
<span adx="MYBLOCK(first).MYFIELD"></span>]<br>
<!--Dernière ligne-->
<span adx="MYBLOCK(last).MYFIELD"></span>]<br>
<!--Nieme ligne-->
<span adx="MYBLOCK(N).MYFIELD"></span>]<br>

Accès aux données d'un bloc en JavaScript (JSON)

La syntaxe suivante permet de valoriser une variable JavaScript avec la représentation JSON d'un bloc ou d'une ligne d'un bloc :

<script>
    // Données JSON d'un bloc
    var wMyBlock_JSON=<!adx="MYBLOCK(*)"><!adx="MYBLOCK(*)">;
    var wMyBlock_JSON=<!adx="MYBLOCK(*)"><!adx="MYBLOCK(*):xinclude=FIELD1,FIELD2">;
    var wMyBlock_JSON=<!adx="MYBLOCK(*)"><!adx="MYBLOCK(*):xexclude=FIELD1,FIELD2">;
    // Données JSON d'une ligne
    var wMyLine_JSON=<!adx="MYBLOCK(2)"><!adx="MYBLOCK(2)">;
    var wMyLine_JSON=<!adx="MYBLOCK(2):xinclude=FIELD1,FIELD2"><!adx="MYBLOCK(2)">;
    var wMyLine_JSON=<!adx="MYBLOCK(2):xexclude=FIELD1,FIELD2"><!adx="MYBLOCK(2)">;
</script>

La variable JSON d'un bloc est un tableau (Array) de lignes :

<script>
    var wMyBlock = [{ligne 1},{ligne 2},...];
    var wMyBlock = [{"STATUT":1,"STATUT_DESCR":"A traiter","PRIX":81.35,"COD2":"30-112"},
    {"STATUT":2,"STATUT_DESCR":"Traité","PRIX":117.9,"COD2":"31-02"},
    {"STATUT":1,"STATUT_DESCR":"A traiter","PRIX":606.15,"COD2":"32-034"}];
</script>

La variable JSON d'une ligne est un objet qui contient des champs :

<script>
    var wMyLine ={"CHAMP1":"Valeur1","CHAMP2":"Valeur2"...};
    var wMyLine = {"STATUT":1,"STATUT_DESCR":"A traiter","PRIX":606.15,"COD2":"32-034"}
</script>

Pour un champ le paramètre xjson génère un objet JSON {"NomChamp:"Valeur"}. Sans paramètre xjson la variable JavaScript est valorisée avec la valeur du champ.

<script>
    // Données JSON d'un champ
    var wMyField_JSON=<!adx="MYFIELD:xjson"><!adx="MYFIELD">;
    //XTEND génère
    var wMyField_JSON={"MYFIELD":"Valeur"};
    // Valeur d'un champ
    var wMyField_JSON=<!adx="MYFIELD"><!adx="MYFIELD">;
    //XTEND génère
    var wMyField_JSON="Valeur";
</script>

Les paramètres HTML

Code	Paramètre	Effet
xselect	True/False	Sélectionne la première ligne par défaut

Champs d'un bloc

Code	Type	Description
ABLKELMTIDX	Entier	Index d'un élément dans un bloc (O->ABLKNBELMTS-1)
ABLKELMTRANK	Entier	Rang d'un élément dans un bloc (1->ABLKNBELMTS)
ABLKLINEIDX	Entier	Index d'une ligne dans un bloc (O->ABLKNBLINES-1)
ABLKLINERANK	Entier	Rang d'une ligne dans un bloc (O->ABLKNBLINES)
ABLKNBELMTS	Entier	Nombre d'éléments (enregistrements) total de la requête d'un bloc
ABLKNBLINES	Entier	Rang de la ligne sélectionnée d'un bloc via l'action ABLKSELECT
ABLKSELECTEDLINE	Entier	Nombre de lignes d'un bloc
APAGENB	Entier	Nombre de pages d'un bloc
APAGENUM	Entier	Rang de la page courante d'un bloc
APAGEPOS	Entier	APAGEPOS/APAGENUM

Blocs prédéfinis

Blocs prédéfinis

Code	Description
ACONST	Contient tous les champs de type constante
ACURRENT	Contexte de donnée courant (top) dans la pile de données XTEND
AHTMLFORM	Formulaire HTML
AHTTPCOOKIE	Cookies HTTP
AMAIN	Bloc principal d'une page défini dans les paramètres de la page
APBG	Bloc fond d'une page défini dans les paramètres de la page
AMESS	Messages utilisateur
AREFERENCE	Lorsqu'on écrit MonBlocReference.MonTokenLien le bloc MonBlocReference est appelé 'bloc de référence' ; Le contexte de données de ce bloc est passé en paramètre de l'action
ASESSION	Contient les données de la session utilisateur
AUSERCRIT	Contient les critères utilisateurs (paramètre HTML xcrit)
AUSERINF	Contient les données utilisateur renvoyées par le login
AUSERVAR	Contient les variables utilisateur créées par les fonctions JavaSCript xtdSetUserVar/xtdRemoveUserVar

Pré-requis

Reportez-vous à la documentation de Mise en oeuvre

Gestion de l'écran

En-tête

Onglet Général

Onglet Sélection

Onglet Tri

Onglet Avancé

Etats

Par défaut, les états suivants sont associés à la fonction :

  PRTSCR : Impression écran

Mais ceci peut être modifié par paramétrage.

Boutons spécifiques

Validation

Ce bouton permet de mettre à jour le dictionnaire XTEND au format XML. Le serveur X3WEB prend en compte uniquement le dictionnaire sous ce format. Il existe un fichier xml par dictionnaire. Par exemple le fichier ACT.xml correspondant à l'ensemble des actions web pour le site Web courant.

Copie

Ce bouton permet de copier un token bloc.