本章將創建一個“向導”應用，帶給你一次巴黎的夢幻之旅。而你的朋友，雖然不能與你同行，也能借此做一次虛擬的巴黎之旅。創建一個完整的地圖應用看似復雜，不過App Inventor提供了ActivityStarter組件，可以為每個選定的虛擬位置打開對應的谷歌地圖。創建過程分為兩步，首先通過點選菜單打開埃菲爾鐵塔、盧浮宮以及巴黎圣母院的地圖；然后修改有關參數，使應用同時適用于衛星視圖及普通地圖視圖。  ## **學習要點** 本章介紹以下App Inventor組件及概念： * ActivityStarter組件：可以在當前應用中打開其他Android應用。本章用它來打開帶有多個參數的谷歌地圖； * ListPicker組件：用戶可以從地點列表中進行選擇。 ## **設計組件** 首先創建一個名為“ParisMapTour”的新項目，界面中包含： * Image組件——顯示一張巴黎的圖片； * Label組件——顯示文字； * ListPicker組件——用一個關聯按鈕來打開列表； * ActivityStarter組件：非可視組件。 組件設計如圖6-1所示。  **圖 6-1　設計器中的巴黎地圖旅游** 表6-1中列出了創建用戶界面所用的組件。從Palette中拖出組件，并修改為指定的名稱。 **表6-1 巴黎地圖旅游中用到的組件** | 組件類型 | 面板中分組 | 命名 | 作用 | |----|---|---|---| | Image | User Interface | Image1 | 在屏幕上顯示巴黎的靜態圖片 | | Label | User Interface | Label1 | 顯示文本：用Android發現巴黎 | | ListPicker | User Interface | ListPicker1 | 顯示備選目的地列表 | | ActivityStarter | Connectivity | ActivityStarter1 | 選擇目的地之后打開地圖應用 | ### **設置ActivityStarter組件的屬性** ActivityStarter組件用于在當前應用中，打開其他任何Android應用，如瀏覽器、谷歌地圖，甚至你自己的應用。當用戶從你的應用中打開另一個應用時，可以通過單擊“后退”按鈕返回到你的應用。在ParisMapTour應用中，將根據用戶選擇打開地圖應用，來顯示指定的地圖。用戶可以點擊“后退”按鈕返回到你的應用中，并繼續選擇不同的目的地。 ActivityStarter是一個相當底層的組件，需要為它設置一些屬性信息，這些信息對于Java Android SDK程序員來說非常熟悉，但對世界上其他99.999％的人來說都很陌生。在本應用中，輸入如表6-2中指定的屬性，并要小心地使用大小寫字母，這非常重要。 **表6-2 用ActivityStarter打開谷歌地圖必須設置的屬性** | 屬性 | 值 | | --- | --- | | Action | android.intent.action.VIEW | | ActivityClass | com.google.android.maps.MapsActivity | | ActivityPackage | com.google.android.apps.maps | 還有一個DataUri屬性必須在塊編輯器中設置，用于在谷歌地圖中打開指定地圖。這個屬性是動態的，即根據用戶對目的地的選擇而改變：埃菲爾鐵塔、盧浮宮或巴黎圣母院。 現在切換到塊編輯器，在編程添加組件行為之前，還有兩個細節需要特別關照一下： 1\. 下載文件metro.jpg并加載到項目中，將其設置為Image1的Picture屬性； 2\. ListPicker組件自帶一個按鈕，當用戶點擊時將列出備選項。將ListPicker1的Text屬性設置為“選擇巴黎的目的地”。 ## **為組件添加行為** 在塊編輯器中，需要定義一個目的地列表，并設定兩種行為： * 當應用開始時，為ListPicker組件加載目的地列表，以供用戶選擇； * 當用戶從ListPicker中選擇了一個目的地，地圖應用將打開，并顯示目的地地圖。在應用的第一個版本中，只需打開地圖，并搜索選中的地點。 ### **創建目的地列表** 打開塊編輯器，用表6-3中列出的塊創建一個destinations列表變量。 **表6-3 創建destinations列表變量所需的塊** | 塊的類型 | 所在抽屜 | 作用 | |--|--|--| | Initialize global destinations to | Variables | 創建一個目的地列表 | | make a list | Lists | 添加列表項 | | “埃菲爾鐵塔” | Text | 第一個目的地 | | “盧浮宮” | Text | 第二個目的地 | | “巴黎圣母院” | Text | 第三個目的地 | 如圖6-2所示，變量destinations將調用make a list函數，其中插入了三個旅游目的地。  **圖 6-2　在App Inventor中創建列表非常容易** ### **讓用戶選擇一個目的地** ListPicker組件用來顯示列表項供用戶選擇。通過將ListPicker的Elements屬性設置為某個list，可以預先將備選項目加載到ListPicker中。這里將ListPicker的Elements屬性設置為剛剛創建的destinations列表。因為想在應用啟動時顯示此列表，因此加載列表行為必須在事件Screen1.Initialize中定義。表6-4中列出了所需的塊。 **表6-4 在應用啟動時加載ListPicker備選項所需的塊** | 塊的類型 | 所在抽屜 | 作用 | |--|--|--| | Screen1.Initialize | Screen1 | 應用啟動時觸發該事件 | | set ListPicker1.Elements to | ListPicker1 | 將Elements屬性設置為需要顯示的列表 | | get global destinations | Variables | 讀取目的地列表 | #### **塊的作用** 應用啟動時觸發Screen1.Initialize，如圖6-3所示，事件處理程序通過設置ListPicker的Elements屬性來顯示三個備選目的地。  **圖 6-3　在應用啟動時需要執行的某些操作必須放在Screen1.Initialize事件處理程序中** > 　測試：首先點擊”connect”重新連接測試設備；然后在手機上點擊 “選擇巴黎的目的地”按鈕，出現有三個選項的列表。 ### **使用搜索打開地圖** 下面編寫程序，當用戶選中目的地時，ActivityStarter將打開谷歌地圖并搜索選定的位置。 當用戶選中ListPicker中的項目時，將觸發ListPicker.AfterPicking事件；在AfterPicking事件的處理程序中，需要設置ActivityStarter組件的DataUri屬性，讓它知道要打開哪里的地圖，然后用ActivityStarter.StartActivity打開谷歌地圖。表6-5列出了此功能所需的塊。 **表6-5 用ActivityStarter打開谷歌地圖所需要的塊** | 塊的類型 | 所在抽屜 | 作用 | |--|---|---| | ListPicker1.AfterPicking | ListPicker1 | 當用戶選擇ListPicker中的某項時觸發該事件 | | set ActivityStarter1.DataUri to | ActivityStarter1 | DataUri告訴Maps在啟動時打開哪里的地圖 | | join | Text | 將兩段文本連接成DataUri | | “http://maps.google.com/?q=” | Text | Maps所需的DataUri信息中的第一部分 | | ListPicker1.Selection | ListPicker1 | 用戶選中的項（DataUri信息中的第二部分） | | ActivityStarter1.StartActivity | ActivityStarter1 | 打開地圖 | #### **塊的作用** 用戶在ListPicker中選定的項存儲在ListPicker.Selection中，選擇觸發了AfterPicking事件。如圖6-4，DataUri屬性是“http://maps.google.com/?q=”與選中項組合。如果用戶選中了第一項“艾菲爾鐵塔”，則DataUri將被設置為http://maps.google.com/?q=埃菲爾鐵塔。  **圖 6-4　設置DataUri打開選中的地圖** 為打開地圖設定了ActivityStarter的其他屬性，因此ActivityStarter1.StartActivity塊將打開地圖應用，并根據DataUri所限定的條件進行搜索。 > 　測試：重新連接測試設備，點擊“選擇巴黎的目的地”按鈕。當選中了某個地點，是否出現了該地點的地圖？谷歌地圖提供的“后退”按鈕，可以返回到你的應用中并做再次選擇，怎么樣，有用嗎？（可能需要多次單擊后退按鈕） ## **設立虛擬旅游** 現在我們給應用增添一點趣味，讓應用打開一些超級放大的地圖，并欣賞巴黎的街景，以便在你旅游的同時，你的朋友在家也能跟隨你游覽的腳步。要做到這一點，你首先要在谷歌地圖中找到那些特定地圖的URL地址。繼續使用相同的巴黎地標性建筑為目的地，但是當用戶選中目的地時，使用選中項的索引值（在列表中的位置），來選擇并打開一個指定放大倍數的地圖或街景圖。 在進行下一步之前，您可能想把到目前為止創建的簡單地圖應用保存起來（Save Project As），以便接下來所做的事情萬一讓應用出了問題，你還可以隨時找回現有版本，并再試一次。 ### **為特定地圖尋找DataUri** 首先在電腦上打開谷歌地圖，搜索某個目的地的具體地圖： 1\. 在計算機上瀏覽[http://maps.google.com](http://maps.google.com/)； 2\. 搜索地標（例如，艾菲爾鐵塔）； 3\. 放大到你預期的級別； 4\. 選擇你想要的視圖類型（如：地址、衛星或街道視圖）； 5\. 點擊地圖窗口左上部的Link(鏈接)按鈕，（如圖6-5）復制地圖的URL地址。這個網址（或部分網址）將用于打開你應用中的地圖。  **圖 6-5　從瀏覽器中獲取特定地圖的URL地址** 表6-6顯示了即將使用的URL地址。 **表6-6 在谷歌地圖上完成虛擬之旅的URL地址** | 地標 | 地圖URL | | --- | --- | | 埃菲爾鐵塔 | https://maps.google.com/maps?q=%E5%9F%83%E8%8F%B2%E5%B0%94%E9%93%81%E5%A1%94&hl=zh-CN&ie=UTF8&**ll=48.858369,2.294482**&spn=0.001578,0.004128&sll=37.0625,-95.677068&sspn=61.153041,135.263672&**t=h&z=19**&iwloc=A。短網址：http://goo.gl/maps/e3oBk | | 盧浮宮 | https://maps.google.com/maps?q=%E5%8D%A2%E6%B5%AE%E5%AE%AB&hl=zh-CN&ie=UTF8&**ll=48.86061,2.337642**&spn=0.003155,0.008256&sll=48.85826,2.294582&sspn=0.001578,0.004128&**t=h&z=18** | | 巴黎 圣母 院（街景） | https://maps.google.com/maps?q=%E5%B7%B4%E9%BB%8E%E5%9C%A3%E6%AF%8D%E9%99%A2&hl=zh-CN&ie=UTF8&**ll=48.852545,2.348389**&spn=0.006311,0.016512&sll=48.861595,2.33522&sspn=0.001585,0.004128&**t=h&z=17**&layer=c&cbll=48.852545,2.348389&panoid=3yzCn-eLwNIAAAQJORRDXw&cbp=12,30.77,,0,-16.32 | 將表6-6中的網址粘貼到瀏覽器中，你會看到前兩個是放大的衛星視圖，而第三個是街景圖。 可以用這些URL直接打開地圖，也可以用[http://mapki.com](http://mapki.com/)中列出的谷歌地圖協議。例如，僅憑GPS坐標來顯示埃菲爾鐵塔地圖。從表6-6的長地址中找出這些坐標及地圖geo:協議： geo: 48.858369,2.294482&t=h&z=19 使用這樣的DataUri打開的地圖，與包含這些GPS坐標的長地址打開的地圖基本相同。t = h特指既可以顯示衛星視圖，又可以顯示地址視圖的混合模式，而z = 19特指縮放級別。如果你有興趣詳細了解不同類型地圖的參數設置，請查看[http://mapki.com](http://mapki.com/)中的文檔。 兩種類型的URL隨你選擇用，我們對前兩個DataUri使用geo格式，第三個使用長地址格式。 ### **定義DataURIs列表** 創建列表變量DataURIs，其中包含了每個地圖的DataURI，如圖6-6所示，其中的選項分別與destinations列表中的選項相對應（即第一個dataURI對應第一個目的地：埃菲爾鐵塔）。  **圖 6-6　虛擬之旅的地圖地址列表** 前兩項顯示了埃菲爾鐵塔和盧浮宮的DataURIs，使用geo:協議。第三個DataURI是在太長，無法完整顯示。從表6-6的最后一行復制此網址，并粘貼在text塊中。 ### **修改ListPicker.AfterPicking行為** 在第一個版本的ListPicker.AfterPicking中，將ActivityStarter1的DataUri屬性設置為字符串“http://maps.google.com/?q=”與用戶所選的目的地（如“埃菲爾鐵塔”）的串聯（或組合）；在第二個版本中，AfterPicking程序則更為復雜，用戶從一個列表（目的地）中選擇，而DataUri要從另一列表（dataURIs）中讀取。具體來說，當用戶從ListPicker中選中一項，此時需要知道選中項的索引，以便用這個索引從dataURIs列表中選擇正確的DataUri。稍后我們會詳細解釋索引的含義，但為了更好地描述這一概念，要先把這些塊創建出來，便于我們理解。這項功能需要許多塊，均在表6-7中列出。 **表6-7 根據用戶在第一個列表中的選擇，來確定在第二個列表中的選擇，需要如下的塊** | 塊的類型 | 所在抽屜 | 作用| | --- | --- | --- | | Initialize global index to | Variables | 變量用來保存用戶所選項的索引 | | 數字1 | Math | 變量index的初始值設為1 | | ListPicker1.AfterPicking | ListPicker1 | 當用戶選中一項時，觸發該事件 | | set global index to | Variables | 將變量值設為所選項在列表中的排列位置 | | index in list | Lists | 獲得所選項的位置（索引） | | ListPicker1.Selection | ListPicker1 | 所選項如"埃菲爾鐵塔"，將其插入index in list的thing插槽 | | get global destinations | Variables | 將其插入index in list的list插槽 | | set ActivityStarter1.DataUri | ActivityStarter1 | 在啟動Activity打開地圖之前，設置該屬性 | | select list item | Lists | 從dataURIs列表中選擇一項 | | get global DataURIs | Variables | 讀取DataURIs列表 | #### **塊的功能** 當用戶選中ListPicker1中的某項時觸發AfterPicking事件，如圖6-7所示。選中的項，如“埃菲爾鐵塔”，成為ListPicker.Selection。AfterPicking事件的處理程序借此找到所選項在列表destinations中的位置，即索引值。索引值對應于所選目的地在列表中的位置。所以，如果“艾菲爾鐵塔”被選中，則index為1；如果“盧浮宮”被選中，index為2；同樣，如果“巴黎圣母院”被選中，則index為3。  **圖 6-7　根據用戶在一個列表中的選擇，在另一個列表中做對應的選擇** 使用索引在另一個列表（本例中DataURIs）中做選擇，選中項被設置為組件ActivityStarter的DataUri屬性。一旦設置完成， ActivityStarter.StartActivity就可以打開地圖了。 > 　測試：在手機上點擊“選擇巴黎的目的地”按鈕，將出現有三個選項的列表。選擇其中一個，看看會出現哪張地圖。 ## **改進** 下面是一些可以嘗試的改進建議： * 創建一個虛擬旅游，目的地富有異國情調，也可以是你的工作場所或學校； * 創建一個可定制的虛擬旅游應用，讓用戶自己輸入旅游地點，并地圖URL連接，來生成一個旅游向導。相關數據需要存儲到TinyWebDB數據庫中，并且讓應用可以調用這些已經輸入的數據。有關創建TinyWebDB數據庫的例子，請參見出題及測驗應用。 ## **小結** 下面是本章涉及到的概念： * 列表變量(List Variable)：可用于保存像旅行目的地以及地圖URL這樣的多條目數據； * ListPicker組件：允許用戶從項目列表中選擇。ListPicker的Elements屬性用來保存列表內容，Selection屬性用來保存選中的項，而用戶選中后將觸發AfterPicking事件； * ActivityStarter組件：用于打開另一個應用。本章展示了如何調用地圖應用，你也可以打開瀏覽器或任何其他的Android應用，甚至是你自己創建的應用。更多信息請參見[http://appinventor.googlelabs.com/learn/reference/other/activitystarter.html](http://appinventor.googlelabs.com/learn/reference/other/activitystarter.html)（無法訪問）； * 想要打開谷歌地圖中的詳細地圖，可以設置ActivityStarter的DataUri屬性。如何確定DataUri的值呢？可以在瀏覽器中打開詳細地圖，然后點擊鏈接按鈕，獲得并使用URI： 1\. 直接將URI設置為ActivityStarter的DataUri屬性； 2\. 或者使用在[http://mapki.com](http://mapki.com/)中定義的協議，創建你自己的URI。 * Index（索引）：根據某一項在整個列表中的位置來定義索引。在ListPicker塊中，可以根據用戶選中項在列表中的位置來確定索引。獲取索引值是至關重要的，例如在本章中，需要用索引值在第二個相關的列表中進行選擇。關于List變量及ListPicker組件的更多信息，請參見第19章。 ### **背景知識** **Activity** 中文譯為“活動”(名詞)，是開發人員使用的術語。在Android應用中，一個“活動”通常代表一個單獨的屏幕，即App Inventor中的Screen，用來容納各種用戶界面組件、偵聽用戶事件并做出響應。它有四種基本狀態： 1\. 活躍：用戶可見并可與之交互； 2\. 暫停：用戶部分可見但不能與之交互； 3\. 停止：用戶完全不可見，但仍然停留在內存中； 4\. 清除：從內存中將“活動”刪除。 **HTTP** 超文本傳輸協議(HyperText Transfer Protocol)。 * hyper: 亢奮的 * text: 正文,文本 * transfer: 傳輸 * protocol: 協議 Web瀏覽器、服務器以及相關的web應用程序都是通過HTTP相互通信的。HTTP是現代全球因特網中使用的公共語言。--摘自《HTTP權威指南》  **2012年9月出版的《HTTP權威指南》** **HyperText** 有趣的是，hyper在正式的英漢詞典中被譯為“亢奮、精力旺盛的”，然而在一個流行的網絡詞典Urban dictionary(城市詞典)中，對它的解釋則更為生動形象，這里摘錄兩段：“當你無法集中注意力，感覺想要跳起來撞墻...通常是一種自然狀態下的興奮...由糖引起的。” 另一則：“當你吃了大量的糖，而且跳來跳去高聲喊叫并勒令老師閉嘴。”這兩種解釋中共同的部分是“糖與跳躍”，用這個詞來形容一段文字，首先文字是引人入勝的(糖)，其次文字讓人跳躍(鏈接)。而這正是互聯網信息給人們的閱讀方式帶來的改變。 HyperText通常被譯為“超文本”，其本意為“有鏈接的文本”。我們所見到的網頁背后就是一個超文本文件，其中包含的鏈接體現為兩個方面，一是可以鏈接到其他的網頁(另一個超文本文件)，二是指向某些網絡資源(也是文件)，如圖片、聲音、視頻等。 **Transfer** 譯為“傳輸”，指的是一個資源從一個位置被轉移到另一個位置。比如我們打開一個網頁，實際上是一個文件從服務器端被轉移到了個人電腦上，并在瀏覽器中呈現出來。 **Protocol** 譯為“協議”。中文“協議”這個詞很容易被理解為“合同”，一種在雙方或多方之間建立起來的某種書面約定。英文“protocol”的含義之一是“禮儀、禮節”，還有一種解釋是“外交官及國家元首必須遵從的儀式和禮節”。想象一下我們的國家主席在天安門廣場歡迎外國元首時的一系列安排：是先鳴禮炮呢，還是先奏國歌呢？他們會說什么呢？先說什么，后說什么？這些可是一點都不能含糊的。俗話說“外交無小事”。同樣，當兩臺計算機之間進行交流時，也必須遵守某種約定。如果訪問者發出的請求無法讓被訪問者清楚明白，那么被訪問者將不予回應，交流就無法達成；再或者被訪問者聽懂了訪問者的請求，但是給出的回應讓訪問者無法理解，這樣的交流也是無效的。再舉個例子，假如你去法國旅游，你用中文跟當地人交流，那會是怎樣的情景呢？此時，需要為交流設定一種語言(符號體系)，假如你會說英文，你就可以問人家是否也會說英文，如果對方會說英文，這樣交流就可以建立起來了。這就是protocol的本質。計算機之間的通信協議保證了全世界計算機之間的互聯互通，它規定了通信的規則，包括了三個方面的要素，一是建立通信的請求及應答方法，二是交流過程中要傳遞的數據的格式，三是規定了通信的順序(時序)。http協議是眾多通信協議中的一種，它規定了互聯網上瀏覽器與服務器之間的通信規則。 **URL** 統一資源定位符(Uniform Resource Locator),由一組字符串構成，用來說明如何訪問web服務器上的某項資源。如“http://www.17coding.net/index.html”，它代表了本網站的主頁地址(你可能在瀏覽器地址欄中輸入的是www.17coding.net，瀏覽器替你把輸入的內容解釋為http://www.17coding.net/index.html)，它由三部分組成：①協議聲明“http://”; ②服務器的地址(www.17coding.net)；③資源在服務器上的具體位置(文件夾)及名稱(文件index.html在服務器的根目錄下)。 **URI** 統一資源標識符(Uniform Resource Identifier)，由一組字符串組成，是web服務器上某項資源在全世界范圍內的獨一無二的標識。資源從本質上講就是文件(文件的內容可能是網頁、音頻、視頻、圖片等)。現在幾乎所有的URI都是URL。 **DataURI** DataURI可以將小型的資源文件(如小圖片)通過編碼后直接嵌入到網頁內，隨頁面加載直接加以呈現。與普通的圖片加載相比，可以減少一次對服務器的http請求。不過DataURI的使用僅限于小型的資源文件，而且可能會影響到頁面的加載速度。本章中的ActivityStarter的DataUri屬性采用了兩種方式，一種是普通的URI，另一種是谷歌地圖的內部協議geo(未公開)。[DataURI標準文檔](http://tools.ietf.org/html/rfc2397) ### **英漢對照** activity: 活動 starter: 啟動裝置 list: 列表 picker: 選擇器 palette: 調控面板 metro: 地鐵,大都市 destination: 目的地 make: 制造 element: 元素 selection: 選擇[名詞] ### **資源下載** [meteo.jpg](http://vdisk.weibo.com/s/vCICwOOxNOuf)