Flex-クイックガイド

Flexとは何ですか？

Flexは強力なオープンソースアプリケーションフレームワークであり、同じプログラミングモデル、ツール、およびコードベースを使用して、ブラウザ、モバイル、およびデスクトップ用の従来のアプリケーションを構築できます。

Flexは、Flexクラスライブラリ（ActionScriptクラス）、Flexコンパイラ、デバッガ、MXMLおよびActionScriptプログラミング言語、および表現力豊かでインタラクティブなリッチインターネットアプリケーション（RIA）を構築するためのその他のユーティリティで構成されるFLEXSDKを提供します。

Flexは、Webアプリケーションのユーザーインターフェイス（UI）またはクライアント側の機能を処理します。サーバー側の機能は、従来のスクリプト言語（Java / PHPなど）で記述されたサーバー側のコンポーネントに依存しています。

実際にSWFファイルとして配信されるFlexベースのアプリケーションは、従来のWebアプリケーションのHTML / JavaScript部分によく似ています。

Flexアプリケーションは、SWFファイルに加えてHTMLラッパー、CSSファイル、およびサーバー側スクリプトファイル（Java、.CFM、.PHPなど）としてサーバーにデプロイされます。従来のWebアプリケーションのように。

これらのリソースは、通常のHTTP要求/応答方式と、ブラウザーでアプリケーションを実行するFlash Playerを使用して、サーバーからクライアントのブラウザーに配信されます。

Flexの利点

Flexアプリケーションは通常FlashPlayerベースであり、GPS、カメラ、ローカルデータベース、グラフィック加速度計などのデバイス機能にアクセスできます。
Flexアプリケーションは、Android、BlackBerry Tablet OS、およびiOSデバイスで実行できます。
Flexアプリケーションは、デスクトップだけでなくブラウザでも実行できます。
Flexアプリケーションはプラットフォームに依存しません。UIはプラットフォームにネイティブにすることも、各プラットフォームで同じにすることもできます。
Flexアプリケーションは、REST、SOAP、JSON、JMS、AMFなどの業界標準を使用して、Java、Spring、Hibernate、PHP、Ruby、.NET、Adobe ColdFusion、SAPなどのすべての主要なサーバー側テクノロジーとサーバーと対話できます。
Flexアプリケーションは、アプリケーションとの直感的な対話と視覚的に豊かなインターフェイスでの情報の表示を通じて、豊かなユーザーエクスペリエンスを保証します。
Flexアプリケーションは、サーバーから新しいページをフェッチしたり、ブラウザーを更新したりすることなく、状態をある状態から別の状態に移行できるシングルページアプリケーションです。
Flexアプリケーションは、ユーザーがビューを変更するたびに新しいページを返すのではなく、アプリケーションを1回だけ返す必要があるため、サーバーの負荷を大幅に軽減します。

Flexのデメリット

Flexアプリケーションはシングルスレッドアプリケーションですが、Flexはこの懸念を軽減するための非同期プログラミングモデルを提供します。
FlexはActionScriptおよびXMLベースです。これら2つのことを学ぶことは、Flexで機能するために必須です。

このチュートリアルでは、Adobe FlexFrameworkを使用して作業を開始するための開発環境を準備する方法について説明します。このチュートリアルでは、Flex Frameworkをセットアップする前に、マシンにJDKとAdobe FlashBuilderをセットアップする方法についても説明します。

システム要件

FLEXにはJDK1.4以降が必要であるため、最初の要件はJDKをマシンにインストールすることです。

JDK	1.4以上。
記憶	最小要件はありません。
ディスクスペース	最小要件はありません。
オペレーティング・システム	最小要件はありません。

所定の手順に従って環境をセットアップし、Flexアプリケーションの開発を開始します。

ステップ1-マシンへのJavaのインストールを確認する

コンソールを開き、以下を実行します java コマンド。

OS	仕事	コマンド
ウィンドウズ	コマンドコンソールを開く	c：\> java -version
Linux	コマンドターミナルを開く	$ java -version
マック	オープンターミナル	マシン：〜joseph $ java -version

すべてのオペレーティングシステムの出力を確認しましょう-

OS	生成された出力
ウィンドウズ	Javaバージョン "1.6.0_21" Java（TM）SEランタイム環境（ビルド1.6.0_21-b07） Java HotSpot（TM）クライアントVM（ビルド17.0-b17、混合モード、共有）
Linux	Javaバージョン "1.6.0_21" Java（TM）SEランタイム環境（ビルド1.6.0_21-b07） Java HotSpot（TM）クライアントVM（ビルド17.0-b17、混合モード、共有）
マック	Javaバージョン "1.6.0_21" Java（TM）SEランタイム環境（ビルド1.6.0_21-b07） Java HotSpot（TM）64ビットサーバーVM（ビルド17.0-b17、混合モード、共有）

ステップ2-JavaDevelopment Kit（JDK）をセットアップする

Javaがインストールされていない場合は、OracleのJavaサイトJava SE DownloadsからJavaソフトウェア開発キット（SDK）をインストールできます。ダウンロードしたファイルにJDKをインストールする手順が記載されているので、所定の手順に従ってセットアップをインストールおよび構成します。最後に、PATHおよびJAVA_HOME環境変数を設定して、javaおよびjavacを含むディレクトリ（通常はそれぞれjava_install_dir / binおよびjava_install_dir）を参照します。

をセットする JAVA_HOMEJavaがマシンにインストールされているベースディレクトリの場所を指す環境変数。例-

OS	出力
ウィンドウズ	環境変数JAVA_HOMEをC：\ Program Files \ Java \ jdk1.6.0_21に設定します
Linux	エクスポートJAVA_HOME = / usr / local / java-current
マック	エクスポートJAVA_HOME = / Library / Java / Home

Javaコンパイラの場所をシステムパスに追加します。

OS	出力
ウィンドウズ	文字列;％JAVA_HOME％\ binをシステム変数Pathの最後に追加します。
Linux	export PATH =$PATH:$JAVA_HOME / bin /
マック	必要ありません

ステップ3-AdobeFlash Builder4.5をセットアップする

このチュートリアルのすべての例は、Adobe Flash Builder 4.5 ProfessionIDE試用版を使用して作成されています。したがって、最新バージョンのAdobe FlashBuilderをマシンにインストールすることをお勧めします。また、オペレーティングシステムの互換性を確認してください。

Adobe Flash Builder IDEをインストールするには、最新のAdobe FlashBuilderバイナリをからダウンロードします。 https://www.adobe.com/in/products/flash-builder.html。インストールをダウンロードしたら、バイナリディストリビューションを便利な場所に解凍します。たとえば、WindowsのC：\ flash-builder、またはLinux / Unixの/ usr / local / flash-builderで、最後にPATH変数を適切に設定します。

Windowsマシンで次のコマンドを実行するか、FlashBuilder.exeをダブルクリックするだけで、FlashBuilderが起動します。

%C:\flash-builder\FlashBuilder.exe

Flash Builderは、Unix（Solaris、Linuxなど）マシンで次のコマンドを実行することで起動できます-

$/usr/local/flash-builder/FlashBuilder

Adobe FlashBuilderの試用版は60日間使用できます。利用規約に同意し、最初の登録手順をスキップしてIDEを続行してください。理解のために、教育目的で試用版を使用しています。

起動が成功した後、すべてが正常であれば、次の結果が表示されます-

Adobe Flash Builderには、FLEXSDKが事前構成されています。Adobe Flash Builder4.5にバンドルされている例ではFLEXSDK4.5を使用しています。

ステップ4– ApacheTomcatをセットアップする

Tomcatの最新バージョンはからダウンロードできます。 https://tomcat.apache.org/。インストールをダウンロードしたら、バイナリディストリビューションを便利な場所に解凍します。たとえば、Windowsの場合はC：\ apache-tomcat-6.0.33、Linux / Unixの場合は/usr/local/apache-tomcat-6.0.33で、インストール場所を指すCATALINA_HOME環境変数を設定します。

Tomcatは、Windowsマシンで次のコマンドを実行することで起動できます。または、startup.batをダブルクリックするだけです。

%CATALINA_HOME%\bin\startup.bat 
or 
C:\apache-tomcat-6.0.33\bin\startup.bat

Tomcatは、UNIX（Solaris、Linuxなど）マシンで次のコマンドを実行することで起動できます。

$CATALINA_HOME/bin/startup.sh 
Or 
/usr/local/apache-tomcat-6.0.33/bin/startup.sh

正常に起動すると、Tomcatに含まれているデフォルトのWebアプリケーションが次のサイトにアクセスして利用できるようになります http://localhost:8080/。すべてが正常であれば、次の結果が表示されます-

Tomcatの構成と実行の詳細については、ここに含まれているドキュメントと、TomcatのWebサイト（http://tomcat.apache.org）を参照してください。

Windowsマシンで以下のコマンドを実行することでTomcatを停止できます-

%CATALINA_HOME%\bin\shutdown
Or
C:\apache-tomcat-5.5.29\bin\shutdown

UNIX（Solaris、Linuxなど）のマシンで次のコマンドを実行すると、Tomcatを停止できます。

$CATALINA_HOME/bin/shutdown.sh
Or
/usr/local/apache-tomcat-5.5.29/bin/shutdown.sh

Flash Builderを使用して実際の「HelloWorld」アプリケーションの作成を開始する前に、Flexアプリケーションの実際の部分が何であるかを見てみましょう。

Flexアプリケーションは、次の4つの重要な部分で構成されています。そのうち、最後の部分はオプションですが、最初の3つの部分は必須です。

FlexFrameworkライブラリ
クライアント側のコード
パブリックリソース（HTML / JS / CSS）
サーバー側コード

HelloWordのような典型的なFlexアプリケーションのさまざまな部分のサンプルの場所は次のようになります-

名前	ロケーション
プロジェクトルート	こんにちは世界/
FlexFrameworkライブラリ	ビルドパス
パブリックリソース	html-template
クライアント側のコード	テーブルtable-bordered / com / tutorialspoint / client
サーバー側コード	テーブルtable-bordered / com / tutorialspoint / server

アプリケーションビルドプロセス

まず、FlexアプリケーションにはFlexフレームワークライブラリが必要です。その後、FlashBuilderは自動的にライブラリをビルドパスに追加します。

Flash Builderを使用してコードをビルドすると、FlashBuilderは次のタスクを実行します-

ソースコードをHelloWorld.swfファイルにコンパイルします。
html-templateフォルダーに格納されているファイルindex.template.htmlからHelloWorld.html（swfファイルのラッパーファイル）をコンパイルします
HelloWorld.swfファイルとHelloWorld.htmlファイルをターゲットフォルダーbin-debugにコピーします。
swfobject.jsをコピーします。これは、ターゲットフォルダーのHelloWorld.htmlにswfファイルを動的にロードするJavaScriptコードです。bin-debug
フレームワークライブラリを、frameworks_xxx.swfという名前のswfファイルの形式でターゲットフォルダーにコピーします。bin-debug
他のフレックスモジュール（sparkskins_xxx.swf、textLayout_xxx.swfなどの.swfファイル）をターゲットフォルダーにコピーします。

