Conception des composants

Il serait possible de placer des éléments sur l'espace vide du canevas de manière simple, mais il est préférable d'essayer de rendre le tout net et ordonné immédiatement. Par conséquent, pour commencer, nous allons concevoir l'espace de travail. Ajoutons un composant (Container) au canevas où nous placerons tous les autres éléments. Après l'avoir ajouté, vous devez cliquer sur l'icône d'engrenage et procéder à la configuration de ce conteneur.

Paramètres du conteneur

Passons en revue les paramètres disponibles.

• Name - le nom sous lequel nous pouvons faire référence à ce conteneur dans les processus métier de l'application. Par exemple, si nous voulons créer un processus métier pour modifier certains paramètres de ce conteneur.
• Direction - la direction dans laquelle les éléments à l'intérieur du conteneur donné seront disposés. Horizontalement, si l'on veut les disposer en ligne, l'un après l'autre, ou vice versa, verticalement, lorsque les éléments passent en dessous les uns des autres.
• Wrap - définir la sortie des éléments. Doivent-ils être sur la même ligne (nowrap), ou peuvent-ils être enveloppés (wrap).
• Alignment - comment les éléments du conteneur doivent être alignés (réglage séparé pour l'alignement horizontal et vertical).
• Size - la taille du conteneur. Elle peut être définie comme un pourcentage de l'espace disponible ou avoir une taille strictement fixe en pixels.
• Max Width -la largeur maximale autorisée (dans le cas où elle n'est pas strictement définie et varie en fonction du contenu).
• Margin/Padding - le retrait par rapport aux bordures du conteneur. Externe ou interne, respectivement.
• Image, Gradient or Overlay (Background color) - la possibilité de définir l'arrière-plan souhaité. Vous pouvez choisir une couleur spécifique (ou une combinaison de différentes couleurs avec un dégradé) ou sélectionner une image de fond.
• Border - la sélection du cadre et de son apparence (couleur, épaisseur, rayon d'arrondi).
• Visible - visibilité de l'élément (ainsi que de tous les éléments imbriqués).

Les paramètres sélectionnés sont visibles dans la capture d'écran. Bien sûr, vous pouvez expérimenter et les modifier, en choisissant votre propre design.

Ajoutons-en un autre au conteneur créé. Nous allons y ajouter les champs de saisie nécessaires. Définissez-le comme étant vertical, centré, d'une largeur de 40 % et avec un padding-gauche (padding-gauche 20px).

Composants de l'application

Ensuite, ajoutez les composants eux-mêmes au conteneur. Notre processus d'affaires accepte deux nombres de type float. Pour les saisir, vous devez ajouter deux Input composants (float), un bouton (Button), qui lancera le processus de calcul, et procéder à un petit ajustement visuel pour signer leurs numéros de type Label.

Ajoutons un autre bloc où nous indiquerons ce que nous prévoyons de calculer en général (addition, soustraction, etc.). Fixons la largeur à 30% avec les éléments disposés verticalement, centrés et alignés à droite (end/center). Ajoutons 5 composants Label au conteneur lui-même et changeons immédiatement leur texte par celui souhaité.

La dernière étape de la conception visuelle consiste à ajouter un autre conteneur pour afficher le résultat du calcul. Nous l'avons ajouté par analogie avec le conteneur précédent, mais nous avons défini l'alignement sur la droite avec un petit padding sur la gauche. La particularité de ce conteneur est qu'il sera initialement invisible (l'interrupteur Visible est éteint). Nous l'activerons au moment où nous aurons le résultat des calculs. Ajoutons-lui 5 composants Label, et nous n'avons même pas besoin de modifier leur texte car le bloc est toujours invisible (l'essentiel est de définir leur Name afin de pouvoir identifier l'élément nécessaire lors de la création des processus d'entreprise).

Si tout a été fait correctement, nous verrons le résultat suivant dans le web designer :

Et ceci dans l'application publiée :