App Inventor（編程實例及指南）

AppInventor編程實例及指南目錄\h教程\h第1章Hello貓咪\h學(xué)習(xí)要點\hAppInventor的開發(fā)環(huán)境\h設(shè)計組件\h創(chuàng)建一個Label（標(biāo)簽）\h添加Button（按鈕）組件\h添加貓叫聲\h添加組件行為\h發(fā)出貓叫聲\h添加震動效果\h搖晃手機\h將應(yīng)用打包以供下載\h分享應(yīng)用\h改進(jìn)\h小結(jié)\h擴展閱讀\hMIT\hEECS\hIEEE\hACM\hOER\h譯者提示\h資源下載\h第2章油漆桶\h學(xué)習(xí)內(nèi)容\h準(zhǔn)備開始\h設(shè)計組件\h創(chuàng)建顏色按鈕\h使用Arrangement組件改善布局\h添加Canvas（畫布）\h設(shè)置底部按鈕及照相機組件\h為組建添加行為\h添加觸摸事件，繪制一個圓點\h添加畫線的拖拽事件\h添加按鈕事件處理程序\h讓用戶拍照片\h改變畫筆大小\h使用變量\h修改變量值\h油漆桶的完整應(yīng)用\h改進(jìn)\h小結(jié)\h畫筆應(yīng)用\h開發(fā)及測試\h駱駝命名法\h中英文對照\h第3章打地鼠\h學(xué)習(xí)目標(biāo)\h學(xué)習(xí)內(nèi)容\h準(zhǔn)備開始\h設(shè)計組件\h設(shè)置活動組件\h布置Label組件\h為組件添加行為\h移動地鼠\h創(chuàng)建MoveMole過程\h在應(yīng)用啟動時調(diào)用MoveMole過程\h每秒鐘調(diào)用一次MoveMole過程\h記錄成績\h過程抽象\h重置分?jǐn)?shù)\h添加觸摸地鼠行為\h完整的MoleMash應(yīng)用\h改進(jìn)\h小結(jié)\h術(shù)語解釋\h背景知識\h中英文對照\h資源下載\h第4章開車不發(fā)短信\h學(xué)習(xí)內(nèi)容\h準(zhǔn)備開始\h設(shè)計組件\h為組件添加行為\h編程實現(xiàn)自動回復(fù)\h輸入一個定制的回復(fù)\h將定制回復(fù)保存到數(shù)據(jù)庫中\(zhòng)h應(yīng)用啟動時讀取定制信息\h大聲讀出收到的短信\h在回復(fù)中加入位置信息\h發(fā)送帶有位置信息的回復(fù)\h完整的應(yīng)用：開車不發(fā)短信\h改進(jìn)\h小結(jié)\h背景知識\h英漢對照\h資源下載\h第5章瓢蟲快跑\h應(yīng)用描述\h學(xué)習(xí)要點\h設(shè)計組件\h準(zhǔn)備開始\h活動的瓢蟲\h添加組件\h添加行為\h顯示能量水平\h添加組件\h創(chuàng)建變量：Energy\h畫出能量條\h饑餓而死\h添加蚜蟲\h添加一個ImageSprite\h控制蚜蟲\h瓢蟲吃掉蚜蟲\h瓢蟲與蚜蟲之間的碰撞檢測\h蚜蟲的回歸\h添加重新啟動按鈕\h添加青蛙\h讓青蛙追捕瓢蟲\h讓青蛙吃掉瓢蟲\h瓢蟲回歸\h添加音效\h改進(jìn)\h小結(jié)\h資源下載\h英漢對照\h第6章巴黎地圖旅游\h學(xué)習(xí)要點\h設(shè)計組件\h設(shè)置ActivityStarter組件的屬性\h為組件添加行為\h創(chuàng)建目的地列表\h讓用戶選擇一個目的地\h使用搜索打開地圖\h設(shè)立虛擬旅游\h為特定地圖尋找DataUri\h定義DataURIs列表\h修改ListPicker.AfterPicking行為\h改進(jìn)\h小結(jié)\h背景知識\h英漢對照\h資源下載\h第7章安卓，我的車在哪？\h學(xué)習(xí)要點\h準(zhǔn)備開始\h設(shè)計組件\h為組件添加行為\h顯示當(dāng)前位置\h記錄當(dāng)前位置\h顯示“已記錄”位置的方向\h永久保存已記錄的位置信息\h啟動應(yīng)用時讀取“記住”的位置信息\h完整的應(yīng)用：Android，我的車在哪兒？\h改進(jìn)\h小結(jié)\h資源下載\h第8章總統(tǒng)測驗\h學(xué)習(xí)要點\h準(zhǔn)備開始\h設(shè)計組件\h為組件添加行為\h定義索引變量\h顯示第一個問題\h遍歷所有問題\h讓測驗易于修改\h為每道題切換圖片\h檢查用戶答案\h完整的應(yīng)用：總統(tǒng)知識測驗\h改進(jìn)\h小結(jié)\h第9章木琴\h作品描述\h學(xué)習(xí)要點\h準(zhǔn)備開始\h設(shè)計組件\h創(chuàng)建鍵盤\h創(chuàng)建第一個音符按鈕\h添加Sound組件\h聲音與按鈕的連接\h實現(xiàn)其余的音符\h記錄并回放音符\h添加組件\h記錄音符及時間\h音符的回放\h播放適當(dāng)延遲的音符\h改進(jìn)\h小結(jié)\h資源下載\h第10章出題及答題\h學(xué)習(xí)要點\h準(zhǔn)備開始\h設(shè)計組件\h為組件添加行為\h記錄用戶的輸入\h清空問題及答案\h用多行文本顯示問題-回答\h調(diào)用新建的過程\h將數(shù)據(jù)永久保存到Web數(shù)據(jù)庫\h從數(shù)據(jù)庫加載數(shù)據(jù)\h答題：從數(shù)據(jù)庫中讀取試題的應(yīng)用\h在組件設(shè)計器中調(diào)整組件\h在快編輯器中編程：從數(shù)據(jù)庫加載測驗\h完整的答題應(yīng)用\h改進(jìn)\h小結(jié)\h第11章廣播中心\h學(xué)習(xí)要點\h準(zhǔn)備開始\h設(shè)計組件\h為組件添加行為\h將某人加入廣播列表\h廣播消息\h整理列表的顯示\h錄廣播過的短信\h將BroadcastList保存在數(shù)據(jù)庫中\(zhòng)h從數(shù)據(jù)庫加載廣播列表（BroadcastList）\h完整的廣播中心應(yīng)用\h改進(jìn)\h小結(jié)\h第12章遙控機器人\h學(xué)習(xí)要點\h準(zhǔn)備開始\h設(shè)計組件\h不可見組件\h可視組件\h為組件添加行為\h連接到NXT機器人\h顯示機器人列表\h建立藍(lán)牙連接\h與NXT斷開連接\h操控機器人\h用超聲波傳感器探測障礙物\h改進(jìn)\h小結(jié)\h外部鏈接\h第13章亞馬遜掌上書店\h學(xué)習(xí)要點\h什么是API?\h設(shè)計組件\h設(shè)計行為\h按關(guān)鍵字或ISBN搜索\h消除用戶的困惑\h掃描一本書\h改進(jìn)信息的顯示\h定制化API\h改進(jìn)\h小結(jié)\h指南\h第14章理解應(yīng)用的結(jié)構(gòu)\h組件\h行為\h應(yīng)用如菜譜\h應(yīng)用就是一系列的事件處理程序\h事件類型\h事件處理程序可以提問\h事件處理程序可以重復(fù)執(zhí)行某些塊\h事件處理程序可以實現(xiàn)存儲功能\h事件處理程序可以與Web對話\h小結(jié)\h第15章軟件工程與應(yīng)用調(diào)試\h軟件工程原則\h設(shè)計要面對真實的人、現(xiàn)實的問題\h快速地創(chuàng)建軟件原型，并展示給未來的使用者看\h迭代式開發(fā)\h先設(shè)計，后編碼\h對代碼進(jìn)行注釋\h切割、分層、各個擊破\h理解編程語言：用紙和筆跟蹤記錄\h應(yīng)用的調(diào)試\h監(jiān)視變量\h單獨測試塊\h使用“DoIt”漸進(jìn)式開發(fā)\h啟用與禁用塊\h小結(jié)\h第16章應(yīng)用中的存儲\h有名稱的存儲槽\h屬性\h定義變量\h設(shè)置及讀取變量\h用表達(dá)式為變量賦值\h變量的遞增\h構(gòu)造復(fù)雜的表達(dá)式\h顯示變量\h小結(jié)\h第17章創(chuàng)建動畫應(yīng)用\h在應(yīng)用中添加Canvas組件\hCanvas的坐標(biāo)系統(tǒng)\h用計時事件制造動畫\h產(chǎn)生運動\h控制速度\h高級動畫功能\h抵達(dá)邊界\hCollidingWith事件與NoLongerCollidingWith事件\h交互動畫\h關(guān)于沒有計時器的sprite動畫\h小結(jié)\h第18章程序中的決策：條件塊\h用if及ifelse進(jìn)行條件測試\h編寫一段二選一的決策程序\h多重條件判斷\h復(fù)雜條件判斷\h小結(jié)\h第19章數(shù)據(jù)列表編程\h創(chuàng)建列表變量\h選擇列表項\h使用Index遍歷列表\h舉例：遍歷畫筆顏色列表\h創(chuàng)建輸入表單及動態(tài)數(shù)據(jù)\h定義動態(tài)列表\h添加數(shù)據(jù)項\h顯示列表\h刪除列表項\h列表中的列表\h小結(jié)\h第20章循環(huán)\h控制程序的執(zhí)行：分支及循環(huán)\h使用foreach對列表實施迭代\h循環(huán)過程詳細(xì)分析\h書寫可維護(hù)的代碼\hforeach的第二個例子：顯示列表\h用while實現(xiàn)迭代\h使用while同步處理兩個列表\h使用while做公式計算\h小結(jié)\h第21章定義過程\h消除冗余\h定義過程\h調(diào)用過程\h程序計數(shù)器\h為過程添加參數(shù)\h過程的返回值\h在應(yīng)用中重用塊\h第二個例子：求兩點間距離\h小結(jié)\h第22章數(shù)據(jù)庫\h在TinyDB中永久保存數(shù)據(jù)\h從TinyDB中提取數(shù)據(jù)\h用TinyWebDB保存并共享數(shù)據(jù)\h用TinyWebDB保存數(shù)據(jù)\h用TinyWebDB來請求并處理數(shù)據(jù)\hGetValue-GotValue連動\h更為復(fù)雜的GetValue/GotValue舉例\h用不同的標(biāo)簽請求數(shù)據(jù)\h在TinyWebDB.GotValue中處理多標(biāo)簽\h設(shè)置Web數(shù)據(jù)庫\h小結(jié)\h第23章傳感器\h創(chuàng)建位置感知應(yīng)用\hGPS\h用AppInventor感知位置\h檢查邊界\h位置信息的來源：GPS,WiFi以及基站編碼\h使用方向傳感器\h使用滾動參數(shù)Roll\h控制運動的方向及速度\h手機用作指南針\h加速度傳感器\h響應(yīng)設(shè)備的搖晃\h使用加速度傳感器的讀數(shù)\h檢測自由落體\h用校準(zhǔn)值測定加速度\h小結(jié)\h第24章與WebAPI通信\h訪問生成圖像的網(wǎng)絡(luò)API\h為圖表API設(shè)置Image.Picture屬性