アプリケーション起動プロセス

Webブラウザの\ HelloWorld \ bin-debugフォルダにあるHelloWorld.htmlファイルを開きます。
HelloWorld.swfが自動的に読み込まれ、アプリケーションの実行が開始されます。

FlexFrameworkライブラリ

以下は、いくつかの重要なフレームワークライブラリに関する簡単な詳細です。Flexライブラリは.swc表記を使用して示されていることに注意してください

シニア番号	ノードと説明
1	playerglobal.swc このライブラリは、マシンにインストールされているFlashPlayerに固有であり、FlashPlayerでサポートされているネイティブメソッドが含まれています。
2	textlayout.swc このライブラリは、テキストレイアウト関連の機能をサポートしています。
3	framework.swc これは、Flexのコア機能を含むflexフレームワークライブラリです。
4	mx.swc このライブラリには、mxUIコントロールの定義が格納されています。
5	charts.swc このライブラリは、チャートコントロールをサポートしています。
6	spark.swc このライブラリには、SparkUIコントロールの定義が格納されています。
7	sparkskins.swc このライブラリは、SparkUIコントロールのスキニングをサポートします。

クライアント側のコード

Flexアプリケーションコードはで書くことができます MXML と同様 ActionScript。

シニア番号	タイプと説明
1	MXML MXMLは、ユーザーインターフェイスコンポーネントのレイアウトに使用するXMLマークアップ言語です。MXMLは、ビルドプロセス中にActionScriptにコンパイルされます。
2	ActionScript ActionScriptはオブジェクト指向の手続き型プログラミング言語であり、ECMAScript（ECMA-262）エディション4ドラフト言語仕様に基づいています。

Flexでは、ActionScriptとMXMLを組み合わせて、次のことを実行できます。

MXMLタグを使用してユーザーインターフェイスコンポーネントをレイアウトする
MXMLを使用して、サーバー上のデータソースへのアクセスなど、アプリケーションの非視覚的な側面を宣言的に定義します。
MXMLを使用して、サーバー上のユーザーインターフェイスコンポーネントとデータソース間のデータバインディングを作成します。
ActionScriptを使用して、MXMLイベント属性内にイベントリスナーを定義します。
を使用してスクリプトブロックを追加します鬼ごっこ。
外部のActionScriptファイルを含めます。
JavaScriptクラスをインポートします。
JavaScriptコンポーネントを作成します。

パブリックリソース

これらは、ホストHTMLページ、CSS、html-templateフォルダーの下にある画像など、Flexアプリケーションによって参照されるヘルプファイルです。以下のファイルが含まれています-

シニア番号	ファイル名と説明
1	index.template.html プレースホルダー付きのホストHTMLページ。Flash Builderは、このテンプレートを使用して、HelloWorld.swfファイルを使用して実際のページHelloWorld.htmlを作成します。
2	playerProductInstall.swf これは、FlashPlayerをエクスプレスモードでインストールするためのフラッシュユーティリティです。
3	swfobject.js これは、インストールされているFlash Playerのバージョンを確認し、HelloWorld.htmlページにHelloWorld.swfをロードするJavaScriptです。
4	html-template/history このフォルダには、アプリケーションの履歴管理のためのリソースが含まれています。

HelloWorld.mxml

これは、アプリケーションのビジネスロジックを実装して記述された実際のMXML / AS（ActionScript）コードであり、FlexコンパイラがブラウザのFlashPlayerによって実行されるSWFファイルに変換されます。

サンプルのHelloWorldEntryクラスは次のようになります-

<?xml version = "1.0" encoding = "utf-8"?>
<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"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">

   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
         }
      ]]>
   </fx:Script>
   
   <s:VGroup horizontalAlign = "center" width = "100%" height = "100%" 
      paddingTop = "100" gap = "50">
      <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" />
      <s:Button label = "Click Me!" id = "btnClickMe" 
         click = "btnClickMe_clickHandler(event)" />
   </s:VGroup>	
</s:Application>

次の表に、上記のコードスクリプトで使用されているすべてのタグの説明を示します。

シニア番号	ノードと説明
1	Application 常にFlexアプリケーションのルートタグであるアプリケーションコンテナを定義します。
2	Script ActionScript言語のビジネスロジックが含まれています。
3	VGroup FlexUIコントロールを垂直方向に含めることができる垂直グループ化コンテナーを定義します。
4	Label テキストを表示する非常にシンプルなユーザーインターフェイスコンポーネントであるLabelコントロールを表します。
5	Button クリックして何らかのアクションを実行できるボタンコントロールを表します。

サーバー側コード

これはアプリケーションのサーバー側の部分であり、非常にオプションです。アプリケーション内でバックエンド処理を行っていない場合、この部分は必要ありませんが、バックエンドで必要な処理があり、クライアント側アプリケーションがサーバーと対話する場合は、これらのコンポーネントを開発する必要があります。

次の章では、上記のすべての概念を使用して、 HelloWorld FlashBuilderを使用するアプリケーション。

Flash Builder4.5を使用してFlexアプリケーションを作成します。簡単なことから始めましょうHelloWorld 応用。

ステップ1-プロジェクトを作成する

最初のステップは、Flash BuilderIDEを使用して単純なFlexプロジェクトを作成することです。オプションを使用してプロジェクトウィザードを起動しますFile > New > Flex Project。次のようにウィザードウィンドウを使用して、プロジェクトにHelloWorldという名前を付けます。

アプリケーションタイプの選択 Web (runs in Adobe Flash Player)。ただし、これが選択されていない場合は、他のデフォルト値をそのままにして、[完了]ボタンをクリックします。プロジェクトが正常に作成されると、プロジェクトエクスプローラーに次のコンテンツが表示されます-

ここにすべての重要なフォルダの簡単な説明があります-

フォルダ	ロケーション
テーブルテーブルボーダー	ソースコード（mxml /クラスとして）ファイル。クライアントUIの表示を担当するクライアント側固有のJavaクラスを含むcom / tutorialspoint / clientフォルダー構造を作成しました。
bin-debug	これは出力部分であり、実際のデプロイ可能なWebアプリケーションを表します。履歴フォルダには、Flexアプリケーションの履歴管理用のサポートファイルが含まれています。 framework_xxx.swf、flexフレームワークファイルはflexアプリケーションで使用する必要があります。 HelloWorld.html、flexアプリケーションのラッパー/ホストHTMLファイル。 HelloWorld.swf、フレックスベースのアプリケーション。 playerProductInstall.swf、フラッシュプレーヤーエクスプレスインストーラー。 spark_xxx.swf、sparkコンポーネントサポート用のライブラリ。 swfobject.js、HelloWorld.htmlにHelloWorld.swfをロードするJavaScript。フラッシュプレーヤーのバージョンをチェックし、初期化パラメーターをHelloWorld.swfファイルに渡します。 textLayout_xxx.swf、テキストコンポーネントサポート用のライブラリ。
html-template	これは、構成可能なWebアプリケーションを表します。Flash Builderは、ファイルをhtml-templateからbin-debugフォルダーにコンパイルします。履歴フォルダには、Flexアプリケーションの履歴管理用のサポートファイルが含まれています。 index.template.html、FlashBuilder固有の構成用のプレースホルダーを持つflexアプリケーション用のラッパー/ホストHTMLファイル。ビルド中にbin-debugフォルダーのHelloWorld.htmlにコンパイルされます。 playerProductInstall.swf、フラッシュプレーヤーエクスプレスインストーラーは、ビルド中にbin-debugフォルダーにコピーされます。 swfobject.js、HelloWorld.htmlにHelloWorld.swfをロードするJavaScript。フラッシュプレーヤーのバージョンをチェックし、初期化パラメーターをHelloWorld.swfファイルに渡します。ビルド中にbindebugフォルダーにコピーされます。

ステップ2–外部CSSファイルを作成する

CSSファイルを作成する styles.css のラッパーHTMLページ用 html-template フォルダ。

html, body { 
   height:100%;
}

body { 
   margin:0; 
   padding:0; 
   overflow:auto; 
   text-align:center;		
}   

object:focus { 
   outline:none; 
}

#flashContent { 
   display:none;	
}

.pluginHeader {
   font-family:Arial, Helvetica, sans-serif;
   font-size:14px;
   color:#9b1204;
   text-decoration:none;
   font-weight:bold;
}

.pluginInstallText {
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#000000;
   line-height:18px;
   font-style:normal;
}

.pluginText { 
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#000000;
   line-height:18px;
   font-style:normal;
}

ステップ3–ラッパーのHTMLページテンプレートを変更する

ラッパーのHTMLページテンプレートを変更する index.template.html に htmltemplateフォルダ。Flash Builderは、デフォルトのラッパーHTMLページテンプレートhtml-template / index.template.htmlを作成します。これは、HelloWorld.htmlにコンパイルされます。

このファイルには、コンパイルプロセス中にFlashBuilderが置き換えるプレースホルダーが含まれています。たとえば、Flash Playerのバージョン、アプリケーション名などです。

