flex基礎学習

5078 ワード

FlexはAdobeが開発したRIAで、インターネットに富んだアプリケーションで、Flexで開発したものはすべてFlashで作ることができますが、Flexは主にプログラム開発者向けで、フロントはActionScriptとMXMLを使います.
flexとは何かを紹介し、flexプロジェクトについて自分の認識を書きます.ActionScriptはweb開発のjavascriptに似ていますが、彼の文法には強いタイプint、stringなどがあり、mxmlはwebのhtmlのラベルに似ています.両者の結合はコードをうまく分離することができる.
mxmlにとってActionScriptの場合asファイルは,主にネーミング空間のインポートといくつかの定義関数,クラスが含まれていると考えられる.
flex開発の個人的な理解もイベント駆動に基づいてインタフェースをレンダリングしている.
flexロードモジュールのコンポーネントは、vboxから継承されたModuleLoaderでロードできます.vboxは垂直レイアウトで、hboxは水平レイアウトです.
flexリモートインタラクションの場合、プロジェクトでは主にRemoteObjectというオブジェクトがインタラクションに使用されますが、返された結果の受け入れには2つの関数が使用されます.addEventListener(ResultEvent.RESULT,pOnOk);addEventListener(FaultEvent.FAULT,pOnEr);1つはリスニングに成功し、1つはリスニングに失敗しました.この点はajax呼び出しとよく似ています.
flexの開発は私の個人的な感覚にExtjsに似ていて、多くの場所でイベントを登録して、方法を登録する必要があります.
次に、コード登録インタフェースと全体インタフェースのレイアウトを貼り付けます.
ログインインタフェースのコードは次のとおりです.
<?xml version="1.0" encoding="utf-8"?>

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 

	horizontalScrollPolicy="auto" verticalScrollPolicy="auto" title="  " height="200" width="400"

	showCloseButton="false" creationComplete="init()" >

	<mx:Script source="Login_As.as" />

	<mx:Label x="47" y="37" text="    " />

	<mx:Label x="47" y="70" text="    "/>

	<mx:TextInput x="107" y="35" width="218" id="tbox_userName" text="" maxChars="10" enter="Logins()"

		restrict="a-zA-Z0-9"/>

	<mx:TextInput x="107" y="69" width="218" id="tbox_password" text="" displayAsPassword="true" maxChars="25"

		enter="Logins()"/>

	<mx:Button id="btnLogin" x="271" y="104" label="   "/>

</mx:TitleWindow>


全体のテンプレートレイアウトは次のとおりです.
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

	horizontalScrollPolicy="off" verticalScrollPolicy="off" 

	paddingTop="0" paddingLeft="0" paddingRight="0" paddingBottom="0"

	layout="absolute" creationComplete="init()" themeColor="#ffffff" backgroundColor="#ffffff">

	<mx:Script source="Index_As.as" />

	<mx:Style source="style.css"/>

	<mx:VBox id="controls" width="100%" height="100%" horizontalGap="0" verticalGap="0"  backgroundColor="#ffffff">

		<mx:HBox styleName="TitleBar" id="idTitleBar" width="100%" height="32" paddingTop="2" backgroundColor="#eaeaea">

			<mx:Label id="idTitle" fontSize="18" text="XXXX      "/>

			<mx:Label id="idAreaName" verticalCenter="0" fontSize="18" text=""/>

		</mx:HBox>

		<mx:Canvas id="idOperBar" width="100%" height="24" x="2" y="-5">

			<mx:Label id="lbAgentInfo" left="10" verticalCenter="0" text="" />

		</mx:Canvas>

		<mx:VBox id="vbox_middle" width="100%" height="100%">

			<mx:HDividedBox id="HDBox" width="100%" height="100%" paddingLeft="5" paddingBottom="5" paddingRight="5">

				<mx:VBox id="vbox_menu" width="200" height="100%" borderColor="#aaaaaa" borderStyle="solid">

					<mx:Tree id="tree_menu" width="100%" height="100%" verticalScrollPolicy="auto" 

							horizontalScrollPolicy="auto" borderStyle="none" openItems="true" scroll="true"/>

				</mx:VBox>

				<mx:VBox id="vbox_content" width="100%" height="100%" borderColor="#aaaaaa" borderStyle="solid">

					<mx:ApplicationControlBar id="idModuleNameBar" width="100%">

						<mx:Label id="idModuleName" text="" fontWeight="bold"/>

					</mx:ApplicationControlBar>

					<mx:ModuleLoader id="MLoader" url="desktop.swf" width="100%" height="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off"/>

				</mx:VBox>

			</mx:HDividedBox>

		</mx:VBox>	

		

	</mx:VBox>

</mx:Application>


具体的にflexの中のあるコンポーネントは何に使いますか?ここでは詳しく書きません.