TLF (Text Layout Framework) と戯れる #05

コメントをどうぞ

このエントリでは、日本語の縦書きについて書きます。

サンプル ( 画面とソース : Build 465 でビルド )
http://labs.taiga.jp/flex3/TLFSample05/
http://labs.taiga.jp/flex3/TLFSample05/srcview/

サンプルについて、簡単にまとめます。

  • TextLayoutFormat クラスで、TextFlow のフォーマットを一括で定義しています。
  • textAlign, direction, blockProgression プロパティを変更して縦書きを実現しています。
  • justificationRule プロパティの値を JustificationRule.EAST_ASIAN (“eastAsian”) にしないと、「。」などの表示位置がおかしくなる場合があります。
  • justificationStyle プロパティは TLF 専用ではないので、JustificationStyle クラスの説明を確認してください。
  • 縦書きにすると、描画位置が ContainerController.container の矩形領域の外になってしまうことに注意してください。

表示する分には問題なさそうなんですが、テキスト編集やマウス操作をするようなものを作るには、まだ厳しい段階なのかなと思いました。

TLF (Text Layout Framework) と戯れる #04

コメントをどうぞ

少し間が空いてしまいましたが続きを書きます。
このエントリを書いている時点で、TLF のビルドのバージョンは 465 なのですが、まだクラス名が変わったりパッケージ構成が変わったりと、色々大変なようです。

サンプル ( 画面とソース : Build 465 でビルド )
http://labs.taiga.jp/flex3/TLFSample04/
http://labs.taiga.jp/flex3/TLFSample04/srcview/

今回アップしたサンプルは、カラムを複数定義したものなので、カラム系のプロパティについて簡単にまとめます。

  • TextFlow.columnCount プロパティで、カラム数を定義します。
  • TextFlow.columnGap プロパティで、カラム間のギャップを定義します。
  • TextFlow.columnWidth プロパティで、単一カラムの幅を定義します。
  • columnCount と columnWidth とは併用可能ですが、columnWidth が優先されます。

ついでにサンプルでは、ContainerController.container プロパティとして使用しているプライベートクラス MySprite の中身も少し更新しました。

入力文字列の描画領域が、ContainerController.container の矩形領域超えると、scrollRect プロパティにもちょっかい出しているようで、再設定しています。

ここら辺の詳細フローには興味があるのですが、ソースが見れないのは残念です。

Flex 4 勉強会 第 74 回＠東京 発表資料

コメントをどうぞ

参加された皆様、お疲れさまでした。
勉強会で使用した発表資料をアップしましたので、下記 URL よりご覧下さい。
http://labs.taiga.jp/presentationMaterial/FxUG/FxUG07420090624Slide.pdf

サンプルアプリの URL は資料内に記述しておきました。
ソースは、アプリのコンテキストメニューからご覧ください。

ちなみに、arkw さんの資料は含まれていません。
公開は、もうしばらくお待ちください。

[告知] Flex 4, Flash Builder 4, Flash Catalyst ベータ祭 で喋ります

コメントをどうぞ

6/24 ( 水 ) に行われる Flex 4 勉強会で下記題目について喋ることになりました。会場はゲートシティホールという、FxUG の勉強会では過去最大規模 (?) の勉強会になります。

3. Flex 4のここが新しい！[廣畑 from taiga.jp, 有川 from akabana.net](70min.)

  1. Spark フレームワーク
  2. Spark コンポーネント
  3. Spark エフェクト
  4. CSS 拡張 in Flex 4
  5. Catalyst と連携してスキン編集

ご覧の通り、また arkw さんと一緒に話すことになりました。
興味のある方は是非お申し込みください。

参加の申し込みはこちらからどうぞ。
http://www.fxug.net/modules/bwiki/index.php?Flex4%CA%D9%B6%AF%B2%F1%C2%E874%B2%F3%A1%F7%C5%EC%B5%FE%BB%B2%B2%C3%BC%F5%C9%D5

あと別の日ですが、Adobe 公式のベータ祭は 7/7 ( 火 ) に開催されます。
http://www.adobe-enterprise.com/development/20090707/index.html

7/9 ( 木 ) には大阪でも開催されます。
http://www.fxug.net/modules/bwiki/index.php?Flex4%CA%D9%B6%AF%B2%F1%C2%E876%B2%F3%A1%F7%C2%E7%BA%E5%BB%B2%B2%C3%BC%F5%C9%D5

TLF (Text Layout Framework) と戯れる #03

コメントをどうぞ

つい先日知ったばかりなのですが、TLF の Weekly Builds が Adobe Labs で公開されています。( ご丁寧に Feed も配信しています )
http://labs.adobe.com/downloads/textlayout.html

早速ダウンロードして中身を見てみたところ、以前 3 つあった SWC…

  • textLayout_conversion.swc
  • textLayout_core.swc
  • textLayout_edit.swc

が

  • textLayout.swc

…という一つの SWC に統合されていました。

一部クラス名やメソッド名も変わっています。

サンプル ( 画面とソース : Build 432 でビルド )
http://labs.taiga.jp/flex3/TLFSample03/
http://labs.taiga.jp/flex3/TLFSample03/srcview/

