Tutoriel sur la mise en page dans Adalo

AVERTISSEMENT : Bien que ce contenu soit resté en ligne à des fins d'apprentissage, Ops Machine vous recommande expressément de NE PAS utiliser Adalo. Pendant le temps où on s'en est servi, la plateforme s'est révélée dangereusement peu sécuritaire, incomplète et, de façon générale, à peu près impossible pour livrer quoi que ce soit.

De plus, l’auteur est d’avis que les moteurs de mise en page par glisser-déposer sont en général peu fiables et donnent rarement de bons résultats en production

‍

Épargnez-vous des heures avec quelques façons simples d’apprivoiser le moteur de mise en page d’Adalo.

• Empêcher les éléments de se chevaucher
• Créer des effets de défilement modernes
• Aligner les composants récalcitrants
• Réussir les espacements
• Fixer des éléments en haut ou en bas de l’écran

L’application présentée est : http://depotop.nu/) qui aide les parents à rendre leur enfant propre en 3 jours. Elle n’existe pour l’instant qu’en néerlandais, mais sera bientôt traduite en anglais, probablement avec notre composant de traduction :  [https://youtu.be/T_EikGhUZRg) ‍

Transcription ‍

Bonjour tout le monde. Je me suis dit qu'aujourd'hui, on parlerait un peu du moteur de mise en page d'Al. C'est quelque chose qui cause beaucoup de problèmes aux gens surtout, j'imagine, ceux qui sont nouveaux dans Al, parce qu'au départ, on ne voit pas trop comment s'en servir. Mais une fois qu'on le comprend un peu, il, il devient notre ami. La plupart du temps, en tout cas.

Alors regardons l'application ici. Ce sont deux écrans, l'avant et l'après, et je vais vous montrer comment on est passés de l'un à l'autre, et je vais aussi vous montrer à quoi ils ressemblent vraiment. Donc ce premier écran, même si, vous savez, la mise en page a l'air assez simple et qu'on s'attendrait à ce qu'il ressemble pas mal à ça.

Ce qui arrive, c'est que le bouton se cache en fait derrière cette barre de navigation, l'espace entre la liste et le bouton est plus grand que prévu. Et, et donc, oui, c'est, c'est. Vous savez, il y a quelques trucs qui clochent. Et puis l'autre chose, c'est juste, pour moi, la façon dont ça défile. Moi, je suis plus Android, alors c'est peut-être juste très iOS.

Mais oui, j'ai, j'ai trouvé quelques améliorations à faire aussi. Alors regardons le résultat final et ensuite on verra comment on y est arrivés. Il y a un peu, juste quelques correctifs visuels. L'autre chose, c'est que je pense que quelqu'un me l'a changé. Mais l'autre chose, alors oubliez l'image, qui était fixée avant, et, et vous pourriez fixer tout ça aussi, pour que l'onglet soit toujours accessible.

Et, et c'est quelque chose que je ferais habituellement. Et puis l'autre chose, c'est que le bouton ici, on en a fait un bouton flottant, pour qu'il soit toujours à l'écran. On pourrait, vous savez, on pourrait quand même régler ce problème d'espacement et on pourrait quand même régler le problème où il passe derrière la navigation. Mais au bout du compte, juste le, quand le bouton est caché, l'utilisateur ne saura pas qu'il y a un bouton là, du moins pas avant d'y arriver.

Et donc ça lui donne juste une meilleure idée de ce qu'il doit faire sur la page. Et puis la dernière chose que vous remarquerez, c'est que même s'il y a de la transparence, ce n'est pas parfaitement transparent derrière cette boîte, et c'est fait juste parce qu'autrement ça a l'air un peu brouillon et le bouton ne ressort pas aussi bien.

Et en même temps, si c'était un bloc blanc plein, ça aurait quand même l'air un peu drôle, parce que ça couperait d'un coup sec. Alors c'est la solution à laquelle je suis arrivé. Alors comment on passe de l'un à l'autre? Bon. Regardons ce qui cause des problèmes sur cette page-ci et, vous savez quoi, faisons juste une nouvelle copie sur laquelle on peut travailler.

