> Tech > Modifier l’application Webfaced

Modifier l’application Webfaced

Tech - Par iTPro - Publié le 24 juin 2010
email

Nous allons maintenant voir quatre méthodes permettant de personnaliser une application Webfaced et une technique pour déterminer quel type d'interface (terminal 5250 ou navigateur) est utilisée :

  • modifier les propriétés des projets
  • modifier le paramétrage Web d'un fichier écran
  • modifier les CSS de votre style Web
Modifier l’application Webfaced

modifier le modèle JSP PageBuilder

La figure 1 montre le WebFacing de
base et illustre les points de personnalisation
décrits ici. Pendant l’explication
du processus dans les sections
suivantes, vous pourrez vous reporter à  ce diagramme. Toutes les modifications
pour le projet modèle
sont faites avec des outils WDSc.
Premièrement, je crée un projet
WebFacing modèle nommé Cust-
Add et je convertis un fichier
écran nommé CUS010DF avec
un format d’enregistrement
unique nommé DATAENTRY.
Puis je sélectionne chaque objet
que je vais personnaliser dans le
projet CustAdd. La figure 2 affiche
les objets Webfaced du projet
(j’ai entourés les objets que
j’ai l’intention de modifier). Pour
toutes les personnalisations décrites
ici, les propriétés du projet
subsistent, même après plusieurs
conversions du projet ou
de l’un de ses fichiers écran.

Modifier les propriétés du
projet.
Pour accéder aux propriétés
du projet, faites un clic droit
sur votre projet WebFacing et
sélectionnez Properties pour
afficher une boîte de dialogue
Project Properties. Là , vous pourrez
définir les propriétés qui affectent votre application :
conversion, runtime et style. Exemple d’un changement de
style simple : l’attribut d’affichage clignotant présente une
police de taille 16, en gras et italique, pour attirer l’attention
de l’utilisateur du navigateur.
Modifier le paramétrage Web DDS. Utilisez l’outil WDSc
CODE Designer pour modifier tous les fichiers écran DDS
qui affectent le contenu et l’apparence de l’interface Web.
CODE Designer offre des boîtes de dialogue de paramétrage
Web spéciales ayant pour effet d’insérer des instructions de
commentaires spéciales dans le code source du DDS fichier
écran. Les commentaires DDS spéciaux commencent par la
chaîne de caractères %%WB. Comme avec les propriétés du
projet, les paramètres Web DDS restent en vigueur au fil des
reconversions.
Il y a beaucoup de paramètres Web disponibles pour les
objets DDS, selon le type d’objet, comme le montre le
tableau de la figure 3. Bien que le tableau ne donne pas la
liste des champs utilisés pour l’entrée et la sortie, leurs paramètres
Web sont les mêmes que pour les champs destinés à 
l’entrée. On voit que certains des paramètres offrent de nombreuses
possibilités de personnalisation. Par exemple, avec
HTML défini par programme, vous pouvez créer une liste de
sélection déroulante fondée sur l’information extraite de
votre base de données, pour fournir une liste dynamique dans laquelle un utilisateur du navigateur
pourra sélectionner des valeurs.
Avant d’utiliser le CODE Designer
pour définir une propriété Web d’un
DDS fichier écran, sachez que vous ne
pourrez plus maintenir le DDS en utilisant
SDA (Screen Design Aid) une fois
que le paramètre Web aura été défini.
Pour changer les paramètres Web pour
votre DDS, faites un clic droit sur le fichier
écran que vous voulez modifier
et sélectionnez Open With et Code
Designer. Pour le projet modèle de la
figure 2, c’est la deuxième rubrique entourée,
le fichier CUQ010DF. Ce paramètre
active CODE Designer.
Pour démontrer la manière de modifier
un paramètre Web pour le projet
CustAdd, je vais mettre en italique la
constante titre pour l’enregistrement
DATAENTRY via le tag HTML <i>.
Pour cela, je sélectionne la constante
Customer_Data_Entry dans le panneau
de gauche sous le format d’enregistrement
DATAENTRY (figure 4),
l’onglet Web Settings dans le panneau
central inférieur, et l’option User defined
HTML. Ensuite, je coche la case
Specify HTML et je place un onglet début
d’italique avant la constante titre et
un onglet fin d’italique après la
constante titre dans la zone Insert field
value. Après avoir changé les paramètres
Web pour un fichier écran, je
sauvegarde le fichier et le reconvertis
en faisant un clic droit sur le fichier
écran et en sélectionnant l’option
Convert.

