Modification d'éléments d'écran

Une fois que vous avez capturé vos écrans de profil d'hôte et que vous les avez importés, modifiez les éléments d'écran pour leur donner l'apparence de votre choix. Si vous n'avez pas encore capturé et importé d'écrans, reportez-vous à «Capture d'écrans ».

Par défaut, Velocity applique un formatage prédictif. Vous pouvez modifier le formatage prédictif, ou l'écraser grâce aux options de modernisation rapide et une feuille de style CSS personnalisée. Cette rubrique décrit les éléments d'écran et explique comment modifier le formatage prédictif. Pour en savoir plus sur l'utilisation de la modernisation rapide pour personnaliser des écrans, reportez-vous à « Utilisation de Modernisation rapide ».

Voir la vidéo associée (3:16)

Voici quelques concepts que vous devez connaître avant de commencer à modifier des écrans :

•Écrans prédictifs et modèles d'écran. Après importation dans la console Velocity, les écrans noir et vert sont automatiquement convertis vers une apparence plus adaptée aux périphériques mobiles. Ces écrans sont étiquettés Prédictif, car tout le reformatage a été effectué par le moteur de rendu Velocity, avec ses styles universels.

Lorsque vous apportez manuellement des changements à un écran, ces changements sont convertis en un modèle nommé. Un modèle est appliqué aux écrans qui portent le même texte de touche et les mêmes zones de curseur. Si deux écrans partagent un même modèle mais que vous souhaitez les voir utiliser des modèles différents, créez des zones de texte de touche dans un écran mais pas dans l'autre.

•Thème. Par défaut, les écrans prédictifs comportent des en-têtes bleus, un arrière-plan gris sombre, et du texte blanc ou gris. Pour changer les couleurs ou les styles de texte de tous les écrans simultanément, modifiez le thème. Par exemple, lorsque vous changez la couleur des en-têtes dans le thème, cela change les couleurs de tous les éléments En-tête de toutes les pages. Pour en savoir plus sur les thèmes, reportez-vous à « Configuration des paramètres des profils d'hôte ».

Pour apporter des changements uniquement à un en-tête au lieu de les changer tous, modifiez plutôt cet élément spécifique.

•Texte des touches et zones de curseur. Le texte de touche et les zones de curseur permettent à Velocity de déterminer le modèle à appliquer. Si le texte de touche correspond et si le curseur se trouve dans la zone de curseur, un modèle est appliqué. Le texte de touche est un texte qui doit être présent dans l'écran importé pour que le modèle soit appliqué. Les écrans contenant le texte de touche sélectionné dans le même ordre utilisent le même modèle. Pour que le texte de touche soit uniquement reconnu lorsqu'il est à un endroit spécifique à l'écran, activez l'option Ancrer le texte de clé. Lorsque cette option est activée, tout le texte de touche à l'écran doit être à cette position exacte pour que le système considère l'écran comme identique. Vous activez cette option pour chaque modèle, pas pour l'ensemble d'un projet.

L'option Ancrer le texte de clé se trouve dans la section Propriétés d'écran de la page Écrans.

Une zone de curseur définit la zone où le curseur doit se trouver pour qu'un modèle soit appliqué. Vous pouvez également créer des zones de curseur pour appliquer plusieurs règles de modèle à un même écran, afin de changer de modèle au fur et à mesure que les utilisateurs passent d'un champ à l'autre.

Lorsque vous modifiez un écran, vous pouvez cliquer sur le bouton Aperçu, au bas de l'écran, pour ouvrir une boîte de dialogue qui montre l'aspect qu'aura l'écran pour les utilisateurs du client.

