Un fichier WDGT est un fichier possédant l’extension .wdgt et contenant :

  • des fichiers SWF avec des liens vers d’autres ressources ou fichiers SWF ;

  • la version HTML du widget ;

  • le fichier description.xml contenant des informations sur la liaison.

Les fichiers HTML sont requis pour les sorties HTML5. Si vous souhaitez générer uniquement des fichiers de sortie SWF de vos projets Adobe Captivate, le fichier WDGT n’a pas besoin de contenir les fichiers HTML.

Création de fichiers WDGT pour les sorties SWF uniquement

Un fichier WDGT pour les sorties SWF doit contenir les éléments suivants :

  • swf (répertoire) : contient le fichier de sortie SWF du widget et d’autres ressources liées.

  • description.xml (fichier) : contient des informations sur les versions SWF et HTML du widget qu’Adobe Captivate peut utiliser pour publier et afficher le widget pour les utilisateurs.

  1. Créez un répertoire et nommez-le de la manière souhaitée (mywidget, par exemple). Ensuite, créez un sous-répertoire : swf.

  2. Publiez le FLA sous forme de fichier SWF dans Flash. Placez le fichier SWF dans le répertoire swf.

  3. Créez un fichier description.xml. Si le fichier SWF principal, ABC.swf, utilise deux fichiers liés, PQR.swf et XYZ.swf, le fichier description.xml utilise le format suivant :

    <?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. Placez le fichier description.xml dans le répertoire racine, c’est-à-dire le répertoire mywidget dans le cas présent.

  5. Compressez le répertoire racine (répertoire mywidget) et remplacez l’extension du fichier par .wdgt.

  6. Placez le fichier .wdgt dans <répertoire d’installation Adobe Captivate>/Gallery/Widgets.

Création de fichiers WDGT pour les sorties SWF et HTML5

Un fichier WDGT pour les sorties SWF et HTML5 doit contenir les fichiers et les répertoires suivants :

  • swf (répertoire) : contient le fichier de sortie SWF du widget et d’autres ressources liées.

  • html5 (répertoire) : contient les actifs et les scripts associés au widget créé dans HTML et JavaScript. Voici la structure type du répertoire :

    • images (répertoire)

    • scripts (répertoire)

    • xyz_oam.xml (fichier)

    Le répertoire html5 peut contenir d’autres répertoires d’actifs tels que des thèmes. Vous devez créer le fichier XML de métadonnées openAJAX (xyz_oam.xml) pour stocker toutes les informations de widget, telles que les scripts et les actifs.

  • description.xml (fichier) : contient des informations sur les versions SWF et HTML du widget qu’Adobe Captivate peut utiliser pour publier et afficher le widget pour les utilisateurs.

  1. Créez un répertoire et nommez-le comme requis (myhtmlwidget, par exemple). Ensuite, créez les sous-répertoires suivants :

    • swf

    • html5

  2. Publiez le FLA sous forme de fichier SWF dans Flash. Placez le fichier SWF dans le répertoire swf.

  3. Créez le widget à l’aide de HTML et JavaScript.

  4. Placez tous les actifs et les scripts dans le répertoire html5.

  5. Créez un fichier XML de métadonnées OpenAjax qui stocke toutes les informations de widget pertinentes, telles que les scripts et les bibliothèques JavaScript.

    Pour plus d’informations sur le schéma OpenAjax, voir ce site Web.

    Voici un exemple :

    <?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. Ouvrez le fichier javascript qui correspond à la valeur indiquée pour l’attribut jsClass dans le fichier XML de métadonnées. Par exemple, si la valeur jsClass est Arrow, ouvrez le fichier arrow.js dans le répertoire scripts.

  7. Vérifiez que le fichier arrow.js comprend la fonction onLoad() qui appelle la fonction getMovieProps(). Voici un exemple :

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

    Remarque :

    • N’enregistrez pas directement le gestionnaire d’événements onload du navigateur (par exemple, window.addEventListener('load',myCallback,0);) afin de rendre le widget accessible dans de nombreux scénarios, y compris l’exécution dynamique de scénarios dans lesquels le widget peut être ajouté au document après exécution de l’événement load du navigateur.

      Les widgets dépendent du rappel onLoad défini dans cette spécification et indiquant que le widget est chargé et prêt pour la génération.

    • N’enregistrez pas directement le gestionnaire d’événements de navigateur onunload du navigateur (par exemple, window.addEventListener('unload',myCallback,0);) afin de rendre le widget accessible dans de nombreux scénarios, y compris l’exécution dynamique de scénarios dans lesquels le widget peut être supprimé du document bien avant le déchargement de la page.

      Les widgets dépendent du rappel onUnload défini dans cette spécification indiquant que le widget a été supprimé de la page.

    Pour plus d’informations sur getMovieProps(), voir Méthodes et propriétés.

  8. Placez le fichier XML de métadonnées OpenAjax dans le répertoire html5.

  9. Créez le fichier description.xml.

    Pour plus d’informations sur le schéma pour le fichier description.xml, voir Schéma description.xml.

  10. Placez le fichier description.xml dans le répertoire racine (répertoire myhtmlwidget dans le cas présent).

  11. Compressez le répertoire racine (répertoire myhtmlwidget) et remplacez l’extension du fichier par .wdgt.

  12. Placez le fichier .wdgt dans <répertoire d’installation Adobe Captivate>/Gallery/Widgets.

