Olá
Nesse post irei comentar um pouco sobre a utilização de background com um gradiente de cores. No Flex 3 era possível essa implementação através de uma propriedade chamada backgroundGradientColors, que estava disponível nos estilos do objeto Application e que agora, na versão 4 do Flex é necessário a implementação de um Skin para que possamos aplicar o gradiente ao background da aplicação.
O SDK do Adobe Flex 4 mudou muito com relação ao Adobe Flex 3. Uma das grandes mudanças é o uso extensivo de Skins para construção de nossos componentes e aplicações.
A grosso modo pode-se avaliar essas modificações de uma forma negativa, uma vez que a curva de aprendizado se tornou maior com relação ao Flex 3, entretanto essa forma mais robusta de implementação desses recursos nos permite mais flexibilidade e novas possibilidades em nossas implementações.
Ao se deparar com o novo Flex SDK, o desenvolvedor logo percebe que houve um aumento significativo de propriedades no agrupador “Styles” em seu Flex Properties, porém, mesmo com esse aumento algumas propriedades deixaram de existir.
Hoje falaremos do “BackgroundGradientColors”. Uma propriedade que nos permitia passar um array de cores para a aplicação e a mesma aplicava como background um gradiente de cores entre as informadas.
Para demonstrar essa situação, iremos criar um novo “Flex Project” em nosso Flash Builder chamado BackgroundGradientColor conforme imagem abaixo:
Após criado, iremos adicionar um “MXML Skin” em nossa aplicação. Para isso, vá ao menu File, New, MXML Skin, e irá abrir uma tela para criação do arquivo. Nessa tela, iremos configurar o Name e o Host Component de nosso Skin, conforme demonstrado abaixo:
Algumas considerações sobre a criação de um Skin que acabamos de fazer. O nome informado é o nome que a classe Skin irá receber em nosso projeto. A metadata HostComponent é utilizada para informar ao Skin qual componente do SDK fará sua implementação. Ao informar a metadata e sair do campo, o campo “create a copy of” será preenchido automaticamente, com a classe utilizada pelo componente informado no HostComponent.
Após abrir o arquivo criado, iremos ver que ele possui todas as informações sobre o desenho e cores do componente spark.components.Application. Podemos perceber também que existe um grande uso de States.
Iremos procurar o seguinte bloco de código dentro do ApplicationSkin.mxml. Ele deverá estar na linha
47.
Iremos fazer nossas alterações nesse bloco de códigos, que contém o retângulo que cobre toda a área de nossa aplicação.
Podemos perceber que que dentro do retângulo existe um objeto SolidColor que contem a cor inicial de nosso Application. Esse objeto será removido para adicionarmos o objeto LinearGradient do pacote mx.graphics.*. E para definição das cores do gradiente, usamos objetos GradientEntry que irão conter as cores do gradiente a ser aplicado, conforme abaixo:
Após isso, podemos voltar a nossa aplicação principal e iremos adicionar a propriedade skinClass a classe correspondente ao skin da nossa aplicação, conforme abaixo:
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
skinClass="ApplicationSkin">
Após essa alteração, entraremos em modo de “Design” e já podemos ver no próprio Flash Builder a implementação do Skin pela nossa aplicação conforme imagem abaixo:
A possibilidade de trabalhar com Skin abre ainda mais as portas para a criatividade dentro do Flex 4 SDK. Agora, fica por nossa conta a criatividade para uma melhor exploração de layouts, cores e formas em nossas aplicações.
Fonte do exemplo? Clique aqui.
Um abraço, até a próxima!
Comentários