Le site ASAMPLE

Contenu

Ce document présente le site XTEND ASAMPLE qui est le site par défaut livré avec XTEND et qui contient la définition des tokens XTEND standards ainsi qu'un projet HTML construit avec le logiciel de création web DreamWeaver.

Ce projet contient des pages d'exemple (accueil, à propos, login, contact, erreur....) pour aider le développeur XTEND à démarrer un projet. 

Le projet HTML

Les fichiers

Le site HTML ASAMPLE est basé sur un modèle (Template) Dreamweaver.

Structure des pages

Le modèle de page ('Template\ASAMPLE.dwt') propose un découpage via l'utilisation des 'zones éditables' et 'librairies .lbi' en un contenu principal et des élément communs à toutes les pages :

• le nom de l'entreprise en haut à gauche
• une zone d'affichage des message en haut à droite
• un menu gauche
• un menu bas
• une feuille de style
• 2 fonctions JavaScript pour factoriser les traitements
• au chargement de la page (xBodyOnLoad)
• sur un clic souris sur un lien dynamique (xtdDoMyDlk)

Zones éditables

Le modèle propose le découpage en 'zones éditables' suivant:

• Le titre de la page (doctitle)
• Le header HTML (head)
• Le contenu avant le tag FORM (beforeForm)
• Le contenu principal (Content)
• Le contenu après le tag FORM (afterForm)

Librairies

Un modèle de page 'Template\ASAMPLE.dwt' composé des librairies suivantes:

• Une cellule TopLeft.lbi qui contient le nom de l'entreprise
• Une cellule TopRight.lbi qui contient la date du jour et les messages utilisateurs (Token aMsgUser)
• Un menu bas (BottomMenu.lbi)
• Un menu gauche (LeftMenu.lbi)

La librairie pagination.lbi est utilisée pour gérer la pagination dans les tableaux XTEND.

Elements graphiques

Des éléments graphiques suivants:

• Une feuille de style my.css.
• Une ensemble d'images dans le répertoire IMG\
• Les images des drapeaux des pays FLAGS\ utilisées dans la page 'liste des pays'

Pages Html

Des pages html de présentation suivantes:

• home.html
• about.html
• account.html
• contact.html
• countries.html
• login.html

Des pages html techniques suivantes:

• notavail.html
• reconnection.html
• error.html

Fichiers

Emplacement

Le projet HTML ASAMPLE est stocké sur le serveur X3 principal dans le répertoire X3_PUB/X3FOLDER/X_TEND/X_HTML/ASAMPLE/FRA en français et ../ENG en anglais.

X3_PUB
Répertoire de publication de tous les dossiers de la solution courante

X3FOLDER
Nom du dossier X3 courant

Si les fichiers du site ASAMPLE ne sont pas présents dans ce répertoire c'est que XTEND n'est pas disponible pour le dossier X3 courant.

Sous unix vérifiez que tous les fichiers du projet HTML ont les droits d'accès suivants:

• 'Read' pour tous
• 'Read/Write/execute' pour les développeurs XTEND

Faire une copie en local

Nous conseillons de ne jamais modifier le site ASAMPLE mais d'en faire des copie de travail locale en modifiant le nom du site.

Télécharger le contenu du site en local via un client FTP type FileZilla.

Si vous souhaitez réaliser un nouveau site à partir de ce modèle vous devez au préalable installer DreamWeaver. Créer ensuite un nouveau site qui pointe sur le le répertoire téléchargé en local.

Par contre si vous n'avez pas DreamWeaver et souhaitez effectuer des tests vous pouvez modifier les pages HTML avec un éditeur de texte type NotePad++ ou PSPad et effectuer la mise à jour distante (sur le serveur X3) via le client FTP. Dans ce cas vous pouvez supprimer les répertoires 'Library' et 'Templates'.

Gestion du contenu

Le contenu des pages n'est pas stocké dans la page HTML mais dans la base de données X3 accessible via la fonction XTEND Contenu Html.

Le but est de montrer comment il est possible de gérer le contenu HTML du site dans X3.

Cette méthode n'est pas optimale du point de vue des temps de réponses car l'appel du web services de lecture du contenu HTML (CLOB) est moins performant que l'affichage direct d'une page HTML par le serveur HTTP.

