Exploration des principes de base des composants

Objectives

After completing this lesson, you will be able to:
  • Définissez des composants.
  • Classifiez différents groupes de composants.
  • Expliquez l'utilisation des composants de mise en forme.

Définir composants

Quel est le rôle de l'interface utilisateur (IU) dans une application ?

L'interface utilisateur couvre ce que vous verrez et que vous pourrez faire dans l'application. L'interface utilisateur définit non seulement les éléments visibles, mais aussi certaines des interactions de base dans l'application. Les environnements de développement nécessitant peu de code sont généralement équipés d'un ensemble d'outils permettant de créer une interface utilisateur.

Dans SAP Build Apps, les composants sont la clé puissante pour créer facilement et rapidement des applications qui répondent aux besoins les plus divers des entreprises et enrichissent les processus de travail. Une description simple des composants est qu'ils sont des pièces de code préfabriquées qui peuvent être utilisées comme modules avec des fonctions prédéfinies pour concevoir l'interface utilisateur et permettre au pont d'utiliser la logique.

Composants IU

Les composants peuvent apparaître dans n'importe quel type d'élément, comme les boutons, les zones de saisie, les zones de texte ou les images. Il n'existe aucune limite fixe quant à la taille ou à la taille des composants. Les plus petits composants peuvent être comme une icône individuelle ou une ligne de séparation. Les plus grands composants peuvent être un composant de carte pour la géolocalisation ou un lecteur vidéo. En les préfabriquant, elles favorisent une expérience intuitive dans le domaine visuel du développement et, avec les fonctions fournies, permettent de couvrir de nombreuses possibilités de développement. Cependant, si des exigences supplémentaires spécifiques sont requises, les composants peuvent également être adaptés et créés en fonction de l'apparence et des fonctionnalités.

Composants d'image et de formulaire

Composants d'image

Les composants dans SAP Build Apps sont divisés en plusieurs sections sur le côté gauche. En haut, vous trouverez les composants ESSENTIALS qui permettent d'ajouter les modules les plus basiques d'une application. Les composants titre et texte sont toujours présents et combinés les uns avec les autres dans des styles différents pour bien préparer l'information. Le composant de fiche combine le texte et le titre et est mis en surbrillance par le format du composant.

Principalement pour le style, avec des composants d'image et d'icône, une application peut être conçue pour être conviviale ou plus d'informations ciblées. Les composants de bouton sont prédestinés pour stimuler les interactions et lancer les processus logiques. Avec les composants de formulaire, l'exemple d'application illustré dans l'exercice suivant montre également que la plupart des composants surviennent fréquemment et, en combinaison, constituent souvent la base d'une interface utilisateur intuitive et dynamique de l'application.

Composants d'image et de formulaire

Les composants de formulaire peuvent être utilisés pour insérer des formes utiles dans l'application. Celles-ci sont particulièrement avantageuses pour exploiter les informations des utilisateurs et permettre des interactions. Il permet à l'utilisateur de déclencher des actions simples et plus complexes. Le composant le plus fréquemment utilisé est le composant bouton qui est prédestiné à déclencher une action en la sélectionnant, même si d'autres composants sont connectés à la logique et peut également déclencher des actions en la sélectionnant.

Les zones de saisie et de mot de passe sont essentielles pour que les utilisateurs saisissent des informations qui peuvent être traitées ultérieurement, par exemple pour stocker et afficher ou authentifier un utilisateur.

En outre, les cases à cocher, les zones de liste déroulante et les curseurs offrent aux utilisateurs un moyen rapide et intuitif de sélectionner des valeurs prédéfinies dans ces composants. Ces informations peuvent ensuite également être traitées par l'application.

Répertorier les composants

Exemples de composants de liste

La création de listes à l'aide de composants de liste est une approche importante et fréquemment utilisée de SAP Build Apps. Pour afficher certaines informations à l'aide de listes, les composants de liste sont généralement connectés à une base de données (source) où se trouvent les données stockées. Les informations temporaires de l'application combinées à une entrée utilisateur ou à de nouvelles informations qui résultent de fonctions et de formulaires peuvent toutes être répertoriées. Toutefois, d'autres options sont la connexion via des interfaces avec des données/informations provenant d'Internet ou d'autres solutions SAP ou tierces. Le type d'affichage avec les composants est divers ; il en existe, utilisant des listes normales auxquelles plusieurs informations sont connectées ou auxquelles des images et des icônes s'afficheront également. Avec les listes, en particulier, il est important d'utiliser le composant Propriétés, qui est expliqué plus en détail dans le sujet suivant, pour un affichage dynamique ou ciblé.

Composants de mise en forme

Composants de mise en forme

Par défaut, SAP Build Apps propose trois composants de mise en forme qui vous permettent de concevoir d'autres options concernant la mise en forme de l'interface utilisateur et de structurer des éléments. Vous pouvez simplement regrouper des composants ou effectuer des actions plus complexes, telles que rendre les composants en groupes invisibles ou visibles après un déclencheur en une seule section à la fois. De cette façon, les composants de mise en forme apportent des avantages supplémentaires pour la conception d'applications, tels que :

  • Plus de clarté, en particulier avec l'arborescence de mise en forme.
  • Afficher les sections de contenu côte à côte.
  • Le contenu et les composants peuvent être facilement proportionnés et regroupés.
  • Saisissez plusieurs composants à la fois comme groupe.
  • Affichage intuitif possible en faisant défiler la zone définie, etc.

Arborescence de mise en forme

Regardez la vidéo pour obtenir une synthèse de l'arborescence de mise en forme et apprendre à utiliser l'offre d'arborescence de mise en forme de SAP Build Apps.

Non seulement les composants de mise en forme sont utiles pour créer une structure claire, mais - en particulier en combinaison avec ceux-ci - également la vue d'arborescence, qui se trouve en bas à droite et fournit une synthèse claire.

Dans l'arborescence, les conteneurs utilisés sont répertoriés dans leur ordre d'affichage de la disposition. De cette façon, il peut être avantageux de sélectionner des composants directement dans l'arborescence car les composants affichent également des noms qui peuvent être affectés à des composants.

Une autre méthode utile est que vous pouvez déplacer et restructurer des composants à l'aide de la fonction glisser-déplacer avec la prise en charge d'une ligne d'aide qui apparaît.

Si un composant de mise en forme est utilisé, il s'affiche également dans l'arborescence. Cependant, l'avantage est que vous pouvez utiliser d'autres composants qui sont subordonnés au composant de mise en forme et qui peuvent être développés et réduits dans la vue.

Ajouter des composants à votre interface utilisateur

Scénario de gestion

Créez la base de l'interface utilisateur en ajoutant différents composants sur les pages créées précédemment.

Options d'exercice

Pour commencer l'exercice, sélectionnez Commencer l'exercice dans la figure ci-dessous.

Une fenêtre pop-up s'ouvre. Vous disposez des options suivantes :

  • Début : la simulation démarre. Suivez la simulation pour apprendre à ajouter des composants à votre interface utilisateur.
  • Ouvrir le document PDF : un PDF s'ouvre. En fonction des étapes décrites dans ce document, vous pouvez effectuer les exercices dans votre propre infrastructure système.