Erstellen Sie einen neuen Ordner und benennen Sie ihn, z. B. mywidget. Erstellen Sie dann einen Unterordner: SWF.
Die WDGT-Datei weist die Erweiterung „wdgt“ auf und enthält Folgendes:
SWF-Dateien mit Verknüpfungen zu anderen SWF-Dateien oder Elementen
HTML-Version des Widgets
description.xml-Datei, die Informationen zu den Verknüpfungen enthält
Die HTML-Dateien sind für die HTML5-Ausgaben erforderlich. Wenn Sie nur SWF-Ausgabedateien Ihrer Adobe Captivate-Projekte erstellen möchten, muss die WDGT-Datei nicht die HTML-Dateien enthalten.
WDGT-Dateien nur für SWF-Ausgaben erstellen
Eine WDGT-Datei muss für die SWF-Ausgabe Folgendes enthalten:
SWF (Ordner): Enthält die SWF-Ausgabedatei des Widgets und andere verknüpfte Ressourcen.
description.xml (Datei): Enthält Informationen über die SWF- und HTML-Versionen des Widgets, die Adobe Captivate zum Veröffentlichen und Anzeigen des Widgets verwenden kann.
-
-
Veröffentlichen Sie die FLA-Datei als SWF-Datei in Flash. Legen Sie die SWF-Datei im SWF-Ordner ab.
-
Erstellen Sie eine Datei description.xml. Wenn die SWF-Hauptdatei ABC.swf zwei verknüpfte Dateien PQR.swf und XYZ.swf verwendet, weist die Datei „description.xml“ folgendes Format auf:
<?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>
-
Legen Sie die Datei description.xml im Stammordner, in diesem Fall also im Ordner mywidget ab.
-
Komprimieren Sie den Stammordner (Ordner mywidget) und ändern Sie die Erweiterung der Datei in „.wdgt“.
-
Legen Sie die WDGT-Datei in „<Adobe Captivate-Installationsordner>/Gallery/Widgets“ ab.
WDGT-Dateien für SWF- und HTML5-Ausgaben erstellen
Eine WDGT-Datei für SWF- und HTML5-Ausgaben muss die folgenden Dateien und Ordner enthalten:
SWF (Ordner): Enthält die SWF-Ausgabedatei des Widgets und andere verknüpfte Ressourcen.
HTML5 (Ordner): Enthält die Elemente und Skripte, die sich auf das Widget beziehen, das in HTML und JavaScript erstellt wurde. Dies ist die typische Ordnerstruktur:
Bilder (Ordner)
Skripte (Ordner)
xyz_oam.xml (Datei)
Der Ordner HTML5 kann andere Ordner wie z. B. Themen enthalten. Sie müssen die openAJAX-Metadaten-XML-Datei (xyz_oam.xml) erstellen, um alle Widget-Informationen wie Skripte und Elemente zu speichern.
description.xml (Datei): Enthält Informationen über die SWF- und HTML-Versionen des Widgets, die Adobe Captivate zum Veröffentlichen und Anzeigen des Widgets verwenden kann.
-
Erstellen Sie einen neuen Ordner und benennen Sie ihn, z. B. myhtmlwidget. Erstellen Sie dann folgende Unterordner:
SWF
HTML5
-
Veröffentlichen Sie die FLA-Datei als SWF-Datei in Flash. Legen Sie die SWF-Datei im SWF-Ordner ab.
-
Erstellen Sie das Widget mithilfe von HTML und JavaScript.
-
Legen Sie alle Elemente und Skripts im Ordner HTML5 ab.
-
Erstellen Sie eine openAjax-Metadaten-XML-Datei, in der alle relevanten Widget-Informationen wie Skripte und JavaScript-Bibliotheken gespeichert werden.
Beispiel:
<?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>
-
Öffnen Sie das JavaScript, das dem Wert entspricht, der für das jsClass-Attribut in der Metadaten-XML-Datei angegeben wird. Wenn beispielsweise der Wert jsClass Arrow ist, öffnen Sie die Datei arrow.js von dem Ordner scripts aus.
-
Stellen Sie sicher, dass die Datei arrow.js die Funktion onLoad() enthält, die getMovieProps() aufruft. Beispiel:
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; }
Hinweis:
Registrieren Sie Ereignisprozeduren für Browser onload (z. B. window.addEventListener('load',myCallback,0);) nicht direkt, um das Widget in vielen Szenarien verschiebbar zu machen, einschließlich in Laufzeitszenarien, in denen das Widget dem Dokument hinzugefügt werden kann, nachdem das „load“-Ereignis des Browsers aufgetreten ist.
Stattdessen müssen Widgets die onLoad-Callback-Funktion verwenden, die in dieser Spezifikation definiert ist, um anzuzeigen, dass das Widget geladen wurde und zur Wiedergabe bereit ist.
Registrieren Sie Ereignisprozeduren für Browser onunload (z. B. window.addEventListener('unload',myCallback,0);) nicht direkt, um das Widget in vielen Szenarien verschiebbar zu machen, einschließlich in dynamischen Laufzeit-Szenarien, in denen das Widget aus dem Dokument viel eher entfernt werden kann, als die Seite entladen wurde.
Stattdessen müssen Widgets die onUnload-Callback-Funktion verwenden, die in dieser Spezifikation definiert ist, um anzuzeigen, dass das Widget von der Seite entfernt wurde.
Weitere Informationen zu getMovieProps() finden Sie unter Methoden und Eigenschaften.
-
Legen Sie die openAjax-Metadaten XML-Datei im Ordner HTML5 ab.
-
Erstellen Sie die Datei description.xml.
Weitere Informationen zum Schema der Datei description.xmlfinden Sie unter description.xml schema.
-
Legen Sie die Datei description.xml im Stammordner ab (in diesem Fall Orndermyhtmlwidget).
-
Komprimieren Sie den Stammordner (myhtmlwidget) und ändern Sie die Erweiterung der Datei in „.wdgt“.
-
Legen Sie die WDGT-Datei in „<Adobe Captivate-Installationsordner>/Gallery/Widgets“ ab.
Beispiel einer descripton.xml-Datei
Wenn die SWF-Hauptdatei ABC.swf heißt, und die von Ihnen erstellte openAJAX XML-Datei XYZ_oam.xml heißt, dann lautet der Name der 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>
description.xml schema
Widget
<Widget> ist das Stammelement, das ein einzelnes Widget definiert und die folgenden Unterelemente enthält:
Autoren
Lizenz
Formate
Das <Widget>-Element enthält folgende Attribute:
Attribut |
Beschreibung |
Typ |
Obligatorisch |
Wert |
---|---|---|---|---|
Spezifikation |
Gibt die Spezifikation an, auf der die XML-Daten basiert. Der Standardwert 2 gibt an, dass die XML-Datei Informationen über die HTML-Version des Widgets enthält. |
Positive Ganzzahl |
Ja |
2 |
Name |
Name des Widgets |
Zeichenfolge |
Nein |
k.A. |
Beschreibung |
Beschreibung des Widgets |
Zeichenfolge |
Nein |
k.A. |
URI |
URL der erforderlichen Website z. B. die Website des Unternehmens. |
Zeichenfolge |
Nein |
k.A. |
Version |
Version des Widgets |
Positive Ganzzahl |
Nein |
k.A. |
Typ |
Typ des Widgets: statisch oder interaktiv. |
Zeichenfolge |
Ja |
|
Autoren
<Autoren> ist das Unterelement des <Widget>-Elements und enthält folgende Attribute:
Attribut |
Beschreibung |
Typ |
Erforderlich |
Standard |
---|---|---|---|---|
Name |
Name des Widget-Entwicklers oder -Autors |
Zeichenfolge |
Nein |
k.A. |
E-Mail-ID des Widget-Entwicklers oder -Autors |
Zeichenfolge |
Nein |
k.A. |
|
Unternehmen |
Name der Organisation des Widget-Entwicklers oder -Autors |
Zeichenfolge |
Nein |
k.A. |
URI |
URL der Unternehmenswebsite oder einer anderen Website, die der Autor erwähnen möchte. |
Zeichenfolge |
Nein |
k.A. |
Diese Attribute werden in dieser Version von Adobe Captivate ignoriert.
Lizenz
<Lizenz> ist das Unterelement des <Widget>-Elements und enthält folgende Attribute:
Attribut |
Beschreibung |
Typ |
Erforderlich |
Standard |
---|---|---|---|---|
Name |
Ein kurzer Name für die Widget-Lizenz. |
Zeichenfolge |
Nein |
k.A. |
Beschreibung |
Beschreibung der Widget-Lizenz |
Zeichenfolge |
Nein |
k.A. |
Text |
Der Lizenztext, den Sie mit dem Widget anzeigen möchten. Sie können auch jeder anderen im Widget verwendete Software Lizenzen zuweisen. |
Zeichenfolge |
Nein |
k.A. |
URI |
Link zu der Website, auf der Widget-Benutzer mehr Informationen zu den Lizenzen finden können. |
Zeichenfolge |
Nein |
k.A. |
Diese Attribute werden in dieser Version von Adobe Captivate ignoriert.
Formate und Formatierung
<Formate> enthält das Unterelement <Formatierung>, das wiederum die Namen der SWF- und HTML-Versionen des Widget enthält.
<Formate>-Element enthält folgende Attribute:
Attribut |
Beschreibung |
Typ |
Erforderlich |
Wert |
---|---|---|---|---|
Typ |
Typ der Quelle: SWF- oder HTML-Datei. |
Zeichenfolge |
Ja |
|
Inhalt
<Inhalt> ist das Unterelement von<Formatierung> und enthält folgende Attribute:
Attribut |
Beschreibung |
Typ |
Erforderlich |
Wert |
Quelle |
Bezieht sich auf die SWF-Ausgabe oder die HTML-Version des Widgets. |
Zeichenfolge |
Ja |
Name der SWF-Datei oder der Metadaten-XML-Datei der HMTL-Version des Widget. |
Bei Ihrem Konto anmelden