thumb_ressources_grand-19.png

Insérer une vidéo YouTube, intégrer son Wordpress, se connecter à une API, créer ses composants personnalisés... voilà quelques unes des nombreuses utilisations du composant HTML. Bonne nouvelle : pas besoin d'être développeur pour s'amuser avec ce composant !

Concrètement le composant HTML vous permet d'insérer du contenu HTML en ligne (web) ou hors ligne (un dossier ZIP). Dans la fenêtre PROPRIÉTÉS, choisissez le type et ajoutez la source de votre contenu (URL ou ZIP). Attention, ce contenu ne s'affiche pas directement dans le studio : double-cliquez sur le composant pour le faire apparaître !

 

Voici la liste des propriétés par défaut :

  • Editer le HTML : placez des marqueurs (sous la forme d’ID) sur votre composant
  • Type : choisissez entre hors ligne ou en ligne
  • Changer la source : (uniquement disponible pour du contenu hors ligne) vous permet de remplacer le dossier .zip
  • Paramètres : indiquez le chemin principal pour accéder au contenu : la page HTML (.html) ou bien l’URL. Activez l’option de zoom ou de défilement lorsque vous insérez un contenu visuel
  • Marqueur par défaut : définissez un marqueur (repère) par défaut dans votre contenu HTML

propriétés HTMLpropriétés HTML

Attention : si vous insérez un .zip, attention à bien mettre vos fichiers à la racine : ils doivent être directement accessibles dès l’extraction pour pouvoir être utilisés. Ne regroupez pas vos fichiers dans un dossier au moment de la compression (voir exemple ci-dessous).

exemple fichier zip

 

Ok super mais pour quoi faire ?

 

Si vous n'y connaissez rien en HTML/Javascript

Insérer une page web / une vidéo Youtube...

C'est l'utilisation la plus simple du composant HTML. Vous pouvez afficher n'importe quelle page web directement dans votre application.

Choisissez le type "En ligne" et insérez l'URL. Si rien ne s'affiche, vérifiez que le domaine est bien sécurisé (HTTPS).

 Astuce : puisque ce contenu est en ligne, votre utilisateur doit être connecté à Internet pour le visualiser. A l'aide des déclencheurs "Connecté (en ligne)” / “Déconnecté (hors ligne)”, vous pouvez afficher un message et prévenir vos utilisateurs de cette contrainte.

 

Piocher dans la librairie des composants HTML

 

Au-delà des composants natifs du studio (zone de défilement, pop up...), vous avez à disposition un ensemble de composants HTML prêts à l'emploi.  Voici la liste de nos composants HTML :

Ils sont disponibles sous la forme d'un dossier ZIP à intégrer directement dans votre composant HTML. Consultez l'article correspondant pour comprendre leur mode de fonctionnement et les personnaliser.

 

Si vous avez des connaissance ou que vous êtes développeur(se)

Nous mettons à votre disposition une librairie Javascript (PandaBridge) qui vous permet de créer vos propres composants HTML et de les faire communiquer simplement avec le reste du contenu créé en PandaSuite (recevoir et envoyer des notifications). Concrètement tout ce que le HTML/Javascript vous permet est intégrable avec PandaSuite.

Quelques exemples d'utilisations :

  • se connecter à une base de données et insérer un formulaire de login
  • relier son application à un contenu Wordpress
  • s'interfacer avec un système de prise de commandes...

Comment fonctionne un composant HTML personnalisé ?

fonctionnement HTML personnalisé

Si vous souhaitez personnaliser un contenu en ligne, vous pouvez également utiliser le fichier de description pandasuite.json et le fichier PandaBridge. Pour cela, ajoutez simplement un fichier crossdomain.xml à la racine du domaine.

 

Rentrons dans le détail de ces 4 éléments : 

JSON

Le fichier de description : pandasuite.json

Ce fichier vous permet de décrire le fonctionnement de votre composant HTML. Il permet de personnaliser tous les attributs "classiques" d'un composant. Ils sont rangés par catégorie et peuvent ainsi facilement être réinterprétés dans le studio de création.

La liste des catégories :

