Dreamer’s Blog ドリーマーさんのブログ

英文原文：《Building RIAs from front to back – Part 2: Layout beyond the standard container in Flex 2》英語のテキスト： "建物リアス式海岸前から後ろに-第2部：レイアウトを超え、標準のコンテナでのF lex2 "
原文地址：http://www. adobe .com/devnet/flex/articles/frontback_pt2.htmlオリジナルのアドレス： @です。 はAdobe .com/devnet/flex/articles/frontback_pt2.html
原文作者：Andrew Trice， Keun Leeオリジナルの著者：アンドリューtrice 、李根

译者：Dreamer。翻訳：ドリーマーです。 此文未经允许，谢绝转载。この記事は無許可で、再版を拒否しています。 这个是一系列的文章，第一部分早就出来了，过了好长时间才出了这个第二部分。これは、一連の記事、早期からの最初の部分は、かなり長い時間の後には、次の前に、 2つ目の部分です。 建议先阅读第一部分，这个我也翻译了：http://www.zhuoqun.net/index.php/archives/52。提言の最初の部分を読むには、この私も翻訳： http://www.zhuoqun.net/index.php/archives/52です。

从前往后创建RIAs – 第二部分：Flex 2中超越标准容器的布局 編集して項目を作成、その後のリアス式海岸-第二部：フレックス2を超え、標準のコンテナ内のレイアウト

这篇文章是“从前往后创建RIAs”系列文章的第二部分，这一系列文章描述了如何根据用户体验创建程序，并从零开始讲解了如何开发更好的富因特网应用程序。この記事は、 "使用して作成して次へリアス"シリーズの記事を2番目の部分は、次のシリーズのプロシージャを作成する方法について述べている記事に基づいて、ユーザーの利便性に傷を付けるとスタート]ボタンをより豊かなインターネットアプリケーションを開発する方法を改善します。 我们建议您在阅读第二部分之前先阅读“ 从前往后创建RIAs – 第一部分：理解这种方式 ”。を読むことをお勧め2番目の部分を読む前に"過去には、後続の創作のリアス式海岸-パートI ： このように理解します。 " 在本文中，你将会学习到如何在Flex 2中创建超越标准容器的布局，还会学习如何使用Flex 2中的CSS特性以及CSS样式引擎。この資料では、あなたには、 Flex 2を作成する方法については、標準のコンテナ内のレイアウトを超え、またFlexの2アイテムを使用する方法については、 CSSのCSSスタイルと、エンジンの特性です。

传统地，在Adobe Flex应用程序中，布局是基于多层次容器的，由Panel，Canvas，ViewStacks, HBoxes Vboxes以及很多其它容器组成。字は、 AdobeのFlexアプリケーションは、複数のレベルに基づいてレイアウトはコンテナからのパネル、キャンバス、 viewstacks 、 hboxes vboxesコンテナやその他多くのコンポーネントです。 看图1：プラグ1 ：

图1. Flex 1.5样式的布局 図1 。 Flex 1.5のスタイルのレイアウト

在传统的基于容器的Flex 1.5布局中，这种效果需要一个<mx:Panel>，一个<mx:VBox>，和一系列的<mx:HBox>（每个<mx:HBox>包含一个<mx:Label>和一个<mx:TextInput>）。に基づいて、従来のコンテナ内のレイアウトを、 Flex 1.5では、この効果には、 <mx: panel>は、 <mx: vbox> 、およびさまざまな<mx: hbox> （各<mx: hbox>には、 < MXの：ラベル>と<mx: textinput> ） 。 下面的代码可以在Flex 1.5中创建图1所示的程序：は、次のコードを作成する過程でFlex 1.5では、図1 ：