フラッシュプラグインがインストールされていない場合にカスタムメッセージを表示するようにこのファイルを変更しましょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en">
   
   <head>
      <title>${title}</title>
      <meta name = "google" value = "notranslate" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <link rel = "stylesheet" href = "styles.css" type = "text/css"></link>
      <link rel = "stylesheet" type = "text/css" href = "history/history.css" />
      <script type = "text/javascript" table table-bordered = "history/history.js">
      </script>
      <script type = "text/javascript" table table-bordered = "swfobject.js"></script>
      
      <script type = "text/javascript">
         // For version detection, set to min. required Flash Player version,
         //or 0 (or 0.0.0), for no version detection.
         var swfVersionStr = "${version_major}.${version_minor}.${version_revision}"; // To use express install, set to playerProductInstall.swf, //otherwise the empty string. var xiSwfUrlStr = "${expressInstallSwf}";
         var flashvars = {};
         var params = {};
         params.quality = "high";
         params.bgcolor = "${bgcolor}"; params.allowscriptaccess = "sameDomain"; params.allowfullscreen = "true"; var attributes = {}; attributes.id = "${application}";
         attributes.name = "${application}"; attributes.align = "middle"; swfobject.embedSWF ( "${swf}.swf", "flashContent",
            "${width}", "${height}",
            swfVersionStr, xiSwfUrlStr,
            flashvars, params, attributes);

         // JavaScript enabled so display the flashContent div in case
         //it is not replaced with a swf object.
         swfobject.createCSS("#flashContent", "display:block;text-align:left;");
      </script>
   </head>
   
   <body>
      <div id = "flashContent">
         <p style = "margin:100px;">

            <table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
               <tr>
                  <td class = "pluginHeader">Flash Player Required</td>
               </tr>
               
               <tr>
                  <td class = "pluginText">The Adobe Flash Player version
                     10.2.0 or greater is required.</td>
               </tr>
               
               <tr>
                  <td class = "pluginInstallText" align = "left">
               
                  <table border = "0" width = "100%">
                     <tr class = "pluginInstallText" >
                        <td>Click here to download and install Adobe Flash Player:</td>
                        <td> </td>
                        <td align = "right">
                           <script type = "text/javascript">
                              var pageHost
                                 = ((document.location.protocol == "https:") ? "https://" : "http://");
                              document.write("<a target = '_blank'"
                                 +" href = 'http://get.adobe.com/flashplayer/'><"
                                 +"img style = 'border-style: none' table table-bordered = '"
                                 +pageHost
                                 +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
                                 +" alt = 'Get Adobe Flash player' /></a>" );
                           </script>
                        </td>
                     </tr>
                  </table>
               </tr>
            </table>
         </p>
      </div>
      
      <noscript>
         <object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            width = "${width}" height = "${height}" id = "${application}"> <param name = "movie" value = "${swf}.swf" />
            <param name = "quality" value = "high" />
            <param name = "bgcolor" value = "${bgcolor}" /> <param name = "allowScriptAccess" value = "sameDomain" /> <param name = "allowFullScreen" value = "true" /> <!--[if !IE]>--> <object type = "application/x-shockwave-flash" data = "${swf}.swf"
               width = "${width}" height = "${height}">
               <param name = "quality" value = "high" />
               <param name = "bgcolor" value = "${bgcolor}" />
               <param name = "allowScriptAccess" value = "sameDomain" />
               <param name = "allowFullScreen" value = "true" />
            <!--<![endif]-->
         
            <!--[if gte IE 6]>-->
               <p>
                  <p style = "margin:100px;">
                     <table width = "700" cellpadding = "10" cellspacing = "2" 
                        border = "0">
                        <tr>
                           <td class = "pluginHeader">Flash Player Required</td>
                        </tr>
                        
                        <tr>
                           <td class = "pluginText">The Adobe Flash Player version
                           10.2.0 or greater is required.</td>
                        </tr>
                        
                        <tr>
                           <td class = "pluginInstallText" align = "left">

                           <table border = "0" width = "100%">
                              <tr class = "pluginInstallText" >
                                 <td>Click here to download and install Adobe Flash 
                                    Player:</td>
                                 <td> </td>
                                 <td align = "right">
                                    <script type = "text/javascript">
                                       var pageHost
                                          = ((document.location.protocol == "https:") ? "https://" : "http://");
                                       document.write("<a target = '_blank'"
                                          +" href = 'http://get.adobe.com/flashplayer/'><"
                                          +"img style = 'border-style: none' table table-bordered = '"
                                          +pageHost
                                          +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
                                          +" alt = 'Get Adobe Flash player' /></a>" );
                                    </script>
                                 </td>
                              </tr>
                           </table>
                        </tr>
                     </table>
                  </p>
               </p>
            <!--<![endif]-->
         
            <p style = "margin:100px;">
               <table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
                  <tr><td class = "pluginHeader">Flash Player Required</td></tr>
                  <tr><td class = "pluginText">The Adobe Flash Player version
                     10.2.0 or greater is required.</td></tr>
                  <tr>
                     <td class = "pluginInstallText" align = "left">
                        <table border = "0" width = "100%">
                           <tr class = "pluginInstallText" >
                              <td>Click here to download and install Adobe Flash 
                                 Player:</td>
                              <td> </td>
                              <td align = "right">
                                 <script type = "text/javascript">
                                    var pageHost
                                       = ((document.location.protocol == "https:") ? "https://" : "http://");
                                    document.write("<a target = '_blank'"
                                       +" href = 'http://get.adobe.com/flashplayer/'><"
                                       +"img style = 'border-style: none' table table-bordered = '"
                                       +pageHost
                                       +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
                                       +" alt = 'Get Adobe Flash player' /></a>" );
                                 </script>
                              </td>
                           </tr>
                        </table>
                     </td>
                  </tr>
               </table>
            </p>
         <!--[if !IE]>-->
         </object>
         <!--<![endif]-->
         </object>
      </noscript>
   </body>
</html>

ステップ4–内部CSSファイルを作成する

CSSファイルを作成する Style.css にとって HelloWorld.mxml に table tablebordered/com/tutorialspointフォルダ。Flexは、HTML UIコントロール用のcssスタイルがあるのと同様に、UIコントロール用に同様のcssスタイルを提供します。

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

.heading {
   fontFamily: Arial, Helvetica, sans-serif;
   fontSize: 17px;
   color: #9b1204;
   textDecoration:none;
   fontWeight:normal;
}

.button {
   fontWeight: bold;			
}

.container {
   cornerRadius :10;
   horizontalCenter :0;	
   borderColor: #777777;
   verticalCenter:0;
   backgroundColor: #efefef;
}

ステップ5–エントリーレベルクラスを変更する

Flash Builderは、デフォルトのmxmlファイルテーブルtablebordered / com.tutorialspoint / HelloWorld.mxmlを作成します。これには、アプリケーションのルートタグ<application>コンテナーがあります。このファイルを変更して、「Hello、World！」を表示してみましょう。−

<?xml version = "1.0" encoding = "utf-8"?>
<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
   width = "100%" height = "100%"
      minWidth = "500" minHeight = "500"
      initialize = "application_initializeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
            styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe"
            click = "btnClickMe_clickHandler(event)" styleName = "button" />
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

同じソースディレクトリにさらにmxmlまたはactionscriptファイルを作成して、新しいアプリケーションを定義したり、ヘルパールーチンを定義したりできます。

ステップ6–アプリケーションを構築する

FlashBuilderには Build Automaticallyデフォルトでチェックされています。確認するだけですProblemsエラーがあるかどうかを確認します。変更が完了すると、エラーは表示されません。

ステップ7–アプリケーションを実行する

