第三章 使用者基本介面設計 課程名稱：程式設計 授課老師：李春雄 博士 第三章 使用者基本介面設計 課程名稱：程式設計 授課老師：李春雄 博士 各位同學大家好，我是李春雄老師，本學期所開設的課程名稱為「資料結構」， 今天所要為各位介紹的是第一章「資料結構導論」

本章學習目標 2.讓讀者瞭解App Inventor開發環境中「使用者基 本介面設計」物件的使用方法與應用。 本介面設計」物件種類及各物件的主要與共同屬性。 2.讓讀者瞭解App Inventor開發環境中「使用者基 本介面設計」物件的使用方法與應用。 開始： 本章學習目標 有二項：

本章內容 3-1 App Inventor的「使用者介面」設計工具 3-2 標籤元件(Label) 3-3 輸入方塊元件(TextBox) 3-4 密碼文字方塊元件(PasswordTextBox) 3-5 命令按鈕元件(Button) 3-6 顯示圖片元件(Image) 3-7 複選鈕元件(CheckBox) 3-8 對話訊息方塊元件(Notifier) 3-9 下拉式元件(Spinner) 3-10 滑桿元件(Slider) 3-11 清單選取元件(ListPicker) 3-12 日期選項元件(DatePicker) 3-13 時間選項元件(TimePicker) 3-14 多重頁面(Multi-Screen) 1-1 認識資料與資訊的關係: 其中，「資料」轉換成「資訊」必須要經過一連串處理過程，而這一連串的處理過程就是透過「程式」來處理。 1-2 何謂資料結構？ 「資料結構」(Data Structures)主要是探討如何將資料更有組織地存放到電腦記憶體中，以提昇程式之執行效率的一 門學問。 1-3 何謂演算法?演算法就是「解決問題的方法」 1-4 程式設計概念: 步驟1. 分析所要解決的問題 步驟2. 設計解題的步驟 步驟3. 編寫程式 步驟4. 上機測試、偵測錯誤 步驟5. 編寫程 式說明書 1-5 結構化程式設計 利用「由上而下」的技巧，將程式分解成許多個獨立功能的模組。並且每一個模組都是由三種結構所組成。分別為循序結構、選擇結構及重複結構。 1-6 演算法的效率評估 指用來計算某些演算法所撰寫的程式，在經過編譯之後，實際執行所需要的時間。

3-1 App Inventor的「使用者介面」設計工具 【功能】可以讓設計者在「設計介面」的同時，可以看到「呈現方式」。 【使用群組元件】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【常見基本元件與進階元件】 註：以上的元件可以搭配Layout(版面配置)元件來使用。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

3-2 標籤元件(Label) 【定義】是一種用來提示使用者在輸入或輸出資料時的說明。 【目的】提示使用者相關的訊息內容。 和說明，但不提供使用者「輸入或修改」的動作。 【範例】標籤元件(Label)的實作步驟如下所示： 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【設定屬性值】 第一種：靜態設定(利用屬性表來設定) 【說明】「手機畫面配置區」中的Label1標籤元件其內容是要透過「屬性表」的設定。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

第二種：動態設定(利用撰寫拼圖程式方式) 切換到「Blocks」拼圖模式 說明：用來設定「Label1」標籤元件的文字(Text)內容為右方插槽中的 字串資料。  圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法 【注意】以上的「拼圖程式」必須要嵌在「事件程序內」才能被執行。

【標籤元件(Label)的相關屬性】 【註】 動態(拼圖)：是指可以讓設計者利用「Blocks」拼圖模式來動態指定屬性值。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法 【註】 動態(拼圖)：是指可以讓設計者利用「Blocks」拼圖模式來動態指定屬性值。

【標籤元件(Label)的七種動態屬性】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

3-3 輸入方塊元件(TextBox) 【定義】是指用來讓使用者輸入「開放式」資料的介面。 【目的】讓使用者輸入程式所需處理的原始資料。 【使用時機】輸入或修改文字內容。 【範例】輸入方塊元件(TextBox)的實作步驟如下所示： 【注意】 此時，你一定會感到奇怪，為何TextBox1元件無法拖曳到Label1元件後面，因此，解決方法就是利用「版面配置元件(Layout)」中的「HorizontalArrangement元件」，它專門元件以「水平方式」排列。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【作法】 1.從「Layout」中，拖曳「HorizontalArrangement元件」到「手機畫面配置區」。 2.再將原先的「Label1元件」與「TextBox1元件」拖曳「HorizontalArrangement元件」中。 3.此時，在Components(專案所用的元件區)中，你可以看到「Label1元件」與「TextBox1元件」附屬在「HorizontalArrangement元件」的下一層了。如上圖右邊所示。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【輸入方塊元件(TextBox)的相關屬性】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【輸入方塊元件(TextBox)的11種動態屬性】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法 【輸入方塊元件(TextBox)的1個方法】