注：原文檔電子版（非掃描），需要的請購買本文檔后留言謝謝。教程

第1章Hello貓咪作者介紹HalAbelson關(guān)于Abelson教授的故事很難用一段簡短的文字來說明。他是MIT電子工程與計算機科學(xué)系的一名教授，獲得過MIT、IEEE以及ACM頒發(fā)的多種獎項，如果必須用一個詞來概括他的貢獻(xiàn)，那就是"教育"！正如他在獲獎時所說，“無論有多少獲獎的理由，對我來說只有‘教育’是最有意義的，這也是我在MIT給自己的定位：一名教師?！盇belson教授作為MIT計算機教育的領(lǐng)導(dǎo)者，執(zhí)教已超過30年，至今仍擔(dān)當(dāng)重要角色。他與GerrySussman合著的教科書《計算機程序的構(gòu)造和解釋》改變了人們對計算的認(rèn)識，并被世界范圍內(nèi)的高等學(xué)校所采用(中譯本由北京大學(xué)裘宗燕教授翻譯)。書中淡化了具體編程語言的特殊性，而將抽象的思維方法作為所有編程語言的共同基礎(chǔ)。在Abelson的教學(xué)實踐中，更關(guān)注的是學(xué)習(xí)的本質(zhì)：在與真實世界的交互中學(xué)習(xí)。AppInventor就是這種思想的具體體現(xiàn)。作為AppInventor開發(fā)團(tuán)隊的領(lǐng)導(dǎo)者，Abelson力圖讓初學(xué)者在創(chuàng)作實踐中體會編程語言的內(nèi)涵，并掌握編程的方法。用建構(gòu)主義(Constructionism)論的發(fā)展者Papert的話說，“生活在‘?dāng)?shù)學(xué)王國’里的人學(xué)習(xí)數(shù)學(xué)，就像法國人學(xué)習(xí)法語一樣的順理成章。”除此之外，Abelson是開源運動的倡導(dǎo)者，是共創(chuàng)組織及自由軟件基金會的創(chuàng)始領(lǐng)導(dǎo)人之一，也是推動MIT開放課程的主要力量。本章將開啟你的創(chuàng)建應(yīng)用之旅。這里介紹了AppInventor的關(guān)鍵要素——組件設(shè)計器及塊編輯器，并手把手地引導(dǎo)讀者創(chuàng)建第一個應(yīng)用：HelloPurr。在完成本章的學(xué)習(xí)之后，就可以開始創(chuàng)建自己的應(yīng)用了。圖1-1HelloPurr應(yīng)用每當(dāng)搭建了新的開發(fā)環(huán)境，通常運行的第一個程序就是顯示“HelloWorld”，來證明系統(tǒng)已經(jīng)就緒。這個傳統(tǒng)可以追溯到20世紀(jì)70年代，從BrianKernighan在貝爾實驗室使用C語言開始（Brian現(xiàn)在是谷歌AppInventor團(tuán)隊的訪問學(xué)者?。Ｊ褂肁ppInventor，即便是創(chuàng)建最簡單的應(yīng)用，也可以實現(xiàn)聲音的播放以及對屏幕觸摸的響應(yīng)，而不只是顯示文字。想想都令人感到興奮，那么，讓我們馬上開始吧。第一個應(yīng)用是“HelloPurr”（如圖1-1），當(dāng)你觸摸這只貓時，它會發(fā)出“喵嗚”聲；當(dāng)你搖晃它時，則將發(fā)出嘟嘟的震顫。學(xué)習(xí)要點本章用到了以下組件和概念：選擇組件來創(chuàng)建應(yīng)用：決定了應(yīng)用的外觀；為組件設(shè)定行為：做什么以及何時做；使用組件設(shè)計器選擇組件，在Android設(shè)備上，有些組件可以顯示，有些則不可見；從本地計算機加載媒體文件（聲音或圖像），并添加到應(yīng)用中；用塊編輯器來組裝程序塊，以此來設(shè)定組件行為；用AppInventor的實時測試功能對應(yīng)用進(jìn)行測試。你可以一邊創(chuàng)建應(yīng)用，一邊在手機上看到它們外觀以及運行情況；將應(yīng)用打包并下載到Android設(shè)備上。AppInventor的開發(fā)環(huán)境AppInventor的編程環(huán)境包括以下三個重要組成部分，如圖1-2所示：如圖1-2A所示，組件設(shè)計器運行在瀏覽器中，創(chuàng)建應(yīng)用過程中，用它來進(jìn)行組件的選擇，并進(jìn)行屬性設(shè)置；如圖1-2B所示，像組件設(shè)計器一樣，塊編輯器也在瀏覽器中運行，用于創(chuàng)建組件的行為；測試設(shè)備：在開發(fā)應(yīng)用過程中，可以用Android設(shè)備對應(yīng)用進(jìn)行同步的運行與測試；如果你手邊沒有Android設(shè)備，你可以使用系統(tǒng)中集成的Android模擬器來測試應(yīng)用。圖1-2A組件設(shè)計器圖1-2B塊編輯器在瀏覽器中訪問即可啟動AppInventor。如果你是第一次使用AppInventor，你會看到彈出的項目（Projects）窗口，它多半是空的，因為你還沒有創(chuàng)建過任何項目。單擊頁面左上角的“ProjectStartnewproject…”創(chuàng)建一個項目，輸入“HelloPurr”作為項目名稱（注意不帶空格），然后單擊OK。打開的第一個窗口是組件設(shè)計器（Designer），你可以單擊窗口右上角的Blocks按鈕來切換到塊編輯器。在Project右側(cè)的Connect下拉菜單中有三個可選項（三類測試設(shè)備），如圖1-3所示。圖1-3單擊“Connect”并選擇“AICompanion”（應(yīng)用開發(fā)伴侶，或簡稱AI伴侶）如果手邊的Android設(shè)備可以通過WIFI訪問互聯(lián)網(wǎng)，用該設(shè)備訪問GooglePlay，搜索MIT的AICompanion，下載、安裝并啟動它。然后在“Connect”下拉菜單中選擇“AICompanion”，并按照彈出窗口以及AI伴侶中的提示進(jìn)行操作。除此之外，也可以使用Android模擬器來測試應(yīng)用，選擇“ConnectEmulator”來加載Android模擬器，大約要等30秒鐘。如果一切正常，將會看到組件設(shè)計器窗口、塊編輯器按鈕，如果你選擇了Emulator選項，你還可以看到模擬器窗口（屏幕上看起來應(yīng)該像插圖1-2A和1-2B，但窗口中大部分是空的）。如果您還有問題，請重溫網(wǎng)站\h中的安裝說明。設(shè)計組件我們使用的第一個工具就是（也只能是）組件設(shè)計器。組件是你用來創(chuàng)建應(yīng)用的基本元素，就像菜譜中的原料。有些組件非常簡單，如“Label”（標(biāo)簽）組件，它用于在屏幕上顯示文字；或者如“Button”（按鈕）組件，輕按它則引起一個動作。其它組件則要更復(fù)雜：一個繪圖的“Canvas”（畫布）組件可以容納靜止圖像或動畫；“accelerometerSensor”（加速度傳感器）組件是一種運動傳感器，它的工作原理類似于Wii控制器，它可以檢測到設(shè)備的移動或搖晃；還有的組件用于編寫并發(fā)送短信、播放音樂和視頻以及從網(wǎng)站獲取信息等等。當(dāng)你打開Designer時，其外觀如插圖1-4所示。圖1-4AppInventor的組件設(shè)計器Designer被劃分為如下幾個區(qū)域：中部的白色區(qū)域稱為預(yù)覽窗口（Viewer），用于放置應(yīng)用中所需的組件，你可以按照自己的喜好來安排這些組件。預(yù)覽窗口只能粗略地顯示應(yīng)用的外觀，例如，與測試設(shè)備中的應(yīng)用相比，在預(yù)覽窗口中，一行文字可能會在不同的地方換行。如果想看到應(yīng)用的實際外觀，可以將應(yīng)用下載到測試設(shè)備上（稍后我們會在“打包應(yīng)用程序并下載”的部分詳細(xì)介紹），或者下載AppInventor自帶的模擬器。預(yù)覽窗口的左側(cè)是組件面板（Palette），其中包含了可供選擇的各類組件。該面板按類別劃分為幾個部分，默認(rèn)情況下，只有用戶界面（UserInterface）組件可見，可以通過點擊其他類別的標(biāo)題，如Media（媒體）等，來查看其他組件。預(yù)覽窗口的右側(cè)是組件列表（Components），顯示了項目中的所有組件，拖動到預(yù)覽窗口中的任何組件都將顯示在該列表中。目前，該項目中只有一個組件：Screen1，它代表設(shè)備的屏幕。組件列表下方是媒體列表（Media），顯示項目中的所有媒體資源（圖像和聲音）。本項目中尚未添加任何媒體資源，不過很快就會添加。最右邊的部分用于顯示組件的屬性（Properties），在預(yù)覽窗口中單擊某個組件，將在Properties下方看到該組件的一系列屬性。屬性描述了組件的詳細(xì)信息（如，單擊Label組件可以看到它的顏色、文字內(nèi)容、字體的屬性。），可以修改屬性值。當(dāng)前顯示的是屏幕（名為Screen1）的屬性，包括背景顏色、背景圖像及標(biāo)題等。HelloPurr應(yīng)用中需要兩個可視組件（可以理解為應(yīng)用中確實可見的組件）：Label組件顯示文字“寵物小貓”，而Button組件中有一張貓的圖片；還需要一個非可視的Sound（聲音）組件，用來播放聲音，如貓叫聲；還有一個AccelerometerSensor（加速度傳感器）組件，用于檢測設(shè)備的移動或搖晃。不必?fù)?dān)心，我們將按一步一步地教你使用這些組件。創(chuàng)建一個Label（標(biāo)簽）添加的第一個組件是Label：1.轉(zhuǎn)到組件面板（Palette），單擊Label（列表中的第五個），并將其拖動到預(yù)覽窗口（Viewer）中。你會看到一個矩形框出現(xiàn)在預(yù)覽窗口中，框里寫著TextforLabel1。2.看組件設(shè)計器右側(cè)的Properties（屬性）框，它顯示了Label的屬性。在中間位置有一個Text屬性，下面是Label中顯示的文字。將文字改為“寵物小貓”并按回車鍵。你會看到在預(yù)覽窗口中的文字也改變了。3.單擊BackgroundColor（背景色）下面的方框來改變Label的背景色，目前屬性值為None（無背景色），從顯示的顏色列表中選擇藍(lán)色，并將Label的TextColor（文字顏色）屬性改為黃色。最后將FontSize（字號）屬性改為20。Designer的外觀如圖1-5所示：圖1-5應(yīng)用中有了一個Label（標(biāo)簽）要確保Android測試設(shè)備或模擬器處于連接狀態(tài)。在設(shè)計器中添加的Label會在測試設(shè)備上顯示出來。在AppInventor中，在設(shè)計器中為應(yīng)用添加組件，等同于在設(shè)備上構(gòu)建應(yīng)用。這樣一來，你可以隨時看到應(yīng)用的外觀，這就是所謂的實時測試，你很快就會看到，這樣的測試也同樣適用于在塊編輯器中為組件添加行為。添加Button（按鈕）組件HelloPurr應(yīng)用中的貓咪用Button組件來實現(xiàn)：創(chuàng)建一個普通Button，然后將Button的圖像更改為貓咪。在組件設(shè)計器（Designer）的組件面板（Patatte）中單擊Button（在列表的頂部），將它拖到預(yù)覽窗口（Viewer）中，置于Label下方。你會看到一個矩形按鈕出現(xiàn)在預(yù)覽窗口中。幾秒鐘后，該按鈕就會出現(xiàn)在Android設(shè)備上。試著輕擊設(shè)備上的按鈕，有什么反應(yīng)嗎？不會的，因為應(yīng)用沒有向Button發(fā)布命令。這是理解AppInventor的第一個要點：添加到設(shè)計器中的組件，必須在塊編輯器中創(chuàng)建相應(yīng)的程序，才能使組件產(chǎn)生某種行為（在設(shè)計器中添加一個組件之后要做這件事）。我們希望當(dāng)點擊這個Button時，它會發(fā)出貓叫聲，但我們希望這個button開起來相隔小貓，而不是一個普通的方塊，因此需要為button設(shè)置圖片：1.首先，需要下載的小貓的圖片，并保存在你的電腦上。從kitty.png下載名為kitty.png的圖片文件（png是與jpg、gif等類似的標(biāo)準(zhǔn)圖像格式，在AppInventor中，所有這些都是有效的文件類型，與常用的標(biāo)準(zhǔn)聲音文件.mpg或.mp3一樣），同時從meow.mp3下載聲音文件（選擇“網(wǎng)頁另存為”來保存聲音文件）。2.在預(yù)覽窗口中點擊該按鈕，屬性框中將顯示其屬性。點擊中部Image屬性（現(xiàn)在顯示的是None）。顯示“UploadFile…”按鈕。3.點擊“UploadFile…”按鈕，再單擊彈出窗口中的“選擇文件”按鈕，瀏覽并選擇之前下載的文件kitty.png，然后單擊確定。4.幾秒鐘之后，kitty.png被列為Button的Image屬性的選項，單擊“OK”。與此同時，ketty.png也出現(xiàn)在設(shè)計器窗口組件列表下面的Media區(qū)域中。在測試設(shè)備中，也將顯示貓咪的圖片，此時按鈕看起來像一只小貓咪。5.注意到貓咪的圖片上顯示文字“TextforButton1”，我們不希望在應(yīng)用中看到這些，因此將Button1的Text屬性改為“寵物小貓”一類的文字，或者干脆刪除所有文字。現(xiàn)在設(shè)計器看起來如圖1-6。圖1-6應(yīng)用中的一個Label和一個顯示為圖像的Button添加貓叫聲我們希望當(dāng)點擊按鈕時，應(yīng)用會發(fā)出貓叫聲。為此需要添加貓叫的聲音文件，并通過設(shè)定Button的行為來實現(xiàn)這一功能：1.如果meow.mp3文件尚未下載，現(xiàn)在點擊鏈接meow.mp3下載；2.在左側(cè)的組件面板中，單擊Media類的標(biāo)題打開Media組件列表。向預(yù)覽窗口中拖放一個Sound組件。無論你把它放在哪里，它都會出現(xiàn)在預(yù)覽窗口的底部，并被標(biāo)記為“Non-visiblecomponents（非可視組件）”。非可視組件在應(yīng)用中發(fā)揮特定作用，但不會顯示在用戶界面中；3.點擊Sound1以顯示其屬性。設(shè)置其Source屬性為meow.mp3。同貓咪圖片一樣，需要從電腦中加載這個聲音文件。加載完成后，Media列表中將出現(xiàn)kitty.png與meow.mp3兩個文件。表1-1中列出了現(xiàn)有的組件。表1-1HelloPurr中的組件組件類型面板中分組命名作用ButtonUserInterfaceButton1點擊發(fā)出貓叫聲LabelUserInterfaceLabel1顯示文本“寵物小貓”SoundMediaSound1播放貓叫聲undefined添加組件行為剛剛添加了Button、Label、以及Sound組件來構(gòu)建我們的第一個應(yīng)用，現(xiàn)在使用塊編輯器來實現(xiàn)點擊Button產(chǎn)生貓叫聲的功能。單擊設(shè)計器右上角的“Blocks”按鈕切換到塊編輯器。在塊編輯器窗口中，可以為組件設(shè)定行為：做什么以及何時做。此處是讓小貓按鈕在用戶點擊它時播放聲音。如果把組件比作菜譜中的原料，那么塊（Blocks）則相當(dāng)于烹飪過程說明。發(fā)出貓叫聲在塊編輯器窗口的左側(cè)，“Blocks”標(biāo)題下面，可以看到許多分屬不同類別的按鈕，其中包括了我們在設(shè)計器中創(chuàng)建的所有組件：Screen1、Button1、Label1以及Sound1，點擊它們就像打開抽屜，將看到一組適用于該組件的可選程序塊（Blocks）。點擊Button1打開抽屜，顯示了與Button有關(guān)的程序塊，可以用它們來設(shè)置Button的行為，最上面的Block就是Button1.Click，如圖1-7所示。圖1-7點擊Button1時顯示適用于Button組件的程序塊（Blacks）單擊標(biāo)有Button1.Click的塊并將其拖到工作區(qū)。注意，Button1.Click這個塊上包含了when。凡是包含when的塊都被稱為事件處理程序，用來定義當(dāng)組件上發(fā)生了某種特定事件時，應(yīng)用該做什么。在本例中，當(dāng)用戶點擊貓咪（其實是按鈕）時發(fā)生了有趣的事情，如圖1-8所示。下面我們將在程序中添加一些塊，來響應(yīng)發(fā)生的事件。圖1-8定義“Button.Click”塊來響應(yīng)用戶的點擊事件在塊編輯器中點擊Sound1打開抽屜，拖出“callSound1.Play”塊（之前將Sound1的Source屬性設(shè)置為meow.pm3）。注意，塊“callSound1.Play”的形狀恰好可以嵌入Button1.Click塊中標(biāo)有“do”的缺口。AppInventor的這種設(shè)置，確保只有特定的塊可以組合在一起，這樣確保了連在一起的塊可以協(xié)同工作。標(biāo)有call的塊用來定義組件的行為。在本例中，這兩個塊結(jié)合在一起，構(gòu)成一個單元，如圖1-9，兩個塊連接到一起時，你會聽到“啪”的一聲。圖1-9點擊按鈕將播放貓叫聲不同于傳統(tǒng)的程序代碼（通常像混亂的“天書”一般），在AppInventor中，Blocks拼出了行為。在本例中，我們等于說，“嘿，AppInventor，當(dāng)有人點擊小貓時，播放貓叫聲?！睖y試：讓我們通過檢查來確保一切正?！慨?dāng)向應(yīng)用中添加了新東西，就要進(jìn)行測試，這非常重要。在測試設(shè)備上點擊該按鈕（或在模擬器上單擊它）。你應(yīng)該聽到貓叫聲。恭喜你，你的第一個應(yīng)用跑起來了！。添加震動效果當(dāng)點擊按鈕時，讓貓咪發(fā)出“Purr”聲和“meow”聲，這里用手機的振動來模擬“Purr”聲。這聽起來很難，其實非常容易，因為播放“meow”聲音組件也可以使設(shè)備產(chǎn)生振動。AppInventor可以幫助你挖掘設(shè)備的核心功能，而無需考慮它們?nèi)绾螌崿F(xiàn)振動。現(xiàn)在只需要向“Button1.click”塊內(nèi)添加第二個行為：1.進(jìn)入塊編輯器，單擊Sound1打開抽屜；2.選擇callSound1.Vibrate塊，將其拖動到whenButton1.Click塊內(nèi)，置于callSound1.Play塊下，恰好與原來的塊吻合；如果不吻合，可嘗試拖動它，使callSound1.Vibrate塊頂部的凹陷恰好與callSound1.Play塊底部的凸起相對。圖1-10Click事件引發(fā)了播放聲音及振動3.注意：在callSound1.Vibrate塊的右下角寫著millisecs（毫秒）。塊上的開放插槽表示需要插入其他塊，來設(shè)定行為的具體方式。本例中，需要設(shè)定callSound1.Vibrate塊的振動時長。以毫秒（千分之一秒）為單位輸入時長，毫秒是多數(shù)編程語言中慣用的時長單位。如果想讓設(shè)備振動半秒鐘，需要輸入數(shù)字塊“500”。打開Math（數(shù)學(xué)）抽屜，其中的第一個塊是“0”，這就是數(shù)字塊，如圖1-11所示。圖1-11打開Math抽屜4.點擊“0”塊，藍(lán)色的“0”塊留在了工作區(qū)，如圖1-12所示。圖11-12選擇一個數(shù)字塊（0為默認(rèn)值）5.點擊數(shù)字0，輸入新值“500”，如圖1-13所示。圖11-13將默認(rèn)值0改為5006.將“500”數(shù)字塊插入callSound1.Vibrate塊右側(cè)的插槽內(nèi)，如圖1-14所示。圖1-14將數(shù)字塊500插入插槽測試：試試吧！點擊設(shè)備上的按鈕，你會感覺到半秒鐘的嘟嘟聲（震動）。搖晃手機現(xiàn)在來添加最后一項，在Android設(shè)備上實現(xiàn)一個很酷的功能：搖晃設(shè)備時發(fā)出貓叫聲。為此要用到AccelerometerSensor（加速度傳感器）組件，它可以檢測到設(shè)備的搖晃或移動。1.在設(shè)計器中，展開組件面板中的傳感器（Sensors）分類，拖出一個AccelerometerSensor（加速度傳感器）組件。不必介意把它放到哪里，像任何非可視化組件一樣，無論你把它放在預(yù)覽窗口的什么地方，它都會落到預(yù)覽窗口底部的“非可視組件”區(qū)域。2.搖晃設(shè)備的事件需要與單擊按鈕事件分開處理。這意味著需要一個新的事件處理程序。進(jìn)入塊編輯器，打開AccelerometerSensor1抽屜，拖出AccelerometerSensor1.Shaking塊。3.像點擊按鈕時播放聲音一樣，將Sound1.Play塊插入AccelerometerSensor1.Shaking插槽，搖動設(shè)備試試看。圖1-15顯示了完整的HelloPurr應(yīng)用中所用的塊。圖1-15HelloPurr應(yīng)用中的塊將應(yīng)用打包以供下載AppInventor是一種云計算工具，這意味著你用谷歌的在線服務(wù)器存儲你的應(yīng)用。所以當(dāng)關(guān)閉AppInventor，再重新返回時，你的應(yīng)用還在；你不必在個人電腦上保存任何東西，像Word文件或音樂文件那樣。此外，如果連接了測試設(shè)備，無需向設(shè)備下載任何文件，就可以輕松地測試應(yīng)用（稱為實時測試）；但問題是，如果設(shè)備與AppInventor斷開連接，那么應(yīng)用將停止運行。由于從未在設(shè)備上安裝過應(yīng)用，因此無從找到應(yīng)用的圖標(biāo)?？梢詫?yīng)用下載并安裝到Android設(shè)備上，以便在不連接計算機時，應(yīng)用也能運行。首先，確保設(shè)備允許從AndroidMarket以外的地方下載應(yīng)用。具體做法是：在設(shè)備上選擇“設(shè)置→安全”，并勾選UnknownSource（未知來源）一項。然后回到AppInventor設(shè)計器中，單擊BuildApp（provideQRcodefor.apk），此時窗口中出現(xiàn)一個進(jìn)度條，這個過程大約需要一分鐘。進(jìn)度消失后，幾秒鐘后，會顯示打包應(yīng)用的QR碼。用條碼掃描軟件獲取QR碼之后，設(shè)備會提示輸入谷歌帳戶的密碼（如果設(shè)備之前登陸過google賬戶，此步驟不會出現(xiàn)）；密碼輸入后，應(yīng)用被下載到設(shè)備上。如果你的設(shè)備中沒有條碼掃描軟件，去GooglePlay搜索并下載安裝一個。下載完成后，會詢問你是否安裝，請單擊安裝。（如果設(shè)備上已經(jīng)安裝了MITAI2Companion，用其中的條碼掃描功能，可以順利實現(xiàn)應(yīng)用的下載安裝。）安裝完成后，設(shè)備上出現(xiàn)HelloPurr應(yīng)用的圖標(biāo)——這就是我們剛剛創(chuàng)建的應(yīng)用，點擊讓它開始運行。（請確保運行的是新安裝的應(yīng)用，而不是之前與AppInventor連接的應(yīng)用。）現(xiàn)在，你可以斷開連接甚至重新啟動設(shè)備，并刪除AppInventor中的所有應(yīng)用，而新應(yīng)用依然存在。了解這一點很重要：打包的應(yīng)用已經(jīng)與AppInventor中的項目分離。你還可以像之前一樣，繼續(xù)在AppInventor中完善你的應(yīng)用，并在測試設(shè)備上使用AI伴侶做實時測試，但這些都不會改變已經(jīng)安裝在設(shè)備上的應(yīng)用。如果在AppInventor中對應(yīng)用進(jìn)行了修改，那么修改結(jié)果必須重新打包，并下載安裝新版本來替換設(shè)備上的原有版本。馬上用Android設(shè)備下載安裝HelloPurr應(yīng)用吧，這樣，你就可以與家人和朋友一起分享了！分享應(yīng)用有兩種方式可以分享應(yīng)用：第一，分享可運行的應(yīng)用。在AppInventor項目中單擊BuildApp（save.apktomycomputer），此操作將擴展名為apk的文件保存到電腦。將apk文件上傳到web上，讓其他人可以下載并安裝。需要強調(diào)的是，設(shè)備的安全設(shè)置中“未知來源”一項必須選中，才能安裝來源于AndroidMarket之外的應(yīng)用。第二，與其它AppInventor開發(fā)者共享應(yīng)用的代碼塊：點擊ProjectMyProjects，選中要共享的應(yīng)用（本例中是HelloPurr），選擇project→Exportselectedproject(.aia)tomycomputer。此操作將擴展名為aia的文件（HelloPurr.aia）保存到電腦上默認(rèn)的下載文件夾中?？梢杂秒娮余]件把文件發(fā)給其他人，他們打開AppInventor，選擇Project→Importproject，并選擇.aia文件。這樣，使用者獲得了該應(yīng)用的完整備份，對此備份的任何修改，都不會影響原有版本。共享應(yīng)用的過程非常簡單，更多有趣的作品在網(wǎng)站的分享社區(qū)中。改進(jìn)現(xiàn)在，應(yīng)用已經(jīng)完成，并可以隨時運行它（或許還能下載與人分享），也許還會感到什么地方有些欠缺。來看看下面的問題，并思考如何解決它們。隨著學(xué)習(xí)的進(jìn)展你會發(fā)現(xiàn)，通常是先創(chuàng)建一個應(yīng)用，之后設(shè)法改進(jìn)、完善它，并重新回到程序中來實現(xiàn)你的新想法。不必?fù)?dān)心，這很好，這正是一名優(yōu)秀開發(fā)者的必經(jīng)之路！當(dāng)搖晃設(shè)備時，貓的叫聲聽起來有點兒奇怪，好像有回聲。這是因為在1秒鐘內(nèi)，加速度傳感器多次觸發(fā)搖動事件，所以貓叫聲是重疊的。你會發(fā)現(xiàn)Sound組件有一個屬性Minimuminterval（最小間隔），它決定了兩次聲音播放之間的時間間隔。當(dāng)前設(shè)置為400毫秒（約半秒鐘），這個間隔小于單次貓叫的持續(xù)時間（500毫秒）。通過改變播放的最小間隔，可以改變聲音的重疊。如果你帶著安裝了應(yīng)用的手機到處走動，每當(dāng)你突然移動時，設(shè)備就會發(fā)出貓叫聲，這可能讓你覺得尷尬。通常Android應(yīng)用會保持在運行狀態(tài)，即使你不去管它們，應(yīng)用程序與加速度傳感器之間的通信也不會間斷，因而貓叫聲也會相繼傳來。要想真正退出程序，需要呼出HelloPurr應(yīng)用并按下設(shè)備上的菜單按鈕，會呼出兩個選項，其中stopthisapplication用來停止并完全關(guān)閉應(yīng)用。小結(jié)以下是本章中涵蓋的內(nèi)容：創(chuàng)建應(yīng)用的過程：在組件設(shè)計器中選擇組件，并在塊編輯器中設(shè)定它們的行為——做什么及何時做；有些組件是可見的，有些則不可見。可見組件會出現(xiàn)在應(yīng)用的用戶界面中；不可見組件執(zhí)行像播放聲音這類的事情；通過在塊編輯器中組裝“塊”來定義組件的行為。先拖出一個像whenButton1.doClick這樣的事件處理程序，然后將callSound.Play這樣的命令塊嵌入其中。這樣，當(dāng)用戶點擊該按鈕時，塊Button1.Click中的所有塊（命令）都將被執(zhí)行；有些塊（命令）需要附加特定信息才能起作用。例如震動就必須設(shè)定振動的毫秒數(shù)。這些值被稱為參數(shù)。數(shù)字塊用來表示數(shù)字。你可以將這些數(shù)字塊插入到需要參數(shù)的命令塊中。AppInventor提供傳感器組件，加速度傳感器(AccelerometerSensor)可以檢測到設(shè)備的移動。你可以將創(chuàng)建完成的應(yīng)用打包并下載到手機上，它們將獨立于AppInventor而運行。擴展閱讀MIT麻省理工學(xué)院(MassachusettsInstituteofTechnology)MIT成立于1861年，校園坐落與美國馬薩諸塞州的劍橋市(Cambridge),是一所私立的研究型大學(xué)。1934年入選美國大學(xué)學(xué)會(AAU:AssociationofAmericanUniversities)，是全球最負(fù)盛名的學(xué)府之一。MIT校訓(xùn)MindandHands(手腦并用)MIT的使命在科學(xué)、技術(shù)及其他學(xué)術(shù)領(lǐng)域中，推動知識的進(jìn)步，培養(yǎng)教育學(xué)生，力求在21世紀(jì)更好地服務(wù)于國家及世界。MIT致力于知識的形成、傳播以及保護(hù)，并利用這些知識，與全人類共同面對未來世界的巨大挑戰(zhàn)。MIT利用各種各樣的校園社團(tuán)，來激發(fā)學(xué)生的智慧，并提供相應(yīng)的支持，將嚴(yán)謹(jǐn)?shù)闹螌W(xué)態(tài)度與積極地探索精神相結(jié)合，并將其融入到學(xué)生的培養(yǎng)教育之中。力爭發(fā)展每位社團(tuán)成員的能力與熱情，使他們著眼于整個人類的進(jìn)步，并進(jìn)行富有遠(yuǎn)見、創(chuàng)造性及富有成效地工作。EECS電子工程與計算機科學(xué)系(ElectricalEngineeringandComputerScienceDepartment)EECS格言EECS無處不在(EECSiseverywhere)。我們兼具科學(xué)的嚴(yán)謹(jǐn)、工程的動力以及發(fā)現(xiàn)的震撼。我們的學(xué)生改變著世界。IEEE電氣電子工程師學(xué)會(InstituteofElectricalandElectronicsEngineers),創(chuàng)立于1963年，是世界上最大的國際性專業(yè)技術(shù)組織之一，擁有來自175個國家的36萬名會員。其定位于科學(xué)和教育，工作方式有科學(xué)期刊、學(xué)術(shù)會議、工業(yè)標(biāo)準(zhǔn)的開發(fā)、課程授權(quán)等。常見的IEEE標(biāo)準(zhǔn)如快速以太網(wǎng)標(biāo)準(zhǔn)：IEEE802.3u。ACM計算機協(xié)會(AssociationofComputingMachinery)，創(chuàng)立于1947年，是世界性的計算機從業(yè)員專業(yè)組織，面向研究與教育，工作方式為專業(yè)期刊、興趣小組及設(shè)立獎項。主要期刊為《計算機學(xué)會通訊(CommunicationsoftheACM)》,在全球有35個興趣小組，設(shè)立了8個獎項，其中的圖靈獎相當(dāng)于計算機界的諾貝爾獎。OER開放教育資源(OpenEducationalResources):將文檔、媒體等實用的教學(xué)資源向以教學(xué)、評估及研究為目的使用者免費開放。這是教育資源開發(fā)的基本特征，它源于人們試圖抑制知識商品化的愿望。MIT作為開放運動的先鋒，開放了許多優(yōu)秀的\h視頻課程，英語好的同學(xué)真是有福了。譯者提示本章非常重要，一個簡單的例子，貫穿了一個完整的開發(fā)過程，從界面設(shè)計到代碼編制，從開發(fā)環(huán)境到測試設(shè)備，從普通媒體（圖片）到手機特有的搖晃、震動。對于初學(xué)者，這是一個幸福的開端資源下載\hkitty.png\hmeow.mp3\hHelloPurr.aia\hAI伴侶