Fichier description.xml d’exemple

Si le fichier SWF principal est ABC.swf et si le fichier XML openAJAX que vous avez créé est XYZ_oam.xml, le fichier description.xml est :

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

Schéma description.xml

widget

<widget> est l’élément racine qui définit un widget unique et comprend les éléments enfants suivants :

  • authors

  • license

  • formats

L’élément <widget> comprend les attributs suivants :

Attribut

Description

Type

Obligatoire

Valeur

Spécification

Indique la spécification sur laquelle est basé le fichier XML. La valeur par défaut, 2, indique que le fichier XML contient des informations sur la version HTML du widget.

Nombre entier positif

Oui

2

name

Nom du widget.

Chaîne

Non

N/A

description

Description du widget.

Chaîne

Non

N/A

uri

URL du site Web requis, tel qu’un site Web d’entreprise.

Chaîne

Non

N/A

version

Version du widget.

Nombre entier positif

Non

N/A

type

Type du widget : statique ou interactif.

Chaîne

Oui

  • static

  • interactive

authors

<authors> est l’élément enfant de l’élément <widget> et comprend les attributs suivants :

Attribut

Description

Type

Requis

Valeur par défaut

name

Nom du développeur ou auteur du widget.

Chaîne

Non

N/A

email

Adresse électronique du développeur ou auteur du widget.

Chaîne

Non

N/A

organization

Nom de la société du développeur ou auteur du widget.

Chaîne

Non

N/A

uri

URL du site Web de la société ou de tout autre site Web que l’auteur souhaite mentionner.

Chaîne

Non

N/A

Remarque :

Tous ces attributs sont ignorés dans cette version d’Adobe Captivate.

license

<license> est l’élément enfant de l’élément <widget> et comprend les attributs suivants :

Attribut

Description

Type

Requis

Valeur par défaut

name

Nom court pour la licence de widget.

Chaîne

Non

N/A

description

Description de la licence de widget.

Chaîne

Non

N/A

text

Texte de la licence que vous souhaitez afficher avec le widget.

Vous pouvez également attribuer des licences pour n’importe quel logiciel tiers utilisé dans le widget.

Chaîne

Non

N/A

uri

Lien vers le site Web sur lequel les utilisateurs du widget peuvent trouver des informations supplémentaires concernant la licence.

Chaîne

Non

N/A

Remarque :

Tous ces attributs sont ignorés dans cette version d’Adobe Captivate.

formats et format

<formats> contient l’élément enfant <format>, qui inclut les noms des versions SWF et HTML du widget.

L’élément <format> inclut l’attribut suivant :

Attribut

Description

Type

Requis

Valeur

type

Type de source : SWF ou HTML.

Chaîne

Oui

  • swf

  • html5

content

<content> est l’élément enfant de <format> et inclut l’attribut suivant :

Attribut

Description

Type

Requis

Valeur

source

Fait référence à la sortie SWF ou à la version HTML du widget.

Chaîne

Oui

Nom du fichier SWF ou du fichier XML de métadonnées de la version HTML du widget.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne