Flex ?? ???? ???? ?????

1
Flex ???????????????

• (?)CO-CONV?? ??

2
????
3

• ???? ??????????????

http//tech.nitoyon.com/
4
Agenda

1. Flex??
2. ???????????????
3. ?????????????
4. ???

5
1
6
Flex??
7
Flash ? ActionScript ????
8
???
9
???????
10
??
11
??????
12
Flash???????
13
Java?C?????????????
14
??
15
???GUI???
16
(No Transcript)
17
XML???
18
???

• ltmxPanel title"???"gt
• ltmxHBoxgt
• ltmxButton label"???"/gt
• ltmxCheckBox label"????????"/gt
• ltmxRadioButton label"??????"/gt
• ltmxComboBox dataProvider"array"/gt
• lt/mxHBoxgt
• lt/mxPanelgt

19
???

• ltmxPanel title"???"gt
• ltmxHBoxgt
• ltmxButton label"???"/gt
• ltmxCheckBox label"????????"/gt
• ltmxRadioButton label"??????"/gt
• ltmxComboBox dataProvider"array"/gt
• lt/mxHBoxgt
• lt/mxPanelgt

20
???

• ltmxPanel title"???"gt
• ltmxHBoxgt
• ltmxButton label"???"/gt
• ltmxCheckBox label"????????"/gt
• ltmxRadioButton label"??????"/gt
• ltmxComboBox dataProvider"array"/gt
• lt/mxHBoxgt
• lt/mxPanelgt

21
???

• ltmxPanel title"???"gt
• ltmxHBoxgt
• ltmxButton label"???"/gt
• ltmxCheckBox label"????????"/gt
• ltmxRadioButton label"??????"/gt
• ltmxComboBox dataProvider"array"/gt
• lt/mxHBoxgt
• lt/mxPanelgt

22
???

• ltmxPanel title"???"gt
• ltmxHBoxgt
• ltmxButton label"???"/gt
• ltmxCheckBox label"????????"/gt
• ltmxRadioButton label"??????"/gt
• ltmxComboBox dataProvider"array"/gt
• lt/mxHBoxgt
• lt/mxPanelgt

23
?????
24
Anywhere.FM http//www.anywhere.fm/player/
25
SearchMash (Google????????)
26
Google Analytics AIR beta
? ???AIR??UI?Flex???????
27
?????
28
2
29
???????????????
30
??
31
???????????????????
32
??????????????????
33
?
34
lt?xml version"1.0" encoding"utf-8"?gtltmxApplica
tion xmlnsmx"http//www.adobe..."gt
ltmxLabel text"???"/gt ltmxHBoxgt
ltmxDateField/gt ltmxLabel text""/gt
ltmxDateField/gt lt/mxHBoxgtlt/mxApplicationgt
35
lt?xml version"1.0" encoding"utf-8"?gtltmxApplica
tion xmlnsmx"http//www.adobe..."gt
ltmxLabel text"???"/gt ltmxHBoxgt
ltmxDateField/gt ltmxLabel text""/gt
ltmxDateField/gt lt/mxHBoxgtlt/mxApplicationgt
36
lt?xml version"1.0" encoding"utf-8"?gtltmxApplica
tion xmlnsmx"http//www.adobe..."gt
ltmxLabel text"???"/gt ltmxHBoxgt
ltmxDateField/gt ltmxLabel text""/gt
ltmxDateField/gt lt/mxHBoxgtlt/mxApplicationgt
??????????
37
lt?xml version"1.0" encoding"utf-8"?gtltmxApplica
tion xmlnsmx"http//www.adobe..."
xmlnscomp""gt ltmxLabel text"???"/gt
ltcompDateRange/gtlt/mxApplicationgt
38
lt?xml version"1.0" encoding"utf-8"?gtltmxHBox
xmlnsmx"http//www.adobe
.com/2006/mxml"gt ltmxDateFieldgt ltmxLabel
text""/gt ltmxDateField/gtlt/mxHBoxgt
DateRange.mxml
39
??
40
???????
41
???????????
42
????UP
43
???
44
???????????
45
????????
46
???????
47
?????????????????
48
3
49
?????????????
50
??????3?????
51
1
????????????
2
?????????????
3
?????????
52
???????????????????
1
????????????
53
?????????????
54
UIComponent
ScrollControlBase
Button
ListBase
Tree
DataGrid
55
UIComponent
ScrollControlBase
Button
ListBase
Tree
DataGrid
MyButton
MyTree
56
???????????????????
57
protected????????????????????
58
super????????????????
59
????????????????
60
???? private ???????????
61
2
?????????????
??????????????????????????
62
UIComponent
ScrollControlBase
Button
MyButton
ListBase
???
Tree
DataGrid
MyTree
???
63
mx.controls.Button????????frameworks\source\mx
\controls\Button.as
64
mx.controls.Button????????frameworks\source\mx
\controls\Button.as(2,355?!!!)
65
?????????
66
?????????
67
?????????
68
???OK?????NG
???????Flex SDK??license.htm????????
69
1??????????????
3
?????????
2
70
UIComponent
ScrollControlBase
Button
MyComp
ListBase
Tree
DataGrid
UIComponent ?????
71
UIComponent????
72
?????????????
73
?????????????
74
???

