Tutorial sull’SDK per visualizzatori viewer-sdk-tutorial
L’SDK del visualizzatore fornisce un set di componenti basati su JavaScript per lo sviluppo di visualizzatori personalizzati. I visualizzatori sono applicazioni basate sul web che consentono di incorporare nelle pagine web i contenuti rich media gestiti da Adobe Dynamic Medie.
Ad esempio, l'SDK fornisce zoom e panning interattivi. Inoltre, fornisce una visualizzazione a 360° e la riproduzione video delle risorse caricate in Adobe Dynamic Medie tramite l’applicazione back-end denominata Dynamic Media Classic.
Anche se i componenti si basano sulla funzionalità HTML5, sono progettati per funzionare su dispositivi e desktop Android™ e Apple iOS, tra cui Internet Explorer e versioni successive. Questo tipo di esperienza ti consente di fornire un unico flusso di lavoro per tutte le piattaforme supportate.
L’SDK è costituito da componenti dell’interfaccia utente che compongono il contenuto del visualizzatore. Puoi assegnare a questi componenti uno stile CSS o componenti non dell’interfaccia utente che dispongono di un certo tipo di ruolo di supporto, ad esempio recupero, analisi e tracciamento delle definizioni dei set. Tutti i comportamenti dei componenti sono personalizzabili tramite modificatori che è possibile specificare in vari modi, ad esempio come name=value
coppie nell'URL.
Questo tutorial include il seguente ordine di attività per aiutarti a creare un visualizzatore di zoom di base:
- Scarica l'SDK del visualizzatore più recente da Adobe Developer Connection
- Carica l'SDK del visualizzatore
- Aggiunta di uno stile al visualizzatore
- Contenitore incluso e ZoomView
- Aggiunta di componenti MediaSet e Swatches al visualizzatore
- Aggiunta di pulsanti al visualizzatore
- Configurazione dei campioni in verticale
Scarica l’SDK del visualizzatore più recente da Adobe Developer Connection section-84dc74c9d8e24a2380b6cf8fc28d7127
-
Scaricare l'SDK del visualizzatore più recente da Adobe Developer Connection .
note note NOTE Puoi completare questa esercitazione senza scaricare il pacchetto SDK del visualizzatore, perché l’SDK viene caricato in remoto. Tuttavia, il pacchetto Visualizzatore include ulteriori esempi e una guida di riferimento API che possono essere utili per creare visualizzatori personalizzati.
Caricare l’SDK del visualizzatore section-98596c276faf4cf79ccf558a9f4432c6
-
Per iniziare, imposta una nuova pagina per sviluppare il visualizzatore zoom di base che stai per creare.
Considera questa nuova pagina come il codice Bootstrap (o caricatore) utilizzato per impostare un’applicazione SDK vuota. Apri l’editor di testo preferito e incolla il seguente markup HTML:
code language-html <!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>
Aggiungere il codice JavaScript seguente nel tag
script
in modo che inizializziParameterManager
. In questo modo è possibile prepararsi a creare e creare istanze di componenti SDK all'interno della funzioneinitViewer
:code language-javascript /* 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(); }());
-
Salva il file come modello vuoto. È possibile utilizzare qualsiasi nome di file desiderato.
Puoi utilizzare questo file modello vuoto come riferimento quando crei visualizzatori in futuro. Questo modello funziona localmente e quando viene distribuito da un server web.
Ora aggiungi stile al visualizzatore.
Aggiunta di stile al visualizzatore section-3783125360a1425eae5a5a334867cc32
-
Per questo visualizzatore a pagina intera che stai creando, puoi aggiungere alcuni stili di base.
Aggiungi il seguente blocco
style
alla fine dihead
:code language-html <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>
Ora includi i componenti Container
e ZoomView
.
Inclusione di Container e ZoomView section-1a01730663154a508b88cc40c6f35539
-
Creare un visualizzatore effettivo includendo i componenti
Container
eZoomView
.Inserire le seguenti istruzioni
include
nella parte inferiore dell'elemento<head>
dopo il caricamento dello script Utils.js:code language-javascript <!-- 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>
-
Ora crea delle variabili per fare riferimento ai vari componenti dell’SDK.
Aggiungi le seguenti variabili nella parte superiore della funzione principale anonima, appena sopra
s7sdk.Util.init()
:code language-javascript var container, zoomView;
-
Inserire quanto segue nella funzione
initViewer
per definire alcuni modificatori e creare un'istanza dei rispettivi componenti:code language-javascript /* 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());
-
Per il corretto funzionamento del codice precedente, aggiungere un gestore eventi
containerResize
e una funzione helper:code language-javascript /* 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); }
-
Visualizzare l'anteprima della pagina in modo da poter vedere ciò che è stato creato. La pagina avrà un aspetto simile al seguente:
Aggiungere ora i componenti MediaSet
e Swatches
al visualizzatore.
Aggiunta di componenti MediaSet e Campioni al visualizzatore section-02b8c21dd842400e83eae2a48ec265b7
-
Per consentire agli utenti di selezionare immagini da un set, è possibile aggiungere i componenti
MediaSet
eSwatches
.Aggiungi i seguenti SDK includono:
code language-javascript s7sdk.Util.lib.include('s7sdk.set.MediaSet'); s7sdk.Util.lib.include('s7sdk.set.Swatches');
-
Aggiorna l’elenco delle variabili con quanto segue:
code language-javascript var mediaSet, container, zoomView, swatches;
-
Creare istanze di
MediaSet
eSwatches
componenti all'interno della funzioneinitViewer
.Assicurarsi di creare un'istanza dell'istanza
Swatches
dopo i componentiZoomView
eContainer
, altrimenti l'ordine di sovrapposizione nascondeSwatches
:code language-javascript // 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);
-
Ora aggiungi le seguenti funzioni del gestore eventi:
code language-javascript /* 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); }
-
Posiziona i campioni nella parte inferiore del visualizzatore aggiungendo il seguente CSS all'elemento
style
:code language-css /* Align swatches to bottom of viewer */ .s7swatches { bottom: 0; left: 0; right: 0; height: 150px; }
-
Visualizzare l'anteprima del visualizzatore.
I campioni si trovano in basso a sinistra nel visualizzatore. Affinché i campioni occupino l’intera larghezza del visualizzatore, aggiungi una chiamata per ridimensionarli manualmente ogni volta che l’utente ridimensiona il browser. Aggiungere quanto segue alla funzione
resizeViewer
:code language-javascript swatches.resize(width, swatches.getHeight());
L'aspetto del visualizzatore è ora simile a quello dell'immagine seguente. Prova a ridimensionare la finestra del browser del visualizzatore e osserva il comportamento risultante.
Ora aggiungi al visualizzatore i pulsanti zoom in, zoom out e zoom reset (zoom in, zoom out, zoom reset).
Aggiunta di pulsanti al visualizzatore section-1fc334fa0d2b47eb9cdad461725c07be
-
Attualmente, l’utente può eseguire lo zoom solo con gesti di clic o tocco. Pertanto, aggiungere alcuni pulsanti di base per il controllo dello zoom al visualizzatore.
Aggiungi i seguenti componenti pulsante:
code language-css s7sdk.Util.lib.include('s7sdk.common.Button');
-
Aggiorna l’elenco delle variabili con quanto segue:
code language-javascript var mediaSet, container, zoomView, swatches, zoomInButton, zoomOutButton, zoomResetButton;
-
Crea istanza pulsanti nella parte inferiore della funzione
initViewer
.Ricorda che l'ordine è importante, a meno che non si specifichi
z-index
in CSS:code language-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(); });
-
Ora definisci alcuni stili di base per i pulsanti aggiungendo quanto segue al blocco
style
nella parte superiore del file:code language-css /* 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; }
-
Visualizzare l'anteprima del visualizzatore. Dovrebbe essere simile al seguente:
Ora configura i campioni in modo che siano allineati verticalmente a destra.
Configurazione dei campioni in verticale section-91a8829d5b5a4d45a35b7faeb097fcc9
-
È possibile configurare i modificatori direttamente nell'istanza
ParameterManager
.Aggiungere quanto segue nella parte superiore della funzione
initViewer
per configurare il layout miniatureSwatches
come riga singola:code language-javascript params.push("Swatches.tmblayout", "1,0");
-
Aggiorna la seguente chiamata di ridimensionamento in
resizeViewer
:code language-javascript swatches.resize(swatches.getWidth(), height);
-
Modifica la seguente regola
s7swatches
inZoomViewer.css
:code language-css .s7swatches { top:0 ; bottom: 0; right: 0; width: 150px; }
-
Visualizzare l'anteprima del visualizzatore. Si presenta come segue:
Il visualizzatore zoom di base è stato completato.
Questo tutorial illustra le nozioni di base di Dynamic Medie Viewer SDK. Mentre lavori con l’SDK, puoi utilizzare i vari componenti standard per creare e personalizzare facilmente le esperienze di visualizzazione per il pubblico di destinazione.