初探iteacher widget

From ischool developer's network

在本文中介紹itacher widget的撰寫方式，在實際切入到操作性細節前，我們先就iteacher的架構進行簡單的探討，iteacher的架構有如iGoogle，可以嵌入許多的widget，iteacher平台主要提供widget的管理機制；也就是說iteacher平台本身並不提供實際的教師資訊管理功能，例學生列表、成績列表…等等，而是由在iteacher其上的widget提供這些資訊。

Contents 1 檔案下載 2 註冊iteacher 3 環境準備 3.1 下載JDK 3.2 下載Tomcat 3.3 下載Flex Builder 4 建立iteacher widget專案 4.1 建立Flex專案 4.2 建立新資料夾 4.3 新增MXML Module 4.4 新增feature.xml檔案 4.5 新增圖片 5 撰寫模組程式碼 5.1 MXML Module程式碼 5.2 feature.xml內容 5.3 編譯 6 在Web Server當中測試iteacher widget 6.1 測試HelloWorld.swf 6.2 測試HelloWorld.png 6.3 測試feature.xml 6.4 新增crossdomain.xml檔案 7 發佈及測試iteacher widget

檔案下載

下面兩個檔案是本文章的範例程式碼，其中第一個檔案iteacherwidget-flexproject.zip是FlexProject，裡面有HelloWorld的程式碼以及編譯好的SWF檔案，而第二個檔案iteacherwidget.zip則是可放置於網路伺服器虛擬目錄下iteacher widget所需的檔案，包含HelloWorld.swf、HelloWorld.png及feature.xml檔案。

這兩個檔案方便您測試及修改，若不清楚其意義，再詳閱本文就可瞭解囉。^^

• Media:iteacherwidget-flexproject.zip
• Media:iteacherwidget.zip

註冊iteacher

讀者可以參考註冊iteacher此篇文章來註冊新帳號，並且也可熟悉iteacher的操作。

環境準備

在熟悉了iteacher的基本操作方式之後，要準備iteacher widget的開發環境，iteacher widget的開發是用Flex，在開發工具的準備上是使用Flex Builder，而Flex Builder是以有名的Java開發工具eclipse為基礎而開發的，所以我們也必須準備Java的環境。

而Tomcat主要是幫助我們測試widget是否能正常運作，並且放置widget到iteacher平台上時，需要有widget的網址（URL），架設本機端伺服器可以提供此網址。

下載JDK

JDK下載的網址為http://java.sun.com/javase/downloads/index.jsp，目前筆者所安裝的版本為Java SE Development Kit (JDK) 6 Update 11。

下載Tomcat

下載Flex Builder

• http://www.adobe.com/products/flex/

建立iteacher widget專案

在本節中分享如何建立iteacher widget，在其中包含了iteacher widget所必需的檔案。

建立Flex專案

對於第一次接觸Flex或是沒有使用過eclipse的讀者，可能對於操作環境較為陌生，所以在操作步驟上以圖文並茂的方式讓您能絕對瞭解。

• 開新專案選擇Flex Project

• 建立Flex Project，輸入Project Name後即可按Fininsh，在Project Location的部份可依您的喜好加以修改，

• 按下Finish後即會看到Flex Builder為我們產生的檔案，在目錄方面，主要程式碼檔案會放置於src目錄，而引用的函式庫會放置於libs目錄，在專案編譯後產生的執行檔則會放置於bin-debug目錄。

建立新資料夾

接下來建立資料夾為了等會放置MXML Module所使用。

• 在剛建立的Flex Project其中的src子目錄按右按，然後選擇Folder。

• Folder名稱我們鍵入HelloWorld，在您熟悉後可以您的喜好加以修改。

新增MXML Module

在新增MXML Module前我們先簡單說明一下MXML Module的概念，在Flex的應用程式當中有兩種，一種是可獨立執行的Flash，另一種則是不能獨立執行的Flash，需要依附在另一個可獨立執行的Flash中才能執行；而iteacher平台本身就是一個可獨立執行的Flash，所以在其上放的是需相依的Flash檔案，而此類型的Flex檔案稱之為MXML Module。

所以我們會在src目錄下再產生一個HelloWorld，以放置MXML Module。

• 首先在HelloWorld目錄按右鍵，選擇New MXML Module。

• 輸入MXML Module的名稱（filename），而在Module SWF Size的部份選擇Do not optimize，因為我們主要是要MXML Module能單獨被iteacher所載入，所以不需要與其它的MXML Application進行最佳化。

• 在新增好後即會看到MXML Module，也是之後我們主要撰寫程式碼的地方。

這邊我們再做個小整理，Flex Project在編譯後可獨立執行的Flash稱之為MXML Application，其主要結構如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx:Application>

而在編譯後也是Flash，但需要被其它MXML Application所載入的Flash稱之為MXML Module，其主要結構如下，主要以XML標籤來進行區別：

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">
 