• ltmxApplication xmlnsmx"http//www..."
• xmlnscomp""gt
• ltcompCircle
• text"test"
• color"ffffff"
• backgroundColor"336699"
• width"100"
• height"100"/gt
• lt/mxPanelgt

75
??? (1/6) ?????

• Package
• import flash.text.
• import flash.events.Event
• import mx.core.UIComponent
• public class Circle extends UIComponent
• // ????
• private var textFieldTextField
• (???)

76
??? (2/6) ?????

• / color ????? /
• // ????
• private var _coloruint
• // getter
• public function get color()uint
• return _color
• // setter
• public function set color(valueuint)void
• _color value
• dispatchEvent(new Event("colorChange"))

77
??? (3/6) ?????(cont.)

• / backgroundColor ????? /
• // ????
• private var _backgroundColoruint
• // gettersetter ???????
• / text ????? /
• // ????
• private var _textString
• // gettersetter ???????

78
??? (4/6) ???????

• // ???????
• public function Circle()
• // TextField ??
• textField new TextField()
• addChild(textField)
• // ??????
• addEventListener("colorChange",
  colorChangeHandler)
• addEventListener("backgroundColorChange",
  bgColorChangeHandler)
• addEventListener("textChange",
  textChangeHandler)

79
??? (5/6) ????????

• private function colorChangeHandler(eventEvent
  )void
• render()
• private function bgColorChangeHandler(eventEve
  nt)void
• render()
• private function textChangeHandler(eventEvent)
  void
• render()

80
??? (6/6) ????

• // ????
• private function render()void
• graphics.clear()
• graphics.beginFill(backgroundColor)
• graphics.drawEllipse(0, 0, unscaledWidth,
  unscaledHeight)
• graphics.endFill()
• var tfTextFormat textField.getTextFormat(
  )
• tf.color color
• tf.size 30
• textField.defaultTextFormat tf
• textField.text text ? text ""

81
???!
82
???
83
?????????
84
?????????????????????
85
??????????
86
circle.text "hoge"circle.color
0xffff00circle.backgroundColor 0xff0000

• ???????????3???

87
UIComponent???!
88
??????????
89
setter???????????

• // setter
• public function set color(valueuint)void
• _color value
• dispatchEvent(new Event("colorChange"))
• invalidateDisplayList()

90
????????????????
invalidateDisplayList()
91
addEventListener???????????????????
92
updateDisplayList?????

• override protected function updateDisplayList(wNu
  mber, hNumber)void
• super.updateDisplayList(w, h) // ????!!
• render()

93
1??????????????????Flex?????????????
updateDisplayList()
94
circle.text "hoge"circle.color
0xffff00circle.backgroundColor 0xff0000

• 3? invalidate????
• ?????1???

95
(??)???????3??
96
1. ????

• invalidateDisplayList?updateDisplayList

97
2. ?????

• invalidateSize?measure

98
3. ?????????

• invalidateProperties
• ?commitProperties

99
?????????
100
changed??????

• // change ???
• private var colorChangedBoolean false
• // setter
• public function set color(valueuint)void
• _color value colorChanged true
• dispatchEvent(new Event("colorChange"))
• invalidateDisplayList()

101
changed????true??????????

• // ????
• private function render()void
• // (?)
• if(colorChanged)
• colorChanged false
• var tfTextFormat textField.getTextFormat
  ()
• tf.color color
• tf.size 30
• textField.defaultTextFormat tf
• textField.text text ? text ""

102
changed????true??????????

• // ????
• private function render()void
• // (?)
• if(colorChanged)
• colorChanged false
• var tfTextFormat textField.getTextFormat
  ()
• tf.color color
• tf.size 30
• textField.defaultTextFormat tf
• textField.text text ? text ""

????????????????????
103
????????????
104
???????????????????

• // ???????
• public function Circle()
• // TextField ??
• textField new TextField()
• addChild(textField)

105
???????????????????

• // ???????
• public function Circle()
• override protected function createChildren()
• super.createChildren()
• // TextField ??
• textField new TextField()
• addChild(textField)

106
createChildren()?addChild ??????Flex???????
107
new ?????addChild ????????????????????????
108
????????createChildren()??????
109
???????createChildren???????
110
?????????????
??
111
???????????
112
????????????UI????????
113
UIComponent???Flex??
114
UIComponent?????????
115
4
116
???
117

• ???????????????
• ??????????????
• ?????????UIComponent??????1????

118
????

• Flex ?????????????flex2_createextendcomponents.pd
  f
• ????????????http//d.hatena.ne.jp/s-ohira/