Flex-アプリケーション

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ファイルを含めます。
ActionScriptクラスをインポートします。
ActionScriptコンポーネントを作成します。

パブリックリソース

これらは、ホスト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を使用するアプリケーション。