Ajouter des composants

Découvrez le pouvoir des composants et ce que vous pouvez réaliser avec eux. 

Tout est composant

Dans PandaSuite, chaque fonctionnalité est représentée par un composant : la Pop-up, la Zone de défilement, le GPS... Ainsi chaque fonctionnalité est flexible, personnalisable et synchronisable avec une autre fonctionnalité. C'est ainsi que PandaSuite vous offre la plus grande liberté de création. 🚀

Comme des Legos®, chaque composant est composé de la même façon, sous la forme d’un principe commun, abstrait, qui permet la connexion entre eux, sans être spécifique à ces mêmes composants.

Il existe plusieurs types de composants : 

• des composants graphiques (Image HD, Drag & drop...), 
• des composants de mise en page (Flexbox, Groupe...), 
• des composants système (GPS, Capteur Beacon, Capteur Mouvement) 
• et des composants données (Collection / Liste, Authentification...). 

Cliquez sur l'icône Composants pour accéder à la liste complète

Vous pouvez ajouter des composants où vous voulez dans votre application : dans un écran, dans un avant-plan et même au niveau du projet. Lorsqu'un composant est ajouté au niveau du Projet, il est actif tout au long de l'application (ce qui peut être utile pour un Minuteur ou le composant HTTP).

Quand vous ajoutez un composant, celui-ci apparaît dans la liste des Objets en bas à gauche. Les composants non visuels sont isolés des autres composants par un séparateur et ils sont placés en bas de la liste. Vous pouvez renommer vos composants.

La zone de défilement apparaît dans la liste d'objets de l'écran Villes

Caractéristiques d'un composant

Tous les composants possèdent ces mêmes caractéristiques : 

• des propriétés
• des événements déclencheurs pour lancer une action
• des actions qui peuvent lui être attribuées
• des marqueurs
• la possibilité d'être synchronisé avec un autre composant
• Il réagit en fonction des langues
• des données

Édition d'un composant

Pour éditer le contenu d'un composant, il faut rentrer à l'intérieur de ce composant : il y a une notion de profondeur. 

Pour entrer à l'intérieur, double-cliquez sur le composant. Ce composant vient le contexte. Le fil d'Ariane, en haut de votre écran, vous permet de vous situer dans votre navigation et de sortir de ce composant. 

À l'intérieur d'un composant visuel, vous pouvez ajouter toutes sortes de contenus : images, texte etc… Vous pouvez même ajouter un ou plusieurs composants et créer des imbrications avancées. 

Ici, vous êtes à l'intérieur d'une Zone de défilement qui contient un groupe

Vous pouvez créer des marqueurs sur vos composants, c'est-à-dire d'identifier un ou plusieurs comportements spécifiques de ce composant et de l'utiliser pour une action. Cela peut être le temps d'une vidéo, une position de défilement, un degré d'inclinaison etc.

Rendez-vous dans la fenêtre de gauche pour éditer et gérer vos marqueurs.

Ces marqueurs de la Zone de défilement déclenchent des animations sur l'image

Propriétés d'un composant 

Les propriétés sont spécifiques à chaque composant : source, lecture automatique, orientation, marge... 

Éditez les propriétés depuis la fenêtre de droite.

Voici les propriétés du Lecteur vidéo

Actions d'un composant 

Votre composant peut servir de déclencheur à une action. 

Pour déclencher une action à partir d'un composant, sélectionnez ce composant et cliquez sur Actions.

Choisissez un événement déclencheur parmi la liste : certains événements sont spécifiques au composant et d'autres communs à tous les composants.

Les déclencheurs de la Galerie incluent l'affichage de chaque page

Votre composant peut également être l'objet d'une action. Lorsque vous avez choisi votre événement déclencheur, sélectionnez l'action Agir sur un composant > sélectionnez ce composant et choisissez une action. 

Les actions possibles sur la Galerie

Synchroniser des composants 

La synchronisation permet de synchroniser plusieurs composants entre eux. Vous pouvez par exemple synchroniser un Lecteur Audio avec une Zone de Défilement pour faire défiler un contenu en même temps que la musique. Ou synchroniser deux Zones de défilement ensemble (ou plus) pour réaliser un effet Parallax. 

Insérez un composant Synchronisation et créez un groupe de synchronisation avec vos composants. 

Cette synchronisation entre 3 zones de défilement permet de réaliser un effet Parallaxe

Créer un composant sur-mesure

Si vous êtes développeur(se) et que vous souhaitez ajouter de nouvelles fonctionnalités, vous pouvez créer vos propres Composants personnalisés. 

Nous mettons à votre disposition nos librairies PandaBridge (Javascript & React) qui permettent d'envoyer et de recevoir des informations entre votre code et PandaSuite.