Fireworks CS3を使用したカスタムリッチテキストエディタFlex 2コンポーネントの作成

Fireworks CS3にはダイナミックリッチシンボルのセットが組み込まれています。リッチシンボルの１つのカテゴリはFlex 2の視覚的なmx.controlsを表します。Fireworks CS3に含まれているFlex 2 mx.controlsには、Flexアプリケーションの開発に役立つリッチテキストエディタの機能は含まれていません。

Fireworks CS3を使用すると、目的の機能を作成してFlex 2コンポーネントを拡張できます。この記事では、Fireworks CS3のリッチシンボルを使用してFlex 2コンポーネントであるリッチテキストエディタを作成する方法を説明します。

まずプロジェクトファイルのセットアップから始めましょう。この記事の冒頭にあるサンプルファイルをダウンロードし、ZIPアーカイブを解凍します。サンプルファイルは、スターターファイルとプロジェクトの完成バージョンの2つのフォルダに分かれています。

次に、Starter_filesフォルダ内の2つのファイル（RichTextEditor.graphic.pngとRichTextEditor.jsf）を、お使いのオペレーティングシステムの次の場所にコピーします。

• Windows： C:\Documents and Settings\[User]\Application Data\Adobe\Fireworks CS3\Common Library\Custom Symbols
• Macintosh： HD\Users\[User]\Library\Application Support\Adobe\Fireworks CS3\Common Library\Custom Symbols

これでFireworks CS3を起動できます。必ず、このバージョンのFireworksを使用してください。

注意：スターターJSFスクリプトファイルを変更する場合は、ライブラリパネルから古いシンボルインスタンスを削除して、さらに共有ライブラリパネルの再読み込みアイコンをクリックしてください。この操作によって、スクリプトの変更がすべてシンボルプロパティパネルに反映されるようになります。

デフォルトのFireworks CS3スプラッシュ画面から、新規作成／Fireworksドキュメント（PNG）をクリックするか、ファイル／新規作成を選択します。カスタムグラフィックシンボルを十分に格納できるサイズのドキュメントを作成します。この例では、幅550x高さ500の白色のキャンバスに設定されています（図１を参照）。「OK」をクリックします。

ここで、必要なアイテムにアクセスしやすいようにFireworksのパネルを並べて表示しておきます。ウィンドウ／共有ライブラリを選択するかF7キーを押して、共有ライブラリパネルを表示します。次に、ウィンドウ／ライブラリを選択するかF11キーを押して、ライブラリパネルも表示します。最後に、ウィンドウ／シンボルプロパティを選択して、シンボルプロパティパネルを表示します。

共有ライブラリパネルのタイトルバーをクリックしてアクティブにし、使用可能なリッチシンボルのリストを確認します。Flex Componentsフォルダをダブルクリックすると、デフォルトシンボルのリストを展開できます。カスタムシンボルフォルダをダブルクリックすると、新しいRichTextEditorグラフィックシンボルが表示されます（図２を参照）。これは、Sample_filesフォルダからカスタムシンボルディレクトリにファイルをコピーしたときにFireworks CS3の共有ライブラリに追加されたものです。

これで、RichTextEditorを共有ライブラリに追加できました。このチュートリアルの次の節に進んで、シンボルのカスタマイズを始めてくださ い。

このチュートリアルの前の節では、RichTextEditorという新しいシンボルを追加して共有ライブラリを更新しました。次は、このシンボルを編集して、Flex 2のカスタムコンポーネントの作成を開始します。最初に、RichTextEditorシンボルをキャンバスに追加します。

カスタムシンボル／RichTextEditorシンボルを新しいドキュメントのキャンバスにドラッグ＆ドロップします。レイヤーパネルに、Flex 2リッチテキストエディタコントロールのアイコンと、「RichTextEditor」というタイトルのレイヤー１要素が１つ表示されます（図３を参照）。

Fireworksシンボル／Widgetの個々の要素を表示するには、RichTextEditorシンボルをダブルクリックします。レイヤーパネルに相当するシンボル要素が表示されます。

