アピラクンのFlashどしろーとがS2Flexに挑戦記

1900-05-01

[]コンポーネント概観:バリデータ編 18:03

バリデータを使ったサンプルです。

1:  
2:  <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
3:     <mx:ZipCodeValidator field="empModel.zip" />
4:     <mx:TextInput id="iname" width="80"/>
5:     <mx:TextInput id="izip" width="80"/>
6:     <mx:Model id="empModel">
7:        <name>{iname.text}</name>
8:        <zip>{izip.text}</zip>
9:     </mx:Model>
10:  </mx:Application>

まず6-9行目に<mx:Model>というタグを使ってデータモデルを表現しています。4-5行目の入力ボックスと関連付いているのがわかるかと思います。3行目のバリデータの定義はモデルの項目に対して関連付けています。これでフォーカスが外れた時等に自動でバリデーションがかかります。

あと、例えばボタンが押された時にモデル全体に対してバリデートしたい場合はこんな感じで出来ます。

<mx:Button label="regist" click="mx.validators.Validator.isStructureValid(this,'empModel');"/>

バリデータも見ればわかるものばかりなので、さらっといきます。

CreditCardValidator
クレジットカード用のバリデータ。
CurrencyValidator
通貨用のバリデータ。
DateValidator
日付用のバリデータ。
EmailValidator
メールアドレス用のバリデータ。
NumberValidator
数値用のバリデータ。
PhoneNumberValidator
数値用のバリデータ。
SocialSecurityValidator
SocialSecurityNumberというのはUSの社会保険番号だそうです。日本語版では無くなってたりしそう。

BuilderではバリデータをD&Dするとfieldの手打ち入力が要求されるのですが、定義しているモデルから選択出来ても良さそうなのになー。

1900-04-01

[]コンポーネント概観:フォーマッタ編 18:03

今までと違い、UI部品ではない(目に見えない)類のコンポーネントですので、軽く使い方を。サンプルソースはこちら。

1: 
2: <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
3:   <mx:CurrencyFormatter id="currencyFormatter1">
4:   </mx:CurrencyFormatter>
5:   <mx:VBox>
6:     <mx:TextInput text="{currencyFormatter1.format(1000000)}"/>
7:   </mx:VBox>
8: </mx:Application>

見ればすぐわかりますが、3行目のフォーマッタコンポーントをID付きで定義し(BuilderではD&Dした際に入力を要求されます)、6行目のように、{(フォーマッタのID).format(値)}とすればOKです。

注意点は、目に見えない類のコンポーネントは、mx:Application直下に配置する必要があるようです。私は最初mx:VBox配下にフォーマッタを置いたら、こんなエラーが出ました。

Error /control3.mxml:6 
Faceless components may only be allowed as children of the root tag

だってBuilderで、そこにD&D出来るんだもん・・・。気を取り直して一覧いってみます。見ればすぐわかるものばかりなので、説明もさらっと流します。

CurrencyFormatter
通貨用のフォーマッタ。
DateFormatter
日付用のフォーマッタ。
NumberFormatter
数値用のフォーマッタ。
PhoneFormatter
電話番号用のフォーマッタ。
StringFormatter
文字列用のフォーマッタ。
ZipCodeFormatter
郵便番号用のフォーマッタ。

1900-03-01

[]コンポーネント概観:コンテナ編 14:06

