App Inventor CH3 程式拼塊
士林高商
施柏宏教師
1
一、認識拼塊
App Inventor 是利用拼塊進行程式設計，在程式設計頁面的左方，提供程式方塊使用，共可分為三
個群組：
1.
內件方塊：所有系統內建的程式拼塊。
2.
Screen1：顯示目前所建立之元件，點擊任一元件時，會出現該元件所有程式拼塊。
3.
任意元件：提供通用元件。
程式方塊以不同顏色來區分功能，土黃色是事件、紫色是方法、淺綠色是取得屬性值、深綠色是設
定屬性值。
圖
1 程式拼塊頁面
圖
2 程式拼塊以顏色區分功能
二、事件
事件是預先設定好一種情境讓使用者操作，當使用者做了該操作，程式就會執行特定的程式碼作為
回應，通常事件包含三個部分：
1.
事件來源：觸發事件的元件，如：按鈕、文字輸入盒元件等。
2.
事件名稱：發生的事件，如：被點選、取得焦點等。
3.
處理程式碼：事件發生後執行的程式碼。
圖
3 事件區塊架構
事件來源
事件名稱
處理程式碼
App Inventor CH3 程式拼塊
士林高商
施柏宏教師
2
三、非可視元件
可以在螢幕中顯示的元件，稱為「可視元件」
。若元件不會在螢幕中顯示，必須透過程式呼叫方式
執行，則此元件稱為「非可視元件」
。
對話框元件便是非可視元件的一種，常用的事件與方法有：
事件或方法
說明
選擇完成
事件
使用者按對話框中的按鈕後觸發本事件
輸入完成
事件
使用者在對話框中輸入文字，再按ＯＫ鈕後觸發本事件。
顯示警告訊息
方法
顯示訊息，該訊息隨後會自行消失。
顯示選擇對話框
方法
顯示兩個按鈕的對話框，按任一按鈕後對話框都會消失。
顯示訊息對話框
方法
顯示訊息對話框，按對話框中的按鈕後對話框才會消失。
顯示文字對話框
方法
顯示可輸入文字對話框，按ＯＫ鈕後對話框消失。
圖
3 對話框在螢幕上看不見
圖
4 常見的方法
App Inventor CH3 程式拼塊
士林高商
施柏宏教師
3
實作題
1. 延伸 CH2 實作題，並設計以下功能：
(1) 當使用者輸入完帳號與密碼後，按下「登入」時，會跳出歡迎的
「訊息對話框」，並且會在下方以紅字顯示密碼。
(2) 當使用者按下「忘記帳號」時，則在下方顯示警告訊息「帳號：自己的學號」
。
2. 在電腦中，顏色分別是由 R(紅色)、G(綠色)、B(藍色)所組成，其數值的範圍皆
落於
0~255 之間，例如：(255, 0, 0) 代表紅色、(0, 0, 255) 代表藍色、(255, 255, 255)
代表白色。現在請依照上述原理，利用使用者介面的「滑桿」
，製作色碼調色盤。