Velocity powered by Wavelink

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.

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 la modernisation rapide ».

Chaque écran modernisé est constitué de plusieurs éléments, comme du texte de touche, des champs de curseur, des étiquettes de données, des champs, des en-têtes et des options de menu.

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 portent l'état Prédictif, ce qui signifie qu'ils n'ont subi aucun changement manuel, mais ont été traités par le moteur intégré de rendu HTML et CSS de Velocity, avec ses styles universels. Lorsque vous apportez manuellement des changements à un écran, son état devient Modèle, ce qui signifie que les styles et le formatage sont propres à cette page. Pour importer des écrans dans votre projet afin de modifier le style de chaque élément d'écran, reportez-vous à « Importation d'écrans ».

•Thèmes. Vous pouvez modifier les éléments d'écran séparément pour chaque écran afin que les changements apportés à un élément d'écran spécifique ne soient pas appliqués aux autres éléments du même type. Vous pouvez également, à l'aide de thèmes, créer un style de formatage pour chaque type d'élément et l'appliquer à tous les écrans. La modification du thème global d'un projet ne fait pas passer un écran de l'état Prédictif à l'état Modèle. Pour en savoir plus sur les thèmes, reportez-vous à « Configuration des paramètres de projet ».

Les thèmes définis dans l'onglet Thèmes sont écrasés lorsque vous modifiez des éléments spécifiques dans l'onglet Écrans.

•Texte des touches et zones de curseur. Vous pouvez utiliser le texte des touches pour créer un modèle d'écran qui servira de base aux changements de reformatage. Si d'autres écrans contiennent le texte de touche sélectionné, ils sont automatiquement reformatés à l'aide des styles appliqués à l'écran où le texte de touche se trouve actuellement. 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.

•Balises. Pour vous aider à regrouper les écrans similaires ou à trouver plus facilement un écran spécifique, vous pouvez utiliser des balises pour décrire le contenu de l'écran. Vous ajoutez des balises manuellement en cliquant sur l'espace situé à droite du numéro d'écran. Ajoutez les balises Mot appropriées, séparées par des virgules. Vous ne pouvez pas inclure de symboles dans les balises.

•Couverture. Placez les éléments dans une zone de couverture pour qu'ils s'affichent ensemble. Par exemple, vous pouvez placer une zone de couverture autour de l'étiquette de données Nom d'utilisateur et du champ de texte Nom d'utilisateur pour qu'ils s'affichent côte à côte.

•Tables. Structurez la disposition des éléments sous forme de lignes et de colonnes en ajoutant une table à l'écran reformaté. Lorsque vous créez une table, elle contient des cellules conteneur vides où vous faites ensuite glisser des éléments. Cette fonction est particulièrement utile pour présenter plusieurs éléments, comme des étiquettes de données et des champs, ou même plusieurs options de menu.

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.

Pour afficher plusieurs écrans en mode Aperçu, vous pouvez passer de l'un à l'autre à l'aide des touches Haut et Bas du clavier.

Liste Écran

Après que vous avez importé une capture d'écran, les écrans sont affichés dans la liste Écran, dans l'ordre où ils ont été capturés depuis le client. La liste affiche également les balises associées et le modèle appliqué. Réorganisez les écrans en faisant glisser le numéro d'écran dans la liste.

Utilisez la barre de recherche pour filtrer la liste des écrans sur la base des balises, du texte ou du nom d'écran.

•Utilisez des opérateurs logiques (+ ou -, par exemple) pour inclure ou exclure des éléments de la recherche.Par exemple : +rouge -vert

•Utilisez l'accent circonflexe (^) pour rechercher du texte dans l'écran vert. Par exemple : ^qté

•Utilisez l'arobase (@) pour rechercher des noms de modèle. Par exemple : @T9

•Utilisez l'arobase (#) pour rechercher des balises. Par exemple : #menu

•Utilisez des guillemets droits (" ") autour des expressions littérales. Par exemple : "ordre de prélèvement"

•Utilisez le point d'interrogation (?) pour effectuer une recherche avec un seul caractère générique. Par exemple : wil?

•Utilisez l'astérisque (*) pour effectuer une recherche avec plusieurs caractères génériques. Par exemple : Qté\:*

•Placez une barre oblique inverse (\) devant les caractères suivants pour les rechercher :

+ - & | ! ( ) { } [ ] ^ " ~ * ? : \ / @ #

Par exemple : \#login

Vous pouvez supprimer les écrans à double d'une capture d'écran importée, en cliquant sur le bouton Supprimer les doublons au bas de l'écran de liste. Velocity détecte automatiquement les écrans en double. La duplication repose sur tous les caractères et éléments d'un écran, qui doivent être identiques ; les zones de curseur doivent également être dans la même position. Après avoir cliqué sur Supprimer les doublons, vous voyez apparaître une boîte de dialogue qui répertorie le numéro des doublons d'écran détectés dans cette liste, avec une invite pour achever la suppression. Cette option est disponible pour les projets TE.

Écran importé

Cette colonne contient les écrans noir et vert d'origine, capturés depuis le client. Tous les champs de texte présents 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.

Pour ajouter du texte de clé 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 transformés en écrans 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.

Le nom de modèle est utilisé dans l'onglet Scripts pour identifier les étendues propres au modèle d'un script. Utilisez la valeur figurant à cet endroit, précédée par le symbole arobas (@).

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.

É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

Commandes de raccourci vocales

Lorsque vous utilisez le client Velocity avec Speakeasy, il comporte des commandes par défaut préchargées. Pour appeler ces commandes, vous devez les inclure dans l'option de menu contextuel globale ou propre à l'écran, à l'aide de la valeur ci-dessous. Ces commandes ne nécessitent aucun fichier de grammaire supplémentaire.

Monter le volume	{voice:volumeUp}
Réduire le volume	{voice:volumeDown}
Répéter	{voice:repeat}
Parler plus vite	{voice:faster}
Parler plus lentement	{voice:slower}
Calibrer	{voice:calibrate}

Modification d'éléments

Les différents éléments du volet Écran reformaté sont interactifs, ce qui vous permet de manipuler les éléments de style ou d'en créer de nouveaux 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 changer l'ordre des éléments d'écran

Pour aimanter des éléments

Pour ajouter une table

Est-ce que cet article vous a été utile ?

Le sujet était :

Inexact

Incomplet

Pas ce à quoi je m'attendais

Autre

Confidentialité et Informations légales

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
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 : •`F1` à `F24` •`CTRL+[lettre unique, en majuscule ou en minuscule]` •Valeurs hexa de code de touche (comme `{hex:E03B}` pour `F1`), sans `\` ni `0x` avant la valeur hexa •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 hexa 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	URL de l'image, avec son nom de fichier et son extension. Le chemin d'URL peut être indiqué dans 3 formats : •res://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. •http:// Chemin d'un fichier stocké sur un serveur distant accessible via HTTP. 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 : res://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 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. •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. 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. Cette option ajoute également le champ Expression correspondante, qui nécessite une macro Voix dans le champ Commande de raccourci pour réaliser une action vocale spécifique.
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.