Após entendermos o que são Skins, vamos a um exemplo prático sobre como criar uma skin. Neste exemplo, iremos criar um botão que que utiliza uma propriedade chamada “icon”. Através do preenchimento desta propriedade iremos exibir o ícone dentro do botão.
Para isso, precisamos criar dois arquivos. O primeiro arquivo é uma classe que herda de spark.components.Button, assumindo assim todo o comportamento de um botão spark. iremos chamá-lo de “IconButton”. O segundo arquivo é uma skin, de define a skin do botão criado. Iremos chamar a skin de “IconButtonSkin”. Para criar a classe IconButton, acesse no Flash Builder File, New, ActionScript Class:
O código desta classe é o seguinte:
Nesta classe criamos uma propriedade de estilo chamada “icon” (linha 9). Isso é feito pelo atributo de classe [Style(name=xxx,type=xxx]. Depois, na linha 14 adicionamos um método que será executado no evento Creation_Complete. Este método seta a nova skin no componente IconButton, na linha 21.
Agora vamos a Skin. No Flash Builder acesse File, New, MXML Skin. Crie a Skin de acordo com a tela a seguir:
Ao criarmos uma Skin, definimos também o “Host Component”, que é o componente que irá hospedar a Skin. Isso é necessário porque toda Skin é aplicada a somente um componente, e a skin precisa acessar as suas propriedades. Veja também que criamos uma Skin que é cópia da ButtonSkin. Isso é necessário porque criar uma Skin do zero é bastante “chato”. O ideal é pegar uma skin existente e modificá-la. A skin criada já possui bastante código e precisamos apenas modificar o seu final. A idéia básica aqui é trocar o Label do botão por um componente HGroup (o antigo HBox) que possui como filhos um ícone e o label. Veja:
Veja que a skin modificada adiciona um componente chamado BitmapImage, cuja a propriedade source obtém o valor do estilo do hostComponent. Ou seja, obtemos o valor da propriedade de estilo “icon” que foi criada no componente host. A imagem a seguir mostra esta relação:
Agora que o componente e sua skin estão prontas, podemos usá-las, conforme o código a seguir:
Neste código criamos uma instância do IconButton e usamos a propriedade de estilo icon para setar o ícone. O resultado é exibido a seguir. Para pegar o código fonte, basta clicar com o botão direito do mouse no exemplo e selecionar “ViewSource”.
Seu post foi muito esclarecedor, mas acho que no Flex 4 isso ficou excessivamente complicado. Imagine o trabalho se eu ainda quisesse escolher a posição da imagem (cima, baixo, esquerda ou direita).
Tem algum problema se eu continuar usando o botão antigo?
Continue com os posts pois eles estão servindo de aperitivo enquanto os livros não chegam.
O problema de usar o mx:button é que ele será descontinuado algum dia. Talvez no caso específico do ícone, pode ter ficado mais complexo, pois esta funcionalidade existia antes. Mas as vantagens do uso de skins sãõ maiores que as desvantagens, pois é possível fazer muitas coisas legais !
Com certeza o uso de Skin é essencial, porém minha pergunta é: porque complicou tanto? No Flash Builder 3 a visualização no CSS com o painel “design” era muito mais facil. O que será que aconteceu?
Oi, na verdade complicou um pouco porque a Adobe separou completamente a lógica da visualização. Isso gerou prós e contras, como por exemplo uma melhor performance, mas em contra partida temos que reaprender a trabalhar com o componente. Talvez você possa achar complicado agora mas com o tempo vamos até achar mais fácil. Por exemplo, os seletores CSS melhoraram muito, mesmo que tenhamos que readaptar algumas propriedades.
Olá Daniel, testando esse exemplo, estou tendo esse erro:
Os metadados [Style] têm ‘name’ ausente.
O erro é nessa linha:
[Style("icon",type="*")]
O que pode ser?
oi, jah tentou tirar isso?
Acho que o correto é
[Style(name="icon",type="*")]
Olá Daniel, estou usando esse componente adaptado, mas me deparei um um problema, se eu usar o chromeColor, ele não pega nesse componente, o botão fica com a cor padrão.
Você sabe onde posso alterar isso?
Abraços
hum.. vou ter que ver aqui… Mas manda um email para suporte@flex.etc.br com essa dúvida que eu boto na fila e dou um jeito de resolver
Boa tarde,
Sou novato no Flex e gostaria de saber como deixar um botão com somente uma das pontas arredondadas e as outras retas, poderia me ajudar neste caso?
obrigado!
Edinei
Olá, você tem que usar SKIN. Com eles você consegue isso facilmente. Faz o seguinte, cria uma SKIN baseada no SKIN do botão (na tela File, New Skin tem isso). Então você tem que entender a SKIN do botão, que é um conjunto de retângulos e sombras. Você pode alterá-los a vontade e conseguir o resultado que deseja.
Ainda bem que no flex 4.5 a funcionalidade está voltando, pelo menos no beta…
EXATO. Flex 4.5 o s:button já tem ícone
Para alinhar o texto verticalmente, qual seria a melhor opção? Agrupar o ícone em um Group por exemplo?
Muito bom o post. Este site já é uma referência pra mim!
Olá, pode sim, use o parâmetro top=10 por exemplo para alinhar ao topo.
Olá Daniel,
Primeiramente, parabéns pelo blog! E seus livros também, são excelentes!
Tentei aplicar o seu exemplo, e na classe IconButtonSkin.mxml ocorre o seguinte warning “Data binding will not be able to detect assignments to “hostComponent”.” tentei colocar a tag [Bindable] antes da declaração [Style(name="icon", type="*")], mas não resolveu.
Você sabe o que pode ter ocorrido?
Obrigado!
Olá, sem ver o seu código nao sei ao certo… Mas olha só o Flex 4.5 já tem ícone para o s:button, então você não precisa mais usar esta implementação
Grande Daniel
Foi bem explicativo, acho que com o tempo vou conseguir ver essa melhoria da adobe ter separado. Mas comigo não deu certo esse tutorial no flash builder 4.5 não, eu crio a classe AS, crio a Skin, e nessa criação indico a classe AS para a Skin e ele cria mas não tem nada de bitmapImage não. Será que estou fazendo algo errado?
Valeu