次に、[

アプリケーションの実行]メニューをクリックして、[HelloWorld アプリケーションを実行するためのアプリケーション。

すべてが正常な場合は、ブラウザがポップアップし、アプリケーションが起動して実行されていることを確認する必要があります。アプリケーションに問題がない場合は、次の結果が得られます。[オンラインで試す]

アプリケーションをFlashPlayerで実行しているため、ブラウザにFlashPlayerプラグインをインストールする必要があります。画面の指示に従ってプラグインをインストールするだけです。ブラウザにFlashPlayerプラグインがすでに設定されている場合は、次の出力が表示されるはずです。

おめでとう！を使用して最初のアプリケーションを実装しましたFlex。

このチュートリアルでは、アプリケーションの作成方法について説明します war ファイルとそれをApacheTomcatWebサーバールートにデプロイする方法。

この簡単な例を理解していれば、同じ手順に従って複雑なFlexアプリケーションをデプロイすることもできます。

次の手順に従って、Flexアプリケーションを作成しましょう-

ステップ	説明
1	packagecomの下にHelloWorldという名前のプロジェクトを作成します。Flex-アプリケーションの作成の章で説明されているtutorialspoint.client。
2	以下で説明するように、HelloWorld.mxmlを変更します。残りのファイルは変更しないでください。
3	アプリケーションをコンパイルして実行し、ビジネスロジックが要件に従って機能していることを確認します。

以下の手順に従って、Flexアプリケーションのリリースビルドを作成し、それをTomcatサーバーにデプロイします-

最初のステップは、Flash BuilderIDEを使用してリリースビルドを作成することです。オプションを使用してリリースビルドウィザードを起動しますFile > Export > Flash Builder > Release Build。

次のようにウィザードウィンドウを使用して、HelloWorldとしてプロジェクトを選択します

他のデフォルト値はそのままにして、[完了]ボタンをクリックします。これで、FlashBuilderはプロジェクトのリリースビルドを含むbin-releaseフォルダーを作成します。

これでリリースビルドの準備が整いました。次の手順に従ってFlexアプリケーションをデプロイしましょう-

ステップ	説明
1	アプリケーションのbin-releaseフォルダーのコンテンツをHelloWorld.warファイルの形式で圧縮し、Apache TomcatWebサーバーにデプロイします。
2	最後のステップで以下に説明するように、適切なURLを使用してWebアプリケーションを起動します。

以下は、変更されたmxmlファイルの内容です。 table table-bordered/com.tutorialspoint/HelloWorld.mxml。

<?xml version = "1.0" encoding = "utf-8"?>
<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"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center" 
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" 
            styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe" 
            click = "btnClickMe_clickHandler(event)" styleName = "button" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

すべての変更を行う準備ができたら、Flex-アプリケーションの作成の章で行ったように、アプリケーションをコンパイルして通常モードで実行します。アプリケーションに問題がない場合は、次の結果が得られます。[オンラインで試す]

WARファイルを作成する

これで、アプリケーションは正常に機能し、warファイルとしてエクスポートする準備が整いました。次の手順に従います-

プロジェクトのbin-releaseディレクトリC：\ workspace \ HelloWorld \ binreleaseに移動します
bin-releaseディレクトリ内で利用可能なすべてのファイルとフォルダを選択します。
選択したすべてのファイルとフォルダーをHelloWorld.zipというファイルに圧縮します。
HelloWorld.zipの名前をHelloWorld.warに変更します。

WARファイルをデプロイする

Tomcatサーバーを停止します。

HelloWorld.warファイルをtomcatインストールディレクトリ> webappsフォルダーにコピーします。
Tomcatサーバーを起動します。
webappsディレクトリ内を見ると、HelloWorldが作成されたフォルダがあるはずです。
これで、HelloWorld.warがTomcatWebサーバールートに正常にデプロイされました。

アプリケーションを実行する

WebブラウザにURLを入力-

http：// localhost：8080 / HelloWorld / HelloWorld.htmlを使用して、アプリケーションを起動します。

サーバー名（localhost）とポート（8080）は、Tomcatの構成によって異なる場合があります。

Flexアプリケーションのライフサイクル

アプリケーションのライフサイクルフェーズを理解していなくてもFlexアプリケーションを構築できますが、基本的なメカニズムを知っておくとよいでしょう。物事が発生する順序。実行時に他のFlexアプリケーションをロードするなどの機能を構成し、実行時にクラスライブラリとアセットをロードおよびアンロードするプロセスを管理するのに役立ちます。

Flexアプリケーションのライフサイクルをよく理解すると、コードを最適に実行する場所がわかるため、より優れたアプリケーションを構築して最適化することができます。たとえば、プリローダー中に一部のコードが実行されるようにする必要がある場合は、そのイベントのコードを配置する場所を知る必要があります。

フレックスアプリケーションをブラウザにロードすると、フレックスアプリケーションのライフサイクル中に次のイベントが発生します。

以下は、さまざまなFlexライフサイクルイベントに関する簡単な詳細です。

シニア番号	イベントと説明
1	preInitialize：mx.core.UIComponent.preinitialize イベントタイプ：mx.events.FlexEvent.PREINITIALIZE このイベントは、コンポーネントの初期化シーケンスの開始時にディスパッチされます。このイベントがディスパッチされると、コンポーネントは非常に未加工の状態になります。ボタンコントロールなどの多くのコンポーネントは、機能を実装するための内部子コンポーネントを作成します。たとえば、Buttonコントロールは、ラベルテキストを表す内部UITextFieldコンポーネントを作成します。 Flexがpre-initializeイベントをディスパッチするとき、コンポーネントのすべての内部子を含む子はまだ作成されていません。
2	初期化：mx.core.UIComponent.initialize イベントタイプ：mx.events.FlexEvent.INITIALIZE このイベントは、事前初期化フェーズの後にディスパッチされます。Flexフレームワークは、このフェーズでこのコンポーネントの内部構造を初期化します。このイベントは、コンポーネントが親に追加されると自動的に発生します。通常、initialize（）を呼び出す必要はありません。
3	CreationComplete：mx.core.UIComponent.creationComplete イベントタイプ：mx.events.FlexEvent.CREATION_COMPLETE このイベントは、コンポーネントの構築、プロパティ処理、測定、レイアウト、および描画が完了すると送信されます。この時点で、表示プロパティによっては、描画されていてもコンポーネントは表示されません。
4	applicationComplete：spark.components.Application.applicationComplete イベントタイプ：mx.events.FlexEvent.APPLICATION_COMPLETE アプリケーションが初期化され、LayoutManagerによって処理され、ディスプレイリストに添付された後にディスパッチされます。これは、アプリケーション作成ライフサイクルの最後のイベントであり、アプリケーションが完全にロードされたことを示します。

Flexライフサイクルの例

テストアプリケーションを作成して、Flexアプリケーションのテストライフサイクルを理解するための手順を実行しましょう-

ステップ	説明
1	packagecomの下にHelloWorldという名前のプロジェクトを作成します。Flex-アプリケーションの作成の章で説明されているtutorialspoint.client。
2	以下で説明するように、HelloWorld.mxmlを変更します。残りのファイルは変更しないでください。
3	アプリケーションをコンパイルして実行し、ビジネスロジックが要件に従って機能していることを確認します。

以下は、変更されたmxmlファイルの内容です。 src/com.tutorialspoint/HelloWorld.mxml。

<?xml version = "1.0" encoding = "utf-8"?>
<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"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500"
   initialize = "reportEvent(event)"
   preinitialize = "reportEvent(event)"
   creationComplete = "reportEvent(event)"
   applicationComplete = "reportEvent(event)">	
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
   
         [Bindable]
         private var report:String = "";

         private function reportEvent(event:FlexEvent):void {
            report += "\n" + (event.type + " event occured at: " 
            + getTimer() + " ms" + "\n");
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label textAlign = "center" width="100%" id = "lblHeader"
         fontSize = "40" color = "0x777777" styleName = "heading" 
         text = "Life Cycle Events Demonstration" />
         <s:TextArea id = "reportText" text = "{report}" editable = "false" 
         width = "300" height = "200">				
         </s:TextArea>			
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

Flexは、CSS to HTMLコンポーネントと同じ方法で、CSS構文とスタイルを使用してUIコントロールに適用することをサポートしています。

方法1：外部スタイルシートファイルの使用

アプリケーションのクラスパスで利用可能なスタイルシートを参照できます。たとえば、次のStyle.cssファイルについて考えてみます。com/tutorialspoint/client folder HelloWorld.mxmlファイルもあります。

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
...
.container {
   cornerRadius :10;
   horizontalCenter :0;	
   borderColor: #777777;
   verticalCenter:0;
   backgroundColor: #efefef;
}

次に、cssファイルは次のコードスニペットで参照できます

<fx:Style source = "/com/tutorialspoint/client/Style.css" />

styleNameプロパティを使用してUIコンポーネントにスタイルを割り当てます

<s:BorderContainer width = "500" height = "500" id = "mainContainer" 
   styleName = "container"> 
   ...
</s:BorderContainer>

方法2：UIコンテナコンポーネント内でスタイルを使用する

<fx：Style>タグを使用して、UIコンテナコンポーネント内でスタイルを定義できます。

クラスレベルセレクター

<fx:Style>
   @namespace s "library://ns.adobe.com/flex/spark";
   @namespace mx "library://ns.adobe.com/flex/mx";

   /* class level selector  */
   .errorLabel {
      color: red;
   }		
</fx:Style>

styleNameプロパティを使用してUIコンポーネントにスタイルを割り当てます。

<s:Label id = "errorMsg" text = "This is an error message" styleName = "errorLabel" />

IDレベルセレクター

IDセレクターを使用してUIコンポーネントのスタイルを設定します。

<fx:Style> 
   /* id level selector  */ 
   #msgLabel { 
      color: gray; 
   } 
</fx:Style>

<s:Label id = "msgLabel" text = "This is a normal message" />

タイプレベルセレクター

1つのGOで1つのタイプのUIコンポーネントのスタイルを設定します。

<fx:Style> 
   /* style applied on all buttons  */ 
   s|Button {  
      fontSize: 15; 
      color: #9933FF; 
   } 
</fx:Style>

<s:Button label = "Click Me!" id = "btnClickMe"
   click = "btnClickMe_clickHandler(event)" />

CSSの例を使用したフレックススタイル

テストアプリケーションを作成して、FlexアプリケーションのCSSスタイルを確認する手順を実行しましょう-

ステップ	説明
1	Flex-アプリケーションの作成の章で説明されているように、パッケージcom.tutorialspoint.clientの下にHelloWorldという名前のプロジェクトを作成します。
2	以下で説明するように、Style.css、HelloWorld.mxmlを変更します。残りのファイルは変更しないでください。
3	アプリケーションをコンパイルして実行し、ビジネスロジックが要件に従って機能していることを確認します。

変更されたCSSファイルの内容は次のとおりです src/com.tutorialspoint/Style.css。

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

.heading
{
   fontFamily: Arial, Helvetica, sans-serif;
   fontSize: 17px;
   color: #9b1204;
   textDecoration:none;
   fontWeight:normal;
}

.button {
   fontWeight: bold;			
}

.container {
   cornerRadius :10;
   horizontalCenter :0;	
   borderColor: #777777;
   verticalCenter:0;
   backgroundColor: #efefef;
}

以下は、変更されたmxmlファイルの内容です。 src/com.tutorialspoint/HelloWorld.mxml。

<?xml version = "1.0" encoding = "utf-8"?>
<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"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500"
   initialize = "application_initializeHandler(event)">
   
   <!--Add reference to style sheet -->
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />

   <!--Using styles within mxml file -->
   <fx:Style>
      @namespace s "library://ns.adobe.com/flex/spark";
      @namespace mx "library://ns.adobe.com/flex/mx";

      /* class level selector  */
      .errorLabel {
         color: red;
      }

      /* id level selector  */
      #msgLabel {
         color: gray;
      }

      /* style applied on all buttons  */
      s|Button {
         fontSize: 15;
         color: #9933FF;
      }
   </fx:Style>

   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "CSS Demonstrating Application";
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "560" height = "500" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50"
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label width = "100%" id = "lblHeader" fontSize = "40"
            color = "0x777777" styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe"
            click = "btnClickMe_clickHandler(event)"  />
         <s:Label id = "errorMsg"
            text = "This is an error message" styleName = "errorLabel" />
         <s:Label id = "msgLabel" text = "This is a normal message" />
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

スキニングとは何ですか？

Flexでのスキニングは、UIコンポーネントのルックアンドフィールを完全にカスタマイズするプロセスです。
スキンは、コンポーネントのテキスト、画像、フィルター、遷移、および状態を定義できます。
スキンは、個別のmxmlまたはActionScriptコンポーネントとして作成できます。
スキンを使用して、UIコンポーネントのすべての視覚的側面を制御できます。
スキンを定義するプロセスは、すべてのUIコンポーネントで同じです。

ステップ1-スキンを作成する

オプションを使用してCreateMXMLスキンウィザードを起動します File > New > MXML Skin。

パッケージを次のように入力します com.tutorialspoint.skin、名前を GradientBackgroundSkin 既存のflexBorderContainerコントロールとしてホストコンポーネントを選択しますspark.component.BorderContainer。

これで、BorderContainerのスキンが作成されました。mxmlスキンファイルのコンテンツを変更しますsrc/com.tutorialspoint/skin/GradientBackgroundSkin.mxml。

次のように塗りつぶしレイヤーを更新します-

<!-- fill -->
<s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
   <s:fill>
      <s:LinearGradient rotation = "90">
         <s:GradientEntry color = "0x888888" ratio = "0.2" />
         <s:GradientEntry color = "0x111111" ratio = "1" />
      </s:LinearGradient>
   </s:fill>
</s:Rect>

ステップ2：肌を塗る

2つの方法でコンポーネントにスキンを適用できます-

MXMLスクリプトでスキンを（静的に）適用します

適用する GradientBackgroundSkin IDを持つBorderContainerへ mainContainer そのを使用して skinClass 属性。

<s:BorderContainer width = "560" height = "500" id = "mainContainer" 
   styleName = "container">
   <s:VGroup width = "100%" height = "100%" gap = "50" 
      horizontalAlign = "center" verticalAlign = "middle" 
      skinClass = "com.tutorialspoint.skin.GradientBackgroundSkin">

ActionScriptでスキンを適用する（動的に）

適用する GradientBackgroundSkin IDを持つBorderContainerへ mainContainer そのを使用して skinClass プロパティ。

protected function gradientBackground_clickHandler(event:MouseEvent):void {
   mainContainer.setStyle("skinClass", GradientBackgroundSkin);
}

スキンの例を使用したフレックススタイル

次の手順に従って、テストアプリケーションを作成してFlexアプリケーションでスキニングが実際に動作することを確認しましょう。

ステップ	説明
1	Flex-アプリケーションの作成の章で説明されているように、パッケージcom.tutorialspoint.clientの下にHelloWorldという名前のプロジェクトを作成します。
2	上で説明したように、パッケージcom.tutorialspoint.skinの下にスキンGradientBackgroundSkin.mxmlを作成します。残りのファイルは変更しないでください。
3	以下で説明するように、HelloWorld.mxmlを変更します。残りのファイルは変更しないでください。
4	アプリケーションをコンパイルして実行し、ビジネスロジックが要件に従って機能していることを確認します。

