WebFacing 5.20 (suite)

Si vous souhaitez modifier l'apparence de vos pages Web.

Trois solutions s'offrent à vous

  1. Modifier, sous WDS client, le style associé à vos pages JSP
    (soit avec Webfacing, soit dans la perspective WEB de WDS client)
  2. Indiquer dans le source (SDD) des options destinées à la transformation WebFacing
    (vous utiliserez pour cela CODE Designer)
  3. Modifier vos pages JSP, Attention, une nouvelle génération de la pages JSP annule toute votre personnalisation.

Mais tout d'abord, regardons comment modifier le titre :

Sous la perspective Webfacing, Ajoutez une nouvelle commande (on ne peut pas modifier)

, puis indiquez la même commande mais avec le bon titre

ensuite, relancer le projet (sinon les servlet restent chargées dans WAS)

et voilà !

Une autre solution en terme de présentation est de modifier la page modèle PageBuiler.JSP dans /style/nom-du-style

Indiquez ensuite, la présentation des touches de fonction.

Reconnaissance automatique en fonction du libellé :

Définition des touches de fonction disponibles, mais non affichées


Ensuite, définition du style (il s'agit véritablement d'éditer le style au sens HTML)

Couleurs de remplacement


police à appliquer aux différents attributs (RI, BL, etc...)

Caractéristiques d'affichage des fenêtres

Affichage des sous-fichiers

Et, style des touches de fonction

 

Si vous avez choisi l'option concepteur de style, vous devez retravailler le style "à la main"

Pour retravailler la page qui sert de modèle (pagebuilder.jsp), ouvrez là

Voyez le code (si vous en avez les compétences) en cliquant sur l'onglet "source"

pour retravailler le style, modifiez la page "template", comme ceci:

vous éditez le fichier WFB_blue.jtpl

Regardons ensuite, le paramétrage dans le source des DSPF:

Il doit se faire sous CODE Designer, cliquez (droit) sur un DSPF

