Flex Scheduling Framework

Adobe Labsにスケジュールコンポーネント用のフレームワーク「Flex Scheduling Framework」が公開されています。

簡単ですがサンプルを作成したので掲載します。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="flexlib.scheduling.*" applicationComplete="applicationCompleteHandle()" backgroundGradientColors="[#c0c0c0, #c0c0c0]">

 <mx:Script>
  <![CDATA[

   import mx.collections.ArrayCollection;
   import mx.collections.IList;
   import flexlib.scheduling.scheduleClasses.ColoredScheduleEntry; 
   import flexlib.scheduling.scheduleClasses.SimpleScheduleEntry;

   [Bindable]
   private var start:Date;

   [Bindable]
   private var end:Date;

   [Bindable]
   private var dataProvider:ArrayCollection;

   private function applicationCompleteHandle():void {

    start = new Date(2008, 0, 1, 9, 0, 0);
    end = new Date(2008, 0, 1, 17, 59, 59);

    var entries:ArrayCollection = new ArrayCollection();

    var row1:IList = new ArrayCollection();    
    var entry1:ColoredScheduleEntry = new ColoredScheduleEntry();
    entry1.startDate = new Date(2008, 0, 1, 9, 30, 0);
    entry1.endDate = new Date(2008, 0, 1, 11, 59, 59);
    entry1.label = "会議";
    entry1.backgroundColor = 0x663333;
    row1.addItem(entry1);

    var row2:IList = new ArrayCollection();
    var entry2:ColoredScheduleEntry = new ColoredScheduleEntry();
    entry2.startDate = new Date(2008, 0, 1, 13, 0, 0);
    entry2.endDate = new Date(2008, 0, 1, 15, 59, 59);
    entry2.label = "プログラミング";
    entry2.backgroundColor = 0x336633;

    row2.addItem(entry2);

    entries.addItem(row1);
    entries.addItem(row2);

    dataProvider = entries;
   }

  ]]>
 </mx:Script>

 <mx:VBox x="0" y="0" height="100%" width="100%" verticalGap="0">
  <ns1:Timeline id="timeline" width="800" height="20" startDate="{start}" endDate="{end}"/>
  <ns1:ScheduleViewer id="scheduleViewer" width="800" height="300" startDate="{start}" endDate="{end}" dataProvider="{dataProvider}" entryLayout="flexlib.scheduling.scheduleClasses.layout.SimpleLayout" entryRenderer="flexlib.scheduling.scheduleClasses.renderers.ColoredSolidScheduleEntryRenderer" x="53" y="143"/>
 </mx:VBox>
 
</mx:Application>

下記の画像が実行結果



タイムラインを表示するコンポーネントとスケジュールを表示するコンポーネントは分かれているようです。

タイムラインを表示するには「flexlib.scheduling.Timeline」クラスを使用し、スケジュールを表示するには「flexlib.scheduling.ScheduleViewer」クラスを使用します。

スケジュールをドラッグ&ドロップで移動できるといいのですが、軽くドキュメントを見た限りでは見つかりませんでした。対応しているのでしょうか？

FlexBuilder3を使ってみて

FlexBuilder3が正式にリリースされたので使ってみました。
私の感想ですがFlexBuilder2と比べて格段に良くなったと感じました。

一番嬉しいのはリファクタリングの名前の変更ができるようになったことです。
今まではこの機能がなかったので、クラスの名前を変更したい場合は大変でした。

FlexBuilder3ではFlex2のアプリケーションを開発できないと思っていましたが･･･
FlexBuilder3からEclipseのJDTがJDKを変更できるのと同じように、FlexのSDKを変更できます。



他にも、UIをデザインする画面で拡大できるようになったり、UIコンポーネントの背景色を選択するカラーピッカーが使いやすくなったりと、細かいところもいろいろ変更されているようです。


私はまだ使用していませんが、プロファイリング機能が追加されたのでパフォーマンスチューニングも楽になりそうですね。

