Experience League

Exit search

查看器SDK教程

查看器SDK提供了一组基于JavaScript的组件，用于自定义查看器开发。查看器是基于Web的应用程序，允许将AdobeDynamic Media提供的富媒体内容嵌入网页。

例如，SDK提供了交互式缩放和平移。它还提供了360°查看和视频播放资产，这些资产已通过名为Dynamic Media Classic的后端应用程序上传到AdobeDynamic Media。

即使这些组件依赖于HTML5功能，它们也设计为可在Android™和Apple iOS设备以及台式机（包括Internet Explorer及更高版本）上使用。这种体验意味着您能够为所有受支持的平台提供单个工作流。

SDK由构成查看器内容的UI组件组成。您可以通过CSS和非UI组件来设置这些组件的样式，这些组件具有某种支持角色，例如设置定义获取和解析或跟踪。所有组件行为都可通过修饰符进行自定义，您可以通过各种方式指定修饰符，例如， name=value 对。

本教程包括以下任务顺序，可帮助您创建基本的缩放查看器：

从Adobe Developer Connection下载最新的Viewer SDK

从Adobe Developer Connection下载最新的Viewer SDK .

注意

由于SDK是远程加载的，因此您无需下载查看器SDK包即可完成本教程。但是，查看器包中包含其他示例和API参考指南，可帮助您创建自己的查看器。

加载查看器SDK

首先，设置一个新页面以开发要创建的基本缩放查看器。

将此新页面视为Bootstrap（或加载器）代码，您使用该代码设置空SDK应用程序。打开您最喜爱的文本编辑器，并将以下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 标记，以便初始化 ParameterManager. 这样做有助于您准备在 initViewer 函数：

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

}());

将文件另存为空模板。您可以使用任何所需的文件名。

将来在创建任何查看器时，您将使用此空模板文件作为参考。此模板可在本地使用，并且从Web服务器提供时也可使用。

现在，向查看器添加样式。

向查看器添加样式

对于您正在创建的此完整页面查看器，可以添加一些基本样式。

添加以下内容 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>

现在包含组件 Container 和 ZoomView.

包括容器和ZoomView

通过包含组件创建实际的查看器 Container 和 ZoomView.

插入以下内容 include 在 <head> 元素 — 在 Utils.js 脚本已加载：

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

现在，创建变量以引用各种SDK组件。

将以下变量添加到主匿名函数的顶部，就在上面 s7sdk.Util.init():
```
var container, zoomView;
```

在 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());

要使上述代码正常运行，请添加 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);
}

预览页面，以便查看已创建的内容。您的页面应如下所示：

现在，添加组件 MediaSet 和 Swatches 查看者。

将MediaSet和Swatches组件添加到查看器

为了允许用户从图像集中选择图像，您可以添加组件 MediaSet 和 Swatches.

添加以下SDK:
```
s7sdk.Util.lib.include('s7sdk.set.MediaSet');
s7sdk.Util.lib.include('s7sdk.set.Swatches');
```

使用以下内容更新变量列表：

var mediaSet, container, zoomView, swatches;

实例化 MediaSet 和 Swatches 组件内部 initViewer 函数。

请务必实例化 Swatches 实例之后 ZoomView 和 Container 组件，否则堆叠顺序会隐藏 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);

现在，添加以下事件处理程序函数：

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

通过将以下CSS添加到 style 元素：

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

预览查看器。

请注意，色板位于查看器的左下角。要使色板具有整个查看器宽度，请在用户调整其浏览器大小时添加一个调用以手动调整色板大小。在 resizeViewer 函数：
```
swatches.resize(width, swatches.getHeight());
```
查看器现在类似于下图。尝试调整查看器的浏览器窗口大小，并注意所产生的行为。

现在，可向查看器添加放大、缩小和缩放重置按钮。

向查看器添加按钮

目前，用户只能使用点击或触摸手势进行缩放。因此，请向查看器中添加一些基本的缩放控制按钮。

添加以下按钮组件：
```
s7sdk.Util.lib.include('s7sdk.common.Button');
```

使用以下内容更新变量列表：

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

实例化位于 initViewer 函数。

请记住，顺序很重要，除非您指定 z-index 在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(); });

现在，通过将以下内容添加到 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;
 }

预览查看器。它应如下所示：

现在，配置色板，以便它们在右侧垂直对齐。

垂直配置色板

您可以直接在 ParameterManager 实例。

在 initViewer 函数，以便您能够配置 Swatches 将布局作为一行进行缩览图：
```
params.push("Swatches.tmblayout", "1,0");
```
在中更新以下调整大小调用 resizeViewer:
```
swatches.resize(swatches.getWidth(), height);
```

编辑以下内容 s7swatches 规则 ZoomViewer.css:

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

预览查看器。如下所示：

基本的缩放查看器现已完成。

本查看器教程介绍了Dynamic Media查看器SDK提供的基础知识。使用SDK时，您可以使用各种标准组件轻松地为目标受众构建和设置丰富的查看体验样式。

Business.Adobe.com 资源

Auto Form Fill Personalized Communications Theme Editor Version History Dynamic Media Headless Cms

查看器SDK教程

从Adobe Developer Connection下载最新的Viewer SDK

加载查看器SDK

向查看器添加样式

包括容器和ZoomView

将MediaSet和Swatches组件添加到查看器

向查看器添加按钮

垂直配置色板

Business.Adobe.com 资源

在此页面上

查看下一个：

学习

文档

社区

技术支持

资源

Adobe 帐户

Adobe