Catégories Description
properties les fonctionnalités de votre composant (fenêtre Propriétés)
events les déclencheurs de votre composant (fenêtre Interactivités, à la sélection du composant)
actions les actions liées à votre composant (fenêtre Interactivités, à la création d'une action sur le composant)
markers les marqueurs définis par défaut sur votre composant (fenêtre Edition). Attention, vous devez avoir autorisé au préalable la création de marqueurs dans votre code HTML, voir ci-dessous.
synchronization les propriétés synchronisables de votre composant (fenêtre Propriétés du composant Synchronisation)
system la personnalisation du libellé des marqueurs et la personnalisation des arguments (fenêtre Edition)

Chaque catégorie est construite sous la forme d'un tableau composé d'objets. Ces objets peuvent avoir différentes propriétés : elles sont toutes détaillées ci-dessous.

Catégorie properties :

Propriétés Description
id l'identifiant unique qui permet de créer le lien dans votre code Javascript
name le nom de la propriété dans le studio
locale_name les traductions du nom de la propriété. Les différentes langues sont indiquées sous la forme standard : fr_FR
type le type de propriétés. Il existe 4 types différents : Integer (nombre sans virgule, par exemple 2540), Float (nombre avec virgule, par exemple 14,45), String(chaîne de caractères, par exemple "Il y a 5 chats") et Boolean (true (vrai) ou false (faux)). Si le type est Integer ou Float, vous pouvez également spécifier un min (minimum) et un max (maximum).

Quelque soit le type de propriété, vous pouvez définir une value, c'est-à-dire une valeur par défaut.

La propriété activable vous permet d'intégrer une checkbox dans la fenêtre Propriété et d'avoir la possibilité d'activer ou désactiver la propriété. Si vous n'utilisez pas cette propriété, ce choix sera impossible.

Catégorie actions :

Propriétés Description
id l'identifiant unique qui permet de créer le lien dans votre code Javascript
name le nom de la propriété dans le studio
locale_name les traductions du nom de la propriété. Les différentes langues sont indiquées sous la forme standard : fr_FR
params les paramètres de l'action, sous la forme d'un tableau dans lequel on peut spécifier des propriétés.

Catégorie events :

Propriétés Description
id l'identifiant unique qui permet de créer le lien dans votre code Javascript
name le nom de la propriété dans le studio
locale_name les traductions du nom de la propriété. Les différentes langues sont indiquées sous la forme standard : fr_FR

Catégorie markers :

Propriétés Description
id l'identifiant unique qui permet de créer le lien dans votre code Javascript
name le nom de la propriété dans le studio
locale_name les traductions du nom de la propriété. Les différentes langues sont indiquées sous la forme standard : fr_FR
data cette propriété est une vraie boîte noire. Elle permet de spécifier n'importe quelle donnée comme marqueur.
default le marqueur par défaut. Si vous n'avez rien spécifié, la liste dans le studio sera vide. Néanmoins, vous pourrez toujours ajouter des marqueurs depuis le studio.

Catégorie synchronization :

Propriétés Description
id l'identifiant unique qui permet de créer le lien dans votre code Javascript
name le nom de la propriété dans le studio
locale_name les traductions du nom de la propriété. Les différentes langues sont indiquées sous la forme standard : fr_FR

Catégorie system :

Propriétés Description
actions les actions liées à votre composant (fenêtre Interactivités, à la création d'une action sur le composant)
params les paramètres de l'action, sous la forme d'un tableau dans lequel on peut spécifier des propriétés.
events les déclencheurs de l'action, sous la forme d'un tableau dans lequel on peut spécifier des propriétés.
autosave la sauvegarde automatique

 

 

pandabridge logo

Le fichier PandaBridge

Le PandaBridge vous permet de simplifier la communication entre votre composant HTML et votre application, à la fois en termes d'émission et de réception. Vous devez simplement insérer ce fichier dans votre dossier ZIP.

Il n'y a aucune modification à apporter.

Téléchargez ce fichier

 

méthodes de la classe pandabridge

Les méthodes de la classe PandaBridge

Les méthodes de la classe PandaBridge vous permettent de remonter et d'envoyer des informations entre votre composant et l'environnement PandaSuite.

  • PandaBridge.send :  C'est la méthode d'envoi, pour communiquer du composant vers l'application. Elle est utilisée pour faire remonter des événements/déclencheurs.
  • PandaBridge.init :  Elle permet l'initialisation du composant, c'est elle qui va permettre d'exécuter les fonctionnalités de PandaBridge.
  • PandaBridge.synchronize : Cette méthode s'appuie sur une fonction spécifique dans laquelle les arguments correspondent au pourcentage de synchronisation.
  • PandaBridge.onLoad : Cette méthode est appelée une seule fois, au chargement visuel du composant. Elle permet de recevoir les propriétés de l'objet et la liste des marqueurs définis dans le pandasuite.json.
  • PandaBridge.listen : Elle permet de recevoir des actions du studio, elle est utilisée pour les actions de composants.
  • PandaBridge.isStudio : Elle correspond à l'action d'être dans le studio, par exemple dans le cas de l'appareil photo. Elle est de type booléenne, elle répond à  true ou false.
  • PandaBridge.getSnapshotData :  C'est la méthode pour faire remonter les marqueurs. Elle est de paire avec la méthode setSnapshotData.
  • PandaBridge.setSnapshotData : C'est la méthode pour éditer les marqueurs. Elle est de paire avec la méthode getSnapshotData.

 

 

logo fichier zip

Zippez le tout

Une fois que vous avez paramétré les fichiers, zippez le tout.

Attention : votre fichier HTML principal doit être accessible dès la racine au moment de la compression. Ne regroupez pas ces fichiers dans un dossier au moment de la compression.

Insérez le dossier .zip dans un composant HTML et paramétrez ce composant comme à votre habitude.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0

Créez votre contenu interactif dès aujourd'hui

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

COMMENCEZ MAINTENANT !