使用者基本介面设计.ppt

第三章 使用者基本介面設計;本章學習目標 ;本章內容 ;3-1 App Inventor的「使用者介面」設計工具;【常見基本元件與進階元件】;3-2 標籤元件(Label);【設定屬性值】;第二種：動態設定(利用撰寫拼圖程式方式) ?切換到「Blocks」拼圖模式 說明：用來設定「Label1」標籤元件的文字(Text)內容為右方插槽中的 字串資料。? ;【標籤元件(Label)的相關屬性】;【標籤元件(Label)的七種動態屬性】;3-3 輸入方塊元件(TextBox);【作法】;【輸入方塊元件(TextBox)的相關屬性】;【輸入方塊元件(TextBox)的11種動態屬性】;3-4 密碼文字方塊元件(PasswordTextBox);【密碼文字(PasswordTextBox)與文字(TextBox)不同之處】;【密碼文字方塊元件(PasswordTextBox)的2個事件】;3-5 命令按鈕元件(Button);【設定屬性值】;【命令按鈕元件(Button)的相關屬性】;【命令按鈕元件(Button)的9種動態屬性】;【命令按鈕元件(Button)常用的事件】;【物件、事件及處理程序】;【實例】操作樂高機器人的介面設計 1. 物件：前、後、左、右及停止…等按鈕。例如：Button。 2. 事件：「按住」某一方向鈕。例如：TouchDown。 3. 處理程序：可以讓機器人前進、後退、向左、向右及停止等。;【綜合練習1】請設計一個使用者登入介面，並且可以讓使用者留言版(多行) 【目的】可以完整顯示「文章式」的內容。 【使用時機】資料量較多時。例如：討論區與留言板。 【程式】ch3_5_EX1.aia;【注意】 1. TextBox文字框元件的MultiLine屬性要勾取。 2. 當你在Text屬性中輸入「第1行留言 \n第2行留言\n第3行留言 \n... \n... \n第N行留言」時，其中「\n」換行符號在「手機的版面配置區」 沒有作用。 3. MultiLine屬性的多行內容必須要透過「模擬器」或「實機」執行時， 才能看得到效果。;【綜合練習2】;【參考解答】;【綜合練習3】;【參考解答】;3-6 顯示圖片元件(Image);【設定屬性值】;【顯示圖片元件(Image)的相關屬性】;【實作練習】;【參考解答】;3-7 複選鈕元件(CheckBox) ;【範例】複選鈕元件(CheckBox)的實作步驟如下所示：;【複選鈕元件(CheckBox)的相關屬性】;【複選鈕元件(CheckBox)的9個動態屬性】;【重要觀念】;【複選鈕元件(CheckBox)???重要的事件】;【實作練習】;【參考解答】;3-8 對話訊息方塊元件(Notifier);訊息方塊;對話方塊;【範例】對話訊息方塊元件(Notifier)的實作步驟如下所示：;【對話訊息方塊元件(Notifier)的相關屬性】;【對話訊息方塊元件(Notifier)的2個事件】;【對話訊息方塊元件(Notifier)常見的4種方法】;3-8.1 訊息方塊(ShowAlert方法);【實作】;【參考解答】;3-8.2 訊息方塊(ShowMessageDialog方法);3-8.3 對話方塊(ShowChooseDialog)方法;【拼圖程式範例】ch3_8.aia 【說明】cancelable設定為「false」，否則會多出一個英文版的「Cancel」鈕。 【執行結果】;3-8.4 對話方塊(ShowTextDialog)方法;【拼圖程式範例】ch3_8.aia 【說明】cancelable設定為「false」，否則會多出一個英文版的「Cancel」鈕。【執行結果】;3-9 下拉式元件(Spinner);【範例】下拉式元件(Spinner)的實作步驟如下所示：;【下拉式元件(Spinner)的相關屬性】;【下拉式元件(Spinner)的1個事件】;【範例一】設定靜態(屬性表)來新增選項 將選項文字(程式設計,資料庫系統,資料結構,系統分析,計算機概論,數位學習)加入到「ElementsFromString」屬性中。;【範例二】;3-10 滑桿元件(Slider);【滑桿元件(Slider)的相關屬性】;【滑桿元件(Slider)的7個動態屬性】;【隨堂練習】;【參考解答】;3-11.清單選取元件(ListPicker);【範例】清單選取元件(ListPicker)的實作步驟如下所示：;【清單選取元件(ListPicker)的相關屬性】;【清單選取元件(ListPicker)的相關屬性】(續…);【清單選取元件(ListPicker)的18個動態屬性】;【清單選取元件(ListPicker