O arquivo de WDGT é um arquivo com a extensão de .wdgt que contém:

  • Arquivos SWF com links para outros arquivos ou recursos SWF

  • Versão HTML do widget

  • Arquivo description.xml que contém informações sobre links

Arquivos HTML são necessários para as saídas HTML5. Se desejar gerar apenas arquivos de saída SWF para os projetos do Adobe Captivate, o arquivo de WDGT não precisa conter arquivos HTML.

Criar arquivos WDGT apenas para saídas SWF

Um arquivo WDGT para saídas SWF deve conter o seguinte:

  • swf (diretório): contém o arquivo de saída SWF do widget e outros recursos vinculados.

  • description.xml (arquivo): contém informações sobre as versões de SWF e HTML do widget que o Adobe Captivate pode usar para publicar e exibir o widget para os usuários.

  1. Crie um diretório novo e nomeie-o conforme necessário, por exemplo,meuwidget. Em seguida, crie um subdiretório: swf.

  2. Publique o FLA como um arquivo SWF no Flash. Coloque o arquivo SWF no diretório swf.

  3. Crie um arquivo description.xml. Se o arquivo SWF principal (ABC.swf) usar dois arquivos vinculados (PQR.swf e XYZ.swf), o arquivo description.xml estará no seguinte formato:

    <?xml version="1.0" encoding="ISO-8859-1" ?> 
    <widget> 
    <Description>This is a ABC widget(static)</Description> 
    <Type>isStatic</Type> 
    <Name>ABC.swf</Name> 
    <linkedfiles>PQR.swf</linkedfiles> 
    <linkedfiles>XYZ.swf</linkedfiles> 
    </widget>
  4. Coloque o arquivo description.xml no diretório raiz, que é o diretório meuwidget nesse caso.

  5. Compacte o diretório raiz (meuwidget) e mude a extensão do arquivo para .wdgt.

  6. Coloque o arquivo .wdgt em <diretório de instalação do Adobe Captivate>/Gallery/Widgets.

Criar arquivos WDGT para saídas SWF e HTML5

