Saturday, June 18, 2011

Composed containers, Text controls in Flex

Today we will learn about composed containers and ways of displaying text.

In the previous tutorials we've used Group containers with Horizontal and Vertical layouts multiple times. In general, they look like this:

<s:Group>
<s:layout>
<s:HorizontalLayout />
</s:layout>

<s:Button label="One" />
<s:Button label="Two" />
<s:Button label="Three" />
</s:Group>

However, there is another way to get the same results, but only with less lines of code. We could do this by using composed containers - pre-built shortcuts in Flex.

We can use containers called HGroup and VGroup for groups with horizontal and vertical layouts.

The code above will generate the same results as this:

<s:HGroup>
<s:Button label="One" />
<s:Button label="Two" />
<s:Button label="Three" />
</s:HGroup>

Simple as that.

Now for the second part of this tutorial - the different ways of displaying text in Flex.

There are 5 main text controls that can be used to display text, both editable and non-editable:

  • Label - we've already used this one multiple times in the tutorials. The text of a Label control cannot be edited by the user of the application.
  • TextInput - we've used this control once in the previous tutorials. This control is used for data input, and can only have one single line of text.
  • RichText - used to display multiple lines of text, but is not editable and doesn't display scrollbars if the text doesn't fit.
  • RichEditableText - same as the RichText control, except that this one is editable by the user.
  • TextArea - used to display multiple lines of text, can be either editable or noneditable, displays scrollbars if needed.

All of these controls are spark controls, meaning you have to use the s namespace when defining them, for example:

<s:RichText text="hey" />

Note that these are the most basic controls used to display text. Sometimes, you might need something more specific than just a text box, for example, a rich text editor like the ones in forums, you could then use the mx:RichTextEditor control.

<mx:RichTextEditor title="Type your text here" text="hello" />



This one is in the mx namespace, and as I said in one of my previous Flex tutorials, the difference between mx and s namespaces is that spark components are much more flexible and customizable. However, a lot of ready solutions for different situations can be found in the mx namespace, such as this RichTextEditor control.

Thanks for reading!

No comments:

Post a Comment