2014年11月5日 星期三

App Inventor2 利用WebViewer與ActivityStarter連到外部網站

範例:利用WebViewer與ActivityStarter連到外部網站


需求:

建立一個有一文字輸入欄位及兩個按鈕一為『open inside』,『open outside』的頁面。
文字輸入欄位可以輸入url。如果沒有輸入在按下按鈕時就會跳到聯合報首頁。
按下『open inside』會將網頁顯示在app裡面。按下『open outside』則會將網頁顯示在另外開啟的瀏覽器中。

設計師元件佈置作業:
1.在頁面放入 WEBViewer 、TextBox、兩個Button元件及ActivityStarter元件。另外說明部分是用Label元件做的
元件名稱
Properties屬性設定
WebViewer(WebViewer1)
Width:fill parent
TextBox(txt_url)
Width:fill parent
Button(btn_inside)

Button(btn_outside)

ActivityStarter1(ActivityStarter1)
一定要設
Action:android.intent.action.VIEW

示意圖如下:


Blocks拼塊編輯作業:
  1. 進入Blocks拼塊編輯作業裡點選左側Built in Variables的設定一個全域變數(url)。設定其為空值。

  1. 設定按下『btn_inside』時的事件。
    1. 點選左側Screen1->btnRed->When btn_inside.Click do』拖拉到Viewer中。
    2. 設定有沒有輸入網址。點選左側Built in->Control->if then』將此拼塊拖拉到『When btn_inside.Click do』中。並將中間的『=』改成『≠』。
    3. if 的第一個缺口放入『txt.url.Text』(從txt_url物件中選擇的)。第二個缺口則是填入空字串(從Text選擇的)。
    4. then 旁的缺口則是要放入『set global url to 』(從Variables中選到的)。『set global url to 』旁的缺口放入『txt_url.Text』(從txt_url物件中選擇的)。
    5. 加入一個『else』條件。『else』旁的缺口則是要放入『set global url to 』。『set global url to 』旁的缺口放入”http://udn.com”字串(從Text選擇後填寫)。
    6. 點選左側WebViewer1物件選擇『call WebViewer1.GoToUrl』放到剛剛設定的『if then else』下方。
    7. WebViewer1物件 url旁的缺口放入『get global url』(從Variables中選到的)。這樣就完成按下『btn_inside』時的事件。

  1. 設定按下『btn_outside』時的事件。
    1. 點選左側Screen1->btnRed->When btn_outside.Click do』拖拉到Viewer中。
    2. 設定有沒有輸入網址。點選左側Built in->Control->if then』將此拼塊拖拉到『When btn_inside.Click do』中。並將中間的『=』改成『≠』。
    3. if 的第一個缺口放入『txt.url.Text』(從txt_url物件中選擇的)。第二個缺口則是填入空字串(從Text選擇的)。
    4. then 旁的缺口則是要放入『set global url to 』(從Variables中選到的)。『set global url to 』旁的缺口放入『txt_url.Text』(從txt_url物件中選擇的)。
    5. 加入一個『else』條件。『else』旁的缺口則是要放入『set global url to 』。『set global url to 』旁的缺口放入”http://udn.com”字串(從Text選擇後填寫)。
    6. 點選左側ActivityStarter1物件選擇『set ActivityStarter1.DataUrl to』, 放到剛剛設定的『if then else』下方。
    7. 『set ActivityStarter1.DataUrl to』旁的缺口請放入『get global url』(從Variables中選到的)。
    8. 再點選左側ActivityStarter1物件選擇『call ActivityStarter1.StartActivity』,放到『set ActivityStarter1.DataUrl to』下方。這樣就完成了設定按下『btn_outside』時的事件。







示意圖如下

完成了,來看看其中按下『open inside』的畫面吧。畫面如下:
Screenshot_2014-10-29-18-11-34.png

Sample aia 檔案下載網址:http://goo.gl/R45FUS

apk 下載網址:http://goo.gl/EwtPv1