<?xml version=”1.0″ encoding=”utf-8″?> <ですか？ XMLのバージョン= " 1.0 "エンコーディング=は" utf - 8 "ですか？ >
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”> <mx:Panel title=”Flex Demo - 1.5 Style Layout” <mx:application xmlns:mx="http://www.adobe.com/2006/mxml"> < MXの：パネルのタイトル= " Flexのデモ-1 .5スタイルのレイアウト"
paddingBottom=”10″ paddingLeft=”10″ paddingTop=”10″ paddingRight=”10″> paddingbottom = " 10 " paddingleft = " 10 " paddingtop = " 10 " paddingright = " 10 " >

<mx:VBox width=”100%” height=”100%”> <mx:vbox width="100%" height="100%">

<mx:HBox width=”100%” > <mx:hbox width="100%">
<mx:Label text=”Field 1″ width=”50″ /> <mx:label text="field 1" width="50" />
<mx:TextInput width=”100%” /> <mx:textinput width="100%" />
</mx:HBox> < / MXの： hbox >

<mx:HBox width=”100%” > <mx:hbox width="100%">
<mx:Label text=”Field 2″ width=”50″ /> <mx:label text="field 2" width="50" />
<mx:TextInput width=”100%” /> <mx:textinput width="100%" />
</mx:HBox> < / MXの： hbox >

<mx:HBox width=”100%” > <mx:hbox width="100%">
<mx:Label text=”Field 3″ width=”50″ /> <mx:label text="field 3" /> width="50"
<mx:TextInput width=”100%” /> <mx:textinput width="100%" />
</mx:HBox> < / MXの： hbox >

<mx:HBox width=”100%” > <mx:hbox width="100%">
<mx:Label text=”Field 4″ width=”50″ /> <mx:label text="field 4" width="50" />
<mx:TextInput width=”100%” /> <mx:textinput width="100%" />
</mx:HBox> < / MXの： hbox >

<mx:HBox width=”100%” > <mx:hbox width="100%">
<mx:Label text=”Field 5″ width=”50″ /> <mx:label text="field 5" width="50" />
<mx:TextInput width=”100%” /> <mx:textinput width="100%" />
</mx:HBox> < / MXの： hbox >

<mx:HBox width=”100%” horizontalAlign=”center”> <mx:hbox width="100%" horizontalalign="center">
<mx:Button width=”30″ label=”OK” /> <mx:button width="30" label="ok" />
<mx:Button width=”60″ label=”Cancel” /> <mx:button width="60" label="cancel" />
</mx:HBox> < / MXの： hbox >

</mx:VBox> < / MXの：車速計VBOX >

</mx:Panel> < / MXの：パネル>

</mx:Application> < / MXの：アプリケーション>

这种布局有什么错误吗？このエラーのレイアウトは何ですか？ »

绝对没有，不过有更好的方法来实现它。全くないがありますが、それを達成するためにより良い方法です。

Flex 2让你可以使用CSS将元素相对定位到它们所在的容器。 Flex 2で使用することができるように相対してCSSの要素は、コンテナの場所です。 从根本上来说，这就意味着在Flex 2中可以创建和上面的例子相似的组件，但是不需要嵌套容器。根本的に言えば、これは、 Flex 2で作成することができます上記の例では、および同様のコンポーネントが、ネストされたコンテナにする必要はありません。 如果你比较一下图1和图2（在下面），你将会看到它们几乎一样。数字を比較する場合に1と2を（下）は、それらが表示さほぼ同じです。 但是从代码的角度来看，它们是很不同的。しかし、コードの観点から、彼らは非常に異なっています。

用户界面组件对象现在支持”left”, “right”, “top” 和“bottom” CSS样式。ユーザーインターフェイスをサポートするコンポーネントオブジェクト"左" 、 "右" 、 "戻る"と"下" CSSスタイルです。 这些属性允许你将组件相对定位于它们所在容器中。これらのコンポーネントを使えば、相対的位置を次の属性には、コンテナでは彼らに位置します。 所以，如果你有一个<mx:Label>元素，它有一个属性top=”10″，这个Label将总是与其所在容器的顶部保持10像素的距离。そのため、 <mx: label>要素をお持ちの場合は、それには、属性のトップ= " 10 "は、この値は常に、ラベルの上部には、コンテナの間の距離を維持する画素数10 。

