Tag Archives: Customização de Componente

Campo de busca personalizado

Imagem1

Nada demais, apenas um TextInput com skin, que eu desenhei no Ilustrator.

Dica: assista em tela cheia.

Po, parece que o embed tá zuado. Se vc tentar assistir o video e nao conseguir, vá diretamente na fonte: http://blip.tv/file/2670623

Update: dei uma melhorada no componente. Qualquer semelhança com o campo de busca dos produtos Apple é pura cópia mesmo.

Dica: colocando sombra nos labels de um Accordion

Ontem eu precisei colocar sombra nos labels dos header de um Accordion. Não encontrei nenhum estilo e nenhuma propriedade que me permitisse tal façanha. Assim, fui estudar o core do componente e hoje eu consegui. Os códigos estão abaixo.

PS: também serve para o Button, uma vez que os AccordionHeader são derivados da classe Button.

Primeiro é preciso estender a classe Accordion para dar um override na função protegida CreateChildren()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
package br.com.vedovelli.components{
 
	import flash.filters.DropShadowFilter;
	import mx.containers.Accordion;
 
	public class MyAccordion extends Accordion{
 
		public function MyAccordion(){
			super();
		}
 
		// Sobescrever a função createChildren() para ter acesso aos AccordionHeader
		override protected function createChildren():void{
			super.createChildren();
 
			// Cria a sombra
			var sha:DropShadowFilter = new DropShadowFilter();
			sha.distance = 1;
 
			// Loop para acessar os headers
			for(var i:uint = 0; i < this.numChildren; i++){
 
				// Aqui já se pega o label diretamente, que é o primeiro filho do header
				var label:Object = this.getHeaderAt(i).getChildAt(0);
 
				// Aplicação do filtro
				label.filters = [sha];
			}
 
		}
	}
}

Aí é só usar como um componente comum.

Resultado