Flex2のnavigateToURL

Flex2から任意のURLを新しいブラウザで開きたい場合は「flash.net.navigateToURL」関数を使用すると簡単にできます。

navigateToURLの第一引数には「URLRequest」のインスタンスを、第二引数にはリクエスト結果を表示するウィンドウを指定します。

リクエストメソッドとして「POST」を使用したい場合は「URLRequest」の「method」プロパティに「URLRequestMethod.POST」を設定します。

第二引数はHTMLのAタグに指定する「target」属性のようなもので新しいブラウザを開きたい場合は「_blank」、現在のウィンドウで開きたい場合は「_self」を指定します。

下記にサンプルを掲載します。

var request:URLRequest = new URLRequest("http://www.google.com/");
request.method = URLRequestMethod.POST;
navigateToURL(request, "_blank");

これを実行すると新しいブラウザが開き、GoogleのWebサイトが表示されます。

Flex2でXMLオブジェクトに変数の値を埋め込む

Flex2ではXMLオブジェクトにXMLデータをリテラルで設定する際に、変数の値を埋め込むことができます。

変数を埋め込むにはスコープ上に存在する変数名を「{}」で囲みます。
例えば変数「name」を埋め込む場合は「{name}」となります。

これはXMLの構造が変化しないデータを扱うときに大変便利です。
下記に簡単ですがサンプルを掲載いたします。

var id:int = 100;
var name:String = "山田太郎";

var xml:XML =
 <employees>
  <employee id={id}>{name}</employee>
 </employees>;

trace(xml.toXMLString());

このプログラムを実行するとコンソールに下記のメッセージが表示されます。

<employees>
  <employee id="100">山田太郎</employee>
</employees>

mx.controls.textClasses.TextRangeクラス

以前から気になっていたFlex2のTextRangeクラスを使ってみました。このクラスを使用すれば「TextInput」や「TextArea」に表示されている文字のスタイルを変更することができます。

例えば「editor」というidの「TextArea」に表示されている文字の選択部分を太字にしたい場合は･･･

var textRange:TextRange = new TextRange(editor, true);
textRange.fontWeight = "bold";

とすればOKです。
TextRangeクラスのコンストラクタの第一引数には「TextInput」や「TextArea」などのインスタンスを、第２引数はtrueを設定します（詳細はリファレンスを参照ください)。

文字を太字にする以外にも、下記のようにたくさんのスタイルを設定できるようです。
　・文字の色
　・文字の書体
　・文字の大きさ
　・カーニング
　・文字間
　・文字の整列
　・斜体
　・文字にリンクを設定

PyAMFを使ってみた

PyAMFを使用すればPythonとActionScript3とのデータのやりとりをオブジェクトで行うことができます。PyAMFはDjango・Pylons・CherryPyなどのWebフレームワークに対応しています。

今回はDjangoとFlex2の間でデータを送受信する簡単なサンプルを作成しました。
まずはFlex2ですが「NetConnection」クラスを使用してDjangoにデータを送信します。

■PyAMF.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="applicationCompleteHandle()">

 <mx:Script>
  <![CDATA[
   
   public function applicationCompleteHandle():void
   {

    var netConnection:NetConnection = new NetConnection();
    netConnection.connect("http://localhost:8080/pyamf/");

    var p:Person = new Person();
    p.name = "山田　太郎"
    p.age = 28;

    var responder:Responder = new Responder(onResult, onError);
    netConnection.call("greeting", responder, "Hello PyAMF", p)
   }


   private function onResult(result:*):void
   {
    trace(result)
   }

   private function onError(error:*):void
   {
    trace(error)
   }

  ]]>
 </mx:Script>

</mx:Application>

■Person.as

package
{
 public class Person
 {

  public var name:String;
  public var age:int;

 }
}

続いてDjango側は「pyamf.remoting.djangogateway.DjangoGateway」クラスを使用してFlex2とのデータを送受信します。
views.pyなどにDjangoGatewayを定義してDjangoGatewayのコンストラクタに公開したいメソッドの名称とメソッド自身を辞書に格納して渡します。

