1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
5
<link rel="stylesheet" href="../../../../../style.css" type="text/css" media="screen">
6
<link rel="stylesheet" href="../../../../../print.css" type="text/css" media="print">
7
<meta content="BoxLayout,com.yahoo.astra.layout.modes.BoxLayout,direction,horizontalAlign,horizontalGap,verticalAlign,verticalGap,layoutObjects" name="keywords">
8
<title>com.yahoo.astra.layout.modes.BoxLayout</title>
11
<script type="text/javascript" language="javascript" src="../../../../../asdoc.js"></script><script type="text/javascript" language="javascript" src="../../../../../cookies.js"></script><script type="text/javascript" language="javascript">
13
asdocTitle = 'BoxLayout - YUI Flash Component Documentation';
14
var baseRef = '../../../../../';
15
window.onload = configPage;
17
<table style="display:none" id="titleTable" cellspacing="0" cellpadding="0" class="titleTable">
19
<td align="left" class="titleTableTitle">YUI Flash Component Documentation</td><td align="right" class="titleTableTopNav"><a onclick="loadClassListFrame('../../../../../all-classes.html')" href="../../../../../package-summary.html">All Packages</a> | <a onclick="loadClassListFrame('../../../../../all-classes.html')" href="../../../../../class-summary.html">All Classes</a> | <a onclick="loadClassListFrame('../../../../../index-list.html')" href="../../../../../all-index-A.html">Index</a> | <a href="../../../../../index.html?com/yahoo/astra/layout/modes/BoxLayout.html&com/yahoo/astra/layout/modes/class-list.html" id="framesLink1">Frames</a><a onclick="parent.location=document.location" href="" style="display:none" id="noFramesLink1">No Frames</a></td><td rowspan="3" align="right" class="titleTableLogo"><img alt="Adobe Logo" title="Adobe Logo" class="logoImage" src="../../../../../images/logo.jpg"></td>
21
<tr class="titleTableRow2">
22
<td align="left" id="subTitle" class="titleTableSubTitle">Class BoxLayout</td><td align="right" id="subNav" class="titleTableSubNav"><a href="#propertySummary">Properties</a> | <a href="#methodSummary">Methods</a></td>
24
<tr class="titleTableRow3">
25
<td colspan="2"> </td>
28
<script type="text/javascript" language="javascript">
30
if (!isEclipse() || window.name != ECLIPSE_FRAME_NAME) {titleBar_setSubTitle("Class BoxLayout"); titleBar_setSubNav(false,true,false,false,false,false,true,false,false,false,false,false,false,false);}
32
<div class="MainContent">
33
<table cellspacing="0" cellpadding="0" class="classHeaderTable">
35
<td class="classHeaderTableLabel">Package</td><td><a onclick="javascript:loadClassListFrame('class-list.html')" href="package-detail.html">com.yahoo.astra.layout.modes</a></td>
38
<td class="classHeaderTableLabel">Class</td><td class="classSignature">public class BoxLayout</td>
41
<td class="classHeaderTableLabel">Inheritance</td><td class="inheritanceList">BoxLayout <img class="inheritArrow" alt="Inheritance" title="Inheritance" src="../../../../../images/inherit-arrow.gif"> <a href="BaseLayoutMode.html">BaseLayoutMode</a> <img class="inheritArrow" alt="Inheritance" title="Inheritance" src="../../../../../images/inherit-arrow.gif"> flash.events.EventDispatcher</td>
44
<td class="classHeaderTableLabel">Implements</td><td><a href="IAdvancedLayoutMode.html">IAdvancedLayoutMode</a></td>
48
Arranges a DisplayObjectContainer's children in a single column or row.
52
<span class="label">Example</span>
53
<br>The following code configures a BoxLayout instance and passes it to a container:
54
<div class='listing'><pre>
55
var box:BoxLayout = new BoxLayout();
56
box.direction = "vertical";
58
box.verticalAlign = VerticalAlignment.MIDDLE;
60
var container:LayoutContainer = new LayoutContainer();
61
container.layoutMode = box;
62
this.addChild( container );
65
<p><strong>Advanced Client Options:</strong></p>
66
<p>Optional client configuration parameters allow a developer to specify
67
behaviors for individual children of the target container. To set these
68
advanced options, one must call <code>addClient()</code> on the BoxLayout
69
instance and pass the child to configure along with an object specifying
70
the configuration parameters. Several client parameters are available to
71
the BoxLayout algorithm:</p>
74
<dt><strong><code>percentWidth</code></strong> : Number</dt>
75
<dd>The target's width will be updated based on a percentage of the width specified in the layout bounds.</dd>
76
<dt><strong><code>percentHeight</code></strong> : Number</dt>
77
<dd>The target's width will be updated based on a percentage of the width specified in the layout bounds.</dd>
78
<dt><strong><code>minWidth</code></strong> : Number</dt>
79
<dd>The minimum width value to allow when resizing. The default value is <code>0</code>.</dd>
80
<dt><strong><code>minHeight</code></strong> : Number</dt>
81
<dd>The minimum height value to allow when resizing. The default value is <code>0</code>.</dd>
82
<dt><strong><code>maxWidth</code></strong> : Number</dt>
83
<dd>The maximum width value to allow when resizing. The default value is <code>10000</code>.</dd>
84
<dt><strong><code>maxHeight</code></strong> : Number</dt>
85
<dd>The maximum height value to allow when resizing. The default value is <code>10000</code>.</dd>
86
<dt><strong><code>includeInLayout</code></strong> : Boolean</dt>
87
<dd>If <code>false</code>, the target will not be included in layout calculations. The default value is <code>true</code>.</dd>
90
<p></p>The following code adds multiple clients to a BoxLayout instance:
91
<div class='listing'><pre>
92
var box:BoxLayout = new BoxLayout();
93
box.direction = "vertical";
94
box.addClient( headerSprite, { percentWidth: 100 } );
95
box.addClient( contentSprite,
102
box.addClient( footerSprite, { percentWidth: 100 } );
104
var container:LayoutContainer = new LayoutContainer( box );
105
container.width = 1024;
106
container.height = 768;
107
container.addChild( headerSprite );
108
container.addChild( contentSprite );
109
container.addChild( footerSprite );
110
this.addChild( container );
115
<span class="classHeaderTableLabel">See also</span>
117
<div class="seeAlso">
118
<a href="../../layout/LayoutContainer.html" target="">com.yahoo.astra.layout.LayoutContainer</a>
123
<a name="propertySummary"></a>
124
<div class="summarySection">
125
<div class="summaryTableTitle">Public Properties</div>
126
<div class="showHideLinks">
127
<div class="hideInheritedProperty" id="hideInheritedProperty">
128
<a onclick="javascript:setInheritedVisible(false,'Property');" href="#propertySummary" class="showHideLink"><img src="../../../../../images/expanded.gif" class="showHideLinkImage"> Hide Inherited Public Properties</a>
130
<div class="showInheritedProperty" id="showInheritedProperty">
131
<a onclick="javascript:setInheritedVisible(true,'Property');" href="#propertySummary" class="showHideLink"><img src="../../../../../images/collapsed.gif" class="showHideLinkImage"> Show Inherited Public Properties</a>
134
<table id="summaryTableProperty" class="summaryTable " cellpadding="3" cellspacing="0">
136
<th> </th><th colspan="2">Property</th><th class="summaryTableOwnerCol">Defined by</th>
139
<td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#direction">direction</a> : String<div class="summaryTableDescription">
140
The direction in which children of the target are laid out.</div>
141
</td><td class="summaryTableOwnerCol">BoxLayout</td>
144
<td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#horizontalAlign">horizontalAlign</a> : String<div class="summaryTableDescription">
145
The horizontal alignment of children displayed in the target.</div>
146
</td><td class="summaryTableOwnerCol">BoxLayout</td>
149
<td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#horizontalGap">horizontalGap</a> : Number<div class="summaryTableDescription">
150
The number of pixels appearing between the target's children
152
</td><td class="summaryTableOwnerCol">BoxLayout</td>
154
<tr class="hideInheritedProperty">
155
<td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img class="inheritedSummaryImage" title="Inherited" alt="Inherited" src="../../../../../images/inheritedSummary.gif"></td><td class="summaryTableSignatureCol"><a class="signatureLink" href="BaseLayoutMode.html#paddingBottom">paddingBottom</a> : Number<div class="summaryTableDescription">
156
The number of pixels displayed at the bottom of the target's children.</div>
157
</td><td class="summaryTableOwnerCol"><a href="BaseLayoutMode.html">BaseLayoutMode</a></td>
159
<tr class="hideInheritedProperty">
160
<td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img class="inheritedSummaryImage" title="Inherited" alt="Inherited" src="../../../../../images/inheritedSummary.gif"></td><td class="summaryTableSignatureCol"><a class="signatureLink" href="BaseLayoutMode.html#paddingLeft">paddingLeft</a> : Number<div class="summaryTableDescription">
161
The number of pixels displayed at the left of the target's children.</div>
162
</td><td class="summaryTableOwnerCol"><a href="BaseLayoutMode.html">BaseLayoutMode</a></td>
164
<tr class="hideInheritedProperty">
165
<td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img class="inheritedSummaryImage" title="Inherited" alt="Inherited" src="../../../../../images/inheritedSummary.gif"></td><td class="summaryTableSignatureCol"><a class="signatureLink" href="BaseLayoutMode.html#paddingRight">paddingRight</a> : Number<div class="summaryTableDescription">
166
The number of pixels displayed at the right of the target's children.</div>
167
</td><td class="summaryTableOwnerCol"><a href="BaseLayoutMode.html">BaseLayoutMode</a></td>
169
<tr class="hideInheritedProperty">
170
<td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img class="inheritedSummaryImage" title="Inherited" alt="Inherited" src="../../../../../images/inheritedSummary.gif"></td><td class="summaryTableSignatureCol"><a class="signatureLink" href="BaseLayoutMode.html#paddingTop">paddingTop</a> : Number<div class="summaryTableDescription">
171
The number of pixels displayed at the top of the target's children.</div>
172
</td><td class="summaryTableOwnerCol"><a href="BaseLayoutMode.html">BaseLayoutMode</a></td>
175
<td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#verticalAlign">verticalAlign</a> : String<div class="summaryTableDescription">
176
The vertical alignment of children displayed in the target.</div>
177
</td><td class="summaryTableOwnerCol">BoxLayout</td>
180
<td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#verticalGap">verticalGap</a> : Number<div class="summaryTableDescription">
181
The number of pixels appearing between the target's children
183
</td><td class="summaryTableOwnerCol">BoxLayout</td>
187
<a name="methodSummary"></a>
188
<div class="summarySection">
189
<div class="summaryTableTitle">Public Methods</div>
190
<div class="showHideLinks">
191
<div class="hideInheritedMethod" id="hideInheritedMethod">
192
<a onclick="javascript:setInheritedVisible(false,'Method');" href="#methodSummary" class="showHideLink"><img src="../../../../../images/expanded.gif" class="showHideLinkImage"> Hide Inherited Public Methods</a>
194
<div class="showInheritedMethod" id="showInheritedMethod">
195
<a onclick="javascript:setInheritedVisible(true,'Method');" href="#methodSummary" class="showHideLink"><img src="../../../../../images/collapsed.gif" class="showHideLinkImage"> Show Inherited Public Methods</a>
198
<table id="summaryTableMethod" class="summaryTable " cellpadding="3" cellspacing="0">
200
<th> </th><th colspan="2">Method</th><th class="summaryTableOwnerCol">Defined by</th>
203
<td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol">
204
<div class="summarySignature">
205
<a class="signatureLink" href="#BoxLayout()">BoxLayout</a>()</div>
206
<div class="summaryTableDescription">
208
</td><td class="summaryTableOwnerCol">BoxLayout</td>
210
<tr class="hideInheritedMethod">
211
<td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img class="inheritedSummaryImage" title="Inherited" alt="Inherited" src="../../../../../images/inheritedSummary.gif"></td><td class="summaryTableSignatureCol">
212
<div class="summarySignature">
213
<a class="signatureLink" href="BaseLayoutMode.html#addClient()">addClient</a>(target:DisplayObject, configuration:Object = null):void</div>
214
<div class="summaryTableDescription">
216
Registers a specific display object with the layout algorithm.</div>
217
</td><td class="summaryTableOwnerCol"><a href="BaseLayoutMode.html">BaseLayoutMode</a></td>
219
<tr class="hideInheritedMethod">
220
<td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img class="inheritedSummaryImage" title="Inherited" alt="Inherited" src="../../../../../images/inheritedSummary.gif"></td><td class="summaryTableSignatureCol">
221
<div class="summarySignature">
222
<a class="signatureLink" href="BaseLayoutMode.html#hasClient()">hasClient</a>(target:DisplayObject):Boolean</div>
223
<div class="summaryTableDescription">
225
Returns true if a display object has been registered as a client.</div>
226
</td><td class="summaryTableOwnerCol"><a href="BaseLayoutMode.html">BaseLayoutMode</a></td>
229
<td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"> </td><td class="summaryTableSignatureCol">
230
<div class="summarySignature">
231
<a class="signatureLink" href="#layoutObjects()">layoutObjects</a>(displayObjects:Array, bounds:Rectangle):Rectangle</div>
232
<div class="summaryTableDescription">
235
The DisplayObjects in the input parameter will be positioned and sized
236
based on a specified rectangle.</div>
237
</td><td class="summaryTableOwnerCol">BoxLayout</td>
239
<tr class="hideInheritedMethod">
240
<td class="summaryTablePaddingCol"> </td><td class="summaryTableInheritanceCol"><img class="inheritedSummaryImage" title="Inherited" alt="Inherited" src="../../../../../images/inheritedSummary.gif"></td><td class="summaryTableSignatureCol">
241
<div class="summarySignature">
242
<a class="signatureLink" href="BaseLayoutMode.html#removeClient()">removeClient</a>(target:DisplayObject):void</div>
243
<div class="summaryTableDescription">
245
Unregisters a specific display object from the layout algorithm.</div>
246
</td><td class="summaryTableOwnerCol"><a href="BaseLayoutMode.html">BaseLayoutMode</a></td>
250
<script type="text/javascript" language="javascript">
254
<div class="MainContent">
255
<a name="propertyDetail"></a>
256
<div class="detailSectionHeader">Property detail</div>
257
<a name="direction"></a>
258
<table cellspacing="0" cellpadding="0" class="detailHeader">
260
<td class="detailHeaderName">direction</td><td class="detailHeaderType">property</td>
263
<div class="detailBody">
264
<code>direction:String</code> [read-write]<p>
265
The direction in which children of the target are laid out. Valid
266
direction values include <code>"vertical"</code> or <code>"horizontal"</code>.
267
</p><span class="label">Implementation</span>
269
<code> public function get direction():String</code>
271
<code> public function set direction(value:String):void</code>
274
<a name="horizontalAlign"></a>
275
<table cellspacing="0" cellpadding="0" class="detailHeader">
277
<td class="detailHeaderName">horizontalAlign</td><td class="detailHeaderType">property</td><td class="detailHeaderRule"> </td>
280
<div class="detailBody">
281
<code>horizontalAlign:String</code> [read-write]<p>
282
The horizontal alignment of children displayed in the target.
284
</p><span class="label">Implementation</span>
286
<code> public function get horizontalAlign():String</code>
288
<code> public function set horizontalAlign(value:String):void</code>
291
<span class="label">See also</span>
293
<div class="seeAlso">
294
<a href="HorizontalAlignment.html" target="">HorizontalAlignment</a>
297
<a name="horizontalGap"></a>
298
<table cellspacing="0" cellpadding="0" class="detailHeader">
300
<td class="detailHeaderName">horizontalGap</td><td class="detailHeaderType">property</td><td class="detailHeaderRule"> </td>
303
<div class="detailBody">
304
<code>horizontalGap:Number</code> [read-write]<p>
305
The number of pixels appearing between the target's children
307
</p><span class="label">Implementation</span>
309
<code> public function get horizontalGap():Number</code>
311
<code> public function set horizontalGap(value:Number):void</code>
314
<a name="verticalAlign"></a>
315
<table cellspacing="0" cellpadding="0" class="detailHeader">
317
<td class="detailHeaderName">verticalAlign</td><td class="detailHeaderType">property</td><td class="detailHeaderRule"> </td>
320
<div class="detailBody">
321
<code>verticalAlign:String</code> [read-write]<p>
322
The vertical alignment of children displayed in the target.
324
</p><span class="label">Implementation</span>
326
<code> public function get verticalAlign():String</code>
328
<code> public function set verticalAlign(value:String):void</code>
331
<span class="label">See also</span>
333
<div class="seeAlso">
334
<a href="VerticalAlignment.html" target="">VerticalAlignment</a>
337
<a name="verticalGap"></a>
338
<table cellspacing="0" cellpadding="0" class="detailHeader">
340
<td class="detailHeaderName">verticalGap</td><td class="detailHeaderType">property</td><td class="detailHeaderRule"> </td>
343
<div class="detailBody">
344
<code>verticalGap:Number</code> [read-write]<p>
345
The number of pixels appearing between the target's children
347
</p><span class="label">Implementation</span>
349
<code> public function get verticalGap():Number</code>
351
<code> public function set verticalGap(value:Number):void</code>
354
<a name="constructorDetail"></a>
355
<div class="detailSectionHeader">Constructor detail</div>
356
<a name="BoxLayout()"></a>
357
<table cellspacing="0" cellpadding="0" class="detailHeader">
359
<td class="detailHeaderName">BoxLayout</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">constructor</td>
362
<div class="detailBody">
363
<code>public function BoxLayout()</code><p>
366
<a name="methodDetail"></a>
367
<div class="detailSectionHeader">Method detail</div>
368
<a name="layoutObjects()"></a>
369
<table cellspacing="0" cellpadding="0" class="detailHeader">
371
<td class="detailHeaderName">layoutObjects</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td>
374
<div class="detailBody">
375
<code>public override function layoutObjects(displayObjects:Array, bounds:Rectangle):Rectangle</code><p>
378
The DisplayObjects in the input parameter will be positioned and sized
379
based on a specified rectangle. There is no requirement that the
380
display objects remain entirely within the rectangle.
382
</p><p>Returns the actual rectangular region in which the laid out
383
children will appear. This may be larger or smaller than the
384
suggested rectangle. This returned value is expected to be used by
385
container components to determine if scrollbars or other navigation
386
controls are needed.</p>
388
<span class="label">Parameters</span>
389
<table border="0" cellspacing="0" cellpadding="0">
391
<td width="20px"></td><td><code><span class="label">displayObjects</span>:Array</code> — An Array of DisplayObjects to be laid out.
395
<td class="paramSpacer"> </td>
398
<td width="20px"></td><td><code><span class="label">bounds</span>:Rectangle</code> — The rectangular region in which the display objects should be placed.
403
<span class="label">Returns</span>
404
<table border="0" cellspacing="0" cellpadding="0">
406
<td width="20"></td><td><code>Rectangle</code> — The actual region in which the display objects are contained.
416
<center class="copyright">