WDGT 파일은 확장명이 .wdgt이고 다음을 포함합니다.

  • 다른 SWF 파일 또는 에셋에 대한 링크를 포함한 SWF 파일

  • 위젯의 HTML 버전

  • 연결 관련 정보가 포함되어 있는 description.xml 파일

HTML 파일은 HTML5 출력에 필요합니다. Adobe Captivate 프로젝트의 SWF 출력 파일만 생성하려면 WDGT 파일에 HTML 파일을 포함시키지 않아도 됩니다.

SWF 출력 전용으로 WDGT 파일 만들기

SWF 출력용 WDGT 파일은 다음을 포함해야 합니다.

  • swf(디렉토리): 위젯 및 기타 링크된 리소스의 SWF 출력 파일을 포함합니다.

  • description.xml(파일): Adobe Captivate가 위젯을 게시하고 사용자에게 표시하는 데 사용할 수 있는 위젯의 SWF 및 HTML 버전에 대한 정보를 포함합니다.

  1. 새 디렉토리를 만들고 원하는 이름을 지정합니다. 예: mywidget. 그런 다음 swf라는 하위디렉토리를 만듭니다.

  2. Flash에서 FLA를 SWF 파일로 게시합니다. SWF 파일을 swf 디렉토리에 배치합니다.

  3. description.xml이라는 파일을 만듭니다. 주 SWF 파일인 ABC.swf에서 두 연결된 파일 PQR.swfXYZ.swf를 사용하는 경우 description.xml 파일의 형식은 다음과 같습니다.

    <?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. description.xml 파일을 루트 디렉토리(이 경우 mywidget 디렉토리)에 배치합니다.

  5. 루트 디렉토리(mywidget 디렉토리)를 압축하고 파일의 확장자를 .wgt로 변경합니다.

  6. .wdgt 파일을 <Adobe Captivate 설치 디렉토리>/Gallery/Widgets에 배치합니다.

SWF 및 HTML5 출력용 WDGT 파일 만들기

SWF 및 HTML5 출력용 WDGT 파일은 다음 파일 및 디렉토리를 포함해야 합니다.

  • swf(디렉토리): 위젯 및 기타 링크된 리소스의 SWF 출력 파일을 포함합니다.

  • html5(디렉토리): HTML 및 javascript로 만들어진 위젯과 연관된 에셋과 스크립트를 포함합니다. 다음은 전형적인 디렉토리 구조입니다.

    • images(디렉토리)

    • scripts(디렉토리)

    • xyz_oam.xml(파일)

    html5 디렉토리는 테마와 같은 기타 에셋 디렉토리를 포함할 수 있습니다. 스크립트 및 에셋과 같은 모든 위젯 정보를 저장하려면 openAJAX 메타데이터 xml 파일(xyz_oam.xml)을 만들어야 합니다.

  • description.xml(파일): Adobe Captivate가 위젯을 게시하고 사용자에게 표시하는 데 사용할 수 있는 위젯의 SWF 및 HTML 버전에 대한 정보를 포함합니다.

  1. 새 디렉토리를 만들고 원하는 이름을 지정합니다. 예: myhtmlwidget. 그런 다음 아래와 같은 하위디렉토리를 만듭니다.

    • swf

    • html5

  2. Flash에서 FLA를 SWF 파일로 게시합니다. SWF 파일을 swf 디렉토리에 배치합니다.

  3. HTML 및 Javascript를 사용하여 위젯을 만듭니다.

  4. 모든 에셋 및 스크립트를 html5 디렉토리에 배치합니다.

  5. 스크립트 및 javascript 라이브러리와 같은 모든 과련 위젯 정보를 저장하는 OpenAjax 메타데이터 XML 파일을 만듭니다.

    OpenAjax 스키마에 대한 내용은 이 웹 사이트를 참조하십시오.

    예제는 다음과 같습니다.

    <?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. 메타데이터 XML 파일의 jsClass 특성에서 지정한 값에 해당하는 javascript를 엽니다. 예를 들어jsClass 값이 Arrow이면 scripts 디렉토리에서 arrow.js 파일을 엽니다.

  7. arrow.js 파일에 getMovieProps() 함수를 호출하는 onLoad() 함수가 포함되어 있는지 확인합니다. 예제는 다음과 같습니다.

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

    참고:

    • 브라우저 onload 이벤트 핸들러(예: window.addEventListener('load',myCallback,0);)가 브라우저의 'load' 이벤트가 실행된 후 위젯이 문서에 추가될 수 있는 동적 런타임 시나리오 등의 다양한 시나리오에 포팅될 수 있게 직접 등록하지 마십시오.

      대신, 위젯은 위젯의 로딩을 마쳤으며 렌더링할 준비가 되었음을 알리기 위해 이 규격에 정의된 onLoad 콜백에 의존해야 합니다.

    • 브라우저 onunload 이벤트 핸들러(예: window.addEventListener('unload',myCallback,0);)가 페이지가 언로드되기 훨씬 전에 위젯이 문서에서 제거될 수 있는 동적 런타임 시나리오 등의 다양한 시나리오에 포팅될 수 있게 직접 등록하지 마십시오.

      대신, 위젯은 위젯이 페이지에서 제거되고 있음을 알리기 위해 이 규격에 정의된 onUnload 콜백에 의존해야 합니다.

    getMovieProps()에 대한 자세한 내용은 메서드 및 속성을 참조하십시오.

  8. OpenAjax 메타데이터 XML 파일을 html5 디렉토리에 배치합니다.

  9. description.xml 파일을 만듭니다.

    description.xml 파일의 스키마에 대한 자세한 내용은 description.xml 스키마를 참조합니다.

  10. description.xml 파일을 루트 디렉토리(이 경우 myhtmlwidget 디렉토리)에 배치합니다.

  11. 루트 디렉토리(myhtmlwidget 디렉토리)를 압축하고 파일의 확장자를 .wdgt로 변경합니다.

  12. .wdgt 파일을 <Adobe Captivate 설치 디렉토리>/Gallery/Widgets에 배치합니다.

