Tag Archives: layout

Setting the tab width on a Spark TabBar control in Flex 4

In a previous example, “Setting the tab width on a TabBar control in Flex”, we saw how you could set the tab width on an MX TabBar control in Flex by setting the aptly named tabWidth style.

The following example shows how you can set the tab width on a Spark TabBar control in Flex 4 by creating a horizontal layout and setting the columnWidth and variableColumnWidth properties.

Continue reading Setting the tab width on a Spark TabBar control in Flex 4

Creating a variable row height Spark DropDownList control in Flex 4

In a previous example, “Creating a variable row height item renderer on a ComboBox control in Flex”, we saw how you could create a variable row height item renderer on a Flex MX ComboBox control by setting the variableRowHeight property on the ComboBox control’s dropdown property.

The following example shows how you can create a variable row height Spark DropDownList control in Flex 4 by setting a custom VerticalLayout object and setting the Boolean variableRowHeight property and the horizontalAlign property.

Full code after the jump.

Continue reading Creating a variable row height Spark DropDownList control in Flex 4

Auto scrolling the contents of a VGroup container in Flex 4

The following example shows how you can tab through a series of Spark TextInput controls in Flex 4 and auto-scroll the VGroup container so that the currently focused text field has focus by using the fractionOfElementInView() method, getScrollPositionDeltaToElement() method, and verticalScrollPosition property.

Full code after the jump.

Continue reading Auto scrolling the contents of a VGroup container in Flex 4

Determining how much of an item is visible in a scrolling VGroup container in Flex 4

In a previous example, “Determining the first and last visible item in a scrolling VGroup container in Flex 4”, we saw how you could determine the first and last item in a Spark VGroup container’s view by using the firstIndexInView and lastIndexInView properties on the VGroup container’s layout property.

The following example shows how you can determine how much of an item is visible in a scrolling VGroup container in Flex 4 by using the fractionOfElementInView() method.

Full code after the jump.

Continue reading Determining how much of an item is visible in a scrolling VGroup container in Flex 4

Determining the first and last visible item in a scrolling VGroup container in Flex 4

The following example shows how you can determine the first and last item in a Spark VGroup container’s view by using the firstIndexInView and lastIndexInView properties on the VGroup container’s layout property.

Full code after the jump.

Continue reading Determining the first and last visible item in a scrolling VGroup container in Flex 4

Setting word wrapping on a Spark List control in Flex 4

The following example shows how you can enable word wrapping on a Spark List control in Flex 4 by overriding the default layout with a VerticalLayout object and set its horizontalAlign property to “justify” (instead of the default “contentJustify”).

Full code after the jump.

Continue reading Setting word wrapping on a Spark List control in Flex 4

Creating a tile layout Spark ButtonBar control in Flex 4

In a previous example, “Creating a vertical Spark ButtonBar control in Flex 4”, we saw how you can create a vertical Spark ButtonBar control in Flex 4 by setting the layout property to a VerticalLayout object.

The following example shows how you can create a tile layout on the Spark ButtonBar control in Flex 4 by setting the layout property to a TileLayout object.

Full code after the jump.

Continue reading Creating a tile layout Spark ButtonBar control in Flex 4