以下は、GradientBackgroundSkin.mxmlファイルの内容です。 src/com/tutorialspoint/skin/GradientBackg roundSkin.mxml。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Skin xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx">
   
   <!-- host component -->
   <fx:Metadata>
      [HostComponent("spark.components.BorderContainer")]
   </fx:Metadata> 

   <!-- states -->
   <s:states>
      <s:State name = "disabled" />
      <s:State name = "disabled" />
      <s:State name = "normal" />
   </s:states>

   <!-- SkinParts
   name = contentGroup, type = spark.components.Group, required = false
   -->
   
   <!-- fill -->
   <s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
      <s:fill>
         <s:LinearGradient rotation = "90">
            <s:GradientEntry color = "0x111111" ratio = "0.2" />
            <s:GradientEntry color = "0x888888" ratio = "1" />
         </s:LinearGradient>
      </s:fill>
   </s:Rect>	
   
   <!-- must specify this for the host component --> 
   <s:Group id = "contentGroup" left = "0" right = "0" top = "0" bottom = "0" />
</s:Skin>

以下は、変更されたHelloWorld.mxmlの内容です。 filesrc/com/tutorialspoint/client/HelloWorld.mxml。

<?xml version = "1.0" encoding = "utf-8"?>
<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"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500"
   initialize = "application_initializeHandler(event)">

   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import com.tutorialspoint.skin.GradientBackgroundSkin;
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         import spark.skins.spark.BorderContainerSkin;			

         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
         }

         protected function gradientBackground_clickHandler(event:MouseEvent):void {
            mainContainer.setStyle("skinClass", GradientBackgroundSkin );
         }

         protected function standardBackground_clickHandler(event:MouseEvent):void {
            mainContainer.setStyle("skinClass", BorderContainerSkin );
         }
      ]]>
   </fx:Script>
   
   <fx:Declarations>
      <s:RadioButtonGroup id = "selectorGroup" />
   </fx:Declarations>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer"
      skinClass = "spark.skins.spark.BorderContainerSkin" 
      horizontalCenter = "0" verticalCenter = "0" cornerRadius = "10">
      
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "green" 
            styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe" 
            click = "btnClickMe_clickHandler(event)" />
         <s:RadioButton color = "gray" fontWeight = "bold" 
            group = "{selectorGroup}" label = "Standard Background" 
            click = "standardBackground_clickHandler(event)" selected = "true" />
         <s:RadioButton color = "gray" fontWeight = "bold" 
            group = "{selectorGroup}" label = "Gradient Background" 
            click = "gradientBackground_clickHandler(event)" />			
      </s:VGroup>			
   </s:BorderContainer>	
</s:Application>

データバインディングとは何ですか？

データバインディングは、あるオブジェクトのデータが別のオブジェクトに関連付けられるプロセスです。これには、ソースプロパティ、宛先プロパティ、およびソースから宛先にデータをコピーするタイミングを示すトリガーイベントが必要です。

Flexは、以下のようにデータバインディングを行う3つの方法を提供します

MXMLスクリプトの中括弧構文（{}）
MXMLの<fx：binding>タグ
ActionScriptのBindingUtils

データバインディング–MXMLで中括弧を使用する

次の例は、中括弧を使用してソースから宛先へのデータバインディングを指定する方法を示しています。

<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />

データバインディング– MXMLで<fx：Binding>タグを使用

次の例は、使用方法を示していますソースから宛先へのデータバインディングを指定するタグ。

<fx:Binding source = "txtInput1.text" destination = "txtInput2.text" />
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" />

データバインディング–ActionScriptでBindingUtilsを使用する

次の例は、BindingUtilsを使用してソースから宛先へのデータバインディングを指定する方法を示しています。

<fx:Script>
   <![CDATA[
      import mx.binding.utils.BindingUtils;
      import mx.events.FlexEvent;

      protected function txtInput2_preinitializeHandler(event:FlexEvent):void {
         BindingUtils.bindProperty(txtInput2,"text",txtInput1, "text");
      }      
   ]]>
</fx:Script>

<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" 
   preinitialize = "txtInput2_preinitializeHandler(event)" />

Flexデータバインディングの例

以下の手順に従って、テストアプリケーションを作成してFlexアプリケーションでスキニングが実際に動作することを確認しましょう。

ステップ	説明
1	Flex-アプリケーションの作成の章で説明されているように、パッケージcom.tutorialspoint.clientの下にHelloWorldという名前のプロジェクトを作成します。
2	以下で説明するように、HelloWorld.mxmlを変更します。残りのファイルは変更しないでください。
3	アプリケーションをコンパイルして実行し、ビジネスロジックが要件に従って機能していることを確認します。

以下は、変更されたHelloWorld.mxmlファイルの内容です。src/com/tutorialspoint/client/HelloWorld.mxml。

<?xml version = "1.0" encoding = "utf-8"?>
<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
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.binding.utils.BindingUtils;   
         import mx.events.FlexEvent;

         protected function txtInput6_preinitializeHandler(event:FlexEvent):void {
            BindingUtils.bindProperty(txtInput6,"text",txtInput5, "text");
         }
      ]]>
   </fx:Script>
   
   <fx:Binding source = "txtInput3.text" destination = "txtInput4.text" />
   <s:BorderContainer width = "500" height = "550" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center" 
         verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Data Binding Demonstration"
            fontSize = "40" color = "0x777777" styleName = "heading" />
         <s:Panel title = "Example #1 (Using Curly Braces,\{\})" width = "400" 
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput1" />	
            </s:HGroup>
            
            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput2" text = "{txtInput1.text}" />
            </s:HGroup>						
         </s:Panel>
         
         <s:Panel title = "Example #2 (Using &lt;fx:Binding&gt;)" width = "400" 
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput3" />	
            </s:HGroup>
            
            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6" />
               <s:Label id = "txtInput4" />
            </s:HGroup>						
         </s:Panel>
         
         <s:Panel title = "Example #3 (Using BindingUtils)" width = "400" 
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput5" />	
            </s:HGroup>
            
            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6" />
               <s:TextInput enabled = "false" id = "txtInput6" 
                  preinitialize = "txtInput6_preinitializeHandler(event)" />
            </s:HGroup>						
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

すべてのユーザーインターフェイスは、次の3つの主要な側面を考慮します-

UI Elements−これらは、ユーザーが最終的に見て操作するコア視覚要素です。Flexは、このチュートリアルで取り上げる基本的な要素から複雑な要素まで、広く使用されている一般的な要素の膨大なリストを提供します。
Layouts− UI要素を画面上でどのように編成するかを定義し、GUI（グラフィカルユーザーインターフェイス）に最終的なルックアンドフィールを提供します。この部分については、レイアウトの章で説明します。
Behavior−これらのイベントは、ユーザーがUI要素を操作したときに発生します。この部分については、イベント処理の章で説明します。

FlexUI要素

Flex UIライブラリは、複雑なWebベースのユーザーインターフェイスを作成するために、明確に定義されたクラス階層でクラスを提供します。このコンポーネント階層内のすべてのクラスは、EventDispatcher 以下に示す基本クラス-

すべての基本的なUIコントロールは、UIコンポーネントクラスからプロパティを継承します。UIコンポーネントクラスは、EventDispatcherおよびその他のトップレベルクラスからプロパティを継承します。

シニア番号	コントロールと説明
1	FlexEventDispatcherクラス EventDispatcherクラスは、イベントをディスパッチできるすべてのクラスの基本クラスです。EventDispatcherクラスを使用すると、ディスプレイリスト上の任意のオブジェクトをイベントターゲットにすることができ、IEventDispatcherインターフェイスのメソッドを使用できます。
2	Flex UIComponent UIComponentクラスは、インタラクティブと非インタラクティブの両方のすべてのビジュアルコンポーネントの基本クラスです。

基本的なコントロール

以下は、いくつかの重要な基本的なコントロールです-

シニア番号	コントロールと説明
1	ラベル Labelは、均一にフォーマットされたテキストの1行以上をレンダリングできる低レベルのUIComponentです。
2	テキストテキストコントロールを使用すると、アプリケーションに通常のテキストだけでなくHTMLコンテンツも表示できます。
3	画像画像コントロールを使用すると、実行時にJPEG、PNG、GIF、およびSWFファイルをインポートできます。
4	LinkButton LinkButtonコントロールは、ユーザーがマウスをその上に移動するとコンテンツが強調表示されるボーダレスボタンコントロールです。

フォームコントロールを使用すると、ユーザーはデータを入力でき、アプリケーションとの対話機能を提供します。すべてのフォームUIは、UIComponentクラスからプロパティを制御および継承し、UIComponentクラスはEventDispatcherおよびその他のトップレベルクラスからプロパティを継承します。

シニア番号	コントロールと説明
1	FlexEventDispatcherクラス EventDispatcherクラスは、イベントをディスパッチできるすべてのクラスの基本クラスです。EventDispatcherクラスを使用すると、ディスプレイリスト上の任意のオブジェクトをイベントターゲットにすることができ、IEventDispatcherインターフェイスのメソッドを使用できます。
2	Flex UIComponent UIComponentクラスは、インタラクティブと非インタラクティブの両方のすべてのビジュアルコンポーネントの基本クラスです。

フォームコントロール

以下はいくつかの重要なフォームコントロールです-

シニア番号	コントロールと説明
1	ボタンボタンコンポーネントは、一般的に使用される長方形のボタンです。
2	ToggleButton ToggleButtonコンポーネントは、トグルボタンを定義します。
3	チェックボックス CheckBoxコンポーネントは、オプションのラベルと、チェックマークを含めるかどうかを指定できる小さなボックスで構成されます。
4	カラーピッカー ColorPickerコントロールは、ユーザーが見本リストから色を選択する方法を提供します。
5	コンボボックス ComboBoxコントロールは、DropDownListBaseコントロールの子クラスです。
6	DateChooser DateChooserコントロールには、月の名前、年、および曜日のグリッドが表示され、列には曜日のラベルが付けられます。
7	ラジオボタン RadioButtonコンポーネントを使用すると、ユーザーは相互に排他的な選択肢のセット内で1つの選択肢を選択できます。
8	TextArea TextAreaは、ユーザーがフォーマットされたテキストの複数行を入力および編集できるようにするテキスト入力コントロールです。
9	TextInput TextInputは、ユーザーが1行の均一にフォーマットされたテキストを入力および編集できるようにするテキスト入力コントロールです。
10	ドロップダウンリスト DropDownListコントロールには、ユーザーが単一の値を選択できるドロップダウンリストが含まれています。
11	NumericStepper NumericStepperコントロールを使用すると、順序付けられたセットから番号を選択できます。

複雑なコントロールは、ユーザーに大量のデータをより簡単な方法で処理するための高度な機能を提供し、アプリケーションとの対話機能を提供します。すべてのComplexUIコントロールは、UIComponentクラスからプロパティを継承し、UIComponentクラスは、EventDispatcherおよびその他のトップレベルクラスからプロパティを継承します。

