Création de l'interface utilisateur

Pour concevoir une interface conviviale et structurée, AppMaster Web Designer fournit une vaste gamme de composants d'interface utilisateur atomiques. Ces composants peuvent être combinés et regroupés de différentes manières pour s'aligner sur vos objectifs et buts.

AppMaster propose les composants d'interface utilisateur suivants :

• Conteneurs : éléments fondamentaux pour structurer et regrouper logiquement d’autres composants.
• Modaux et tiroirs : composants interactifs pour afficher des informations ou des actions supplémentaires sans quitter l'écran actuel.
• Composants de sortie de valeur dynamique : comprend des listes , des grilles et des tableaux pour présenter les données de manière dynamique.
• Éléments de base de l'interface utilisateur : tels que les boutons , le texte et les icônes , essentiels pour les interactions de base de l'interface.
• Composants de navigation : y compris les menus verticaux et horizontaux , les onglets et les outils de navigation similaires.
• Éléments de formulaire : diverses entrées et contrôles pour l'interaction de l'utilisateur et la collecte de données.

Les mises à jour régulières de la bibliothèque de composants améliorent votre capacité à développer des applications Web plus efficacement.

Construisons une interface utilisateur pour notre application de calculatrice simple afin de démontrer les possibilités d'un créateur de site Web par glisser-déposer AppMaster. Cette application affichera le résultat de diverses opérations mathématiques basées sur les valeurs saisies.

Conteneur flexible

Avec Flex Container , vous pouvez facilement gérer l'alignement et l'empilement de tous les éléments enfants d'un conteneur.

Flex Container est un composant de base pour construire la structure de votre page Web. Flex Container dans le concepteur d'applications Web AppMaster permet aux utilisateurs d'organiser les éléments enfants (widgets ou conteneurs) de manière flexible. Il prend en charge les alignements horizontaux et verticaux, permettant aux développeurs de créer des mises en page complexes qui s'adaptent à différentes tailles d'écran.

Ajout de conteneurs

Nous utiliserons deux conteneurs principaux : un pour la saisie des données et l'autre pour afficher les résultats des calculs, regroupés dans un conteneur commun.

Tout d’abord, ajoutez Flex Container au canevas pour héberger tous les autres éléments.

Dans le panneau Apparence , vous pouvez explorer une gamme de paramètres :

• ID d'élément : identifiant unique permettant de référencer le conteneur dans les processus métier.
• Groupe commun : paramètres permettant de définir l'état par défaut du composant, comme la visibilité et le style du curseur.
• Groupe enfant Flex : détermine le comportement de l'élément au sein d'un composant parent flexible.
• Disposition : paramètres permettant de disposer les éléments enfants dans le conteneur.
• Tailles : Pour spécifier les dimensions des éléments.
• Espacement : Ajuste l'espace à l'intérieur et autour de l'élément.
• Arrière-plan : options pour les couleurs et les calques d'arrière-plan.
• Rayon de coin, bordures, ombre : personnalisation des bords, des bordures et des effets d'ombre des éléments.
• Info-bulle : ajoute une info-bulle pour les actions de survol ou de focus.

Personnalisez votre conteneur principal. Par exemple, définissons Direction sur horizontal et ajustons Gap , Padding , Corner radius et Borders .

Ensuite, ajoutez un autre conteneur Flex à l'intérieur de votre conteneur principal pour que le formulaire puisse saisir les valeurs. Réglez-le sur toute la largeur pour remplir l'espace disponible dans le conteneur parent.

Dupliquez ce conteneur (en utilisant CTRL/⌘+D ) pour créer un bloc séparé pour afficher les résultats. Définissez la propriété Largeur sur 30 %.

Ajout d'éléments d'interface utilisateur

Pour continuer à créer votre application, il est temps d'ajouter les éléments d'interface utilisateur nécessaires.

Ajouter un formulaire

Notre processus métier nécessite que l'utilisateur saisisse deux nombres, tous deux de type Float. Pour rendre cela possible, ajoutez deux entrées flottantes et un bouton pour lancer le processus de calcul.

Basculez la direction du conteneur flexible du côté gauche sur la verticale et ajoutez un espace pour que les éléments imbriqués aient un peu d'espace entre eux. Ajoutez à l'intérieur de ce conteneur Flex un Input Float pour la première valeur, que nous appellerons « X » :

• Faites glisser et déposez l’élément Input Float vers le conteneur de gauche.
• Dans le panneau Apparence , personnalisez le champ en ajoutant une étiquette et un espace réservé .
• Ajustez l'apparence du champ en fonction de la conception de votre application.

Sélectionnez le champ ajouté sur le canevas et dupliquez-le à l'aide CTRL/⌘+D . Modifiez l' étiquette et l'espace réservé du champ dupliqué pour représenter la deuxième valeur, « Y ».

Maintenant, faites glisser et déposez un élément Button sous les champs ajoutés. Dans le panneau Apparence , ajustez le bouton pour qu'il s'étende sur toute la largeur. Ceci peut être réalisé en définissant la propriété Align dans le groupe Flex Child sur Stretch .

Saisissez une étiquette pour le bouton et, éventuellement, ajoutez une icône pour améliorer son attrait visuel.

Après avoir ajouté ces éléments, il est conseillé de les renommer pour plus de clarté et de facilité d'identification. Cela facilite leur référence dans vos processus métier, améliorant ainsi la compréhension et accélérant le processus de développement.

Ajouter un bloc de résultats

Sur le côté droit du conteneur parent, nous allons configurer un espace pour afficher les résultats après avoir exécuté notre processus métier. Tout d’abord, définissez la propriété Direction de ce conteneur sur Vertical et ajoutez un petit espace pour maintenir les éléments bien espacés. Changez sa largeur à 30%.

Dans ce conteneur de droite, insérez un nouveau conteneur Horizontal Flex et ajoutez-y un élément Icon représentant l'opération, un bloc de texte avec un symbole égal et un bloc de texte où le résultat de l'opération sera affiché. Dupliquez ce conteneur quatre fois, en mettant à jour chacun pour nos opérations mathématiques définies.

Personnalisez chaque élément comme vous le souhaitez avec le panneau d'apparence .

Ajouter un bloc d'indices

Pour améliorer la convivialité de l'interface, nous créons un espace réservé qui s'affichera jusqu'à ce que les résultats soient obtenus. Pour cela, ajoutez un Flex Container supplémentaire, reflétant la largeur du conteneur de droite (30 %) et placez un bloc de texte à l'intérieur avec une indication descriptive.

Une caractéristique clé du conteneur avec résultats est son état de visibilité initial. Par défaut, désactivez le commutateur Visible , le rendant initialement invisible.

Masquer l'élément

Nous rendrons ce conteneur visible et mettrons à jour les données uniquement une fois le processus métier exécuté et le résultat obtenu. Il est important d'attribuer des noms aux blocs de texte, afin de garantir une identification facile lors de la création des processus métier et de la rédaction des résultats à afficher.

🎉 Bon travail ! Nous avons créé l'interface utilisateur parfaite pour notre application et sommes prêts à ajouter de l'interactivité à nos éléments.