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).
Code |
Type |
Paramètres |
Nom de publication |
Description |
ADOCHTML |
Accès généré table |
Table AYTDOC |
AXTDHTML |
Accès au contenu HTML des pages XTEND |
AXTDLOGIN |
Action sous-programme |
Traitement AYTXTLOGIN |
AXTDLOGIN |
Login des utilisateurs XTEND |
AXTDFORM |
Action objet |
Objet AYZ |
AXTDAYZ |
Formulaires HTML XTEND (utilisé pour les contacts) |
ACOUNTRY |
Accès généré table |
Table TABCOUNTRY |
ACOUNTRY |
Accès à la table des pays |
ACURRENCIES |
Accès généré table |
Table TABCUR |
TABCUR |
Accès au détail d'une devise |
ALANGUAGES |
Accès généré table |
Table TABLAN |
TABLAN |
Accès au détail d'une langue |
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:
Code |
Groupe |
Dimension |
CAT |
RES |
10 |
CREDAT |
RES |
10 |
DES |
RES |
10 |
DOCCOD |
RES |
10 |
LAN |
RES |
10 |
TEXTE |
RES |
10 |
2. Cliquer sur OK
3. Vérifier qu'aucune erreur ne s'est produite (texte rouge dans la trace)
4. Fermer la trace
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:
Code | Groupe | Dimension |
FRMCOD | AYZ1_1 | 1 |
FCYCOD | AYZ1_1 | 1 |
STATUT | AYZ1_1 | 1 |
TTL | AYZ1_2 | 1 |
MAICOD | AYZ1_2 | 1 |
CREDAT | AYZ1_2 | 1 |
CREHEURE | AYZ1_2 | 1 |
CMT | AYZ1_4 | 1 |
PCT | AYZ1_5 | 1 |
PARNBR | AYZ1_3 | 1 |
PARCOD | AYZ1_3 | 40 |
PARVAL | AYZ1_3 | 40 |
2. Cliquer sur OK
3. Vérifier qu'aucune erreur ne s'est produite (texte rouge dans la trace)
4. Fermer la trace
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:
Code | Groupe | Dimension |
AXPARCOD | AX_PAR | 20 |
AXPARVAL | AX_PAR | 20 |
AXUSERCODE | AXLOG_PAR | 1 |
AXPWD | AXLOG_PAR | 1 |
AXUSERPROF | AXLOG_PAR | 1 |
AX3SOL | X3LOG | 10 |
AX3FLDR | X3LOG | 10 |
AX3LANG | X3LOG | 10 |
AX3USER | X3LOG | 10 |
AX3PWD | X3LOG | 10 |
AXLOGCOD | AXLOG_RES | 50 |
AXLOGVAL | AXLOG_RES | 50 |
SHIPADR1 | X3LOG | 10 |
SHIPADR2 | X3LOG | 10 |
SHIPCITY | X3LOG | 10 |
SHIPZIP | X3LOG | 10 |
2. Cliquer sur OK
3. Vérifier qu'aucune erreur ne s'est produite (texte rouge dans la trace)
4. Fermer la trace
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;
}