Adobe
製品
Creative Suiteファミリー
Photoshopファミリー
Acrobatファミリー
Flash Platform
Digital Marketing Suite
Digital Enterprise Platform
Digital Publishing Suite
その他の製品一覧
ソリューション
コンテンツオーサリング
教育
金融機関
デジタルマーケティングソリューション
その他のソリューション
ラーニング サポート ダウンロード 会社情報
ご購入
アドビストア安心のサポート& サービス
アカデミック版のご購入学生、教職員、個人
ライセンスのご購入企業、教育機関、官公庁
販売パートナー
検索
 
情報 サインイン
ようこそ、 カート 注文状況 ユーザー登録
マイアカウント
サインアウト
サインインの目的 お客様のアカウントや体験版ダウンロード、製品の拡張機能、コミュニティエリアへのアクセスなどを管理するため
Adobe
製品 セクション   検索  
ソリューション 会社情報
サポート ラーニング
サインイン ようこそ、 注文状況 ユーザー登録
Qty:
Subtotal
Checkout
Adobe Developer Connection / Flexデベロッパーセンター /

Flex 3とFlex 4との違い

著者 Joan Lafferty

Joan Lafferty
  • butterfliesandbugs.wordpress.com

Content

  • 既存のFlexアプリケーションのFlex 4への移行
  • Flex 4のアーキテクチャー変更点の概要
  • 新しいコンポーネントとコンテナ
  • エフェクトの変更点
  • テキストの処理
  • Flex 3との後方互換性

更新日

4 October 2009

ページ ツール

Facebookでシェア
Twitterでツイート
LinkedInでシェア
ブックマーク
印刷

Tags

必要条件

この記事に必要な予備知識

この記事は、Flex 3フレームワークの知識を前提とします。

ユーザーレベル

中級

必要な製品

  • Flex 4 (Download trial)

Flex 4(コードネーム:Gumbo)リリースは、Flex 3から大きく変わっています。Flex 4では、コンポーネントとスキンの新しいアーキテクチャーが導入されました。とはいえ、Flex 3アプリケーションをFlex 4でコンパイルする場合も、さほど多くの問題は発生しません。Flex 3との後方互換性を維持することも、この新リリースの目標の1つだったからです。

この記事では、Flex 4の主要な目標の概要、アーキテクチャーの違い、およびコンポーネント、レイアウト、ステートの使用方法とエフェクトにおける変更点の概論を提示します。Flex 4でFlex 3アプリケーションをコンパイルするときに予期される事柄に関する質問についても回答します。この記事は、Flex 4のすべての新機能を網羅しているわけではありません。網羅的な情報が必要な場合は、記事「Flex 4の新機能」をお読みください。

この記事において、「MXコンポーネント」という用語は、もともとFlex 3に含まれていたコンポーネントを指します。Sparkコンポーネントとは、Flex 4の新しいコンポーネントを指します。

既存のFlexアプリケーションのFlex 4への移行

Flex 3アプリケーションをFlex 4に移行するとき、多くの作業を見込む必要はありません。バグ修正とデフォルトテーマの変更を除けば、基本的にアプリケーションはFlex 3のときと同じように(またはさらに良く)動作すると考えることができます。ただし、いくつかの注意事項があります。

プレーヤーの依存性

必ず、Flash Player 10に対してコンパイルしてください。Flex 4 SDKはFlash Player 10のサポートを必要とします。

タイプセレクターには名前空間が必要

CSSのタイプセレクターではFlexクラスをスタイルに割り当てます。例えば、以下の項目はButtonとDateFieldのタイプセレクターです。