Dans la pratique il s'agira de trouver un compromis entre performance qui dépend de nombreux facteurs (infrastructure réseau/machines, taille des documents, charge du serveur X3...) et la facilité d'administration du site XTEND.

Techniquement le contenu est affiché par un champ (TEXTE) dont la valeur est fournie par un bloc (ABLKDOCHTML).

Ce bloc sélectionne le contenu HTML de la page en fonction du nom de la page Web(champ DOCCOD) via l'appel d'une interface (ADOCHTML) qui est de type 'Accès généré table'.

Liste des pages

Pages de contenu

home
Page d'accueil (Nom=AHOME)

about
Page 'A propos'(Nom=AABOUT)

contact
Page de saisie d'un formulaire HTML et enregistrement dans X3 (Alias=ACONTACT)

login
Page de login XTEND (Nom=ALOGIN)

account
Page d'affichage des information utilisateur après login (Nom=AACCOUNT)

countries
Page d'exemple d'un 'Accès données' et d'un lien liste/détail qui affiche la liste (paginée) des pays (table TABCOUNTRY) et permet de sélectionner un pays pour afficher les informations (détail) sur la devise et la langue (Nom=ACOUNTRIES)

Pages techniques

Les pages suivantes sont des pages techniques définies au niveau du site XTEND.

error
Affichée lorsque qu'un erreur grave (Exception) se produit (Nom=AERROR)

notavail
Affichée lorsque le site n'est pas disponible (Nom=ANOTAVAIL)

reconnection
Affichée lorsque l'utilisateur retrouve sa session après fermeture de son navigateur (Nom=ARECONNECTION)

Remarque

Le site fonctionne pour la langue ENG. Tous les pages ne sont pas disponibles dans cette langue.

Lien SAFE X3

Ce paragraphe présente la liste des interfaces et web services utilisés par le site ASAMPLE et indique comment les activer lors de la mise en oeuvre d'XTEND.

Création du pool de web services

Les web services ne peuvent fonctionner qu'après avoir défini un pool web service XTEND par défaut.

Valider le pool après création pour qu'il soit pris en compte par le serveur XTEND.

Opérations à effectuer via la console X3

Le dossier X3 courant doit être publié sur un serveur X3WEB via la console X3 et vous devez trouver une entrée sur ce dossier dans la liste des 'Pools de web services' accessible via la fonction X3 GESAYS(Menu Outils/Pools de Web services).

Si la liste est vide ou ne contient pas votre dossier X3 c'est que :

• le dossier X3 n'a pas été publié sur un serveur X3WEB
• aucun pool de connexion n'a été défini pour ce dossier X3 dans la configuration du serveur de web service

Ces 2 opérations doivent être effectuées via la console X3.

Définition du pool de web service XTEND

Cette opération consiste à définir un pool de connexions par défaut qui sera le 'point d'entrée' (URL) de tous les appels de web services utilisés par le site ASAMPLE.

Aller au Pool de web services.

Si le pool de nom 'ADEFAULT' est présent dans la liste, modifier les informations :

• 'Pool X3' pour qu'il pointe sur votre serveur de web service et sur le bon pool de connexions
• 'Utilisateur' avec les informations de login X3 valides

Si le pool n'existe pas, se référer à au document pool web service XTEND pour le créer avec le nom 'ADEFAULT'.

Les interfaces

Ce paragraphe présente les opérations à effectuer pour activer les interfaces utilisées par le site ASAMPLE.

Le site ASAMPLE utilise les 3 interfaces suivantes qui sont accessibles via la fonction interface(GESAYI).

Paramètres communs à toutes les fiches interfaces

Pool par défaut:Oui

Accès protégé:Non

Affichage des messages:Cocher information, avertissement, erreur

Interface ADOCHTML

1. Ouvrir la fiche interface ADOCHTML

2. Vérifier les paramètres suivants et les modifier si ils ne sont pas corrects
  Type:'Accès généré table'
  Code table:AYTDOC
  Nom de publication:AXTDHTML

3. Générer l'accès en cliquant sur le bouton 'Générer l'accès'
       Les éléments suivants sont créés automatiquement : traitement WTAXTDHTML, la fiche sous-programme WTAXTDHTML/ACCTAB et le web service AXTDHTML
       1. Vérifier les paramètres suivants et les modifier si ils ne sont pas corrects
              Nb. max de lignes:10
              Tableau des champs:

