SlideShare a Scribd company logo
App Inventor 教學講義
4
吳為勇
  2	
  
Chapter	
  4	
  
Procedure 副程式指令	
  
當我們程式越寫越多越寫越大時有些程式片段會不停的重複出現,可以利用副程
式將這些程式片段或是指令集合在一起,之後可透過呼叫該程序來使用這些指
令。
	
  
圖表	
   1	
  Procedures 副程式指令區
  3	
  
拼塊說明:	
  
Procedure do
將多個指令集合在一起,之後可透過
呼叫該程序來使用這些指令。
當建立一個新的程序指令時,App
Inventor 會自動幫它取一個名稱,您
也可以點選它之後自行改成您所需要
的名稱。
在一個程式中的副程式名稱必須是唯
一的,App Inventor 不允許在同一個
程式中有兩個名稱相同的副程式。您
可點選副程式上的標籤來將其重新命
名。App Inventor 會自動調整對應的
呼叫指令名稱。
當您新增一個副程式之後,會有以下指
令可以呼叫它:
點選左上方的藍色方塊可以設定有幾個
輸入值如下圖。表示有一個名為 x 的輸
入值。
procedure result(有回傳值)
本指令與副程式指令相同,但使用時
會回傳一個結果(result)。當本程序執
行完畢後會將 return 欄位回傳。
當您新增一個有回傳值的副程式之
後,會有以下指令可以呼叫它。也正
因為它有回傳值的關係,您可以直接
把這個副程式當作某個欄位的輸入
值。
	
   	
  
  4	
  
範例:	
  
如何傳參數給副程式:	
  
用副程式求取矩形面積、圓形與三角形的面積
矩形面積公式:長*寬
圓形面積公式:半徑*2*π
三角形面積公式:(底*高)/2
使用元件: Button(按鈕), Label(標籤),HorizantalArrangemant(水平排列)
Step1:	
  
先在設計師作業作業設計畫面	
  
1. 先在左側 Layout 裡選擇『HorizantalArrgement』水平排列元件依序拖拉四
個此元件放到 Viewer 中。	
  
2. 在第一個水平排列元件中放入三個 Button,分別為矩形(btnRect)、三角形
(btnTriangle)與圓形(btnCircle)。	
  
3. 在第二個水平排列元件中放入一個 Label 元件與一個 TextBox 元件。Label
元件名稱更名為 lblText1,內容改成為”長:”。TextBox 元件名稱更名為
txtField1。清空內容為””。	
  
4. 在第三個水平排列元件中也放入一個 Label 元件與一個 TextBox 元件。Label
元件名稱更名為 lblText2,內容改成為”寬:”。TextBox 元件名稱更名為
txtField2。清空內容為””。	
  
5. 在第四個水平排列元件中放入兩個 Label 元件。第一個 Label 元件內容改成
為”Answer:”。第一個 Label 元件名稱更名為 lblAnswer。清空內容為””。	
  
6. 最後再最下方加上一個 Button 元件為”求面積”(btnClick)。	
  
7. 設計師設計完成圖如下:	
  
	
   	
  
  5	
  
	
  
圖表	
   2	
   計算三種面積_設計師作業	
  
	
  
Step2:	
  
1. 進入 Blocks 拼塊編輯作業裡點選左側 Built in 裡 Variables 的設定兩個全
域變數。一個為 pi 表示圓周率所以設定為 3.14159。另一個為 type 表示
要計算那一種形狀的面積(矩形:1,三角形:2,圓形:3)。
拼塊設計如下:
	
  
圖表	
   3	
   設定全域變數
2. 接著設定矩形、三角形與圓形這三個按鈕按下之後要處理的事。首先先
設定矩形的。
I. 點選左側 Built in 裡的 Screen1 下的 btnRect 選擇『When btnClick.Click
do』。拖拉到中間的 Viewer 中。
II. 點選左側 Built in 裡 Variables 選擇『set type to』放到 『When
btnClick.Click do』裡。設定『set type to』後面的框框值為數字 1。
  6	
  