Button { cornerRadius: 10; } DateField { color: #780800; }

Flex 4 SDKでは、アプリケーションがタイプセレクターを使用するとき、名前空間が必要となります。FlexアプリケーションでMXML 2006名前空間のみを使用している場合、CSSに以下のデフォルト名前空間宣言を追加してください。

<mx:Style> @namespace "http://www.adobe.com/2006/mxml"; … </mx:Style>

アプリケーション内で複数の名前空間を使用している場合、CSSにそれぞれの名前空間を入力する必要があります。例については、この記事の「Flex 4の名前空間とパッケージ」を参照してください。

さらに、アプリケーションがStyleManager.getStyleDeclaration("Button")などのメソッドを使用している場合、タイプセレクターにはそのパッケージを含める必要があります。例えば、getStyleDeclaration()の呼び出しはStyleManager.getStyleDeclaration("mx.controls.Button")となります。

テーマの変更

Flex 3(MX)コンポーネントのデフォルトテーマはSparkテーマになりました。このため、Flex 4 SDKを使用してアプリケーションをコンパイルすると、アプリケーションの外観とサイズが変わってしまう場合があります。ただし、Flex 4にはFlex 3のHaloテーマが含まれているため、必要に応じてFlex 3の外観を使用することもできます。Haloテーマを使用してコンパイルするには、コンパイラー引数に「-compatibility-version=3.0」を追加してください。Flash Builder 4でこれを指定するには、Properties(プロパティ)パネルを使用します。Properties(プロパティ)パネルで「Flex Compiler(Flexコンパイラー)」を選択し、「Use Flex 3 compatibility mode(Flex 3 互換性モードを使用)」チェックボックスをクリックしてください(図1)。

Flex 3互換モードの使用
図1. Flex 3互換モードの使用

または、Properties(プロパティ)/Flex Theme(Flex テーマ)パネルで、テーマをデフォルトのSparkからHaloに変更することもできます。Flex Theme(Flex テーマ)パネルで、Haloテーマをクリックします(図2)。

Properties(プロパティ)パネルでHaloテーマを選択
図2. Properties(プロパティ)パネルでHaloテーマを選択

新しいSparkテーマを使用する場合、Haloテーマで機能していたスタイルの多くがSparkテーマでは機能しない点に注意してください。Sparkテーマでサポートされるスタイルは限られています。どのスタイルをSparkスキンで使用できるかについては、ASDocを参照してください。コンポーネントごとに示された各スタイルについて、「テーマ」が指定されています。テーマの指定がない場合、そのスタイルはHaloテーマとSparkテーマの両方で使用できます。Flex 4には、簡易モックアップ用途のWireframeスキンも追加されています。Wireframeテーマでは、スタイルの変更はサポートされていません。

テーマの変更に加え、デフォルトのプリローダーがFlex 4アプリケーション用のmx.preloaders.SparkDownloadProgressBarに変更されました。このプリローダーは軽量であるため、起動時間が若干短縮されます。Flex 3のプリローダーを使用する場合は、コードを1行変更するだけです。Applicationタグに次の文字列を追加します:preloader="mx.preloaders.DownloadProgressBar"。

Flex 3からFlex 4にアプリケーションを移行する場合、使用しているFlex 3 MXコンポーネントを、それぞれの対応するFlex 4コンポーネントに置き換えることはお勧めしません。費やす時間に見合うメリットがあるとは考えにくいからです。Flex 4コンポーネントアーキテクチャーへの移行は新規開発のアプリケーションで行ってください。

自動化ライブラリの場所の変更

Flex 3では自動化ライブラリが {sdk}/frameworks/libs に置かれていましたが、Flex 4では、この場所が {sdk}/frameworks/libs/automation に変更されています。自動化ライブラリを frameworks/libs に置いておかないよう、各ユーザーが確認する必要があります。

Flex 4のアーキテクチャー変更点の概要

Flex 4 SDKにおける最大のテーマの1つが「デザインの重視(Design in Mind)」です。この目標には、デザイナーとデベロッパーとの間に、よりスムーズなワークフローを築くことが含まれます。これを実現するため、新しいフレームワークでは、コンポーネントのビジュアル面と残りのビヘイビアー面が明確に分離されています。Flex 3では、個別のコンポーネントのコードに、そのコンポーネントのビヘイビアー、レイアウト、および視覚的な変化に関するロジックが含まれていました。Flex 4では、コンポーネントは異なるクラスから構成され、各クラスで特定のビヘイビアーを処理する設計となっています。

『Gumboアーキテクチャマニュアル』には次のように記されています。

「メインコンポーネントクラスは、クラス名がコンポーネントのMXMLタグ名と一致するクラスで、そのコンポーネントのコアビヘイビアーをカプセル化します。これには、コンポーネントがディスパッチするイベント、コンポーネントが表現するデータ、メインコンポーネントの一部として動作するサブコンポーネントの関連付け、および内部コンポーネントのステート(ステートについては以下で説明します)の管理と追跡が含まれます。

メインコンポーネントクラスと組み合わせて使用するのがスキンクラスです。スキンクラスは、コンポーネントの視覚的な外観に関連するあらゆる事柄(グラフィック、レイアウト、データの表現方法、異なるステートでの外観の変化、およびステート間のトランジション)を管理します。Haloモデルでは、Flexコンポーネントスキンはコンポーネントのグラフィックの限られた側面のみを処理するアセットでした。レイアウトやステートの視覚化など、コンポーネントの外観に関する他の側面を変更する場合は、コンポーネントをサブクラス化して、ActionScriptコードを直接編集する必要がありました。Gumboモデルでは、こういった情報はすべて、主にFXGタグという新しいグラフィックタグを使用して、スキンクラスで宣言として定義されます。」

Flex 4の新しいグラフィックタグについて詳しくは、『FXG 仕様書』を参照してください。

上記アーキテクチャの一例として、spark.components.Buttonクラスのコードを参照してください。このクラスには、コンポーネントのビヘイビアーに関するロジックのみが含まれます。このコンポーネントの視覚面はすべて、スキンクラスspark.skins.spark.ButtonSkinで定義されます。

パフォーマンス上の理由により、Flex 4 SDKは、デベロッパーが必要とする機能を取得して選択できるように機能ごとのブロック構成となっています。スクロールや仮想化などの「重い」機能は、すべてのアプリケーションで必要となるわけではないため、デフォルトで無効になっています。

Flex 4の名前空間とパッケージ

Flex 3のクラスは、これまでと同じmx.*パッケージで変更はありません。Flex 4 SDKでは、新たに導入されたspark.*パッケージによって、コンポーネント、コアクラス、エフェクト、フィルター、レイアウト、プリミティブ、スキン、ユーティリティを扱います。

Flex 4 SDKには、新しいコンポーネントとエフェクトのセットが用意されていますが、クラス名の多くにFlex 3コンポーネントのクラスと同じ名前が使用されています。MXMLでの名前の衝突を防ぐため、Flex 4 SDKには4つの異なる名前空間(MXML 2006、MXML 2009、Spark、Mx)があります。

MXML 2006: 旧バージョンのFlexで使用されていたレガシーMXML言語の名前空間。Flex 4を使用してコンパイルしたFlex 3アプリケーションは、引き続きこの名前空間を使用できます。

URI:http://www.adobe.com/2006/mxml

デフォルトプレフィックス:mx

MXML 2009: 新しいMXML言語の名前空間。これは、純粋に言語の名前空間であり、コンポーネントタグは含まれません。

URI:http://ns.adobe.com/mxml/2009
デフォルトプレフィックス:fx

Spark: この名前空間には、新しいSparkコンポーネントがすべて含まれます。MXML 2009言語名前空間と組み合わせて使用します。

URI:library://ns.adobe.com/flex/spark
デフォルトプレフィックス:s

MX: この名前空間には、MXコンポーネントがすべて含まれます。MXML 2009言語名前空間と組み合わせて使用します。

URI:library://ns.adobe.com/flex/mx
デフォルトプレフィックス:mx

MXML 2009、Spark、およびHalo名前空間を使用して、簡単なFlex 4アプリケーションを作成するサンプルを次に示します。このサンプルはMXのDateChooserとSparkのButtonを使用します。

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <mx:DateChooser id="main_calendar" x="20" y="20"/> <s:Button label="submit" x="220" y="20"/> </s:Application>

Flex 4 SDKには、CSSの複数名前空間サポートも追加されています。MXML 2009、Spark、およびMX名前空間とタイプセレクターを使用する場合、CSS定義に名前空間のセットを定義して、名前の衝突を防ぐ必要があります。

MXとSparkの両方のコンポーネントに対してタイプセレクターを使用するCSSのサンプルを次に示します。

<fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; s|Button { color: #FF0000; } mx|DateChooser { color: #FF0000; } </fx:Style>

デフォルトプロパティとDeclarationsタグ

Flex 4 SDKリリースより前のバージョンのFlex言語では、Applicationルートタグに、ビジュアルと非ビジュアルの両方の子要素を含めることができました。ビジュアルの子要素はaddChild()で Applicationに追加され、非ビジュアルの子要素はプロパティ宣言として扱われていました。このリリースから、新しいプロパティ宣言を表す非ビジュアルの子要素をApplicationの直接の子要素とすることはできなくなります。これらの非ビジュアルの子要素は<fx:Declarations>タグの下に追加します。これには、エフェクト、バリデーター、フォーマッター、データ宣言、RPCクラスなどの非ビジュアルの子要素が含まれます。簡単なサンプルを次に示します。

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <fx:Declarations> <s:Fade id="fadeEffect" target="{targetButton}" alphaFrom="1" alphaTo="0" /> </fx:Declarations> <s:Button id="targetButton" /> <s:Button label="play effect" click="fadeEffect.play()" x="80" /> </s:Application>

新しいコンポーネントとコンテナ

これまで説明したように、Flex 4 SDKでは、新しいアーキテクチャーを使用する多数の新しいコンポーネントクラスが導入されています。これらのクラスにより、スキン処理やその他のカスタマイズがはるかに簡単になります。Flex 3 MXとFlex 4 Sparkのコンポーネント対応表を以下に示します。

Flex 3 MXコンポーネント Flex 4 Sparkコンポーネント
mx.controls.Button spark.components.Button
mx.controls.ButtonBar spark.components.ButtonBar
mx.controls.CheckBox spark.components.CheckBox
mx.controls.ComboBox spark.components.DropDownList(編集不可)
mx.controls.HorizontalList spark.components.List(HorizontalLayout付き)
mx.controls.HRule spark.primitives.Line
mx.controls.HScrollBar spark.components.HScrollBar
mx.controls.HSlider spark.components.HSlider
mx.controls.Image spark.primitives.BitmapImage(外部イメージのサポートなし)
mx.controls.LinkBar spark.components.ButtonBar(カスタムスキン付き)
mx.controls.LinkButton spark.components.Button(カスタムスキン付き)
mx.controls.List spark.components.List
mx.controls.NumericStepper spark.components.NumericStepper
mx.controls.RadioButton spark.components.RadioButton
mx.controls.RadioButtonGroup spark.components.RadioButtonGroup
mx.controls.TextArea spark.components.TextArea
mx.controls.TabBar spark.components.TabBar
mx.controls.TextInput spark.components.TextInput
mx.controls.TileList spark.components.List(TileLayout付き)
mx.controls.ToggleButtonBar spark.components.ButtonBar
mx.controls.VideoDisplay spark.components.VideoPlayer
mx.controls.VRule spark.primitives.Line
mx.controls.VScrollBar spark.components.VScrollBar
mx.controls.VSlider

spark.components.VSlider

mx.core.Application spark.components.Application
mx.core.Window spark.components.Window
mx.core.WindowedApplication spark.components.WindowedApplication
mx.containers.ApplicationControlBar spark.components.Application(controlBarContent付き)
mx.containers.Canvas spark.components.Group
mx.containers.ControlBar spark.components.Panel(controlBarContentプロパティ付き)
mx.containers.HBox spark.components.HGroup
mx.containers.Panel spark.components.Panel
mx.containers.Tile spark.components.Group(TileLayout付き)
mx.containers.VBox spark.components.VGroup

MXのコンポーネントおよびコンテナとSparkコンポーネントは、積極的に併用しても問題ありません。Adobeのコンポーネントは今後も同じベースクラス(UIComponent)上に構築されていくので、SparkとMXの間には完全な相互運用性が確保される見込みです。現時点で、Sparkに直接対応するクラスがないコンポーネントとコンテナの表を以下に示します。

Flex 4には直接対応するコンポーネントが存在しないFlex 3クラス
mx.controls.Alert
mx.controls.ColorPicker
mx.controls.DataGrid
mx.controls.DateChooser
mx.controls.DateField
mx.controls.Menu
mx.controls.MenuBar
mx.controls.PopUpButton
mx.controls.PopUpMenuButton
mx.controls.ProgressBar
mx.controls.RichTextEditor
mx.controls.Tree
mx.containers.Accordion
mx.containers.DividedBox
mx.containers.Form
mx.containers.Grid
mx.containers.TabNavigator
mx.containers.TitleWindow
mx.containers.ViewStack

MXナビゲーター(ViewStack、Accordion、TabNavigator)をSparkコンポーネントと組み合わせる場合、ナビゲーターの子オブジェクトにはNavigatorContentコンポーネントを使用してください。それ以外の場合、MXナビゲーター上ではSparkプリミティブを使用できません。次に例を示します。

<mx:ViewStack id="vs" selectedIndex="{tb.selectedIndex}"> <s:NavigatorContent label="bar"> <s:layout> <s:VerticalLayout /> </s:layout> <s:Label text="bar" /> <s:TextInput /> </s:NavigatorContent> </mx:ViewStack>

ステートシンタックスの変更点

Flex 4では、ステート機能は完全にMXML言語の機能となりました。このため、ステートがはるかに柔軟で扱いやすくなっていることにお気付きになると思います。新しいステートシンタックスはインライン化が進んだため、コンテキスト内でステート固有の変更を指定することができます。Flex 4におけるシンタックスの重要な変更点は次のとおりです。

  • ステート配列内ではステートのみが定義されます。
  • 新しいステートシンタックスでは、AddChildとRemoveChildは使用できません。代わりに、コンポーネント自体にincludeInとexcludeFrom属性を記述して、特定のステートにおけるコンポーネントのロールを定義します。

以下のFlex 3のサンプルでは、ステートを使用して、ドキュメントのcurrentStateがsubmitStateである場合にのみ、Buttonの追加とTextInputの削除を行います。この方法では、ステートがもっと複雑になると、非常に冗長な記述になる可能性があります。

<mx:states> <mx:State name="submitState" basedOn=""> <mx:AddChild relativeTo="{loginForm}" > <mx:Button label="submit" bottom="10" right="10"/> </mx:AddChild> <mx:RemoveChild target="{firstTextInput}"/> </mx:State> </mx:states> <mx:TextInput id="firstTextInput" /> <mx:Canvas id="loginForm" />

includeInとexcludeFromを使用した、Flex 4のもっと簡単なコードを次に示します。

<s:states> <s:State name="submitState" /> </s:states> <s:TextInput id="firstTextInput" excludeFrom="submitState" /> <s:Group id="loginForm" > <s:Button label="submit" bottom="10" right="10" includeIn="submitState"/> </s:Group>
  • SetProperty、SetStyle、SetEventHandlerは、新しいドットシンタックスに置き換えられました。このシンタックスを使用すると、特定のステート識別子でMXML属性値を修飾できます。

次のFlex 3のサンプルでは、コードによって、submitState状態におけるボタンのプロパティ、スタイル、およびイベントを定義します。

<mx:states> <mx:State name="submitState" basedOn=""> <mx:SetProperty target="{submitButton}" name="label" value="submit" /> <mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/> <mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/> </mx:State> <mx:State name="clearState" basedOn=""> <mx:SetProperty target="{submitButton}" name="label" value="clear" /> <mx:SetEventHandler target="{submitButton}" name="click" handler="emptyDocument()" /> </mx:State> </mx:states> <mx:Button id="submitButton" />

Flex 4では、次のようなコードになります。

<s:states> <s:State name="submitState" /> <s:State name="clearState" /> </s:states> <s:Button label.submitState="submit" textDecoration.submitState="underline" click.submitState="trace('done')" click.clearState="emptyDocument()" label.clearState="clear" textDecoration.clearState="none"/>
  • コンポーネントが、未定義ステートやNullステートになることはなくなりました。デフォルトでは、最初に宣言されたステートがコンポーネントの初期ステートになります。
    新しいシンタックスは、ドキュメントがMXML 2009言語名前空間を使用する場合に利用できます。レガシーシンタックスと新しいステートシンタックスを混在させることはできません。従来のシンタックスは、MXML 2006名前空間でのみ利用できます。

さらに、各コンポーネントは、スキンクラスで定義されるステートのセットをサポートするようになりました。これにより、コンポーネントのステートに合わせて視覚的な変化を適用することが容易になります。例えば、SparkのButtonのスキンを確認すると、以下のステートが定義されていることがわかります。

<s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states>

ButtonSkinクラスは、これらの各ステートにおいて、SparkのButtonがどのように表示されるのかを定義します。

ここまでの説明は、新しいFlex 4のステートシンタックスの概略にすぎません。詳しくは、拡張されたステートのドキュメントを参照してください。

エフェクトの変更点

Flex 4のエフェクトインフラストラクチャには、数多くの改良が施されました。MXエフェクトは、UIComponentをベースにしたコントロールでのみ機能しますが、Sparkエフェクトは、フレームワーク内の新しいグラフィックプリミティブを含むあらゆるターゲットで機能します。これらのエフェクトクラスはすべて、spark.effects.*パッケージ内に存在します。Sparkエフェクトは、MXコンポーネント、Sparkコンポーネント、およびグラフィックプリミティブに対して機能することから、Adobeでは、これから作成するアプリケーションにはSparkエフェクトクラスを使用することを推奨しています。

この説明はあくまで概略です。エフェクトクラスの新機能について詳しくは、Chet Haaseによる記事「Adobe Flex 4におけるエフェクト」を参照してください。

レイアウトの変更点

以前のバージョンのFlexでは、コンポーネントとコンテナのレイアウトは、個別のコントロールの内部で定義されていました。このため、List、TileList、HorzontalListなど、レイアウト以外は同じ機能を持つコンポーネントが存在していました。レイアウトロジックは、これらのコンポーネントクラスの内部で定義されていました。Flex 4では、コンポーネントからレイアウトが切り離されています。Application、List、ButtonBar、PanelなどのSparkコンポーネントでは、レイアウトを宣言として定義できるようになりました。すべてのコンポーネントにおいて、格納はGroupクラスによって管理され、Groupの子要素のレイアウトは関連するレイアウトオブジェクトに委譲されます。レイアウトは、FXGグラフィックプリミティブの他、SparkとMX両方のコンポーネントをサポートします。レイアウトは実行時にも変更できます。

デベロッパーは、カスタムレイアウトを記述すれば、様々な個別コンポーネントに対するスワップイン/アウトも簡単に行えます。垂直リスト、水平リスト、タイルリストを定義する例を次に示します。

垂直リスト(SparkリストのデフォルトレイアウトはVerticalLayout):

<s:List />

水平リスト:

<s:List> <s:layout> <s:HorizontalLayout /> </s:layout> </s:List>

タイルリスト:

<s:List> <s:layout> <s:TileLayout /> </s:layout> </s:List>

前述のとおり、Flex 4は、デベロッパーが必要とする機能を取得して選択できるように機能ごとのブロック構成となっています。デフォルトでは、仮想化とスクロールは有効になっていません。Groupにスクロールバーのオプションを追加し、仮想化を有効にするには、以下の手順を実行します。

1)レイアウトオブジェクトのuseVirtualLayoutをtrueに設定します。2)GroupにScrollerコンポーネントを追加します。

