Flex-quick-guide
フレックス-概要
フレックスとは？
Flexは、同じプログラミングモデル、ツール、およびコードベースを使用して、ブラウザー、モバイル、デスクトップ用の従来のアプリケーションを構築できる、強力なオープンソースアプリケーションフレームワークです。
Flexは、Flexクラスライブラリ（ActionScriptクラス）、Flexコンパイラ、デバッガ、MXMLおよびActionScriptプログラミング言語、および表現力豊かでインタラクティブなリッチインターネットアプリケーション（RIA）を構築するためのその他のユーティリティで構成されるFLEX SDKを提供します
Flexは、ユーザーインターフェイス（UI）またはWebアプリケーションのクライアント側の機能を処理します。 サーバー側の機能は、従来のスクリプト言語（Java/PHPなど）で記述されたサーバー側のコンポーネントに依存しています
Flexベースのアプリケーションは、実際にはSWFファイルとして配信され、従来のWebアプリケーションのHTML/JavaScript部分に非常に似ています。
Flexアプリケーションは、SWFファイルに加えて、HTMLラッパー、CSSファイル、およびサーバー側のスクリプトファイル（つまり、 Java、.CFM、.PHPなど）からサーバーへ。 従来のWebアプリケーションと同様。
これらのリソースは、通常のHTTPリクエスト/レスポンス形式とブラウザーでアプリケーションを実行するFlash Playerを使用して、サーバーからクライアントのブラウザーに配信されます。
フレックスの利点
- 通常、FlexアプリケーションはFlash Playerベースであり、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はActionScriptおよびXMLベースです。 これら2つを学ぶことは、Flexで作業するために不可欠です。
フレックス-環境設定
このチュートリアルでは、Adobe Flex Frameworkで作業を開始するための開発環境を準備する方法について説明します。 このチュートリアルでは、Flex Frameworkをセットアップする前に、マシンでJDKとAdobe Flash Builderをセットアップする方法も説明します。
システム要件
FLEXにはJDK 1.4以上が必要であるため、最初の要件はJDKをマシンにインストールすることです。
| JDK | 1.4 Or above. |
| Memory | No minimum requirement. |
| Disk Space | No minimum requirement. |
| Operating System | No minimum requirement. |
指定された手順に従って環境をセットアップし、Flexアプリケーション開発を開始します。
ステップ1-マシンでのJavaインストールの検証
コンソールを開き、次の java コマンドを実行します。
| OS | Task | Command |
|---|---|---|
| Windows | Open Command Console | c:\> java -version |
| Linux | Open Command Terminal | $ java -version |
| Mac | Open Terminal | machine:~ joseph$ java -version |
すべてのオペレーティングシステムの出力を確認しましょう-
| OS | Generated Output |
|---|---|
| Windows |
java version "1.6.0_21" Java（TM）SEランタイム環境（ビルド1.6.0_21-b07） Java HotSpot（TM）Client VM（ビルド17.0-b17、混合モード、共有） |
| Linux |
java version "1.6.0_21" Java（TM）SEランタイム環境（ビルド1.6.0_21-b07） Java HotSpot（TM）Client VM（ビルド17.0-b17、混合モード、共有） |
| Mac |
java version "1.6.0_21" Java（TM）SEランタイム環境（ビルド1.6.0_21-b07） Java HotSpot（TM）64ビットサーバーVM（ビルド17.0-b17、混合モード、共有） |
ステップ2-Java Development Kit（JDK）のセットアップ
Javaがインストールされていない場合は、OracleのJavaサイトhttps://www.oracle.com/technetwork/java/javase/downloads/indexl[Java SE Downloads]からJava Software Development Kit（SDK）をインストールできます。 ダウンロードしたファイルにJDKをインストールするための指示があります。指定された指示に従ってセットアップをインストールおよび構成します。 最後に、PATHおよびJAVA_HOME環境変数を設定して、javaおよびjavacを含むディレクトリ（通常はそれぞれjava_install_dir/binおよびjava_install_dir）を参照します。
*JAVA_HOME* 環境変数を設定して、Javaがマシンにインストールされているベースディレクトリの場所を指すようにします。 たとえば-| OS | Output |
|---|---|
| Windows | Set the environment variable JAVA_HOME to C:\Program Files\Java\jdk1.6.0_21 |
| Linux | export JAVA_HOME=/usr/local/java-current |
| Mac | export JAVA_HOME=/Library/Java/Home |
Javaコンパイラの場所をシステムパスに追加します。
| OS | Output |
|---|---|
| Windows | Append the string ;%JAVA_HOME%\bin to the end of the system variable, Path. |
| Linux | export PATH=$PATH:$JAVA_HOME/bin/ |
| Mac | not required |
ステップ3-Adobe Flash Builder 4.5のセットアップ
このチュートリアルのすべての例は、Adobe Flash Builder 4.5 Profession IDE試用版を使用して作成されています。 したがって、最新バージョンのAdobe Flash Builderをマシンにインストールすることをお勧めします。 また、オペレーティングシステムの互換性を確認します。
Adobe Flash Builder IDEをインストールするには、https://www.adobe.com/in/products/flash-builderlから最新のAdobe Flash Builderバイナリをダウンロードします。 インストールをダウンロードしたら、バイナリ配布物を便利な場所に解凍します。 たとえば、WindowsのC：\ flash-builder、またはLinux/Unixの/usr/local/flash-builderで、最後にPATH変数を適切に設定します。
Windowsマシンで次のコマンドを実行するか、単にFlashBuilder.exeをダブルクリックすると、Flash Builderが起動します
%C:\flash-builder\FlashBuilder.exeFlash Builderは、Unix（Solaris、Linuxなど）マシンで次のコマンドを実行することで起動できます-
$/usr/local/flash-builder/FlashBuilderAdobe Flash Builder試用版は60日間使用できます。 契約条件に同意し、最初の登録手順をスキップしてIDEを続行します。 理解のために、教育目的で試用版を使用しています。
正常に起動した後、すべてが正常であれば、次の結果が表示されます-
Adobe Flash Builderには、FLEX SDKが事前に構成されています。 Adobe Flash Builder 4.5にバンドルされている例では、FLEX SDK 4.5を使用しています。
ステップ4 – Apache Tomcatのセットアップ
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.batTomcatは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だけでなく、ここに含まれているドキュメントにも記載されています。
Tomcatは、Windowsマシンで次のコマンドを実行することで停止できます-
%CATALINA_HOME%\bin\shutdown
Or
C:\apache-tomcat-5.5.29\bin\shutdownTomcatは、UNIX（Solaris、Linuxなど）マシンで次のコマンドを実行することで停止できます-
$CATALINA_HOME/bin/shutdown.sh
Or
/usr/local/apache-tomcat-5.5.29/bin/shutdown.shフレックス-アプリケーション
Flash Builderを使用して実際の_“ HelloWorld” _アプリケーションの作成を開始する前に、Flexアプリケーションの実際の部分が何であるかを見てみましょう。
Flexアプリケーションは次の4つの重要な部分で構成され、そのうち最後の部分はオプションですが、最初の3つの部分は必須です。
- Flexフレームワークライブラリ
- クライアント側のコード
- パブリックリソース（HTML/JS/CSS）
- サーバーサイドコード
HelloWordのような典型的なFlexアプリケーションのさまざまな部分のサンプルの場所は以下のようになります-
| Name | Location |
|---|---|
| Project root | HelloWorld/ |
| Flex Framework Libraries | Build Path |
| Public resources | html-template |
| Client-side code | table table-bordered/com/finddevguides/client |
| Server-side code | table table-bordered/com/finddevguides/server |
アプリケーション構築プロセス
まず、FlexアプリケーションにはFlexフレームワークライブラリが必要です。 後で、Flash Builderは自動的にライブラリをビルドパスに追加します。
Flash Builderを使用してコードをビルドすると、Flash Builderは次のタスクを実行します-
- ソースコードをHelloWorld.swfファイルにコンパイルします。
- html-templateフォルダーに格納されているファイルindex.templatelからHelloWorldl（swfファイルのラッパーファイル）をコンパイルします。
- HelloWorld.swfファイルとHelloWorldlファイルをターゲットフォルダーbin-debugにコピーします。
- ターゲットフォルダーbin-debugのHelloWorldlにswfファイルを動的にロードするJavaScriptコードswfobject.jsをコピーします
- ターゲットフォルダーbin-debugにframeworks_xxx.swfという名前のswfファイルの形式でフレームワークライブラリをコピーします。
- ターゲットフォルダーに他のflexモジュール（sparkskins_xxx.swf、textLayout_xxx.swfなどの.swfファイル）をコピーします。
アプリケーション起動プロセス
- 任意のWebブラウザーの\ HelloWorld \ bin-debugフォルダーにあるHelloWorldlファイルを開きます。 *HelloWorld.swfが自動的に読み込まれ、アプリケーションの実行が開始されます。
Flexフレームワークライブラリ
以下は、いくつかの重要なフレームワークライブラリに関する簡単な詳細です。 Flexライブラリは.swc表記を使用して示されることに注意してください
| Sr.No | Nodes & Description |
|---|---|
| 1 |
このライブラリは、マシンにインストールされているFlashPlayerに固有のものであり、Flash Playerでサポートされているネイティブメソッドが含まれています。 |
| 2 |
textlayout.swc このライブラリは、テキストレイアウト関連の機能をサポートしています。 |
| 3 |
framework.swc これは、Flexのコア機能を含むフレックスフレームワークライブラリです。 |
| 4 |
mx.swc このライブラリには、mx UIコントロールの定義が保存されます。 |
| 5 |
charts.swc このライブラリは、チャートコントロールをサポートしています。 |
| 6 |
spark.swc このライブラリには、spark UIコントロールの定義が保存されています。 |
| 7 |
sparkskins.swc このライブラリは、spark UIコントロールのスキニングをサポートしています。 |
クライアント側コード
Flexアプリケーションコードは、 MXML および ActionScript で記述できます。
| Sr.No | Type & Description |
|---|---|
| 1 |
MXML MXMLは、ユーザーインターフェイスコンポーネントのレイアウトに使用するXMLマークアップ言語です。 MXMLは、ビルドプロセス中にActionScriptにコンパイルされます。 |
| 2 |
ActionScript ActionScriptは、オブジェクト指向の手続き型プログラミング言語であり、ECMAScript（ECMA-262）エディション4ドラフト言語仕様に基づいています。 |
Flexでは、ActionScriptとMXMLを組み合わせて、次のことができます-
- MXMLタグを使用したユーザーインターフェイスコンポーネントのレイアウト
- MXMLを使用して、サーバー上のデータソースへのアクセスなど、アプリケーションの非視覚的な側面を宣言的に定義します
- MXMLを使用して、サーバー上のユーザーインターフェイスコンポーネントとデータソース間のデータバインディングを作成します。
- ActionScriptを使用して、MXMLイベント属性内のイベントリスナーを定義します。
- を使用してスクリプトブロックを追加する
- 外部ActionScriptファイルを含めます。
- ActionScriptクラスをインポートします。 *ActionScriptコンポーネントを作成します。
公共リソース
これらは、ホストHTMLページ、CSS、またはhtml-templateフォルダーの下にある画像など、Flexアプリケーションによって参照されるヘルプファイルです。 次のファイルが含まれています-
| Sr.No | File Name & Description |
|---|---|
| 1 |
プレースホルダー付きのホストHTMLページ。 Flash Builderはこのテンプレートを使用して、HelloWorld.swfファイルで実際のページHelloWorldlを構築します。 |
| 2 |
playerProductInstall.swf これは、Flash Playerを高速モードでインストールするためのフラッシュユーティリティです。 |
| 3 |
swfobject.js これは、インストールされているFlash Playerのバージョンをチェックし、HelloWorldlページにHelloWorld.swfをロードするJavaScriptです。 |
| 4 |
html-template/history このフォルダーには、アプリケーションの履歴管理用のリソースが含まれています。 |
HelloWorld.mxml
これは、アプリケーションのビジネスロジックを実装するために記述された実際のMXML/AS（ActionScript）コードであり、FlexコンパイラがブラウザのFlash Playerによって実行されるSWFファイルに変換します。
サンプルHelloWorld Entryクラスは次のようになります-
<?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>次の表に、上記のコードスクリプトで使用されるすべてのタグの説明を示します。
| Sr.No | Node & Description |
|---|---|
| 1 |
Application 常にFlexアプリケーションのルートタグであるApplicationコンテナを定義します。 |
| 2 |
Script ActionScript言語のビジネスロジックが含まれています。 |
| 3 |
VGroup Flex UIコントロールを垂直方向に含めることができる垂直グループ化コンテナを定義します。 |
| 4 |
Label テキストを表示する非常にシンプルなユーザーインターフェイスコンポーネントであるLabelコントロールを表します。 |
| 5 |
Button クリックしてアクションを実行できるButtonコントロールを表します。 |
サーバーサイドコード
これはアプリケーションのサーバー側の部分であり、非常にオプションです。 アプリケーション内でバックエンド処理を行わない場合、この部分は必要ありませんが、バックエンドで何らかの処理が必要であり、クライアント側アプリケーションがサーバーと対話する場合、これらのコンポーネントを開発する必要があります。
次の章では、上記のすべての概念を使用して、Flash Builderを使用して HelloWorld アプリケーションを作成します。
フレックス-アプリケーションの作成
Flash Builder 4.5を使用してFlexアプリケーションを作成します。 簡単な HelloWorld アプリケーションから始めましょう。
ステップ1-プロジェクトを作成する
最初のステップは、Flash Builder IDEを使用して簡単なFlexプロジェクトを作成することです。 オプション File> New> Flex Project を使用してプロジェクトウィザードを起動します。 次のようにウィザードウィンドウを使用して、プロジェクトに_HelloWorld_という名前を付けます-
アプリケーションの種類* Web（Adobe Flash Playerで実行）*を選択します。 ただし、これが選択されていない場合は、他のデフォルト値をそのままにして[完了]ボタンをクリックします。 プロジェクトが正常に作成されると、プロジェクトエクスプローラーに次のコンテンツが表示されます-
ここにすべての重要なフォルダの簡単な説明があります-
| Folder | Location |
|---|---|
| table table-bordered |
Source code (mxml/as classes) files. クライアントUIの表示を担当するクライアント側の特定のJavaクラスを含むcom/finddevguides/clientフォルダー構造を作成しました。 |
| bin-debug |
This is the output part, it represents the actual deployable web application. 履歴フォルダーには、Flexアプリケーションの履歴管理用のサポートファイルが含まれています。 framework_xxx.swf、フレックスフレームワークファイルはフレックスアプリケーションで使用する必要があります。 HelloWorldl、フレックスアプリケーションのラッパー/ホストHTMLファイル。 HelloWorld.swf、フレックスベースのアプリケーション。 playerProductInstall.swf、フラッシュプレーヤーエクスプレスインストーラー。 spark_xxx.swf、sparkコンポーネントをサポートするためのライブラリ。 swfobject.js、HelloWorldlでHelloWorld.swfをロードするJavaScript。 Flash Playerのバージョンを確認し、初期化パラメーターをHelloWorld.swfファイルに渡します。 textLayout_xxx.swf、テキストコンポーネントサポート用のライブラリ。 |
| html-template |
This represents the configurable web application. Flash Builder compiles files from html-template to bin-debug folder. 履歴フォルダーには、Flexアプリケーションの履歴管理用のサポートファイルが含まれています。 index.templatel、wrapper/host HTMLファイル。FlashBuilder固有の構成用のプレースホルダーを持つflexアプリケーション用。 ビルド中にbin-debugフォルダー内のHelloWorldlにコンパイルされます。 playerProductInstall.swf、フラッシュプレーヤーエクスプレスインストーラーは、ビルド中にbin-debugフォルダーにコピーされます。 swfobject.js、HelloWorldlでHelloWorld.swfをロードするJavaScript。 Flash Playerのバージョンをチェックし、初期化パラメーターをHelloWorld.swfに渡します。ファイルはビルド中にbindebugフォルダーにコピーされます。 |
ステップ2 –外部CSSファイルを作成する
*html-template* フォルダーにWrapper HTMLページの *styles.css* CSSファイルを作成します。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ページテンプレートを変更する
*htmltemplate* フォルダーのWrapper HTMLページテンプレート *index.templatel* を変更します。 Flash Builderは、デフォルトのWrapper HTMLページテンプレート_html-template/index.templatel_を作成します。これは、HelloWorldlにコンパイルされます。このファイルには、コンパイルプロセス中にFlash Builderによって置き換えられるプレースホルダーが含まれています。 たとえば、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ファイルを作成する
*table tablebordered/com/finddevguides* フォルダーに *HelloWorld.mxml* のCSSファイル *Style.css* を作成します。 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ファイル_table tablebordered/com.finddevguides/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/finddevguides/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 –アプリケーションをビルドする
Flash Builderには、デフォルトで*自動的にビルド*がチェックされています。 エラーがある場合は、[問題]ビューを確認してください。 変更が完了したら、エラーは表示されません。
ステップ7-アプリケーションの実行
次に、アプリケーションの実行アプリケーションメニューをクリックし、 HelloWorld アプリケーションを選択してアプリケーションを実行します。
すべてが正常であれば、ブラウザがポップアップし、アプリケーションが起動し、実行されていることを確認する必要があります。 アプリケーションに問題がなければ、次の結果が得られます。[link：/flex/samples/CreateApplicationl [オンラインで試す]]
Flash Playerでアプリケーションを実行しているため、ブラウザにFlash Playerプラグインをインストールする必要があります。 画面上の指示に従ってプラグインをインストールするだけです。 ブラウザに既にFlash Playerプラグインが設定されている場合は、次の出力が表示されるはずです-
おめでとうございます。 Flex を使用して最初のアプリケーションを実装しました。
Flex-アプリケーションのデプロイ
このチュートリアルでは、アプリケーションの war ファイルを作成する方法と、それをApache Tomcat Webサーバーのルートにデプロイする方法を説明します。
この簡単な例を理解していれば、同じ手順に従って複雑なFlexアプリケーションをデプロイすることもできます。
私たちは次の手順に従ってFlexアプリケーションを作成しましょう-
| Step | Description |
|---|---|
| 1 | Create a project with a name HelloWorld under a packagecom.finddevguides.client as explained in the Flex - Create Application chapter. |
| 2 | Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged. |
| 3 | Compile and run the application to make sure business logic is working as per the requirements. |
以下の手順に従って、Flexアプリケーションのリリースビルドを作成し、それをTomcatサーバーにデプロイします-
最初のステップは、Flash Builder IDEを使用してリリースビルドを作成することです。 オプション File> Export> Flash Builder> Release Build を使用してリリースビルドウィザードを起動します。
次のウィザードウィンドウを使用して、_HelloWorld_としてプロジェクトを選択します。
他のデフォルト値はそのままにして、[完了]ボタンをクリックします。 これで、Flash Builderはプロジェクトのリリースビルドを含むbin-releaseフォルダーを作成します。
これでリリースビルドの準備ができました。次の手順に従ってFlexアプリケーションをデプロイしましょう-
| Step | Description |
|---|---|
| 1 | Zip the content of the bin-release folder of the application in the form of HelloWorld.war file and deploy it in Apache Tomcat Webserver. |
| 2 | Launch your web application using appropriate URL as explained below in the last step. |
以下は、変更されたmxmlファイルの内容です table table-bordered/com.finddevguides/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/finddevguides/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>すべての変更が完了したら、link：/flex/flex_create_application [Flex-アプリケーションの作成]の章で行ったように、アプリケーションを通常モードでコンパイルして実行します。 アプリケーションに問題がなければ、次の結果が生成されます。[link：/flex/samples/CreateApplicationl [オンラインで試す]]
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がTomcat Webサーバールートに正常にデプロイされました。
アプリケーションを実行
WebブラウザーでURLを入力します-**
http：//localhost：8080/HelloWorld/HelloWorldlでアプリケーションを起動します。
サーバー名（localhost）とポート（8080）は、Tomcatの構成によって異なる場合があります。
フレックス-ライフサイクルフェーズ
Flexアプリケーションのライフサイクル
アプリケーションのライフサイクルフェーズを理解しなくてもFlexアプリケーションを構築できますが、基本的なメカニズムを知っておくと便利です。物事が発生する順序。 実行時に他のFlexアプリケーションをロードするなどの機能を設定し、実行時にクラスライブラリとアセットをロードおよびアンロードするプロセスを管理するのに役立ちます。
Flexアプリケーションのライフサイクルを十分に理解すると、コードを最適に実行する場所がわかるため、より優れたアプリケーションを構築して最適化できます。 たとえば、プリローダー中にいくつかのコードを実行する必要がある場合、そのイベントのコードを配置する場所を知る必要があります。
ブラウザにflexアプリケーションをロードすると、flexアプリケーションのライフサイクル中に次のイベントが発生します。
以下は、さまざまなFlexライフサイクルイベントに関する簡単な詳細です。
| Sr.No | Event & Description |
|---|---|
| 1 |
preInitialize: mx.core.UIComponent.preinitialize イベントタイプ：mx.events.FlexEvent.PREINITIALIZE このイベントは、コンポーネントの初期化シーケンスの開始時に送出されます。 このイベントが送出されると、コンポーネントは非常に未加工の状態になります。 Buttonコントロールなどの多くのコンポーネントは、機能を実装するための内部子コンポーネントを作成します。 たとえば、Buttonコントロールは、ラベルテキストを表す内部UI TextFieldコンポーネントを作成します。 Flexが事前初期化イベントを送出するとき、コンポーネントのすべての内部子を含む子はまだ作成されていません。 |
| 2 |
initialize: mx.core.UIComponent.initialize イベントタイプ：mx.events.FlexEvent.INITIALIZE このイベントは、事前初期化フェーズの後に送出されます。 Flexフレームワークは、このフェーズでこのコンポーネントの内部構造を初期化します。 このイベントは、コンポーネントが親に追加されると自動的に発生します。 通常、initialize（）を呼び出す必要はありません。 |
| 3 |
creationComplete: mx.core.UIComponent.creationComplete イベントタイプ：mx.events.FlexEvent.CREATION_COMPLETE このイベントは、コンポーネントの構築、プロパティ処理、測定、レイアウト、描画が完了すると送出されます。 この時点で、コンポーネントのvisibleプロパティに応じて、コンポーネントは描画されていても表示されません。 |
| 4 |
applicationComplete: spark.components.Application.applicationComplete イベントタイプ：mx.events.FlexEvent.APPLICATION_COMPLETE アプリケーションが初期化され、LayoutManagerによって処理され、表示リストに添付された後に送出されます。 これは、アプリケーション作成ライフサイクルの最後のイベントであり、アプリケーションが完全にロードされたことを示します。 |
フレックスライフサイクルの例
テストアプリケーションを作成することにより、Flexアプリケーションのテストライフサイクルを理解するための手順に従ってみましょう-
| Step | Description |
|---|---|
| 1 | Create a project with a name HelloWorld under a packagecom.finddevguides.client as explained in the Flex - Create Application chapter. |
| 2 | Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged. |
| 3 | Compile and run the application to make sure business logic is working as per the requirements. |
以下は、変更されたmxmlファイル src/com.finddevguides/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/finddevguides/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>すべての変更が完了したら、link：/flex/flex_create_application [Flex-アプリケーションの作成]の章で行ったように、アプリケーションを通常モードでコンパイルして実行します。 アプリケーションに問題がなければ、次の結果が得られます。[link：/flex/samples/CreateApplicationl [オンラインで試す]]
フレックス-CSSを使用したスタイル
Flexは、CSS構文とスタイルの使用をサポートして、CSS to HTMLコンポーネントと同じ方法でUIコントロールに適用します。
方法＃1：外部スタイルシートファイルを使用する
アプリケーションのクラスパスで利用可能なスタイルシートを参照できます。 たとえば、HelloWorld.mxmlファイルもある com/finddevguides/client folder にあるStyle.cssファイルを考えます。
/*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/finddevguides/client/Style.css"/>styleNameプロパティを使用して、UIコンポーネントにスタイルを割り当てます
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
...
</s:BorderContainer>方法2：Ui Containerコンポーネント内でスタイルを使用する
<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スタイルの例
テストアプリケーションを作成して、FlexアプリケーションのCSSスタイリングを確認する手順に従います-
| Step | Description |
|---|---|
| 1 | Create a project with a name HelloWorld under a packagecom.finddevguides.client as explained in the Flex - Create Application chapter. |
| 2 | Modify Style.css, HelloWorld.mxml as explained below. Keep rest of the files unchanged. |
| 3 | Compile and run the application to make sure business logic is working as per the requirements. |
以下は、変更されたCSSファイル src/com.finddevguides/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.finddevguides/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/finddevguides/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>すべての変更が完了したら、link：/flex/flex_create_application [Flex-アプリケーションの作成]の章で行ったように、アプリケーションを通常モードでコンパイルして実行します。 アプリケーションに問題がなければ、次の結果が得られます。[link：/flex/samples/CSSApplicationl [オンラインで試す]]
フレックス-スキン付きスタイル
スキニングとは何ですか？
- Flexのスキニングは、UIコンポーネントのルックアンドフィールを完全にカスタマイズするプロセスです。
- スキンは、コンポーネントのテキスト、画像、フィルター、遷移、および状態を定義できます。
- スキンは、別個のmxmlまたはActionScriptコンポーネントとして作成できます。
- スキンを使用して、UIコンポーネントのすべての視覚的側面を制御できます。
- スキンを定義するプロセスは、すべてのUIコンポーネントで同じです。
ステップ1 –スキンを作成する
*File> New> MXML Skin* オプションを使用してCreate MXML Skinウィザードを起動します。Packageを com.finddevguides.skin 、名前を GradientBackgroundSkin と入力し、ホストコンポーネントを既存のflex BorderContainerコントロール* spark.component.BorderContainer *として選択します。
これで、BorderContainerのスキンが作成されました。 mxmlスキンファイル src/com.finddevguides/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スクリプトでのスキンの適用（静的）
*skinClass* 属性を使用して、ID *mainContainer* を持つBorderContainerに *GradientBackgroundSkin* を適用します。<s:BorderContainer width = "560" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle"
skinClass = "com.finddevguides.skin.GradientBackgroundSkin">ActionScriptでのスキンの適用（動的）
*skinClass* プロパティを使用して、ID *mainContainer* を持つBorderContainerに *GradientBackgroundSkin* を適用します。protected function gradientBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", GradientBackgroundSkin);
}スキン付きFlexスタイルの例
次の手順に従って、テストアプリケーションを作成して、Flexアプリケーションでのスキニングの動作を確認してください-
| Step | Description |
|---|---|
| 1 | Create a project with a name HelloWorld under a packagecom.finddevguides.client as explained in the Flex - Create Application chapter. |
| 2 | Create skin GradientBackgroundSkin.mxml under a packagecom.finddevguides.skin as explained above. Keep rest of the files unchanged. |
| 3 | Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged. |
| 4 | Compile and run the application to make sure business logic is working as per the requirements. |
以下は、GradientBackgroundSkin.mxmlファイル src/com/finddevguides/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/finddevguides/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/finddevguides/client/Style.css"/>
<fx:Script>
<![CDATA[
import com.finddevguides.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>すべての変更が完了したら、link：/flex/flex_create_application [Flex-アプリケーションの作成]の章で行ったように、アプリケーションを通常モードでコンパイルして実行します。 アプリケーションに問題がなければ、次の結果が生成されます。[link：/flex/samples/SkinApplicationl [オンラインで試す]]
フレックス-データバインディング
データバインディングとは
データバインディングは、あるオブジェクトのデータを別のオブジェクトに結び付けるプロセスです。 ソースプロパティ、宛先プロパティ、およびソースから宛先にデータをコピーするタイミングを示すトリガーイベントが必要です。
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アプリケーションでのスキニングの動作を確認するには、以下の手順に従います-
| Step | Description |
|---|---|
| 1 | Create a project with a name HelloWorld under a packagecom.finddevguides.client as explained in the Flex - Create Application chapter. |
| 2 | Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged. |
| 3 | Compile and run the application to make sure business logic is working as per the requirements. |
変更されたHelloWorld.mxmlファイルの内容は次のとおりです* src/com/finddevguides/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/finddevguides/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 <fx:Binding>)" 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>すべての変更が完了したら、link：/flex/flex_create_application [Flex-アプリケーションの作成]の章で行ったように、アプリケーションを通常モードでコンパイルして実行します。 アプリケーションに問題がなければ、次の結果が生成されます。[link：/flex/samples/DataBindingApplicationl [オンラインで試す]]
フレックス-基本コントロール
すべてのユーザーインターフェイスは、次の3つの主要な側面を考慮します-
- * UI要素*-これらは、ユーザーが最終的に表示および操作するコアの視覚要素です。 Flexは、このチュートリアルで扱う基本から複雑なものまでさまざまな、広く使用されている一般的な要素の膨大なリストを提供します。
- レイアウト-UI要素を画面上で整理する方法を定義し、GUI（グラフィカルユーザーインターフェイス）に最終的なルックアンドフィールを提供します。 この部分については、レイアウトの章で説明します。
- 動作-これらのイベントは、ユーザーがUI要素と対話するときに発生します。 この部分については、イベント処理の章で説明します。
Flex UI要素
Flex UIライブラリは、明確に定義されたクラス階層でクラスを提供し、複雑なWebベースのユーザーインターフェイスを作成します。 このコンポーネント階層のすべてのクラスは、以下に示すように EventDispatcher 基本クラスから派生しています-
すべての基本UIコントロールは、UI Componentクラスからプロパティを継承し、UI Componentクラスは、EventDispatcherおよび他のトップレベルクラスからプロパティを継承します。
| Sr.No | Control & Description |
|---|---|
| 1 |
EventDispatcherクラスは、イベントをディスパッチできるすべてのクラスの基本クラスです。 EventDispatcherクラスを使用すると、表示リスト上のすべてのオブジェクトをイベントターゲットにでき、IEventDispatcherインターフェイスのメソッドを使用できます。 |
| 2 |
UIComponentクラスは、インタラクティブおよび非インタラクティブの両方のすべての視覚コンポーネントの基本クラスです。 |
基本的なコントロール
以下は、いくつかの重要な_Basic Controls_です-
| Sr.No | Controls & Description |
|---|---|
| 1 |
ラベルは、1行以上の均一にフォーマットされたテキストをレンダリングできる低レベルのUIComponentです。 |
| 2 |
テキストコントロールを使用すると、アプリケーションでHTMLコンテンツと通常のテキストを表示できます。 |
| 3 |
Imageコントロールを使用すると、実行時にJPEG、PNG、GIF、およびSWFファイルをインポートできます。 |
| 4 |
LinkButtonコントロールは、ユーザーがマウスをその上に移動したときにそのコンテンツが強調表示される境界線のないButtonコントロールです。 |
フレックス-フォームコントロール
フォームコントロールを使用すると、ユーザーはデータを入力し、アプリケーションとの対話機能を提供できます。 すべてのフォームUIは、UIComponentクラスからプロパティを制御および継承します。UIComponentクラスは、EventDispatcherおよび他のトップレベルクラスからプロパティを継承します。
| Sr.No | Control & Description |
|---|---|
| 1 |
EventDispatcherクラスは、イベントをディスパッチできるすべてのクラスの基本クラスです。 EventDispatcherクラスを使用すると、表示リスト上のすべてのオブジェクトをイベントターゲットにでき、IEventDispatcherインターフェイスのメソッドを使用できます。 |
| 2 |
UIComponentクラスは、インタラクティブおよび非インタラクティブの両方のすべてのビジュアルコンポーネントの基本クラスです。 |
フォームコントロール
以下は、いくつかの重要なフォームコントロールです-
| Sr.No | Control & Description |
|---|---|
| 1 |
Buttonコンポーネントは、一般的に使用される長方形のボタンです。 |
| 2 |
ToggleButtonコンポーネントは、トグルボタンを定義します。 |
| 3 |
CheckBoxコンポーネントは、オプションのラベルと、チェックマークを含むかどうかを示す小さなボックスで構成されます。 |
| 4 |
ColorPickerコントロールは、ユーザーが色見本リストから色を選択する方法を提供します。 |
| 5 |
ComboBoxコントロールは、DropDownListBaseコントロールの子クラスです。 |
| 6 |
DateChooserコントロールは、月の名前、年、および曜日のグリッドと、曜日のラベルが付いた列を表示します。 |
| 7 |
RadioButtonコンポーネントを使用すると、ユーザーは相互に排他的な選択肢のセット内で単一の選択を行うことができます。 |
| 8 |
TextAreaは、ユーザーが複数行の書式付きテキストを入力および編集できるようにするテキスト入力コントロールです。 |
| 9 |
TextInputは、ユーザーが単一行の均一にフォーマットされたテキストを入力および編集できるようにするテキスト入力コントロールです。 |
| 10 |
DropDownListコントロールには、ユーザーが単一の値を選択できるドロップダウンリストが含まれています。 |
| 11 |
NumericStepperコントロールを使用すると、順序付けられたセットから番号を選択できます。 |
フレックス-複雑なコントロール
複雑なコントロールにより、ユーザーは大量のデータを簡単に処理できる高度な機能を提供し、アプリケーションとの対話機能を提供します。 すべてのComplex UIコントロールは、UIComponentクラスからプロパティを継承し、UIComponentクラスは、EventDispatcherおよび他のトップレベルクラスからプロパティを継承します。
| Sr.No | Control & Description |
|---|---|
| 1 |
EventDispatcherクラスは、イベントをディスパッチできるすべてのクラスの基本クラスです。 EventDispatcherクラスを使用すると、表示リスト上のすべてのオブジェクトをイベントターゲットにでき、IEventDispatcherインターフェイスのメソッドを使用できます。 |
| 2 |
UIComponentクラスは、インタラクティブおよび非インタラクティブの両方のすべてのビジュアルコンポーネントの基本クラスです。 |
複雑なコントロール
以下は、いくつかの重要な複雑なコントロールです-
| Sr.No | Control & Description |
|---|---|
| 1 |
DataGridコントロールは、スクロール可能なグリッドの上に列見出しの行を表示します。 |
| 2 |
AdvancedDataGridは、標準のDataGridコントロールにいくつかの追加機能を追加して、データ視覚化機能を追加します。 |
| 3 |
メニューコントロールは、個別に選択可能な選択肢のポップアップメニューを作成します。 |
| 4 |
ProgressBarコントロールは、時間の経過に伴うタスクの進行状況を視覚的に表現します。 |
| 5 |
RichTextEditorコントロールを使用すると、ユーザーはテキストを入力および書式設定できます。 |
| 6 |
TileListコントロールTileListコントロールは、タイルでレイアウトされた多数のアイテムを表示します。 |
| 7 |
Treeコントロールにより、ユーザーは拡張可能なツリーとして配置された階層データを表示できます。 |
| 8 |
VideoPlayerコントロールは、プログレッシブダウンロード、マルチビットレートストリーミング、およびストリーミングビデオをサポートするスキン可能なビデオプレーヤーです。 |
| 9 |
Accordianコントロールには子MXコンテナーまたはSpark NavigatorContentコンテナーのコレクションがありますが、一度に表示されるのはそのうちの1つだけです。 |
| 10 |
TabNavigatorコントロールには、子コンテナ間を移動するためのTabBarコンテナが含まれています。 |
| 11 |
ToggleButtonBarコントロールは、選択状態または選択解除状態を維持するボタンの水平または垂直グループを定義します。 |
フレックス-レイアウトパネル
レイアウトパネルコントロールを使用すると、ユーザーはページ上のUIコントロールを整理できます。 すべてのレイアウトコントロールはUIComponentクラスからプロパティを継承し、UIComponentクラスはEventDispatcherおよび他のトップレベルクラスからプロパティを継承します。
| Sr.No | Control & Description |
|---|---|
| 1 |
EventDispatcherクラスは、イベントをディスパッチできるすべてのクラスの基本クラスです。 EventDispatcherクラスを使用すると、表示リスト上のすべてのオブジェクトをイベントターゲットにでき、IEventDispatcherインターフェイスのメソッドを使用できます。 |
| 2 |
UIComponentクラスは、インタラクティブおよび非インタラクティブの両方のすべてのビジュアルコンポーネントの基本クラスです。 |
レイアウトパネル
以下は、いくつかの重要なレイアウトパネルです-
| Sr.No | Panel & Description |
|---|---|
| 1 |
BorderContainerクラスは、コンテナの境界線と背景の塗りつぶしの外観を制御するCSSスタイルのセットを提供します。 |
| 2 |
Formコンテナは、フォームのレイアウトを制御し、フォームフィールドを必須またはオプションとしてマークし、エラーメッセージを処理し、フォームデータをFlexデータモデルにバインドして、データのチェックと検証を実行します。 |
| 3 |
VGroupコンテナは、VerticalLayoutクラスを使用するグループコンテナです。 |
| 4 |
HGroupコンテナは、HorizontalLayoutクラスを使用するグループコンテナです。 |
| 5 |
Panelクラスは、タイトルバー、キャプション、境界線、および子のコンテンツ領域を含むコンテナです。 |
| 6 |
SkinnableContainerクラスは、視覚コンテンツを提供するスキナブルコンテナーの基本クラスです。 |
| 7 |
TabBarは同一のタブのセットを表示します。 |
| 8 |
TitleWindowは、閉じるボタンと移動領域を含むようにPanelを拡張します。 |
フレックス-視覚効果
エフェクトの概念を使用して、Flexアプリケーションに動作を追加できます。 たとえば、テキストボックスがフォーカスを取得すると、テキストを太くし、サイズをわずかに大きくすることができます。
すべてのエフェクトは、Effectクラスからプロパティを継承し、Effectクラスは、EventDispatcherおよびその他の最上位クラスからプロパティを継承します。
| Sr.No | Effect & Description |
|---|---|
| 1 |
Effectクラスは、すべてのFlexエフェクトの基本機能を定義する抽象基本クラスです。 このクラスは、すべてのエフェクトの基本ファクトリクラスを定義します。 |
基本的な効果
以下は、いくつかの重要な基本視覚効果です-
| Sr.No | Effect & Description |
|---|---|
| 1 |
フェード効果は、コンポーネントのアルファプロパティをアニメーション化します。 |
| 2 |
WipeLeftクラスは、左ワイプ効果を定義します。 |
| 3 |
WipeRightクラスは、右ワイプ効果を定義します。 |
| 4 |
Move3Dクラスは、x、y、およびz次元でターゲットオブジェクトを移動します。 |
| 5 |
Scale3Dクラスは、変換オブジェクトの周りを3次元でターゲットオブジェクトをスケーリングします。 |
| 6 |
Rotate3Dクラスは、x、y、またはz軸を中心に3次元でターゲットオブジェクトを回転します。 |
| 7 |
このアニメーション効果は、値の間の任意のプロパティセットをアニメーション化します。 motionPathsプロパティを設定して、アニメーション化するプロパティと値を指定します。 |
フレックス-イベント処理
Flexはイベントの概念を使用して、アプリケーション内の状態またはユーザーの操作に応じて、あるオブジェクトから別のオブジェクトにデータを渡します。
ActionScriptには、イベントを操作するために必要な機能の多くを定義する汎用の Event クラスがあります。 Flexアプリケーション内でイベントが発生するたびに、イベントクラス階層から3種類のオブジェクトが作成されます。
イベントには次の3つの重要なプロパティがあります
| Sr.No | Property & Description |
|---|---|
| 1 |
Type
|
| 2 |
Target Eventの target プロパティは、イベントを生成したコンポーネントへのオブジェクト参照です。clickMeButtonのIDを持つボタンをクリックすると、そのクリックイベントのターゲットはclickMeButtonになります。 |
| 3 |
CurrentTarget
|
イベントフローフェーズ
イベントは、イベントハンドラーを探すために3つの段階を経ます。
| Sr.No | Phase & Description |
|---|---|
| 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アプリケーションでのイベント処理をテストします-
| Step | Description |
|---|---|
| 1 | Create a project with a name HelloWorld under a package com.finddevguides.client as explained in the Flex - Create Application chapter. |
| 2 | Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged. |
| 3 | Compile and run the application to make sure business logic is working as per the requirements. |
以下は、変更されたmxmlファイル src/com.finddevguides/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/finddevguides/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>すべての変更が完了したら、link：/flex/flex_create_application [Flex-アプリケーションの作成]の章で行ったように、アプリケーションを通常モードでコンパイルして実行します。 アプリケーションに問題がなければ、次の結果が得られます。[link：/flex/samples/EventHandlingApplicationl [オンラインで試す]]
フレックス-カスタムコントロール
Flexには、カスタムコンポーネントを作成する2つの方法があります。
- ActionScriptを使用する
- MXMLを使用する
ActionScriptを使用する
既存のコンポーネントを拡張することにより、コンポーネントを作成できます。 Flash Builderを使用してコンポーネントを作成するには、*ファイル>新規> ActionScriptクラス*をクリックします。
以下に示すように詳細を入力します-
Flash Builderは、次のCustomButton.asファイルを作成します。
package com.finddevguides.client {
import spark.components.Button;
public class CustomButton extends Button {
public function CustomButton() {
super();
}
}
}MXMLを使用する
既存のコンポーネントを拡張することにより、コンポーネントを作成できます。 Flash Builderを使用してコンポーネントを作成するには、[ファイル]> [新規]> [MXMLコンポーネント]をクリックします。
以下に示すように詳細を入力します。
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アプリケーションでカスタムコントロールをテストするには、次の手順に従います-
| Step | Description |
|---|---|
| 1 | Create a project with a name HelloWorld under a package com.finddevguides.client as explained in the Flex - Create Application chapter. |
| 2 | Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged. |
| 3 | Create CustomLogin.mxml and CustomButton.as component as explained above. Modify these files as explained below. Keep rest of the files unchanged. |
| 4 | Compile and run the application to make sure business logic is working as per the requirements. |
以下は、変更されたmxmlファイル src/com.finddevguides/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.finddevguides/client/CustomButton.as の内容です。
package com.finddevguides.client {
import spark.components.Button;
public class CustomButton extends Button {
public function CustomButton() {
super();
this.setStyle("color","green");
this.label = "Submit";
}
}
}以下は、変更されたmxmlファイル src/com.finddevguides/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.finddevguides.client.*"
initialize = "application_initializeHandler(event)">
<fx:Style source = "/com/finddevguides/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>すべての変更が完了したら、link：/flex/flex_create_application [Flex-アプリケーションの作成]の章で行ったように、アプリケーションを通常モードでコンパイルして実行します。 アプリケーションに問題がない場合は、次の結果が生成されます。[link：/flex/samples/CustomControlApplicationl [Try it online]]
フレックス-RPCサービス
Flexは、サーバー側のデータをクライアント側に提供するRPCサービスを提供します。 Flexは、サーバー側のデータをかなり制御します。
- Flex RPCサービスを使用して、サーバー側で実行されるユーザーアクションを定義できます。
- Flex RPC Sservicesは、あらゆるサーバー側テクノロジーと統合できます。 *Flex RPCサービスの1つは、圧縮されたバイナリデータをネットワーク経由で転送するための組み込みサポートを提供し、非常に高速です。
Flexは、次の3種類のRPCサービスを提供します
| Sr.No | RPC Service & Description |
|---|---|
| 1 |
<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オブジェクトを表すために使用されます。 このタグにより、Action Message Format（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.finddevguides.com/flex/Items.xml"/>
</fx:Declarations>RPCコール
itemRequest.send（）メソッドを呼び出し、itemRequest WebサービスのlastResultオブジェクトの値をFlex UIコンポーネントにバインドします。
...
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サービスをテストする手順に従います-
| Step | Description |
|---|---|
| 1 | Create a project with a name HelloWorld under a package com.finddevguides.client as explained in the Flex - Create Application chapter. |
| 2 | Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged. |
| 3 | Compile and run the application to make sure business logic is working as per the requirements. |
以下は、変更されたmxmlファイル src/com.finddevguides/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/finddevguides/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.finddevguides.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>すべての変更が完了したら、link：/flex/flex_create_application [Flex-アプリケーションの作成]の章で行ったように、アプリケーションを通常モードでコンパイルして実行します。 アプリケーションに問題がなければ、次の結果が得られます。[link：/flex/samples/RPCApplicationl [オンラインで試す]]
Flex-FlexUnit統合
Flash Builder 4には、Flex開発サイクルでのFlexUnit統合に対する優れた組み込みサポートがあります。
テストケースクラスを作成する
Flash Builderのテストクラス作成ウィザードを使用して、テストケースクラスを作成できます。 この記事で説明するように、Flash Builderを使用すると、テストケースを簡単に実行できます。
Flash Builderを使用してテストケースクラスを作成するには、*ファイル>新規>テストケースクラス*をクリックします。 以下に示すように詳細を入力します。
Flash Builderは、次のTestClass1 ..をファイルとして作成します。
package com.finddevguides.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統合をテストする手順に従います-
| Step | Description |
|---|---|
| 1 | Create a project with a name HelloWorld under a package com.finddevguides.client as explained in the Flex - Create Application chapter. |
| 2 | Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged. |
| 3 | Create TestClass1.as test case as described above and Modify TestClass1.as as explained below. |
| 4 | Compile and run the application to make sure business logic is working as per the requirements. |
以下は、変更されたファイル src/com.finddevguides/client/TestClass1.as の内容です。
package com.finddevguides.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.finddevguides/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>すべての変更が完了したら、link：/flex/flex_create_application [Flex-アプリケーションの作成]の章で行ったように、通常モードでコンパイルしてみましょう。
テストケースの実行
パッケージエクスプローラーでTestClass1を右クリックし、[実行]> [FlexUnitテスト]を選択します。 Flash Builderのテストウィンドウに次の出力が表示されます。
Flash Builderでは、ブラウザーにテスト結果も表示されます。
フレックス-アプリケーションのデバッグ
FlexはFlexコードをデバッグする優れた機能を提供し、Flash Builder 4は優れた組み込みデバッガーとデバッグパースペクティブサポートを備えています。
- デバッグモードでは、Flexアプリケーションは、デバッグ機能をサポートするFlash Builder 4に組み込まれたFlash Player Debuggerバージョンで実行されます。
- そのため、開発者はFlash Builderで簡単で組み込みのデバッグ構成を取得できます。
この記事では、Flash Builderを使用してFlexクライアントコードをデバッグする使用方法を示します。 次のタスクを実行します
- コードにブレークポイントを設定し、ブレークポイントエクスプローラーで確認します。
- デバッグ中にコードを1行ずつステップ実行します。
- 変数の値を表示します。
- すべての変数の値を調べます。
- 式の値を調べます。
- 中断されたスレッドのスタックフレームを表示します。
デバッグの例
| Step | Description |
|---|---|
| 1 | Create a project with a name HelloWorld under a package com.finddevguides.client as explained in the Flex - Create Application chapter. |
| 2 | Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged. |
| 3 | Compile and run the application to make sure business logic is working as per the requirements. |
以下は、変更されたmxmlファイル src/com.finddevguides/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/finddevguides/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>すべての変更が完了したら、link：/flex/flex_create_application [Flex-アプリケーションの作成]の章で行ったように、通常モードでコンパイルしてみましょう。
ステップ1-ブレークポイントを配置する
HelloWorld.mxmlのアプリケーション初期化ハンドラーの最初の行にブレークポイントを配置します
ステップ2-アプリケーションのデバッグ
アプリケーションのデバッグアプリケーションメニューのデバッグをクリックし、 HelloWorld アプリケーションを選択してアプリケーションをデバッグします。
すべてが正常であれば、アプリケーションがブラウザで起動し、Flash Builderコンソールに次のデバッグログが表示されます。
[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 decompressionapplication_initialize Handlerメソッドの最初の行にブレークポイントを配置すると、アプリケーションが起動するとすぐに、Flash Builderブレークポイントにフォーカスが表示されます。
中断されたスレッドのスタックトレースを確認できます。
式の値を確認できます。
配置されたブレークポイントのリストを見ることができます。
application_initializeHandler（）メソッドの最後の行に到達するまでF6を押し続けます。 ファンクションキーの参照として、F6はコードを1行ずつ検査し、F5はさらに内側に進み、F8はアプリケーションを再開します。 これで、application_initializeHandler（）メソッドのすべての変数の値のリストを確認できます。
これで、Javaアプリケーションのデバッグと同じ方法でflexコードをデバッグできることがわかります。 任意の行にブレークポイントを配置し、flexのデバッグ機能を使用します。
フレックス-国際化
Flexは、Flexアプリケーションを国際化する2つの方法を提供します。プロジェクトで最も一般的に使用されているコンパイル時国際化の使用方法を示します。
| Sr.No | Technique & Description |
|---|---|
| 1 |
Compile Time Internationalization この手法は最も一般的であり、実行時のオーバーヘッドはほとんど必要ありません。は、定数文字列とパラメータ化された文字列の両方を変換するための非常に効率的な手法です。実装が最も簡単です。 コンパイル時間の国際化では、標準のプロパティファイルを使用して、翻訳された文字列とパラメーター化されたメッセージを保存します。これらのプロパティファイルは、アプリケーションで直接コンパイルされます。 |
| 2 |
Run Time Internationalization この手法は非常に柔軟ですが、静的な文字列の国際化よりも時間がかかります。 ローカリゼーションプロパティファイルを個別にコンパイルし、アプリケーションの外部に残して、実行時にロードする必要があります。 |
Flexアプリケーションの国際化のワークフロー
ステップ1-フォルダー構造を作成する
Flexプロジェクトのsrcフォルダーの下にロケールフォルダーを作成します。これは、アプリケーションがサポートするロケールのすべてのプロパティファイルの親ディレクトリになります。 ロケールフォルダー内に、サポートするアプリケーションのロケールごとに1つのサブフォルダーを作成します。 ロケールの命名規則は次のとおりです。
{language}_{country code}たとえば、en_USは米国の英語を表します。 ロケールde_DEはドイツ語を表します。 サンプルアプリケーションは、英語とドイツ語の2つの共通言語をサポートします。
ステップ2 –プロパティファイルを作成する
アプリケーションで使用されるメッセージを含むプロパティファイルを作成します。 この例では、 src> locale> en_US フォルダーの下に HelloWorldMessages.properties ファイルを作成しました。
enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}ロケール固有の翻訳された値を含むプロパティファイルを作成します。 この例では、 src> locale> de_DE フォルダーの下に HelloWorldMessages.properties ファイルを作成しました。 このファイルにはドイツ語の翻訳が含まれています。 _deはドイツ語のロケールを指定し、アプリケーションでドイツ語をサポートします。
Flash Builderを使用してプロパティファイルを作成している場合は、ファイルのエンコーディングを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ビルドパスを選択し、ソースパス設定に次を追加します-
src\locale\{locale}内部化の例
次の手順に従って、Flexアプリケーションの内部化手法をテストします-
| Step | Description |
|---|---|
| 1 | Create a project with a name HelloWorld under a package com.finddevguides.client as explained in the Flex - Create Application chapter. |
| 2 | Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged. |
| 3 | Compile and run the application to make sure business logic is working as per the requirements. |
以下は、変更されたmxmlファイル src/com.finddevguides/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/finddevguides/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>すべての変更が完了したら、link：/flex/flex_create_application [Flex-アプリケーションの作成]の章で行ったように、アプリケーションを通常モードでコンパイルして実行します。 アプリケーションに問題がなければ、次の結果が生成されます。[link：/flex/samples/I18NApplicationl [オンラインで試す]]
言語ドロップダウンを使用して言語を変更し、結果を確認します。
フレックス-印刷サポート
Flexは、flexオブジェクトを印刷するための特別なクラス FlexPrintJob を提供します。
- FlexPrintJobを使用して、FormまたはVBoxコンテナなどの1つ以上のFlexオブジェクトを印刷できます。
- FlexPrintJobは、オブジェクトとそれに含まれるすべてのオブジェクトを印刷します。
- オブジェクトは、表示されたインターフェイスのすべてまたは一部にすることができます。
- オブジェクトは、特に印刷用にデータをフォーマットするコンポーネントにすることができます。
- FlexPrintJobクラスを使用すると、ページに合わせて出力をスケーリングできます。
- FlexPrintJobクラスは、複数のページを自動的に使用して、1ページに収まらないオブジェクトを印刷します。
- FlexPrintJobクラスにより、オペレーティングシステムに[印刷]ダイアログボックスが表示されます。 ユーザーの操作なしでは印刷できません。
印刷ジョブを準備して送信する
出力を印刷するには、印刷ジョブを準備して送信します。 FlexPrintJobクラスのインスタンスを作成しましょう
var printJob:FlexPrintJob = new FlexPrintJob();印刷ジョブを開始する
printJob.start();Flexは、オペレーティングシステムに[印刷]ダイアログボックスを表示させます。 1つ以上のオブジェクトを印刷ジョブに追加し、それらのスケーリング方法を指定します
printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH);各オブジェクトは新しいページから始まります。 印刷ジョブをプリンターに送信します
printJob.send();印刷例
| Step | Description |
|---|---|
| 1 | Create a project with a name HelloWorld under a package com.finddevguides.client as explained in the Flex - Create Application chapter. |
| 2 | Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged. |
| 3 | Compile and run the application to make sure business logic is working as per the requirements. |
以下は、変更されたmxmlファイル src/com.finddevguides/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/finddevguides/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>すべての変更が完了したら、link：/flex/flex_create_application [Flex-アプリケーションの作成]の章で行ったように、アプリケーションを通常モードでコンパイルして実行します。 アプリケーションに問題がなければ、次の結果が得られます。[link：/flex/samples/PrintApplicationl [オンラインで試す]]
[印刷]ボタンをクリックすると、以下に示すデータグリッドの印刷が表示されます。
