A criação de estilos customizados é essencial para a produção de novos componentes.
A forma mais simples de se criar estilos customizados nos componentes do flex de forma que possamos definir estes estilos em um CSS e que tenhamos valores defaults corretamente definidos possivelmente é esta:
-
package
-
{
-
import mx.styles.StyleManager;
-
import mx.styles.CSSStyleDeclaration;
-
import mx.core.UIComponent;
-
import flash.geom.Matrix;
-
import flash.filters.GradientGlowFilter;
-
import flash.display.GradientType;
-
-
//nosso estilo criado
-
[Style(name="faixasLaranjas",type="Boolean",inherit="no" enumeration="true,false")]
-
-
//extende UIComponent que é um Sprite.
-
public class ClasseExemplo extends UIComponent
-
{
-
//flag que indica se algum novo estilo foi criado.
-
private static var classeCriada:Boolean = criarClasse();
-
-
//propriedade que conterá os dados do estilo.
-
private var _faixasLaranjas:Boolean;
-
private var estiloMudou:Boolean = false;
-
-
private static function criarClasse():Boolean
-
{
-
if (!StyleManager.getStyleDeclaration("ClasseExemplo"))//se ainda não existe a declaração de estilo...
-
{
-
var novoEstilo:CSSStyleDeclaration = new CSSStyleDeclaration();
-
novoEstilo.setStyle("faixasLaranjas", true);
-
StyleManager.setStyleDeclaration("ClasseExemplo", novoEstilo, true);
-
}
-
return true;
-
}
-
-
/*
-
Override do método styleChanged dos UIComponents.
-
Este método é chamado se algum estilo for modificado.
-
*/
-
override public function styleChanged(propriedade:String):void
-
{
-
super.styleChanged(propriedade);
-
-
// Verifica se o estilo alterado foi o estilo faixasLaranjas.
-
if (styleProp=="faixasLaranjas")
-
{
-
estiloMudou = true;
-
-
//obriga o componente a re-renderizar sua lista de DisplayObjects (filhos).
-
invalidateDisplayList();
-
return;
-
}
-
}
-
-
/*
-
Override do método updateDisplayList dos UIComponents.
-
Ele é responsavel por atualizar o layout do
-
componente e reposicionar os itens (outros componentes visuais) da displayList.
-
*/
-
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
-
{
-
super.updateDisplayList(unscaledWidth, unscaledHeight);
-
-
// verifica se o estilo foi alterado.
-
if (estiloMudou == true)
-
{
-
_faixasLaranjas = getStyle("faixasLaranjas");
-
desenhaFaixasLaranjas(unscaledWidth, unscaledHeight);
-
}
-
}
-
-
private function desenhaFaixasLaranjas(_width:Number, _height:Number):void
-
{
-
//a propriedade graphics é herdada da classe Sprite.
-
//nela os desenhos vetorizados podem acontecer.
-
//metodo clear() -> limpa os desenhos atuais.
-
graphics.clear();
-
//verifica se é para desenhar as faixas ou não.
-
if(_faixasLaranjas == true)
-
{
-
/* Aqui é o lugar onde desenhamos, no caso, as nossas faixas laranjas.
-
Utilizamos o objeto graphics para fazer isso.
-
Aqui desenhamos um quadrado como exemplo. */
-
graphics.moveTo(10, 10);
-
graphics.lineTo(100, 10);
-
graphics.lineTo(100, 100);
-
graphics.lineTo(10, 100);
-
graphics.lineTo(10, 10);
-
graphics.endFill();
-
}
-
}
-
}
-
}
A documentação do Flex SDK é criticada por não se aprofundar em algumas partes, possuindo exemplos simples e pouco profundos na maioria das vezes. Claro que com um pouco de peripécia é possível extender os exemplos criando algo mais útil e mais próximo de casos de uso reais. Isto me inspirou a publicar isto.
A criação de estilos customizados é essencial para a produção de novos componentes.
Talvez você tenha pensado: "-ah, basta setar o valor padrão no construtor!". Não. O compilador do Flex primeiramente varre a aplicação procurando as tags
Há muitas formas de contornar isto e possibilitar estilos customizados em componentes. A forma mais simples e também citada na documentação é a que está logo acima.
Os Passos:
- Cria-se uma propriedade estática. É necessário ser estática pois estas propriedades, assim como métodos estáticos, são criadas antes das instancias das classes.
- Cria-se um método, também estático que:
-Verifica se existe alguma declaração de CSS já existente.
-Se ainda não existe, uma é criada e definida com os valores padrões.
-Define-se o nome da Declaração de folha de estilo com o mesmo nome da Classe.
Enfim, isto é ótitimo pois descarta as metatags INSPECTABLE assim como os setters públicos. Estes, buscando agilidade na produção do código, são comumente usados de uma forma errada para aplicar mudanças no estilo do componente. Desta forma, os dados são recebidos como propriedades e não estilos propriamente ditos, fazendo-os não ficarem editáveis através do CSS.
Edit: Faltou falar sobre a utilização dos nossos estilos no CSS e no MXML.
Sem mais, no CSS, fazemos da seguinte forma:
.novaDeclaracao //desta forma inserimos a propriedade styleName no componente, contendo a string "novaDeclaracao";
{
cornerRadius:10;
borderStyle:solid;
backgroundColor:#eeeeee;
faixasLaranjas:true;
}
...ou...
ClasseExemplo //nome da classe propriamente dito.
{
cornerRadius:10;
borderStyle:solid;
backgroundColor:#eeeeee;
faixasLaranjas:true;
}
Incluí estilos comuns dos componentes padrões do Flex para mostrar a igualdade na utilização. Na primeira forma utilizamos a propriedade styleName:
-
<ClasseExemplo styleName="novaDeclaracao"/>
Na segunda forma utilizamos o nome da classe propriamente dita, o que resulta na alteração dos estilos de todas as instancias desta classe. Sem a necessidade de especificar a styleName como no exemplo acima.
O ponto a ser aprendido aqui é o seguinte: Definindo nossos estilos desta maneira, conseguimos utiliza-los exatamente igual outros estilos da maioria dos componentes default do Flex, tais como o cornerRadius, o backgroundColor e o borderStyle.