Spark Panelでの仮想化とスクロールの使用例を次に示します。

<s:Panel title="Horizontal Panel" width="300" height="220" left="20" top="20"> <s:Scroller width="100%" height="100%"> <s:Group> <s:layout> <s:HorizontalLayout useVirtualLayout="true" /> </s:layout> <s:TextInput /> <s:Button label="clear" /> <mx:DateChooser /> <s:Button label="submit" /> </s:Group> </s:Scroller> </s:Panel>

Flex 4のレイアウトに関するすべての機能拡張(トランスフォーメーションのサポートの改善など)について詳しくは、Sparkレイアウトのドキュメントを参照してください。

テキストの処理

Sparkコンポーネントはすべて、Flash Player 10の新しいテキストエンジンを使用します。これらの新しいクラスは、テキストメトリック、垂直テキスト、合字などのタイポグラフィックエレメント、および双方向テキストを制御する低レベルサポートを提供します。Flex 4 SDKでは、テキストを使用するあらゆるSparkコンポーネントでこの機能強化が行われています。Flex 4のテキストプリミティブとテキストコンポーネントについて詳しくは、Sparkテキストプリミティブの仕様を参照してください。

Sparkコンポーネントについては、Flash Player 10およびAIR 1.5のDefineFont4埋め込みフォント形式が使用されます。MXコンポーネントについては、デフォルトではDefineFont4が使用されません。このため、1つのApplication内にSparkとMXの両方のコンポーネントが混在している場合、フォントを埋め込むと若干のオーバーヘッドが発生します。すべてのコンポーネントに同じ埋め込みフォントを使用するには、プロジェクトのコンパイラー引数を追加する必要があります。この新しいテーマでは、MXコンポーネントとSparkコンポーネントの両方で同じDefineFont4フォントエンジンが使用されます。このコンパイラー引数を追加するには、プロパティ(Properties)/Flexコンパイラー(Flex Compiler)パネルにある「Use Flash Text Engine in MX components(MX コンポーネントで Flash Text Engine を使用)」オプションを選択します(図3)。