シニア番号	コントロールと説明
1	FlexEventDispatcherクラス EventDispatcherクラスは、イベントをディスパッチできるすべてのクラスの基本クラスです。EventDispatcherクラスを使用すると、ディスプレイリスト上の任意のオブジェクトをイベントターゲットにすることができ、IEventDispatcherインターフェイスのメソッドを使用できます。
2	Flex UIComponent UIComponentクラスは、インタラクティブと非インタラクティブの両方のすべてのビジュアルコンポーネントの基本クラスです。

複雑なコントロール

以下は、いくつかの重要な複雑なコントロールです-

シニア番号	コントロールと説明
1	DataGrid DataGridコントロールは、スクロール可能なグリッドの上に列見出しの行を表示します。
2	AdvancedDataGrid AdvancedDataGridは、データ視覚化機能を追加するために、標準のDataGridコントロールにいくつかの追加機能を追加します。
3	メニューメニューコントロールは、個別に選択可能な選択肢のポップアップメニューを作成します。
4	プログレスバー ProgressBarコントロールは、時間の経過に伴うタスクの進行状況を視覚的に表現します。
5	RichTextEditor RichTextEditorコントロールを使用すると、ユーザーはテキストを入力してフォーマットできます。
6	TileList TileListコントロールTileListコントロールは、タイルに配置された多数のアイテムを表示します。
7	木ツリーコントロールを使用すると、ユーザーは展開可能なツリーとして配置された階層データを表示できます。
8	VideoPlayer VideoPlayerコントロールは、プログレッシブダウンロード、マルチビットレートストリーミング、およびストリーミングビデオをサポートするスキン可能なビデオプレーヤーです。
9	アコーディオンアコーディオンコントロールには、子MXコンテナまたはSpark NavigatorContentコンテナのコレクションがありますが、一度に表示できるのはそのうちの1つだけです。
10	TabNavigator TabNavigatorコントロールには、子コンテナ間を移動するためのTabBarコンテナが含まれています。
11	ToggleButtonBar ToggleButtonBarコントロールは、選択または選択解除された状態を維持するボタンの水平または垂直グループを定義します。

レイアウトパネルコントロールは、ユーザーがページ上のUIコントロールを整理するために提供します。すべてのレイアウトコントロールはUIComponentクラスからプロパティを継承し、UIComponentクラスはEventDispatcherおよびその他のトップレベルクラスからプロパティを継承します。

シニア番号	コントロールと説明
1	FlexEventDispatcherクラス EventDispatcherクラスは、イベントをディスパッチできるすべてのクラスの基本クラスです。EventDispatcherクラスを使用すると、ディスプレイリスト上の任意のオブジェクトをイベントターゲットにすることができ、IEventDispatcherインターフェイスのメソッドを使用できます。
2	Flex UIComponent UIComponentクラスは、インタラクティブと非インタラクティブの両方のすべてのビジュアルコンポーネントの基本クラスです。

レイアウトパネル

以下はいくつかの重要なレイアウトパネルです-

シニア番号	パネルと説明
1	BorderContainer BorderContainerクラスは、コンテナの境界線の外観と背景の塗りつぶしを制御するCSSスタイルのセットを提供します。
2	形フォームコンテナは、フォームのレイアウトを制御し、フォームフィールドを必須またはオプションとしてマークし、エラーメッセージを処理し、フォームデータをFlexデータモデルにバインドしてデータのチェックと検証を実行します。
3	VGroup VGroupコンテナは、VerticalLayoutクラスを使用するGroupコンテナです。
4	HGroup HGroupコンテナは、HorizontalLayoutクラスを使用するGroupコンテナです。
5	パネル Panelクラスは、タイトルバー、キャプション、境界線、およびその子のコンテンツ領域を含むコンテナです。
6	SkinnableContainer SkinnableContainerクラスは、ビジュアルコンテンツを提供するスキン可能なコンテナの基本クラスです。
7	TabBar TabBarは、同一のタブのセットを表示します。
8	TitleWindow TitleWindowは、Panelを拡張して、閉じるボタンと移動領域を含めます。

エフェクトの概念を使用して、フレックスアプリケーションに動作を追加できます。たとえば、テキストボックスにフォーカスがある場合、テキストを太字にし、サイズを少し大きくすることができます。

すべてのエフェクトはEffectクラスからプロパティを継承し、EffectクラスはEventDispatcherやその他のトップレベルクラスからプロパティを継承します。

シニア番号	効果と説明
1	フレックスエフェクトクラス Effectクラスは、すべてのFlexエフェクトの基本機能を定義する抽象基本クラスです。このクラスは、すべてのエフェクトの基本ファクトリクラスを定義します。

基本的な効果

以下は、いくつかの重要な基本的な視覚効果です-

シニア番号	効果と説明
1	フェードフェードエフェクトは、コンポーネントのアルファプロパティをアニメーション化します。
2	WipeLeft WipeLeftクラスは、左ワイプ効果を定義します。
3	WipeRight WipeRightクラスは、ワイプライト効果を定義します。
4	Move3D Move3Dクラスは、ターゲットオブジェクトをx、y、およびz次元で移動します。
5	Scale3D Scale3Dクラスは、変換の中心を中心に3次元でターゲットオブジェクトをスケーリングします。
6	Rotate3D Rotate3Dクラスは、ターゲットオブジェクトをx、y、またはz軸を中心に3次元で回転させます。
7	アニメートするこのアニメーション効果は、値の間の任意のプロパティのセットをアニメーション化します。motionPathsプロパティを設定して、アニメーション化するプロパティと値を指定します。

Flexは、イベントの概念を使用して、アプリケーション内の状態またはユーザーインタラクションに応じて、あるオブジェクトから別のオブジェクトにデータを渡します。

ActionScriptには一般的な Eventイベントの操作に必要な機能の多くを定義するクラス。Flexアプリケーション内でイベントが発生するたびに、Eventクラス階層から3種類のオブジェクトが作成されます。

イベントには次の3つの主要なプロパティがあります

シニア番号	プロパティと説明
1	Type ザ・ typeどのようなイベントが発生したかについて述べています。これは、クリック、初期化、マウスオーバー、変更などです。実際の値は、MouseEvent.CLICKのような定数で表されます。
2	Target ザ・ target Eventのプロパティは、イベントを生成したコンポーネントへのオブジェクト参照です。clickMeButtonのIDを持つボタンをクリックすると、そのクリックイベントのターゲットはclickMeButtonになります。
3	CurrentTarget ザ・ currentTargetプロパティはコンテナ階層を変化させます。主にイベントの流れを扱っています。

イベントフローフェーズ

イベントは、イベントハンドラーを探す3つのフェーズを通過します。

シニア番号	フェーズと説明
1	Capture キャプチャフェーズでは、プログラムは外部（または最上位）の親から最も内側の親へのイベントハンドラの検索を開始します。キャプチャフェーズは、イベントをトリガーしたオブジェクトの親で停止します。
2	Target ターゲットフェーズでは、イベントをトリガーしたコンポーネントでイベントハンドラーがチェックされます。
3	Bubble バブルフェーズはキャプチャフェーズの逆であり、ターゲットコンポーネントの親から上に向かって、構造全体に戻ります。

次のアプリケーションコードを検討してください-

<?xml version = "1.0" encoding = "utf-8"?>
<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
   width = "100%" height = "100%" minWidth = "500" minHeight = "500" >
   
   <s:Panel>
      <s:Button id = "clickMeButton" label = "Click Me!" click = "doAction( );" />
   </s:Panel>   
</s:Application>

ユーザーがボタンをクリックすると、パネルとアプリケーションもクリックされます。

イベントは、イベントハンドラーの割り当てを探す3つのフェーズを通過します。

以下の手順に従って、Flexアプリケーションでのイベント処理をテストしましょう-

ステップ	説明
1	Flex-アプリケーションの作成の章で説明されているように、パッケージcom.tutorialspoint.clientの下にHelloWorldという名前のプロジェクトを作成します。
2	以下で説明するように、HelloWorld.mxmlを変更します。残りのファイルは変更しないでください。
3	アプリケーションをコンパイルして実行し、ビジネスロジックが要件に従って機能していることを確認します。

以下は、変更されたmxmlファイルの内容です。 src/com.tutorialspoint/HelloWorld.mxml。