III. 點選左側 Built in 裡的 Screen1 下的 lblText1 與 lblText2 的
『set .text to 』拉到『set type to』下方的框框,並將值分別
設定為 Text 的“長:”,“寬:”。
IV. 點選左側 Built in 裡的 Screen1 下的 txtField1 與 lblField2 的
『set .text to 』拉到上一步驟的『set .text to 』下方的
框框,並將值分別設定為 Text 的“”,“”。
V. 點選左側 Built in 裡的 Screen1 下的 lblAnswer 拉到上一步驟的
『set .text to 』下方的框框,並將值分別設定為 Text 的“”。
VI. 因為圓形只需要輸入一個半徑值。所以點選圓形時只顯示一個
Label 顯示為“半徑:”與 TextBox 輸入值清空為“”。另外要把
另一組的 Label 跟 TextBox 欄位隱藏起來。因為圓形會隱藏第二組
的 Label 與 TextBox,所以我們在矩形與三角形需要再增加一個判
斷。點選左側 Built in 裡的 Screen1 下的 Control 點選『if then』的選
項拉到上一步驟的『set .text to 』下方的框框。『If』右邊的
判斷式則要選擇左側 Built in 裡的 Screen1 下 Logic 的『xxx=yyy』
項目。其中 xxx 放入『lblText2.Visible』,yyy 則是放入 false。『then』
的右邊框框則是放入『set lblText2 .Visible to 』『true』與『set
txtField2 .Visible to 』『true』。
3. 三角形與矩形設定差不多只是將 lblText1 與 lblText2 的『set .text
to 』拉到『set type to』下方的框框,並將值分別設定為 Text 的“高:”,
“底:”。
4. 圓形設定的比較少,只設定一組 lblText1 與 txtField1 的,另一組 lblText2
與 txtField2 欄位隱藏起來。lblText1 設定成“半徑:”然後 txtField1 與
lblAnswer 都設成””值。三組都設定好的圖示如下:
	
  
圖表	
   4	
   按鈕拼塊編輯
  7	
  
5. 接下來要設定副程式了。點選左側 Built in 裡的 Procedure 點選『to
procedure result』這是設定一個有回傳值副程式拼塊。先設定 procedure
名稱是 getRectArea,表示這是一個計算矩形面積的副程式。點選拼塊中
藍色方塊的地方設定要傳入幾個值。矩形面積計算需要輸入長度與寬度。
所以我們設定兩個輸入值一個為 height,另一個則為 width。result 旁的
拼塊表示需要回傳的值。這裡我們就設定為 height * width。
設定好的副程式拼塊如下圖。
	
  
圖表	
   5	
   計算矩形面積的副程式	
  
	
  
6. 如法炮製上個步驟將計算三角形面積與圓形面積的副程式也設定起來。
設定好的副程式拼塊如下圖:
	
  
圖表	
   6	
   計算三角形面積與圓形面積的副程式
	
  
7. 最後就是來設定求面積按鈕了。
I. 點選左側 Built in 裡的 Screen1 下的『btnClick』選擇『When
btnClick.Click do』。拖拉到中間的 Viewer 中。然後判斷這時候是要
求哪一種形狀面積。
II. 點選左側 Built in 裡的 Control 選擇『if then』的選項設定起有兩個
『else if』條件並拉到『When btnClick.Click do』的框框中。
III. 從 Blocks 中 Math 點選『=』將其拖拉到 if 指令上方的條件式欄位。
IV. 從 Blocks 裡的 Variable 點選『get』下拉選擇『global type』,將其拖
拉到『=』的左邊框框中。
  8	
  
V. 從 Blocks 中 Math 點選『Number』,將內容改為『1』,並拖拉到『=』
的右邊框框內。
VI. 從 Blocks 裡的 Screen1 點選 lblAnswer 選擇『set lblAnswer.Text to』拖
拉放到 if 指令中 then 右邊的框框去。
VII. 從 Blocks 裡的 Procedures 點選『call getRectArea height width』放到
『set lblAnswer.Text to』右邊的框框中。
VIII.從 Blocks 裡的 Screen1 點選 txtField 選擇『txtField1.Text』拖拉放到
height 右邊的框框。
IX. 從 Blocks 裡的 Screen1 點選 txtField 選擇『txtField2Text』拖拉放到
width 右邊的框框。
X. 餘下的兩個『else if』也是類似的設定,只是要計算三角形跟圓形
的面積。都設定好的拼塊如下
	
  
圖表	
   7	
   求面積按鈕之 Blocks 設定	
  
	
  
	
   	
  
  9	
  
8. 最後整體所有的拼塊設定如下圖	
  
	
  
圖表	
   8	
   計算矩形,三角形與圓形面積範例之 Blocks	
  
	
  
	
   	
  
  10	
  
9. 執行結果如下圖	
  
	
   	
   	
  
計算矩形面積	
   計算三角形面積	
   計算圓形面積	
  
	
  
	
  
	
  
	
  
	
   	
  
  11	
  
ActivityStarter 元件	
  
ActivityStarter 元件讓您可透過現有的應用程式去呼叫其他的應用程式。您所能呼
叫的應用程式,可以是您或是別人所編寫的 App Inventor 程式,或是像安裝在手
機上的程式如 Camera 及 Google Map 。甚至只要您提供足夠的資訊,您就可
以自由地呼叫任何一個應用程式。此外,您也能在呼叫一個應用程式之後再從接
收它的執行結果。為了能呼叫另一個應用程式,您必須提供一些控制資料給
Android 作業系統。我們需在使用 StartActivity 方法之前,必須先設定好
ActivityStarter 元件中相關的屬性才行。
關於 ActivityStarter 元件資訊的參考網站:
1. http://beta.appinventor.mit.edu/learn/reference/other/activitystarter.html
2. http://www.appinventor.tw/activitystarter
首先來看個範例吧。
範例	
  
桃園好好玩	
  
