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.
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.
-
-
Publiez le FLA sous forme de fichier SWF dans Flash. Placez le fichier SWF dans le répertoire swf.
-
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>Ceci est un widget ABC(static)</Description> <Type>isStatic</Type> <Name>ABC.swf</Name> <linkedfiles>PQR.swf</linkedfiles> <linkedfiles>XYZ.swf</linkedfiles> </widget>
-
Placez le fichier description.xml dans le répertoire racine, c’est-à-dire le répertoire mywidget dans le cas présent.
-
Compressez le répertoire racine (répertoire mywidget) et remplacez l’extension du fichier par .wdgt.
-
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.
-
Créez un répertoire et nommez-le comme requis (myhtmlwidget, par exemple). Ensuite, créez les sous-répertoires suivants :
swf
html5
-
Publiez le FLA sous forme de fichier SWF dans Flash. Placez le fichier SWF dans le répertoire swf.
-
Créez le widget à l’aide de HTML et JavaScript.
-
Placez tous les actifs et les scripts dans le répertoire html5.
-
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.
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>
-
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.
-
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 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. Le constructeur n’a pas d’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.
-
Placez le fichier XML de métadonnées OpenAjax dans le répertoire html5.
-
Créez le fichier description.xml.
Pour plus d’informations sur le schéma pour le fichier description.xml, voir Schéma description.xml.
-
Placez le fichier description.xml dans le répertoire racine (répertoire myhtmlwidget dans le cas présent).
-
Compressez le répertoire racine (répertoire myhtmlwidget) et remplacez l’extension du fichier par .wdgt.
-
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 |
|
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 |
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 |
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 |
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 |
|
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. |
Accéder à votre compte