<?xml version = "1.0" encoding = "utf-8"?>
<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
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         protected function reportEvent(event:MouseEvent):void {
            var target:String = event.target.id;
            var currentTarget:String = event.target.id;
            var eventPhase: String;

            if(event.target is Button) {
               var button:Button = event.target as Button;
               target = button.label + " Button";
            } else if(event.target is HGroup) {
               var hGroup:HGroup = event.target as HGroup;
               target = hGroup.id + " HGroup";
            } else if(event.target is Panel) {
               var panel:Panel = event.target as Panel;
               target = panel.id + " Panel";
            }

            if(event.currentTarget is Button) {
               var button1:Button = event.currentTarget as Button;
               currentTarget = button1.label + " Button";
            } else if(event.currentTarget is HGroup) {
               var hGroup1:HGroup = event.currentTarget as HGroup;
               currentTarget = hGroup1.id + " HGroup";
            } else if(event.currentTarget is Panel) {
               var panel1:Panel = event.currentTarget as Panel;
               currentTarget = panel1.id + " Panel";
            }

            var eventPhaseInt:uint = event.eventPhase;

            if(eventPhaseInt == EventPhase.AT_TARGET) {
               eventPhase = "Target";
            } else if(eventPhaseInt == EventPhase.BUBBLING_PHASE) {
               eventPhase = "Bubbling";
            } else if(eventPhaseInt == EventPhase.CAPTURING_PHASE) {
               eventPhase = "Capturing";
            }
            
            reports.text += " Target: " + target + "\n currentTarget: " +
               currentTarget + "\n Phase: " + eventPhase + "\n----------\n";
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "10"
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Event Handling Demonstration"
            fontSize = "40" color = "0x777777" styleName = "heading" />

         <s:Panel id = "parentPanel" title = "Main Parent"
            click = "reportEvent(event)" width = "500"
            height = "100" includeInLayout = "true" visible = "true">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle"
                  horizontalAlign = "center" />
            </s:layout>
            
            <s:HGroup id = "mainHGroup" click = "reportEvent(event)">
               <s:Button label = "Click Me" click = "reportEvent(event)" />
            </s:HGroup>
         </s:Panel>

         <s:Panel id = "reportPanel" title = "Events" width = "500" height = "230">
            <mx:Text id = "reports" />
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

Flexには、カスタムコンポーネントを作成する2つの方法があります。

ActionScriptの使用
MXMLの使用

ActionScriptの使用

既存のコンポーネントを拡張することにより、コンポーネントを作成できます。Flash Builderを使用してコンポーネントを作成するには、をクリックします。File > New > ActionScript Class。

以下に示すように詳細を入力します-

Flash Builderは、次のCustomButton.asファイルを作成します。

package com.tutorialspoint.client {
   import spark.components.Button;

   public class CustomButton extends Button {
      public function CustomButton() {
         super();
      }
   }
}

MXMLの使用

既存のコンポーネントを拡張することにより、コンポーネントを作成できます。Flash Builderを使用してコンポーネントを作成するには、をクリックします。File > New > MXML Component。

以下のように詳細を入力します。

Flash Builderは、次のCustomLogin.mxmlファイルを作成します。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Group xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx" 
   width = "400" height = "300">
</s:Group>

次の手順に従って、Flexアプリケーションでカスタムコントロールをテストしましょう-

ステップ	説明
1	Flex-アプリケーションの作成の章で説明されているように、パッケージcom.tutorialspoint.clientの下にHelloWorldという名前のプロジェクトを作成します。
2	以下で説明するように、HelloWorld.mxmlを変更します。残りのファイルは変更しないでください。
3	上で説明したように、CustomLogin.mxmlおよびCustomButton.asコンポーネントを作成します。以下に説明するように、これらのファイルを変更します。残りのファイルは変更しないでください。
4	アプリケーションをコンパイルして実行し、ビジネスロジックが要件に従って機能していることを確認します。

以下は、変更されたmxmlファイルの内容です。 src/com.tutorialspoint/client/CustomLogin.mxml。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Group xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx" width = "400" height = "300">
   
   <s:Form>
      <s:FormItem label = "UserName:">
         <s:TextInput width = "200" />
      </s:FormItem>
      
      <s:FormItem label = "Password:">
         <s:TextInput width = "200" displayAsPassword = "true" />
      </s:FormItem>
      
      <s:FormItem>
         <s:Button label = "Login" />
      </s:FormItem>		
   </s:Form>
</s:Group>

以下は、変更されたmxmlファイルの内容です。 src/com.tutorialspoint/client/CustomButton.as。

package com.tutorialspoint.client {
   import spark.components.Button;

   public class CustomButton extends Button {
      
      public function CustomButton() {
         super();
         this.setStyle("color","green");
         this.label = "Submit";
      }
   }
}

以下は、変更されたmxmlファイルの内容です。 src/com.tutorialspoint/client/HelloWorld.mxml。

<?xml version = "1.0" encoding = "utf-8"?>
<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" 
   xmlns:client = "com.tutorialspoint.client.*"
   initialize = "application_initializeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
        import mx.events.FlexEvent;

        protected function application_initializeHandler(event:FlexEvent):void {
           //create a new custom button
           var customButton: CustomButton = new CustomButton();
           asPanel.addElement(customButton);
        }

      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "10" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Custom Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />

         <s:Panel title = "Using MXML Component" width = "400" height = "200">
            <client:CustomLogin>			
            </client:CustomLogin>		
         </s:Panel>
         
         <s:Panel  title = "Using AS Component" width = "400" height = "100">
            <s:VGroup id = "asPanel" width = "100%" height = "100%" gap = "10" 
               horizontalAlign = "center" verticalAlign = "middle">
            </s:VGroup>
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

Flexは、サーバー側のデータをクライアント側に提供するRPCサービスを提供します。Flexは、サーバー側のデータに対してかなりの量の制御を提供します。

Flex RPCサービスを使用して、サーバー側で実行されるユーザーアクションを定義できます。
Flex RPC Sservicesは、任意のサーバー側テクノロジーと統合できます。
Flex RPCサービスの1つは、ネットワークを介して転送される圧縮バイナリデータの組み込みサポートを提供し、非常に高速です。

Flexは、次の3種類のRPCサービスを提供します

シニア番号	RPCサービスと説明
1	HttpService <mx：HTTPService>タグは、MXMLファイル内のHTTPServiceオブジェクトを表すために使用されます。HTTPServiceオブジェクトのsend（）メソッドを呼び出すと、指定されたURLに対してHTTP要求が行われ、HTTP応答が返されます。HTTPHEAD、OPTIONS、TRACE、およびDELETEメソッドを使用することもできます。
2	WebService <mx：WebService>は、SOAP準拠のWebサービスの操作にアクセスするために使用されます。
3	RemoteObject <mx：RemoteObject>タグは、MXMLファイル内のHTTPServiceオブジェクトを表すために使用されます。このタグを使用すると、アクションメッセージフォーマット（AMF）エンコーディングを使用してJavaオブジェクトのメソッドにアクセスできます。

HTTPサービスについて詳しく説明します。サーバーに配置されたXMLソースファイルを使用し、HTTPサービスを介してクライアント側でアクセスします。

Items.xml

<items>
   <item name = "Book" description = "History of France"></item>
   <item name = "Pen" description = "Parker Pen"></item>
   <item name = "Pencil" description = "Stationary"></item>
<items>

HTTPService宣言

次に、HTTPServiceを宣言し、上記のファイルのURLを渡します。

<fx:Declarations>
   <mx:HTTPService id = "itemRequest" 
   url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>

RPCコール

itemRequest.send（）メソッドを呼び出し、itemRequestWebサービスのlastResultオブジェクトからFlexUIコンポーネントに値をバインドします。

...
itemRequest.send();
...
<mx:DataGrid id = "dgItems" height = "80%" width = "75%" 
   dataProvider = "{itemRequest.lastResult.items.item}">
   <mx:columns>
      <mx:DataGridColumn headerText = "Name" dataField = "name" />
      <mx:DataGridColumn headerText = "Description" dataField = "description" />
   </mx:columns>
</mx:DataGrid>

RPCサービスコールの例

それでは、FlexアプリケーションでRPCサービスをテストする手順に従ってみましょう-

ステップ	説明
1	Flex-アプリケーションの作成の章で説明されているように、パッケージcom.tutorialspoint.clientの下にHelloWorldという名前のプロジェクトを作成します。
2	以下で説明するように、HelloWorld.mxmlを変更します。残りのファイルは変更しないでください。
3	アプリケーションをコンパイルして実行し、ビジネスロジックが要件に従って機能していることを確認します。

以下は、変更されたmxmlファイルの内容です。 src/com.tutorialspoint/HelloWorld.mxml。

<?xml version = "1.0" encoding = "utf-8"?>
<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" 
   minWidth = "500" minHeight = "500" creationComplete = "init(event)">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.events.FlexEvent;
         import mx.rpc.events.FaultEvent;
         import mx.rpc.events.ResultEvent;

         protected function init(event:FlexEvent):void {
            itemRequest.send();				
         }
      ]]>
   </fx:Script>
   
   <fx:Declarations>
      <mx:HTTPService id = "itemRequest" 
         url = "http://www.tutorialspoint.com/flex/Items.xml" />
   </fx:Declarations>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "10" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "RPC Service Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "parentPanel" title = "Using RPC Services"  
            width = "500" height = "200" >
            <s:layout>
               <s:VerticalLayout  gap = "10" 
                  verticalAlign = "middle" horizontalAlign = "center" />
            </s:layout>						
            
            <mx:DataGrid id = "dgItems" height = "80%" width = "75%" 
               dataProvider = "{itemRequest.lastResult.items.item}">
               
               <mx:columns>
                  <mx:DataGridColumn headerText = "Name" dataField = "name" />
                  <mx:DataGridColumn headerText = "Description" 
                     dataField = "description" />
               </mx:columns>
            </mx:DataGrid>
         </s:Panel>	
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Flash Builder 4には、Flex開発サイクルでのFlexUnit統合に対する優れた組み込みサポートがあります。

テストケースクラスを作成する

Flash Builderのテストクラスの作成ウィザードを使用して、テストケースクラスを作成できます。この記事で説明するように、FlashBuilderを使用するとテストケースを簡単に実行できます。

Flash Builderを使用してテストケースクラスを作成するには、をクリックします。 File > New > Test Case Class。以下のように詳細を入力します。

Flash Builderは、次のTestClass1。をファイルとして作成します。

package com.tutorialspoint.client {
   public class TestClass1 {		
      [Before]
      public function setUp():void {}

      [After]
      public function tearDown():void {}

      [BeforeClass]
      public static function setUpBeforeClass():void {}

      [AfterClass]
      public static function tearDownAfterClass():void {}	
   }
}

FlexUnit統合の例

それでは、FlexアプリケーションでFlexUnit統合をテストする手順に従ってみましょう-

ステップ	説明
1	Flex-アプリケーションの作成の章で説明されているように、パッケージcom.tutorialspoint.clientの下にHelloWorldという名前のプロジェクトを作成します。
2	以下で説明するように、HelloWorld.mxmlを変更します。残りのファイルは変更しないでください。
3	上記のようにTestClass1.asテストケースを作成し、以下の説明に従ってTestClass1.asを変更します。
4	アプリケーションをコンパイルして実行し、ビジネスロジックが要件に従って機能していることを確認します。

以下は、変更されたファイルの内容です src/com.tutorialspoint/client/TestClass1.as。

package com.tutorialspoint.client {
   import org.flexunit.asserts.assertEquals;

   public class TestClass1 {		
      private var counter: int = 1;

      [Before]
      public function setUp():void {
         //this code will run before every test case execution
      }

      [After]
      public function tearDown():void {
         //this code will run after every test case execution
      }

      [BeforeClass]
      public static function setUpBeforeClass():void {
         //this code will run once when test cases start execution
      }

      [AfterClass]
      public static function tearDownAfterClass():void {
         //this code will run once when test cases ends execution
      }      

      [Test]  
      public function testCounter():void { 
         assertEquals(counter, 1);
      }
   }
}

以下は、変更されたmxmlファイルの内容です。 src/com.tutorialspoint/HelloWorld.mxml。

<?xml version = "1.0" encoding = "utf-8"?>
<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" 
   minWidth = "500" minHeight = "500">
</s:Application>

すべての変更を行う準備ができたら、Flex-アプリケーションの作成の章で行ったように通常モードでコンパイルします。

テストケースの実行

