• 沒有找到結果。

5.2 Android 平台專屬導引精靈

5.2.3 Android 使用者介面元件

立 政 治 大 學

N a tio na

l C h engchi U ni ve rs it y

62

圖 5-6:Review 顯示。

5.2.3 Android 使用者介面元件

Android 實作的轉換元件有:ATextView、AEditText、ARadioButton、ACheckbox、ASpinner、

Border、FileBrowser 和驗證工具 Validation 共八個類別進行定義,其中 AComponent 是 定義一個 Android 使用者介面元件的父類別。在此定義使用者介面元件,其主要是用來 具體呈現 Android 導引精靈頁面上進行資料收集的方法,專注於 Android 程式中常被使 用到的元件轉換為主,以下將會介紹幾個我們定義的 Android 使用者介面元件類別,隨 之附上 M2T 介面轉換的程式碼:

• ATextView:在導引精靈頁面上顯示一段文字。經過 M2T 轉換之後,每一 ATextView

• AEditText:定義一個允許使用者進行編輯的單行(textfield)或多行(textarea)的文字或數 字編輯區塊,區塊長度可以透過 AEditText 的屬性加以定義。區別單行和多行的文字 輸入採用 EditText 在 XML 中的屬性 android:singleLine。若將其設為 true 將產生可進 行編輯的單行文字區塊,反之亦然。在 AEditText 內的屬性 reg 用來轉換從 PIM 過來 的 regular expression 字串,用來驗證使用者輸入正確與否,ATextView 與 AEditText 的 轉換的程式碼如圖 5-7 所示。

-text : string ATextView

-name : string -validate : string -reg : string

AEditText

android:text="«(componentset.components.get(0) as ATextView).text»"/>

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/«"your_"+(componentset.components.get(1) as AEditText).name»"

android:singleLine="true"

android:singleLine="false"/>

圖 5-7:TextInput 於 Android 程式碼轉換(M2T)示意圖。

• ARadioButton:定義一個 ARadioButton 的物件,會對應至一個 Android 的 RadioGroup 與 RadioButton 兩個類別物件,在 RadioButton 裡的每一個選項都必須透過 Item 類別 定義,ARadioButton 轉換的程式碼如圖 5-8 所示。

-name : string -title : string -value : string

ARadioButton -text : string

ATextView

readiobutton

<TextView

style="@style/WizardFormLabel"

android:text="«(componentset.components.get(0) as ATextView).text»"

android:id="@+id/«componentset.name»"/>

«IF (multicomponent instanceof ARadioButton) && (multicomponent as ARadioButton).title != null»

<RadioButton

android:id="@+id/«(multicomponent as ARadioButton).value»«componentvalue»"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="«(multicomponent as ARadioButton).title»"/>

«ENDIF»

«ENDFOR»

</RadioGroup>

PSM

-title : string -value : string

Item

-items 0..* 1

圖 5-8:AradioButton 於 Android 程式碼轉換(M2T)示意圖。

• ACheckBox:定義一個 ACheckbox 的物件,會對應至一個 Android 的 Checkbox 類別 物件,在 ACheckBox 裡的每一個選項都必須透過 Item 類別定義,ACheckBox 轉換的 程式碼如圖 5-9 所示。

-name : string -title : string -value : string

AChekBox -text : string

ATextView

checkbox

<TextView

style="@style/WizardFormLabel"

android:text="«(componentset.components.get(0) as ATextView).text»"

android:id="@+id/«componentset.name»"/>

<CheckBox

android:id="@+id/«(multicomponent as ACheckBox).value»«componentvalue»"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="«(multicomponent as ACheckBox).title»"/>

PSM

-title : string -value : string

Item

-items 1 0..*

圖 5-9:AcheckBox 於 Android 程式碼轉換(M2T)示意圖。

• ASpinner:定義一個下拉式選單的框架,會對應至一個 Android 的 Spinner 類別物件,

在 Aspinner 下拉是選項中的子元素都必須透過 Item 類別進行個別定義,ASpinner 轉 換的程式碼如圖 5-10 所示。

-name : string

-title : string -value : string

ASpinner -text : string

ATextView

dropdownmenu

<TextView

style="@style/WizardFormLabel"

android:text="«(componentset.components.get(0) as ATextView).text»"

android:id="@+id/«componentset.name»"/> -title : string

-value : string Item

-items 0..* 1

圖 5-10:Aspinner 於 Android 程式碼轉換(M2T)示意圖。

• Border:透過 XML 定義一個有邊線的矩形外框,將同一性質的問題以集合的方式呈 現。由於 Android 沒有 Border 的樣式可供選擇,因此必須另外設計外框樣式,Border 轉換的程式碼如圖 5-11 所示。

Border

-name : string AComponentSet

-subsets 1

0..*

-text : string ATextView

<TextView

style="@style/WizardFormLabel"

android:text="«(componentset.components.get(0) as ATextView).text»"

android:id="@+id/«componentset.name»"/>

<LinearLayout

style="@style/WizardLayoutStyle"

android:background="@drawable/borders">

«FOR subset:(componentset.components.get(1) as Border).subsets»

«layoutCompile(subset,componentvalue)»

• AFileBrowser:與上述幾個類別不同,此類別並不屬於 Android 元件的任何一部份,

但還是以 Android Button 元件來進行設計,主要功能是當使用者觸發此 AFileBrowser

-text : string ATextView

AFileBrowser

filebrowser

<Button

android:id="@+id/btn«componentset.name»"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="«(componentset.components.get(0) as ATextView).text»"/>

<ImageView

android:id= "@+id/iv«componentset.name»"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

PSM

圖 5-12:AfileBrowser 於 Android 程式碼轉換(M2T)示意圖。

• Validation:用於驗證資料,藉由此類別描述 Android 導引精靈的輔助方法,目的是為 了增加文字對話框的邏輯運算,經常用來比對密碼是否輸入正確…等。而在 AEditText 中加入格式的規範(reg 屬性),以 Regular expression 的方式限制使用者輸入的字串,

如圖 5-13 所示。

-check_value : string -check_method : string

Validation

«IF (componentset.components.get(1) as AEditText).validate != null»

&& TextUtils.equals(mData.getString(

«validate_left((componentset.components.get(1) as AEditText) .validate.check_method)»_DATA_KEY),

mData.getString(«validate_right((componentset.components.get(1) as AEditText).validate.check_method)»_DATA_KEY))

«ENDIF»

«IF (componentset.components.get(1) as AEditText).reg != null»

&& Pattern.compile("«(componentset.components.get(1) as AEditText).reg»") .matcher(mData.getString(«(componentset.components.get(1) as AEditText).name»

_DATA_KEY)).matches()

«ENDIF»

-name : string -validate : string -reg : string

AEditText

-validate 0..1 1

PSM

圖 5-13:Validation 於 Android 程式碼轉換(M2T)示意圖。

‧ 國

立 政 治 大 學

N a tio na

l C h engchi U ni ve rs it y

67