Viewer-SDK-Tutorial

Das Viewer-SDK stellt eine Reihe von JavaScript-basierten Komponenten für die benutzerdefinierte Viewer-Entwicklung bereit. Bei den Viewern handelt es sich um webbasierte Anwendungen, mit denen Rich-Media-Inhalte der Adobe Dynamic Media in Webseiten eingebettet werden können.

Das SDK bietet beispielsweise interaktives Zoomen und Schwenken. Darüber hinaus bietet es 360°-Ansicht und Videowiedergabe von Assets, die über die Backend-Anwendung Dynamic Media Classic in Adobe Dynamic Media hochgeladen wurden.

Obwohl die Komponenten auf HTML5-Funktionen basieren, sind sie für die Verwendung auf Android- und Apple iOS-Geräten und Desktops, einschließlich Internet Explorer und höher, ausgelegt. Diese Art von Erfahrung bedeutet, dass Sie einen einzigen Arbeitsablauf für alle unterstützten Plattformen bereitstellen können.

Das SDK besteht aus UI-Komponenten, aus denen der Viewer-Inhalt besteht. Sie können diese Komponenten mithilfe von CSS und Nicht-UI-Komponenten gestalten, die eine unterstützende Rolle haben, wie z. B. das Abrufen und Parsen von Definitionen oder Tracking. Alle Verhalten von Komponenten können mithilfe von Modifikatoren angepasst werden, die Sie auf verschiedene Weise angeben können, z. B. als name=value-Paare in der URL.

Dieses Lernprogramm enthält die folgende Reihenfolge der Aufgaben, mit denen Sie einen einfachen Zoom-Viewer erstellen können:

Laden Sie das neueste Viewer-SDK von Adobe Developer Connection herunter.

Laden Sie das neueste Viewer-SDK von Adobe Developer Connection hier herunter.

HINWEIS

Sie können diese Übung abschließen, ohne das Viewer-SDK-Paket herunterladen zu müssen, da das SDK tatsächlich remote geladen wird. Das Viewer-Paket enthält jedoch weitere Beispiele und eine API-Referenzhandbuch, die Sie beim Erstellen Ihrer eigenen Viewer als hilfreich erachten können.

Laden des Viewer-SDK

Beginn durch Einrichten einer neuen Seite, um den grundlegenden Zoom-Viewer zu entwickeln, den Sie erstellen werden.

Betrachten Sie diesen Bootstrap- oder Loader-Code, um eine leere SDK-Anwendung einzurichten. Öffnen Sie Ihren bevorzugten Texteditor und fügen Sie das folgende HTML-Markup hinzu:

<!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>

hinzufügen Sie den folgenden JavaScript-Code innerhalb des script-Tags, um das ParameterManager zu initialisieren. Auf diese Weise können Sie SDK-Komponenten innerhalb der Funktion initViewer erstellen und instanziieren:

/* 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(); 

}());

Speichern Sie die Datei als leere Vorlage. Sie können jeden gewünschten Dateinamen verwenden.

Sie werden diese leere Vorlagendatei als Referenz verwenden, wenn Sie in Zukunft neue Viewer erstellen. Diese Vorlage funktioniert lokal und wird von einem Webserver bereitgestellt.

Sie fügen Ihrem Viewer jetzt den Stil hinzu.

Hinzufügen eines Stils zum Viewer

Für diesen Vollbild-Viewer, den Sie erstellen, können Sie einige einfache Stile hinzufügen.

hinzufügen Sie den folgenden style-Block am unteren Rand von head:

<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>

Sie werden nun die Komponenten Container und ZoomView einschließen.

Einschließen von Container und ZoomView

Erstellen Sie einen tatsächlichen Viewer, indem Sie die Komponenten Container und ZoomView einbeziehen.

Fügen Sie die folgenden include-Anweisungen nach dem Laden des Skripts Utils.js am unteren Rand des Elements <head> ein:

<!-- 
    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>

Erstellen Sie jetzt Variablen, um auf die verschiedenen SDK-Komponenten zu verweisen.

hinzufügen Sie die folgenden Variablen am Anfang der anonymen Hauptfunktion direkt über s7sdk.Util.init():
```
var container, zoomView;
```

Fügen Sie Folgendes in die Funktion initViewer ein, um einige Modifikatoren zu definieren und die entsprechenden Komponenten zu instanziieren:

/* 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());

Damit der oben genannte Code ordnungsgemäß ausgeführt werden kann, fügen Sie einen containerResize-Ereignis-Handler und eine Hilfsfunktion hinzu:

/* 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); 
}

Vorschau der Seite, damit Sie sehen können, was Sie erstellt haben. Ihre Seite sieht wie folgt aus:

Sie fügen nun die Komponenten MediaSet und Swatches Ihrem Viewer hinzu.

Hinzufügen von MediaSet- und Musterkomponenten zu Ihrem Viewer

Damit Benutzer Bilder aus einem Satz auswählen können, können Sie die Komponenten MediaSet und Swatches hinzufügen.

hinzufügen das folgende SDK enthält:
```
s7sdk.Util.lib.include('s7sdk.set.MediaSet'); 
s7sdk.Util.lib.include('s7sdk.set.Swatches');
```
Aktualisieren Sie die Liste der Variablen wie folgt:
```
var mediaSet, container, zoomView, swatches;
```

Instanziieren Sie die Komponenten MediaSet und Swatches innerhalb der Funktion initViewer.

Stellen Sie sicher, dass die Swatches-Instanz nach den Komponenten ZoomView und Container instanziiert wird. Andernfalls wird die Swatches-Stapelreihenfolge ausgeblendet:

// 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);

Fügen Sie jetzt die folgenden Ereignis-Handler-Funktionen hinzu:

/* 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);  
}

Positionieren Sie die Farbfelder unten im Viewer, indem Sie dem Element style die folgende CSS hinzufügen:

/* Align swatches to bottom of viewer */ 
.s7swatches { 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 150px; 
}