En mode Aperçu, vous pouvez indiquer la zone affichable (proportions d'écran qui n'incluent pas le clavier), effectuer un zoom avant ou arrière (uniquement disponible pour le développement de l'écran), et indiquer la densité de résolution d'écran (généralement 1, 1,5, 2, 3 ou 4) pour le type de périphérique utilisé. Les paramètres de taille d'affichage et de densité sont enregistrés avec le projet, et peuvent être affichés dans la zone Détails de session sur le périphérique client. Vous pouvez également cliquer avec le bouton droit sur l'écran et sélectionner Afficher le clavier pour afficher la zone que le clavier va occuper.

Pour afficher plusieurs écrans en mode Aperçu, vous pouvez passer à l'écran suivant ou précédent à l'aide des touches Haut et Bas du clavier.

Modification d'éléments

Les différents éléments de l'écran sont interactifs, ce qui vous permet de manipuler les éléments de style et même de créer de nouveaux éléments s'ils ne sont pas présents dans votre écran importé.

Pour ajouter un élément d'écran

Pour modifier un élément d'écran

Pour aimanter des éléments

Pour changer l'ordre des éléments d'écran

Pour ajouter une table

Écran importé

Cette colonne contient les écrans noir et vert d'origine, capturés depuis le client. Par défaut, les champs de texte sont identifiés et rendus à l'aide du moteur intégré HTML et CSS de Velocity.

Bien que la majorité des opérations Velocity soient exécutées dans les colonnes Écran reformaté et Élément d'écran, vous pouvez en réaliser certaines depuis cette page, notamment la mise à correspondance de modèles, l'ajout de zones de curseur et la création de nouveaux éléments. Vous pouvez également pointer sur l'écran pour afficher la position actuelle de la souris, ou bien sélectionner une portion d'écran pour copier les informations de position, à savoir la ligne, la colonne et la longueur.

Pour ajouter du texte de touche pour la mise en correspondance des modèles

Pour ajouter des zones de curseur

Pour ajouter un élément

Écran reformaté

Cette colonne montre l'écran importé, à l'aide du moteur intégré de rendu HTML et CSS. Les écrans noir et vert de la colonne Écran importé sont désormais adaptés au mobile, avec des champs, des étiquettes et des boutons. Vous pouvez sélectionner chaque élément et modifier ses propriétés dans la colonne Éléments d'écran.

Modèle

Attribue un nom au modèle lorsque vous apportez des changements à un écran. Tous les écrans comportant le même modèle affichent le même nom de modèle. Si vous modifiez un autre écran portant le même modèle, un nouveau modèle est créé pour éviter de modifier les autres écrans.

Lorsque vous ajoutez un texte de touche ou que vous supprimez des zones de curseur, et que le modèle précédemment appliqué ne correspond plus, le système crée un nouveau modèle. De même, si vous modifiez des champs spécifiques, le système crée un nouveau modèle. Pour que le modèle précédent corresponde, vous devez supprimer les changements précédemment apportés ou ajouter à nouveau les zones de curseur. Lorsque vous le faites, les utilisateurs sont avertis des changements et doivent donner une confirmation. Si l'opération est confirmée, le modèle d'origine est écrasé par le nouveau. Si vous créez un modèle à partir des changements que vous avez apportés, il devient prioritaire sur les autres modèles. Ainsi, les modèles modifiés ont toujours priorité sur les plus anciens.

Pour revenir au modèle précédent, cliquez sur le bouton Supprimer le modèle dans l'onglet Écrans.

Les noms d'écran sont utilisés pour la création d'étendues propres à l'écran. En créant un nom d'écran, vous associez des scripts qui s'exécutent uniquement lorsque l'utilisateur accède à cet écran (et à tous ceux qui partagent le même nom de modèle).

Vous pouvez renommer le modèle manuellement selon vos besoins.

Lorsque vous travaillez avec un script, utilisez le nom de modèle affiché ici pour définir des étendues pour ce script.

Ajouter une table

Ajoute un élément conteneur Table qui vous permet de faire glisser des éléments existants et de les placer côte à côte dans des lignes et des colonnes. Les tables acceptent tous les types d'élément. Les tables sont particulièrement utiles pour présenter plusieurs éléments, comme des étiquettes de données et des champs, ou même plusieurs options de menu.

Aperçu

Afficher l'aspect approximatif qu'aura l'écran sur un périphérique. Changez les dimensions de la fenêtre d'aperçu pour voir comment l'écran apparaît sur des périphériques en orientation Paysage, par exemple.

Éléments d'écran

Cette colonne contient tous les paramètres et options nécessaires pour manipuler des éléments reformatés. Vous l'utilisez pour modifier le formatage des éléments, ajouter des options de menu contextuel et créer des bannières d'écran. Il suffit de sélectionner un élément dans la colonne Écran reformaté et de commencer à modifier ses propriétés à cet endroit.

Écran

Éléments

Menu contextuel

Arrière-plan de l'écran	Définit la couleur d'arrière-plan de l'ensemble de l'écran. Vous pouvez définir cette valeur pour chaque écran ou à l'aide de thèmes.
Supprimer la bannière	Masque une bannière globale dans un écran spécifique. Si vous avez créé une bannière au niveau du thème, cette option vous permet de la masquer dans certains écrans. Cette valeur ne peut pas être modifiée tant qu'aucune bannière n'a été créée.
Élément de bannière	Active un élément de bannière, qui s'affiche en haut de l'écran. Si cette option est activée, l'application vous amène à l'onglet Éléments, où vous pouvez appliquer des styles, définir un titre de bannière ou télécharger une image de logo. Vous pouvez définir cette valeur pour chaque écran ou à l'aide de thèmes.
Élément de pied de page	Ajoute un pied de page au bas de l'écran. Vous pouvez y faire glisser des éléments (nouveaux ou existants). Le pied de page et tous les éléments qu'il contient restent fixés au bas de l'écran, même lors du défilement.
Arrière-plan du pied de page	Définit la couleur d'arrière-plan de l'élément de pied de page. Cette option apparaît uniquement si vous activez Élément de pied de page.
Supprimer le modèle	Supprime le modèle d'écran sélectionné et réinitialise le formatage de l'écran.
Supprimer l'écran	Supprime l'écran sélectionné de votre projet.

Propriétés de table
	Pour créer une table dans l'écran reformaté, cliquez sur l'écran à l'endroit où la table doit se trouver, puis cliquez sur le bouton Ajouter une table au bas de l'écran reformaté.
Lignes	Définit le nombre total de lignes figurant dans la table. Par défaut, cette valeur est définie sur 2. En réduisant le nombre de lignes d'une table, vous ne supprimez pas les éléments qui figurent dans les cellules supprimées. Ces éléments sont supprimés de la table et placés au-dessous.
Colonnes	Définit le nombre total de colonnes figurant dans la table. Par défaut, cette valeur est définie sur 2. En réduisant le nombre de colonnes d'une table, vous ne supprimez pas les éléments qui figurent dans les cellules supprimées. Ces éléments sont supprimés de la table et placés au-dessous.
Largeur	Définit la portion horizontale de l'écran occupée par la table. Par défaut, cette valeur est définie sur 100 %. La table est toujours justifiée à gauche.
Couleur d'arrière-plan	Définit la couleur de l'arrière-plan de l'élément. Vous pouvez définir cette valeur dans la table ou au niveau du thème.
Couleur de ligne pour alternance	Définit la couleur d'arrière-plan à appliquer à une ligne sur deux dans la table, à partir de la deuxième ligne. Vous pouvez définir cette valeur dans la table ou au niveau du thème.
Dynamique	Permet de considérer une table comme dynamique, avec des champs pouvant être sélectionnés. En activant cette option, vous activez les options Commande Navigation vers le haut, Commande Navigation vers le bas et Commande Sélectionner. Les lignes sélectionnées sont différenciées des autres pour indiquer à l'utilisateur la ligne en cours d'utilisation.
Commande Navigation vers le haut	Envoie une valeur de frappe de touche permettant de remonter d'une ligne dans une table dynamique.
Commande Navigation vers le bas	Envoie une valeur de frappe de touche permettant de descendre d'une ligne dans une table dynamique.
Commande Sélectionner	Envoie une valeur de frappe de touche permettant de sélectionner le champ actuel afin d'entrer des données dans une table dynamique.
Propriétés d'élément
Type d'élément	Spécifie le type ou la classe d'un élément. Si un thème a été défini, les éléments de même type se voient appliquer les mêmes styles. Vous ne pouvez modifier les types d'élément que pour chaque écran séparément. Les types d'élément disponibles sont les suivants : •En-tête. Texte d'en-tête qui identifie l'écran actuellement actif. Vous ne pouvez pas ajouter un en-tête à des éléments aimantés. •Étiquette de données. Texte de sous-titre statique utilisé pour étiqueter les champs. Cet élément vous permet de changer l'étiquette d'un écran reformaté, mais pas de modifier la version noir et vert de cette étiquette. •Valeur de données. Texte de sous-titre statique utilisé pour étiqueter les champs. Vous ne pouvez pas modifier le texte de cette option. •Champ. Champs de texte vides où l'utilisateur peut saisir manuellement du texte. •Option de menu. Boutons permettant de diriger les utilisateurs finaux vers différents écrans. Vous ne pouvez pas ajouter d'option de menu à des éléments aimantés. •Bouton. Boutons permettant de diriger les utilisateurs finaux vers différents écrans. Ils sont semblables aux options de menu, mais sont formatés afin de s'afficher dans les écrans. Vous pouvez les ajouter à des éléments aimantés ou à des pieds de page. Chaque élément est associé à ses propres styles par défaut, tels que définis par le formatage prédictif Velocity. Pour en savoir plus, reportez-vous à « Formatage prédictif ».
Supprimer\Tout supprimer	•Sélectionnez Supprimer pour supprimer l'élément d'écran sélectionné de l'écran reformaté. Sélectionnez Tout supprimer pour supprimer tous les éléments de l'écran reformaté. Pour ajouter un élément d'écran, reportez-vous à la procédure ci-dessous. Vous ne pouvez pas définir cette valeur au niveau du thème.
Propriétés de bannière
Titre	Crée un élément d'en-tête qui s'affiche en haut de l'écran. Le texte entré ici s'affiche dans cet élément. Si vous téléchargez également une image, le texte entré dans ce champ s'affiche à droite de l'image de logo. Cette option apparaît uniquement si vous activez Élément de bannière.
Image	Télécharge une image de logo et la place en haut de chaque écran. Les images ne doivent pas dépasser 100 pixels de large sur 60 de haut. Cette option apparaît uniquement si vous activez Élément de bannière. Pour ajouter une image ailleurs que dans la bannière, créez un élément Image et définissez sont style à l'aide des options Propriétés d'élément.
Propriétés de police
Gras	Met en gras le texte de l'élément. Par défaut, cette option n'est pas sélectionnée.
Italique	Met en italique le texte de l'élément. Par défaut, cette option n'est pas sélectionnée.
Souligné	Souligne le texte de l'élément. Par défaut, cette option n'est pas sélectionnée.
Alignement	Détermine si le texte est aligné au centre, à gauche ou à droite.
Taille	Définit la taille de police du texte de l'élément. Vous pouvez l'ajuster, de 10 à 20 points. La valeur par défaut dépend du type d'élément sélectionné.
Famille	Spécifie la famille de polices à utiliser pour l'élément. Si un thème a été défini, les éléments de même type utilisent les mêmes familles de polices. •Serif •Sans-serif •Monospace
Couleur d'arrière-plan	Définit la couleur de l'arrière-plan de l'élément.
Couleur de police	Définit la couleur du texte visible de l'élément.
Texte	Texte qui apparaît pour cet élément dans l'écran reformaté. Ce paramètre ne remplace pas le texte des écrans noir et vert standard. Vous ne pouvez pas définir cette valeur au niveau du thème.
Commande	Associe un appui sur une touche spécifique avec une option de menu. Lorsque vous sélectionnez cette option, le comportement associé à cette frappe de touche est envoyé au profil d'hôte. Par exemple, sur le serveur de démo, la commande d'une option de menu peut être le chiffre `3`. Lorsque le système l'envoie, l'utilisateur est amené à l'écran suivant. Vous ne pouvez pas définir cette valeur au niveau du thème. Les commandes admises sont les frappes de touche suivantes : •Texte, comme ABC •Touches nommées, comme `{F1}` à `{F24}` •Valeurs hexa de code de touche, comme `{hex:E03B}` pour `F1` •Macros (comme `{hex:E050}{hex:E04D}{pause}{Enter}` pour « Bas, Droite, Pause de 250 millisecondes, puis touche Entrée ») Pour consulter la liste des valeurs prises en charge, reportez-vous à « Codes clavier et commandes ».
Propriétés d'image
Alignement	Aligne l'image à l'intérieur de son élément parent.
Couleur d'arrière-plan	Couleur d'arrière-plan qui apparaît si l'image est transparente.
URL de l'Image	URL de l'image, avec son nom de fichier et son extension. Le chemin d'URL peut être indiqué dans 3 formats : •velocity://resources/ Chemin d'une ressource associée au projet. •file:/// Chemin d'un fichier stocké ailleurs sur le périphérique. Attention, il faut utiliser une barre oblique supplémentaire. Cette option n'est pas prise en charge dans iOS, ou Android 10 ou supérieur. •http:// ou https:// Chemin d'un fichier stocké sur un serveur distant accessible via HTTP ou HTTPS. Vous pouvez utiliser 3 types de variable dans l'URL d'image : •Variable de composant, qui utilise le texte exact de l'écran d'origine, au format {component:ID-composant}. Exemple : velocity://resources/{component:added_636511066245633526}.jpg Utilise le texte trouvé dans le composant comme nom d'image, quel que soit le texte de chaque page. •Variable de script qui renvoie une chaîne de texte, au format {script:fonction()}. Exemple : file:///{script:FindImage()} Utilise le chemin et le nom de fichier renvoyés par le script FindImage. •Variable d'écran qui spécifie la ligne, la colonne et la longueur du texte, au format {screen:ligne,colonne:longueur}. Exemple : http://172.27.0.21/warehouse/images/{screen:4,1:12}.png Utilise comme nom de fichier 12 caractères à partir de la ligne 4 de la colonne 1 dans l'écran actuel. Vous pouvez utiliser des variables pour le nom de fichier ou d'autres portions de l'URL, et combiner plusieurs variables dans l'URL si nécessaire.
ID de composant	ID de composant associé à l'élément Image.
Propriétés de clavier
Afficher le clavier	Définit le comportement du popup de clavier lorsqu'un élément Champ est sélectionné. Vous ne pouvez pas définir cette valeur au niveau du thème. •Afficher. Le clavier s'affiche automatiquement lorsque l'utilisateur accède au champ avec la touche Tab. •Masquer. Si le clavier est actif, il est automatiquement masqué lorsque l'utilisateur accède à ce champ avec la touche Tab. •Désactiver. Interdit l'utilisation des claviers par défaut et personnalisés lorsque l'utilisateur accède à ce champ avec la touche Tab.
Clavier portrait	Définit le clavier personnalisé à utiliser par défaut lorsque l'écran est affiché en mode Portrait. Vous ne pouvez pas définir cette valeur au niveau du thème. Si ce champ reste vide, le clavier personnalisé par défaut est utilisé, à savoir le clavier figurant en haut de la liste du Volet Claviers dans l'écran Claviers.
Clavier paysage	Définit le clavier personnalisé à utiliser par défaut lorsque l'écran est affiché en mode Paysage. Vous ne pouvez pas définir cette valeur au niveau du thème. Si ce champ reste vide, le clavier personnalisé par défaut est utilisé, à savoir le clavier figurant en haut de la liste du Volet Claviers dans l'écran Claviers.
ID de composant	Spécifie l'ID du champ. Ce champ est en lecture seule et la valeur est affectée automatiquement lors de la création de l'élément. Vous utilisez cette valeur comme référence dans les scripts qui concernent des champs spécifiques.
ID d'étendue	Spécifie l'étendue Écran et Champ. Ce champ est en lecture seule et la valeur est affectée immédiatement lors de la création de l'élément. Cette valeur est constituée du nom du modèle et de l'ID du composant, séparés par un caractère deux-points et précédés par le symbole arobas (`@`). Vous devez copier-coller la valeur de ce champ lorsque vous définissez une étendue propre au champ dans l'onglet Scripts.

Ajouter Nouveau	Ajoute une nouvelle option de menu contextuel, et vous permet de spécifier les valeurs Titre de l'option de menu et Commande de raccourci. Vous ne pouvez pas ajouter d'options de menu au niveau du thème.
Ajouter la voix	Active les options Text-to-Speech (Texte en voix) et Speech-to-Text (Voix en texte) pour cette option de menu. De plus, cette option ajoute le champ Expression correspondante, qui nécessite une macro Voix dans le champ Commande de raccourci pour réaliser une action vocale spécifique. Les fonctions vocales exigent l'outil Speakeasy. Pour en savoir plus, reportez-vous à « Utilisation de Speakeasy ».
Option de menu global	Marque cette option de menu comme propre à l'écran ou globale. Si vous choisissez Activé, l'option de menu apparaît dans le menu contextuel pour tous les écrans. Si vous choisissez Désactivé, l'option de menu apparaît uniquement dans le menu contextuel de l'écran actuel.
Options de menu	Permet de créer et de modifier des options pour le menu contextuel. Vous pouvez configurer les paramètres suivants dans cette section : •Titre de l'option de menu. Texte qui apparaît comme étiquette d'une option de menu contextuel. •Commande de raccourci. Associe un appui sur une touche spécifique avec une option de menu. Pour consulter des exemples de commandes acceptées, reportez-vous à « Codes clavier et commandes ». •Supprimer. Supprime l'option de menu sélectionnée. •Terminé. Applique les changements au menu contextuel ; ils seront visibles dans le volet Écran reformaté.
Voix activée	Permet d'utiliser les expressions de commande vocale pour accéder aux fonctions du menu contextuel. Le champ Expression correspondante devient visible.
Expression correspondante	Définit la commande vocale qui active l'option de menu. Vous pouvez entrer ici l'expression de votre choix, à condition que le client puisse la prononcer. Vous ne pouvez créer des expressions correspondantes que pour les options de menu contextuel. Lorsque le système détecte l'expression correspondante, il exécute automatiquement la macro, le texte ou le script affecté au champ Commande de raccourci. Pour en savoir plus sur les commandes de raccourci, reportez-vous à « Commandes de raccourci vocales ».