Flex Viewer 解析（四）自定義Widget

終於可以實現第一個Widget了，按照慣例，我們通過一個Hello World Widget來說明如何在Flex Viewer中開發、編譯、配置、部署和使用自定義Widget。Flex Viewer的原始碼中已經包含了一個HelloWorld Widget，我們還是親手嘗試一下吧。

1）  安裝Flash Builder，下載Flex Viewer原始碼，我們使用最新的2.3；

2）  開啟Flash Builder，匯入Flex Viewer 2.3的原始碼；

3）  滑鼠放在widgets包上，單擊右鍵，在彈出的選單中選擇New，然後單擊MXML Component；

 

4）  在New MXML Component對話方塊中，輸入包名“widgets.HelloWorld”,填寫Widget名稱“HelloWorldWidget”，並選擇基類BaseWidget，單擊Finish； 

5）  此時，HelloWorldWidget已經建立完畢，按照Flex Viewer提倡的做法，在其包下新建一個同名xml配置檔案，即“HelloWorldWidget.xml”；

6）  此時，HelloWorldWidget不會被編譯，因為還未把它加入到Module列表。開啟工程的屬性視窗，點選Flex Modules，點選Add鍵，將HelloWorldWidget加入到Module列表中。點選OK，會發現HelloWorldWidget的圖示已經和其他的Widget一樣；

 

7）  啟動編譯，編譯後會發現在bin-debug目錄下，HelloWorldWidget已經被編譯成swf檔案；

8）  下面開始實現HelloWorldWidget的業務邏輯，在Widget皮膚中顯示出配置檔案中的“Hello，Flex Viewer!”字串。配置檔案內容：

<?xml version="1.0" ?>

<configuration>

<hellocontent>Hello, Flex Viewer!</hellocontent>

</configuration>

HelloWorldWidget程式碼：

<?xml version="1.0" encoding="utf-8"?>

<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"

                 xmlns:s="library://ns.adobe.com/flex/spark"

                 xmlns:mx="library://ns.adobe.com/flex/mx"

                 xmlns:viewer="com.esri.viewer.*"

                 layout="absolute"

                 width="400"

                 height="300"

                 widgetConfigLoaded="init()">

    <fx:Script>

       <![CDATA[

           [Bindable]

           private var helloContent:String;

           private function init():void{

              if (configXML){

                  helloContent=String(configXML.hellocontent);

              }

           }

       ]]>

    </fx:Script>

    <viewer:WidgetTemplate>

       <s:HGroup width="100%"

                height="100%"

                horizontalAlign="center"

                verticalAlign="middle">

           <s:Label text="{helloContent}"/>

       </s:HGroup>

    </viewer:WidgetTemplate>

</viewer:BaseWidget>

9）  在config.xml對HelloWorldWidget進行配置，如下：

<widgetcontainer>

<widget label="HelloWorld" icon="assets/images/i_solar.png"

        config="widgets/HelloWorld/HelloWorldWidget.xml"

        url="widgets/HelloWorld/HelloWorldWidget.swf"/>

</widgetcontainer>

10）編譯，執行！Hello，Flex Viewer！