第2章油漆桶本章介紹Canvas組件，用它來生成簡單的二維（2D）圖形，目標(biāo)是創(chuàng)建一個PaintPot（油漆桶）應(yīng)用，讓用戶在手機屏幕上繪制圖畫，并讓用戶用手機給自己拍照，然后在自己的照片上繪圖?；仡櫄v史，早在20世紀(jì)70年代，PaintPot是最早運行在個人電腦上的應(yīng)用之一，目的是為了證明個人電腦的潛力。那時候，開發(fā)這樣一款簡單的繪圖應(yīng)用是一項極其復(fù)雜的工作，而且繪圖效果也略顯粗糙。但現(xiàn)在，使用AppInventor，任何人都可以快速地創(chuàng)建一個有趣的繪圖應(yīng)用，這也是創(chuàng)建2D游戲的起點。如圖2-1，油漆桶應(yīng)用將實現(xiàn)下列目標(biāo)：用手指點取顏色并繪圖；用手指在手機屏幕上畫線；用手指觸碰手機屏幕畫圓點；點擊按鈕來擦凈屏幕；點擊按鈕來改變繪制圓點的大?。挥孟鄼C拍攝照片，并在照片上畫圖。圖2-1油漆桶應(yīng)用學(xué)習(xí)內(nèi)容本章涵蓋了以下內(nèi)容：使用Canvas組件來繪制圖畫；處理屏幕上的觸摸及拖拽事件；使用arrangement組件來控制屏幕的外觀；使用帶有參數(shù)的事件處理程序；定義變量，來保存某些狀態(tài)，如用戶繪制的圓點的大小。準(zhǔn)備開始首先檢查測試用的Android設(shè)備是否已經(jīng)為使用AppInventor做好了準(zhǔn)備：Android設(shè)備中已經(jīng)安裝了“AI伴侶”；手機的WiFi連接已經(jīng)打開；再訪問\hAppInventor網(wǎng)站。新建項目“PaintPot”，點擊“Connect->AICompanion”，并按照提示操作，連接測試設(shè)備。在正式開始之前，在組件設(shè)計器右側(cè)的“屬性”面板中，將“Screen1”的“Title”屬性修改為“油漆桶”。在測試設(shè)備上可以立即看到這一改變：應(yīng)用的標(biāo)題欄將顯示“油漆桶”。這樣做是否會混淆了項目名稱與屏幕標(biāo)題呢(在英文版書中，將Title改為“PaintPot”，與項目同名，因此才有此疑問，對中文讀者來說不存在這個疑問。——譯者注)？別擔(dān)心！在AppInventor中有三個非常重要名稱：項目名稱：同時也是應(yīng)用發(fā)布時所使用的名稱。提示：想修改項目名稱，可以點擊Project->Saveprojectas，可以將原有項目賦予新的名稱，同時原有項目依然得以保留；組件名稱：一般的組件名稱都可以修改，但Screen1例外，在當(dāng)前版本中不能修改它的名稱；屏幕標(biāo)題：出現(xiàn)在設(shè)備的標(biāo)題欄中，是Screen組件的Title屬性，默認(rèn)值是Screen1，如第一章HelloPurr中所見，可以隨意修改它，如我們剛才將其改為“油漆桶”。設(shè)計組件創(chuàng)建“油漆桶”應(yīng)用需要以下組件：三個Button組件：用來選擇畫筆顏色：紅、藍(lán)或綠，放在HorizontalArrangement組件中；一個Button組件用來充當(dāng)橡皮；另外兩個Button組件用來改變畫筆的大小；一個Canvas組件，充當(dāng)畫布。Canvas具有BackgroundImage屬性，我們將其設(shè)置為第一章HelloPurr中的kitty.png，稍后還可以將背景圖片設(shè)置為用戶拍攝的照片。創(chuàng)建顏色按鈕首先按照以下提示創(chuàng)建三個顏色按鈕：1.拖一個Button組件到預(yù)覽窗口，設(shè)置其Text屬性為“紅”，BackgroundColor屬性設(shè)為紅色；2.在組件列表中選中Button1（可能已經(jīng)被選中），點擊Rename按鈕將組件名稱改為RedButton。注意組件名稱中不允許有空格，因此通常將組件名稱中每個單詞的首字母大寫。3.同樣，創(chuàng)建另外兩個按鈕，分別命名為BlueButton和GreenButton，將它們垂直地放在RedButton下方。對照圖2-2，檢查一下你的操作結(jié)果。圖2-2創(chuàng)建了3個按鈕的預(yù)覽窗口注意：在項目中，建議為組建起一個有意義的名稱，而不是像第一章那樣采用默認(rèn)名稱。有意義的名稱增加了程序的可讀性，尤其是在切換到塊編輯器時，將有助于區(qū)分不同的組件。本書中，采用慣用的駱駝命名法（如RedButton），即多單詞無空格的首字母大寫命名方式。測試：如果你還沒有點擊“Connect”來連接測試設(shè)備，那么做好連接，然后檢查一下應(yīng)用在設(shè)備（如果已經(jīng)連接）上的表現(xiàn)。使用Arrangement組件改善布局現(xiàn)在三個按鈕排成一列縱隊，我們希望它們能排成一行，如圖2-3所示，使用HorizontalArrangement組件來實現(xiàn)組件的水平排列：1.在組件面板的Layout類中拖出HorizontalArrangement組件，放在按鈕下方；2.在屬性面板中，設(shè)置HorizontalArrangement的width屬性為“FillParent”（充滿父容器），以便在水平方向上占滿整個屏幕；3.將三個按鈕移動到HorizontalArrangement中。注意，當(dāng)你拖拽按鈕時，會看到一條藍(lán)色豎線，提示按鈕將會被放置在什么地方。圖2-3在水平布局組件內(nèi)的三個按鈕此時查看組件列表，你會發(fā)現(xiàn)三個按鈕縮進(jìn)排列在HorizontalArrangement項下，以顯示它們現(xiàn)在是次一級的組件。同時注意到所有組件都縮進(jìn)排在Screen1項下。測試：在測試設(shè)備的屏幕上，你會看到三個按鈕排列成一行，盡管看起來與預(yù)覽窗口中略有不同。如，在預(yù)覽窗口中可見的HorizontalArrangement周圍的輪廓線，在測試設(shè)備上則不可見。通常采用布局組件來創(chuàng)建簡單的垂直、水平或表格布局，也可以通過逐級插入（或嵌套）布局組件來創(chuàng)建更加復(fù)雜的布局。添加Canvas（畫布）Canvas像一塊畫布，用戶可以在上面繪畫（畫圓、畫等）。添加一個Canvas，并用第一章中的kitty.png作它的背景圖片（設(shè)置BackgroundImage屬性），具體步驟如下：1.打開組件面板中的DrawingandAmination（繪畫與動畫）類，將Canvas組件拖到預(yù)覽窗口中，改名為DrawingCanvas，Width設(shè)為“Fillparent”，Height設(shè)為300pixels；2.如果你已經(jīng)完成了第一章的課程，那么文件kitty.png已經(jīng)下載；如果沒有，請在這里下載kitty.png。3.將DrawingCanvas的BackgroundImage設(shè)置為kitty.png：在設(shè)計器的屬性面板中，BackgroundImage的默認(rèn)值為None，點擊None及UploadFile來添加kitty.png文件；4.將DrawingCanvas的PaintColor屬性設(shè)置為red，以便當(dāng)用戶剛啟動應(yīng)用但尚未點擊顏色按鈕時，畫筆為紅色。對照圖2-4檢查一下你的操作。圖2-4背景圖片設(shè)為kitty.png的DrawingCanvas組件設(shè)置底部按鈕及照相機組件1.從組件面板中拖出第二個HorizontalArrangement，放在canvas下方，再拖兩個Button并置于屏幕底部的HorizontalArrangement中；將第一個按鈕改名為TakePictureButton，Text屬性設(shè)為“拍照”；第二個按鈕改名為WipeButton，Text屬性設(shè)為“清除”；2.再拖兩個Button組件到HorizontalArrangement中，放在“清除”按鈕后面；3.兩個Button分別命名為BigButton、SmallButton，Text屬性分別設(shè)為“大圓”、“小圓”；4.從組件的Media類中拖出一個Camera組件放在預(yù)覽窗口中，它將落在非可視組件區(qū)。到此為止，應(yīng)用外觀已經(jīng)設(shè)置完成，如圖2-5所示。圖2-5油漆桶應(yīng)用的完整用戶界面測試：在設(shè)備上檢查一下應(yīng)用，貓的圖片是否在頂部的一行按鈕的下方？底部的按鈕是否正常顯示？為組建添加行為下一步將定義組件的行為。編寫一個繪畫程序的難度似乎是難以想象的，但無疑AppInventor已經(jīng)承擔(dān)了大部分繁重的工作：這里有易于使用的塊語言，不但可以處理用戶的觸摸及拖拽事件，也可以實現(xiàn)繪畫及拍照功能。Canvas組件具有Touched及Dragged事件，你可以針對DrawingCanvas.Touched（觸碰）事件編程，并調(diào)用DrawingCanvas.DrawCircle（畫圓）程序；也可以對DrawingCanvas.Dragged（拖拽）事件編程來調(diào)用DrawingCanvas.DrawLine（畫線）程序。然后對按鈕編程，來設(shè)置DrawingCanvas.PaintColor（畫筆顏色）屬性、清除DrawingCanvas，以及將DrawingCanvas的背景圖片修改為照相機拍攝的圖片。添加觸摸事件，繪制一個圓點首先設(shè)置觸碰行為：當(dāng)用戶觸碰DrawingCanvas時，在接觸點繪制一個圓點：1.在塊編輯器中，打開DrawingCanvas抽屜拖出DrawingCanvas.Touched塊，該塊有三個參數(shù)x、y及touchedSprite，如圖2-6所示。這些參數(shù)提供了接觸點的位置信息；圖2-6帶有接觸點位置信息的Toughed事件提示：在第一章HelloPurr應(yīng)用中已經(jīng)熟悉了Button.Click事件，但對Canvas事件還很陌生。Button.Click事件的發(fā)生很簡單，不附帶任何其他信息；但有些事件則不然，它們附帶了與事件有關(guān)的“參數(shù)”信息。DrawingCanvas.Touched事件中的x、y代表接觸點在DrawingCanvas中的坐標(biāo)，而touchedSprite代表接觸點所碰到的DrawingCanvas中的對象（在AppInventor中稱作sprite—精靈），但在第三章之前我們不會用到它。我們將利用接觸點的xy坐標(biāo)來繪制圓點。2.從DrawingCanvas抽屜中拖出DrawingCanvas.DrawCircle命令塊，放在DrawingCanvas.Touched事件處理程序中，如圖2-7所示；圖2-7用戶觸摸畫布時，應(yīng)用繪制一個圓點在DrawingCanvas.DrawCircle塊的右側(cè)有三個插槽，需要填入三個參數(shù)：x、y、r。其中x、y用于指定繪制圓形的位置，r用于指定圓的半徑。在屏幕左下角帶感嘆號的黃色警告顯示數(shù)字“1”，表示需要填滿這些插槽。從圖中看到，有兩組xy，這里要區(qū)分清楚：DrawingCanvas.Touched事件中的xy表示接觸點位置（已知）；而DrawingCanvas.DrawCircle命令塊的xy插槽，用于設(shè)定繪制圓形的位置（待定）。我們恰好要在用戶的接觸點繪制圓形，因此DrawingCanvas.Touched事件中的xy值，可以作為DrawingCanvas.DrawCircle的x、y參數(shù)，插入到插槽中。提示：可以從“when”塊中提取事件的參數(shù)值，將鼠標(biāo)懸停在參數(shù)上，將呼出“get”及“set”塊?？梢詫ⅰ癵etx”塊拖出并插到x插槽中，作為DrawCircle命令的x值。如圖2-8所示。圖2-8讀取事件參數(shù)：從DrawingCanvas.Touched事件中拖出“getx”塊3.將鼠標(biāo)懸停在x、y參數(shù)上可以喚出“get”塊，將“get”塊插入到DrawingCanvas.DrawCircle的插槽中，如圖2-8、2-9所示；圖2-9已經(jīng)設(shè)定了圓的位置（x,y），尚未指定圓的大小4.下面來設(shè)定圓的半徑r。長度的單位是pixel（像素），是屏幕上能夠繪制的最小的點。設(shè)r=5：點擊屏幕的空白區(qū)域，輸入5然后回車（自動創(chuàng)建數(shù)字塊“5”）并將其插入插槽r中。再看屏幕左下角的黃色三角形，數(shù)字由1變?yōu)?，因為所有插槽都被填滿了。圖2-10顯示了DrawingCanvas.Touched事件處理程序最終的樣子。圖2-10當(dāng)用戶觸碰DrawingCanvas時，將在(x,y)點繪制一個半徑為5的圓形提示：在塊編輯器中輸入5然后回車，這種操作叫做輸入塊（typeblocking）。塊編輯器會根據(jù)你輸入的字符，顯示與該字符相匹配的一系列塊；如果輸入的是數(shù)字，那么將創(chuàng)建一個數(shù)字塊。測試：看看測試設(shè)備上都有什么。觸碰DrawingCanvas，手指碰過的地方會留下一個圓點。如果在設(shè)計器中將DrawingCanvas.PaintColor屬性設(shè)置為紅色，那么圓點也是紅色（否則應(yīng)該是默認(rèn)的黑色）。添加畫線的拖拽事件下面添加拖拽事件處理程序，先看一下觸碰（Toughed）事件與拖拽（Dragged）事件的區(qū)別：觸碰事件：手指在DrawingCanvas（畫布）上放下再抬起，其間手指沒有移動。拖拽事件：手指在DrawingCanvas（畫布）上放下，手指與屏幕保持接觸并移動。在繪圖程序中，手指在屏幕上拖動，沿著手指移動的路徑，將繪制出一條巨大的曲線，因為這條曲線實際上由數(shù)百個微小的線段構(gòu)成：手指每次微小的移動，都將繪制一個微小的線段。1.從DrawingCanvas抽屜中拖出DrawingCanvas.Dragged事件處理程序塊，如圖2-11所示；DrawingCanvas.Dragged事件攜帶了以下參數(shù)：StartX、StartY：手指開始拖動時所在的位置（整個曲線的起點）；currentX、currentY：手指的當(dāng)前位置（微小線段的終點）；prevX、prevY：手指的上一個位置（微小線段的起點）；draggedSprite：布爾值，如果用戶直接拖動一個圖片，則其值為真。本章不會用到這個參數(shù)。圖2-11比起Toughed事件，Dragged事件攜帶了更多參數(shù)2.從DrawingCanvas抽屜中拖出DrawingCanvas.DrawLine塊，插入DrawingCanvas.Dragged塊中，如圖2-12所示。圖2-12添加畫線功能DrawingCanvas.DrawLine塊有四個參數(shù)，兩點確定一線：設(shè)（X1，Y1）為起點，（X2，Y2）為終點。你能確定每個參數(shù)中需要插入什么值嗎？記住，當(dāng)手指在DrawingCanvas上拖動時，拖動事件將被調(diào)用很多次：在應(yīng)用中，手指的每次移動都會繪制出一個微小線段，從（Prevx,prevy）到（currentX,currentY）?，F(xiàn)在把它們填入DrawingCanvas.DrawLine塊。3.拖出“get”塊來充當(dāng)畫線的參數(shù)。將getprevX與getprevY分別插入到x1和y1插槽；而getcurrentX與getcurrentY插入到x2和y2插槽，如圖2-13所示。圖2-13用戶在屏幕上拖動手指，應(yīng)用就在前一位置與當(dāng)前位置之間畫一條微小線段測試：在設(shè)備上測試一下剛剛設(shè)定的行為：在屏幕上隨意拖動手指，畫出線段及曲線；觸碰屏幕畫出一個圓點。添加按鈕事件處理程序應(yīng)用已經(jīng)實現(xiàn)了畫線功能，但現(xiàn)在只能畫紅線。下面添加顏色按鈕的事件處理程序，用戶可以改變畫筆的顏色；同樣設(shè)置清除按鈕WipeButton，以便用戶可以清除畫面并重新開始。在塊編輯器中：1.展開左側(cè)塊的（Blocks）列表；2.打開RedButton抽屜，拖出RedButton.Click塊；3.打開DrawingCanvas抽屜。拖出setDrawingCanvas.PaintColor塊（可能需要滾動塊的列表以便在抽屜里找到它），并把它放在RedButton.Click塊“do”的位置；4.打開Colors抽屜，拖出紅色塊，將其插入setDrawingCanvas.PaintColor塊的插槽；5.重復(fù)步驟2-4，設(shè)置藍(lán)色和綠色按鈕；6.最后設(shè)置WipeButton按鈕。從WipeButton抽屜中拖出WipeButton.Click塊。再從DrawingCanvas抽屜里拖出DrawingCanvas.Clear塊，并將其放在WipeButton.Click塊中。確認(rèn)所有塊顯示如圖2-14所示。圖2-14單擊顏色按鈕改變DrawingCanvas的畫筆顏色；單擊清除按鈕清空屏幕讓用戶拍照片AppInventor應(yīng)用可以與Android設(shè)備的強大功能進(jìn)行交互，包括相機功能。為了增加應(yīng)用的趣味性，用戶可以將繪圖背景設(shè)置為他們用相機拍攝的照片。1.Camera組件有兩個關(guān)鍵的塊：Camera.TakePicture塊用來啟動設(shè)備上的拍照程序；拍照完成將觸發(fā)Camera.AfterPicture事件。在Camera.AfterPicture事件處理程序中，可以將剛剛拍攝的照片設(shè)置為DrawingCanvas.BackgroundImage。打開TakePictureButton抽屜并拖出TakePictureButton.Click事件處理程序；2.從Camera1抽屜拖出Camera1.TakePicture放在TakePictureButton.Click事件處理程序中；3.從Camera1的抽屜中拖出Camera1.AfterPicture事件處理程序；4.從DrawingCanvas抽屜拖出setDrawingCanvas.BackgroundImage塊放在Camera1.AfterPicture事件處理程序中；5.Camera1.AfterPicture事件有一個名為image的參數(shù)，代表剛剛拍攝的照片，將從Camera1.AfterPicture塊中得到的getimage塊插入DrawingCanvas.BackgroundImage塊。所有的塊如圖2-15所示。圖2-15拍完的照片被設(shè)置為DrawingCanvas的背景圖片測試：在設(shè)備上點擊“拍照”按鈕并拍攝照片，貓的圖片變成了你拍的照片。你可以在自己的照片上進(jìn)行繪畫。（用Wolber教授的照片繪畫是學(xué)生們的一大樂事，如圖2-16。）（Wolber教授是本書的作者之一。）改變畫筆大小圖2-16帶有Wolber教授涂鴉照片的PaintPot應(yīng)用在DrawingCanvas上畫圓點，其大小由DrawingCanvas.DrawCircle塊中參數(shù)r決定。改變r值可以改變圓點的大小。試試看將5改為10，然后在測試設(shè)備上查看結(jié)果。另一個問題是，無論開發(fā)者如何設(shè)置參數(shù)r，用戶都只能用這個固定的尺寸。如何讓用戶來改變圓點的大小呢？為此我們來修改程序：當(dāng)用戶點擊“大圓”按鈕時，圓點半徑設(shè)為8，當(dāng)點擊“小圓”時半徑設(shè)為2。我們要用不同的半徑畫圓，但應(yīng)用怎么知道我們要用哪個值呢？必須通知應(yīng)用我們選定的值，而應(yīng)用必須以某種方式記?。ɑ虮４妫┻@個值，這樣才能在需要的時候使用它。之前我們所使用的值，要么設(shè)定為屬性（如畫筆顏色），要么用固定的數(shù)字塊（如畫筆大?。F(xiàn)在應(yīng)用需要記住一些屬性之外的、不是固定不變的東西，這就需要定義一個變量。變量是一個存儲單元，可以把它想象成一個容器，里面存儲著可變的數(shù)據(jù)，如畫筆的大?。ㄓ嘘P(guān)變量的詳細(xì)信息，請參見AppInventor指南第16章）。讓我們先來定義一個變量dotSize：1.在塊編輯器中，從Variables（變量）抽屜中拖出一個initializeglobalnameto塊。將“name”改為“dotSize”；2.請注意，initializeglobaldotSizeto塊有一個開放的插槽，可以在這里設(shè)定變量的初始值，或者說是應(yīng)用啟動時的默認(rèn)值（編程術(shù)語稱為“初始化變量”）。在本應(yīng)用中，用數(shù)字塊2來初始化變量dotSize，（創(chuàng)建塊“2”的方法有兩種：在空白區(qū)直接輸入“2”然后回車；或從Math抽屜中拖出“0”塊，將0改為2。）將其插到initializeglobaldotSizeto塊的插槽中，如圖2-17所示。圖2-17將dotSize變量的初始值設(shè)為2使用變量下一步，我們要修改DrawingCanvas.Touched事件處理程序，將其中DrawingCanvas.DrawCircle塊的參數(shù)r的固定值用變量dotSize來代替。（我們先將dotSize的初始值設(shè)定為“固定”的2，但稍后我們將改變dotSize的值，并同時改變畫筆的大小。）1.從initializeglobaldotSizeto塊中拖出一個getglobaldotSize塊，用它來提供變量的值；2.轉(zhuǎn)到DrawingCanvas.Touched事件處理程序，將數(shù)字塊“5”拖出插槽并扔進(jìn)垃圾桶，用getglobaldotSize塊來替換（見圖2-18）。當(dāng)用戶觸摸到DrawingCanvas時，應(yīng)用將根據(jù)dotSize的大小來確定圓點的半徑。圖2-18畫筆的大小取決于變量dotSize中保存的值修改變量值現(xiàn)在變量魔法登場，變量dotSize允許用戶選擇畫筆的大小，而事件處理程序也將以dotSize為半徑來畫圓。通過設(shè)計SmallButton.Click和BigButton.Click的事件處理程序來實現(xiàn)此功能：1.從SmallButton抽屜中拖出SmallButton.Click事件處理程序；再從Variables抽屜中拖出一個“set”塊，下拉選擇globaldotSize，并將其插入SmallButton.Click塊；最后，創(chuàng)建一個數(shù)字塊“2”，并將其插入setglobaldotSize塊。2.創(chuàng)建另一個類似的BigButton.Click事件處理程序，設(shè)置畫筆大小為8。這兩個事件處理程序顯示在塊編輯器中，如圖2-19所示。圖2-19點擊SmallButton及BigButton按鈕改變畫筆大小，之后將以該尺寸繪制圖形提示：get/setglobaldotSize之中的“global”（全局）指的是該變量適用于程序中所有的事件處理程序（全局）。與global相對的是“l(fā)ocal”（局部）變量，適用于程序的特定部分；AppInventor2中添加了此項功能，第12章首次使用。測試：嘗試單擊“大圓”、“小圓”按鈕，然后在DrawingCanvas上觸碰，所繪圓點的大小是否不同？畫線呢？線沒有變化，因為只有DrawingCanvas.DrawCircle塊使用了變量dotSize。在此基礎(chǔ)上，考慮修改塊的設(shè)置，以使畫筆的大小，對畫線也同樣有效。注意：DrawingCanvas有一個“LineWidth（線寬）”的屬性。油漆桶的完整應(yīng)用圖2-20中顯示了完整的油漆桶應(yīng)用。圖2-20油漆桶應(yīng)用中塊的最終設(shè)置改進(jìn)可以考慮做以下改進(jìn)：1.用戶界面中沒有顯示當(dāng)前的狀態(tài)信息（如畫筆大小或顏色），只能通過畫圖來得知這些信息。修改應(yīng)用，向用戶顯示當(dāng)前的狀態(tài)信息；2.讓用戶在TextBox組件內(nèi)輸入畫筆的尺寸，這樣一來，除了2和8之外，他還可以將其更改為其他數(shù)值。有關(guān)TextBox組件的詳細(xì)信息，請參閱第4章。小結(jié)本章涵蓋了如下內(nèi)容：DrawingCanvas組件：用于在其中繪畫，也可以感知觸摸及拖動事件，可以利用這些事件來實現(xiàn)繪圖功能；使用布局組件（HorizontalAarrangement），使多個組件的布局條理化，而不是摞在一起；有些事件處理程序附帶了與事件有關(guān)的信息，例如Toughed事件中附帶了觸摸點的坐標(biāo)，這些信息用參數(shù)來表示。在使用帶參數(shù)的事件處理程序時，AppInventor以塊的方式生成“get”及“set”項，來獲取這些參數(shù)的引用；創(chuàng)建變量可以使用Variables抽屜中的initializeglobalnameto塊，變量可以讓應(yīng)用記住那些沒有被存儲成組件屬性的信息，如畫筆的大小；對于定義的每一個變量，AppInventor提供了變量的讀寫方法：getglobalvariable用來獲取變量的值（讀），而setglobalvariable用來設(shè)置/修改變量的值（寫）?？梢詮淖兞砍跏蓟瘔K的變量名中拖出“get”或“set”塊。本章介紹了DrawingCanvas組件如何應(yīng)用于繪畫程序。也可以用它來編寫某些2D游戲中的動畫，更多信息請參見第5章“瓢蟲快跑”游戲，以及第17章中關(guān)于動畫的討論。畫筆應(yīng)用在譯者用過的最早的windows3.0中就有畫筆的應(yīng)用，直到現(xiàn)在這個應(yīng)用都是windows不可缺少的組成部分，雖然我們不常用它。圖2.1windows中的畫筆應(yīng)用開發(fā)及測試如果無法訪問\hAppinventor網(wǎng)站，可以嘗試譯者提供的\h替代版本，或點擊頁面右上角的“開發(fā)體驗”按鈕。圖2.2用手機掃描下載并安裝"AI伴侶"駱駝命名法這是一個編程術(shù)語，指的是變量的命名規(guī)則：由于變量名中不允許出現(xiàn)空格，因此當(dāng)需要用多個英文單詞為變量命名時，通過每個單詞的首字母大寫來區(qū)分不同的單詞，如本例中的紅色按鈕命名為RedButton，其中第一個單詞的首字母也可以小寫，即redButton。中英文對照canvas:畫布paint:油漆pot:罐,容器horizontal:水平的arrangement:布置background:背景image:圖像touch:觸摸drag:拖拽draw:繪畫circle:圓line:線color:顏色sprite:精靈get:取得set:設(shè)置type:打字block:塊start:開始current:現(xiàn)在prev:前一個button:按鈕wipe:擦去camera:相機takepicture:照相after:在...之后dot:點size:尺寸initialize:初始化global:全局的click:點擊big:大的small:小的width:寬度

