2014年2月6日 星期四

App Inventor 2 的範例程式 - Colored Dots

Colored Dots是使用第二個視窗來選擇塗料顏色的簡單繪圖程式。

此範例教學與PaintPot有點類似。

原始範例: Colored Dots from MIT

程式功能分析:
PaintPot不同的是,此範例程式是在第二個視窗中,讓用戶經由紅綠藍三色組合出新的顏色。在第二個視窗中,創出新的顏色後,將會存到第一個視窗,拿去使用。



開發步驟:

步驟一:首先設計出第一個視窗面版,如下圖




























(1)
動作:點選User Interface中的Label元件,將其命名為TitleLabel
屬性:
l   Text改成Paint with Colored Dots
l   勾選FontBold
l   FontSize改成16
l   TextAlignment改成center
l   Width改成Fill parent
目的:顯示標題。

(2)
動作:點選Layout中的HorizontalArrangement元件,將其命名為HorizontalArrangement1
屬性:
l   Width改成Fill parent
l   AlignHorizontal 改成Center
目的:可以整齊放置4Label元件。

(3)
動作:點選User Interface中的Label元件,將其命名為ColorLabel
屬性:
l   Text改成Current Color
目的:顯示"Current Color"

(4)
動作:點選User Interface中的Label元件,將其命名為ColorSample
屬性:
l   Text空白
目的:顯示調出來的顏色。

(5)
動作:點選User Interface中的Label元件,將其命名為DotSizeLabel
屬性:
l   Text改成Dot size
目的:顯示" Dot size"

(6)
動作:點選User Interface中的Label元件,將其命名為DotSizeValue
屬性:
l   Text空白
目的:顯示點的大小。

(7)
動作:點選Drawing and Animation中的Canvas元件,將其命名為Canvas1
屬性:
l   Width改成Fill parent
l   Height改成300pixels
目的:顯示在此觸碰的點。

(8)
動作:點選Layout中的HorizontalArrangement元件,將其命名為HorizontalArrangement2
屬性:
l   Width改成Fill parent
l   AlignHorizontal 改成Center
目的:可以整齊放置2Button元件和ListPicker元件。

(9)
動作:點選User Interface中的Button元件,將其命名為EraseButton
屬性:
l   Text改成 Erase
目的:清除畫布。

(10)
動作:點選User Interface中的Button元件,將其命名為openBrushPicker
屬性:
l   Text改成 Customize Brush
目的:開啟第二個視窗。

(11)
動作:點選User Interface中的ListPicker元件,將其命名為ListPicker1
屬性:
l   Text改成 Stored Colors
目的:從數據庫中載入顏色列表。

(12)
動作:點選Storage中的TinyDB元件,將其命名為TinyDB1
目的:儲存顏色名稱和值。

步驟二:創造第二個視窗,並為它取名字。










步驟三:設計出第二個視窗面版,如下圖





























(1)
動作:點選User Interface中的Label元件,將其命名為RedLabel
屬性:
l   Text改成Red
目的:顯示"Red"

(2)
動作:點選User Interface中的TextBox元件,將其命名為Red
目的:寫入紅色的色彩量(0-255)

(3)
動作:點選Layout中的HorizontalArrangement元件,將其命名為RedHorizontalArrangement
目的:放置RedLabelRed

(4)
動作:點選User Interface中的Label元件,將其命名為BlueLabel
屬性:
l   Text改成Blue
目的:顯示"Blue"

(5)
動作:點選User Interface中的TextBox元件,將其命名為Blue
目的:寫入藍色的色彩量(0-255)

(6)
動作:點選Layout中的HorizontalArrangement元件,將其命名為BlueHorizontalArrangement
目的:放置BlueLabelBlue

(7)
動作:點選User Interface中的Label元件,將其命名為GreenLabel
屬性:
l   Text改成Green
目的:顯示"Green"

(8)
動作:點選User Interface中的TextBox元件,將其命名為Green
目的:寫入綠色的色彩量(0-255)

(9)
動作:點選Layout中的HorizontalArrangement元件,將其命名為GreenHorizontalArrangement
目的:放置GreenLabelGreen

(10)
動作:點選Layout中的VerticalArrangement元件,將其命名為VerticalArrangement1
目的:放置RedHorizontalArrangementBlueHorizontalArrangementGreenHorizontalArrangement

(11)
動作:點選Drawing and Animation中的Canvas元件,將其命名為Canvas1
屬性:
l   Width改成Fill parent
l   Height改成Fill parent
目的:測試顏色和顏色的點大小。

(12)
動作:點選Layout中的HorizontalArrangement元件,將其命名為HorizontalArrangement1
屬性:
l   Width改成Fill parent
目的:放置VerticalArrangement1Canvas1

(13)
動作:點選User Interface中的Label元件,將其命名為DotRadius
屬性:
l   Text改成Dot Size
目的:顯示"Dot Size"

(14)
動作:點選User Interface中的TextBox元件,將其命名為RadiusTextBox
目的:顯示現在點的大小。

(15)
動作:點選Layout中的HorizontalArrangement元件,將其命名為RadiusHorizontalArrangement
目的:放置DotRadiusRadiusTextBox

(16)
動作:點選User Interface中的Button元件,將其命名為TestColorButton
屬性:
l   Text改成Test Color
目的:按下按鈕,讓LabelTestColorSample產生顏色。

(17)
動作:點選User Interface中的Label元件,將其命名為LabelTestColorSample
屬性:
l   Width改成Fill parent
l   Text改為空白
目的:顯示創建出來的顏色。

(18)
動作:點選Layout中的HorizontalArrangement元件,將其命名為TestHorizo​​ntalArrangement
屬性:
l   Width改成Fill parent
目的:放置TestColorButtonLabelTestColorSample

(19)
動作:點選User Interface中的Button元件,將其命名為ResetColorButton
屬性:
l   Text改成Reset Brush Selector
目的:按下按鈕,讓顏色值重置。

(20)
動作:點選User Interface中的Button元件,將其命名為ReturnToPainting
屬性:
l   Text改成Return to Painting
l   FontSize改成16
目的:按下按鈕,帶著新的顏色和圓點大小回到第一個視窗。

(21)
動作:點選Layout中的VerticalArrangement元件,將其命名為VerticalArrangement2
屬性:
l   Width改成Fill parent
l   AlignHorizontal 改成Center
目的:放置ResetColorButtonReturnToPainting

(22)
動作:點選User Interface中的Notifier元件,將其命名為Notifier1
目的:顯示保存顏色和輸入顏色名稱的對話框。

(23)
動作:點選Storage中的TinyDB元件,將其命名為TinyDB1
目的:儲存顏色名稱和值。


步驟四:切換到第一個視窗的Blocks,寫入第一個視窗的主程式。








解釋:當視窗打開時,它的點初始值半徑為3,顏色為黑色(1)。當按EraseButton時,畫布會清乾淨(2)。當觸碰到畫布時,App會繪製目前的半徑和顏色的圓點,而這顏色是由ColorSample決定(3)

步驟五:寫入連接Brush_Picker視窗的程式。










解釋:當按下openBrushPicker時,Screen1open another screen with start value去打開Brush_Picker和傳遞來自Screen1的值(1)。在一般情況下,一個視窗去打開另一個視窗是利用open another screen,然後得到一個結果後,返回when other screen closed事件。而在這種情況下,該值從Screen1傳遞到Brush_Picker,因此APP可以知道目前的值(2)


※註:make a list一開始是只能插兩個拼圖,若要更多,可以按下左上深藍色方框,將左上的item拉去右邊拼上,進而新增。


沒有留言:

張貼留言