コンテナとは?うまく説明出来ないので1分だけマニュアル読みました(^^ゞ

  • 複数のコントロールを配置する長方形の領域。コンテナ内にコンテナも配置出来ます。うわーマニュアル調ー(^^ゞ
  • Flexアプリケーションは、ルートに「Application」というコンテナを1つ持ちます。

そっか。mxmlファイルの出だしが<mx:Application>というのはそういうことなのですね。ではいってみよー。

Canvas
絶対座標でコントロールを配置するためのコンテナ。SwingのnullなLayout。
HBox
コントロールを水平に配置する。X_AXISなBoxLayout。
VBox
コントロールを垂直に配置する。Y_AXISなBoxLayout。
Grid
n×n配置です。1行がGridRow、1行内の1項目がGridItemというタグで表現されます。GridLayout。
Tile
n×nですが、アイテムが左上から順番に配置されていきます。
HDividedBox
コントロールを水平に配置し、列毎のウィンドウサイズをD&Dで変更できるものです。
VDividedBox
コントロールを垂直に配置し、行毎のウィンドウサイズをD&Dで変更できるものです。

これ試している時に一回Builderハングしました。同じ操作をしたが再現せず。むー。

Form
フォームです。HTMLと同じように使うのだと思いますが、後で調べます。
FormHeading
フォーム内のヘッダ?何に使うんだろう?
FormItem
フォーム内のアイテム。

ふうふう。

Panel
枠付きの領域が出来ます。SwingのJPanelと同じようにカスタムコンポーネントを作るときに使える予感!(違ってたらすいません)
ControlBar
Panelの下部に配置して、ボタンとかを乗っけられます。。
TitleWindow
Panelの上部に配置します、Windowsのシステムバーみたいな感じです。

この辺怪しいです。そろそろマニュアル読もうかなあ。

ViewStack
複数のコンテナを配置出来ますが表示するのはその中の1つだけ。後述するリンクバーと組み合わせて、タブっぽく切り替え出来ます。
Accordion
ViewStackっぽいですが、見出しは見えてて、選択するとそこが表示されます。Eclipseのパレットみたいな・・・
TabNavigator
タブです。1タブ追加するたびに1Form出来ますが、サンプルではForm使っていないので必須ではなさそう。
TabBar
ViewStack内の指定したコンテナを表示出来ます。見栄えがタブ。
LinkBar
ViewStack内の指定したコンテナを表示出来ます。見栄えがリンク。

いじょ!コンテナも充実してますねー。

1900-02-01

[]コンポーネント概観:コントロール編 00:10

いきなりいっぱいあるぞー。タグの頭の「mx:」は省略します。あやしいところは都度こっそり修正します。

Label
1行のラベルです。編集不可。
TextInput
1行入力ボックス。
TextArea
テキストエリア。複数行OKの入力ボックス。
Text
複数行のラベル。
Link
リンク。サンプル通りに使うと、別ウィンドウに普通のHTMLが表示される。アンカーとはちょい違うか?

メニューの区切りのところで、こんな感じで一息いれます。次いってみよー。

Button
ボタン。普通のボタン(説明になってないぞ!)
RadioButton
ラジオボタン。D&Dするとグループ名を入れるダイアログが。いいねえ。
RadioButtonGroup
複数のラジオをいっぺんに定義できます。便利!RadioButtonGroupタグ自体の機能はなんだろう?
CheckBox
チェックボックス。デフォルトで文字クリックしてもチェックされます。

この辺まではHTMLと同じような部品ですね。では次!

NumericStepper
入力ボックスと上ボタン、下ボタンがセットになってて、数値を上下出来るやつ(説明へたすぎ!)
HSlider
水平スライダーバー。こういうの業務アプリで使ったことない・・・
VSlider
垂直スライダーバー。たぶん、このノリでHで始まるのが水平(Horizontal),Vで始まるのが垂直(Vertical)なのでしょう。
DateChooser
カレンダーです。
DateField
カレンダーと入力ボックスがセットになっているやつです。カレンダーから選択するだけでスコっと入ります。

だんだんリッチな感じ(^^ゞ

ComboBox
コンボボックス。ぺろっとめくれるやつ。
List
リストボックス。めくれないやつ。縦にスクロールバーがあるやつです。
HorizontalList
水平リストボックス・・・っていうのかな?。横にスクロールバーがあります。
TileList
タイルリスト:n×nのリストボックス。サンプルだとアイテムは画像です。
Tree
ツリーです。開閉がするするっとアニメしてかこいい!
DataGrid
データグリッド。デフォルトで1行ずつ色違いでかこいい!

一応全部貼り付けているので、もう画面はぐちゃぐちゃ(^^ゞ

Spacer
画面にスペースを入れ込むものかな?これ便利かもー。
HRule
水平線。
VRule
垂直線。

あとちょっと!

Image
画像表示用です。
Loader
うーんImageとの違いがよくわかりません・・・。
MediaDisplay
動画再生用。
MediaController
動画の制御UI。停止、トラックの前後、音量のつまみとか。
MediaPlayback
MediaDisplayとMediaControllerがセットになった感じです。

最後!

MenuBar
メニューバーです。するっとアニメ付き。
ProgressBar
プログレスバー。なうろーでぃんぐ!

いじょ!ふー。

1900-01-01

[]コンポーネント概観:カテゴリ編 18:26

さてFlex Builderを使えば簡単リッチクライアント!といきたいところですが、そこはどしろーと、Flashにはどんな画面部品(コンポーネント)があるかもよくわかりません(^^ゞ

Flex Builderはメニューの下にコンポーネントがずらずらっと並んでいるのですが、コンポーネントが多いのでタブでカテゴリ分けされています。まずは画面左から順に、カテゴリの概要を見てみます。全然マニュアル見ていないので嘘混じっているかもしれませんが(^^ゞ

charts
チャート用のコンポーネントですね。折れ線グラフとか円グラフとか。
containers
画面部品の土台となるコンポーネント。VBでいうコンテナ、Javaでいうレイアウトマネージャに近いのかな?
controls
画面部品。ボタンとか入力ボックスとかデータグリッドとか。
core
Repeaterというのが1個だけあります。繰り返し制御?
effects
視覚効果を制御するもの。MoveとかZoomとか・・・Flashっぽいやつか(^^ゞ
formatters
フォーマッター。日付、電話番号、通過、郵便番号とかとか
preloaders
なんだろ?画面が変わるときの「お待ちください」用に使うものかな?
validators
バリデータ。フォーマッターと同じようなものが並んでいます。

ふむふむ。次にすべてのコンポーネントとタグ(って呼び方は「Flexタグ」でいいのかな?)の対応をざっと見てみようと思います。使い方がわからないものは飛ばして、わかったら後でこっそり説明加えます。Flex Builderのメニューに無いけど重要そうなコンポーネントがあったらそれも加えるかも(肝心のリモートオブジェクト呼び出し用のコンポーネントが見あたらないので・・・)。自分的によく使いそうなのから、以下の順番でいこうと思います。

  • コントロール(cotrols)
  • コンテナ(containers)
  • フォーマッタ(formatters)
  • バリデータ(validators)
  • チャート(charts)
  • エフェクト(effects)
  • その他(core,preloaders)

コンポーネントの概要はサンプルにあるFlex Samples Explorerを見ればだいたいわかりそうです。

1900 | 01 | 02 | 03 | 04 | 05 | 06 |
2004 | 10 |