28 fev 2011

Componente de Destaque – Flex 4

Esse componente auxilia a todas aplicações que acabam sendo utilizadas em projetores ou que, precisam destacar algum componente para fixar a atenção do usuário sobre o que está sendo exibido. Apesar de ser um componente simples e de não permitir ações nos componentes em destaque, traz um ganho muito grande a aplicação. Vejam o exemplo abaixo:

[kml_flashembed movie=”http://www.redspark.io/wp-content/uploads/Destaque.swf” width=”540″ height=”300″ fversion=”10″/]

Agora vou ensinar como utilizar o componente no seu projeto.

1. Primeiro, devemos baixar aqui a biblioteca que contém o componente, e adicioná-la na pasta libs do seu projeto.

2. Agora precisamos incluir a classe principal do componente no Application do nosso projeto Flex.

1
2
3
4
5
6
7
8
9
10
11
12
13
<?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"
               xmlns:zoom="br.com..components.zoom.*">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <!--- Classe básica para funcionar o Componente de Destaque -->
    <zoom:ZoomControl/>

</s:Application>

3. Devemos extender os objetos que desejamos destacar e implementar a interface br.com..components.zoom.IZoomItem, no meu exemplo, eu extendi a classe Panel que ficou assim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package
{
    /**
     * @author Bruno Sales<br />
     * Created: 28/02/2011
     */

    import br.com..components.zoom.IZoomItem;

    import spark.components.Panel;

    public class PanelZoom extends Panel implements IZoomItem
    {
        public function PanelZoom()
        {
            super();
        }

        public function useBackgroundZoomContainer():Boolean
        {
            return false;
        }
    }
}

4. Observe o método useBackgroundZoomContainer():Boolean da interface IZoomItem, ele serve para auxiliar quando estamos tentando destacar um componente com fundo transparente, como no caso apresentado o meu Panel não tem um background transparente, então eu retorno false no método.

5. Aplicar a minha nova classe PanelZoom ao meu Application.

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"
               xmlns:zoom="br.com..components.zoom.*"
               xmlns:local="*">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <!--- Classe básica para funcionar o Componente de Destaque -->
    <zoom:ZoomControl/>

    <local:PanelZoom width="200" height="200"/>

</s:Application>

6. Executar o projeto e clicar no novo painel segurando o SHIFT para testar o efeito.

Agora já podem abusar do componente e extender qualquer tipo de componente visual. Espero que tenham gostado!

Leave a Comment