图2. Flex 2样式的布局 図2 。フレックス2 -スタイルのレイアウト

尽管这个程序看起来和图1一样，但是代码却使用了CSS定位：図1のようなものの、このプロセスが、これはCSSコードを使用して場所：

<?xml version=”1.0″ encoding=”utf-8″?> <ですか？ XMLのバージョン= " 1.0 "エンコーディング=は" utf - 8 "ですか？ >
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”> <mx:Panel title=”Flex Demo - 2 Style Layout” <mx:application xmlns:mx="http://www.adobe.com/2006/mxml"> < MXの：パネルのタイトル= " Flexのデモ-2スタイルのレイアウト"
paddingBottom=”10″ paddingLeft=”10″ paddingTop=”10″ paddingRight=”10″ layout=”absolute” height=”233″ width=”260″> paddingbottom = " 10 " paddingleft = " 10 " paddingtop = " 10 " paddingright = " 10 "レイアウト= "絶対的な"高さ= " 233 "幅= " 260 " >

<mx:Label text=”Field 1″ width=”50″ top=”10″ left=”10″/> <mx:label text="field 1" width="50" top="10" left="10"/>
<mx:TextInput right=”10″ left=”65″ top=”8″/> <mx:textinput right="10" left="65" top="8"/>

<mx:Label text=”Field 2″ width=”50″ top=”40″ left=”10″/> <mx:label text="field 2" width="50" top="40" left="10"/>
<mx:TextInput right=”10″ left=”65″ top=”38″/> <mx:textinput right="10" left="65" top="38"/>

<mx:Label text=”Field 3″ width=”50″ top=”70″ left=”10″/> <mx:label text="field 3" width="50" top="70" left="10"/>
<mx:TextInput right=”10″ left=”65″ top=”68″/> <mx:textinput right="10" left="65" top="68"/>

<mx:Label text=”Field 4″ width=”50″ top=”100″ left=”10″/> <mx:label text="field 4" width="50" top="100" left="10"/>
<mx:TextInput right=”10″ left=”65″ top=”98″/> <mx:textinput right="10" left="65" top="98"/>

<mx:Label text=”Field 5″ width=”50″ top=”130″ left=”10″/> <mx:label text="field 5" width="50" top="130" left="10"/>
<mx:TextInput right=”10″ left=”65″ top=”128″/> <mx:textinput right="10" left="65" top="128"/>

<mx:Button width=”30″ label=”OK” bottom=”10″ right=”80″/> <mx:button width="30" label="ok" bottom="10" right="80"/>
<mx:Button width=”60″ label=”Cancel” right=”10″ bottom=”10″/> <mx:button width="60" label="cancel" right="10" bottom="10"/>

</mx:Panel> < / MXの：パネル>

</mx:Application> < / MXの：アプリケーション>

这部分代码简单清爽的多。この部分のコードを簡単になり、よりおいしくします。 这只是Flex 2中基于CSS布局的好处之一。これはのみのCSSベースのレイアウトをFlex 2での利点の1つです。 另外一个好处就是这个框架不再需要像Flex 1.5的布局那样嵌套容器。もう1つの利点は、このフレームワークはもはや必要とさFlex 1.5では、ネストされたコンテナのレイアウトをします。 这是一个很大的优点。これは大きな利点です。 当Flex被编译成SWF文件在浏览器中被渲染时，每个容器都将作为一个额外的对象。 Flexのときに組み込みでコンパイルされ誇張されたSWFファイルをブラウザでは、各船としてターゲットに追加される。 因为组件变少了，所以运行时的movie clip对象也少了，所以， 在渲染布局相同的页面时使用的资源也少了！コンポーネントの量が少ないため、ムービークリップのオブジェクトを実行しているので少ないときは、そのため、レンダリングすると、同じページのレイアウトを使用するリソースの少ない！