TLF (Text Layout Framework) と戯れる #02

コメントをどうぞ

flashx.textLayout.elements 編

Overview of the flashx.textLayout.elements package
http://livedocs.adobe.com/labs/textlayout/flashx/textLayout/elements/package-detail.html

TLF は、主に flashx.textLayout.elements によって定義されます。
モデルはテキストを表すために、下記のような階層的な Tree を使います。[*1]

flashx.textLayout.elements クラスの構造
[*1] : flashx.textLayout.elements クラスの構造

Tree のルートノードは、常に TextFlow クラスのインスタンスです。
div や p など見慣れた HTML 要素のような名前もありますが、これらはすべてクラスとして用意されています。[*2]

TLF で使用できるタグ一覧
[*2] : TLF で使用できるタグ一覧

TextFlow はコンテナとしてテキスト全体を表しています。

文字のみだと分かりづらいので、サンプルを用意しました。
編集とアンドゥ機能をつけたものです。

マークアップを使用したサンプル ( 画面とソース )
http://labs.taiga.jp/flex3/TLFSample01/
http://labs.taiga.jp/flex3/TLFSample01/srcview/

すべてクラスを使用したサンプル ( 画面とソース )
http://labs.taiga.jp/flex3/TLFSample02/
http://labs.taiga.jp/flex3/TLFSample02/srcview/

ちなみに、それぞれのサンプルで MySprite という Sprite のサブクラスを使用していますが、TLF が内部的に addChild() や removeChild() を頻繁に繰り返している様子を確認するためです。trace() の出力を追っていると、テキスト系クラス制御のヒントになり見ていて面白いですね。

なお、今回もでしたが、仕事が忙し目なので、次の更新も少々遅れるかも知れません。

[ 追記 ] : nod せんせいにいわれて気付いたんですが、TLFSample02 のようにマークアップエレメントのクラスをひとつひとつ生成して addChild() して使うケースでは、文字が二重に入力されてしまうようです。これはバグでしょうか？困りますね。

TLF (Text Layout Framework) と戯れる #01

コメントをどうぞ

下準備編

次回は flashx.textLayout.elements について書きます。

まいど 関西 RIA セミナー 2009 発表資料

コメントをどうぞ

nod さんのところで公開しています。
http://www.noridon.net/weblogs/archives/2009/03/ria2009yuiframe.html

資料の最終校正を担当したのは私ですが、MAX や Flex 勉強会のときと異なり、今回メインで喋ったのは arkw さんでかつ内容も yui-frameworks ということで、ここに公開するのは筋違いかなと思い、nod さんにお願いしました。ありがとうございます。

datavisualization.swc のソース

コメントをどうぞ

Flex SDK 3.3 がリリースされて、Flex Builder 3 Professional のライセンスを持っている人のみ使用できる datavisualization.swc も修正されました。ただし、修正内容を確認する場合、ソースコードは自力で解凍しなければなりません。

あと、私が Chart 系のコンポーネントをあまり使用していないので今まで気付けなかったのですが、Flex Builder 3 Plug-in をアンインストールして再インストールすると、ライセンス認証はパスされますが、”Flex Builder 3 Plug-in/sdks/3.x/fbpro” フォルダが消えてしまうようです。困りますね。そんな場合にも下記手順は必要です。

手順

  1. Flex 3 Data Visualization Components をダウンロード
    http://www.adobe.com/products/flex/flexdownloads/#flex_DataVisualization

  2. ダウンロードした ZIP を解凍

  3. SDK 3.3 フォルダに解凍したデータをコピー

  4. "{SDK 3.3 フォルダ}/lib" にコピーされた DMV-source.jar からソースを抽出

    ソースを抽出するとき、実際自分が実行したコード (Windows XP)

    C:\FlexSDKs\3.3.0\lib>java -jar DMV-source.jar "C:\Documents and Settings\All Users\Application Data\Adobe\Flex" "C:\FlexSDKs\3.3.0"

参考サイト

Adobe – Flex 3 SDK Release Notes
Using Datavisualization with the Flex SDK 3.3

Flex Doc Team
Extracting data visualization source code

Shigeru Nakagaki
Flex 3.1.0 ： Chart や AdvancedDataGrid のソース

Constraints Layout

コメントをどうぞ

昨日の Flex 3 勉強会で、ライブコーディングするつもりが、ど忘れにより断念してしまった制約レイアウトのサンプルを作成しました。

ConstraintLayoutSample ( 画面とソース : Flex SDK 3.2 にてビルド )
http://labs.taiga.jp/flex3/ConstraintLayoutSample/
http://labs.taiga.jp/flex3/ConstraintLayoutSample/srcview/

constraintColumns, constraintRows プロパティは、IConstraintLayout インターフェースに基づいて Application, Panel, Canvas に実装されており、layout プロパティが absolute のときのみ使用できます。

テーブルレイアウトを組むとき、Grid, GridRow, GridItem を使用するとコンテナのネストが深くなりがちですが、これらを使用することにより余計なコンテナのネストが削減でき、アプリケーションのパフォーマンスを向上させることができます。