def greeting(request, message, person):
 print message
 print person.name.encode("cp932")
 return "Hello Flex2"

gw = DjangoGateway({'greeting':greeting})

あとはurls.pyで上記の「gw」が呼び出されるように設定します。(greetingメソッドを直接呼び出すわけではありません）

from django.conf.urls.defaults import *

urlpatterns = patterns('',
 (r'^pyamf/', 'rstone.moblogger.views.gw'),
)

上記のプログラムを実行するとDjangoでは･･･

Hello PyAMF
山田　太郎

と表示され、Flex2では･･･

Hello Flex2

と表示されました。
Flex2からDjangoに送信したPersonクラスですが、Djangoでは「pyamf.ASObject」になるようです。

Flex2でBase64を扱う方法

今まで気がつきませんでしたが、Flex2の標準クラスに「Base64にエンコードするクラス」と「Base64からデコードするクラス」があるんですね。しかもFlex2 リファレンスガイドには掲載されていないようです。

Base64にエンコードするには「mx.utils.Base64Encoder」、Base64からデコードするには「mx.utils.Base64Decoder」を使えばOKです。

下記に簡単なサンプルを掲載します。

var srcByteArray:ByteArray = new ByteArray();
srcByteArray.writeObject("あいうえお");

var encorder:Base64Encoder = new Base64Encoder();

/* Base64でエンコード */
encorder.encodeBytes(srcByteArray);

/* エンコード結果を取得 */
var encodeString:String = encorder.flush();
trace("Base64 Encode: " + encodeString);

var decoder:Base64Decoder = new Base64Decoder();

/* Base64をデコード */
decoder.decode(encodeString);

var dstByteArray:ByteArray = decoder.flush();
trace("Base64 Decode" + dstByteArray.readObject());

Flex2でXMLの要素・属性を削除する方法

Flex2でXMLの要素・属性を削除するメソッドはXMLクラスにはありません。要素・属性を削除するには「delete演算子」を使用します。

例えば、下記のようなXMLデータがあった場合・・・

var employeeXml:XML =
<employees>
  <employee id="1" name="鈴木">
  <employee id="2" name="佐藤">
  <employee id="3" name="田中">
</employee>;

鈴木さんの要素を削除するには

delete employeeXml.employee[0];

とやれば削除できます。
また、属性を削除したい場合は・・・

delete employeeXml.employee[0].@name;

とすれば、鈴木さんの名前(name属性)が削除されます。
私はXMLクラスに要素・属性を削除するメソッドがあると思っていました。

Flex2からWebカメラを使って写真をキャプチャーする方法

Flex2ではCameraクラスを使用すると、Flash Playerを実行するパソコンに接続されたWebカメラから画像をキャプチャーすることができます。

Flex2を使用してWebカメラから画像をキャプチャーするサンプルを作成したので掲載いたします。
このサンプルはWebカメラが接続されているコンピュータ以外では動作させることができません。

詳細はサンプルのFlash上で右クリックをしてソースを参照してください。

This text is replaced by the Flash movie.

Flex2で「AutoComplete」を使用する

Flex Exchangeに入力に応じて候補が表示されるコンポーネント「AutoComplete」があったので使用してみました。

AutoCompleteは「mx.controls.ComboBox」を継承しているので、使用方法はComboBoxと同様に「dataProvider」に候補として使用するデータを設定してください。

下記にサンプルを掲載します。（Flash上で右クリックすればソースを見ることができます)

This text is replaced by the Flash movie.

Flex2で「MaskedTextInput」を使用する

穴埋め方式で日付を入力する機能が必要になり、Webで探したところAdobeのFlex Exchangeに「MaskedTextInput」というコンポーネントがありました。

ダウンロードして使ってみたのでサンプルを掲載します(Flash上で右クリックすればソースを表示できます)

This text is replaced by the Flash movie.