Dica Flex – Adicionando Scroll Bar num Spark container

A dica Flex de hoje ensina como adicionar scroll bar nos Spark containers do Flex 4. Para quem começou a trabalhar diretamente no Flex 4 pode parecer estranho, mas nas versões anteriores do Flex todos os containers já tinham por padrão a funcionalidade do scroll bar. O problema é que isso tornava os containers mais pesado já que adicionava código extra, mesmo que você não fosse deixar os scrolls visíveis (o que acontecia na maioria dos casos).

Uma tag especial chamada Scroller foi criada no Flex 4 para indicar quando uma determinada área pode ser “scrolada”.

Veja o trecho de código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?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"

               width="80" height="100%">



    <s:Scroller width="100%">

        <s:HGroup>

            <s:Button label="Teste 1" />

            <s:Button label="Teste 2" />

            <s:Button label="Teste 3" />

            <s:Button label="Teste 4" />

        </s:HGroup>

    </s:Scroller>



</s:Application>

E o resultado será o scroll na horizontal:

E agora se você quiser colocar scroll bar na sua Application? Vamos mostrar uma outra forma de fazer, utilizando skin customizado.

Crie uma aplicação no Flash Builder e sem seguida crie um novo MXML Skin usando como host component o container Application:

Coloque o nome do Skin “CustomApplicationSkin” e clique em “Finish”:

Agora procure a linha abaixo no seu Skin customizado:

1
2
 <!--- @copy spark.components.SkinnableContainer#contentGroup -->

<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />

Em volta dessa linha vamos adicionar a tag Scroller:

1
2
3
        <s:Scroller width="100%" height="100%" minHeight="0" minWidth="0">

            <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />

        </s:Scroller>

Para testar use o código a seguir:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?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" minWidth="955" minHeight="600"

               skinClass="CustomApplicationSkin">



    <s:controlBarContent>

        <s:Label text="Altura do retângulo:" />

        <s:HSlider id="slider" minimum="100" maximum="1000" value="100" />

    </s:controlBarContent>



    <s:Rect top="20" horizontalCenter="0" width="50%" height="{slider.value}">

        <s:fill>

            <s:SolidColor color="0x0" />

        </s:fill>

    </s:Rect>



</s:Application>

Se preferir baixe aqui o projeto de exemplo.

Espero que tenham gostado.

Até a próxima!