3-4 密碼文字方塊元件(PasswordTextBox) 【目的】保護個人的隱私及資料安全。 【使用時機】不顯示輸入文字在螢幕上。例如登入介面的「密碼」。 【範例】密碼文字方塊元件(PasswordTextBox)的實作步驟如下所示： 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【密碼文字(PasswordTextBox)與文字(TextBox)不同之處】 密碼文字方塊元件缺少了兩個屬性： 1. MultiLine屬性：用來設定輸入多行文字內容。 2. NumbersOnly屬性：用來設定只能輸入數字內容。 原因：輸入密碼時，只須單行，並且最好搭配「字母+數字+特殊符號字元」，以提高安全性。 【密碼文字方塊元件(PasswordTextBox)的9種動態屬性】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【密碼文字方塊元件(PasswordTextBox)的2個事件】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

3-5 命令按鈕元件(Button) 【定義】是指用來執行某一事件被觸發時，所執行的「事件程序」。 【目的】專門來「處理」使用者輸入的原始資料。 【使用時機】命令程式碼 【圖解說明】 1. 使用者按下按「登入」鈕。 2. 按鈕就會觸發「Click事件」。 3. 自動執行「事件處理程序」。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【設定屬性值】 【設定後的結果】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【命令按鈕元件(Button)的相關屬性】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【命令按鈕元件(Button)的9種動態屬性】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【命令按鈕元件(Button)常用的事件】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【物件、事件及處理程序】 1. 物件：是指元件名稱。例如：Button、Label、TextBox等。 2. 事件：是指被觸發的情況。例如：Click、LongClick等 3. 處理程序：是指某一物件被觸發時，所要執行的指令。 【圖解說明】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【實例】操作樂高機器人的介面設計 1. 物件：前、後、左、右及停止…等按鈕。例如：Button。 2. 事件：「按住」某一方向鈕。例如：TouchDown。 3. 處理程序：可以讓機器人前進、後退、向左、向右及停止等。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【綜合練習1】請設計一個使用者登入介面，並且可以讓使用者留言版(多行) 【目的】可以完整顯示「文章式」的內容。 【使用時機】資料量較多時。例如：討論區與留言板。 【程式】ch3_5_EX1.aia 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【注意】 1. TextBox文字框元件的MultiLine屬性要勾取。 2. 當你在Text屬性中輸入「第1行留言 \n第2行留言\n第3行留言 \n... \n... \n第N行留言」時，其中「\n」換行符號在「手機的版面配置區」 沒有作用。 3. MultiLine屬性的多行內容必須要透過「模擬器」或「實機」執行時， 才能看得到效果。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【綜合練習2】 承上一題，當使用者輸入「帳號及密碼」之後，再按下「登入」鈕，會將「密碼」資料顯示在「留言版」中。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【參考解答】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【綜合練習3】 請設計一個使用者登入介面程式，當使用者輸入帳號及密碼之後，再按下「登入」鈕，它會去檢查「帳號及密碼」是否同時正確。假設： 帳號：LeechPhd 密碼：123456 【介面設計與執行結果】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【參考解答】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

3-6 顯示圖片元件(Image) 【定義】是指可以讓使用者載入圖片的物件。 【目的】1.靜態呈現圖片(貼圖) 2.動態呈現圖片(動畫效果) 【使用時機】設計多媒體效果的APP程式 【範例】顯示圖片元件(Image)的實作步驟如下所示： 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【設定屬性值】 【上傳檔案的步驟】 【設定後的結果】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法 【設定後的結果】

【顯示圖片元件(Image)的相關屬性】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【實作練習】 請準備兩張照片並上傳，先載入「長距離拍照」的照片，當使用者「按一下」時，可以「拉長鏡頭」，亦即主要的人物放大，而當使用者「長按」時可還原。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【參考解答】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

