PowerApps - Maîtriser les conteneurs Tutoriels

00:06:53
1 vues

Disponible dans Microsoft365

00:00:01

les conteneurs sont des éléments essentiels

00:00:04

permettant de créer des applications dynamiques

00:00:07

et responsives.

00:00:08

Un conteneur sert à regrouper plusieurs contrôles

00:00:11

et à gérer leurs dispositions de manière automatique

00:00:15

en fonction de la taille de l'écran

00:00:17

ou de la fenêtre de l'application.

00:00:19

Une application responsive est une application

00:00:22

qui s'adapte aux différentes tailles d'écran

00:00:24

comme celle d'un ordinateur,

00:00:26

d'une tablette ou d'un téléphone,

00:00:28

tout en conservant une bonne ergonomie

00:00:31

un lisibilité optimale.

00:00:33

Un conteneur est un élément

00:00:35

de power apps qui permet de structurer l'organisation des contrôles.

00:00:39

Parmi ces contrôles,

00:00:41

on peut retrouver des boutons,

00:00:42

des images ou encore des galeries.

00:00:45

Un conteneur peut également regrouper d'autres conteneurs,

00:00:48

ce qui offre une grande flexibilité

00:00:50

dans l'organisation de l'interface utilisateur.

00:00:53

Grâce aux conteneurs,

00:00:55

il devient possible d'agencer ces éléments de manière logique et dynamique,

00:01:00

facilitant ainsi leur manipulation

00:01:02

et leur intégration dans une application.

00:01:05

Dans Power Ups,

00:01:06

il existe trois principaux types de conteneurs.

00:01:09

Le premier est le conteneur simple.

00:01:12

qui sert principalement à regrouper des contrôles

00:01:15

sans imposer une disposition spécifique.

00:01:18

Ensuite,

00:01:19

il y a les conteneurs dynamiques

00:01:21

qui peuvent être horizontaux

00:01:23

ou verticaux.

00:01:25

Ces conteneurs permettent une disposition

00:01:27

automatique des éléments à l'intérieur,

00:01:30

rendant l'application plus adaptable aux différentes tailles d'écran.

00:01:34

Les conteneurs dynamiques sont souvent utilisés

00:01:37

pour structurer efficacement une application responsive.

00:01:41

Les conteneurs dynamiques dans Power Ups offrent deux orientations possibles.

00:01:45

verticale et horizontale.

00:01:48

Un conteneur vertical permet de disposer les éléments les uns sous les autres,

00:01:52

tandis qu'un conteneur horizontal

00:01:55

les aligne côte à côte.

00:01:57

Ce choix de disposition est crucial

00:01:59

pour structurer l'affichage des éléments

00:02:02

et garantir une bonne adaptation à différentes résolutions d'écran.

00:02:06

Cet exemple illustre trois types de conteneurs,

00:02:09

chacun contenant des étiquettes de texte.

00:02:12

Le conteneur simple permet de regrouper les éléments

00:02:14

sans contrainte de disposition

00:02:17

et ceux-ci peuvent être déplacés

00:02:19

manuellement.

00:02:20

À l'inverse,

00:02:21

un conteneur horizontal ou vertical

00:02:24

ne permet pas de déplacer les éléments individuellement.

00:02:27

Les modifications doivent être effectuées via le panneau de propriété

00:02:31

qui offre plusieurs réglages.

00:02:34

Il est possible de définir la direction du conteneur,

00:02:37

son alignement

00:02:38

et sa justification.

00:02:40

Les éléments s'adaptent

00:02:42

automatiquement

00:02:43

à la taille du conteneur

00:02:45

selon les paramètres établis.

00:02:48

lorsque l'espace disponible dans un conteneur devient insuffisant

00:02:52

pour afficher tous les éléments sur une seule ligne ou colonne,

00:02:56

s'il s'agit d'un conteneur vertical,

00:02:59

deux options s'offrent à vous.

00:03:00

Vous pouvez activer les barres de défilement permettant à l'utilisateur

00:03:05

de naviguer à travers le contenu

00:03:07

sans altérer la disposition initiale.

00:03:10

Alternativement,

00:03:11

l'option enveloppée

00:03:13

repositionne automatiquement les éléments sur plusieurs lignes,

00:03:17

offrant ainsi une mise en page plus compacte et harmonieuse.

00:03:21

Cette approche permet de garantir une interface fluide et adaptable

00:03:25

en fonction des contraintes d'espace.

00:03:29

