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

Flash Builder 4.5を使用してFlexアプリケーションを作成します。簡単な HelloWorld アプリケーションから始めましょう。

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

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

Flexプロジェクトの作成ウィザード

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

Flexプロジェクト構造

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

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 を使用して最初のアプリケーションを実装しました。

Flex-create-application