Flex/ Flex 3 how to/ Flex 3 SDK

#5 Flex How to: Como popular um menu e aplicar icones e eventos

Tem muita gente com essa dúvida, andamos pesquesando os arquevos da lista da Flex-Brasil, e percebemos que teve um número considerável sobre esse tópico.
Criar menus dinâmicos ou não em Flex é fácil, a definição de estrutura de seus itens é feita por um XML, sela ele interno ou externo.

O formato do arquevo xml que o MenuBar ou Menu lê, é pré-definido com alguns atributos que ambos os componentes já interpretam. São elas:

  • enabled – Habilita ou desabilita um item do menu.
  • groupName – Quando um item haje como radio Button, ou check Button de um grupo de itens.
  • icon – Coloca um item como imagem, herdando de um asset do tipo Class.
  • label – Nome que aparece no item do menu.
  • toggled – Seleciona ou escolhe o tipo do item marcando na seleção do item.
  • type – Especifica o tipo do item do menu com seus valores (check, radio e separator)

Exemplo do meumenu.xml :



		
                
                
                	
                
                

            
            		
            		
            
            
                
                
                
            
            

Em alguns tags do exemplo acima usei as propriedades definidas do xml que é automaticamente interpretada pelo menu. Lembrando que se meu XML tem formato E4X , precisa-se setar o labelField do Menubar, que para acessar um atributo no XML só basta ler com @ e o nome da propriedade.

O resultado do XML acima pode ser aplicado dentro do Flex, como mostra o exemplo abaixo.

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx><mx :XML id="meumenu" xmlns="" format="e4x">
<root>
		<menuitem label="Arquevo">
                <menuitem label="Novo Painel"/>
                </menuitem><menuitem label="Abrir">
                	<menuitem label="Ultimos..."/>
                </menuitem>
                <menuitem label="Fechar" enabled="false"/>
 
            <menuitem label="Editar">
            		<menuitem label="Titulo"/>
            		<menuitem label="Tamanho"/>
            </menuitem>
            <menuitem label="Visualizar">
                <menuitem label="50%"
                    type="radio" groupName="grupo"/>
                <menuitem label="100%"
                    type="radio" groupName="grupo"
                    selected="true"/>
                <menuitem label="150%"
                    type="radio" groupName="grupo"/>
            </menuitem>
            </root>
</mx>
<mx :MenuBar dataProvider="{meumenu.menuitem}" labelField="@label" width="100%"/>

Para se usar com ícone, você deve setar a propriedade iconField no MenuBar, para que o próprio possa setar o valor da imagem. Lembrando que sempre com o tipo Class.
Auxiliando nesse ponto, você pode definir uma classe ou arquevo especificadamente para setar os icones de seu menu. Criei um arquevo simples que faz todo esse processo de Embed e converte para Class.

Como ficou o arquevo:

1
2
3
4
5
6
7
8
9
10
11
12
13
// ActionScript file
 
[Embed(source="./assets/dev.png")]
[Bindable]
public var iconeDev:Class;
 
[Embed(source="./assets/book.png")]
[Bindable]
public var iconeBook:Class;
 
[Embed(source="./assets/info.png")]
[Bindable]
public var iconeInfo:Class;

Depois que definir isso, só trato de verificar se o iconField, foi definido no MenuBar e também o atributo tem o nome específico setado pela variável criada no arquevo “includeIcones.as”.

Como fica o exemplo com ícones.

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
33
34
35
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		include "includeIcones.as";
 
 
	]]>
</mx>
<mx :XML id="meumenu" xmlns="" format="e4x">
<root>
		<menuitem label="Arquevo" icon="iconeDev">
                <menuitem label="Novo Painel"/>
                </menuitem><menuitem label="Abrir">
                	<menuitem label="Ultimos..."/>
                </menuitem>
                <menuitem label="Fechar" enabled="false"/>
 
            <menuitem label="Editar">
            		<menuitem label="Titulo" icon="iconeBook"/>
            		<menuitem label="Tamanho"/>
            </menuitem>
            <menuitem label="Visualizar" icon="iconeInfo">
                <menuitem label="50%"
                    type="radio" groupName="grupo"/>
                <menuitem label="100%"
                    type="radio" groupName="grupo"
                    selected="true"/>
                <menuitem label="150%"
                    type="radio" groupName="grupo"/>
            </menuitem>
            </root>
</mx>
<mx :MenuBar iconField="@icon" dataProvider="{meumenu.menuitem}" labelField="@label" width="100%"/>

Como fazer para selecionar Itens do Menu e atribuir Eventos a cada item?

Atribuir ao MenuBar o evento de click e saber qual ícone foi selecionado, fica a cargo da propriedade itemClick do MenuBar,Menu.

Veja exemplo:

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
33
34
35
36
37
38
39
40
41
42
43
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		import mx.controls.Alert;
        import mx.events.MenuEvent;
 
		include "includeIcones.as";
 
            private function handleItemClick(event:MenuEvent):void {
 
                Alert.show('Menu escolhido foi: '+ event.item.@label);
            }
 
 
	]]>
</mx>
<mx :XML id="meumenu" xmlns="" format="e4x">
<root>
		<menuitem label="Arquevo" icon="iconeDev">
                <menuitem label="Novo Painel"/>
                </menuitem><menuitem label="Abrir">
                	<menuitem label="Ultimos..."/>
                </menuitem>
                <menuitem label="Fechar" enabled="false"/>
 
            <menuitem label="Editar">
            		<menuitem label="Titulo" icon="iconeBook"/>
            		<menuitem label="Tamanho"/>
            </menuitem>
            <menuitem label="Visualizar" icon="iconeInfo">
                <menuitem label="50%"
                    type="radio" groupName="grupo"/>
                <menuitem label="100%"
                    type="radio" groupName="grupo"
                    selected="true"/>
                <menuitem label="150%"
                    type="radio" groupName="grupo"/>
            </menuitem>
            </root>
</mx>
<mx :MenuBar itemClick="handleItemClick(event)" iconField="@icon" dataProvider="{meumenu.menuitem}" labelField="@label" width="100%"/>

One thought on “#5 Flex How to: Como popular um menu e aplicar icones e eventos

  1. Eu tive problemas pra fazer aparecer o icone do 1o nível de menu. Os icones dos submenus aparecem normal mas os do 1o nivel, como no seu exemplo Arquivo, Editar, Visualizar, não aparece. Pra debugar, usei até mesmo o mesmo ícone e nada.

Comments are closed.