Flex Builderリアルタイム備忘録@81日目
冬眠したい……。
そんな気持ちで一杯の今日この頃だが、のんびりなんかしてられなくなった。あと2日でFlex Builderを使ってアプリケーションを作る事になった。
いや、Flash CS4でも作れるといえば作れるのだが、どうせならということで一念発起ししてFlex Builderで作成することにチャレンジした。
↑原語じゃなく,言語ですね w
何がなんだか分からない状況なので、いつか誰かのために役立つのではないかと、雑多な事をメモした。あくまでも自分のメモなので、間違ったところがあるかもしれませんので、読む人は自己責任で。
Flex Builderとは何 ?
どんどんと複雑になっていくWebの世界で、動的なページを作成するための便利ソフト。MXMLとActionScriptがセットになっていると考えても良いかもしれない。MXMLがレイアウトなどを担当。インタラクティブなところをActionScriptが担当。以前はこのような連携をとるのが面倒だったが、このソフトによって大分楽になったらしい。
まずどうしたら良い?
まずプロジェクトと呼ばれるものを作れば良い。Flashなどの場合は、flaファイルとASファイルがあるが、Flexの場合はその他の多くのファイルと連携しないといけない。
そのようなものを管理するために、プロジェクトと呼ばれるものを使う。
次はどうする?
mxmlという拡張子のファイルがあるが、これがレイアウトの情報などをまとめていると考える。最初に設定されたmxml データを開き、「ソース」と「デザイン」と二つ切り換えてみると良い。デザインビューにすると、コンポーネント一覧が左下に表示されるので、適当にドラッグ&ドロップしてみると良い。
いわゆる「アプリケーション的なもの」の見映えのものがすぐに完成。
さて、問題はそれからだ。
色々なサイトを見ても、そのあたりまではわかるが、そこから先が分からない。例えばActionScriptで簡単な図形を描画するだけのものを作成しようとしたら、具体的に何をどうしたら良いのだろうか?
新規でAS関連のものを探してみたら、「ASインターフェイス」「ASクラス」「ASファイル」の3種類あった。これらは一体何が違うのか?
ヘルプを見てみるものの、「インターフェイスとは、各種のクラスが共有できる定数とメソッドのコレクションです。」とのこと。
うーんよくわからない。
これをすんなり理解できるぐらいだったら、ヘルプなんて要らないだろうというのが正直な感想。
こういう時は基礎に返るのが基本。というわけで、ちゃんとヘルプを読んでみる。
……
14:30
ふむ。なるほど。初心者が基礎からわかるようなものを、よく「チュートリアル」と呼ぶが、このヘルプの場合は「ワークベンチ」と読んでいるらしい。このワークベンチは丁寧に書かれていて、理解しやすい。もう少し読んでみるかな。
14:36
一通り読んでみた。ものすごく基本的な事を触れているみたいだ。若干日本語訳がカタイところはとあるけれど、まだわかりやすいかな。でもまだASとかの核心には触れていないようだ。もし少し調べる必要が有るな。
14:43
MXMLがベースだが、こっちはデザインだけと割り切って考えた方が良いみたい。ASでインタラクティブ性を補完するわけだが、他のプログラミングと同じような考え方で、インクルードという概念で共通している。
どうやってインクルードするか?
という問題についてだが、MXMLのソースを直接いじるのは危険かなと思う。何か方法がないのか探し中。毎回ソースに「どのASを使うのか」について記述するのは大変。
15:19
現時点での結果、<mx:Script source=”test.as”/>というコードを書き足す必要あり。なぜかここだけ原始的だけどいいのかな?
ま、いっか。次に進もう。
WindowsとMacとの連携は?
DropBoxの中にプロジェクトフォルダを作っておけば便利。別環境では「開く」ではなく、ファイルメニューの「インポート」でプロジェクトフォルダをインポートすればOK
MXMLのコンポーネントとどのように連携するのか?
コンポーネントには名前のようもなもの「ID」が決められているらしい。数値などはfunctionの引数として獲得する方法もあるが……直接IDを参照できるのだろうか?
16:08
うーん……。
16:22
……できた。あまりにもあっさりとできたので拍子抜けした。「コンポーネントのID.参照したいプロパティ」でOKだ。例えば testInput.textでOK。ドットを入力した時点でプロパティ一覧を提示してくれるのでアホみたいに楽。
何かをクリックしないと動作しないのか?自動的に動作するようにするには?
スクリプトを実行するためには、何かのきっかけが必要になるが、自動的にスクリプトを進める事はできるのだろうか?
16:50
どうやらイベント処理でなんとかなりそう。でもMXMLに書くのか、ASに書くのかよくわからない。個人的な思いでは、なるべくMXMLには触りたくない!!
なんとかなるのか?
16:55
Flexには隊村イン、もとい、タイムラインという概念がない。Flashにはタイムラインという概念がある。そのためちょっと違う考え方をしないといけない。
mxのほうにちょっと書き込めば解決することがわかった。
[actionscript3]
//最初のところの<mx>タグのところ
<mx :Application xmlns (中略) creationComplete="関数名()">
[/actionscript3]
と書き込めばOK!
ASファイルのほうの関数名と一致させるのを忘れないように。
ASでの図形描画の方法
Flashだと図形描画ツールを使えば簡単に絵が描けるのだが、Flexはバリバリのプログラミング環境なのでそんなもんはない。ではどうすれば良いのか?というと、スクリプトで描くしかない。
17:44
山のようなエラーが出た。どうやら、まずはUIComponentオブジェクトをaddChildしておく必要がありそう。
[actionscript3]
var container:UIComponent = new UIComponent();
container.x = 0;
container.y=0;
addChild(container);
[/actionscript3]
と書いておく.その後で適当にスプライトを作成し,addChild
[actionscript3]
var zukei:Sprite = new Sprite();
zukei.graphics.lineStyle(1,0xff0000);
zukei.graphics.drawCircle(0,0,50);
zukei.x=0;
zukei.y=0;
container.addChild(zukei);
[/actionscript3]
とすれば良いようだ。
漠然とだが、containerのような大きなものを作っておいて、それに貼り付けるという手順になるようだ。なんだかめんどくさいが、お作法ならば仕方がない。
でも、AS3について基本的なところから復習できるのは貴重な機会なので、がんばってみようと思う。
これから帰宅。続きは家で。
さぬぅが発起したの?