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
- Insira o componente Árvore:
- Assegure-se de que seu arquivo JSP esteja aberto. Selecione o painel Árvore em seu Painel Tabulado.
- Na Paleta, abra a gaveta Componentes Faces Client, clicando nela.
- Arraste o componente Árvore e solte-o no painel Árvore na visualização Design.
- Configure as propriedades para o componente Árvore:
- A largura e altura, em pixels ou tamanho relativo, permitem encaixar a árvore em uma área controlada na tela. Se a árvore for maior e o usuário expandir os nós, barras de rolagem aparecerão para a visualização das diferentes áreas da Árvore. Selecione uma largura de 600 pixels e altura de 200 pixels.
- Mostrar o nó raiz ou não. Deixe selecionado para este tutorial.
- A seleção de nó, quando ativada, criará uma caixa de opções próxima a cada nó na árvore. Selecione Ativar Seleção de Nó.
- 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.
- Ligue os dados ao componente Árvore. Você deseja que a Árvore exiba a lista de usuários e seus portfólios.
- 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.
- Clique na Árvore na visualização Propriedades e selecione a guia Lista de Nós da Árvore.
- 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.
- 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.
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:
- Definir objeto selecionado como raiz no componente de destino - Essa rotina de tratamento obtém o objeto selecionado no controle atual (opcionalmente, uma referência específica nesse objeto) e o torna o objeto raiz no controle de destino. Para esse tipo de rotina de tratamento de eventos, o controle de destino pode ser qualquer Componente Faces Client, exceto Serviço da Web e os componentes JavaServer Faces padrão suportados pelo Faces Client, que estejam ligados ao mesmo tipo de objeto que aquele a partir do qual o evento se originou. A lista de controles de destino possíveis é mostrada no diálogo de configuração que aparece. Utilize essa rotina de tratamento de eventos quando desejar que o objeto selecionado na Visualização em Árvore (origem) determine o que é mostrado na Grade de Dados (destino). Essa rotina de tratamento não altera valores de dados da origem de dados, mas define o que é exibido no controle selecionado.
- Ligar o objeto selecionado a outro objeto - Essa rotina de tratamento obtém o valor do objeto selecionado (opcionalmente, uma referência específica dentro desse objeto) e o liga a um outro objeto de dados. Essa rotina de tratamento de eventos define os valores de dados armazenados em um objeto de dados, por exemplo, um Java bean, um registro do banco de dados relacional, etc. Por exemplo, na amostra portfólio do Faces Client, quando um usuário escolhe uma ação específica da Grade de Dados, os valores dos campos nesse objeto ação são copiados para o objeto de dados placeHolderStock, que é posteriormente utilizado como um parâmetro de entrada para o Serviço da Web. A rotina de tratamento altera o valor armazenado nesse objeto.
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:
- Se uma rotina de tratamento for especificada localmente para um determinado nó e você também tiver uma rotina de tratamento para o evento global, a rotina de tratamento local será chamada primeiro. Se retornar verdadeiro, a rotina de tratamento global será chamada.
- Quando você selecionar um evento na visualização QuickEdit e clicar no painel do código, verá alguns comentários que explicam a finalidade do evento, seus parâmetros e o tipo e valor de retorno esperados.
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.