フレックス-アプリケーション

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	playerglobal.swc* このライブラリは、マシンにインストールされている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	index.templatel* プレースホルダー付きのホスト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 アプリケーションを作成します。

Flex-applications

目次