Alors pour ceux qui ne le savent pas, vous pouvez tenir Alt et glisser. À peu près n'importe quoi, un écran, un composant, et ça, ça en fait une copie, et c'est un raccourci standard à la Adobe, et c'est vraiment utile. Et donc, bon. Allons-y, allons-y avec celui-ci. C'est celui qu'on va arranger.

Alors je suppose que la première chose un peu évidente que j'ai faite ici, visuellement, c'est que j'ai enlevé l'arrondi des coins. Je suppose que vous n'êtes probablement pas ici pour apprendre à enlever l'arrondi des coins d'une image. Et je l'ai étirée d'un bord à l'autre. Parlons de l'aimantation : c'est comme ça que je fais d'habitude.

Parce qu'on veut souvent que les choses s'aimantent au centre, sinon elles peuvent paraître décentrées à l'écran. Et l'autre chose que j'aime habituellement faire, c'est aimanter au bord gauche. Si vous avez déjà glissé des éléments  dans A D, vous avez probablement remarqué quelques trucs. Un, c'est que parfois il y a plus d'un centre, et je crois que c'est parce que les différents objets sur la page ont peut-être des centres légèrement décalés.

Et l'autre chose, c'est que si vous cliquez et glissez quelque chose, ça, ça peut être assez difficile d'arriver au centre. Dans ce cas-ci, ça marche, mais pas toujours. Alors un autre truc, et je trouve que ça marche vraiment bien, c'est d'ancrer le côté gauche. Puis d'ancrer le centre, et vous voulez trouver un point d'ancrage où, vous savez, vous dépassez juste le bord de votre écran.

Alors ça, c'est un, et ça, ça règle l'image. La hauteur est un peu différente ici, mais je, je suppose que je ne vais pas jouer avec ça pour l'instant. Maintenant, la façon dont le haut est fixé, et, et c'est déjà fait, c'est simplement avec la propriété de fixation en haut. Bon. Alors maintenant, parlons de l'espacement ici. Ce que beaucoup de gens ne savent pas à propos des listes, c'est que la longueur de votre liste n'est pas importante, parce qu'elle va toujours s'agrandir pour accueillir le nombre d'enregistrements que vous avez.

Alors ce qui est vraiment important, c'est l'espace entre l'endroit où vous avez glissé le bas de la liste et le bouton. Le, et même cette partie qui dépasse ici n'est pas importante. C'est vraiment cette ligne-là. Alors on penserait qu'à ce stade, tout serait correct. Mais d'après mon expérience, ce n'est pas le cas, vous allez aussi ici.

Je vais, je vais vous montrer un, un truc que je trouve plutôt utile, c'est : nous voici, on est sur cette page. Comment on va à l'autre? Bon, parfait. Alors un autre truc assez utile, c'est simplement clic droit, recharger le cadre. Comme ça, vous ne rechargez pas tout le navigateur, et vous pouvez repartir de la même page même après avoir fait une mise à jour dans l'application.

Alors comme on le voit, même si je me suis débarrassé de cet espacement, et souvent ça marcherait, le, le bouton se cache encore derrière la, la barre de navigation en bas. Alors voyons ce qui se passe là. Si on regarde les propriétés du bouton, il est, vous savez, il est un peu tout seul. Alors ça, c'est un : rien ne l'ancre vraiment.

Je, je ne sais pas s'il est aimanté à quelque chose. Et puis qu'en est-il, ah oui, il n'a pas, le bouton n'a aucune propriété de fixation. Il ne peut pas le faire. Et puis cette barre de navigation, elle est fixée par nature. Elle doit être fixée en bas. Et donc ce qui se passe, je crois, c'est que comme elle est fixée en bas,

elle est en fait retirée de l'ordre d'empilement et elle ne crée pas d'espacement. Alors certaines personnes diraient : « Hé, ce que tu peux faire, c'est utiliser un rectangle », et vous pourriez. Vous savez, un groupe avec le rectangle, et ça créerait l'espacement autour de la navigation. Et ça empêcherait le bouton d'aller jusqu'en bas.

