Velocity powered by Wavelink

Modification d'éléments d'écran

Chaque écran TE 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. Chacun de ces éléments peut être modifié dans la console Velocity, qui propose plusieurs options de configuration permettant de créer un style (unique ou propre à votre marque), puis de l'appliquer via le moteur intégré de rendu HTML et CSS de l'appli.

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

L'onglet Écrans comprend 4 colonnes :

1.Liste Écran. Énumère tous les écrans associés à un projet, avec le nom des balises et des modèles. Vous pouvez naviguer entre les différents écrans en sélectionnant dans cette liste un écran portant un numéro.

2.Écran importé. Écran traditionnel noir et vert capturé depuis le client TE. Cette colonne montre l'écran avant tout reformatage moderne.

3.Écran reformaté. Les écrans capturés dans TE sont rendus à l'aide du moteur intégré HTML et CSS de Velocity, qui leur donne une apparence plus moderne.Chaque élément peut être sélectionné à cet endroit et vous pouvez modifier ses propriétés dans la colonne Éléments d'écran.

4.Éléments d'écran.Cette zone vous permet de manipuler les propriétés de chaque élément reformaté.

Vous disposez des fonctions suivantes pour modifier des éléments d'écran depuis la console Velocity :

É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 des styles de formatage pour chaque type d'élément et les 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.

Aimant. Vous pouvez déplacer des éléments un par un et les placer côte à côte pour les aimanter entre eux. Par exemple, sur un périphérique Android, vous pouvez aimanter les champs Nom d'utilisateur et Mot de passe avec leurs étiquettes de données, afin de les faire apparaître 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.

Je veux savoir comment...

 

Pour capturer des écrans pour un profil d'hôte depuis l'application Ivanti Terminal Emulation, reportez-vous à « Capture d'écrans depuis le client TE ».

Liste Écran

Énumère tous les écrans associés à un projet, dans l'ordre où ils ont été capturés depuis le client TE. La liste affiche également les balises associées et le modèle appliqué. Les balises peuvent être organisées sur la base d'écrans non terminés, de groupes d'écrans spécifiques ou de fonctions d'écran, entre autres.

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 double-cliquant sur l'espace situé à droite du numéro d'écran. Ajoutez les balises Mot appropriées, séparées par des virgules.

De plus, vous pouvez réorganiser les écrans en faisant glisser le numéro d'écran vers la position voulue.

Vous ne pouvez pas inclure de symboles dans les balises.

Si vous associez la même balise à plusieurs écrans, vous pouvez utiliser la barre de recherche pour filtrer les données en fonction d'une ou de plusieurs balises. Vous pouvez utiliser des opérateurs logiques (+ ou -, par exemple) pour inclure ou exclure des balises dans une recherche.

Ajouter des écrans

Ouvre une boîte de dialogue qui vous permet de sélectionner des écrans importés depuis le client TE. Si vous avez capturé des écrans via le client TE, ils doivent apparaître sous forme d'un seul fichier contenant tous les écrans ajoutés. Lorsque vous ajoutez ce fichier, tous les écrans associés apparaissent dans la colonne Liste Écrans.

Lorsque vous sélectionnez un écran, le contenu noir et vert d'origine apparaît dans la colonne Écran importé, alors que la version rendue s'affiche sous Écran reformaté.

Vous pouvez ajouter plusieurs fichiers de capture d'écran à un projet. Tous les écrans nouvellement ajoutés sont réunis au bas de la liste d'écrans.

Écran importé

Cette colonne contient les écrans noir et vert d'origine, capturés depuis le client TE. 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.

ClosedPour ajouter du texte de clé pour la mise en correspondance des modèles

Vous pouvez ajouter plusieurs champs de texte de touche pour la mise en correspondance du modèleLe système compare les autres écrans à celui-ci. S'il trouve le texte de touche identifié, il rattache les écrans concernés au même modèle.

Si vous créez deux champs de texte côte à côte, ils se combinent automatiquement en un seul champ de texte de touche.

1.Double-cliquez sur l'endroit où vous voulez ajouter le texte de touche dans le volet Écran importé.