3-7 複選鈕元件(CheckBox) 【定義】是指用來讓使用者同時輸入多個「封閉式」資料的介面。 【目的】利用「勾選方式」來輸入程式所需處理的原始資料。 【優點】確保資料的一致性與正確性。 【缺點】無法讓使用者填入「開放式」資料。 【使用時機】輸入的資料項目三個或以上時。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【範例】複選鈕元件(CheckBox)的實作步驟如下所示： 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【複選鈕元件(CheckBox)的相關屬性】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【複選鈕元件(CheckBox)的9個動態屬性】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【重要觀念】 先了解CheckBox1如何被點選，其原理： 當Checked 屬性的屬性值為True時，代表被點選了， 當Checked 屬性的屬性值為False時，代表沒有被點選。 【說明】 若要判斷那個CheckBox1控制項的核取方塊是否被選取，只要透過下列敘述即可。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【複選鈕元件(CheckBox)的重要的事件】 【說明】Checked 屬性搭配Changed事件 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【實作練習】 請利用「CheckBox」物件來設計介面表單，可以讓學生輸入「姓名」並點選「多門」喜歡的「科目名稱」，最後顯示姓名及所選的科目名稱。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【參考解答】 …… … 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

3-8 對話訊息方塊元件(Notifier) 【定義】是指用來讓使用者與正在執行中程式進行互動，並作適時的回覆。 【目的】顯示程式執行中的狀態。 【使用時機】提醒目前程式執行過程的狀態。 【呈現方式】1. 訊息方塊(只提供訊息) 2. 對話方塊(除了提供訊息，也提供對話功能) 【例如】確認視窗或錯誤訊息視窗。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

訊息方塊 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

對話方塊 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【範例】對話訊息方塊元件(Notifier)的實作步驟如下所示： 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【對話訊息方塊元件(Notifier)的相關屬性】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【對話訊息方塊元件(Notifier)的2個事件】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【對話訊息方塊元件(Notifier)常見的4種方法】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

3-8.1 訊息方塊(ShowAlert方法) 【功能】在短時間「顯示訊息」的方塊，用來提醒使用者即將發生的狀況。 【拼塊的使用方法】 【說明】在「notice」後面接「字串的訊息資料」 【範例】提醒使用者「您的手機電力剩下15%」 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【實作】 請利用訊息方塊(ShowAlert方法)來讓使用者查詢手機剩下的電力。例如：您的手機電力剩下15%。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【參考解答】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

3-8.2 訊息方塊(ShowMessageDialog方法) 【功能】彈出顯示訊息方塊，等待使用者按下「確定」鈕後，才會消失。 【目的】確保使用者得知本訊息，並與系統回應。 【拼塊的使用方法】 【拼圖程式範例】ch3_8.aia 【執行結果】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

3-8.3 對話方塊(ShowChooseDialog)方法 【功能】彈出顯示對話方塊，等待使用者按下「確定」或「取消」鈕後，才會消失。 【目的】提供使用者選擇再次「確定」或「取消」的功能。 【適用時機】處理重要的命令時。例如：刪除某一重要的文件。 【拼塊的使用方法】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【說明】cancelable設定為「false」，否則會多出一個英文版的「Cancel」鈕。 【拼圖程式範例】ch3_8.aia 【說明】cancelable設定為「false」，否則會多出一個英文版的「Cancel」鈕。 【執行結果】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

3-8.4 對話方塊(ShowTextDialog)方法 【功能】彈出顯示對話方塊，等待使用者「輸入資料」後，再按下「確定鈕」才會消失。 【適用時機】需用處理不同的資料。例如：處理全班學業成績或操作成績。 【拼塊的使用方法】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【說明】cancelable設定為「false」，否則會多出一個英文版的「Cancel」鈕。【執行結果】 【拼圖程式範例】ch3_8.aia 【說明】cancelable設定為「false」，否則會多出一個英文版的「Cancel」鈕。【執行結果】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

3-9 下拉式元件(Spinner) 【定義】是指可以讓使用者從多個選項中「挑選出一項」資料。 【目的】提高介面親和力(Friendly) 。 【使用時機】選項如果超過三項最好使用這種方法。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【範例】下拉式元件(Spinner)的實作步驟如下所示： 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【下拉式元件(Spinner)的相關屬性】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【下拉式元件(Spinner)的1個事件】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