Alors ici, faisons ça, et je vais utiliser Contrôle + flèche bas pour l'envoyer à l'arrière, en supposant que ça marche, ce qui est le cas parfois, mais parfois non. Je suppose qu'on est dans un de ces cas où ça ne marche pas. Oh non, ça a marché. Je n'étais juste pas assez patient. Bon. Alors c'est quelque chose qu'on peut faire. Et puis groupons même ceux-ci, pour faire bonne mesure.

Et maintenant, voyons ce qui arrive. Je ne suis toujours pas convaincu que ça va marcher, mais voyons.

Non. Alors vous voyez encore, le rectangle, il, il ne s'est juste pas comporté tout à fait comme prévu. Et c'est peut-être juste ma faute. Peut-être que ce rectangle était trop petit. Mais de toute façon, regardons, regardons une autre façon de faire. Alors. De toute façon, on voulait ce bouton flottant, et le bouton n'a pas cette, je l'appelle flottante, mais cette propriété de fixation.

Alors je vais juste m'assurer que ce, ce rectangle extérieur est plus grand que la navigation et plus grand que tout le reste à l'intérieur. Et on va parler très rapidement de. Je suppose la, la théorie du moteur de mise en page : si vous avez déjà construit des sites Web, vous savez ce qu'est un diviv. Et sinon, c'est essentiellement un conteneur dans lequel on peut mettre des choses.

Et si vous utilisiez l'inspecteur de votre navigateur Web, vous verriez qu'à peu près tout est à l'intérieur d'un diviv. Ce sont les blocs, ou les, les, vous savez, les unités de base avec lesquelles on construit. Et si ce n'est pas une super explication, je suis ouvert à vos corrections. Je ne suis pas développeur Web.

Mais savoir que ce sont les conteneurs qu'on veut utiliser, c'est vraiment tout le concept qu'on a besoin de connaître. Et donc ce que j'ai remarqué, c'est qu'A Dialo fonctionne d'une façon vraiment semblable. A Dialo aime les dibs. On peut les créer avec des rectangles. Alors, vous savez, souvent on va vouloir désactiver l'arrière-plan, et ensuite on peut le rendre transparent.

Et voyons où on en est. J'ai ce groupe avec le, oui, avec le rectangle et la navigation. Et pour vraiment faire ce bouton fixé dont je parlais, ce que je veux faire, c'est couper le bouton. Je vais double-cliquer sur mon. Et quand on veut coller dans un groupe, le truc, c'est juste de double-cliquer jusqu'en bas, essentiellement jusqu'à l'élément d'arrière-plan ou à un des éléments à l'intérieur du groupe.

Et si vous collez à partir de là, vous voyez que mon bouton est à l'intérieur du groupe. Alors maintenant, vous voyez un peu comment c'était construit. Vous savez, cette version finale, et je vais aller dans Modifier les styles et je vais le fixer en bas. Et c'est pour tout le. Maintenant, d'après ce que je comprends, ça peut faire des affaires bizarres si vous fixez certains éléments de votre groupe et, et pas d'autres. Dans ce cas-ci, je l'applique seulement au niveau du groupe.

Et ça semble habituellement fonctionner. Alors allons ici voir comment j'avance.

Bon. Alors, alors voilà. Et vous voyez aussi pourquoi j'ai mis ce genre de transparence, parce que ça a encore l'air un peu drôle, mais, mais on s'approche pas mal. Alors on va juste aller double-cliquer sur notre rectangle. Et puis patiemment  attendre, vous savez, la combinaison du partage d'écran et, et c'est une application assez grosse.

Alors la performance n'est pas parfaite. Et puis ici, on peut faire un petit aperçu. Alors ma couleur d'arrière-plan, blanc, et je vais mettre le réglage alpha ici. Je pense que j'ai utilisé quelque chose comme 70.

Alors nous y voilà, on dirait que mon éditeur ne s'est pas mis à jour. Je, voyons, voyons si j'ai réussi à le faire. Oui, voilà. Alors encore une fois, il y a des ajustements à faire. La boîte est clairement trop haute, alors je jouerais avec ça. Mais, mais voici comment on peut créer une mise en page vraiment uniforme et cohérente. Maintenant, si je voulais aller un peu plus loin, et disons que je voulais fixer ces éléments.