透過使用者先行設置的景點介紹作為旅遊目的地,透過Google 地圖搜尋目的地
的位置與當地的地圖資訊。
使用元件:Image,ListPicker,ActivityStarter
Step1:
1. 先在設計師作業作業設計畫面。將 Image 元件拉到 Screen1,並設定圖
片來源(上傳一個圖檔)。	
  
2. 將 ListPicker 元件拉到 Screen1 中。
  12	
  
3. 將 Activity Starter 拉到 Screen1 中。點選 Components 中
ActivityStarter1,設定此元件的屬性:
Action 欄位: android.intent.action.VIEW
ActivityClass 欄位: com.google.android.maps.MapsActivity
ActivityPackage 欄位: com.google.android.apps.maps
	
  
圖表	
   9	
  ActivityStarter 元件設定	
  
	
  
	
   	
  
  13	
  
Step2:
1. 開啓 Blocks Editor。
2. 點選畫面左側 Built in 裡的 Variables 選擇『Initialize global name to』
指令,更改 name 為 places。
3. 點選畫面左側 Built in 裡的 Lists 選擇『make a list』放到『Initialize
global name to』指令的右邊框框。然後按下藍色的框框增加 List 的
Item 到 6 個。然後點選左側 Built in 裡的 Text 選擇“”(文字字串)放
到『make a list』右邊的框框。然後依序填入字串內容為”虎頭山公
園”,”大溪老街”,”龍潭觀光大池”,”永安漁港”,”桃源仙谷”,”
味全埔心牧場”(這些景點是參考
http://okgo.tw/buty/taoyuan.html)。
4. 點選畫面左側 Built in 裡的 Screen1 下的 ListPicker1 選擇『when
ListPicker1.AfterPicking do』事件。這表示 USER 再點選景點後要做
的事。
I. 接下來點選畫面左側 Built in 裡的 Screen1 下的ActivityStarter1
選擇『set ActivityStarter1.DataUri to』放到『when
ListPicker1.AfterPicking do』中的框框裡。
  14	
  
II. 點選畫面左側 Built in 裡的 Text 裡的『join』放到『set
ActivityStarter1.DataUri to』右邊的框框。準備將景點與地圖查
詢指令結合為一個字串。
III. 點選畫面左側 Built in 裡的 Text 裡的『””』放到『join』上方
的框框。內容設定為『geo:0,0?q=』。
IV. 點選畫面左側 Built in 裡的 Screen1 下的 ListPicker1 選擇
『Listpicker1.Selection』(這表示User 點選的景點 Item)放到放
到『join』下方的框框。
V. 最後要用 StartActivity 指令來啟動 Google Map。點選畫面左側
Built in 裡的 Screen1 下的ActivityStarter1 選擇『set
ActivityStarter1.StartActivity』放到『set
ActivityStarter1.DataUri to』。
5. 接下來要設定當 app 起始進入時的初始化設定。
I. 點選畫面左側 Built in 裡的 Screen1 選擇 『When Screen1
Initalize do』放到 Viewer 中。然後要設定 ListPicker 要使用的 List
資料是什麼。
  15	
  
II. 點選 Screen1 下的 ListPicker1 選擇『set Listpicker1.Element to』
放到『When Screen1 Initalize do』中。
III. 點選 Variables 下的『get』下拉選擇到”global places”並拖拉
放到『set Listpicker1.Element to』右邊的框框。這樣就完成了
Blocks Editor 的設定了。完成圖如下:
	
  
圖表	
   10	
   桃園好好玩_Blocks 完成圖	
  
	
   	
  
  16	
  
範例執行結果:	
  
	
  
圖表	
   11	
   起始畫面	
  
	
  
圖表	
   12	
   景點選單	
  
	
  
  17	
  
	
  
圖表	
   13	
   定位到景點	
  
	
  
	
  
圖表	
   14	
   點選景點顯示內容	
  
	
  
	
  
	
   	
  
	
   	
  
  18	
  
參考網站與書籍:	
  
書籍:
1. Android 手機程式超簡單	
   App	
  Inventor	
   入門卷 作者:CAVE 教育團
隊 出版社:馥林文化	
  
2. Google	
  App	
  Inventor 開發手冊:不會寫程式也能設計你的 APP	
   作者:
王培坤	
   出版社:上奇資訊	
  
	
  
網站:
1. http://appinventor.mit.edu	
  
2. http://www.appinventor.tw/	
  
	
  

More Related Content

What's hot

Open office impress
Open office impressOpen office impress
Open office impress
Dr. Anita Goel
 
Android ui dialog
Android ui dialogAndroid ui dialog
Android ui dialog
Krazy Koder
 
Visual Basic Controls ppt
Visual Basic Controls pptVisual Basic Controls ppt
Visual Basic Controls ppt
Ranjuma Shubhangi
 
App inventor
App inventorApp inventor
App inventor
Marco Forte
 
Canva 101: Get Started
Canva 101: Get Started Canva 101: Get Started
Canva 101: Get Started
Val Shapiro
 
3ra unidad corel draw
3ra unidad corel draw3ra unidad corel draw
3ra unidad corel draw
Javier Avalos
 
Publishing and delivery of mobile application
Publishing and delivery of mobile applicationPublishing and delivery of mobile application
Publishing and delivery of mobile application
K Senthil Kumar
 
iOS Application Testing
iOS Application TestingiOS Application Testing
iOS Application Testing
Mreetyunjaya Daas
 
Vector
VectorVector
1º Meetup Zabbix Meetup do Recife: André Marques - Utilizando Telegram para f...
1º Meetup Zabbix Meetup do Recife: André Marques - Utilizando Telegram para f...1º Meetup Zabbix Meetup do Recife: André Marques - Utilizando Telegram para f...
1º Meetup Zabbix Meetup do Recife: André Marques - Utilizando Telegram para f...
Zabbix BR
 
Bca sem 5 c# practical
Bca sem 5 c# practicalBca sem 5 c# practical
Bca sem 5 c# practical
Hitesh Patel
 
Component interface
Component interfaceComponent interface
Component interface
JAYAARC
 
Android studio installation
Android studio installationAndroid studio installation
Android studio installation
Faysal Hossain Shezan
 
Tutorial in Insert Menu
Tutorial in Insert MenuTutorial in Insert Menu
Tutorial in Insert Menu
Mary Grace Carolino
 
Visual Basic Calculator
Visual Basic CalculatorVisual Basic Calculator
Visual Basic Calculator
Spy Seat
 
Javascript this keyword
Javascript this keywordJavascript this keyword
Javascript this keyword
Pham Huy Tung
 
Thunkable
ThunkableThunkable
Thunkable
Don Don
 
[Open southcode] ios testing with appium
[Open southcode] ios testing with appium[Open southcode] ios testing with appium
[Open southcode] ios testing with appium
Estefanía Fernández Muñoz
 
Programación Funcional 101 con Scala y ZIO 2.0
Programación Funcional 101 con Scala y ZIO 2.0Programación Funcional 101 con Scala y ZIO 2.0
Programación Funcional 101 con Scala y ZIO 2.0
Jorge Vásquez
 
Angular modules in depth
Angular modules in depthAngular modules in depth
Angular modules in depth
Christoffer Noring
 

What's hot (20)

Open office impress
Open office impressOpen office impress
Open office impress
 
Android ui dialog
Android ui dialogAndroid ui dialog
Android ui dialog
 
Visual Basic Controls ppt
Visual Basic Controls pptVisual Basic Controls ppt
Visual Basic Controls ppt
 
App inventor
App inventorApp inventor
App inventor
 
Canva 101: Get Started
Canva 101: Get Started Canva 101: Get Started
Canva 101: Get Started
 
3ra unidad corel draw
3ra unidad corel draw3ra unidad corel draw
3ra unidad corel draw
 
Publishing and delivery of mobile application
Publishing and delivery of mobile applicationPublishing and delivery of mobile application
Publishing and delivery of mobile application
 
iOS Application Testing
iOS Application TestingiOS Application Testing
iOS Application Testing
 
Vector
VectorVector
Vector
 
1º Meetup Zabbix Meetup do Recife: André Marques - Utilizando Telegram para f...
1º Meetup Zabbix Meetup do Recife: André Marques - Utilizando Telegram para f...1º Meetup Zabbix Meetup do Recife: André Marques - Utilizando Telegram para f...
1º Meetup Zabbix Meetup do Recife: André Marques - Utilizando Telegram para f...
 
Bca sem 5 c# practical
Bca sem 5 c# practicalBca sem 5 c# practical
Bca sem 5 c# practical
 
Component interface
Component interfaceComponent interface
Component interface
 
Android studio installation
Android studio installationAndroid studio installation
Android studio installation
 
Tutorial in Insert Menu
Tutorial in Insert MenuTutorial in Insert Menu
Tutorial in Insert Menu
 
Visual Basic Calculator
Visual Basic CalculatorVisual Basic Calculator
Visual Basic Calculator
 
Javascript this keyword
Javascript this keywordJavascript this keyword
Javascript this keyword
 
Thunkable
ThunkableThunkable
Thunkable
 
[Open southcode] ios testing with appium
[Open southcode] ios testing with appium[Open southcode] ios testing with appium
[Open southcode] ios testing with appium
 
Programación Funcional 101 con Scala y ZIO 2.0
Programación Funcional 101 con Scala y ZIO 2.0Programación Funcional 101 con Scala y ZIO 2.0
Programación Funcional 101 con Scala y ZIO 2.0
 
Angular modules in depth
Angular modules in depthAngular modules in depth
Angular modules in depth
 

Viewers also liked

App inventor 教學講義 chapter6
App inventor 教學講義 chapter6App inventor 教學講義 chapter6
App inventor 教學講義 chapter6
Jerry Wu
 
Android 程式設計(2)
Android 程式設計(2)Android 程式設計(2)
Android 程式設計(2)
Roy Wang
 
App inventor 1
App inventor 1App inventor 1
App inventor 1
Roy Wang
 
App inventor 2
App inventor 2App inventor 2
App inventor 2
Roy Wang
 
Android 程式設計(1)
Android 程式設計(1)Android 程式設計(1)
Android 程式設計(1)
Roy Wang
 
App inventor 4
App inventor 4App inventor 4
App inventor 4
Roy Wang
 

Viewers also liked (6)

App inventor 教學講義 chapter6
App inventor 教學講義 chapter6App inventor 教學講義 chapter6
App inventor 教學講義 chapter6
 
Android 程式設計(2)
Android 程式設計(2)Android 程式設計(2)
Android 程式設計(2)
 
App inventor 1
App inventor 1App inventor 1
App inventor 1
 
App inventor 2
App inventor 2App inventor 2
App inventor 2
 
Android 程式設計(1)
Android 程式設計(1)Android 程式設計(1)
Android 程式設計(1)
 
App inventor 4
App inventor 4App inventor 4
App inventor 4
 

Similar to App inventor 教學講義 chapter4

Quick start of AcmeFlow
Quick start of AcmeFlowQuick start of AcmeFlow
Quick start of AcmeFlow
Sky Wu
 
33個你應該知道的CAD秘訣.pdf
33個你應該知道的CAD秘訣.pdf33個你應該知道的CAD秘訣.pdf
33個你應該知道的CAD秘訣.pdf
HuChiehyen1
 
第1讲 开始编写程序
第1讲 开始编写程序第1讲 开始编写程序
第1讲 开始编写程序ruandao
 
Android Studio NDK(JNI) + OpenCV 完整教學
Android Studio NDK(JNI) + OpenCV 完整教學Android Studio NDK(JNI) + OpenCV 完整教學
Android Studio NDK(JNI) + OpenCV 完整教學
Wei-Xiang Wang
 
软件设计原则、模式与应用
软件设计原则、模式与应用软件设计原则、模式与应用
软件设计原则、模式与应用yiditushe
 
4.2第四章 swarm代码剖析 可选补充课程
4.2第四章 swarm代码剖析 可选补充课程4.2第四章 swarm代码剖析 可选补充课程
4.2第四章 swarm代码剖析 可选补充课程zhang shuren
 
M gui
M guiM gui
M gui
鼎傑 王
 
安博士Asec 2010年3月安全报告
安博士Asec 2010年3月安全报告安博士Asec 2010年3月安全报告
安博士Asec 2010年3月安全报告ahnlabchina
 
招聘笔试题(二)
招聘笔试题(二)招聘笔试题(二)
招聘笔试题(二)yiditushe
 
Eclipse開發平台快速入門
Eclipse開發平台快速入門Eclipse開發平台快速入門
Eclipse開發平台快速入門Luo Korth
 
神州泰岳测试试题(笔试)
神州泰岳测试试题(笔试)神州泰岳测试试题(笔试)
神州泰岳测试试题(笔试)yiditushe
 
了解Oracle在线重定义online redefinition
了解Oracle在线重定义online redefinition了解Oracle在线重定义online redefinition
了解Oracle在线重定义online redefinition
maclean liu
 
Android 智慧型手機程式設計
Android 智慧型手機程式設計Android 智慧型手機程式設計
Android 智慧型手機程式設計
Kyle Lin
 
系統程式 -- 第 1 章 系統軟體
系統程式 -- 第 1 章 系統軟體系統程式 -- 第 1 章 系統軟體
系統程式 -- 第 1 章 系統軟體
鍾誠 陳鍾誠
 
網站設計100步
網站設計100步網站設計100步
網站設計100步evercislide
 
App inventor2利用WebViewer與ActivityStarter連到外部網站
App inventor2利用WebViewer與ActivityStarter連到外部網站App inventor2利用WebViewer與ActivityStarter連到外部網站
App inventor2利用WebViewer與ActivityStarter連到外部網站
Jerry Wu
 

Similar to App inventor 教學講義 chapter4 (19)

Quick start of AcmeFlow
Quick start of AcmeFlowQuick start of AcmeFlow
Quick start of AcmeFlow
 
33個你應該知道的CAD秘訣.pdf
33個你應該知道的CAD秘訣.pdf33個你應該知道的CAD秘訣.pdf
33個你應該知道的CAD秘訣.pdf
 
第1讲 开始编写程序
第1讲 开始编写程序第1讲 开始编写程序
第1讲 开始编写程序
 
Android Studio NDK(JNI) + OpenCV 完整教學
Android Studio NDK(JNI) + OpenCV 完整教學Android Studio NDK(JNI) + OpenCV 完整教學
Android Studio NDK(JNI) + OpenCV 完整教學
 
软件设计原则、模式与应用
软件设计原则、模式与应用软件设计原则、模式与应用
软件设计原则、模式与应用
 
4.2第四章 swarm代码剖析 可选补充课程
4.2第四章 swarm代码剖析 可选补充课程4.2第四章 swarm代码剖析 可选补充课程
4.2第四章 swarm代码剖析 可选补充课程
 
M gui
M guiM gui
M gui
 
安博士Asec 2010年3月安全报告
安博士Asec 2010年3月安全报告安博士Asec 2010年3月安全报告
安博士Asec 2010年3月安全报告
 
招聘笔试题(二)
招聘笔试题(二)招聘笔试题(二)
招聘笔试题(二)
 
Eclipse開發平台快速入門
Eclipse開發平台快速入門Eclipse開發平台快速入門
Eclipse開發平台快速入門
 
XXXX
XXXXXXXX
XXXX
 
神州泰岳测试试题(笔试)
神州泰岳测试试题(笔试)神州泰岳测试试题(笔试)
神州泰岳测试试题(笔试)
 
Multisim8
Multisim8Multisim8
Multisim8
 
了解Oracle在线重定义online redefinition
了解Oracle在线重定义online redefinition了解Oracle在线重定义online redefinition
了解Oracle在线重定义online redefinition
 
Android 智慧型手機程式設計
Android 智慧型手機程式設計Android 智慧型手機程式設計
Android 智慧型手機程式設計
 
SCJP ch08
SCJP ch08SCJP ch08
SCJP ch08
 
系統程式 -- 第 1 章 系統軟體
系統程式 -- 第 1 章 系統軟體系統程式 -- 第 1 章 系統軟體
系統程式 -- 第 1 章 系統軟體
 
網站設計100步
網站設計100步網站設計100步
網站設計100步
 
App inventor2利用WebViewer與ActivityStarter連到外部網站
App inventor2利用WebViewer與ActivityStarter連到外部網站App inventor2利用WebViewer與ActivityStarter連到外部網站
App inventor2利用WebViewer與ActivityStarter連到外部網站
 

App inventor 教學講義 chapter4

  • 2.   2   Chapter  4   Procedure 副程式指令   當我們程式越寫越多越寫越大時有些程式片段會不停的重複出現,可以利用副程 式將這些程式片段或是指令集合在一起,之後可透過呼叫該程序來使用這些指 令。   圖表   1  Procedures 副程式指令區
  • 3.   3   拼塊說明:   Procedure do 將多個指令集合在一起,之後可透過 呼叫該程序來使用這些指令。 當建立一個新的程序指令時,App Inventor 會自動幫它取一個名稱,您 也可以點選它之後自行改成您所需要 的名稱。 在一個程式中的副程式名稱必須是唯 一的,App Inventor 不允許在同一個 程式中有兩個名稱相同的副程式。您 可點選副程式上的標籤來將其重新命 名。App Inventor 會自動調整對應的 呼叫指令名稱。 當您新增一個副程式之後,會有以下指 令可以呼叫它: 點選左上方的藍色方塊可以設定有幾個 輸入值如下圖。表示有一個名為 x 的輸 入值。 procedure result(有回傳值) 本指令與副程式指令相同,但使用時 會回傳一個結果(result)。當本程序執 行完畢後會將 return 欄位回傳。 當您新增一個有回傳值的副程式之 後,會有以下指令可以呼叫它。也正 因為它有回傳值的關係,您可以直接 把這個副程式當作某個欄位的輸入 值。    
  • 4.   4   範例:   如何傳參數給副程式:   用副程式求取矩形面積、圓形與三角形的面積 矩形面積公式:長*寬 圓形面積公式:半徑*2*π 三角形面積公式:(底*高)/2 使用元件: Button(按鈕), Label(標籤),HorizantalArrangemant(水平排列) Step1:   先在設計師作業作業設計畫面   1. 先在左側 Layout 裡選擇『HorizantalArrgement』水平排列元件依序拖拉四 個此元件放到 Viewer 中。   2. 在第一個水平排列元件中放入三個 Button,分別為矩形(btnRect)、三角形 (btnTriangle)與圓形(btnCircle)。   3. 在第二個水平排列元件中放入一個 Label 元件與一個 TextBox 元件。Label 元件名稱更名為 lblText1,內容改成為”長:”。TextBox 元件名稱更名為 txtField1。清空內容為””。   4. 在第三個水平排列元件中也放入一個 Label 元件與一個 TextBox 元件。Label 元件名稱更名為 lblText2,內容改成為”寬:”。TextBox 元件名稱更名為 txtField2。清空內容為””。   5. 在第四個水平排列元件中放入兩個 Label 元件。第一個 Label 元件內容改成 為”Answer:”。第一個 Label 元件名稱更名為 lblAnswer。清空內容為””。   6. 最後再最下方加上一個 Button 元件為”求面積”(btnClick)。   7. 設計師設計完成圖如下:      
  • 5.   5     圖表   2   計算三種面積_設計師作業     Step2:   1. 進入 Blocks 拼塊編輯作業裡點選左側 Built in 裡 Variables 的設定兩個全 域變數。一個為 pi 表示圓周率所以設定為 3.14159。另一個為 type 表示 要計算那一種形狀的面積(矩形:1,三角形:2,圓形:3)。 拼塊設計如下:   圖表   3   設定全域變數 2. 接著設定矩形、三角形與圓形這三個按鈕按下之後要處理的事。首先先 設定矩形的。 I. 點選左側 Built in 裡的 Screen1 下的 btnRect 選擇『When btnClick.Click do』。拖拉到中間的 Viewer 中。 II. 點選左側 Built in 裡 Variables 選擇『set type to』放到 『When btnClick.Click do』裡。設定『set type to』後面的框框值為數字 1。
  • 6.   6   III. 點選左側 Built in 裡的 Screen1 下的 lblText1 與 lblText2 的 『set .text to 』拉到『set type to』下方的框框,並將值分別 設定為 Text 的“長:”,“寬:”。 IV. 點選左側 Built in 裡的 Screen1 下的 txtField1 與 lblField2 的 『set .text to 』拉到上一步驟的『set .text to 』下方的 框框,並將值分別設定為 Text 的“”,“”。 V. 點選左側 Built in 裡的 Screen1 下的 lblAnswer 拉到上一步驟的 『set .text to 』下方的框框,並將值分別設定為 Text 的“”。 VI. 因為圓形只需要輸入一個半徑值。所以點選圓形時只顯示一個 Label 顯示為“半徑:”與 TextBox 輸入值清空為“”。另外要把 另一組的 Label 跟 TextBox 欄位隱藏起來。因為圓形會隱藏第二組 的 Label 與 TextBox,所以我們在矩形與三角形需要再增加一個判 斷。點選左側 Built in 裡的 Screen1 下的 Control 點選『if then』的選 項拉到上一步驟的『set .text to 』下方的框框。『If』右邊的 判斷式則要選擇左側 Built in 裡的 Screen1 下 Logic 的『xxx=yyy』 項目。其中 xxx 放入『lblText2.Visible』,yyy 則是放入 false。『then』 的右邊框框則是放入『set lblText2 .Visible to 』『true』與『set txtField2 .Visible to 』『true』。 3. 三角形與矩形設定差不多只是將 lblText1 與 lblText2 的『set .text to 』拉到『set type to』下方的框框,並將值分別設定為 Text 的“高:”, “底:”。 4. 圓形設定的比較少,只設定一組 lblText1 與 txtField1 的,另一組 lblText2 與 txtField2 欄位隱藏起來。lblText1 設定成“半徑:”然後 txtField1 與 lblAnswer 都設成””值。三組都設定好的圖示如下:   圖表   4   按鈕拼塊編輯
  • 7.   7   5. 接下來要設定副程式了。點選左側 Built in 裡的 Procedure 點選『to procedure result』這是設定一個有回傳值副程式拼塊。先設定 procedure 名稱是 getRectArea,表示這是一個計算矩形面積的副程式。點選拼塊中 藍色方塊的地方設定要傳入幾個值。矩形面積計算需要輸入長度與寬度。 所以我們設定兩個輸入值一個為 height,另一個則為 width。result 旁的 拼塊表示需要回傳的值。這裡我們就設定為 height * width。 設定好的副程式拼塊如下圖。   圖表   5   計算矩形面積的副程式     6. 如法炮製上個步驟將計算三角形面積與圓形面積的副程式也設定起來。 設定好的副程式拼塊如下圖:   圖表   6   計算三角形面積與圓形面積的副程式   7. 最後就是來設定求面積按鈕了。 I. 點選左側 Built in 裡的 Screen1 下的『btnClick』選擇『When btnClick.Click do』。拖拉到中間的 Viewer 中。然後判斷這時候是要 求哪一種形狀面積。 II. 點選左側 Built in 裡的 Control 選擇『if then』的選項設定起有兩個 『else if』條件並拉到『When btnClick.Click do』的框框中。 III. 從 Blocks 中 Math 點選『=』將其拖拉到 if 指令上方的條件式欄位。 IV. 從 Blocks 裡的 Variable 點選『get』下拉選擇『global type』,將其拖 拉到『=』的左邊框框中。
  • 8.   8   V. 從 Blocks 中 Math 點選『Number』,將內容改為『1』,並拖拉到『=』 的右邊框框內。 VI. 從 Blocks 裡的 Screen1 點選 lblAnswer 選擇『set lblAnswer.Text to』拖 拉放到 if 指令中 then 右邊的框框去。 VII. 從 Blocks 裡的 Procedures 點選『call getRectArea height width』放到 『set lblAnswer.Text to』右邊的框框中。 VIII.從 Blocks 裡的 Screen1 點選 txtField 選擇『txtField1.Text』拖拉放到 height 右邊的框框。 IX. 從 Blocks 裡的 Screen1 點選 txtField 選擇『txtField2Text』拖拉放到 width 右邊的框框。 X. 餘下的兩個『else if』也是類似的設定,只是要計算三角形跟圓形 的面積。都設定好的拼塊如下   圖表   7   求面積按鈕之 Blocks 設定        
  • 9.   9   8. 最後整體所有的拼塊設定如下圖     圖表   8   計算矩形,三角形與圓形面積範例之 Blocks        
  • 10.   10   9. 執行結果如下圖         計算矩形面積   計算三角形面積   計算圓形面積              
  • 11.   11   ActivityStarter 元件   ActivityStarter 元件讓您可透過現有的應用程式去呼叫其他的應用程式。您所能呼 叫的應用程式,可以是您或是別人所編寫的 App Inventor 程式,或是像安裝在手 機上的程式如 Camera 及 Google Map 。甚至只要您提供足夠的資訊,您就可 以自由地呼叫任何一個應用程式。此外,您也能在呼叫一個應用程式之後再從接 收它的執行結果。為了能呼叫另一個應用程式,您必須提供一些控制資料給 Android 作業系統。我們需在使用 StartActivity 方法之前,必須先設定好 ActivityStarter 元件中相關的屬性才行。 關於 ActivityStarter 元件資訊的參考網站: 1. http://beta.appinventor.mit.edu/learn/reference/other/activitystarter.html 2. http://www.appinventor.tw/activitystarter 首先來看個範例吧。 範例   桃園好好玩   透過使用者先行設置的景點介紹作為旅遊目的地,透過Google 地圖搜尋目的地 的位置與當地的地圖資訊。 使用元件:Image,ListPicker,ActivityStarter Step1: 1. 先在設計師作業作業設計畫面。將 Image 元件拉到 Screen1,並設定圖 片來源(上傳一個圖檔)。   2. 將 ListPicker 元件拉到 Screen1 中。
  • 12.   12   3. 將 Activity Starter 拉到 Screen1 中。點選 Components 中 ActivityStarter1,設定此元件的屬性: Action 欄位: android.intent.action.VIEW ActivityClass 欄位: com.google.android.maps.MapsActivity ActivityPackage 欄位: com.google.android.apps.maps   圖表   9  ActivityStarter 元件設定        
  • 13.   13   Step2: 1. 開啓 Blocks Editor。 2. 點選畫面左側 Built in 裡的 Variables 選擇『Initialize global name to』 指令,更改 name 為 places。 3. 點選畫面左側 Built in 裡的 Lists 選擇『make a list』放到『Initialize global name to』指令的右邊框框。然後按下藍色的框框增加 List 的 Item 到 6 個。然後點選左側 Built in 裡的 Text 選擇“”(文字字串)放 到『make a list』右邊的框框。然後依序填入字串內容為”虎頭山公 園”,”大溪老街”,”龍潭觀光大池”,”永安漁港”,”桃源仙谷”,” 味全埔心牧場”(這些景點是參考 http://okgo.tw/buty/taoyuan.html)。 4. 點選畫面左側 Built in 裡的 Screen1 下的 ListPicker1 選擇『when ListPicker1.AfterPicking do』事件。這表示 USER 再點選景點後要做 的事。 I. 接下來點選畫面左側 Built in 裡的 Screen1 下的ActivityStarter1 選擇『set ActivityStarter1.DataUri to』放到『when ListPicker1.AfterPicking do』中的框框裡。
  • 14.   14   II. 點選畫面左側 Built in 裡的 Text 裡的『join』放到『set ActivityStarter1.DataUri to』右邊的框框。準備將景點與地圖查 詢指令結合為一個字串。 III. 點選畫面左側 Built in 裡的 Text 裡的『””』放到『join』上方 的框框。內容設定為『geo:0,0?q=』。 IV. 點選畫面左側 Built in 裡的 Screen1 下的 ListPicker1 選擇 『Listpicker1.Selection』(這表示User 點選的景點 Item)放到放 到『join』下方的框框。 V. 最後要用 StartActivity 指令來啟動 Google Map。點選畫面左側 Built in 裡的 Screen1 下的ActivityStarter1 選擇『set ActivityStarter1.StartActivity』放到『set ActivityStarter1.DataUri to』。 5. 接下來要設定當 app 起始進入時的初始化設定。 I. 點選畫面左側 Built in 裡的 Screen1 選擇 『When Screen1 Initalize do』放到 Viewer 中。然後要設定 ListPicker 要使用的 List 資料是什麼。
  • 15.   15   II. 點選 Screen1 下的 ListPicker1 選擇『set Listpicker1.Element to』 放到『When Screen1 Initalize do』中。 III. 點選 Variables 下的『get』下拉選擇到”global places”並拖拉 放到『set Listpicker1.Element to』右邊的框框。這樣就完成了 Blocks Editor 的設定了。完成圖如下:   圖表   10   桃園好好玩_Blocks 完成圖      
  • 16.   16   範例執行結果:     圖表   11   起始畫面     圖表   12   景點選單    
  • 17.   17     圖表   13   定位到景點       圖表   14   點選景點顯示內容              
  • 18.   18   參考網站與書籍:   書籍: 1. Android 手機程式超簡單   App  Inventor   入門卷 作者:CAVE 教育團 隊 出版社:馥林文化   2. Google  App  Inventor 開發手冊:不會寫程式也能設計你的 APP   作者: 王培坤   出版社:上奇資訊     網站: 1. http://appinventor.mit.edu   2. http://www.appinventor.tw/