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

Archive for 5月, 2009

エディタ部分を作ろうと思っていたのですが、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で日本語を入力しようとしてもインラインで入力できないのは、どうにかなるのでしょうか？

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

Text Layout Frameworkを使おうと思ったが、Flash Player10以上じゃないといけない。
それでFlash Player10をインストールを自宅のＰＣ２台に対してインストールを行ったのはいいが、
１台のＰＣではなぜかVer9が立ち上がってしまい、エラーになってしまったのだが、同じ操作を行ったことからこの問題の原因にたどり着くまでに時間がかかってしまった。

というわけで、今回はFlash Playerのバージョン情報を取得しようということで調査。

どうやら、Capabilitiesというクラスにいろいろな情報が入っているらしくそれを取ればいいだけだ。

ちなみに、バージョンの取得は
[AS]
Capabilities.version;
[/AS]
だ。
また、自分のアプリケーションがデバッガバージョンで起動してしまっているのかなどもわかる。

より詳しく知りたい人は、Adobeのページにより詳しく載っているのでそちらをご覧あれ。

CSSのファイルを使わずにプログラムだけでスタイルを指定したくなった。特に、フォント関連ではインストールされているフォントが指定どおりとも限らないし、また、利用者が好きなフォントを選べたほうがいいと思い、その方法を調べた。

まず、準備としてはコンボボックスにフォント一覧を表示する。
こんな感じで、表示します。
[AS]
var ar:Array = Font.enumerateFonts(true);
list.dataProvider = ar;
list.labelFunction = function(data:Object):String{
return data.fontName;
};
[/AS]

さて、以下が指定されたフォント名を設定する方法です。
これで、全体のフォントが変わります。
[AS]
var css:CSSStyleDeclaration = StyleManager.getStyleDeclaration(“global”);
css.setStyle(“fontFamily”,list.selectedLabel);
[/AS]

ここで、フォント関連では日本語フォントではないものを除きたいとおもい、
hasGlyphs(str:String):Boolean
で、
font.hasGlyphs(“あいうえお”);
とやってみましたが、すべてがfalseに・・・・
何か使い方があるのでしょうか・・・・しらべてみます。

ことの発端は、よくアプリケーションであるウィザードコンポーネントを作成しようと思ったところが発端だ。
ウィザードコンポーネントとは、画面が数枚あり、それを「次へ」で遷移していき処理を終了させるというやつだ。

はじめは、ポップアップを切り替えて作ろうとも思ったが、それではたびたび作るときに面倒だと思ったので、いっそ、作成してみようと思った。

しかしながら、意外に難しい。
やろうとしているのはViewStackのように中にコンポーネントをmxmlで追加してくことができて、その部品（ページ）でウィザードが自動的に出来上がるという感じだ。

まずは、ViewStackを継承してあらたに、Wizardとうコンポーネントを作成することにした。

さて、ViewStackを継承してみたものの、どこにボタンを表示させればいいのだ？という疑問にぶつかった。
ボタンを通常どおり、ViewStackにaddChildしては、ボタンがページになってしまうではないか・・・・

んー、と思っていたら、そういえば、TabNavigatorが同じようにViewStackを継承して作っているにも関わらず、
TabBarを上部に表示していたことを思い出した。

このTabBarの部分をHBoxにして下に表示させれば問題ないはずだと気がついた。

で、TabNavigatorを見よう見まねで作りかえ完成した（させた）ものが下のような感じです。

<ui :Wizard>
   <mx :Canvas />
   <mx :Canvas />
   <mx :Canvas />
</ui>

こんな感じで、コンポーネントを表示することができるようにしています。
また、単なる表示するだけなので、今後の課題としては、このボタンを操作とイベントが扱えるようにしたいと思います。

まだ、途中ですが、ソースはここからダウンロードできます。

あと、理解の課題としては、Flexでのコンポーネントのサイズの計算をもっと理解しなければなと思った限りです。

そのPCで使えるフォント一覧を表示するプログラムです。
[AS]
private var fontList:Array = Font.enumerateFonts(true);
[/AS]
上記、fontListをdataProviderにしてDataGridを表示したものが以下のようになります。

ここをクリックで全画面表示になります。

Flexのデバッグをすると、
「Flex Builderでは、必要なFlash Playerのデバッガバージョンを見つけることができません。Flash Player9のデバッガバージョンをインストールするか、Flex Builderを再インストールする必要があります。」

とエラーが出てしまいます。

ちなみに、このエラーはSDK3.2にバージョンアップしたら出てくるようになったと思います。

ここで、上のダイアログに出てくるURLに行ってもFlash Player 10のいデバッガはないようですが、
http://www.adobe.com/support/flashplayer/downloads.html
にはありました。

ここにある、
Adobe Flash Player 10 — Debugger Versions (aka debug players or content debuggers)
というのをインストールしたら出なくなりました。

CentOSでのiptablesの設定で再起動時にも設定が反映されるようにするために、ファイルに記述するのだがいつも忘れてしまうので、

メモ書きのために書いておきます。

/etc/sysconfig/iptables

のファイルに記述する。
まあ、/etc/init.d/iptablesの中身を見ればいいのではあるが・・・・

ちなみに、このきっかけがvncのポートをあけるためなのでそれもメモ。

-A INPUT -m state –state NEW -m tcp -p tcp –dport 5901 -j ACCEPT

のように記述すれば、vncのディスプレイ:1の画面が開けるようになる。

ポート番号は 5900 + ディスプレイ番号になるようだ。

Flex( Windows )でアプリケーションを作っているとデフォルトのフォントが小さいことと、汚い。
でも、
[AS]
global{
fontFamily: “メイリオ”;
fontSize: 12;
}
[/AS]
のように指定すれば、全体のフォントが変わります。
ちなみに、globalについての説明はここにあります。

flexでは、CSSでデザインができるのだがこれをswfにして動的に読むことができるらしい。

Flex Builderでは、cssファイルで右クリックをすると左のようなメニューが表示されるので、
そこで、「CSSからSWFにコンパイルする」をチェックすればよい。

こうすることで、CSSファイルが変わるたびにswfファイルが出来上がる。

（これでFlex Builderでのビルド時間が短くなりました。これもうれしい誤算です。）

また、
[AS]
StyleManager.loadStyleDeclarations(“css/font.swf”);
[/AS]

のようにすれば、作成したCSSを適用できます。

これを応用すれば、簡単にスキンとか、テーマ別のデザインが作成できるようになりますね。