CODE Designer peut être installé en option avec WebSphere Development Studio Client for iSeries jusqu'à la version 7.0 de ce produit. L'outil IBM WebFacing version 7.1 et suivante inclut les options Paramètres Web qui n'existent pas dans CODE Designer. Il est vivement conseillé d'utiliser la vue Paramètres Web de l'outil IBM WebFacing pour les personnalisations de paramètre Web. Pour plus d'informations, consultez Utilisation des paramètres Web avec le source DDS.
Nous vous recommandons d'utiliser l'option Paramètres Web avec votre source DDS pour personnaliser votre application. Vous pouvez utiliser l'onglet Paramètres Web de CODE Designer pour personnaliser l'aspect et le fonctionnement de vos programmes lors de l'accès via un navigateur Web. Les programmes qui utilisent le source DDS pour décrire des écrans de terminal 5250 sont accessibles via un navigateur Web après conversion du source à l'aide de l'outil WebFacing. Les Paramètres Web vous permettent de manipuler individuellement la présentation Web des écrans et des zones qu'ils contiennent. Pour modifier la présentation Web de plusieurs écrans ou d'un projet WebFacing complet, utilisez la page Propriétés de style. L'installation de CODE Designer est facultative.
Pour accéder à CODE Designer, vous pouvez utiliser la barre de menus Windows Démarrer de WebSphere Development Studio Client for iSeries ou de l'outil IBM WebFacing. Pour charger la source DDS dans CODE Designer depuis l'outil IBM WebFacing :
Une fois qu'un membre source DDS est chargé dans CODE Designer, vous pouvez accéder aux Paramètres Web en cliquant sur les icônes de l'arborescence DDS de CODE Designer. L'arborescence DDS se trouve dans la partie gauche de la fenêtre de CODE Designer. Vous pouvez également accéder aux paramètres Web en sélectionnant des objets DDS dans les objets Détails et ECRAN de CODE Designer. S'il existe des Paramètres Web pour l'objet sélectionné, l'onglet Paramètres Web est affiché dans la sous-fenêtre inférieure de CODE Designer.
Le concepteur CODE vous permet de concevoir graphiquement des écrans DDS. Dans CODE Designer, chaque objet DDS est représenté par une icône ou un bouton de fonction. Par exemple, les boutons de fonction permettent de créer facilement des zones nommées ou des constantes texte pour l'écran DDS. Les Paramètres Web disponibles pour un objet DDS sont différents selon l'objet que vous utilisez. Le tableau ci-après répertorie les Paramètres Web disponibles pour chaque objet DDS. Pour plus d'informations sur chaque paramètre, voir Description des Paramètres Web. Lorsque vous utilisez des Paramètres Web pour un objet, des commentaires spéciaux sont ajoutés au source DDS qui est ensuite traité par la conversion WebFacing. Les commentaires associés aux Paramètres Web commencent par *%%WB.
Objet DDS | Représentation graphique de CODE Designer | Paramètres Web disponibles |
---|---|---|
Enregistrement standard | ![]() |
|
Enregistrement de contrôle de sous-fichier | ![]() |
|
Zone de date | ![]() |
|
Zone d'heure | ![]() |
|
Zone d'horodatage | ![]() |
|
Constante de type message | ![]() |
|
Constante date | ![]() |
|
Constante heure | ![]() |
|
Constante utilisateur | ![]() |
|
Constante système | ![]() |
|
Zone nommée (admettant les entrées) | ![]() |
|
Zone prolongée (admettant les entrées) | ![]() |
|
Zone de référence source (acceptant les entrées) | ![]() |
|
Zone de référence de base de données (admettant les entrées) | ![]() |
|
Zone de référence de base de données par sélection (admettant les entrées) | ![]() |
|
Zone nommée (Sortie) | ![]() |
|
Zone prolongée (Sortie) | ![]() |
|
Zone de référence source (Sortie) | ![]() |
|
Zone de référence de base de données (Sortie) | ![]() |
|
Zone de référence de base de données par sélection (Sortie) | ![]() |
|
Constante texte | ![]() |
|
Zone date (masquée) | ![]() |
|
Zone heure (masquée) | ![]() |
|
Zone nommée (masquée) | ![]() |
|
Zone prolongée (masquée) | ![]() |
|
Zone de référence source (masquée) | ![]() |
|
Zone de référence de base de données (masquée) | ![]() |
|
Zone de référence de base de données par sélection (masquée) | ![]() |
Pour les touches de fonction ou de commande contenues dans votre source DDS, vous pouvez indiquer les libellés à utiliser dans vos pages Web pour représenter les touches. Pour modifier un libellé, sélectionnez-le dans la liste Libellés déjà définis, entrez le texte qui vous convient pour la touche dans la zone Nouveau libellé et cliquez sur Modification. Pour retirer un libellé que vous avez défini, sélectionnez-le dans la liste Remplacer les libellés dans les paramètres Web et cliquez sur Retrait.
Pour les touches de fonction ou de commande contenues dans votre source DDS, vous pouvez indiquer si les touches seront visibles dans vos pages Web et l'ordre dans lequel les touches seront affichées. Pour utiliser ce paramètre, cochez la case Modifier l'ordre et la visibilité des touches de commande. Pour rendre une touche visible, sélectionnez-la dans la liste Masqué et cliquez sur la flèche pour la déplacer dans la liste Ordre d'affichage. Pour masquer une touche, sélectionnez la touche dans la liste Ordre d'affichage et cliquez sur la flèche pour la déplacer dans la liste Masqué. Si plusieurs touches sont disponibles dans la liste Ordre d'affichage, vous pouvez modifier l'ordre dans lequel la touche est affichée en sélectionnant la touche et en cliquant sur le bouton Haut ou Bas. Si la case Modifier l'ordre et la visibilité des touches de commande n'est pas cochée, les clés définies seront affichées par ordre numérique.
Le
paramètre Taille d'affichage est disponible si une taille d'affichage
secondaire a été sélectionnée pour le fichier écran. Vous pouvez
définir des tailles d'affichage secondaires dans la boîte de
dialogue de propriétés de l'icône Noeud de fichier qui figure dans l'arborescence DDS. Le paramètre Web Taille d'affichage permet de modifier la taille de la table HTML qui permettra d'afficher
votre application dans un navigateur.
Les options disponibles pour le paramètre Visibilité sont Masquer la zone et Afficher la zone. Si vous sélectionnez Afficher la zone, celle-ci apparaîtra sur vos pages Web.
Les options disponibles pour le paramètre Emplacement sont Changer la plage et Changer la position. Une fois que votre source DDS est converti à l'aide de l'outil WebFacing, votre application est positionnée sur une page Web à l'aide d'une table HTML. La table HTML comporte le même nombre de lignes et de colonnes que l'écran DDS -- 24 par 80 ou 27 par 132. A l'aide des paramètres Emplacement, vous pouvez modifier la manière dont les zones seront positionnées dans la table HTML après la conversion du source.
La visualisation d'écran de CODE Designer indique la présentation des lignes et des colonnes de votre source DDS. Elle vous permet d'avoir une idée de la manière dont vos zones seront positionnées les unes par rapport aux autres si vous effectuez des modifications à l'aide des options Changer la plage et Changer la position.
Avec le paramètre Code HTML défini par le programme, cochez la case Utiliser valeur de la zone comme code HTML si la valeur renvoyée est un marquage HTML que vous souhaitez utiliser dans votre page.
Ce paramètre vous permet de spécifier le texte ou les balises HTML qui peuvent être affichés avec la valeur de votre zone ou à la place de celle-ci. Pour utiliser ce paramètre, cochez la case Spécifier code HTML. Dans la zone d'entrée, tapez les balises HTML que vous souhaitez utiliser. Si vous souhaitez intégrer la valeur de votre zone au code HTML, cliquez sur le bouton Insérer valeur de la zone. Vous pouvez par exemple utiliser ce paramètre si vous souhaitez que la valeur de votre zone apparaisse en caractères gras. Pour ce faire, utilisez la balise <BOLD> avec le texte &{value.FIELD}. Dans cet exemple, modifiez la zone de saisie de manière à ce que <BOLD>&{value.FIELD}</BOLD> s'affiche. Si le code de &{value.FIELD} n'est pas présent par défaut, vous pouvez l'ajouter en cliquant sur le bouton Insérer valeur de la zone.
Les options disponibles pour le paramètre Apparence et texte sont Changer classe de style, Remplacer la valeur de zone, Remplacer le texte de la constante et Masquer caractères :
Ce paramètre permet de personnaliser vos zones en ajoutant du code HTML. Vous pouvez éventuellement ajouter du code HTML Avant, A l'intérieur de ou Après la balise HTML qui est générée automatiquement pour la zone. Imaginons que vous disposez d'une zone d'entrée pour les numéros d'employé et que dans votre entreprise, tous les numéros d'employé comportent le préfixe 64-. Vous pouvez simplifier l'utilisation de la zone en ajoutant du code HTML, par exemple :
Dans cet exemple, le code HTML Avant fournit certaines informations sur la zone et utilise la balise <strong> de manière à ce que les informations soient mises en évidence par une police en gras. Le code HTML généré par la conversion utilisant la balise <input> pour les zones d'entrée, l'attribut HTML value="64-" peut être inséré à l'intérieur de la balise <input> pour que la zone soit déjà complétée par le préfixe de numéro d'employé et que les utilisateurs n'aient pas à le saisir. Après la zone, le code HTML définit un lien sur lequel les utilisateurs peuvent cliquer pour plus d'informations sur celle-ci.
N'oubliez pas de tester de manière approfondie les pages d'essai que vous modifiez à l'aide du paramètre Insertion de HTML. Les modifications effectuées peuvent être incompatibles avec le code HTML qui est généré par la conversion WebFacing. Pour éviter cela, vous pouvez convertir votre programme sans utiliser les Paramètres Web, examiner le source .html ou .jsp qui est généré pour voir les modifications pouvant être réalisées sans risque à l'aide des paramètres Web, les appliquer, puis lancer de nouveau la conversion.
Le paramètre Options pour VALUES est disponible pour les zones d'entrée qui sont spécifiées à l'aide du mot clé VALUES. Ces zones s'affichent dans les pages Web sous la forme d'une zone de sélection à choix unique. Les options affichées dans la zone de sélection sont les valeurs fournies comme paramètres pour le mot clé VALUES dans votre source DDS.
Le paramètre Options Web pour VALUES vous permet de modifier le libellé ou le texte présenté à l'utilisateur. Par exemple, si l'un des paramètres VALUES attendu par votre programme est "article8", vous pouvez entrer un texte plus descriptif pour l'affichage dans un navigateur, par exemple "câble calibre 8". Le texte affiché pour l'utilisateur sera "câble calibre 8" mais la valeur renvoyée à votre programme restera la valeur "article8" attendue par celui-ci.
Pour utiliser ce paramètre Web, cochez la case Options texte du mot clé VALUES. Pour définir un nouveau libellé pour le paramètre VALUES, sélectionnez la valeur et entrez le texte de votre choix pour le libellé dans la zone Nouveau libellé.
Utilisez le paramètre Créer graphique si vous souhaitez afficher une image à la place de votre zone. Ce paramètre peut être utilisé par exemple pour présenter une base de données de produits, avec des images des articles en stock.
Complétez la zone Nom de fichier en indiquant le chemin d'accès complet à un fichier image situé sur votre poste de travail ou l'adresse URL complète d'un fichier image (par exemple, http://www.ibm.com/image.gif). La zone Nom de fichier peut être remplie en entrant directement une valeur ou en utilisant le bouton Parcourir pour trouver un fichier local. Le programme copiera les images locales que vous indiquez dans le répertoire ..\Contenu Web\images\generated\ du projet WebFacing pendant la conversion WebFacing. Les images contenues dans ce répertoire sont ensuite publiées sur le serveur lorsque vous déployez votre projet à l'aide de l'assistant d'exportation.
Vous pouvez utiliser Largeur en pixels et Hauteur en pixels si vous connaissez les dimensions d'une image. L'ajout d'informations sur la largeur et la hauteur peut parfois accélérer la restitution des pages Web qui contiennent des images.
Si votre programme contient des zones renvoyant des valeurs qui peuvent faire partie du nom du fichier image ou de l'adresse URL complète d'un fichier image, vous pouvez ajouter ces valeurs dans la zone Nom de fichier en sélectionnant la zone dans la liste Choisir une zone et en cliquant sur Insérer valeur de la zone. Par exemple, dans le cas de &{FIELD1.value} qui renvoie la valeur bicyclette1, vous pouvez désigner une image bicyclette1.gif que vous utilisez sur votre poste de travail. Dans cet exemple, complétez la zone Nom de fichier de la liste Choisir une zone, puis ajoutez l'extension .gif. Les fichiers que vous identifiez à l'aide de la liste Choisir une zone doivent être copiés manuellement dans le répertoire ..\Contenu Web\images\generated.
Ce paramètre permet d'afficher votre zone sous la forme d'un hyperlien. Il existe trois méthodes différentes pour créer des hyperliens. Ces méthodes sont les suivantes : URL statique comme option de base, Hyperlien JavaScript et Hyperlien Action. Si vous souhaitez remplacer les paramètres du navigateur pour modifier l'apparence des hyperliens, cochez la case Remplacer l'affichage des hyperliens du navigateur par la présentation DDS. Si vous utilisez le paramètre Créer hyperlien avec le paramètre Créer graphique, votre zone peut être affichée sous forme d'une illustration qui joue aussi le rôle d'hyperlien.
La plupart des navigateurs suivent une convention pour la couleur et l'apparence des hyperliens sur les pages Web ou utilisent des paramètres modifiables par l'utilisateur pour l'apparence des hyperliens. Par exemple, les liens non visités peuvent être affichés en bleu et les liens visités peuvent être affichés en violet. Si vous souhaitez que le navigateur affiche l'hyperlien selon la même apparence que celle utilisée pour la zone située dans votre DDS, cochez la case Remplacer l'affichage des hyperliens du navigateur par la présentation DDS.
Si vous souhaitez qu'une URL spécifique s'affiche dans une zone, sélectionnez URL statique comme option de base. La valeur qui apparaîtra dans votre zone correspondra au texte affiché comme hyperlien. L'emplacement chargé par le navigateur lorsqu'un utilisateur clique sur le lien correspond à la valeur entrée dans la zone URL. Si vous souhaitez que le lien lance une autre fenêtre de navigateur lorsque l'on clique dessus, entrez le nom de la fenêtre en question dans la zone Cible. Si vous laissez la zone Cible vide ou si vous tapez la chaîne *SAME, le programme ouvrira le lien dans la fenêtre de navigation active.
Si vous utilisez un projet de type portlet WebFacing, vous pouvez indiquer *PORTLET dans la zone Cible pour ouvrir le lien dans le portlet.
Entrez le nom d'une fonction JavaScript que vous souhaitez voir appeler lorsque vous cliquez sur le lien. Par exemple, entrez maFonction(). Il peut s'agir d'une fonction que vous avez entrée à l'aide du paramètre Web Insérer dans le script, d'une fonction que vous avez définie dans un fichier externe JavaScript ou d'une fonction insérée dans le fichier webface.js à l'aide de WebFacing. Si vous créez vos propres fichiers JavaScript externes, mettez-les dans le répertoire "usr" de votre projet WebFacing. Ce répertoire est situé dans le chemin d'accès <nom_projet>\WebContent\ClientScript\usr. Tout script placé dans ce répertoire est disponible pour votre application WebFacing lors de la phase d'exécution. Si vous avez une fonction JavaScript en ligne d'entrée courte, vous pouvez également entrer la fonction entière dans la zone Hyperlien JavaScript.
Les entrées de Placer le curseur sur la zone peuvent apparaître sous la forme suivante :
Les entrées de la zone Entrer les données peuvent apparaître sous la forme suivante :
Vous pouvez aussi entrer manuellement des valeurs dans la zone Entrer des données.
Si la case Soumettre est cochée, vous pouvez choisir une action de soumission Touche de fonction ou Appel de fonction JavaScript pour l'hyperlien. Par exemple, vous pouvez choisir ENTREE, DECONNEXION dans la liste déroulante Touche de fonction ou une touche de fonction que vous avez définie dans votre DDS. Si vous souhaitez utiliser une touche de fonction provenant d'un autre enregistrement DDS, entrez une valeur pour cette touche de fonction. Lorsqu'un utilisateur clique sur un lien que vous avez créé pour une touche de fonction, le programme exécute cette fonction. Dans la zone d'appel de fonction JavaScript, vous pouvez entrer le nom d'une fonction JavaScript que vous souhaitez voir exécuter lorsque l'on clique sur le lien. Il peut s'agir d'une fonction que vous avez entrée à l'aide du paramètre Web Insérer dans le script, d'une fonction que vous avez définie dans un fichier externe JavaScript ou d'une fonction insérée dans le fichier webface.js à l'aide de WebFacing. Si vous créez vos propres fichiers JavaScript externes, mettez-les dans le répertoire "usr" de votre projet WebFacing. Ce répertoire est situé dans le chemin d'accès <nom_projet>\WebContent\ClientScript\usr. Tout script placé dans ce répertoire est disponible pour votre application WebFacing lors de la phase d'exécution.
Vous pouvez regrouper les options Placer le curseur sur la zone et Soumettre. Cela vous permet de définir la valeur d'une zone spécifique et de la soumettre à votre programme. Pour ce faire, cochez la case Placer le curseur sur la zone, choisissez une zone dans la liste déroulante (ou saisissez une zone). Dans la zone Entrer des données, choisissez {FIELD.value} (ou entrez une valeur spécifique), cochez la case Soumettre, cliquez sur le bouton radio Touche de fonction, et choisissez ENTREE dans le menu déroulant Touche de fonction. Pour plus d'informations sur le format d'entrée à utiliser pour les zones Placer le curseur sur la zone et Entrer des données, voir Placer le curseur sur la zone.
if(&{CID}.value="") { &{CID}.value="0001"; }Dans cet exemple, le code &{CID} se rapporte à un ID connexion de zone ayant été sélectionné à l'aide du bouton Insertion du nom de zone. Les zones situées sous le bouton Insertion du nom de zone sont précédées d'une perluète et indiquées entre accolades (par exemple, &{ZONE}). Il existe d'autres exemples, tels que le code JSP qui détermine l'adresse IP d'un utilisateur WebFacing ou encore le code javascript qui affiche la date et l'heure du système de l'utilisateur. Vous pouvez utiliser le paramètre Insérer dans le script avec le paramètre Envoi au navigateur. Par exemple, vous pouvez utiliser les valeurs déterminées par vos scripts pour compléter les zones masquées pour lesquelles vous avez utilisé le paramètre Envoi au navigateur. Si vous souhaitez utiliser une zone existant déjà dans votre DDS comme partie de votre script, ajoutez-la à votre script en cliquant sur le bouton Insertion du nom de zone. Par exemple, vous pouvez sélectionner un H ou une zone masquée et l'utiliser dans votre script de manière à lui affecter une valeur.
Le paramètre Envoi au navigateur peut être utilisé pour les zones DDS H ou masquées. Ce paramètre modifie les fichiers JSP pour vos enregistrements. Par exemple, si vous avez une zone H appelée LISTCTL, alors que ce paramètre est utilisé, un élément de type formulaire d'entrée HTML sera généré dans le fichier JSP appelé LISTCTL.jsp. Les éléments masqués de type formulaire d'entrée commencent par le code HTML suivant : <INPUT TYPE="hidden". L'utilisation du paramètre Envoi au navigateur permet à zone H de faire partie de l'environnement du navigateur et aux valeurs d'être affectées à cette zone sur la base de cet environnement. Par exemple, vous pouvez déterminer l'adresse IP d'un utilisateur en ajoutant un script dans lequel vous utilisez le paramètre Insérer dans le script.
Le paramètre Intitulé de touche dynamique peut être utilisé pour déterminer le libellé du texte d'une touche de commande pendant la phase d'exécution. Ce paramètre est disponible uniquement pour les zones de sortie. Grâce à ce paramètre, une touche de commande est associée à la zone de sortie et le texte de la touche de commande est déterminé par la valeur d'exécution de la zone. Vous pouvez par exemple utiliser cette fonction si votre application doit prendre en charge plusieurs langues et que vous souhaitez que le texte de la touche de commande apparaisse dans la langue de l'utilisateur. L'une des méthodes consiste à disposer d'un MSGF par langue, contenant les chaînes de texte utilisées par l'application, et à placer chaque MSGF dans une bibliothèque spécifique à la langue. Si la valeur de la zone de sortie est lue depuis le MSGF, vous pouvez modifier la langue du texte affiché dans la zone en plaçant la bibliothèque contenant le MSGF associé à la langue de l'utilisateur plus haut dans la liste des bibliothèques du profil utilisateur. De cette façon, le libellé de la touche de commande apparaît dans la langue de l'utilisateur.
Préfixe | Séparateur |
---|---|
F | = |
FP | = |
CF | = |
CA | = |
PF | = |