Fireworks CS3のリッチシンボル／Widgetの要素は、ユーザベースの要素のインタラクティビティの一部を新しいシンボルプロパティパネルに表示します。リッチシンボルのシンボル／Widgetの要素から直接アクセスして、Flex 2の特定のビジュアルコンポーネントのプロパティやスタイルとのインタラクションを更新することができます。

この例では、シンボルの要素を編集してリッチテキストエディタを更新できます。RichTextEditorシンボルは、レイヤーパネルに表示される４つの要素で構成されています（図４を参照）。

1. ビットマップのシンボル／Widgetのレイヤー要素は単なるバックグラウンドグラフィックで、非インタラクティブな要素です。

   注意：RichTextEditor Flex 2コンポーネントは、多数のサブコントロール（TextArea、Container、Buttons、ColorPicker、HBox、TextInput）を備えた複雑なコントロールです。このチュートリアルでは、ダウンロードして利用できるサンプルファイルに含まれている簡単なビットマップイメージで十分です。描画ツールを使用して、リッチテキストエディタFlexコンポーネントのインタフェース用に独自のバックグラウンドイメージを作成できます。

   ただし、次の３個のレイヤー１シンボル要素は、ユーザインタラクティビティを提供するために更新できるFireworksのテキストオブジェクトです。

2. タイトルシンボル要素はコントロールラベルに対応します。
3. htmlTextシンボル要素はインタラクティブなプロパティで、リッチテキストエディタのTextAreaサブコントロールを反映します。
4. defaultLinkProtocolシンボル要素は、リッチテキストエディタのデフォルトのlinkProtocol TextInputサブコントロールを反映します。

シンボルを編集ウィンドウペインの上部にある「Done」ボタンをクリックして終了し、ドキュメントビューに戻ります。

シンボルの要素を確認したら、スタータースクリプトを作成したり編集したりして、３つのFireworksテキストオブジェクト要素をシンボルプロパティパネルで設定できます（図５を参照）。

コピーしたファイルの共有ライブラリ／カスタムシンボルフォルダの場所を参照し、テキストエディタでRichTextEditor.jsfを開きます。RichTextEditor.jsfファイルは、オペレーティングシステムごとに次のディレクトリにあります。

• Windows： C:\Documents and Settings\[User]\Application Data\Adobe\Fireworks CS3\Common Library\Custom Symbols
• Macintosh： HD\Users\[User]\Library\Application Support\Adobe\Fireworks CS3\Common Library\Custom Symbols

テキストエディタでベーススクリプトファイルを開くと、次のコードが表示されます。

ここで、コードを分析してみましょう。基本的に、ベーススクリプトは２つの関数で構成されています。最初の関数は、オブジェクトの名前、プロパティのタイプ、およびデフォルトの値を格納する値の配列を設定（宣言）します。２番目の関数は、シンボルプロパティパネルで値をFireworksのWidget（シンボル）オブジェクトに適用します。

flexClassNameのcustomDataはFireworks Widget（シンボル）のFlexコンポーネントのタイプを指定します。この例では、RichTextEditorです。

値が配列の終わりにプッシュされ、関数が配列の新しい長さを返します。このコードでは配列に次の３個の値があります（0で始まり、１、２のインデックス位置）。

1. nameはインタラクティブなプロパティ要素を表します。
2. typeはオブジェクトタイプを示し、この場合は３個ともテキストオブジェクト（文字列）です。他のプロパティタイプにはブール値（trueまたはfalse）、数字、色などがあります。
3. valueはコンポーネントのプロパティnameのデフォルトのリテラル値です。

次に示す修正後のコードをコピーしてRichTextEditor.jsfにペーストし（元のコード全体を置換）、ファイルを保存します。

このコードでは、GetObjectByName()が同等の配列デフォルトvalues []をtextCharsタイプとしてシンボル（Widget）に渡します。

テキストエディタを使用してJSFファイルの更新を完了しました。次は、Fireworks CS3に戻って、シンボルプロパティパネルを使用してFlexコンポーネントにインタラクティビティを追加する方法を説明します。

