Ce tutoriel vous montrera l'intégration d'une page de connexion qui a été précédemment créée sur Figma. Figma vous donne automatiquement les CSS affiliés aux éléments de la page que vous avez créée, voyons comment les intégrer dans le Studio.
Note : Nous avons actuellement créé le design avec Figma (un outil gratuit) mais d'autres outils comme Adobe XD vous fournissent également des CSS automatiques.
Étape 1 : Créer un nouveau projet
La page de connexion que vous allez recréer a été créée sur figma.
Voici le lien pour y accéder :
https://www.figma.com/file/ltNjfK14DfBCIvrRZ
ekR6k/Styling_tutorial-design?t=T5PdI13kCqktNIYY-1
NB : Vous devez utiliser ou créer un compte Figma (gratuit) pour accéder au CSS.
Comme vous pouvez le voir, chaque élément du design peut être cliqué, et dans la partie droite de la page, dans la section "inspect", le CSS pour chaque élément est automatiquement généré. C'est ce que nous utiliserons pour concevoir cette même page dans le Studio.
Maintenant que vous savez cela, créons notre application :
Pour créer un nouveau projet, allez dans Fichier -> Nouveau -> Projet et cherchez "Convertigo Low Code FullStack Web/Desktop or Mobile app project" et nommez-le "styling_tutorial".
Une fois que votre projet a été créé, utilisez simplement le bouton play pour ouvrir le Visual App Viewer.
Note : N'oubliez pas que si vous nommez votre projet différemment, vous ne pourrez pas continuer correctement le tutoriel.
Étape 2 : Intégrer les grilles
Maintenant que vous avez votre application emply, il est temps d'en définir la mise en page : La façon dont les éléments seront affichés dans la page. Rappelons rapidement ce que nous avons :
- Un titre et un sous-titre
- Deux champs de saisie
- Un bouton
Créons des grilles : nous avons quatre blocs, donc 4 Grid Rows de 25% chacun :
Dans votre projet, allez dans Application -> NgxApp
-> Pages -> Page -> Content puis cliquez dessus et cherchez le composant "Grid" dans la Palette.
Lorsque vous faites glisser le composant Grid vers la fenêtre App Viewer, choisissez "inside". Affichez ensuite les bordures de la grille : pour ce faire, cliquez sur le bouton "Show all grids or current selected" situé à côté de l'App Viewer (la dernière icône de la barre d'outils verticale).
Ici, vous n'avez pas besoin de la colonne droite/gauche, il suffit donc de supprimer la "GridCol1" dans le Treeview.
Fixez la hauteur de la "GridRow" à 25% dans les propriétés de la GridRow -> Height.
Ensuite, il vous suffit de dupliquer cette GridRow 4 fois dans la grille (clic droit sur la GridRow-> Copier, puis clic droit sur la grille principale et choisir Coller "en tant qu'enfant" dans la grille)
La page est maintenant divisée en 4 blocs égaux, où vous ajouterez les composants de votre page.
Étape 3 : Placez les éléments de votre page
Comme vous n'en avez pas besoin ici, vous pouvez supprimer l'en-tête et le pied de page.
L'étape suivante consiste simplement à ajouter vos éléments de page :
Cliquez sur votre première GridCol, puis dans la palette cherchez "H1". Faites-le glisser et déposez-le dans votre première GridRow. Supprimez l'étiquette sur le GridCol pour vous débarrasser de la "Column 11", puis changez l'étiquette de votre H1 dans les propriétés dans "Text value" comme sur le design Figma : "Glad to see you again !"
Puis dans cette même section ajoutons le sous-titre : Cherchez le composant "Paragraph" dans la palette et glissez-déposez-le sous le premier texte. Comme pour le titre, changez sa valeur comme dans le design Figma : "Ready for a new experience ?"
Répétons l'opération avec les autres éléments dans les étapes suivantes.
Étape 4 : Placez les éléments de votre page #2
Sélectionnez votre deuxième GridRow (supprimez à nouveau l'étiquette), puis recherchez "GenericItem" dans la palette. Glissez-déposez cet élément générique dans la deuxième section. Dans l'étiquette de l'élément générique, remplacez la valeur du texte par "Nom d'utilisateur". Dans la palette, recherchez le composant "TextInput" et glissez-déposez-le dans votre GenericItem (cette entrée de texte sera utilisée pour remplir le champ).
Ensuite, dans la palette, recherchez le composant "Icon" et glissez-déposez-le dans votre GenericItem. Cliquez dessus, et dans les propriétés, définissez sa taille comme "small" et son emplacement comme "start" pour le placer à gauche. Cliquez ensuite sur le [...] du champ "Nom de l'icône" : C'est ici que vous choisirez l'icône que vous voulez. (Ici, vous pouvez littéralement choisir l'icône que vous voulez.)
Maintenant que vous avez votre première entrée de texte complète, il suffit de copier tout l'élément générique et de le coller dans le prochain GridCol. Changez l'icône et le libellé en "Password"
Dans l'étape suivante, vous placerez votre bouton, puis ce sera le moment de styliser le tout.
Étape 5 : Placez les éléments de votre page #3
Le dernier élément à afficher est le bouton : rien de compliqué, cherchez dans la palette le composant "Button", faites-le glisser et déposez-le dans la dernière section de la grille.
Changez la valeur du texte du bouton dans l'arborescence par "Sign in".
Vous avez maintenant tous les éléments qui composent la page de connexion : voyons comment la styliser comme dans le dessin Figma.
Étape 6 : Styliser les éléments de votre page
It's time to put some styling in this page !
As told at the beginning of this tutorial, each element of this page has an automatic CSS generated by figma. You just have to click the element you want, click on "inspect" and you simply have to copy/paste it. (Don't copy the Height, Width and position, it is useless for the Studio). Let's see where !
For the first CSS element, select the background of the page (click on the page background), and as you can see the affiliated CSS shows up. Copy it (here we just need the background one) and come back in the Studio.
The idea is simply to put a "Style" component in each element you want to style : Search in the palette for "Style" and as you want to change the background color, drag & drop this component directly in your content, directly on the app viewer as in the video or in the treeview.
Then double click the Style to open the editor and paste your copied CSS.
Be careful : you have to paste the CSS inside the {} to be effective.
Overmore, you will always have to add "--" before every CSS line that you will paste : That is mandatory to tell the component you style to "accept" this styling.
Étape 7 : Styliser les éléments de la page #2
Répétons l'opération avec le Titre (h1) : Dans le projet Figma, cliquez sur le "Glad to see you again !" et copiez le CSS qui apparaît à droite (sauf la Font-family qui sera mise en place après).
Revenez dans le Studio, cherchez le composant "Style" dans la palette et glissez-déposez-le directement dans le champ h1 dans l'App Viewer.
Ouvrez le composant style dans le champ H1 dans l'arborescence, double-cliquez pour l'ouvrir et collez votre CSS. (N'oubliez pas le "--" avant au début de chaque ligne).
Répétez l'opération pour le sous-titre (paragraphe) : Cliquez-le sur FIgma, copiez le CSS (sauf la font-family), Glissez-déposez un composant de style dans le paragraphe, ouvrez-le et collez votre CSS. (N'oubliez pas le "--" au début de chaque ligne).
Cherchez ensuite dans la palette le composant "FormatLayout" et glissez-déposez-le dans la "Grille" principale de l'arborescence. Ce FormatLayout va centrer les éléments de la page.
Cliquez sur le FormatLayout et, dans ses propriétés, cherchez "Alignment" et réglez-le sur "ion-text-center".
Étape 8 : Styliser les éléments de la page #3
Répétez cette opération avec le texte de saisie : Bonne nouvelle, les deux champs étant identiques, il vous suffira de le faire pour l'un et de copier/coller le composant style dans le second.
Dans Figma, cliquez sur le premier champ de texte de saisie et copiez le CSS (à l'exception de la Largeur, de la Hauteur et de la Position).
Revenez dans le Studio, cherchez le composant "Style" dans la palette et glissez-déposez-le dans le composant "GenericItem" dans l'arborescence (difficile à pointer directement dans l'App Viewer).
Ouvrez le composant style, double-cliquez pour l'ouvrir et collez votre CSS. (N'oubliez pas le "--" au début de chaque ligne).
CTRL + S dans l'éditeur pour appliquer le CSS, et cliquez simplement avec le bouton droit sur ce composant Style pour le copier et le coller dans le deuxième GenericItem.
Étape 9 : Styliser les éléments de la page #4
Le dernier élément à styliser est le bouton. Cliquez dessus dans Figma, copiez le CSS (même la largeur et la hauteur pour celui-ci) et revenez dans le Studio : cherchez le composant Style dans la palette, glissez et déposez-le directement dans le bouton App Viewer, ouvrez le style et collez votre CSS (n'oubliez pas le "--" avant le début de chaque ligne). (N'oubliez pas le "--" au début de chaque ligne).
CTRL + S dans l'éditeur pour appliquer le CSS.
Vous avez maintenant tous vos éléments affichés visuellement comme dans Figma.
Cependant, la disposition de la page ne correspond toujours pas au design de Figma : Nous allons y remédier dans l'étape suivante.
Étape 10 : Styliser les éléments de la page #5
Tous les réglages que vous allez effectuer sont liés aux composants de la grille.
La première chose à faire est de mieux placer les textes de saisie : Dans l'arborescence, cliquez sur "GridRow1". Dans les propriétés, cherchez le champ "Alignement" et mettez-le à "ion-align-items-end".
Cela placera le texte de saisie en bas de cette grille.
Répétez cette opération avec la "GridRow2" et la "GridRow3" en mettant l'alignement à "ion-align-items-center".
Cela rend la page réactive : Vous pouvez changer d'appareil en cliquant sur l'icône du smartphone à gauche de l'App Viewer pour le vérifier.