CSS定位全面改善了整个程序的速度，初始化，文件大小以及渲染时间。 CSSポジショニングの速度を向上させるため、全体のプロセスを、初期化、ファイルのサイズとレンダリング時間です。 在这个例子中，你不会在性能表现上发现太大的差异，但是如果你有一个包含成百个页面和/或组件的大型程序的时候，在性能上将会有极大的不同。この例では、あまりにも多くのことはありませんのパフォーマンスを見つけるの違い、もしあなたには、 100ページおよび/または主要なコンポーネントは、プロセスでは、パフォーマンスが大幅に異なるです。

Flex 2基于CSS布局的另外一个好处就是所有的定位都可以使用Flex CSS样式引擎实现。 Flex 2でのCSSベースのレイアウトをもう1つの利点は、すべてのポジショニングは、 CSSスタイルフレックスエンジンを達成するために使用します。 图3（如下）可能看起来很像图2：図3 （下）は次のように図2 ：

图3. Flex 2的CSS样式布局 図3 。 Flex 2でCSSスタイルのレイアウト

尽管图3看起来非常像图2，但是实现它的代码非常不同：図3は図2のようにはとても、しかし、そのコードを実現する非常に異なる：

<?xml version=”1.0″ encoding=”utf-8″?> <ですか？ XMLのバージョン= " 1.0 "エンコーディング=は" utf - 8 "ですか？ >
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”> <mx:Style> <mx:application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:style>

.label1{ width:10; top:10; left:10; }です。 Label1の（幅： 10 ;トップへ： 10 ;左： 10 ; ）
.textInput1{ right:10; left:65; top:8; }です。 textinput1 （右： 10 ;左： 65 ;トップへ： 8 ; ）

.label2{ width:10; top:40; left:10; }です。 label2 （幅： 10 ;トップへ： 40 ;左： 10 ; ）
.textInput2{ right:10; left:65; top:38; }です。 textinput2 （右： 10 ;左： 65 ;トップへ： 38 ; ）

.label3{ width:10; top:70; left:10; }です。 label3 （幅： 10 ;トップへ： 70 ;左： 10 ; ）
.textInput3{ right:10; left:65; top:68; }です。 textinput3 （右： 10 ;左： 65 ;トップへ： 68 ; ）

.label4{ width:10; top:100; left:10; }です。 label4 （幅： 10 ;トップへ： 100 ;左： 10 ; ）
.textInput4{ right:10; left:65; top:98; }です。 textinput4 （右： 10 ;左： 65 ;トップへ： 98 ; ）

.label5{ width:10; top:130; left:10; }です。 label5 （幅： 10 ;トップへ： 130 ;左： 10 ; ）
.textInput5{ right:10; left:65; top:128; }です。 textinput5 （右： 10 ;左： 65 ;トップへ： 128 ; ）

.button1{ width:30; bottom:10; right: 80; }です。 Button1の（幅： 30 ;下： 10 ;右： 80 ; ）
.button2{ width:60; bottom:10; right: 10; }です。 Button2の（幅： 60 ;下： 10 ;右： 10 ; ）

</mx:Style> < / MXの：スタイル>

<mx:Panel title=”Flex Demo - 2 CSS Style Layout” < MXの：パネルのタイトル= " Flexのデモ-2 C SSスタイルのレイアウト"
paddingBottom=”10″ paddingLeft=”10″ paddingTop=”10″ paddingRight=”10″ paddingbottom = " 10 " paddingleft = " 10 " paddingtop = " 10 " paddingright = " 10 "
layout=”absolute” height=”233″ width=”260″>レイアウト= "絶対的な"高さ= " 233 "幅= " 260 " >

<mx:Label text=”Field 1″ styleName=”label1″ /> <mx:label text="field 1" stylename="label1" />
<mx:TextInput styleName=”textInput1″ /> <mx:textinput stylename="textinput1" />

