<mx:Canvas>
tag inherits all the tag attributes
of its superclass. Use the following syntax:
<mx:Canvas> ... child tags ... </mx:Canvas>]]>
Примечание. Adobe рекомендует вместо контейнеров Halo Canvas использовать по возможности контейнеры Spark с BasicLayout.
Flex устанавливает нижестоящие элементы контейнера макетов Canvas с предпочтительной шириной и предпочтительной высотой. Значение для предпочтительной ширины нижестоящего элемента можно отменить путем установки для свойства
При использовании в контейнере Canvas процентного значения некоторые компоненты могут перекрываться. Если необходимо этого избежать, тщательно планируйте позиции и размеры компонентов.
Контейнер Canvas имеет следующие характеристики размеров по умолчанию:
Значение
Значения свойств контейнера Canvas
Значения свойств контейнера Canvas
Все описанные выше значения являются измеренными значениями ширины и высоты контейнера Canvas. Пользователь может отменить измеренные значения путем явного предоставления значений для следующих свойств:
Этот метод не вызывается напрямую. Он вызывается в соответствующий момент посредством Flex LayoutManager. При запуске приложения Flex LayoutManager перед установкой окончательных размеров выполняет попытку измерить все компоненты от нижестоящих до вышестоящих.
Этот расширенный метод рекомендуется использовать при обработке подклассов. При отмене этого метода реализация должна выполнить вызов метода
Контейнер Canvas не изменяет позиции своих нижестоящих элементов. Каждый нижестоящий элемент размещается в соответствии со значениями свойств
Контейнер Canvas устанавливает ширину и высоту каждого нижестоящего элемента в соответствии со значениями свойств
Этот метод не вызывается напрямую. Он вызывается в соответствующий момент посредством Flex LayoutManager. При запуске приложения Flex LayoutManager выполняет вызов метода
Этот расширенный метод рекомендуется использовать при обработке подклассов. При отмене этого метода реализация должна выполнить вызов методов
<mx:DividedBox>
tag inherits all of the tag
attributes of its superclass, and adds the following tag attributes:
<mx:DividedBox Properties liveDragging="false|true" resizeToContent="false|true" Styles dividerAffordance="6" dividerAlpha="0.75" dividerColor="0x6F7777" dividerSkin="'mx.skins.BoxDividerSkin' symbol in Assets.swf" dividerThickness="3" horizontalDividerCursor="'mx.skins.cursor.HBoxDivider' symbol in Assets.swf" verticalDividerCursor="'mx.skins.cursor.VBoxDivider' symbol in Assets.swf" Events dividerPress="No default" dividerDrag="No default" dividerRelease="No default" > ... child tags ... </mx:DividedBox>]]>
Класс DividedBox является базовым классом для более часто используемых классов HDividedBox и VDividedBox.
Свойство
Контейнеры DividedBox, HDividedBox или VDividedBox имеют следующие характеристики размеров по умолчанию:
<mx:ApplicationControlBar>
tag
inherits all of the tag attributes of its superclass, and adds the
following tag attributes.
Unlike the ControlBar container, it is possible to set the
backgroundColor
style for an ApplicationControlBar
container.
<mx:ApplicationControlBar Properties dock="false|true" Styles fillAlphas="[0, 0]" fillColors="[0xFFFFFF, 0xFFFFFF]" > ... child tags ... </mx:ApplicationControlBar>]]>
Примечание. Контейнер Spark Application не поддерживает контейнер ApplicationControlBar. Для добавления этой функции измените тему оформления контейнера Spark Application.
Контейнер ApplicationControlBar может находиться в любом из следующих режимов:
Для контейнера ApplicationControlBar по умолчанию установлены следующие характеристики размеров:
<mx:HDividedBox>
tag inherits all of the tag
attributes of its superclass except direction
and adds
no new tag attributes.
]]>Контейнер HDividedBox имеет следующие характеристики размеров по умолчанию:
<mx:Grid>
tag inherits all of the tag
attributes of its superclass, except the Box.direction
property, and adds the following tag attributes:
<mx:Grid Styles horizontalGap="8" verticalGap="6" > ... These child tags are examples only: <mx:GridRow id="row1"> <mx:GridItem rowSpan="1" colSpan="1"> <mx:Button label="Button 1"/> </mx:GridItem> ... </mx:GridRow> ... </mx:Grid>]]>
Все ячейки в одной строке имеют одинаковую высоту, но высота каждой строки может быть различной. Все ячейки в одной строке имеют одинаковую ширину, но каждый столбец может иметь различную ширину. Для каждой строки или каждого столбца контейнера Grid можно определить разное количество ячеек. Кроме того, ячейка может включать несколько столбцов или строк контейнера.
Контейнеры Grid, GridRow и GridItem имеют следующие характеристики размеров по умолчанию:
Этот метод не вызывается напрямую; он является расширенным методом для использования в подклассах. Вызов метода
Для получения представления о вычислении измерений контейнером Grid предположим, что в каждом контейнере GridItem для свойств
Значения свойств
Если для контейнера GridItem свойство
Однако свойство
Все описанные выше значения представляют собой измеренные значения ширины и высоты контейнера Grid. Пользователь может отменить измеренные значения путем явного ввода значений для следующих свойств:
При отмене этого метода реализация должна выполнить вызов метода
Эти свойства соответствуют описанным выше свойствам макетов, поэтому их отдельное описание не приводится.
Этот метод не вызывается напрямую; он является расширенным методом для использования в подклассах. Вызов метода
Для контейнера Grid выполняются те же правила создания макетов, что и для контейнера VBox. Позиции и размеры контейнеров GridRow определяются так же, как позиции и размеры нижестоящих элементов контейнера VBox. Аналогично, контейнер GridRow размещает свои контейнеры GridItem с использованием подобного алгоритма создания макетов контейнера HBox.
Единственным различием является то, что контейнеры GridRow связаны друг с другом и, таким образом, они все выбирают одни и те же позиции и размеры для своих нижестоящих элементов (для выравнивания столбцов контейнера Grid).
При отмене этого метода реализация должна выполнить вызов методов
<mx:TabNavigator>
tag inherits all of the
tag attributes of its superclass,
and adds the following tag attributes:
<mx:TabNavigator Styles firstTabStyleName="Value of the]]>tabStyleName
property" focusAlpha="0.4" focusRoundedCorners="tl tr bl br" horizontalAlign="left|center|right" horizontalGap="-1" lastTabStyleName="Value of thetabStyleName
property" selectedTabTextStyleName="undefined" tabHeight="undefined" tabOffset="0" tabStyleName="Name of CSS style declaration that specifies styles for the tabs" tabWidth="undefined" > ... child tags ... </mx:TabNavigator>
Примечание. Прямые нижестоящие элементы контейнера навигатора MX должны быть контейнерами MX (контейнерами макета MX или навигатора MX) или контейнером Spark NavigatorContent. В навигатор невозможно вложить элемент управления или контейнер Spark, не являющийся контейнером Spark NavigatorContent, напрямую. Вложения должны быть нижестоящими элементами нижестоящего контейнера MX.
Аналогично контейнеру ViewStack, контейнер TabNavigator имеет коллекцию нижестоящих контейнеров, в которых в конкретный момент отображается только один нижестоящий элемент. Flex автоматически создает контейнер TabBar в верхней области контейнера TabNavigator, при этом каждому нижестоящему контейнеру соответствует своя вкладка. Каждая вкладка может иметь собственную метку и значок. При выборе вкладки пользователем соответствующий нижестоящий контейнер становится видимым и отображается как выбранный нижестоящий элемент из контейнера TabNavigator.
При изменении видимого в данный момент нижестоящего контейнера можно использовать свойство
Для определения внешнего вида вкладок в TabNavigator используются свойства стиля в селекторе типа вкладки Tab, как показано в примере:
<fx:Style> @namespace mx "library://ns.adobe.com/flex/mx" mx|Tab { fillColors: #006699, #cccc66; upSkin: ClassReference("CustomSkinClass"); overSkin: ClassReference("CustomSkinClass"); downSkin: ClassReference("CustomSkinClass"); } </fx:Style>
Селектор типа Tab определяет значения в скрытом классе mx.controls.tabBarClasses.Tab. Значения по умолчанию для селектора типа Tab определены в файле defaults.css.
С помощью свойства стиля
<fx:Style> @namespace mx "library://ns.adobe.com/flex/mx" mx|TabNavigator { tabStyleName:myTabStyle; } .myTabStyle { fillColors: #006699, #cccc66; upSkin: ClassReference("CustomSkinClass"); overSkin: ClassReference("CustomSkinClass"); downSkin: ClassReference("CustomSkinClass"); } </fx:Style>
Контейнер TabNavigator имеет следующие характеристики размеров по умолчанию:
Контейнер TabNavigator использует ту же логику измерения, что и контейнер
Контейнер TabNavigator размещает контейнер TabBar в своей верхней области. Ширина TabBar устанавливается по ширине TabNavigator, а высота TabBar определяется на основе значения свойства
Контейнер TabNavigator определяет для своих нижестоящих элементов позиции и размеры под TabBar с использованием той же логики, что и в контейнере ViewStack.
<mx:HBox>
tag inherits all of the tag
attributes of its superclass, except direction
, and adds
no new tag attributes.
]]>Примечание. Adobe рекомендует по возможности использовать с HorizontalLayout контейнеры Spark, а не контейнер HBox.
Контейнер HBox имеет следующие характеристики размеров по умолчанию:
<mx:VBox>
tag inherits all of the tag
attributes of its superclass, except direction
, and adds
no new tag attributes.
]]>Примечание. Adobe рекомендует по возможности использовать с VerticalLayout контейнеры Spark, а не контейнер Halo VBox.
Контейнер VBox имеет следующие характеристики размеров по умолчанию:
<mx:TitleWindow>
tag inherits all of the tag
attributes of its superclass, and adds the following tag attributes:
<mx:TitleWindow Properties showCloseButton="false|true" Styles closeButtonDisabledSkin="'CloseButtonDisabled' symbol in Assets.swf" closeButtonDownSkin="'CloseButtonDown' symbol in Assets.swf" closeButtonOverSkin="'CloseButtonOver' symbol in Assets.swf" closeButtonUpSkin="'CloseButtonUp' symbol in Assets.swf" Events close="No default" > ... child tags ... />]]>
Контейнер TitleWindow имеет следующие характеристики размеров по умолчанию:
<mx:FormHeading>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<mx:FormHeading Properties label="" Styles color="0x0B333C" disabledColor="0xAAB3B3" fontAntiAliasType="advanced|normal" fontFamily="Verdana" fontGridFitType="pixel|subpixel|none" fontSharpness="0" fontSize="12" fontStyle="normal|italic" fontThickness="0" fontWeight="normal|bold" indicatorGap="14" labelWidth="Calculated" leading="2" paddingLeft="0" paddingRight="0" paddingTop="0" textAlign="Calculated" textDecoration="none|underline" textIndent="0" />]]>
<mx:Accordion>
tag inherits all of the
tag attributes of its superclass, with the exception of scrolling-related
attributes, and adds the following tag attributes:
<mx:Accordion Properties headerRenderer="IFactory" historyManagementEnabled="true|false" resizeToContent="false|true" selectedChild"A reference to the first child" selectedIndex="undefined" Styles headerHeight="depends on header font styles" headerStyleName="No default" horizontalGap="8" openDuration="250" openEasingFunction="undefined" paddingBottom="-1" paddingTop="-1" textRollOverColor="0xB333C" textSelectedColor="0xB333C" verticalGap="-1" Events change="No default" > ... child tags ... </mx:Accordion>]]>
Примечание. Прямые нижестоящие элементы контейнера навигатора MX должны быть контейнерами MX (контейнерами макета MX или навигатора MX) или контейнером Spark NavigatorContent. В навигатор невозможно вложить элемент управления или контейнер Spark, не являющийся контейнером Spark NavigatorContent, напрямую. Вложения должны быть нижестоящими элементами нижестоящего контейнера MX.
Контейнер Accordion не расширяет контейнер ViewStack, но реализует все свойства, методы, стили и события контейнера ViewStack, например
Контейнер Accordion имеет следующие характеристики размеров по умолчанию:
Примечание. Значение для этого свойства можно установить только в операторе ActionScript, не в MXML.
<mx:ControlBar>
tag inherits all the tag
attributes but adds no additional attributes:
<mx:ControlBar> ... child tags ... </mx:ControlBar>]]>
Примечание. Контейнер Spark Panel не поддерживает контейнер ControlBar. Для добавления этой функции измените тему оформления контейнера Spark Panel.
ControlBar представляет собой окно со свойствами фона и стиля по умолчанию.
Контейнер ControlBar имеет следующие характеристики размеров по умолчанию:
<mx:GridItem>
tag must be a child of the
<GridRow>
tag, which defines a grid row.
The <mx:GridItem>
container inherits the
tag attributes of its superclass, and adds the following tag attributes.
<mx:Grid> <mx:GridRow> <mx:GridItem rowSpan="1" colSpan="1"> child components </mx:GridItem> ... </mx:GridRow> ... </mx:Grid>]]>
Контейнеры GridItem имеют следующие характеристики размеров по умолчанию:
<mx:Panel>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<mx:Panel Properties layout="vertical|horizontal|absolute" status="" title="" titleIcon="null" Styles borderAlpha="0.4" borderThicknessBottom="NaN" borderThicknessLeft="10" borderThicknessRight="10" borderThicknessTop="2" controlBarStyleName="null" cornerRadius="4" dropShadowEnabled="true|false" footerColors="null" headerColors="null" headerHeight="Based on style of title" highlightAlphas="[0.3,0]" horizontalAlign="left|center|right" horizontalGap="8" modalTransparency="0.5" modalTransparencyBlur="3" modalTransparencyColor="#DDDDDD" modalTransparencyDuration="100" paddingBottom="0" paddingTop="0" roundedBottomCorners="false|true" shadowDirection="center|left|right" shadowDistance="2" statusStyleName="windowStatus" titleBackgroundSkin="TitleBackground" titleStyleName="windowStyles" verticalAlign="top|middle|bottom" verticalGap="6" Effects resizeEndEffect="Dissolve" resizeStartEffect="Dissolve" > ... child tags ... </mx:Panel>]]>
Примечание. Adobe рекомендует по возможности использовать контейнер Spark Panel, а не Halo Panel.
Контейнер Panel имеет следующие характеристики размеров по умолчанию:
Метод
<mx:Tile>
tag inherits all of the tag attributes
of its superclass, and adds the following tag attributes:
<mx:Tile Properties direction="horizontal|vertical" tileHeight="NaN" tileWidth="NaN" Sttles horizontalAlign="left|center|right" horizontalGap="8" paddingBottom="0" paddingTop="0" verticalAlign="top|middle|bottom" verticalGap="6" > ... child tags ... </mx:Tile>]]>
Примечание. Adobe рекомендует по возможности использовать с TileLayout контейнеры Spark, а не контейнер Halo Tile.
Контейнер Tile имеет следующие характеристики размеров по умолчанию:
Этот метод сначала вычисляет размер каждой ячейки. Для получения описания способа определения размера ячейки см. описание свойств
Измеренный размер контейнера Tile с нижестоящими элементами достаточен для отображения ячейки в сетке размером N на N с равным количеством строк и столбцов, пространства для заполнения и границ контейнера Tile. Однако возможны различные особые случаи, как показано в следующих примерах:
При отсутствии нижестоящих элементов измеренный размер достаточен только для отображения заполнения и границ.
Минимальный измеренный размер контейнера Tile с нижестоящими элементами достаточен для отображения одной ячейки, заполнения и границ. При отсутствии нижестоящих элементов минимальный измеренный размер достаточен только для заполнения и границ.
Этот метод располагает нижестоящие элементы в шахматном порядке в сетке с ячейками равного размера в области содержимого контейнера Tile (т. е. в области внутри ее заполнения). Для получения описания способа определения размера ячейки см. описание свойств
Разделение между ячейками определяется стилями
Поток нижестоящих элементов определяется значением свойства
Если для нижестоящего элемента определено значение
Первый нижестоящий элемент всегда помещается в верхнем левом углу контейнера Tile. Если для свойства
<mx:VDividedBox>
tag inherits all of the tag
attributes of its superclass, except direction
, and adds
no new tag attributes.
]]>Контейнер VDividedBox имеет следующие характеристики размеров по умолчанию:
<mx:Form>
tag inherits all the tag
attributes of its superclass and adds the following tag attributes:
<mx:Form Styles horizontalGap="8" indicatorGap="14" labelWidth="Calculated" paddingBottom="16" paddingTop="16" verticalGap="6" > ... child tags ... </mx:Form>]]>
В таблице представлены компоненты, используемые для создания форм в Flex:
Метод
Значение свойства
В качестве значения для свойства
Для свойства
Метод
Если ширина нижестоящего элемента выражена в процентах, он растягивается горизонтально в пределах контейнера Form, в соответствии с указанным процентным значением; в противном случае ширина устанавливается в соответствии со свойством
Перед выполнением дополнительных операций этот метод вызывает метод
<mx:ViewStack>
tag inherits the
tag attributes of its superclass, with the exception of scrolling-related
attributes, and adds the following tag attributes:
<mx:ViewStack Properties historyManagementEnabled="false|true" resizeToContent="false|true" selectedIndex="0" Styles horizontalGap="8" paddingBottom="0" paddingTop="0" verticalGap="6" Events change="No default" > ... child tags ... </mx:ViewStack>]]>
Примечание. Прямые нижестоящие элементы контейнера навигатора MX должны быть контейнерами MX (контейнерами макета MX или навигатора MX) или контейнером Spark NavigatorContent. В навигатор невозможно вложить элемент управления или контейнер Spark, не являющийся контейнером Spark NavigatorContent, напрямую. Вложения должны быть нижестоящими элементами нижестоящего контейнера MX.
Контейнер ViewStack не предоставляет пользовательский интерфейс для выбора видимого в данный момент нижестоящего контейнера. Как правило, в ActionScript в ответ на определенное действие пользователя устанавливается значение для свойства
Можно использовать более сложный контейнер навигатора, чем контейнер ViewStack, например контейнер TabNavigator или Accordion. Помимо коллекции нижестоящих контейнеров эти контейнеры предоставляют собственные элементы управления пользовательского интерфейса для перемещения между нижестоящими элементами.
При изменении видимого в данный момент нижестоящего контейнера можно использовать свойство
Контейнер ViewStack имеет следующие характеристики размеров по умолчанию:
Размер по умолчанию контейнера ViewStack совпадает с размером по умолчанию выбранного в настоящий момент нижестоящего элемента, а также заполнения и границ. Если контейнер ViewStack не имеет нижестоящих элементов, его размер по умолчанию достаточен для включения только заполнения и границ.
Минимальный размер контейнера ViewStack совпадает с минимальным размером выбранного в настоящий момент нижестоящего элемента, а также заполнения и границ. Если контейнер ViewStack не имеет нижестоящих элементов, его минимальный размер достаточен для включения только заполнения и границ.
Этот метод не изменяет максимальный размер контейнера ViewStack, он остается неограниченным.
Только один из нижестоящих элементов является видимым в конкретный момент, поэтому контейнер ViewStack определяет позицию и размер только для этого нижестоящего элемента.
Выбранный нижестоящий элемент размещается в верхнем левом углу контейнера ViewStack, позволяя также разместить заполнение и границы контейнера ViewStack.
Если выбранный нижестоящий элемент имеет процентное значение для свойств
Примечание. Значение для этого свойства можно установить только в операторе ActionScript, не в MXML.
Примечание. При добавлении нового нижестоящего элемента к контейнеру ViewStack свойство
<mx:GridRow>
must be a child of the
<mx:Grid>
tag, and has one or more child
<mx:GridItem>
tags that define the grid cells.
The <mx:GridRow>
container inherits the
tag attributes of its superclass, and adds the following tag attributes:
<mx:Grid> <mx:GridRow Styles horizontalAlign="left|center|right" verticalAlign="top|middle|bottom" > <mx:GridItem child components </mx:GridItem> ... </mx:GridRow> ... </mx:Grid>]]>
Контейнеры GridRow имеют следующие характеристики размеров по умолчанию:
Этот метод не вызывается напрямую. Он вызывается в соответствующий момент посредством Flex LayoutManager. При запуске приложения Flex LayoutManager выполняет вызов метода
Этот расширенный метод рекомендуется использовать при обработке подклассов. При отмене этого метода реализация должна выполнить вызов методов
<mx:Box>
tag inherits all of the tag
attributes of its superclass, and adds the following tag attributes:
<mx:Box Properties direction="vertical|horizontal" Styles horizontalAlign="left|center|right" horizontalGap="8" paddingBottom="0" paddingTop="0" verticalAlign="top|middle|bottom" verticalGap="6" > ... child tags ... </mx:Box>]]>
Примечание. Adobe рекомендует по возможности использовать с HorizontalLayout или VerticalLayout контейнеры Spark, а не Halo Box.
Класс Box является базовым для классов VBox и HBox. Для определения контейнеров Box используются теги
Контейнер Box имеет следующие характеристики размеров по умолчанию:
Если для свойства
Свойства
Значения свойств
Все описанные выше значения являются измеренными значениями ширины и высоты контейнера Box. Пользователь может отменить измеренные значения путем явного ввода значений для следующих свойств:
Выполнять вызов метода
Этот расширенный метод рекомендуется использовать при обработке подклассов. При отмене этого метода реализация должна выполнить вызов метода
Эти свойства соответствуют описанным выше свойствам макета, поэтому отдельно они не рассматриваются.
Процентное значение является релевантным только в том случае, если контейнер не изменяет размер или макет. После изменения размера и/или определения нового макета возвращенное из этого метода значение может быть недействительным.
Примером использования этого метода является восстановление размера компонента до определенного количества пикселей после его скрытия.
Для изучения алгоритма создания макета контейнера Box предположим, что контейнер Box расположен в горизонтальном направлении.
Все нижестоящие элементы контейнера Box расположены друг за другом в одной горизонтальной строке. Между каждой парой смежных нижестоящих элементов установлено расстояние в
Если сумма значений свойства
После увеличения или уменьшения всех нижестоящих элементов Flex проверяет, соответствует ли сумма значений ширины нижестоящих элементов ширине контейнера Box. Если это не так, все нижестоящие элементы смещаются в соответствии со значением свойства
Для определения высоты каждого нижестоящего элемента Flex анализирует значение свойства
Вертикальное расположение каждого нижестоящего элемента определяется свойством
Если для свойства
Этот метод не вызывается напрямую. Он вызывается в соответствующий момент посредством Flex LayoutManager. При запуске приложения Flex LayoutManager вызывает метод
Этот расширенный метод рекомендуется использовать при обработке подклассов. При отмене этого метода реализация должна выполнить вызов методов
<mx:FormItem>
tag inherits all of the tag
attributes of its superclass, except paddingLeft
,
and adds the following tag attributes:
<mx:FormItem Properties direction="vertical|horizontal" label="" required="false|true" Styles horizontalAlign="left|center|right" horizontalGap="8" indicatorGap="14" indicatorSkin="'mx.containers.FormItem.Required' symbol in Assets.swf" labelStyleName="" labelWidth="Calculated" paddingBottom="0" paddingRight="0" paddingTop="0" verticalGap="6" > ... child tags ... </mx:FormItem>]]>
Метод
FormItem содержит две области: область метки и область управления. Размер метки всегда одинаков независимо от направления элементов управления. Размер области управления зависит от количества строк и столбцов.
Ширина области метки определяется свойством стиля
Если все нижестоящие элементы находятся в одной строке, ширина области управления определяется как сумма значений ширины всех нижестоящих элементов и пробела
Если нижестоящие элементы располагаются в одном столбце, ширина области управления определяется как ширина нижестоящего элемента с наибольшим значением ширины.
Если нижестоящие элементы находятся в нескольких строках и столбцах, ширина самого широкого элемента будет соответствовать ширине столбца, а ширина области управления будет определяться как ширина столбца, умноженная на сумму количества столбцов и пробелов
Для
Для
Для
Для
Для получения дополнительной информации о способе размещения элементов управления FormItem см. описание метода
Метка выравнивается в области метки в соответствии со значением свойства стиля
Если для свойства
Элементы управления располагаются в столбцах, как описано в документации для метода
Если для свойства
Перед выполнением дополнительных операций этот метод вызывает метод
Если для свойства
Если в макете нижестоящих элементов FormItem требуется применить большее количество элементов управления, можно использовать контейнер, например Grid или Tile, в качестве прямого нижестоящего элемента FormItem для размещения в нем необходимых элементов управления.
Это свойство управляет только отображением данного индикатора. Если требуется выполнять проверку правильности введенных данных, необходимо добавить к нижестоящим элементам соответствующее средство проверки.