Flex-create-application
フレックス-アプリケーションの作成
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 を使用して最初のアプリケーションを実装しました。