Modifier un CSS. Comme j’ai sélectionné
le style Web avenue pour le
projet CustAdd, WDSc va créer un CSS
nommé avenue.css. Pour le projet
CustAdd, je peux changer la couleur de
fond du CSS avenue en un fichier
image contenant un fond personnalisé,
en double cliquant sur le fichier
avenue.css. Cette manoeuvre permet à 
l’outil WDSc CSS Designer d’ouvrir le
fichier.
L’outil CSS Designer ouvre deux
cadres : le cadre de gauche contient les
instructions source de la feuille de
style et le cadre de droite prévisualise
les éléments HTML définis par la feuille
de style. Pour modifier l’attribut de
fond de l’élément HTML BODY, je remplace
le code couleur #ffffff par l’URL
(CustAdd/image/bg-green.jpg) pour
l’image de fond à  utiliser (figure 5) puis
je sauvegarde le fichier avenue.css.

Modifier le PageBuilder.jsp.
L’outil WebFacing crée un JSP spécial nommé PageBuilder.jsp, qu’il utilise comme modèle pour les
pages de votre application. L’usage d’un modèle JSP maintient
la cohérence du thème de l’application sur toutes les
pages de celle-ci. PageBuilder est aussi lié au CSS décrit dans
la section précédente, ce qui garantit un style d’application
homogène.
Pour illustrer une modification simple apportée à  la JSP
PageBuilder, j’ai enlevé le logo WebFacing IBM par défaut
pour le projet CustAdd en double-cliquant sur PageBuilder.
jsp. Cette action ouvre le fichier avec l’outil WDSc Page
Designer. Page Designer a trois modes : Design, Source, et
Preview. Pour sélectionner le mode Design, cliquez sur l’onglet
Design. Ensuite, dans la partie gauche supérieure de la
page, faites un clic droit sur l’image du logo et choisissez
l’option Delete dans le menu déroulant. Une fois que l’image
a été retirée de la page, sauvegardez cette page. Mon
PageBuilder.jsp avait un fond vert à  cause du changement
que j’avais apporté au fichier avenue.css dans la section précédente.

Déterminer le type d’interface utilisateur. Comme le
même programme sert à  la fois l’interface navigateur d’une
application Webfaced et l’interface terminal 5250, il sera parfois
intéressant de connaître le type d’interface utilisateur.
Par exemple, vous décidez de créer une logique d’affichage
séparée pour les utilisateurs du navigateur, qui s’affranchit
des restrictions du protocole 5250 quant au nombre de
lignes qu’un sous-fichier peut afficher. Pour les utilisateurs
du navigateur, vous pourriez écrire la logique d’affichage
pour construire une table HTML au lieu d’utiliser le sous-fichier.
Pour cela, votre programme doit
connaître le type d’interface utilisateur.
L’API QqfEnvironment peut
fournir cette information. Il vous suffit
de définir un prototype pour la
procédure.
QqfEnvironment, de définir une
variable chargée de recevoir le code
retour en provenance de la procédure,
puis d’exécuter la procédure. Le code
retour sera 1 pour les utilisateurs du
navigateur et 0 pour les utilisateurs du
5250.
La figure 6 affiche un exemple de
programme RPG qui applique l’API
QqfEnvironment. Un programme qui
utilise l’API QqfEnvironment doit être
créé en deux étapes : (1) créer le module RPG avec la commande
CRTRPGMOD (Create RPG Module), et (2) créer le
programme avec la commande CRTPGM (Create Program) et
le lier au programme de service QQFENV en utilisant la
valeur de paramètre BNDSRVPGM (Bind Service Program)
de QQFENV.

Téléchargez gratuitement cette ressource

Le Guide d’Orchestration du Parcours client

Le Guide d’Orchestration du Parcours client

Au-delà de la clarification des nouveaux concepts de gestion du parcours client, ce guide vous permettra de définir, créer et mettre œuvre une orchestration complète articulée autour des trois volets essentiels au succès de l’expérience client et de l’entreprise.

Tech - Par iTPro - Publié le 24 juin 2010