つれずれなるままの開発日記(最近はFlexばかり..)

Archive for 2009/5/20

エディタ部分を作ろうと思っていたのですが、TextAreaを使って作成するのではいま一つなので、ここはText Layout Frameworkを使ってみました。

Text Layout Frameworkは、Flash10 以上から使えるものなのですが、本格的なエディタがつくれそうです。
Adobeのデモがこちらにありますのでお試しできます。

さて、さっそく私も使ってみました。
Flex Builder 3(3.2) へのインストールは簡単です。
Flex SDK のlibs（私の場合には、C:Program FilesAdobeFlex Builder 3sdks3.2.0frameworkslibs）に、ダウンロードしたファイル
textLayout_edit.swc,textLayout_core.swc,textLayout_conversion.swcをおいて起動すれば完了です。

しかし、プログラムを初めてみたものの、
1046: 型が見つからないか、コンパイル時定数ではありません : ContentElement。
のようなエラーがつぎつぎと・・・・

なぜと、おもったらFlex コンパイラの設定でFlashプレイヤーが9になっていました。

ここを10以上に変更したら、問題が解決しました。

さて、まずは初めてなので簡単なテキストエディタです。機能的にはTextAreaとほとんどかわらないレベルです。
以下のリンクから作ったものが見れます。（Flash 10がないと使えません!!)
サンプル

まずは、Canvasをmxml上に作成します。

<mx :VBox creationComplete="createEnd()">
<mx :Canvas id="textArea" width="400" height="150" backgroundColor="#FFFFFF"/>
</mx><mx :HBox>
	<mx :Button label="Export to text" click="clickExportText()"/>
	<mx :Button label="Export to XML" click="clickExportXML()"/>
</mx>
<mx :TextArea id="output" width="400" height="100" />

このCanvas(textArea)に今回テキスト編集できるようにします。
そのために以下のようなコードが必要になります。
(このコードは、Text Layout Frameworkをダウンロードしたサンプルを参考にしています。）

[AS]
private function createEnd():void{
textFlow = new TextFlow();

var _sprite:Sprite = new Sprite();
textArea.rawChildren.addChild(_sprite);
textFlow.flowComposer.addController(new DisplayObjectContainerController(_sprite,textArea.width,textArea.height));

var editManager:EditManager = new EditManager(new UndoManager());
textFlow.interactionManager = editManager;
textFlow.interactionManager.setFocus();

textFlow.flowComposer.updateAllContainers();
}
[/AS]

ここで、ポイントというかちょっといつもと違うのが、Spriteを作ってそれをCanvasの子に加えます。
また、そのSpriteオブジェクトに、
[AS]
textFlow.flowComposer.addController(new DisplayObjectContainerController(_sprite,textArea.width,textArea.height));
[/AS]
のようにして、エディタを張り付けるとこです。

また、テキストエディタとしては入力された値がテキストでとれる必要があるので、ボタンを押すとテキストを抽出できるようにします。

ボタンを押された時の処理が
[AS]
private function clickExportText():void{
　　output.text = String(TextFilter.export(textFlow,TextFilter.PLAIN_TEXT_FORMAT,ConversionType.STRING_TYPE));
}
[/AS]

また、参考までにXML形式で出力したらどうなるかは、
[AS]
private function clickExportXML():void{
output.text = String(TextFilter.export(textFlow,TextFilter.TEXT_LAYOUT_FORMAT,ConversionType.XML_TYPE));
}
[/AS]
です。

まだ、サンプルをダウンロードしてちょっと見程度ですが、これからもっと調べていきます。
ただ、ちょっと気がついたのが、IMEで日本語を入力しようとしてもインラインで入力できないのは、どうにかなるのでしょうか？

まあ、時間が解決してくれることでしょう。まだ、正式リリースにもなっていないので・・・・