第3章打地鼠作者介紹EllenSpertus本書的共同作者之一，美國加州奧克蘭市米爾斯大學(xué)的計算機科學(xué)教授，同時也是谷歌公司的資深科學(xué)家。她先后在MIT獲得了計算機科學(xué)與工程學(xué)士學(xué)位、電子工程與計算機科學(xué)碩士及博士學(xué)位，并利用暑假的空閑時間為微軟公司工作。她曾撰文探討技術(shù)及社會問題，而且經(jīng)常將兩者相結(jié)合。1993年紐約時報曾以《改變計算機領(lǐng)域面貌的女性》為題介紹Spertus，并在后續(xù)的文章中稱其為“最性感的活著的極客”。2009年Spertus加入谷歌的AppInventorforAndroid團(tuán)隊，并參與撰寫了本書的部分章節(jié)。本章將創(chuàng)建一個“打地鼠”的游戲，游戲靈感來自一款經(jīng)典的街機游戲Whac-A-Mole，其中的小動物會突然從洞中冒出，玩家則用木槌擊打它們，擊中得分?！按虻厥蟆钡膭?chuàng)作者是一名AppInventor團(tuán)隊的成員，與其說她是為了測試sprite組件的功能（她做到了），不如說是她自己喜歡玩游戲。圖3-1打地鼠游戲的用戶界面當(dāng)EllenSpertus加入Google公司的AppInventor團(tuán)隊時，她希望AppInventor也可以用于游戲的開發(fā)，因此她自告奮勇地承擔(dān)起sprites的實現(xiàn)任務(wù)。sprite原本用來表示神話中的角色，如仙女、妖精等，到20世紀(jì)70年代開始出現(xiàn)在計算機界，用來代表那些能夠在電腦屏幕上移動的圖像（在電子游戲中）。Ellen第一次使用sprite是在20世紀(jì)80年代早期，她曾經(jīng)參加電腦訓(xùn)練營并使用TI99/4編程。她在sprites以及“打地鼠”游戲上所做的努力，受到了雙重懷舊情緒的驅(qū)使——計算機以及游戲——她童年時代的最愛?？梢圆榭碅ndroid版“打地鼠”游戲的\h視頻教程?！敬私坛逃蒞olber教授基于上一個版本的AppInventor錄制的，但同樣可以有助于理解開發(fā)過程?！繉W(xué)習(xí)目標(biāo)如圖3-1所示的“打