MXコンポーネントでDefineFont4フォントエンジンを使用できるようにする
図 3. MXコンポーネントでDefineFont4フォントエンジンを使用できるようにする

Flex 4アプリケーションでテキストを使用する場合は、Flex 4のSparkテキストコンポーネント3種類のいずれかを使用することをお勧めします。これらのコンポーネントではFlashプレーヤーの新しいテキストエンジンが使用されるので、テキストを高品質で表示できます。デバイスフォントおよび双方向テキストのカーニングと回転にも対応しています。Flex 4で使用できるテキストコンポーネントは次の点が従来と異なります。

  複数行 切り詰め 選択可能
mx.controls.Label - ○ ○
mx.controls.Text ○ - ○
spark.components.Label ○ ○ -
spark.primitives.RichEditableText ○ ○ -
spark.primitives.RichText ○ - ○
  編集可 HTML書式指定 スクロール
mx.controls.Label - ○ -
mx.controls.Text - ○ -
spark.components.Label - - -
spark.primitives.RichEditableText - ○ -
spark.primitives.RichText ○ ○ ○

Flex 3との後方互換性

次のコンパイラー引数を追加すると、Flex 3と同じようにアプリケーションをコンパイルできます。

-compatibility-version=3.0.0.

このコンパイラー引数により、一部の動作について、新しいFlex 4の動作ではなくFlex 3と同様に動作するようにアプリケーションを設定できます。Flex 4における後方互換性に関する変更のうち、-compatibility-version引数に対応している変更の完全な一覧については、後方互換性に関するドキュメントを参照してください。

