Header customizado em um Panel

A tarefa de adicionar componentes no header de um Panel pode ser bem trabalhosa. O PanelHeaderRenderer vem com o objetivo de facilitar isso. Exemplo:

Botão direito -> View Source

A única diferença deste para o Panel original é a propriedade

1	headeRenderer

. Nesta propriedade deve ser definido um componente para ser utilizado como header do Panel. Caso seu componente possua propriedades

title

e/ou

status

, as labels title/status originais do Panel são removidas e as implementadas por seu componente são utilizadas.

A implementação ficou bem simples, a parte interessante é quando preciso verificar a existência da propriedade “title” e “status” no headerRenderer especificado. Segue um trecho do código:

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

override protected function createChildren():void
{
super.createChildren();

if(!titleHeader)
{
titleHeader = UIComponent(headerRenderer.newInstance());

if(titleHeader.hasOwnProperty("title"))
{
//we hide the original panel's titleField and bind it to the new one.
titleBar.removeChild(titleTextField);
BindingUtils.bindProperty(titleHeader,"title",this,"title");
}

if(titleHeader.hasOwnProperty("status"))
{
//we hide the original panel's status and bind it to the new one.
titleBar.removeChild(statusTextField);
BindingUtils.bindProperty(titleHeader,"status",this,"status");
}

//and add the headerRenderer into the titleBar
titleHeader.visible = true;
titleBar.addChild(titleHeader);
}
}

Header customizado em um Panel

Um comentário

Deixe Seu Comentário