Flex Viewer 開發教程（3）Widget與WidgetTemplate

gispace發表於2011-05-12
FlexView

 

HelloWorldWidget中短短几行程式碼，卻能實現如此cool的一個Widget，這要歸功於WidgetTemplate。WidgetTemplate是IWidgetTemplate介面的預設實現，提供組成Widget的各個部分，包括標題欄、內容皮膚、控制按鈕、工具按鈕、Widget圖示等等。Widget將WidgetTemplate作為UI容器，比如在HelloWorldWidget中，我們將顯示資訊的Label放在WidgetTemplate中。當然，也可以實現自定義WidgetTemplate，只要實現IWidgetTemplate介面即可。在Flex Viewer2.0以後，WidgetTemplate的外觀通過皮膚（Skin）來定義，詳見WidgetTemplateSkin程式碼。要想實現其它風格的WidgetTemplate，自定義一個WidgetTemplateSkin即可。下圖是一個自定義WidgetTemplateSkin的效果。

 

WidgetTemplate定義了三個事件：開啟（open）、最小化（minimized）、關閉（closed）。這三個事件分別在Widget開啟、最小化和關閉的時候發生。這三個事件在某些特殊業務需求下能發揮很大的作用，比如某個Widget對應的一個GraphicsLayer（見ArcGIS API for Flex），當Widget開啟時需要顯示，當Widget最小化或者關閉時需要隱藏。此需求可以分別在三個事件的響應方法中實現。在HelloWidgetTemplateWidget中我們分別對三個事件進行響應，每個響應中顯示一個彈出框來說明當前所發生的事件型別。視窗開啟時的情形如下圖所示：

 

 

HelloWidgetTemplateWidget程式碼如下：

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

           import mx.controls.Alert;

 

           [Bindable]

           private var helloContent:String;

 

           private function init():void{

              if (configXML){

                  helloContent=String(configXML.hellocontent);

              }

           }

 

           private function openHandler():void{⑤

              Alert.show("HelloWidgetTemplateWidget open");

           }

 

           private function minimizedHandler():void{⑥

              Alert.show("HelloWidgetTemplateWidget minimized");

           }

 

           private function closedHandler():void{⑦

              Alert.show("HelloWidgetTemplateWidget closed");

           }

       ]]>

    </fx:Script>

    <viewer:WidgetTemplate open="openHandler()"①

         minimized="minimizedHandler()"② closed="closedHandler()"③

         skinClass="widgets.FlexViewerInAction.HelloWidgetTemplate.

WidgetTemplateSkin"④>

       <s:HGroup width="100%" height="100%"

                horizontalAlign="center" verticalAlign="middle">

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

       </s:HGroup>

    </viewer:WidgetTemplate>

</viewer:BaseWidget>

①    設定open事件的響應方法；

②    設定minimized事件的響應方法；

③    設定closed事件的響應方法；

④    設定WidgetTemplate的皮膚；

⑤    實現open事件的響應方法；

⑥    實現minimized事件的響應方法；

⑦    實現closed事件的響應方法。

 

 

 

相關文章