</mx:Module>

新增feature.xml檔案

接下來新增feature.xml檔案，這個檔案最主要是告訴iteacher平台有關當HelloWorld.mxml這個檔案被編譯成Flash檔案後，對於此Flash檔案的描述資訊；所以此檔案也可不必放置於Flex Project當中，放置於此主要是方便管理整個iteacher widget檔案。

• 在HelloWorld目錄下按右鍵，選擇New File。

• filename的部份輸入feature.xml，此檔名為每個iteacher widget都是固定的，輸入後按Finish。

• 產生feature.xml檔案，內為空白。

新增圖片

接下來新增圖片，此圖片是iteacher widget在iteacher中所顯示之圖片，其檔案大小為128x128；新增的方式一樣是和feature.xml一樣用新增檔案的方式。

• 在HelloWorld目錄按右鍵選擇New File。

• 選擇<<Advance，並選擇Link to file in the filesystem。

• 點選Browse選擇圖片。

為了方便大家做測試，若手邊無圖檔，可用下面筆者用windows畫面所截取的檔案。

撰寫模組程式碼

在產生了上述的檔案之後，接下來我們撰寫相關的程式碼，主要的程式碼放置在HelloWorld.mxml檔案裡，而feature.xml則是設定檔。

MXML Module程式碼

讀者可將以下的程式碼直接貼到HelloWorld.mxml中，下面的程式碼應相當好理解，其中新增一個Button其名稱為click me，並且其事件由clickbutton()這個函式所執行，而在clickbutton()當中顯示HelloWorld!!的訊息，而訊息的標題為Welcome。

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" backgroundColor="#F53030">
<mx:Button label="click me" click="clickbutton()"/>
<mx:Script>
	<![CDATA[
		import mx.controls.Alert;
		public function clickbutton():void{
		Alert.show("Hello world!!","Welcome",4)
		}
	]]>
</mx:Script>		
</mx:Module>

feature.xml內容

<?xml version="1.0" encoding="utf-8"?>
<Module>
    <ModulePrefs
        class_key="http://localhost:8080/widgets/HelloWorld/feature.xml"
        title="Hello "
        description="Hello "
        author="KunHsiang"
        author_email="ChangKunHsiang@gmail.com"
        author_affiliation="CHVS"
        thumbnail="http://localhost:8080/widgets/HelloWorld/HelloWorld.png">
    </ModulePrefs>
    <WidgetPrefs/>
    <Content
        type="swf"
        href="http://localhost:8080/widgets/HelloWorld/HelloWorld.swf"/>
</Module>

編譯

在鍵入以上的程式碼後，接下來可進行編譯的動作。

• 選擇Project裡的Build Project。

• 在編譯完成後在bin-deubg目錄即可看到產生的執行檔，我們最重要的是HelloWorld.swf檔案，也就是Flex Builder會將HelloWorld.mxml編譯成SWF檔案；而等會複製到Tomcat中測試時feature.xml在src目錄當中複製也可。

在Web Server當中測試iteacher widget

在上述的過程中我們瞭解到iteacher widget是由Flex的技術來實作，接下來在Tomcat當中確認iteacher widget相關檔案可以被存取到。

筆者在Tomcat當中新增一個虛擬目錄widgets以用來測試所有的iteacher wdiget，而在其下新增子目錄HelloWorld，並將HelloWorld.swf、HelloWorld.png及feature.xml放置於此目錄下。

C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\widgets\HelloWorld

複製上述檔案的方式，可在Flex Builder中的檔案按右鍵複製，然後在目標資料夾再按右鍵貼上即可。

測試HelloWorld.swf

在啟動Tomcat後，可依照feature.xml當中的路徑來測試各個檔案是否能連的到；在以下HelloWorld.swf的網址連結出現藍色是正常的，因為上述提到MXML Module所產生的SWF檔案不能獨立執行，需上傳到iteacher平台才能看到其內容。

測試HelloWorld.png

測試feature.xml

新增crossdomain.xml檔案

在發佈iteacher widget至iteacher上時，還需要放置一個檔案至Tomcat的ROOT目錄當中，以告知Tomcat下的widget能被其它的網域所存取，這裡的網域指的就是如http://iteacher.tw這樣的網址。

以筆者而言的ROOT目錄位在：

C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\ROOT

而crossdomain.xml的內容是固定的，只需放置一次就可讓本機的widget共用。

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
  <allow-access-from domain="*" />
</cross-domain-policy>

發佈及測試iteacher widget

在本機端的伺服器測試好各項檔案可存取到後，並且也設置好crossdomain.xml檔案後，接下來就是要將其發佈至iteacher；首先讀者可依註冊iteacher一文所提來登入iteacher，在登入後點選右上角的偏好設定，接下來詳細的步驟可以參考新增iteacher widget一文。