Vorschau des Viewers.

Beachten Sie, dass sich die Farbfelder unten links im Viewer befinden. Damit die Farbfelder die gesamte Viewer-Breite annehmen, müssen Sie einen Aufruf hinzufügen, um die Größe der Farbfelder manuell zu ändern, sobald der Benutzer die Größe des Browsers ändert. hinzufügen Sie Folgendes zur Funktion resizeViewer:
```
swatches.resize(width, swatches.getHeight());
```
Ihr Viewer sieht jetzt wie das folgende Bild aus. Versuchen Sie, die Größe des Browser-Fensters des Viewers zu ändern, und beachten Sie das resultierende Verhalten.

Sie können Ihrem Viewer jetzt Schaltflächen zum Zoomen, Herauszoomen und Zurücksetzen des Zooms hinzufügen.

Hinzufügen von Schaltflächen zum Viewer

Derzeit kann der Benutzer nur mit Klick- oder Berührungsgesten zoomen. Fügen Sie dem Viewer daher einige einfache Schaltflächen zur Zoomsteuerung hinzu.

hinzufügen die folgenden Schaltflächenkomponenten:
```
s7sdk.Util.lib.include('s7sdk.common.Button');
```

Aktualisieren Sie die Liste der Variablen wie folgt:

var mediaSet, container, zoomView, swatches, zoomInButton, zoomOutButton, zoomResetButton;

Instanziieren Sie Schaltflächen am unteren Rand der Funktion initViewer.

Beachten Sie, dass die Reihenfolge wichtig ist, es sei denn, Sie geben in CSS z-index an:

/* 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(); });

Definieren Sie nun einige grundlegende Stile für die Schaltflächen, indem Sie dem style-Block oben in Ihrer Datei Folgendes hinzufügen:

/* 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; 
 }

Vorschau des Viewers. Es sieht wie folgt aus:

Sie konfigurieren die Muster jetzt so, dass sie vertikal auf der rechten Seite ausgerichtet werden.

Konfigurieren der Farbfelder vertikal

Sie können Modifikatoren direkt auf der ParameterManager-Instanz konfigurieren.

hinzufügen Sie die folgenden Elemente oben in der Funktion initViewer, um das Swatches-Miniaturlayout als einzelne Zeile zu konfigurieren:
```
params.push("Swatches.tmblayout", "1,0");
```
Aktualisieren Sie den folgenden Größenaufruf innerhalb von resizeViewer:
```
swatches.resize(swatches.getWidth(), height);
```

Bearbeiten Sie die folgende s7swatches-Regel in ZoomViewer.css:

.s7swatches { 
    top:0 ; 
    bottom: 0; 
    right: 0; 
    width: 150px; 
}

Vorschau des Viewers. Es sieht wie folgt aus:

Ihr einfacher Zoom-Viewer ist jetzt abgeschlossen.

Dieses Viewer-Tutorial gibt einen Überblick über die Grundlagen des Dynamic Media Viewer-SDK. Während Sie mit dem SDK arbeiten, können Sie die verschiedenen Standardkomponenten verwenden, um mühelos Rich-View-Erlebnisse für Ihre Zielgruppe-Audiencen zu erstellen und zu gestalten.