2.Cliquez sur le bouton Ajouter un texte de touche.

3.Cliquez sur Enregistrer pour mémoriser les changements.

ClosedPour ajouter des zones de curseur

1.Dans le volet Écran importé, double-cliquez ou tracez une zone avec la souris sur l'endroit où vous voulez ajouter la zone de curseur.

2.Cliquez sur le bouton Ajouter une zone de curseur.

3.Cliquez sur Enregistrer pour mémoriser les changements.

La première zone de curseur que vous ajoutez à un écran doit correspondre à l'endroit où le curseur se trouve actuellement dans l'écran importé. De même, vous ne pouvez pas supprimer la zone de curseur où le curseur se trouve tant que vous n'avez pas supprimé les autres zones de curseur.

É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 conviviaux 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.

ClosedÉcran

Couleur d'arrière-plan

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.

ClosedÉléments

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.

Propriétés de police

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 se voient appliquer les mêmes familles de polices.

Serif

Sans-serif

Monospace

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é.

Gras

Cette option permet de mettre en gras le texte de l'élément. Par défaut, cette option n'est pas sélectionnée.

Italique

Cette option permet de mettre en italique le texte de l'élément. Par défaut, cette option n'est pas sélectionnée.

Souligné

Cette option permet de souligner le texte de l'élément. Par défaut, cette option n'est pas sélectionnée.

Couleur de police

Définit la couleur du texte visible de l'élément.

Couleur d'arrière-plan

Définit la couleur de l'arrière-plan 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}{AutoEnter} 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 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.

ClosedMenu contextuel

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.

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é.

ClosedPour ajouter un élément d'écran

1.Double-cliquez sur l'endroit où vous voulez ajouter le nouvel élément d'écran, dans le volet Écran importé.

2.Cliquez sur le bouton Nouvel élément.

3.Configurez l'élément d'écran selon vos besoins.

4.Cliquez sur Enregistrer pour mémoriser les changements.

Le nouvel élément n'apparaît pas dans l'écran importé, mais uniquement dans l'écran reformaté.

ClosedPour modifier un élément d'écran

1.Sélectionnez l'élément d'écran voulu dans le volet Écran reformaté.

2.Modifiez l'élément d'écran selon vos besoins.

3.Cliquez sur Enregistrer pour mémoriser les changements.

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

1.Sélectionnez l'élément d'écran voulu et faites-le glisser depuis le volet Écran reformaté.

Une flèche rouge apparaît sur le côté gauche du volet pour indiquer l'endroit où cet élément va être placé. Les étiquettes de données, les valeurs de données et les champs peuvent être placés les uns dans les autres pour les aimanter horizontalement. Cela permet d'afficher ces éléments côte à côte sur les périphériques.

2.Faites glisser l'élément à l'emplacement voulu.

3.Cliquez sur Enregistrer pour mémoriser les changements.

ClosedPour aimanter des éléments

1.Sélectionnez un élément existant et faites-le glisser sur un autre.

2.Lorsqu'une flèche rouge (>) apparaît pour signaler l'emplacement près de l'élément stationnaire, déposez l'élément.

L'élément que vous avez fait glisser s'affiche au côté de l'élément existant. Vous pouvez aimanter d'autres éléments. Ils passent automatiquement à la ligne suivante lorsque les éléments placés côte à côte sont en nombre suffisant.

Vous ne pouvez pas ajouter d'en-tête ni d'option de menu à des éléments aimantés.

ClosedPour ajouter une table

1.Cliquez sur le bouton Ajouter une table au-dessus du volet Écran reformaté. Une table de 2 lignes et 2 colonnes apparaît en haut de l'écran.

2.Déplacez-la vers l'endroit voulu dans l'écran reformaté.

3.Faites glisser des éléments vers les différentes cellules pour les ajouter à la table. Vous ne pouvez ajouter qu'un élément par cellule.


Cet article vous a-t-il aidé ?    

Le sujet était :

Inexact

Incomplet

Différent de ce que j'attendais

Autre