Et je veux changer la façon dont la page va défiler. Eh bien, si je promène un peu ma souris, je peux voir de quoi tout est fait. Et il n'y a pas de rectangle principal derrière. Je ne pense pas, oh, c'est quoi ça? Non, c'est juste ma boîte de sélection. Bon. Alors ce qu'on peut faire, c'est prendre un autre rectangle

et on va juste un peu. Le monter là. Bien aimanté dans le coin, en bas, on va faire la même chose. Alors on va à peu près parfaitement d'un coin à l'autre pour toute cette section. Vous voyez qu'il y a comme un léger bord que je manque peut-être. Alors je veux juste m'assurer de bien faire ça.

Alors prendre ce bord gauche. Et puis voir si je peux attraper le centre. Ça semble un peu trop loin. Je vais prendre le bord droit et croiser les doigts. Bon. Alors Contrôle + flèche bas plein de fois pour envoyer ça à l'arrière-plan, et j'espère que ça va marcher,  il va falloir attendre une seconde pour le savoir.

Voilà. Oui, ça a marché. La, la fiabilité de cette fonction s'est beaucoup. Alors je pourrais laisser une couleur d'arrière-plan si je voulais. C'est vrai. Ça pourrait être vraiment bien pour le style. Par contre, aujourd'hui, je ne le ferai pas, alors on va juste mettre ça là. Maintenant, comme bonne pratique, j'aime grouper ces choses, même si je n'allais pas essayer de les fixer.

Mais je vais le faire. Et l'autre chose que je réalise, c'est que cet en-tête est déjà fixé, c'est vrai? Alors ça suggère en fait que ce serait probablement une meilleure idée, plutôt que d'empiler deux éléments fixés, ce qui pourrait vraiment les écraser ensemble. Peut-être pas, je ne suis pas sûr de comment ça se comporterait, mais aussi bien les mettre tous dans le même paquet.

Alors si je regarde cette barre d'application, c'est ça, encore une fois, les barres d'application, je n'ai pas à préciser de propriétés de fixation,  parce qu'elles sont construites comme ça. Alors je vais faire de tout ça un groupe et puis, avec Modifier les styles, on va le fixer en haut et croiser les doigts. Qu'est-ce qu'on a obtenu?

Oui. Oh,  alors ce qui serait utile, vous voyez cette ligne ici. Il faudrait que je, que je règle ça avec la boîte et je voudrais mettre. Une sorte d'arrière-plan plein ici derrière, juste pour que, vous savez, on, on obtienne pleinement l'effet qu'on cherche. Alors faisons ça. Hé, vous savez quoi? J'ai déjà quelque chose qui peut servir d'arrière-plan blanc.

Alors il se trouve qu'on va utiliser ça. Alors le voilà. Je pourrais même ajouter une ombre à ceci. Si je voulais. Maintenant, la façon dont ça a été construit, je m'en souviens maintenant, c'est un peu étrange. C'était une façon intéressante de faire. En fait, c'est comme un rectangle replié. Alors je veux supprimer ça. Et puis ce que je veux faire, c'est aller à ce sky et ajouter une ombre.

Et je suis au niveau de mon rectangle, alors je vais aller dans Modifier les styles et on va juste ajouter l'ombre de base, qui a l'air un peu plus grande, par deux. Bon. Maintenant, regardons ce qu'on a.

Vous. Bon. Alors on attend, est-ce que j'ai, est-ce que j'ai perdu quelque chose ici? Est-ce que c'est quelque chose que j'ai fait? Ou c'est juste un chargement lent? On va juste basculer cette page-ci.

Non. Bon. Juste un chargement lent. Alors voilà. Maintenant on voit qu'on a vraiment fixé cette partie du haut. Maintenant, on pourrait dire que l'ombre en haut est peut-être un peu drôle. Alors il y a, vous savez, on pourrait aller beaucoup plus loin, mais c'est comme ça qu'on pourrait faire plein de trucs intéressants avec les mises en page. Maintenant, la dernière chose dont je veux parler, c'est qu'en ce moment, tout ça se comporte assez bien.

