範例:利用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拼塊編輯作業:
- 進入Blocks拼塊編輯作業裡點選左側Built in 裡Variables的設定一個全域變數(url)。設定其為空值。
- 設定按下『btn_inside』時的事件。
- 點選左側Screen1->btnRed->『When btn_inside.Click do』拖拉到Viewer中。
- 設定有沒有輸入網址。點選左側Built in->Control->『if then』將此拼塊拖拉到『When btn_inside.Click do』中。並將中間的『=』改成『≠』。
- if 的第一個缺口放入『txt.url.Text』(從txt_url物件中選擇的)。第二個缺口則是填入空字串(從Text選擇的)。
- then 旁的缺口則是要放入『set global url to 』(從Variables中選到的)。『set global url to 』旁的缺口放入『txt_url.Text』(從txt_url物件中選擇的)。
- 加入一個『else』條件。『else』旁的缺口則是要放入『set global url to 』。『set global url to 』旁的缺口放入”http://udn.com”字串(從Text選擇後填寫)。
- 點選左側WebViewer1物件選擇『call WebViewer1.GoToUrl』放到剛剛設定的『if then else』下方。
- WebViewer1物件 url旁的缺口放入『get global url』(從Variables中選到的)。這樣就完成按下『btn_inside』時的事件。
- 設定按下『btn_outside』時的事件。
- 點選左側Screen1->btnRed->『When btn_outside.Click do』拖拉到Viewer中。
- 設定有沒有輸入網址。點選左側Built in->Control->『if then』將此拼塊拖拉到『When btn_inside.Click do』中。並將中間的『=』改成『≠』。
- if 的第一個缺口放入『txt.url.Text』(從txt_url物件中選擇的)。第二個缺口則是填入空字串(從Text選擇的)。
- then 旁的缺口則是要放入『set global url to 』(從Variables中選到的)。『set global url to 』旁的缺口放入『txt_url.Text』(從txt_url物件中選擇的)。
- 加入一個『else』條件。『else』旁的缺口則是要放入『set global url to 』。『set global url to 』旁的缺口放入”http://udn.com”字串(從Text選擇後填寫)。
- 點選左側ActivityStarter1物件選擇『set ActivityStarter1.DataUrl to』, 放到剛剛設定的『if then else』下方。
- 『set ActivityStarter1.DataUrl to』旁的缺口請放入『get global url』(從Variables中選到的)。
- 再點選左側ActivityStarter1物件選擇『call ActivityStarter1.StartActivity』,放到『set ActivityStarter1.DataUrl to』下方。這樣就完成了設定按下『btn_outside』時的事件。
示意圖如下
完成了,來看看其中按下『open inside』的畫面吧。畫面如下:
Sample aia 檔案下載網址:http://goo.gl/R45FUS
apk 下載網址:http://goo.gl/EwtPv1