Fireworks CS3をまだ開いていない場合は、これを起動します。

ライブラリパネルで、RichTextEditorシンボルの現在のインスタンスを削除します。共有ライブラリパネルの下部にある再読み込みアイコンをクリックします。カスタムシンボルフォルダをクリックして展開し、RichTextEditorシンボルの新しいインスタンスをドキュメントのキャンバスにドラッグします。

このチュートリアルの前の節で、RichTextEditor.jsfファイルを更新しました。コードを変更し、シンボルを共有ライブラリに再読み込みすると、RichTextEditorカスタムコンポーネント（RichTextEditor.graphic.png）とシンボルプロパティパネルが連動していることがわかります。RichTextEditorの新しいインスタンスをキャンバスに配置すると、シンボルプロパティパネルにデフォルト値が反映されます（図６を参照）。

連動している場合、シンボルプロパティパネルでシンボルのデフォルト値を変更すると、自動的にシンボルに反映されます（図７を参照）。

このチュートリアルの前の節では、シンボルプロパティパネルの更新がシンボルに反映される仕組みを確認しました。Fireworksでシンボルの編集を体験し、内容の変更とシンボルプロパティ値に満足していただけたら、次はクイック書き出し／Flex／MXMLドキュメントタブコマンドに移動し、ファイルを新しいsomefilename.mxmlファイルとして保存します（または、ファイル／書き出し／MXMLとイメージメニューコマンドを選択します）。

Flex Builder 2（またはMXMLエディタ）を起動し、書き出したMXMLファイルを開きます。コードを見ると、３個のプロパティ名とそれらに関連付けられているプロパティ値がmx:RichTextEditorコントロールタグに追加されていることがわかります。コードは次のようになります。

Flex Builder 2またはFlex Builder 2.0.1 SDKを使用してMXMLファイルをコンパイルすると、便利なリッチテキストエディタになりますが、イベントトリガがありません。

カスタマイズの追加

x、y、幅、高さの値を設定すると、mx:RichTextEditorタグでプロパティ値をさらに更新できます。デフォルトのプロパティ値は、Fireworksプロパティインスペクタでキャプチャされたアクティブなオブジェクトまたはシンボルに対応します（図８を参照）。ここで、FireworksシンボルをMXMLに書き出した後も、プロパティの設定を変更できるという点に注目してください。

シンボルの幅と高さのデフォルト値は、値を変更するだけで手動で上書きできます。例えば、幅と高さの値を350 x 300に更新してからFlexアプリケーションを再コンパイルすると、コードは次のようになります。

コンポーネントのサイズを大きくして、インタフェースにさらにスペースを追加すると、コントロールバーサブコントロールを横に並べることができます（図９ を参照）。

この例では、コンポーネント自体が他の多くのサブコントロールを継承するので、デフォルトの幅と高さのプロパティを手動で上書きすると、インタフェースが見やすくなります。

mx:ApplicationタグにはFireworks CS3の現在のキャンバスカラーが指定されています。Flexアプリケーションのデフォルトの色設定は２色の配列で構成されているので、Fireworksのキャンバスカラープロパティが２色の配列で適用されます。

Flexアプリケーションの色を手動で変更して、調和したカラースキームを作成し、バックグラウンドグラデーションカラーの塗りつぶしを生成することができます。次のコードサンプルでは、上部のグラデーションカラーを黒色に設定し、下部は書き出したFireworksのキャンバスカラーの白色を維持します。

デフォルトプロパティとパブリックプロパティの更新

これまでに紹介したのはごく一部にすぎず、他にも多数の変更や更新を行うことができます。Flex 2の各コンポーネントはdefaultproperties、attributepropertiesおよびcustomValuesで構成されています。

次の例では、プロパティ、スタイルおよびカスタム値をプログラミングで上書きまたは更新する方法を説明します。新しいdefinitionObject変数を作成して、その要素をcustomDataとしてシンボル／Widgetに渡します。definitionObjectを使用する詳細については、デベロッパーセンターの記事「Creating Rich Symbols for MXML Export*」（著者Trevor McCauley）を参照してください。