<mx:Label text=”Field 2″ styleName=”label2″ /> <mx:label text="field 2" stylename="label2" />
<mx:TextInput styleName=”textInput2″ /> <mx:textinput stylename="textinput2" />

<mx:Label text=”Field 3″ styleName=”label3″ /> <mx:label text="field 3" stylename="label3" />
<mx:TextInput styleName=”textInput3″ /> <mx:textinput stylename="textinput3" />

<mx:Label text=”Field 4″ styleName=”label4″ /> <mx:label text="field 4" stylename="label4" />
<mx:TextInput styleName=”textInput4″ /> <mx:textinput stylename="textinput4" />

<mx:Label text=”Field 5″ styleName=”label5″ /> <mx:label text="field 5" stylename="label5" />
<mx:TextInput styleName=”textInput5″ /> <mx:textinput stylename="textinput5" />

<mx:Button label=”OK” styleName=”button1″ /> <mx:button label="ok" stylename="button1" />
<mx:Button label=”Cancel” styleName=”button2″ /> <mx:button label="cancel" stylename="button2" />

</mx:Panel> < / MXの：パネル>

</mx:Application> < / MXの：アプリケーション>

是的，它比图2所示的程序有更多代码。はい、図2に示すように、プロシージャよりも他のコードです。 为什么我们需要更多代码？なぜ我々は他のコードが必要»

CSS定位允许你将显示/定位逻辑从实际程序的逻辑中分离出来。 CSSポジショニングを使用すると詳細/位置決めロジックからの実用的な手続きは、ロジックの分離します。 这使得用户界面设计师和工程师可以各自单独工作。これにより、ユーザーインターフェイスのデザイナーとエンジニアが別々の仕事です。 工程师可以开发程序功能，而用户界面设计师则可以在同时设计样式。エンジニアが開発機能、およびユーザーインターフェイスのデザイナーがデザインのスタイルは、同じ時間です。 他们在工作过程中不需要等待彼此。その作業の過程でお互いのを待つ必要はありません。 当用户界面设计完成的时候，样式可以被简单地“拖”到工程师的代码里，然后工程师只需要做很少的额外工作程序可以加上样式。ときに、ユーザーインターフェイス設計が完了すると、スタイルは、単に"引き延ばし"のコードをエンジニア、およびその他のほとんどのエンジニアだけで行う作業手順のスタイルを追加します。

这样做的好处不只是设计师和工程师角色的分离。このメリットだけでなく、デザイナーとエンジニアの役割を分離します。 这样做一个程序就可以很容易地重新加载皮肤，组件也可以很容易地被重新定位。この手順が簡単に再ロードして皮膚、コンポーネントで簡単に再ターゲットを絞った。 观察一下图4，看看这个与上面的不一样的程序，它的最精华的地方就是没有对图3所示程序的逻辑作任何更改。観測は、図4に、これを見て、上記のと同じ手順ではない、の本質をするわけではない場所を図3の論理を示してすべての変更手続きをします。 唯一更改的是CSS样式的定义。唯一の変更は、 CSSスタイルの定義をします。

图4.相反的Flex 2 CSS样式布局 図4 。それとは逆のFlex 2 CSSスタイルのレイアウト

请看代码中对CSS所作的更改：詳細については、 CSSコードの変更：

<?xml version=”1.0″ encoding=”utf-8″?> <ですか？ XMLのバージョン= " 1.0 "エンコーディング=は" utf - 8 "ですか？ >
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”> <mx:Style> <mx:application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:style>

.label1{ width:10; top:10; right:10; }です。 Label1の（幅： 10 ;トップへ： 10 ;右： 10 ; ）
.textInput1{ left:10; right:65; top:8; }です。 textinput1 （左： 10 ;右： 65 ;トップへ： 8 ; ）

