2014年3月13日 星期四

App Inventor 2 的程式 –Self introduce

Self introduce為一個簡單的程式,讓你可以簡單的介紹自己,並且熟悉如何版面設置。


首先您必須已經學會 App Inventor 2 的環境建置與基礎操作。

程式功能分析:Self introduce的功能為進入 APP 後,顯示主頁面一個標題和五張圖片,分別代表是個人資料(大頭照)、理想的校系、家庭影響、學習歷程、未來規畫;使用者點擊一張圖片後,進入其訊息頁面,每個訊息頁面顯示其訊息和返回按鈕,點擊返回按鈕回到主頁面。 



需求元件:(註:圖片名稱中可用英文但不能中文及其它特殊字元否則無法讀取) 
•大頭照(me)
代表理想的校系的圖(school)
•代表家庭影響的圖(home)
•代表學習歷程的圖(learn) 
•代表未來規畫的圖(future)  

開發步驟:

步驟一:請先新增一個名稱為「Selfintroduce」的專案,按下 OK 後,即可進入 App Inventor 的Designer 視窗。(註:專案名稱中可用底線但不能有空格或其它特殊字元)



步驟二:請在視窗右下的媒體 (Media)中,點選上傳媒體(Upload File ...),上傳製作SelfintrouduceAPP的五張圖片,五張圖的檔名會出現在媒體 (Media)底下。(註:圖片名稱中可用英文但不能中文及其它特殊字元否則無法讀取)


步驟三:請點選在視窗右側的屬性(Properties),點選對齊方式(AlignHorizontal)的置中(Center),這樣之後的物件會以中心線排列。



步驟四:請在視窗左側的元件面板(Palette)中,點選頁面布局(Layout)中的垂直排列(VerticalArrangement)元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗。


註:頁面布局(Layout)中的排列方法,需加入其他元件(例如標籤(Lable)、按鈕(Button)元件等) 水平排列(HorizontalArrangement)、垂直排列(VerticalArrangement)皆不限制裡面元件多寡 點擊 ;矩陣排列(TableArrangement)可以放入多個的物件,物件的數量由Row和Column的數量控制。 點擊


步驟五:點選重新命名(Rename),將名稱更改為”index”,使此框格內作為主頁面。



步驟六:請在視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的標籤(Label)元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗的框框裡。



步驟七:請在視窗右側的屬性(Properties)中,更改字型(FontSize):20 ,文字(Text)改成“自我介紹”,字體排列(TextArrangement) 改成置中(center),更該寬度(Width)為 Fill parent。



步驟八:請在視窗左側的元件面板(Palette)中,點選頁面布局(Layout)中的水平排列(HorizontalArrangement)元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗。



步驟九:請在視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的按鈕(Button)元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗中的畫布下方;將其重新命名(Rename)把名字改為me,接著請到右邊的屬性(Properties)面板上,找到 Image,點選先前上傳大頭照的檔名,將文字(Text)預設的文字刪除,並將寬(Width)高(Height)改為100 pixels。




步驟十:類似上一步,在視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的按鈕(Button)元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗中的畫布下方;將其重新命名(Rename)把名字改為school,接著請到右邊的屬性(Properties)面板上,找到 Image,點選代表理想的校系的圖檔,將文字(Text)預設的文字刪除,並將寬(Width)高(Height)改為適合的大小。



步驟十一:請加入home、learn、future按鈕,請自行完成,如下圖即完成主頁面。



步驟十二:點選 組成元件(Components)中的index,更改其屬性是否顯示(Visible)為隱藏(hidden),使主頁面隱藏。



步驟十三:請在視窗左側的元件面板(Palette)中,點選頁面布局(Layout)中的垂直排列(VerticalArrangement)元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗,重新命名為”p1”。



步驟十四:請在視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的標籤(Label)元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗的框框裡,將文字(Text)改為基本資料,文字大小(FrontSize)改為20,文字排版(TextAlignment)改為置中(center),寬(Width)改為Fill parent



步驟十五:請在窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的圖片(Image) 元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗的框框裡;在右側屬性頁面(Properties)將圖片(Picture)改為大頭照,並將寬(Width)(Height)改為合適的大小。



步驟十六:請在視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的標籤(Label)元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗的框框裡,將文字(Text)改為姓名:,文字大小(FrontSize)改為20,寬(Width)改為Fill parent
重複此步驟,加入其他資料,完成此頁面。



步驟十七:點選 (Components)中的p1,更改其屬性(Visible)為隱藏(hidden),使此頁面隱藏。



步驟十八:請繼續依照步驟十三至步驟十六的動作完成理想的校系(p2)、家庭影響(p3)、學習歷程(p4)、未來規畫(p5)



步驟十九:在視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的按鈕(Button)元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗中的畫布下方;將其重新命名(Rename)把名字改為back,接著請到右邊的屬性(Properties)面板上將文字(Text)改為返回,並將文字大小(TextSize)改為20



步驟二十:在使用者介面(User Interface)將按鈕”back”移置最下方,並將所有物件隱藏,顯現主頁面(index)



完成頁面排版



接下來我們就可以開始編寫程式囉!請點擊右上方的Blocks切換到程式頁面。

步驟二十一:請在左側Blocks選單中點選index下的me,在彈出的拼圖式程式區塊中選取 when me.Click do,置於預覽視窗中。



步驟二十二:請在左側Blocks選單中點選Screen1下的p1,在彈出的拼圖式程式區塊中選取set p1.Visible to,卡入其中。


步驟二十三:請在左側Blocks選單中點選下Build-in的Logic,在彈出的拼圖式程式區塊中選取true,卡入其中。


步驟二十四:請繼續依照步驟二十 至步驟二十二的動作執行,在左側Blocks選單中點選back找到 set back.Visible to放置在set p1.Visible to true 之下,再來在左側Blocks選單中點選 Built-in下的 Logic中的true卡入其中,在左側Blocks選單中點選index找到 set index.Visible to放置在set back.Visible to true 之下,再來在左側Blocks選單中點選 Built-in下的 Logic中的false卡入其中。

步驟二十五:依照步驟二十三,完成when school.Click do,when home.Click do,when .Click do,when learn.Click do,when future.Click do


步驟二十六:完成when back.Click do

完成完整的程式如下:


恭喜完成了此次的範例程式。



沒有留言:

張貼留言