ATTENTION, lors de la première utilisation de CODE/400 (dont fait partie Code Designer), le produit cherche à écrire dans le fichier hosts , une entrée R0(zéro)-votre-connexion (par exemple R0AS400 si votre connexion RSE s'appelle AS400). Il faut alors (et uniquement lors de cette première utilisation) avoir les droits administrateur sur le poste client.

 

vous utiliserer cet onglet :

ce qui va insérer des commentaires particuliers commencant par %%WB, destinés à WebFacing.

En version WDSc V6, vous pouvez ouvrir le fichier avec LPEX (option d'ouverture par défaut)

Utilisez ensuite la vue Structure

puis l'onglet Paramètres Web, qui contient le paramétrage de l'élément sélectionné ci dessus.



Pour un format, vous pouvez revenir sur le libellé des touches de fonction (%%WB 9) et l'ordre d'apparition (%%WB 11)


Affichage initial (F3=Exit, dans le source)

Que nous remplacons par :

Ensuite les variables (ou constantes) du format

  • Visibilté (%%WB 4)

    pour ne pas afficher cet élément dans la page JSP
  • Emplacement

    pour spécifier une taille (%%WB 14)
    ou une nouvelle position (%%WB 2)


La page JSP résultat est structurée avec un tableau (balise html <table>) de 24 lignes et 80 colonnes ( ou 27x132).

  • Chaque information utilise l'attribut colspan (nbr de colonnes)
    et rowspan (nbr de lignes) de la balise <TD>.
  • Changer l'étendue, indique la place à occuper (colspan)
  • Modification de position , la position de début (ligne / colonne)
  • Indique que cet élement doit être placé tel que dans la page JSP (la variable est supposée contenir du HTML généré par le programme RPG/COBOL) %%WB 16
  • Saisissez du code HTML à afficher à la place :
    (vous pouvez inserer la variable dans le code HTML) %%WB 17
  • Indiquez ici
    • une classe de style que vous auriez définie dans la feuille .ccs, (voir le cours associé) %%WB 1
    • un texte de remplacement
      (constante ou zone en sortie uniquement) %%WB 3
    • ou bien les caractères à masquer.
      %%WB 5
      Constante :

     Variable :
  • ajouter du HTML à cet élément , en plus du code généré
    • Avant (%%WB 6)
    • Dans le HTML généré (title="xxx" founit une info-bulle pour une zone de saisie) %%WB 7
    • Après (%%WB 8)
  • Options pour VALUES, permet d'associer des libellés aux valeurs admises dans une zone d'entrée. (%%WB 14)
  • Création d'un lien vers une image(référence à un logo, par exemple) pour une zone de sortie (%%WB 13)

    l'image est affichée à la place du texte
     Attention :
Si vous référencez une image locale (C:\ , plutôt que Http://) elle sera incluse au projet dans le répertoire \images\generated et il faudra penser à l'ajouter aux fichiers publiés (exportés) sur l'AS/400.
  • Création d'un lien hypertexte pour une zone de sortie : (%%WB 12)
    • Choisir une zone permet de créer un lien contenant la valeur de la variable
      (affichage de la photo)
      %%WB 12 FLD 3



    • Définir la valeur de la zone et soumettre permet de simuler la saisie d'une valeur dans une zone d'entrée à partir de cet élément.
      %%WB FLD 4 à 8

 

 

Prenons quelques exemples :

• Insertion d'une image à la place de cette constante



bien sûr, il faut sauvegarder

par curiosité, regardons le source généré :

il faut relancer la conversion, pour ce DSPF:

, puis redémarrer le projet.

La structure de la page est basée sur une division en 24 lignes et 80 colonnes à l'aide d'un tableau HTML.

Chaque élément affiché (constante ou variable) est une cellule de ce tableau (balise <td> ) et occupe un certain nombre de colonnes (avec l'attribut colspan, qui indique que cette cellule en remplace plusieurs).

Quand vous venez placer une information (comme ici notre image) vous bousculez un peu cette organisation et vous risquez de décaler tout ce qui suit vers le bas et vers la droite, sauf à utiliser dans le HTML inséré :

             <DIV position:absolute ...> votre html </DIV>

 

 

• Options pour values (remplacer les valeurs d'une option sous fichier, par un libellé)


• Insertion d'un lien, contenant une variable


• Insertion d'un lien, définissant la valeur d'une zone

la zone CLE, posséde maintenant un lien.

cliquer sur ce lien revient à saisisr 2 dans OPTION

Résumé des commentaires compris par WebFacing :

Code Webfacing  en commentaire paramètres signification 
%%WB 1 FLD
 nom-de-classe affectation d'une classe de style 
%%WB 2 FLD
 ligne   colonne nouvel emplacement 
%%WB 3 FLD
 longueur | valeur nouvelle constante (remplacement de caractères) 
%%WB 4 FLD
   masquage de la zone 
%%WB 5 FLD
 debut | fin masquage partiel (du caractère , au caractère) 
%%WB 6 FLD
 code-html Insertion de HTML AVANT 
%%WB 7 FLD
 code-html Insertion de HTML A l'intérieur 
%%WB 8 FLD
 code-html Insertion de HTML APRES 
%%WB 9 REC
 n°-touche-CA=libellé libellé d'une touche de fonction (CA ou CF) niveau format 
%%WB 9 FIL
 n°-touche-CA=libellé libellé d'une touche de fonction (CA ou CF) niveau fichier 
%%WB 10 REC
   taille d'affichage secondaire 
%%WB 11 REC
 touche1 touche2 touche3 Ordre et visibilité des touches de fonction 
%%WB 12 FLD 3
 URL | fenêtre-cible Lien Hypertexte 
%%WB 12 FLD 4
 fld=zone-cible|value=origine|function=action Définir la valeur de la zone et action (ENTER, CA03) 
%%WB 12 FLD 5
 fld=zone-cible|value=zone Définir la valeur de la zone 
%%WB 12 FLD 6
 action lien hypertexte=action 
%%WB 12 FLD 7
 fonction-javascript lien hypertexte=fontion javascript 
%%WB 12 FLD 8
 fld=zone-cible|value=origine|function=javascript Définir la valeur de la zone et fontion javascript 
%%WB 13 FLD 1
 Largeur | Hauteur | nom-image remplacement par une image 
%%WB 14 FLD
valeur1=libellé-1 | valeur2=libellé-2 | ... option pour values 
%%WB 15 FLD
nombre-de-lignes nombre-de-colonnes étendue 
%%WB 16 FLD
  code HTML fournit par le programme 
%%WB 17 FLD 1
 code-html Ajout de code HTML 
%%WB 18 REC 1
 code-javascript Insertion de code Javascirpt au niveau format 
%%WB 19 FLD
   Transmission d'une zone de type H

Pour terminer, personnalisation directe de la page JSP résultat :

(Nous sommes d'accord, si vous regénérez le projet ou la page, vous perdez vos modifications)

ici, nous passons en gras la clé et en italique les autres constantes :


ATTENTION à ne pas toucher aux scriptlets JSP !

Résultat :

Trucs et astuces

• Si vous souhaitez intégrer du JavaScript à votre page, le plus simple est d'ajouter un fichier javascript (.js) au répertoire
Web Content\ClientScript\usr\ Pour cela prenez la vue (l'onglet) Navigateur et faites Nouveau>Autre...puis Fichier Javascript

Tapez votre code, par exemple :

function doClock() {

      window.setTimeout( "doClock()" , 1000); // réaffichage toutes les secondes
      jour = new Date();
     self.status = jour.toLocaleString(); // date au format Français(local)
     }

doClock()

Vous verrez apparaître dans la ligne d'état (status) la date et l'heure du jour au format local.

 

• Pour lancer directement une application, utilisez comme URL "/nom-application/WFLogon?option1&option2"

Option peut prendre l'une ou plusieurs des valeurs suivantes :

    • inv=clnnnnnn :   utiliser le fichier d'invocation clnnnnnn.invocation dans /WEB-INF/classes/conf
      ce fichier contient tous les paramètres d'invocation de l'application, mot de passe (crypté) inclus.
    • clcmd=cde :       commande de lancement
                                (attention remplacez les espaces par %20, par exemple call%20prog)
    • host=AS400 :     serveur WebFacing (nom ou adresse ip)
    • port=xxxx :         port IP du serveur
    • userid=profil :     profil d'ouverture de session
    • password=pwd : mot de passe du profil

    Pour rediriger depuis une servlet, utilisez les méthodes forward (redirection réalisée par le serveur) ou sendRedirect (on envoi un code 302 au navigateur client ainsi que la nouvelle URL)

     

• Enfin, dernier point, si vous souhaitez effectuer un traitement particulier dans votre programme en fonction de l'environnement
(5250 ou Webfacing), utilisez l'API QqfEnvironment du programme de service QQFENV :

En CL: 
DCL  VAR(&RETOUR) TYPE(*CHAR) LEN(4) 
DCL  VAR(&WEBFACING) TYPE(*CHAR) LEN(4) +     
      VALUE(X'00000001')                     
DCL  VAR(&ENV5250) TYPE(*CHAR) LEN(4) +       
      VALUE(X'00000000')                     

 
 CALLPRC PRC('QqfEnvironment') RTNVAL(&RETOUR) 
 
 IF COND(&RETOUR *EQ &ENV5250') THEN(DO) 

     .../...      /* env 5250      */
 ENDDO

 ELSE CMD(DO)
     .../...      /* env Webfacing */
 ENDDO


En RPG4 (vous pouvez compiler par CRTBDNRPG ou 14 sous PDM) :

H dftactgrp(*no) actgrp(*caller)   


DQQFENV           pr            10I 0 extproc('QqfEnvironment')  

 /free                                                            
    if QQFENV() = 1 ;                                              
    // webfacing       
   else ;           
    //5250          
    dsply 'bonjour';
   endif;           
   *inlr = *on;     
 /end-free

 

Pour plus de détails et suivre les nouveautés voyez : http://www-306.ibm.com/software/awdtools/wdt400/library/WebFacingAppDev.html

 

Copyright © 1995,2006 VOLUBIS