샘플 descripton.xml 파일

주 SWF 파일이 ABC.swf이며 생성한 openAJAX XML 파일이 XYZ_oam.xml이라면 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 스키마

widget

<widget>은 단일 위젯을 정의하는 루트 요소이며 다음 자식 요소를 포함합니다.

  • authors

  • license

  • formats

<widget> 요소는 다음 특성을 포함합니다.

특성

설명

유형

필수

spec

XML이 기반할 규격을 나타냅니다. 기본값 '2'는 XML 파일이 위젯의 HTML 버전에 대한 정보를 포함함을 나타냅니다.

양의 정수

2

name

위젯의 이름

문자열

아니오

해당 없음

description

위젯에 대한 설명입니다.

문자열

아니오

해당 없음

uri

필요한 웹사이트(예: 회사 웹사이트)의 URL입니다.

문자열

아니오

해당 없음

version

위젯의 버전입니다.

양의 정수

아니오

해당 없음

type

위젯의 유형(static 또는 interactive)입니다.

문자열

  • static

  • interactive

authors

<authors>는 <widget> 요소의 자식 요소이며 다음 특성을 포함합니다.

특성

설명

유형

필수

기본값

name

위젯 개발자 또는 작성자의 이름입니다.

문자열

아니오

해당 없음

email

위젯 개발자 또는 작성자의 전자 메일 ID입니다.

문자열

아니오

해당 없음

organization

위젯 개발자 또는 작성자의 조직 이름입니다.

문자열

아니오

해당 없음

uri

조직의 웹 사이트 또는 기타 작성자가 언급하고자 하는 웹 사이트의 URL입니다.

문자열

아니오

해당 없음

참고:

이 모든 특성은 이 버전의 Adobe Captivate에서 무시됩니다.

license

<license>는 <widget> 요소의 자식 요소이며 다음 특성을 포함합니다.

특성

설명

유형

필수

기본값

name

위젯 라이센스의 짧은 이름입니다.

문자열

아니오

해당 없음

description

위젯 라이센스에 대한 설명입니다.

문자열

아니오

해당 없음

text

위젯과 함께 표시하고자 하는 라이센스 텍스트입니다.

위젯에 사용된 제3자 소프트웨어에 대한 라이센스도 언급할 수 있습니다.

문자열

아니오

해당 없음

uri

위젯 사용자가 라이센스에 대한 추가 정보를 찾을 수 있는 웹 사이트에 대한 링크입니다.

문자열

아니오

해당 없음

참고:

이 모든 특성은 이 버전의 Adobe Captivate에서 무시됩니다.

formats 및 format

<formats>는 위젯의 SWF 및 HTML 버전의 이름을 포함하는 <format> 자식 요소를 포함합니다.

<format> 요소는 다음 특성을 포함합니다.

특성

설명

유형

필수

type

소스의 유형(SWF 또는 HTML)입니다.

문자열

  • swf

  • html5

content

<content>는 <format>의 자식 요소이며 다음 특성을 포함합니다.

특성

설명

유형

필수

source

위젯의 SWF 출력 또는 HTML 버전을 가리킵니다.

문자열

위젯의 SWF 파일 또는 HTML 버전의 메타데이터 XML 파일의 이름입니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책