將選項文字(程式設計,資料庫系統,資料結構,系統分析,計算機概論,數位學習)加入到「ElementsFromString」屬性中。 【範例一】設定靜態(屬性表)來新增選項 將選項文字(程式設計,資料庫系統,資料結構,系統分析,計算機概論,數位學習)加入到「ElementsFromString」屬性中。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【範例二】 承上一題，也可以利用清單(陣列)元件的動態(拼圖)來新增選項 【參考解答】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

3-10 滑桿元件(Slider) 【定義】是指滑桿元件來了解目前的進度；亦即透過滑動來改變其數字內容。 【原理】此元件在滑動時將會觸發「PositionChanged」事件，並回傳目前所 在滑桿的所在位置。 【使用時機】設定速度、馬力、大小等數值資料。 【範例】滑桿元件(Slider)的實作步驟如下所示： 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【滑桿元件(Slider)的相關屬性】 【圖解說明】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【滑桿元件(Slider)的7個動態屬性】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【隨堂練習】 請利用滑桿元件(Slider)來控制照片的大小。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【參考解答】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

3-11.清單選取元件(ListPicker) 【定義】是指可以讓使用者從多個選項中「挑選出某一項目」資料。 【圖解說明】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【範例】清單選取元件(ListPicker)的實作步驟如下所示： 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【清單選取元件(ListPicker)的相關屬性】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【清單選取元件(ListPicker)的相關屬性】(續…) 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【清單選取元件(ListPicker)的18個動態屬性】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【清單選取元件(ListPicker)的4個常用事件】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法 【清單選取元件(ListPicker)的1種方法】

【範例一】設定靜態(屬性表)來新增選項 將選項文字(程式設計,資料庫系統,資料結構,系統分析,計算機概論,數位學習)加入到「ElementsFromString」屬性中，並將您點選的課程顯示出來。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【參考解答】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【範例二】 承上一題，也可以利用清單(陣列)元件的動態(拼圖)來新增選項 【參考解答】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

3-12.日期選項元件(DatePicker) 【定義】是指可讓使用者選擇日期的快顯視窗。 【目的】提供親和力的操作介面。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【範例】日期選項元件(DatePicker)的實作步驟如下所示： 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【日期選項元件(DatePicker)的相關屬性】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【日期選項元件(DatePicker)的動態屬性】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【日期選項元件(DatePicker)的事件】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【實作一】請利用日期選項元件(DatePicker)來撰寫一程式，可以讓使用者選擇某一日期，並顯示在螢幕上。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【參考解答】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

3-13.時間選項元件(TimePicker) 【定義】是指可讓使用者選擇時間的快顯視窗。 【目的】提供親和力的操作介面。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【範例】時間選項元件(TimePicker)的實作步驟如下所示： 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【時間選項元件(TimePicker)的相關屬性】 與日期選項元件(DatePicker)相同。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【時間選項元件(TimePicker)的事件】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【時間選項元件(TimePicker)的方法】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【實作一】請利用時間選項元件(TimePicker)來撰寫一程式，可以讓使用者選擇某一時間，並顯示在螢幕上。 【目的】提供親和力的操作介面。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【範例】 時間選項元件(TimePicker)的實作步驟如下所示： 【參考解答】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

3-14 多重頁面(Multi-Screen) 【引言】 當我們在設計一套管理系統app時，不可能只用到一個活動頁面，因為一套功能完整的系統如果只有一個頁面，那這個系統未免太小了吧！所以一個有規模的專案系統一定是由數個或數十個頁面所組成的，而我們要如何再新增頁面呢？其實App Inventor2是允許我們再新增頁面的。 【方法】利用「Add Screen」功能鈕來新增活動頁面。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

請在主畫面(Screen1)再新增三個活動頁面(Screen2~4)，並完成以下的頁面設計。 【實作1】模擬學生選課系統的頁面切換 請在主畫面(Screen1)再新增三個活動頁面(Screen2~4)，並完成以下的頁面設計。 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法

【參考解答】 圖： 接下來，我們可以從圖1-1來說明「資料與資訊的關係」 當我們「輸入原始成績」之後，如何輸出一張成績單呢？那就必須要透過「程式」來進行處理， 而在資料結構中，程式=資料結構+演算法