Mais parfois vous allez avoir, vous savez, peut-être que votre texte ne s'aligne pas avec, avec les éléments en dessous, ou vous allez avoir plusieurs zones de texte ou plusieurs éléments et ils ne veulent juste pas rester alignés. Et là vous passez votre temps à aligner ces boîtes et à essayer de les aimanter là où vous pensez qu'elles devraient être, du mieux que vous pouvez.

Et, et ça ne marche toujours pas. Alors encore une fois, c'est quoi. La solution, la solution, c'est d'utiliser un rectangle, en se rappelant qu'on fait essentiellement juste des conteneurs pour des choses. Et ce qu'on peut faire, c'est mettre tous ces éléments dans leur propre, essentiellement un diviv encore une fois, c'est un carré dans un dial. Alors laissez-moi envoyer ça à l'arrière-plan.

Bon. Et encore une fois, ce qui est important avec la liste, c'est que je n'ai pas besoin d'aller jusqu'au bas de « name » ici. Je dois aller jusqu'au bas de l'endroit où j'ai glissé ma liste. Encore une fois, la façon dont at DAOs va gérer l'espacement, c'est qu'il s'intéresse plus à l'espace entre le bas de. Cette liste et le bas de ce rectangle, et puis l'espace entre le bas de ce rectangle et le, je suppose le haut de mon autre rectangle ici.

Alors ce sont les espacements qu'il va utiliser pour faire ses calculs. J'ai dit que je voulais ajuster ça un peu. Je. C'est probablement trop, je pense, le bon effet. Et ici vous voyez que j'ai de la difficulté à obtenir la précision que je veux. Alors le, le truc, c'est toujours de zoomer. Alors les espacements clés que j'ai, c'est qu'il n'y a pas d'espace entre le bas de ma liste et le bas de ce rectangle.

S'il y en avait, A D le respecterait. Il va respecter l'espace entre ici et ici, en général. Et ce que, vous savez, là où vous voyez souvent des choses s'écraser, c'est parce qu'Adal. Essaie d'être adaptatif et veut se débarrasser de l'espace blanc s'il n'est pas nécessaire. Alors essentiellement, si je voulais créer plus d'espace, je pourrais faire quelque chose comme ça.

C'est ça. Et si ma liste. Grandit ou rapetisse, ce carré extérieur, ce gris foncé, va grandir ou rapetisser aussi. Et il va toujours garder l'espace entre le bas de ma liste, cette ligne ici, et le bas de mon rectangle. Et il va toujours maintenir l'espace entre ce rectangle et ce bouton.

Alors. Beaucoup de gens aiment utiliser des boîtes externes pour créer de la marge et de l'espace, mais je trouve que c'est beaucoup plus simple et plus fiable de se fier essentiellement à la marge intérieure qu'il y a entre la boîte. Et l'objet que vous voulez utiliser. Oh, vous voyez ici que même mon rectangle a un peu dépassé le bord, mais je m'en suis tiré.

Alors vous pourriez même dire, vous savez, si ça marche, on n'y, on n'y touche pas. On verra si je me suis causé des problèmes. Et nous voici, juste avec les dernières retouches et les résultats finaux. Oui. Alors vous voyez cet effet de transparence. C'est encore un peu, ça demande encore un petit ajustement ici en bas, mais c'est beaucoup mieux.

J'ajoute le carré ici. Je n'ai rien réglé, en fait, parce que je n'avais pas le problème que je décrivais, mais, mais c'est un problème très courant. Et comme vous le voyez, ça se comporte comme prévu. L'espacement, c'est essentiellement mes deux espacements dont j'ai parlé. Et, et oui, nous y voilà. Alors voilà le moteur de mise en page d'Adela et juste quelques trucs astucieux pour travailler avec lui et en faire votre ami.

Et une fois que vous maîtrisez ça, ça règle vraiment. J'ai envie de dire la moitié de la courbe d'apprentissage difficile du début sur la plateforme. Alors j'espère que c'était utile. Et si ça l'était, abonnez-vous, mettez un j'aime, ça va nous encourager à en faire d'autres, et écrivez-nous si vous avez des questions.

‍