檢視器SDK教學課程

檢視器SDK提供一組以JavaScript為基礎的元件,供自訂檢視器開發使用。 檢視器是網頁型應用程式,可讓AdobeDynamic Media提供的多媒體內容內嵌在網頁中。

例如,SDK提供互動式縮放和平移功能。 此外,還提供360°的資產檢視和視訊播放,這些資產已透過名為Dynamic Media Classic的後端應用程式上傳至AdobeDynamic Media。

雖然元件需仰賴HTML5功能,但設計上可用於Android™和Apple iOS裝置以及桌上型電腦,包括Internet Explorer和更新版本。 這種體驗表示您可以為所有支援的平台提供單一工作流程。

SDK包含組成檢視器內容的UI元件。 您可以透過CSS和非UI元件來設定這些元件的樣式,這些元件具有某種支援角色,例如設定定義擷取、剖析或追蹤。 所有元件行為都可透過修飾元加以自訂,您可透過各種方式指定,例如在URL中指定為name=value配對。

本教學課程包含下列工作順序,可協助您建立基本的縮放檢視器:

從Adobe Developer Connection下載最新的Viewer SDK

  1. 從Adobe Developer Connection 下載最新的Viewer SDK。

    注意

    由於SDK已遠程載入,您無需下載檢視器SDK套件即可完成本教學課程。 不過,檢視器套件包含其他範例,以及可協助您建立自己檢視器的API參考指南。

載入檢視器SDK

  1. 首先,請設定新的頁面,以開發您要建立的基本縮放檢視器。

    請將這個新頁面視為您用來設定空SDK應用程式的Bootstrap(或載入器)程式碼。 開啟您最喜愛的文字編輯器,並將下列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>
    

    script標籤內新增下列JavaScript程式碼,以便初始化ParameterManager。 這麼做可協助您準備在initViewer函式內建立和實例化SDK元件:

    /* 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(); 
    
    }());
    
  2. 將檔案儲存為空範本。 您可以使用任何想要的檔案名稱。

    將來建立任何檢視器時,您將使用此空白範本檔案作為參考。 此範本可在本機,且從Web伺服器提供時運作。

現在,將樣式新增至檢視器。

將樣式新增至檢視器

  1. 對於您要建立的完整頁面檢視器,您可以新增一些基本樣式。

    將以下style塊添加到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>
    

現在包含元件ContainerZoomView

包括容器和縮放視圖

  1. 通過包括元件ContainerZoomView建立實際查看器。

    在Utils.js指令碼載入後,將以下include陳述式插入<head>元素底部:

    <!-- 
        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>
    
  2. 現在建立變數以參考各種SDK元件。

    將下列變數新增至主要匿名函式的頂端,緊接在s7sdk.Util.init()上方:

    var container, zoomView;
    
  3. initViewer函式內插入下列項目,以便定義一些修飾元並將個別元件實例化:

    /* 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());
    
  4. 若要正確執行上述程式碼,請新增containerResize事件處理常式和協助程式函式:

    /* 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); 
    }
    
  5. 預覽頁面,以便查看已建立的內容。 您的頁面應如下所示:

    檢視器範例一個影像

現在,將元件MediaSetSwatches新增至檢視器。

將MediaSet和色票元件新增至檢視器

  1. 若要讓使用者能夠從集合中選取影像,您可以新增元件MediaSetSwatches

    新增下列SDK包括:

    s7sdk.Util.lib.include('s7sdk.set.MediaSet'); 
    s7sdk.Util.lib.include('s7sdk.set.Swatches');
    
  2. 使用下列項目更新變數清單:

    var mediaSet, container, zoomView, swatches;
    
  3. initViewer函式內實例化MediaSetSwatches元件。

    請務必在ZoomViewContainer元件之後實例化Swatches實例,否則堆疊順序會隱藏Swatches:

    // 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);
    
  4. 現在新增下列事件處理常式函式:

    /* 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);  
    }
    
  5. 將下列CSS新增至style元素,將色票置於檢視器底部:

    /* Align swatches to bottom of viewer */ 
    .s7swatches { 
        bottom: 0; 
        left: 0; 
        right: 0; 
        height: 150px; 
    }
    
  6. 預覽檢視器。

    請注意,色票位於檢視器的左下角。 若要讓色票取得整個檢視器寬度,請新增呼叫,每當使用者重新調整瀏覽器大小時,手動調整色票大小。 將以下內容新增至resizeViewer函式:

    swatches.resize(width, swatches.getHeight());
    

    您的檢視器現在看起來類似下列影像。 嘗試調整檢視器的瀏覽器視窗大小,並注意產生的行為。

    檢視器範例2影像

現在,將放大、縮小和縮放重設按鈕新增至檢視器。

將按鈕新增至檢視器

  1. 目前,使用者只能使用點擊或觸控手勢來縮放。 因此,請將一些基本的縮放控制按鈕新增至檢視器。

    新增下列按鈕元件:

    s7sdk.Util.lib.include('s7sdk.common.Button');
    
  2. 使用下列項目更新變數清單:

    var mediaSet, container, zoomView, swatches, zoomInButton, zoomOutButton, zoomResetButton;
    
  3. 實例化initViewer函式底部的按鈕。

    請記住,順序很重要,除非您在CSS中指定z-index:

    /* 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(); });
    
  4. 現在,將下列內容新增至檔案頂端的style區塊,以定義按鈕的一些基本樣式:

    /* 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; 
     }
    
  5. 預覽檢視器。 看起來應如下所示:

    檢視器範例三個影像

    現在設定色票,使其在右側垂直對齊。

垂直配置色票

  1. 您可以直接在ParameterManager例項上配置修飾元。

    將下列內容新增至initViewer函式頂端,以便將Swatches縮圖配置設為單一列:

    params.push("Swatches.tmblayout", "1,0");
    
  2. 更新resizeViewer內的以下調整大小呼叫:

    swatches.resize(swatches.getWidth(), height);
    
  3. ZoomViewer.css中編輯以下s7swatches規則:

    .s7swatches { 
        top:0 ; 
        bottom: 0; 
        right: 0; 
        width: 150px; 
    }
    
  4. 預覽檢視器。 如下所示:

    檢視器範例4影像

    您的基本縮放檢視器現在已完成。

    本檢視器教學課程探討Dynamic Media檢視器SDK提供的基礎知識。 使用SDK時,您可以使用各種標準元件,輕鬆為目標對象建立豐富檢視體驗並設定其樣式。

本頁內容