.label2{ width:10; top:40; right:10; }です。 label2 （幅： 10 ;トップへ： 40 ;右： 10 ; ）
.textInput2{ left:10; right:65; top:38; }です。 textinput2 （左： 10 ;右： 65 ;トップへ： 38 ; ）

.label3{ width:10; top:70; right:10; }です。 label3 （幅： 10 ;トップへ： 70 ;右： 10 ; ）
.textInput3{ left:10; right:65; top:68; }です。 textinput3 （左： 10 ;右： 65 ;トップへ： 68 ; ）

.label4{ width:10; top:100; right:10; }です。 label4 （幅： 10 ;トップへ： 100 ;右： 10 ; ）
.textInput4{ left:10; right:65; top:98; }です。 textinput4 （左： 10 ;右： 65 ;トップへ： 98 ; ）

.label5{ width:10; top:130; right:10; }です。 label5 （幅： 10 ;トップへ： 130 ;右： 10 ; ）
.textInput5{ left:10; right:65; top:128; }です。 textinput5 （左： 10 ;右： 65 ;トップへ： 128 ; ）

.button1{ width:30; bottom:10; left: 80; }です。 Button1の（幅： 30 ;下： 10 ;左： 80 ; ）
.button2{ width:60; bottom:10; left: 10; }です。 Button2の（幅： 60 ;下： 10 ;左： 10 ; ）

</mx:Style> < / MXの：スタイル>

<mx:Panel title=”Flex Demo - 2 CSS Style Layout (alternate)” < MXの：パネルのタイトル= " Flexのデモ-2 C SSスタイルのレイアウト（代替） "
paddingBottom=”10″ paddingLeft=”10″ paddingTop=”10″ paddingRight=”10″ paddingbottom = " 10 " paddingleft = " 10 " paddingtop = " 10 " paddingright = " 10 "
layout=”absolute” height=”233″>レイアウト= "絶対的な"高さ= " 233 " >

<mx:Label text=”Field 1″ styleName=”label1″ /> <mx:label text="field 1" stylename="label1" />
<mx:TextInput styleName=”textInput1″ /> <mx:textinput stylename="textinput1" />

<mx:Label text=”Field 2″ styleName=”label2″ /> <mx:label text="field 2" stylename="label2" />
<mx:TextInput styleName=”textInput2″ /> <mx:textinput stylename="textinput2" />

<mx:Label text=”Field 3″ styleName=”label3″ /> <mx:label text="field 3" stylename="label3" />
<mx:TextInput styleName=”textInput3″ /> <mx:textinput stylename="textinput3" />

<mx:Label text=”Field 4″ styleName=”label4″ /> <mx:label text="field 4" stylename="label4" />
<mx:TextInput styleName=”textInput4″ /> <mx:textinput stylename="textinput4" />

<mx:Label text=”Field 5″ styleName=”label5″ /> <mx:label text="field 5" stylename="label5" />
<mx:TextInput styleName=”textInput5″ /> <mx:textinput stylename="textinput5" />

<mx:Button label=”OK” styleName=”button1″ /> <mx:button label="ok" stylename="button1" />
<mx:Button label=”Cancel” styleName=”button2″ /> <mx:button label="cancel" stylename="button2" />

</mx:Panel> < / MXの：パネル>

</mx:Application> < / MXの：アプリケーション>

因为位置绑定（如同其它的绑定一样）是相对于其所在容器的，如果所在容器的大小改变了，该容器的大小也会随之改变（看图5）。ための場所を結合（結合として、他の）これは相対してコンテナのサイズを変更された場合は、このコンテナは、コンテナのサイズを変更しても（プラグ5 ） 。 图4和图5之间唯一的区别就是<mx:Panel>容器的宽度增加了。フィギュア4と5の違いだけの幅を増やす<mx: panel>のコンテナを作成します。

图5.改变有位置限定的元素的大小 図5 。を変更するに位置する要素のサイズを制限する