Um arquivo WDGT para saídas SWF e HTML5 deve conter os seguintes arquivos e diretórios:

  • swf (diretório): contém o arquivo de saída SWF do widget e outros recursos vinculados.

  • html5 (diretório): contém os ativos e scripts relacionados ao widget criado em HTML e JavaScript. Esta é a estrutura de diretório típica:

    • imagens (diretório)

    • scripts (diretório)

    • xyz_oam.xml (arquivo)

    O diretório html5 pode conter outros diretórios de ativos, como os de temas. Você precisa criar o arquivo xml de metadados openAJAX (xyz_oam.xml) para armazenar todas as informações do widget, como scripts e ativos.

  • description.xml (arquivo): contém informações sobre as versões de SWF e HTML do widget que o Adobe Captivate pode usar para publicar e exibir o widget para os usuários.

  1. Crie um diretório novo e nomeie-o conforme necessário, por exemplo,meuwidgethtml. Em seguida, crie os seguintes subdiretórios:

    • swf

    • html5

  2. Publique o FLA como um arquivo SWF no Flash. Coloque o arquivo SWF no diretório swf.

  3. Crie o widget usando HTML e JavaScript.

  4. Coloque todos os ativos e scripts no diretório html5.

  5. Crie um arquivo XML de metadados OpenAjax que armazene todas as informações relevantes do widget, como scripts e bibliotecas JavaScript.

    Para obter mais informações sobre o esquema do OpenAjax, consulte este site.

    Veja um exemplo:

    <?xml version="1.0" encoding="UTF-8"?> 
    <!-- 
     
            OpenAjax Alliance Widget Specification 
    --> 
    <widget name="Arrow" id="com.adobe.captivate.dev.sample.widgets.arrow" 
            spec="0.1b" jsClass='Arrow' sandbox='true' width='300' height='300' 
            xmlns="http://openajax.org/metadata"> 
     
        <requires> 
            <libraries> 
                <library name="dojo" version="1.7" copy="true" src="js/dojo-release-1.7.1" includeRef="false"> 
                    <preload> 
                        djConfig="{parseOnLoad:true}" 
                    </preload> 
                    <require type="javascript" src="dojo/dojo.js" copy="false" includeRef="true"/> 
                </library> 
                <library name ="jQuery" version="1.6.1" copy="true" src="js/jquery1.7.1/jquery-1.7.1.min.js" type="javascript"/> 
                <library name="jQuery.svg" version="1.4.4" copy="false" src="js/jquery.svg" includeRef="false"> 
                    <require type="javascript" src="jquery.svg.js"/> 
                    <require type="css" src="jquery.svg.css"/> 
                </library> 
            </libraries> 
            <require type="folder" src="assets/svg"/> 
        </requires> 
        <javascript src="js/arrow.js"/> 
        <!-- 
     
            Properties are currently ignored by captivate since we expect the widget to do all the work that has to be done from widget xml 
            or the widget JSON. Still we give it a stab to see if we can get in property replacement 
        --> 
        <properties> 
          <property name="style" datatype="String" default="AeroArrow"/> 
        </properties> 
     
        <content type='fragment'> 
        <![CDATA[ 
            <H1>Hello Widget!!!</H1> 
            <div ID="__WID___ArrowShape"/> 
        ]]> 
        </content> 
    </widget>
  6. Abra o JavaScript correspondente ao valor especificado para o atributojsClass no arquivo XML de metadados. Por exemplo, se o valor de jsClass for Arrow, abra o arquivo arrow.js no diretório scripts.

  7. Verifique se o arquivo arrow.js inclui a função onLoad() que chama a função getMovieProps(). Veja um exemplo:

    arrow1 = { 
        onLoad: function() 
        { 
            if ( ! this.captivate ){ 
                return; 
            } 
            //Gives access to the the movie handle 
            this.movieProps = this.captivate.CPMovieHandle; 
            //Gives access to the widget params 
            this.movieProps = this.captivate.CPMovieHandle.widgetParams(); 
            //Function to replace all instances 
            //of a Captivate variable by their associated values 
            this.movieProps = this.captivate.CPMovieHandle.replaceVariables(varString); 
            //Access to the event dispatcher where addEventListener and 
            //removeEventListener can be called. Also contains the constants 
            //needed for registering for events such as 
            //<Widget>.captivate. CPMovieHandle.getMovieProps().eventDispatcher 
            //.SLIDE_ENTER_EVENT 
            this.movieProps = this.captivate.CPMovieHandle.getMovieProps().eventDispatcher; 
            //Access to the variables handle 
            this.movieProps = this.captivate.CPMovieHandle.getMovieProps().variablesHandle; 
            //Access to the external resource loader 
            this.movieProps = this.captivate.CPMovieHandle.getMovieProps().ExternalResourceLoader); 
            if ( ! this.movieProps ){ 
                return; 
            } 
            this.varHandle = this.movieProps.variablesHandle; 
            this.eventDisp = this.movieProps.eventDispatcher; 
            // other code 
        }; 
        //To unload your widget 
        onUnload: function() 
        { 
            /*Unload your widget here*/ 
        }; 
    } 
    // Ensure that there is a constructor function 
    // available for the JavaScript class identified by 
    // the 'jsClass' attribute. The constructor has no arguments. 
    arrow = function () 
    { 
        return arrow1; 
    }

    Observação:

    • Não registre diretamente manipuladores de eventos onload do navegador (por exemplo, window.addEventListener('load',myCallback,0); para tornar o widget portátil em muitas situações, incluindo as situações dinâmicas de tempo de execução, onde o widget pode ser adicionado ao documento após a ocorrência do evento "load" do navegador.

      Em vez disso, os widgets devem depender do retorno de chamada onLoad definido nessa especificação para notificar que o widget terminou de ser carregado e está pronto para renderização.

    • Não registre diretamente manipuladores de eventos onunload do navegador (por exemplo, window.addEventListener('unload',myCallback,0); para tornar o widget portátil em muitas situações, incluindo as situações dinâmicas de tempo de execução, onde o widget pode ser removido do documento muito antes de a página ser descarregada.

      Em vez disso, os widgets devem depender do retorno de chamada onUnload definido nessa especificação para notificar que o widget está sendo removido da página.

    Para obter informações sobre getMovieProps(), consulte Métodos e propriedades.

  8. Coloque o arquivo XML de metadados OpenAjax no diretório html5.

  9. Crie o arquivo description.xml.

    Para obter informações sobre o esquema para o arquivo description.xml, consulte Esquema do arquivo description.xml.

  10. Coloque o arquivo description.xml no diretório raiz (meuwidgethtml nesse caso).

  11. Compacte o diretório raiz (meuwidgethtml) e mude a extensão do arquivo para .wdgt.

  12. Coloque o arquivo .wdgt em <diretório de instalação do Adobe Captivate>/Gallery/Widgets.

Amostra de arquivo description.xml

Se o arquivo SWF principal é ABC.swf e o arquivo XML OpenAJAX que você criou é XYZ_oam.xml, o arquivo description.xml é:

<?xml version="1.0" encoding="ISO-8859-1" ?> 
<!-- widget header 
      spec - compulsorily required. if not present will be treated as spec 1 which doesnt support html5 etc 
      version - widget version number 
      type - widget type 
-->         
<widget spec="2" name="Certificate" description="This is a test for Process Tabs" uri="www.mycomapny.com" version="1.0" type="static"> 
    <!-- Authors header - Can contain multiple authors      
    --> 
    <authors> 
    <!-- Author header - author info 
        about is to show off some skills like i am cool widget developer. contact me for custom widgets 
    --> 
        <author name="Dominique Skyler" email="dominique@mycomapny.com" organization="MyCompany" uri="www.mycompany.com"> 
            <about>Widget Developer</about> 
        </author> 
    </authors> 
    <!-- license info - author info 
    --> 
    <license name="CC" description="Creative Commons License" text="Feel free to use this" uri="http://creativecommons.org/licenses/by/3.0/"/> 
     
    <!-- different output formats supported 
        each format has one directory in the wgt file 
        paths can refer to other formats by using .. notation 
    --> 
    <formats> 
        <!-- for the output format swf 
        --> 
        <format type="swf"> 
            <content source="ABC.swf"/> 
        </format> 
        <!-- for the html5 output --> 
        <format type="html5"> 
            <!-- reference to the oam file --> 
            <content source="XYZ.xml"/>             
        </format> 
    </formats> 
</widget>

Esquema do arquivo description.xml

widget

<widget> é o elemento raiz que define um único widget e inclui os seguintes elementos filho:

  • authors

  • license

  • formats

O elemento <widget> inclui os seguintes atributos:

Atributo

Descrição

Tipo

Obrigatório

Valor

spec

Exibe a especificação na qual o XML é baseado. O valor padrão "2" indica que o arquivo XML inclui informações sobre a versão HTML do widget.

Número inteiro positivo

Sim

2

name

Nome do widget.

Cadeia de caracteres

Não

ND

description

Descrição do widget.

Cadeia de caracteres

Não

ND

uri

URL do site necessário, por exemplo, o site da empresa.

Cadeia de caracteres

Não

ND

version

Versão do widget.

Número inteiro positivo

Não

ND

type

O tipo do widget: estático ou interativo.

Cadeia de caracteres

Sim

  • static

  • interactive

authors

<authors> é o elemento filho do elemento <widget> e inclui os seguintes atributos:

Atributo

Descrição

Tipo

Obrigatório

Padrão

name

Nome do desenvolvedor ou autor do widget.

Cadeia de caracteres

Não

ND

email

ID de e-mail do desenvolvedor ou autor do widget.

Cadeia de caracteres

Não

ND

organization

Nome da organização do desenvolvedor ou autor do widget.

Cadeia de caracteres

Não

ND

uri

URL do site da organização ou qualquer outro site que o autor queira mencionar.

Cadeia de caracteres

Não

ND

Observação:

Todos esses atributos são ignorados nesta versão do Adobe Captivate.

license

<license> é o elemento filho do elemento <widget> e inclui os seguintes atributos:

Atributo

Descrição

Tipo

Obrigatório

Padrão

name

Um nome curto para a licença do widget.

Cadeia de caracteres

Não

ND

description

Descrição da licença do widget.

Cadeia de caracteres

Não

ND

text

O texto da licença que você deseja exibir com o widget.

Você também pode atribuir licenças para qualquer software de terceiros usado no widget.

Cadeia de caracteres

Não

ND

uri

Link para o site onde os usuários do widget podem encontrar mais informações sobre a licença.

Cadeia de caracteres

Não

ND

Observação:

Todos esses atributos são ignorados nesta versão do Adobe Captivate.

formats e format

<formats> inclui o elemento filho <format> que inclui os nomes das versões de SWF e HTML do widget.

O elemento <format> inclui o seguinte atributo:

Atributo

Descrição

Tipo

Obrigatório

Valor

type

O tipo da origem: SWF ou HTML.

Cadeia de caracteres

Sim

  • swf

  • html5

content

<content> é o elemento filho de <format> e inclui o seguinte atributo:

Atributo

Descrição

Tipo

Obrigatório

Valor

source

Refere-se a saída SWF ou à versão HTML do widget.

Cadeia de caracteres

Sim

Nome do arquivo SWF ou do arquivo XML de metadados da versão em HTML do widget.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online