常用元件應用
2015/08/14 謝碧景(c)編製更新
學習目標
學會Palette(元件面板)中【User Interface(使用者介面)】類別之Label標籤、TextBox文字輸入盒、Button按鈕元件編排與設計應用（以範例引導）。
學會Palette(元件面板)中【Layout(介面配置)】類別之元件編排與設計應用。
學會Math數學運算指令及變數(全域變數、區域變數)之設計與應用。
學會元件、事件、屬性、方法之設計與應用(※程式方塊：土黃色代表事件，紫色是方法，深綠色是設定屬性值，淺綠色是取得屬性值)。
◆ MIT App Inventor 官方網站 http://appinventor.mit.edu/ → Create apps! (繁體中文)
一、User Interface 使用者介面
除前述範例練習中引用使用者介面(User Interface)中Label 標籤、Button 按鈕、Image 圖片及 Slider 滑桿等元件及多媒體(Media)中Sound 音效元件外，下述將簡介其他常用元件之應用。
語系English
繁體中文
(一)Label 標籤
顯示文字。
(二)TextBox 文字輸入盒元件
可讓使用者輸入文字，其輸入的文字會儲存於文字屬性中。
(三)Button 按鈕元件
當使用者按下按鈕元件，會執行使用者設計的程式片段，是應用程式與使用者互動的主要元件。
該元件在使用者介面(User Interface)類別中，功能為顯示指定的網頁內容，會嵌入一個小瀏覽器，除網頁顯示外，亦顯示文字、圖片、Google地圖等。
二、Layout 介面配置
Layout 介面配置：該元件是一個容器，本身不會在螢幕中顯示，可將其他元件加入該元件(容器)裡面，會依指定方式編排對齊；對齊方式有 TableArrangement表格配置、VerticalArrangement垂直配置、HorizontalArrangement水平配置等，如下圖。
語系English
繁體中文
元件簡述：Palette→Layout(介面配置)：
HorizontalArrangement 水平配置元件：可將多個元件從左到右水平橫向排列。
VerticalArrangement 垂直配置元件：可將多個元件從上到下垂直排列，並對齊左邊。
TableArrangement 表格配置元件：可將多個元件放在不同行與列的格子中，以表格方式排列。
＊註：參閱 App Inventor 2 指令中文化排列元件《摘自： AppInventor中文學習網》
HorizontalArrangement (水平配置)、VerticalArrangement (垂直配置)元件的常用屬性如下：
三、範例應用
練習4：號碼顯示。【重點：學會 HorizontalArrangement(水平配置)、VerticalArrangement(垂直配置)、PasswordTextBox1(密碼輸入盒)、TextBox(文字輸入盒)等元件之設計與應用】。(專案名稱： Display.aia)
(一) 畫面編排(Designer)頁面：即版面配置頁面。
TextBox (文字輸入盒)元件的常用屬性如下：
(二) 程式設計(Blocks)頁面：
PasswordTextBox1(密碼輸入盒)元件：輸入時資料不會在螢幕顯示，僅以星號(*)取代，為避免被檢視，以保護密碼資料。
程式設計(Blocks)：
＊註：方塊土黃色代表事件，紫色是方法，深綠色是設定屬性值，淺綠色是取得屬性值。
(三) 測試程式：以模擬器(emulator)為例，如下圖，輸入資料前、輸入資料後未按下按鈕、及執行按下按鈕後畫面。
練習5：攝氏溫度轉換華氏溫度程式。【提示：F=(9/5)*C+32，重點：學會 HorizontalArrangement(水平配置)、TextBox(文字輸入盒)元件及基本運算之設計與應用】。
方法1：以 Layout 介面配置元件(HorizontalArrangement(水平配置)，專案名稱： C2F.aia
(一) 畫面編排(Designer)頁面：即版面配置頁面。
※僅限數字 (NumbersOnly)：僅能輸入數字資料。
(二) 程式設計(Blocks)頁面：即程式編輯區。
語系→English：
※加法及乘法方塊具有擴充項目圖示，透過『點選及拖曳』可產生連續加法或連續乘法。
語系→繁體中文：
＊註1：變數可分2種：
(1)全域變數Global Variable：作用範圍為定義此變數的Screen元件頁面，當此頁關閉後，該變數即消失。
(2)區域變數Local Variable：作用範圍為定義此變數的程式區塊，當離開此程式區塊，該變數即消失。
＊註2：合併文字→於內件方塊項目中文字指令，可連結合併不同之字串。
＊註3：內嵌輸入項與外接輸入項：在方塊上按右滑鼠即可選擇不同之輸入方式呈現。
內嵌輸入項→ 轉→外接輸入項：
外接輸入項→轉→內嵌輸入項：
(三) 測試程式：以模擬器(emulator)測試執行，如下圖，執行前後畫面。
方法2：直接以User Interface 元件設計。【重點：學會 TextBox(文字輸入盒)、Label(標籤)、Button(按鈕)元件及基本運算之設計與應用】。專案名稱： C2F_2.aia
(一) 畫面編排(Designer)頁面：即版面配置頁面。
(二) 程式設計(Blocks)頁面：
語系→English：
語系→繁體中文：
(三) 測試程式：以模擬器(emulator)測試執行，如下圖，執行前後畫面。
