Exercício 3.3: Incluindo um Componente Árvore

Antes de iniciar, você deve concluir o Exercício 3.2: Incluindo um Componente Painel Tabulado.

Inserindo e Configurando o Componente Árvore

  1. Insira o componente Árvore:
    1. Assegure-se de que seu arquivo JSP esteja aberto. Selecione o painel Árvore em seu Painel Tabulado.
    2. Na Paleta, abra a gaveta Componentes Faces Client, clicando nela.
    3. Arraste o componente Árvore e solte-o no painel Árvore na visualização Design.
  2. Configure as propriedades para o componente Árvore:
  3. Assegure-se de que você tenha dados do lado cliente disponíveis. Se você concluiu as outras seções neste tutorial, já terá um bean em sua visualização Dados de Página e seu bean correspondente na visualização Dados de Cliente. Caso contrário, crie-os conforme descrito no Exercício 2.2: Incluindo Dados do Lado do Servidor e o Exercício 2.3: Criando e Configurado Dados de Cliente.
  4. Ligue os dados ao componente Árvore. Você deseja que a Árvore exiba a lista de usuários e seus portfólios.
    1. Arraste o bean Raiz da visualização Dados de Cliente para a Árvore. Você fornecerá à arvore um ponto de partida (um objeto raiz para a raiz da árvore) e, em seguida, indicará quais propriedades desse nó raiz devem ser utilizadas no primeiro nível da árvore. Para cada nó na árvore, você especifica como seguir os dados para localizar nós-filho.
    2. Clique na Árvore na visualização Propriedades e selecione a guia Lista de Nós da Árvore.
    3. Expanda todos os nós e selecione raiz, usuários e portfólios. Você pode alterar os mapeamentos e selecionar outros e ver como afetam o processamento da árvore. É possível selecionar vários filhos, se houver, de um determinado nó. Mesmo se um nó estiver no meio de sua estrutura de dados (por exemplo, se Portfólio tiver uma lista de posições e cada posição tiver uma ação), você não precisa selecionar nenhum nó-filho, tornando esse nó selecionado o nó-folha. Selecionando raiz (selecionado implicitamente), usuários e portfólios, você indica à Árvore para mostrar apenas esse caminho específico de dados e parar nos portfólios.
    4. Para cada nó, é possível personalizar o processamento do nó. Há várias coisas que podem ser feitas:
      • Se um nó tiver alguma propriedade, você poderá selecionar a propriedade a ser utilizada para o rótulo do nó.
      • Se o nó não tiver propriedade, você poderá digitar um valor como um rótulo do nó.
      • Você pode especificar ícones para quando o nó for expandido ou reduzido, substituindo os ícones padrão de pasta e arquivos.

      Para os nós raiz e portfólios, há apenas uma propriedade, portanto as seleções padrão são adequadas. Entretanto, a classe Usuário possui várias propriedades. Clique na classe usuários e selecione a propriedade @{lastName} para o campo Valor do Rótulo de modo que os nós de usuário exibam os sobrenomes dos usuários.

      Quaisquer personalizações que você fizer serão baseadas na classe. Isso significa que se a árvore mostrar nós com base, por exemplo, na classe Usuário em vários lugares, esses nós terão as mesmas opções personalizadas. Não importa quantas vezes um Usuário é referenciado em sua estrutura de dados, há apenas uma única classe Usuário.
Componente Árvore no Painel Tabulado

Configurando e Gerenciando Rotinas de Tratamento de Eventos

As Rotinas de Tratamento de Eventos para os Componentes Faces Client são gravadas por meio da Visualização Edição Rápida. Para os componentes Grade de Dados ou Árvore, você pode utilizar as rotinas de tratamento de eventos incluídas ou gravar suas próprias rotinas de tratamento de eventos personalizadas. Há duas rotinas de tratamento de eventos incluídas:

A Árvore também suporta vários eventos do lado cliente que ocorrem no Navegador utilizando JavaScript. Se você selecionar o componente Árvore inteiro, na visualização Edição Rápida, poderá ver os seguintes eventos globais que podem ser escritos em script quando algum nó na árvore está sendo manipulado de alguma maneira:

onnodecollapse
Esse evento é chamado quando um nó é reduzido pelo usuário e permite que o desenvolvedor implemente lógica arbitrária em resposta. Se um nó específico já tiver uma rotina de tratamento de eventos para seu evento oncollapse, essa rotina de tratamento de eventos será chamada antes desta.
onnodeexpand
Esse evento é chamado quando um nó é expandido pelo usuário e permite que o desenvolvedor implemente lógica arbitrária em resposta. Se um nó específico já tiver uma rotina de tratamento de eventos para seu evento onexpand, essa rotina de tratamento de eventos será chamada antes desta.
onnodehighlight
Esse evento é chamado quando algum nó é realçado pelo usuário e permite que o desenvolvedor implemente lógica arbitrária em resposta. Por exemplo, causando alguma computação, um URL a ser chamado ou alterações em uma página. Se um nó específico já tiver uma rotina de tratamento de eventos para seu evento onhighlight, essa rotina de tratamento de eventos será chamada antes desta.
onnodeselect
Esse evento é chamado quando algum nó é selecionado. A seleção de nó deve estar ativada para que esse evento seja disparado. Se um nó específico já tiver uma rotina de tratamento de eventos para seu evento onselect, essa rotina de tratamento de eventos será chamada antes desta.
onnodeunselect
Esse evento é chamado quando algum nó selecionado anteriormente é desmarcado. A seleção de nó deve estar ativada para que esse evento seja disparado. Se um nó específico já tiver uma rotina de tratamento de eventos para seu evento onnodeunselect, essa rotina de tratamento de eventos será chamada antes desta.
Se você selecionar um nó individual na árvore, a visualização Edição Rápida mostrará os seguintes eventos locais:
oncollapse
Esse evento é chamado quando um nó é reduzido pelo usuário e permite que o desenvolvedor implemente lógica arbitrária em resposta.
onexpand
Esse evento é chamado quando um nó é expandido pelo usuário e permite que o desenvolvedor implemente lógica arbitrária em resposta.
onhighlight
Esse evento é chamado quando o nó especificado é realçado pelo usuário e permite que o desenvolvedor implemente lógica arbitrária em resposta. Por exemplo, causando alguma computação, um URL a ser chamado ou alterações em uma página.
onselect
Esse evento é chamado quando o nó especificado é selecionado. A seleção de nó deve estar ativada para que esse evento seja disparado.
onunselect
Esse evento é chamado quando o nó especificado é desmarcado. Ele deve ter sido selecionado antes e a seleção de Nó deverá estar ativada para que esse evento seja disparado.

As personalizações aplicadas aos nós são feitas por classe; portanto, por exemplo, se você implementar uma rotina de tratamento de eventos para a classe Usuário, esse evento será aplicado em todo lugar em que a classe Usuário aparecer como um nó na Árvore.

Notas:

Editando os Estilos

Se você precisar personalizar a aparência e o comportamento do componente Árvore, edite o CSS (Cascading Style Sheet) padrão denominado tree.css. O arquivo está disponível em seu projeto no Explorador de Projetos em /WebContent/theme/tree.css.

Agora você está pronto para começar o Exercício 3.4: Incluindo um Componente Gráfico.

Termos de Utilização | Feedback
(C) Copyright IBM Corporation 2000, 2005. Todos os Direitos Reservados.