Tutorial do SDK do visualizador

O Viewer SDK fornece um conjunto de componentes baseados em JavaScript para o desenvolvimento personalizado do visualizador. Os visualizadores são aplicativos baseados na Web que permitem que conteúdo de mídia avançada fornecido pela Adobe Scene7 seja incorporado em páginas da Web.

Por exemplo, o SDK fornece zoom e panorâmica interativos. Ele também fornece visualização de 360° e reprodução de vídeo de ativos que foram carregados para a Adobe Scene7 por meio do aplicativo de backend chamado SPS (Scene7 Publishing System).

Embora os componentes dependam da funcionalidade HTML5, eles foram projetados para funcionar em dispositivos Android e Apple iOS e em desktops, incluindo o Internet Explorer e posterior. Esse tipo de experiência significa que você pode fornecer um único fluxo de trabalho para todas as plataformas suportadas.

O SDK consiste em componentes de interface que compõem o conteúdo do visualizador. Você pode estilizar esses componentes por meio de CSS e componentes que não sejam de interface do usuário que têm algum tipo de função de suporte, como busca e análise ou rastreamento de definição de conjunto. Todos os comportamentos de componente são personalizáveis por meio de modificadores que podem ser especificados de várias maneiras, por exemplo, como pares name=value no URL.

Este tutorial inclui a seguinte ordem de tarefas para ajudá-lo a criar um visualizador básico de zoom:

Baixe o SDK do visualizador mais recente do Adobe Developer Connection

  1. Baixe o SDK do visualizador mais recente do Adobe Developer Connection here.

    OBSERVAÇÃO

    Você pode concluir este tutorial sem precisar baixar o pacote do SDK do visualizador porque o SDK é carregado remotamente. No entanto, o pacote do visualizador inclui exemplos adicionais e um guia de referência da API que você achará útil ao criar seus próprios visualizadores.

Carregar o SDK do visualizador

  1. Start ao configurar uma página nova para desenvolver o visualizador básico de zoom que você criará.

    Considere esse código de inicialização ou carregador para configurar um aplicativo SDK vazio. Abra o editor de texto favorito e cole a seguinte marcação HTML nele:

    <!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 Scene7 servers and it is served  
                from the same domain. Otherwise, specify a full path to one of Adobe Scene7 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>
    

    Adicione o seguinte código JavaScript dentro da tag script para inicializar o ParameterManager. Isso ajuda você a se preparar para criar e instanciar componentes do SDK dentro da função 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(); 
    
    }());
    
  2. Salve o arquivo como um modelo vazio. Você pode usar qualquer nome de arquivo desejado.

    Você usará esse arquivo de modelo vazio como referência ao criar novos visualizadores no futuro. Este modelo funciona localmente e quando é disponibilizado a partir de um servidor Web.

Agora, você adicionará estilo ao seu visualizador.

Adicionar estilo ao visualizador

  1. Para este visualizador de página completo que você está criando, é possível adicionar alguns estilos básicos.

    Adicione o seguinte bloco style à parte inferior de 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>
    

Agora você incluirá os componentes Container e ZoomView.

Incluindo Container e ZoomView

  1. Crie um visualizador real incluindo os componentes Container e ZoomView.

    Insira as seguintes instruções include na parte inferior do elemento <head> depois que o script Utils.js for carregado:

    <!-- 
        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. Agora, crie variáveis para fazer referência aos vários componentes do SDK.

    Adicione as seguintes variáveis à parte superior da função anônima principal, logo acima de s7sdk.Util.init():

    var container, zoomView;
    
  3. Insira o seguinte dentro da função initViewer para definir alguns modificadores e instanciar os respectivos componentes:

    /* 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. Para que o código acima seja executado corretamente, adicione um manipulador de eventos containerResize e uma função auxiliar:

    /* 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. Pré-visualização a página para que você possa ver o que criou. A página será parecida com a seguinte:

Agora, você adicionará os componentes MediaSet e Swatches ao seu visualizador.

Adicionar componentes MediaSet e Swatches ao visualizador

  1. Para dar aos usuários a capacidade de selecionar imagens de um conjunto, você pode adicionar os componentes MediaSet e Swatches.

    Adicione o seguinte SDK para incluir:

    s7sdk.Util.lib.include('s7sdk.set.MediaSet'); 
    s7sdk.Util.lib.include('s7sdk.set.Swatches');
    
  2. Atualize a lista da variável com o seguinte:

    var mediaSet, container, zoomView, swatches;
    
  3. Instancie os componentes MediaSet e Swatches dentro da função initViewer.

    Certifique-se de instanciar a instância Swatches após os componentes ZoomView e Container; caso contrário, a ordem de empilhamento oculta 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. Agora, adicione as seguintes funções de manipulador de eventos:

    /* 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. Posicione as amostras na parte inferior do visualizador adicionando o seguinte CSS ao elemento style:

    /* Align swatches to bottom of viewer */ 
    .s7swatches { 
        bottom: 0; 
        left: 0; 
        right: 0; 
        height: 150px; 
    }
    
  6. Pré-visualização no visualizador.

    Observe que as amostras estão na parte inferior esquerda do visualizador. Para que as amostras tenham a largura total do visualizador, adicione uma chamada para redimensionar manualmente as amostras sempre que o usuário redimensionar seu navegador. Adicione o seguinte à função resizeViewer:

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

    Seu visualizador agora se parece com a seguinte imagem. Tente redimensionar a janela do navegador do visualizador e observe o comportamento resultante.

Agora, você adicionará botões de zoom, zoom e zoom e redefinição de zoom ao seu visualizador.

Adicionar botões ao visualizador

  1. Atualmente, o usuário só pode aplicar zoom usando gestos de clique ou toque. Portanto, adicione alguns botões básicos de controle de zoom ao visualizador.

    Adicione os seguintes componentes de botão:

    s7sdk.Util.lib.include('s7sdk.common.Button');
    
  2. Atualize a lista da variável com o seguinte:

    var mediaSet, container, zoomView, swatches, zoomInButton, zoomOutButton, zoomResetButton;
    
  3. Instanciar botões na parte inferior da função initViewer.

    Lembre-se de que a ordem é importante, a menos que você especifique z-index no 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(); });
    
  4. Agora, defina alguns estilos básicos para os botões adicionando o seguinte ao bloco style na parte superior do arquivo:

    /* 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. Pré-visualização no visualizador. Será parecido com o seguinte:

    Agora, você configurará as Amostras para que estejam alinhadas verticalmente à direita.

Configuração vertical das amostras

  1. Você pode configurar modificadores diretamente na instância ParameterManager.

    Adicione o seguinte à parte superior da função initViewer para configurar o layout miniatura Swatches como uma única linha:

    params.push("Swatches.tmblayout", "1,0");
    
  2. Atualize a seguinte chamada de redimensionamento dentro de resizeViewer:

    swatches.resize(swatches.getWidth(), height);
    
  3. Edite a seguinte regra s7swatches em ZoomViewer.css:

    .s7swatches { 
        top:0 ; 
        bottom: 0; 
        right: 0; 
        width: 150px; 
    }
    
  4. Pré-visualização no visualizador. Será parecido com o seguinte:

    Seu visualizador de zoom básico agora está completo.

    Este tutorial do visualizador toca nos fundamentos do que o Scene7 Viewer SDK fornece. Ao trabalhar com o SDK, você pode usar os vários componentes padrão para criar e criar com facilidade experiências de visualização avançadas para suas audiências de públicos alvos.

Nesta página