4. Enregistrer et valider la fiche

Interface AXTDFORM

1. Ouvrir la fiche interface AXTDFORM

2. Vérifier les paramètres suivants et les modifier si ils ne sont pas corrects
  Type:'Ation utilisateur objet'
  Objet:AYZ
  Nom de publication:AXTDAYZ

3. Générer l'accès en cliquant sur le bouton 'Générer l'accès'
       Les éléments suivants sont créés automatiquement : traitement WJAXTDAYZ et le web service AXTDAYZ
       1. Vérifier les paramètres suivants et les modifier si ils ne sont pas corrects
           Tableau des champs:

4. Enregistrer et valider la fiche

Interface AXTDLOGIN

1. Ouvrir la fiche interface AXTDLOGIN

2. Vérifier les paramètres suivants et les modifier si ils ne sont pas corrects
  Type:'Ation utilisateur sous-programme'
  Traitement:AYTXTLOGIN
  Sous-programme:ACTION
  Fiche sous-programme ( par tunnel sur le champ traitement) : AYTXTLOGIN/ACTION

3. Générer l'accès en cliquant sur le bouton 'Générer l'accès'
       Les éléments suivants sont créés automatiquement : le web service AXTDLOGIN
       1. Vérifier les paramètres suivants et les modifier si ils ne sont pas corrects
           Tableau des champs:

4. Enregistrer et valider la fiche

Interfaces ACOUNTRY/ACURRENCIES/ALANGUAGES

Procédure identique à l'interface ADOCHTML avec les tables TABCOUNTRY, TABCUR, TABLAN.

Le JavaScript

L'utilisation du JavaScript dans le site ASAMPLE se limite :

• au contrôle de certaines données saisies
• à la gestion de l'affichage des messages

Dans notre exemple nous proposons un certain nombre de points d'entrée standards qui sont programmés dans le fichier modèle DreamWeaver (ASAMPLE.dwt) et accessibles à toutes les pages basées sur ce modèle.

Librairie XTEND

Le code JavaScript spécifique à XTEND est inséré dans la page HTML via le token 'ALIBJS'. Ce token insère:

• la librarie prototype.js
• les libraries JavaScript XTEND
• une feuille de style XTEND

<script  adx="ALIBJS"></script>

Chargement de la page HTML

// onLoad event handler for all pages
function xBodyOnLoad()
{
   // Set '0' value for unselected checkboxes
   xtdSetUnSelelectedValue('0');
   // pageBodyOnLoad is the page onLoad handler
   if (typeof(pageBodyOnLoad)=="function")
       pageBodyOnLoad();
   }
}

pageBodyOnLoad

Ce point d'entrée permet d'effectuer des traitements spécifiques à la page HTML sur l'évènement '<BODY onLoad>' de la page.

Pour activer ce point d'entrée il suffit de déclarer une fonction JavaScript 'function pageBodyOnLoad(){}' dans la page HTML.

Traitements sur clic sur un lien dynamique

Cette fonction permet d'effacer le message utilisateur et d'appeler le point d'entrée de contrôle des clics sur un lien dynamique.

// Called each time the user clicks on an XTEND link
function xtdDoMyDlk(aDomOut)
{       
   // Clear user messages
   xtdRemoveElmtId("xtdusermsg",true);
   var wContinue=true;
   // Call page handler pageDoMyDlk if any
   if (typeof(pageDoMyDlk)=="function") wContinue=pageDoMyDlk(aDomOut);
   return wContinue;
}

pageDoMyDlk

Ce point d'entrée permet d'effectuer des traitements spécifiques à la page HTML sur clic sur un lien dynamique.

Pour activer ce point d'entrée il suffit de déclarer une fonction JavaScript 'function pageDoMyDlk(){aDomOut}' dans la page HTML.

//Asks user to confirm creation of a new form if user clicks on ADLKCONTACTNEW dynamic link
function pageDoMyDlk(aDomOut)
{
   if (aDomOut.isDlk("ADLKCONTACTNEW"))
      return confirm('Confirmer la création du formulaire\nConfirm creation');
   return true;
}