幅と高さのデフォルト設定を上書きするには、defaultPropertiesというdefinitionObject要素を作成します。次に、この新しいオブジェクトを使用して幅と高さのプロパティを配列から除外します。以下のコードサンプルを参照してください。

新しいオブジェクトを使用してデフォルトプロパティを上書きする方法は、Fireworksの書き出し／MXMLコマンドによって常にこれらのプロパティがコンポーネントのMXMLタグに追加されるので、ほとんどの状況で使用できます。このアプローチでは、Fireworks CS3シンボルのサイズではなく、Flex 2コンポーネントのデフォルトサイズに依存するオプションが提供されます。この例では、RichTextEditorコントロールのデフォルトサイズは、幅325ピクセル、高さ300ピクセルです。

コードを追加してコントロールバーを手動で表示します。次のコードスニペットは、showControlBarプロパティにアクセスして値の配列に追加する方法を示しています。次のように、配列を「属性プロパティ」として宣言します。

この仕組みをさらに詳しく調べるには、サンプルファイルに含まれているComplete_scriptフォルダ内の最終的なRichTextEditor.jsfファイルを参照してください。

showControlBarパブリックプロパティがfalseに設定されている場合は、メインのパネルラベルとTextAreaサブコントロールのみが表示されます（図10を参照）。

更新可能なパブリックプロパティとして他にshowToolTipsがあります。必要に応じて、showToolTipsプロパティをブール型（true またはfalse）のオブジェクトとしてカスタム値の配列に追加できます。このコード更新は省略可能ですが、次のようになります。

showToolTipsプロパティをtrueに設定した場合は、Flexリッチテキストエディタ内の各サブコントロールにツールヒントの説明が表示され ます（図11を参照）。

CSSを使用したコンポーネントの外観の更新

RichTextEditorコントロールに使用可能なパブリックスタイルの１つがcornerRadiusスタイルプロパティです。

スタイルをdefinitionObjectのカスタム値として設定した後、Fireworks CS3の「MXML の書き出し」コマンドによって適切なFlex 2マークアップを生成し、クラススタイルをクラスプロパティから分離します。

パブリッククラススタイルを宣言して属性から分離するには、以下の２つのコードサンプルに示すように、それらをdefinitionObjectにも追加します。

スクリプトファイル（JSF）

Flex 2マークアップ

注意：実際にどのように機能するかを理解するには、サンプルファイルのComplete_scriptフォルダ内の最終的なRichTextEditor.jsfファイルを参照してください。

cornerRadiusスタイルプロパティの値を調整すると、Flexコンポーネントの外観と操作性を変更できます。値が小さいほど角が鋭くなり、値が大きいほど丸みのあるインタフェースになります。cornerRadius値の更新によって表示がどのように変化するかを示すため、設定に３とおりの値を使用してFlex 2コンポーネントを作成しました（図12を参照）。

注意：cornerRadiusプロパティ値を０に設定すると、スタイルは出力されません。

次のステップ

この記事の冒頭でダウンロードできる完全なサンプルファイル（RTE.png）をぜひチェックしてください。Fireworks CS3ファイルの完全バージョンには、追加のテキストレイヤー（ラベルコントロール）とボタンも含まれています。このファイルをご覧になると、最終的なMXMLには、ボタンをクリックするとリッチテキストエディタに入力したテキストがラベルコントロールに変換されるイベントハンドラが追加されていることに気づかれるでしょう。

RichTextEditorクラスの拡張の詳細については、RichTextEditor mx.controlsのドキュメントを参照してください。Flex 2の拡張方法の詳細については、Flex 2.0.1 LiveDocsのドキュメントを参照してください。

Fireworks CS3のシンボルを使用する詳細については、デベロッパーセンターの記事「Creating rich symbols for MXML and Images export in Fireworks CS3*」（著者Trevor McCauley）を参照してください。