Les réglages liés à la taille,

00:03:31

la position et l'apparence du conteneur sont également disponibles,

00:03:35

permettant de modifier la couleur,

00:03:37

les bordures ou encore d'ajouter des espacements entre les éléments

00:03:41

et le conteneur.

00:03:43

Chaque élément dans un conteneur peut

00:03:45

être ajusté individuellement après sélection.

00:03:49

Si l'alignement du conteneur n'est pas défini sur et tiré.

00:03:53

la hauteur et la largeur

00:03:55

peuvent être modifiés

00:03:56

manuellement.

00:04:00

Sinon,

00:04:01

elle s'adapte automatiquement à la taille du conteneur.

00:04:12

Définir une hauteur et largeur minimale

00:04:15

empêche un élément de disparaître lorsque l'espace se réduit.

00:04:20

Nous allons prendre un exemple pour illustrer

00:04:22

le concept des hauteurs et largeurs flexibles.

00:04:25

Commençons par créer un conteneur horizontal

00:04:28

qui servira de structure principale pour notre mise en page.

00:04:32

À l'intérieur de ce conteneur,

00:04:34

ajoutons deux zones de texte qui permettront d'afficher du contenu interactif.

00:04:39

pour assurer un bon alignement vertical,

00:04:42

nous choisissons l'option

00:04:43

étirer

00:04:45

afin que chaque zone de texte prenne toute la hauteur disponible du conteneur.

00:04:49

En conséquence,

00:04:51

les deux zones de texte occuperont l'espace vertical du conteneur

00:04:55

afin de mieux visualiser les effets des hauteurs et largeurs flexibles.

00:04:59

Nous ajoutons 20 pixels de remplissage partout.

00:05:02

Cette marge supplémentaire

00:05:04

garantit un espace suffisant autour des éléments,

00:05:08

évitant qu'il ne soit trop collé au bord

00:05:10

et améliorant ainsi la lisibilité

00:05:13

ainsi que l'esthétique de l'interface.

00:05:15

Ensuite,

00:05:16

définissons une hauteur minimale pour le label un

00:05:19

afin qu'il conserve une taille lisible

00:05:22

et ne devienne pas trop petit lorsque le conteneur est réduit.

00:05:26

Ainsi,

00:05:26

lorsque l'on diminue la hauteur du conteneur,

00:05:29

le label ne se compresse pas au-delà de la hauteur minimale définie.

00:05:34

Activons maintenant la largeur flexible pour le label un

00:05:38

et définissons une largeur minimale.

00:05:40

Cela lui permet de s'adapter aux variations de largeur du conteneur,

00:05:44

tout en évitant qu'il devienne trop petit et illisible.

00:05:48

Lorsque l'on modifie la taille du conteneur,

00:05:51

le label un

00:05:52

ajuste automatiquement sa largeur et sa hauteur

00:05:55

pour suivre les dimensions du conteneur.

00:05:58

Toutefois,

00:05:59

il ne se réduira pas en dessous des valeurs minimales

00:06:02

que nous avons définies.

00:06:03

Lorsque la taille du conteneur est diminuée progressivement,

00:06:07

le label rétrécit en conséquence jusqu'à

00:06:10

atteindre sa hauteur et largeur minimale.

00:06:14

À partir de ce point,

00:06:15

il cesse de se réduire davantage,

00:06:17

garantissant ainsi une lisibilité un présentation cohérente.

00:06:23

Ce tutoriel a présenté les bases

00:06:25

essentielles

00:06:27

pour comprendre et utiliser les conteneurs dans Power Ups.

00:06:30

Bien que les explications aient été principalement théoriques,

00:06:34

elles permettent d'établir une structure claire

00:06:37

et optimisée

00:06:39

pour une application.

00:06:40

Dans les prochains tutoriels,

00:06:42

nous mettrons ces notions en pratique à travers des exemples concrets

00:06:46

afin de mieux illustrer leur utilisation

00:06:49

dans un contexte réel.

Mandarine AI: CE QUI POURRAIT VOUS INTÉRESSER

LES COURS ASSOCIÉS Ce tutoriel fait partie des cours suivants

Abonnés

1 vues

Formation Vidéo Microsoft PowerApps - Concevez des expériences utilisateur dynamiques et engageantes

Renforcez votre maîtrise de Power Apps grâce à ce module intermédiaire. Apprenez à structurer des interfaces responsives, à améliorer la vis...

Cours E-learning

TOUS LES COURS