利用WebViewer與ActivityStarter連到外部網站之範例介紹

1. 範例：利用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
示意圖如下：

2. Blocks拼塊編輯作業：
1. 進入Blocks拼塊編輯作業裡點選左側Built in 裡Variables的設定一個全域變數（url）。設
定其為空值。
2. 設定按下『btn_inside』時的事件。
a. 點選左側Screen1­>
btnRed­>
『When btn_inside.Click do』拖拉到Viewer中。
b. 設定有沒有輸入網址。點選左側Built in­>
Control­>
『if then』將此拼塊拖拉到『
When btn_inside.Click do』中。並將中間的『＝』改成『≠』。
c. if 的第一個缺口放入『txt.url.Text』（從txt_url物件中選擇的）。第二個缺口則是
填入空字串（從Text選擇的）。
d. then 旁的缺口則是要放入『set global url to 』（從Variables中選到的）。『set
global url to 』旁的缺口放入『txt_url.Text』（從txt_url物件中選擇的）。
e. 加入一個『else』條件。『else』旁的缺口則是要放入『set global url to 』。『
set global url to 』旁的缺口放入”http://udn.com”字串（從Text選擇後填寫）。
f. 點選左側WebViewer1物件選擇『call WebViewer1.GoToUrl』放到剛剛設定的『
if then else』下方。
g. WebViewer1物件 url旁的缺口放入『get global url』（從Variables中選到的）。
這樣就完成按下『btn_inside』時的事件。
3. 設定按下『btn_outside』時的事件。
a. 點選左側Screen1­>
btnRed­>
『When btn_outside.Click do』拖拉到Viewer中。
b. 設定有沒有輸入網址。點選左側Built in­>
Control­>
『if then』將此拼塊拖拉到『
When btn_inside.Click do』中。並將中間的『＝』改成『≠』。
c. if 的第一個缺口放入『txt.url.Text』（從txt_url物件中選擇的）。第二個缺口則是
填入空字串（從Text選擇的）。
d. then 旁的缺口則是要放入『set global url to 』（從Variables中選到的）。『set
global url to 』旁的缺口放入『txt_url.Text』（從txt_url物件中選擇的）。
e. 加入一個『else』條件。『else』旁的缺口則是要放入『set global url to 』。『
set global url to 』旁的缺口放入”http://udn.com”字串（從Text選擇後填寫）。
f. 點選左側ActivityStarter1物件選擇『set ActivityStarter1.DataUrl to』， 放到剛剛
設定的『if then else』下方。
g. 『set ActivityStarter1.DataUrl to』旁的缺口請放入『get global url』（從
Variables中選到的）。
h. 再點選左側ActivityStarter1物件選擇『call ActivityStarter1.StartActivity』，放到
『set ActivityStarter1.DataUrl to』下方。這樣就完成了設定按下『btn_outside
』時的事件。

3. 示意圖如下
完成了，來看看其中按下『open inside』的畫面吧。畫面如下：

4. Sample aia 檔案下載網址：http://goo.gl/R45FUS
apk 下載網址：http://goo.gl/EwtPv1