不要因此产生误解。したがって誤解を招くはありません。 HBoxe, Vboxe，以及根据x,y定位的Canvas并不是没有用了，它们在Flex库中是很有用的组件而且使用起来依然方便。 hboxe 、 vboxe 、およびよるをX 、 Yロケーションは、キャンバスが使用され、彼らのFlexライブラリが非常に役に立つのコンポーネントを使用するとまだ便利です。 不同的是你将不再是只能依赖它们。違いは、することができなくてのみに依存しています。 Hbox和VBox在将组件相邻放置的时候依然很有用。車速計VBOX hboxに置かれると、隣接するコンポーネントは、静止時に役に立つ。 现在，你可以容易地使用CSS定位将一个HBox绑定到屏幕的特定位置。今すぐ、簡単に使用することができます。 hbox CSSポジショニングでは、同梱の特定の場所には、画面を表示します。

图6.使用混合方式创建的复杂布局 図6 。ハイブリッド複雑なレイアウトを作成するに使われている方法

图6所示的程序布局更加接近现实中程序的布局。のレイアウトを図6に示すのは、現実のプロセスに近いレイアウトのプロセスです。 图6使用了一系列基于容器的布局和CSS定位来快速可靠地将控件定位到一起。図6を使用して、一連のコンテナのレイアウトとCSSのポジショニングを迅速かつ信頼性を制御するようにして、ターゲットを絞った一緒にされる。 在左边是一个TabNavigator控件，它使用CSS定位将它的边框绑定到Panel容器的边框。上の左には、 TabNavigatorコンテナコントロール、それが使用さCSSポジショニングの国境パネルの容器との国境にバインドされています。 DateChooser和DataGrid使用CSS定位绑定到TabNavigator受其约束。 CSSポジショニングdatechooserして使用されるデータグリッドにバインドされてTabNavigatorコンテナにバインドします。 还有一个VBox控件使用CSS定位将自己绑定在右边界。また、車速計VBOX CSSポジショニングでの使用を制御し、右側のセクター自分自身にバンドルさです。 这个VBox控件包含了一系列CheckBox控件。車速計VBOXし、コントロールには、シリーズのチェックボックスをコントロールします。 尽管这个例子是静态编码的，但是这一系列的CheckBox控件可以在运行时根据数据源的记录个数动态添加。この例では、静的なコードが、このシリーズのチェックボックスをコントロールできるの記録を実行するに基づいてデータソースの数を動的に追加します。 使用VBox控件允许你利用VBox的逻辑来管理动态的CheckBox。車速計VBOX使用するコントロールを使用することを管理する動的なロジックを使用する]チェックボックスを車速計VBOXです。 下面是图6所示程序的代码： 、以下の手順を図6に示すコード：

<?xml version=”1.0″ encoding=”utf-8″?> <ですか？ XMLのバージョン= " 1.0 "エンコーディング=は" utf - 8 "ですか？ >
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”> <mx:Style> <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:style>
.panel {です。パネル（
top: 10;トップへ： 10 ;
bottom:10;下： 10 ;
left:10;左： 10 ;
right:10;右： 10 ;
} ）

.tabnav {です。 tabnav （
top: 10;トップへ： 10 ;
bottom:10;下： 10 ;
left:10;左： 10 ;
right:130;右： 130 ;
} ）

.dg {です。 dg （
top: 10;トップへ： 10 ;
bottom:10;下： 10 ;
left:10;左： 10 ;
right:192;右： 192 ;
} ）

.dc {です。直流（
top: 10;トップへ： 10 ;
right: 10;右： 10 ;
} ）

.vbox {です。車速計VBOX （
top: 30;トップへ： 30 ;
bottom:10;下： 10 ;
right:10;右： 10 ;
} ）
</mx:Style> < / MXの：スタイル>

