Tutoriel du SDK de la visionneuse
Créé pour :
- Développeur
- Utilisateur ou utilisatrice
Le SDK de la visionneuse fournit un ensemble de composants JavaScript pour le développement de visionneuses personnalisées. Les visionneuses sont des applications web qui permettent l’incorporation de contenu multimédia enrichi diffusé par Adobe Dynamic Media dans des pages web.
Par exemple, le SDK fournit un zoom et un panoramique interactifs. Il fournit également une lecture vidéo et d’affichage 360° des ressources qui ont été chargées vers Adobe Dynamic Media via l’application principale appelée Dynamic Media Classic.
Bien que les composants reposent sur la fonctionnalité HTML5, ils sont conçus pour fonctionner sur les appareils Android™ et Apple iOS, ainsi que sur les ordinateurs de bureau, y compris Internet Explorer et versions ultérieures. Ce type d’expérience signifie que vous pouvez fournir un seul workflow pour toutes les plateformes prises en charge.
Le SDK est constitué de composants d’interface utilisateur qui constituent le contenu de la visionneuse. Vous pouvez mettre en forme ces composants par le biais de CSS et de composants non-UI qui ont un rôle de prise en charge, comme la récupération et l’analyse des définitions ou le suivi. Tous les comportements de composant sont personnalisables au moyen de modificateurs que vous pouvez spécifier de différentes manières, par exemple sous la forme de paires name=value
dans l’URL.
Ce tutoriel comprend l’ordre de tâches suivant pour vous aider à créer une visionneuse de zoom de base :
- Télécharger le dernier SDK de visionneuse à partir de Adobe Developer Connection
- Chargement du SDK de la visionneuse
- Ajout d’un style à votre visionneuse
- Inclusion de Container et ZoomView
- Ajout de composants MediaSet et Swatts à votre visionneuse
- Ajout de boutons à votre visionneuse
- Configuration verticale des échantillons
Télécharger le dernier SDK de visionneuse à partir de Adobe Developer Connection
-
Téléchargez le dernier SDK de visionneuse à partir de Adobe Developer Connection .
NOTE
Vous pouvez suivre ce tutoriel sans avoir à télécharger le package du SDK de visionneuse, car le SDK est chargé à distance. Cependant, le package Visionneuse comprend des exemples supplémentaires et un guide de référence API qui peuvent vous aider à créer vos propres visionneuses.
Chargement du SDK de la visionneuse
-
Commencez par configurer une nouvelle page pour développer la visionneuse de zoom de base que vous allez créer.
Tenez compte de cette nouvelle page dans le code du Bootstrap - ou chargeur - que vous utilisez pour configurer une application SDK vide. Ouvrez votre éditeur de texte favori et collez-y les balises d’HTML suivantes :
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="user-scalable=no, height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <!-- Hiding the Safari on iPhone OS UI components --> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <meta name="apple-touch-fullscreen" content="no"/> <title>Custom Viewer</title> <!-- Include Utils.js before you use any of the SDK components. This file contains SDK utilities and global functions that are used to initialize the viewer and load viewer components. The path to the Utils.js determines which version of the SDK that the viewer uses. You can use a relative path if the viewer is deployed on one of the Adobe Dynamic Media servers and it is served from the same domain. Otherwise, specify a full path to one of Adobe Dynamic Media servers that have the SDK installed. --> <script language="javascript" type="text/javascript" src="http://s7d1.scene7.com/s7sdk/2.8/js/s7sdk/utils/Utils.js"></script> </head> <body> <script language="javascript" type="text/javascript"> </script> </body> </html>
Ajoutez le code JavaScript suivant dans la balise
script
afin qu’il initialise leParameterManager
. Cela vous permet de vous préparer à créer et à instancier des composants SDK dans la fonctioninitViewer
:/* We create a self-running anonymous function to encapsulate variable scope. Placing code inside such a function is optional, but this prevents variables from polluting the global object. */ (function () { // Initialize the SDK s7sdk.Util.init(); /* Create an instance of the ParameterManager component to collect components' configuration that can come from a viewer preset, URL, or the HTML page itself. The ParameterManager component also sends a notification s7sdk.Event.SDK_READY when all needed files are loaded and the configuration parameters are processed. The other components should never be initialized outside this handler. After defining the handler for the s7sdk.Event.SDK_READY event, it is safe to initiate configuration initialization by calling ParameterManager.init(). */ var params = new s7sdk.ParameterManager(); /* Event handler for s7sdk.Event.SDK_READY dispatched by ParameterManager to initialize various components of this viewer. */ function initViewer() { } /* Add event handler for the s7sdk.Event.SDK_READY event dispatched by the ParameterManager when all modifiers are processed and it is safe to initialize the viewer. */ params.addEventListener(s7sdk.Event.SDK_READY, initViewer, false); /* Initiate configuration initialization of ParameterManager. */ params.init(); }());
-
Enregistrez le fichier comme modèle vide. Vous pouvez utiliser n’importe quel nom de fichier.
Vous pouvez utiliser ce fichier de modèle vide comme référence lorsque vous créez des visionneuses à l’avenir. Ce modèle fonctionne localement et lorsqu’il est diffusé à partir d’un serveur web.
Ajoutez maintenant un style à votre visionneuse.
Ajout de style à la visionneuse
-
Pour cette visionneuse de page complète que vous créez, vous pouvez ajouter des styles de base.
Ajoutez le bloc
style
suivant au bas dehead
:<style> html, body { width: 100%; height: 100%; } body { /* Remove any padding and margin around the edges of the browser window */ padding: 0; margin: 0; /* We set overflow to hidden so that scroll bars do not flicker when resizing the window */ overflow: hidden; } </style>
Maintenant, incluez les composants Container
et ZoomView
.
Inclusion de Container et ZoomView
-
Créez une visionneuse réelle en incluant les composants
Container
etZoomView
.Insérez les instructions
include
suivantes au bas de l’élément<head>
une fois le script Utils.js chargé :<!-- Add an "include" statement with a related module for each component that is needed for that particular viewer. Check API documentation to see a complete list of components and their modules. --> <script language="javascript" type="text/javascript"> s7sdk.Util.lib.include('s7sdk.common.Container'); s7sdk.Util.lib.include('s7sdk.image.ZoomView'); </script>
-
Créez maintenant des variables pour référencer les différents composants du SDK.
Ajoutez les variables suivantes en haut de la fonction anonyme principale, juste au-dessus de
s7sdk.Util.init()
:var container, zoomView;
-
Insérez les éléments suivants dans la fonction
initViewer
afin de pouvoir définir certains modificateurs et instancier les composants respectifs :/* Modifiers can be added directly to ParameterManager instance */ params.push("serverurl", "http://s7d1.scene7.com/is/image"); params.push("asset", "Scene7SharedAssets/ImageSet-Views-Sample"); /* Create a viewer container as a parent component for other user interface components that are part of the viewer application and associate event handlers for resize and full-screen notification. The advantage of using Container as the parent is the component's ability to resize and bring itself and its children to full-screen. */ container = new s7sdk.common.Container(null, params, "s7container"); container.addEventListener(s7sdk.event.ResizeEvent.COMPONENT_RESIZE, containerResize, false); /* Create ZoomView component */ zoomView = new s7sdk.image.ZoomView("s7container", params, "myZoomView"); /* We call this to ensure all SDK components are scaled to initial conditions when viewer loads */ resizeViewer(container.getWidth(), container.getHeight());
-
Pour que le code ci-dessus s’exécute correctement, ajoutez un gestionnaire d’événements
containerResize
et une fonction d’assistance :/* Event handler for s7sdk.event.ResizeEvent.COMPONENT_RESIZE events dispatched by Container to resize various view components included in this viewer. */ function containerResize(event) { resizeViewer(event.s7event.w, event.s7event.h); } /* Resize viewer components */ function resizeViewer(width, height) { zoomView.resize(width, height); }
-
Prévisualisez la page pour voir ce que vous avez créé. Votre page doit se présenter comme suit :
Ajoutez maintenant les composants MediaSet
et Swatches
à votre visionneuse.
Ajout de composants MediaSet et Nuancier à la visionneuse
-
Pour permettre aux utilisateurs de sélectionner des images à partir d’un ensemble, vous pouvez ajouter les composants
MediaSet
etSwatches
.Ajoutez le SDK suivant :
s7sdk.Util.lib.include('s7sdk.set.MediaSet'); s7sdk.Util.lib.include('s7sdk.set.Swatches');
-
Mettez à jour la liste des variables avec ce qui suit :
var mediaSet, container, zoomView, swatches;
-
Instanciez les composants
MediaSet
etSwatches
dans la fonctioninitViewer
.Veillez à instancier l’instance
Swatches
après les composantsZoomView
etContainer
, sinon l’ordre d’empilement masque leSwatches
:// Create MediaSet to manage assets and add event listener to the NOTF_SET_PARSED event mediaSet = new s7sdk.set.MediaSet(null, params, "mediaSet"); // Add MediaSet event listener mediaSet.addEventListener(s7sdk.event.AssetEvent.NOTF_SET_PARSED, onSetParsed, false); /* create Swatches component and associate event handler for swatch selection notification */ swatches = new s7sdk.set.Swatches("s7container", params, "mySwatches"); swatches.addEventListener(s7sdk.event.AssetEvent.SWATCH_SELECTED_EVENT, swatchSelected, false);
-
Ajoutez maintenant les fonctions de gestionnaire d’événements suivantes :
/* Event handler for the s7sdk.event.AssetEvent.NOTF_SET_PARSED event dispatched by MediaSet to assign the asset to the Swatches when parsing is complete. */ function onSetParsed(e) { // set media set for Swatches to display var mediasetDesc = e.s7event.asset; swatches.setMediaSet(mediasetDesc); // select the first swatch by default swatches.selectSwatch(0, true); } /* Event handler for s7sdk.event.AssetEvent.SWATCH_SELECTED_EVENT events dispatched by Swatches to switch the image in the ZoomView when a different swatch is selected. */ function swatchSelected(event) { zoomView.setItem(event.s7event.asset); }
-
Positionnez les échantillons au bas de la visionneuse en ajoutant le CSS suivant à l’élément
style
:/* Align swatches to bottom of viewer */ .s7swatches { bottom: 0; left: 0; right: 0; height: 150px; }
-
Prévisualisez votre visionneuse.
Notez que les échantillons se trouvent dans le coin inférieur gauche de la visionneuse. Pour que les échantillons prennent toute la largeur de la visionneuse, ajoutez un appel pour redimensionner manuellement les échantillons chaque fois que l’utilisateur redimensionne son navigateur. Ajoutez le code suivant à la fonction
resizeViewer
:swatches.resize(width, swatches.getHeight());
Votre visionneuse ressemble désormais à l’image suivante. Essayez de redimensionner la fenêtre du navigateur de la visionneuse et notez le comportement qui en résulte.
Ajoutez maintenant des boutons de zoom avant, de zoom arrière et de réinitialisation du zoom à votre visionneuse.
Ajout de boutons à la visionneuse
-
Actuellement, l’utilisateur ne peut effectuer un zoom qu’à l’aide de mouvements de clic ou de toucher. Par conséquent, ajoutez quelques boutons de commande de zoom de base à la visionneuse.
Ajoutez les composants de bouton suivants :
s7sdk.Util.lib.include('s7sdk.common.Button');
-
Mettez à jour la liste des variables avec ce qui suit :
var mediaSet, container, zoomView, swatches, zoomInButton, zoomOutButton, zoomResetButton;
-
Instanciation des boutons au bas de la fonction
initViewer
.N’oubliez pas que l’ordre est important, sauf si vous spécifiez le
z-index
dans CSS :/* Create Zoom In, Zoom Out and Zoom Reset buttons */ zoomInButton = new s7sdk.common.ZoomInButton("s7container", params, "zoomInBtn"); zoomOutButton = new s7sdk.common.ZoomOutButton("s7container", params, "zoomOutBtn"); zoomResetButton = new s7sdk.common.ZoomResetButton("s7container", params, "zoomResetBtn"); /* Add handlers for zoom in, zoom out and zoom reset buttons inline. */ zoomInButton.addEventListener("click", function() { zoomView.zoomIn(); }); zoomOutButton.addEventListener("click", function() { zoomView.zoomOut(); }); zoomResetButton.addEventListener("click", function() { zoomView.zoomReset(); });
-
Définissez maintenant quelques styles de base pour les boutons en ajoutant le code suivant au bloc
style
situé en haut de votre fichier :/* define styles common to all button components and their sub-classes */ .s7button { position:absolute; width: 28px; height: 28px; z-index:100; } /* position individual buttons*/ .s7zoominbutton { top: 50px; left: 50px; } .s7zoomoutbutton { top: 50px; left: 80px; } .s7zoomresetbutton { top: 50px; left: 110px; }
-
Prévisualisez votre visionneuse. Il doit se présenter comme suit :
Maintenant, configurez les Nuanciers de sorte qu’ils soient alignés verticalement à droite.
Configuration verticale des échantillons
-
Vous pouvez configurer des modificateurs directement sur l’instance
ParameterManager
.Ajoutez le code suivant en haut de la fonction
initViewer
afin de pouvoir configurer la disposition de la miniatureSwatches
en une seule ligne :params.push("Swatches.tmblayout", "1,0");
-
Mettez à jour l’appel de redimensionnement suivant dans
resizeViewer
:swatches.resize(swatches.getWidth(), height);
-
Modifiez la règle
s7swatches
suivante dansZoomViewer.css
:.s7swatches { top:0 ; bottom: 0; right: 0; width: 150px; }
-
Prévisualisez votre visionneuse. Il ressemble à ce qui suit :
La visionneuse de zoom de base est maintenant terminée.
Ce tutoriel sur la visionneuse aborde les principes de base du SDK de la visionneuse Dynamic Media. Lorsque vous utilisez le SDK, vous pouvez utiliser les différents composants standard pour créer et mettre en forme facilement des expériences d’affichage riches pour vos audiences cibles.