注意:Flex 3互換動作を指定する場合、Flex 4で変更された動作の一部のみを選択的に採用することはできません。引数-compatibility-version=3.0.0を付けてコンパイルすると、文書に記載されているFlex 3ビヘイビアーにすべて置き換わることになります。

次のステップ

幸いなことに、Flex 3からFlex 4への移行はそれほど困難ではありません。フレームワークは、ほぼ後方互換となるように設計されています。また、いったん新しいアーキテクチャに慣れると、こちらのほうが‘flex'ibleであることがおわかりいただけるはずです。Flex 4の機能について詳しくは、Webヘルプにアクセスしてください。

More Like This

  • The technologies for building Flex and Java applications
  • Moving existing Flex projects from Flex Builder 3 to Flash Builder 4
  • Flex 4の新機能
  • Transitioning an application from Flex 3 to Flex 4
  • Managing application state with Flex 3
  • Introducing Cairngorm
  • The architecture of Flex and Java applications
  • Flex quick start guide for HTML and PHP developers
  • Using Flex effects to animate changes in application state
  • The architecture of Flex and PHP applications

製品

  • Creative Suiteファミリー
  • Photoshopファミリー
  • Acrobatファミリー
  • Flashプラットフォーム
  • Digital Marketing Suite
  • Digital Enterprise Suite
  • Digital Publishing Suite
  • モバイルアプリ