<mx:Panel < MXの：パネル
title=”Complex Layout Using Mixed Approach”タイトル= "複雑なレイアウトを使用して混合アプローチ"
layout=”absolute” styleName=”panel”>レイアウト= "絶対的な" stylename = "パネル" >

<mx:TabNavigator styleName=”tabnav”> <mx:tabnavigator stylename="tabnav">

<mx:Canvas label=”Canvas” width=”100%” height=”100%”> <mx:canvas label="canvas" width="100%" height="100%">

<mx:DataGrid styleName=”dg”> <mx:datagrid stylename="dg">
<mx:columns>
<mx:DataGridColumn headerText=”Column 1″ /> <mx:datagridcolumn headertext="column 1" />
<mx:DataGridColumn headerText=”Column 2″ /> <mx:datagridcolumn headertext="column 2" />
<mx:DataGridColumn headerText=”Column 3″ /> <mx:datagridcolumn headertext="column 3" />
</mx:columns> < / MXの：列" >
</mx:DataGrid> < / MXの：データグリッド>

<mx:DateChooser styleName=”dc”/> <mx:datechooser stylename="dc"/>

</mx:Canvas> < / MXの：キャンバス>

<mx:HBox label=”HBox” width=”100%” height=”100%” /> <mx:hbox label="hbox" width="100%" height="100%" />

<mx:VBox label=”VBox” width=”100%” height=”100%” /> <mx:vbox label="vbox" width="100%" height="100%" />

</mx:TabNavigator> < / MXの： TabNavigatorコンテナ>

<mx:VBox width=”110″ verticalGap=”3″ styleName=”vbox”> <mx:vbox width="110" verticalgap="3" stylename="vbox">

<mx:CheckBox label=”Checkbox 1″/> <mx:checkbox label="checkbox 1"/>
<mx:CheckBox label=”Checkbox 2″/> <mx:checkbox label="checkbox 2"/>
<mx:CheckBox label=”Checkbox 3″/> <mx:checkbox label="checkbox 3"/>
<mx:CheckBox label=”Checkbox 4″/> <mx:checkbox label="checkbox 4"/>
<mx:CheckBox label=”Checkbox 5″/> <mx:checkbox label="checkbox 5"/>
<mx:CheckBox label=”Checkbox 6″/> <mx:checkbox label="checkbox 6"/>
<mx:CheckBox label=”Checkbox 7″/> <mx:checkbox label="checkbox 7"/>
<mx:CheckBox label=”Checkbox 8″/> <mx:checkbox label="checkbox 8"/>
<mx:CheckBox label=”Checkbox 9″/> <mx:checkbox label="checkbox 9"/>
<mx:CheckBox label=”Checkbox 10″/> <mx:checkbox label="checkbox 10"/>

</mx:VBox> < / MXの：車速計VBOX >

</mx:Panel> < / MXの：パネル>

</mx:Application> < / MXの：アプリケーション>

简而言之，使用Adobe Flex可以有很多方式来创建迷人并且丰富的程序。手短に言えば、使用することもでき、多くの点ではAdobeのFlexを作成するに魅力的と豊かなプログラムです。 使用Flex 2中的CSS样式引擎可以创建更灵活/较简单/强度小的布局，而且实现了编码和设计的更大层次的分离。 Flex 2で使用するエンジンは、 CSSスタイルを作ることもできますより柔軟な/単純な/強度のレイアウトが小さい、との符号化とデザインの分離レベルを達成するために大きい。 紧记，这些不是Flex 2所能做的全部，这只不过是冰山一角而已。これらはないことを心にとめFlex 2でできることのすべてのこれは氷山の一角のみです。 请关注我们其它将要发布的文章，我们将在其中更加深入地讲解视图状态和过渡、远程过程调用和data services、以及加载皮肤和可视化。その他のご懸念を私たちの文書を公開したいでは我々は徹底的に再生回数上の他の国家との移行過程での長距離通話およびデータサービスだけでなく、皮膚の可視化と読み込んでいます。

分享收藏 共有コレクション