PowerApps - Maîtriser les conteneurs Tutoriels

Plongez dans l'univers des conteneurs avec notre vidéo "maîtriser les conteneurs". Découvrez comment ces éléments clés de Power Apps permettent de créer des applications dynamiques et réactives. Apprenez à structurer vos contrôles efficacement grâce à des conteneurs simples, dynamiques et flexibles, tout en garantissant une interface utilisateur optimale. Ne manquez pas cette opportunité d'approfondir vos compétences en low code!

  • 06:53
  • 83 vues
résultat(s)
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.

Il n’existe aucun élément correspondant à votre recherche dans cette vidéo...
Effectuez une autre recherche ou retournez au contenu !

 

Mandarine AI: CE QUI POURRAIT VOUS INTÉRESSER

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

Abonnés
66 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

Une erreur est survenue

Impossible de sauvegarder votre progression. Veuillez recharger la page, vous connecter, et essayer de nouveau. Si le problème persiste, merci de contacter un administrateur.

Fermer

Rappel

Afficher

/

Acceder à la session