パッケージエクスプローラーでTestClass1を右クリックし、[ Run As > FlexUnit Tests。FlashBuilderのテストウィンドウに次の出力が表示されます。

Flash Builderは、ブラウザーにテスト結果も表示します。

Flexは、Flexコードをデバッグする優れた機能を提供し、Flash Builder 4には、優れたデバッガーとデバッグパースペクティブのサポートが組み込まれています。

デバッグモード中、Flex Applicationは、デバッグ機能をサポートするFlash Builder4に組み込まれているFlashPlayerDebuggerバージョンで実行されます。
そのため、開発者はFlashBuilderで簡単で組み込みのデバッグ構成を取得できます

この記事では、FlashBuilderを使用してFlexClientコードをデバッグする方法を示します。次のタスクを実行します

コードでブレークポイントを設定し、ブレークポイントエクスプローラーで確認します。
デバッグ中にコードを1行ずつステップスルーします。
変数の値を表示します。
すべての変数の値を調べます。
式の値を調べます。
中断されたスレッドのスタックフレームを表示します。

デバッグ例

ステップ	説明
1	Flex-アプリケーションの作成の章で説明されているように、パッケージcom.tutorialspoint.clientの下にHelloWorldという名前のプロジェクトを作成します。
2	以下で説明するように、HelloWorld.mxmlを変更します。残りのファイルは変更しないでください。
3	アプリケーションをコンパイルして実行し、ビジネスロジックが要件に従って機能していることを確認します。

以下は、変更されたmxmlファイルの内容です。 src/com.tutorialspoint/HelloWorld.mxml。

<?xml version = "1.0" encoding = "utf-8"?>
<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"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";
         }
      ]]>
   </fx:Script>

   <s:BorderContainer width = "500" height = "500" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
            styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe"
            click = "btnClickMe_clickHandler(event)" styleName = "button" />
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

すべての変更を行う準備ができたら、Flex-アプリケーションの作成の章で行ったように通常モードでコンパイルします。

ステップ1-ブレークポイントを配置する

アプリケーションの最初の行にブレークポイントを配置し、HelloWorld.mxmlのハンドラーを初期化します。

ステップ2-アプリケーションをデバッグする

次に、[

アプリケーションのデバッグ]メニューをクリックして、[HelloWorld アプリケーションをデバッグするためのアプリケーション。

すべてが正常であれば、アプリケーションがブラウザで起動し、FlashBuilderコンソールに次のデバッグログが表示されます。

[SWF] \HelloWorld\bin-debug\HelloWorld.swf 
- 181,509 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\1 
- 763,122 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\2 
- 1,221,837 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\3 
- 1,136,788 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\4 
- 2,019,570 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\5 
- 318,334 bytes after decompression

アプリケーションが起動するとすぐに、application_initialize Handlerメソッドの最初の行にブレークポイントを配置したため、FlashBuilderブレークポイントにフォーカスが表示されます。

中断されたスレッドのスタックトレースを確認できます。

式の値を確認できます。

配置されたブレークポイントのリストを確認できます。

ここで、application_initializeHandler（）メソッドの最後の行に到達するまでF6を押し続けます。ファンクションキーのリファレンスとして、F6はコードを1行ずつ検査し、F5はさらに内側に進み、F8はアプリケーションを再開します。これで、application_initializeHandler（）メソッドのすべての変数の値のリストが表示されます。

これで、Javaアプリケーションをデバッグするのと同じ方法でフレックスコードをデバッグできることがわかります。任意の行にブレークポイントを配置し、flexのデバッグ機能を試してみてください。

Flexは、Flexアプリケーションを国際化する2つの方法を提供します。プロジェクト間で最も一般的に使用されているコンパイル時の国際化の使用法を示します。

シニア番号	テクニックと説明
1	Compile Time Internationalization この手法は最も普及しており、実行時に必要なオーバーヘッドはごくわずかです。定数文字列とパラメータ化された文字列の両方を変換するための非常に効率的な手法であり、実装が最も簡単です。コンパイル時の国際化では、標準のプロパティファイルを使用して、翻訳された文字列とパラメータ化されたメッセージを格納します。これらのプロパティファイルは、アプリケーションで直接コンパイルされます。
2	Run Time Internationalization この手法は非常に柔軟性がありますが、静的な文字列の国際化よりも低速です。ローカリゼーションプロパティファイルを個別にコンパイルし、アプリケーションの外部に残して、実行時にロードする必要があります。

Flexアプリケーションを国際化するワークフロー

ステップ1-フォルダ構造を作成する

Flexプロジェクトのsrcフォルダーの下にロケールフォルダーを作成します。これは、アプリケーションがサポートするロケールのすべてのプロパティファイルの親ディレクトリになります。ロケールフォルダー内に、サポートするアプリケーションのロケールごとに1つずつサブフォルダーを作成します。ロケールの命名規則は次のとおりです。

{language}_{country code}

たとえば、en_USは米国の英語を表します。ロケールde_DEはドイツ語を表します。サンプルアプリケーションは、英語とドイツ語の2つの一般的な言語をサポートします。

ステップ2–プロパティファイルを作成する

アプリケーションで使用するメッセージを含むプロパティファイルを作成します。作成しましたHelloWorldMessages.properties 下のファイル src > locale > en_US この例のフォルダ。

enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}

ロケールに固有の変換された値を含むプロパティファイルを作成します。作成しましたHelloWorldMessages.properties 下のファイル src > locale > de_DEこの例のフォルダ。このファイルには、ドイツ語の翻訳が含まれています。_deはドイツ語のロケールを指定し、アプリケーションでドイツ語をサポートします。

Flash Builderを使用してプロパティファイルを作成している場合は、ファイルのエンコーディングをUTF-8に変更します。ファイルを選択し、右クリックしてプロパティウィンドウを開きます。テキストファイルのエンコーディングを次のように選択します。 Other UTF-8。変更を適用して保存します。

enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}

ステップ3–コンパイラオプションを指定する

プロジェクトを右クリックして、[プロパティ]を選択します。
Flexコンパイラを選択し、追加のコンパイラ引数設定に以下を追加します-

-locale en_US de_DE

プロジェクトを右クリックして、[プロパティ]を選択します。
Flex Build Pathを選択し、ソースパス設定に以下を追加します-

src\locale\{locale}

内部化の例

次に、次の手順に従って、Flexアプリケーションの内部化手法をテストします。

ステップ	説明
1	Flex-アプリケーションの作成の章で説明されているように、パッケージcom.tutorialspoint.clientの下にHelloWorldという名前のプロジェクトを作成します。
2	以下で説明するように、HelloWorld.mxmlを変更します。残りのファイルは変更しないでください。
3	アプリケーションをコンパイルして実行し、ビジネスロジックが要件に従って機能していることを確認します。

以下は、変更されたmxmlファイルの内容です。 src/com.tutorialspoint/HelloWorld.mxml。

<?xml version = "1.0" encoding = "utf-8"?>
   <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" 
   minWidth = "500" minHeight = "500">
   
   <fx:Metadata>
      [ResourceBundle("HelloWorldMessages")]
   </fx:Metadata> 
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         [Bindable]
         private var locales:Array =  [{label:"English", locale:"en_US"},
            {label:"German", locale:"de_DE"}];

         private function comboChangeHandler():void {
           resourceManager.localeChain = [localeComboBox.selectedItem.locale];
         }

         protected function clickMe_clickHandler(event:MouseEvent):void {
            var name:String = txtName.text;
            var inputArray:Array = new Array();
            inputArray.push(name);
            Alert.show(resourceManager.getString('HelloWorldMessages'
               ,'greeting',inputArray));
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
	  horizontalAlign = "center" verticalAlign = "middle">
         
         <s:Label id = "lblHeader" fontSize = "40" 
            color = "0x777777" 
            text  = "{resourceManager.getString('HelloWorldMessages','applicationTitle')}"
            styleName = "heading" width = "90%" height = "150" />
         
         <s:Panel width = "300" height = "150">
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "{resourceManager.getString('HelloWorldMessages','enterName')}"
                  paddingTop = "2" />			
               <s:TextInput id = "txtName" />
            </s:HGroup>
            
            <s:Button 
               label = "{resourceManager.getString('HelloWorldMessages','clickMe')}" 
               click = "clickMe_clickHandler(event)" right = "10" />	
         </s:Panel>
         
         <mx:ComboBox id = "localeComboBox" dataProvider = "{locales}"
            change = "comboChangeHandler()" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

言語ドロップダウンを使用して言語を変更し、結果を確認します。

Flexは特別なクラスを提供します FlexPrintJob フレックスオブジェクトを印刷します。

FlexPrintJobを使用して、FormやVBoxコンテナなどの1つ以上のFlexオブジェクトを印刷できます。
FlexPrintJobは、オブジェクトとそれに含まれるすべてのオブジェクトを印刷します。
オブジェクトは、表示されたインターフェースの全部または一部にすることができます。
オブジェクトは、特に印刷用にデータをフォーマットするコンポーネントにすることができます。
FlexPrintJobクラスを使用すると、ページに合わせて出力をスケーリングできます。
FlexPrintJobクラスは、複数のページを自動的に使用して、単一のページに収まらないオブジェクトを印刷します。
FlexPrintJobクラスにより、オペレーティングシステムは[印刷]ダイアログボックスを表示します。ユーザーの操作なしでは印刷できません。

印刷ジョブを準備して送信する

印刷ジョブを準備して送信することにより、出力を印刷します。FlexPrintJobクラスのインスタンスを作成しましょう

var printJob:FlexPrintJob = new FlexPrintJob();

印刷ジョブを開始します

printJob.start();

Flexを使用すると、オペレーティングシステムに[印刷]ダイアログボックスが表示されます。印刷ジョブに1つ以上のオブジェクトを追加し、それらをスケーリングする方法を指定します

printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH);

各オブジェクトは新しいページから始まります。印刷ジョブをプリンターに送信します

printJob.send();

印刷例

ステップ	説明
1	Flex-アプリケーションの作成の章で説明されているように、パッケージcom.tutorialspoint.clientの下にHelloWorldという名前のプロジェクトを作成します。
2	以下で説明するように、HelloWorld.mxmlを変更します。残りのファイルは変更しないでください。
3	アプリケーションをコンパイルして実行し、ビジネスロジックが要件に従って機能していることを確認します。

以下は、変更されたmxmlファイルの内容です。 src/com.tutorialspoint/HelloWorld.mxml。

<?xml version = "1.0" encoding = "utf-8"?>
<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"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
     <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         import mx.printing.FlexPrintJob;
         import mx.printing.FlexPrintJobScaleType;
         
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            
            // Create an instance of the FlexPrintJob class.
            var printJob:FlexPrintJob = new FlexPrintJob();
         
            // Start the print job.
            if (printJob.start() != true) return;

            // Add the object to print. Do not scale it.
            printJob.addObject(myDataGrid, FlexPrintJobScaleType.NONE);

            // Send the job to the printer.
            printJob.send();
        }

        protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
        }
     ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50"
         horizontalAlign = "center" 
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" 
            styleName = "heading" />
         
         <mx:DataGrid id = "myDataGrid" width = "300">
            <mx:dataProvider>
               <fx:Object Product = "Flex" Code = "1000" />
               <fx:Object Product = "GWT" Code = "2000" />
               <fx:Object Product = "JAVA" Code = "3000" />
               <fx:Object Product = "JUnit" Code = "4000" />
            </mx:dataProvider>
         </mx:DataGrid>
         
         <s:Button label = "Print Me!" id = "btnClickMe" 
            click = "btnClickMe_clickHandler(event)" 
            styleName = "button" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

[印刷する]ボタンをクリックすると、以下に示すデータグリッドの印刷が表示されます。