ソリューション

  • カスタマーエクスペリエンスマネジメント
  • コンテンツオーサリング
  • デジタルマーケティング

業種別ソリューション

  • 教育
  • 金融機関

サポート

  • ヘルプ&サポート
  • 注文と返品
  • ダウンロードに関するヘルプ
  • ユーザー登録に関するヘルプ

ラーニング

  • ADC: Adobe Developer Center
  • Adobe TV
  • Design Magazine
  • Photoshop Magazine
  • Focus In

ご購入方法

  • アドビストア
  • アカデミック版のご購入
  • ライセンスのご購入

ダウンロード

  • Adobe Reader
  • Adobe Flash Player
  • Adobe AIR
  • Adobe Shockwave Player

会社情報

  • プレスルーム
  • パートナープログラム
  • 企業の社会的責任(英語)
  • 採用情報
  • 投資家の皆様へ(英語)
  • イベント&セミナー
  • Legal(英語)
  • お問い合わせ
国・地域および言語の選択 日本(変更)
国・地域および言語の選択 閉じる

North America

Europe, Middle East and Africa

Asia Pacific

  • Canada - English
  • Canada - Français
  • Latinoamérica
  • México
  • United States

South America

  • Brasil
  • Africa - English
  • Belgium - English
  • Belgique - Français
  • België - Nederlands
  • България
  • Česká republika
  • Danmark
  • Eastern Europe - English
  • Eesti
  • España
  • France
  • Deutschland
  • Hrvatska
  • Ireland
  • Israel - English
  • Italia
  • Latvija
  • Lietuva
  • Luxembourg - Deutsch
  • Luxembourg - English
  • Luxembourg - Français
  • Magyarország
  • Middle East and North Africa - English
  • Moyen-Orient et Afrique du Nord - Français
  • Nederland
  • Norge
  • Österreich - Deutsch
  • Polska
  • Portugal
  • România
  • Россия
  • Schweiz - Deutsch
  • Suisse - Français
  • Svizzera - Italiano
  • Slovenija
  • Slovensko
  • Srbija
  • Suomi
  • Sverige
  • Türkiye
  • Україна
  • United Kingdom
  • Australia
  • 中国
  • 中國香港特別行政區
  • Hong Kong S.A.R. of China
  • India - English
  • 日本
  • 한국
  • New Zealand
  • Pacific - English
  • 台灣

Southeast Asia

  • Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2011年9月30日更新)にご同意いただいたものとみなされます。

Reviewed by TRUSTe: site privacy statement