EclipseRCPは使いやすそうだし、OpenLaszloもカバー範囲が広くてよさげだし、
Swingでいくのが手っ取り早いか、Webブラウザに依存するAjaxに走るか。
それぞれに一長一短があり、堅牢さを求めると、
HTMLベースでJavaScript主体でちまちま制御、という話に成りかねない。
であれば、標準でサポートされているSwingなら、5.0から性能も向上したのだし、
ここはSwingで、とも思う。現に、証券や会計等のWebアプリで採用されている。
だが、VBやDelphiと比べ、機能面で見劣りする点は否めない。
（6.0からドラッグ&ドロップやOS連携等の強力なサポートがなされているので、今後期待できることは間違いない）
そんな時折、見つけたのがこれ。
http://finance.google.com/finance
抜群の操作性。Flashで作られている。そういうわけで、Flashをやろうと。
Flash自体はWebデザイナ向けという感じで、デベロッパは手を出しにくい事情があるが、
Flashベースのデベロッパ向けのフレームワークとして、Flexがある。
Flexが3.0からオープンソース化されるとかいう話が出たので、
今後普及に拍車がかかると見込んで、いざ挑戦。
Flex開発環境であるFlex Builderには、以下の２種類がある。
- スタンドアロン版(Eclipseを拡張して単独で動くようにしたもの）
- Eclipseのプラグイン版
JDK6.0
Eclipse 3.3
（上記２つはインストール済みの前提）
Flex Builder 3.0 beta Eclipse plug-in
■Flex 3.0 beta ダウンロード
AdobeのID登録(無償)が必要。
http://labs.adobe.com/technologies/flex/flexbuilder3/
flexbuilder3_b1_win_plugin_061107.exe
beta版なのに30日試用らしい。
シリアル番号の入力はEclipseの「ウインドウ]-[Manage Flex Licences」から行える。
2007年10月まではFlex2のライセンスが有効とのことなので、Flex2のライセンスを持っているk方は存分に試して欲しい。
ダウンロードしたら、実行ファイルを起動して、ちゃちゃっとインストール。
Flexのインストール先と、eclipseのインストール先ディレクトリを聞かれる。
■Flexプロジェクト作成
Eclipseを起動したら、プロジェクトの新規作成ウィザードで、
「Flex」-「Flex Project」を選択する。
次にプロジェクト名を聞かれる。今回は以下のようにした。
プロジェクト名:FlexSample
Server Type：Other/none
次にSDKの選択。
SDKはプラグインインストール時にインストールされたものを使うので、
今回はdefaultを選択。
Use Default SDK
他は特に変更する部分はないので、道なりにウィザードを進めて完了。
■Flexサンプルアプリケーション
●画面のデザイン
プロジェクトの作成が完了すると、Flexパースペクティブへ画面遷移するかを聞かれるので、yes。
Flex開発画面はおおよそ以下のような感じ。
中央のmxmlファイルの編集ビューでは、sourceとdesignに切り替えられる。
画面はdesignモードにて、FlexSample.mxmlファイルに、
Label、InputText、Buttonを配置したところ。
各コントロールは左下のコンポーネントビューからドラッグ&ドロップで配置できる。
ここでは名前を入力して、挨拶を表示するサンプルを作る。
デザインモードでFlexSample.mxmlファイルにコントロールを配置するか、
ソース編集モードで、以下のコードを打ち込む。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label x="10" y="10" text="名前" width="34" height="20"/>
<mx:TextInput x="40" y="8" id="nameText"/>
<mx:Button x="147" y="38" label="send" id="sendButton" />
<mx:Label x="10" y="68" id="helloLabel" width="212"/>
</mx:Application>
この状態で、Eclipseの実行ボタンを押すと、ブラウザが起動し、デザインした画面を見ることが出来る。
制御コードを何も書いていないので、画面に配置したボタンを押しても何も起こらない。
●アクションの実装
アクションを指定するには、ActionScriptを使ってイベントリスナを実装する必要がある。
FlexSample.mxmlのソース編集画面で、以下の赤字のコードを追加入力する。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
private function sayHello():void {
helloLabel.text = "hello " + nameText.text + "!";
}
]]>
</mx:Script>
<mx:Label x="10" y="10" text="名前" width="34" height="20"/>
<mx:TextInput x="40" y="8" id="nameText"/>
<mx:Button x="147" y="38" label="send" id="sendButton" click="sayHello();"/>
<mx:Label x="10" y="68" id="helloLabel" width="212"/>
</mx:Application>
Scriptタグに囲まれた箇所でsayHello関数を定義している。
JavaScriptっぽいが、ActionScriptである。
sendボタンのclick定義でsayHello関数を呼び出すように変更している。
●いざ、実行
こんな感じ。
Flexの魅力をまったく感じないサンプルになってしまった。
0 件のコメント:
コメントを投稿