Wednesday, June 15, 2011

Scrollable content, Defining properties in Flex

In this tutorial we will learn about creating scrollable content and the ways of defining properties in MXML.

In the previous versions of Flex, each container had built-in scrollbars. This means that each container had extra code responsible for the scrolling of the content, even when scrolling isn't needed. In Flex 4, there's a separate container called Scroller, which manages vertical and/or horizontal scrollbars for its children when it is needed.

Because it is a container, all we have to do is put our children inside it. However, if we just put them in the <s:Scroller> tags, the scroll bars will not show up. This is because the Scroller container stretches that way, so that all of the content can fit and be displayed on the screen. If we, however, set predefined dimensions, or just one dimension, and the size of the contents goes out of the frame, then the scrollbars are added.

For examlpe, let's take that Group with 4 Buttons in it from the last tutorial. We stack them in a column, and then put them in a Scroller container. We set the height of the Scroller to limit the size of it and therefore make it display a scrollbar if the content doesn't fit.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">

<s:Scroller height="80" x="20" y="20">
<s:Group>
<s:layout>
<s:VerticalLayout />
</s:layout>

<s:Button label="File" />
<s:Button label="Edit" />
<s:Button label="View" />
<s:Button label="About" />
</s:Group>
</s:Scroller>

</s:Application>

The result:



Now, for the second part of this tutorial - the ways of defining properties of a class.

In Flex, just like in XML, there are 2 ways of defining properties. The first one - set the property as an attribute. The second one - define the property using child tags.

The following two code examples are equal:

<s:Button label="Hello" />

has the same result as

<s:Button>
<s:label>
Hello
</s:label>
</s:Button>

You may notice the difference between properties and classes now. You can see that the Button class is defined with an uppercase B, while the label property starts with a lowercase l.

All classes, such as Button, Group, Application, Panel, VerticalLayout, etc., start with uppercase letters. The properties of these classes, such as x, y, height, width, label, etc., start with lowercase letters.

That's all for today!

Thanks for reading!

No comments:

Post a Comment