Exercício 3.2: Incluindo um Componente Painel Tabulado

Antes de iniciar, você precisa concluir o Exercício 3.1: Importando os Recursos Necessários.

Inserindo e Configurando o Componente Painel Tabulado

  1. Insira o componente Painel Tabulado:
    1. Assegure-se de que o arquivo tutorial.jsp esteja aberto.
    2. Na Paleta, abra a gaveta Componentes Faces, clicando nela.
    3. Arraste o componente Painel Tabulado e solte-o em qualquer lugar na visualização Design.
  2. Configure as propriedades para o componente Painel Tabulado:
    1. Defina a Largura e Altura do Painel Tabulado para 700 pixels e 250 pixels, respectivamente.
    2. No lado Esquerdo da janela Propriedades, selecione Lista de Painéis. Certifique-se de que todos os painéis mostrem a propriedade Mostrar Botão Concluir como verdadeiro. (Você também pode incluir novos painéis, mover ou personalizar os existentes utilizando a janela Lista de Painéis).
    3. Clique em Incluir Painel porque precisamos de três painéis para a exibição deste tutorial.
    4. Personalize os rótulos de cada painel. Para o primeiro painel, digite Grade de Dados, para o segundo painel, digite Árvore e, para o terceiro painel, digite Gráfico.
    Embora essas sejam as únicas configurações de propriedades que estamos alterando neste tutorial, há algumas outras disponíveis para o componente Painel Tabulado. Por exemplo:
  3. Selecione o painel Grade de Dados. Arraste o componente Grade de Dados para o painel Grade de Dados.
Painel Tabulado na Visualização Design

Gerenciando Rotinas de Tratamento de Eventos

O componente Painel Tabulado utiliza JavaScript para suporte a vários eventos importantes do lado cliente no navegador. Se você selecionar o Painel Tabulado (selecionando a área de guias), verá os seguintes eventos na visualização Edição Rápida:

Evento

Descrição

onpanelenter

Esse evento é chamado ao entrar em qualquer painel de um controle Painel Tabulado. Isso permite que um desenvolvedor da página inclua lógica arbitrária de negócios para esse evento, verifique informações inseridas pelo usuário ou prepare informações para o painel a ser exibido.

onpanelexit

Esse evento é chamado ao sair de um painel em um controle Painel Tabulado. Isso permite que um desenvolvedor da página inclua lógica arbitrária de negócios para esse evento, verifique informações inseridas pelo usuário e a recusa de saída do painel ou controle o fluxo para o próximo painel. Esse evento é muito importante porque pode ser utilizado para criar fluxos complexos quando o Painel Tabulado é utilizado no modo Assistente (com os botões Avançar e Anterior em vez das guias).

oninitialpanelshow

Esse evento é chamado o controle Painel Tabulado é mostrado pela primeira vez na UI.

onfinish

Esse evento é chamado quando o usuário pressiona o botão Concluir, se ele tiver sido ativado. Isso permite que um desenvolvedor da página inclua lógica de negócios para esse evento, como verificar informações inseridas pelo usuário.

oncancel

Esse evento é chamado quando o botão Cancelar é pressionado.

Para os eventos OnCancel e OnFinish, você deve apenas incluir a lógica que verifica se o Painel Tabulado pode ser submetido ou cancelado e executar a ação apropriada. Não envie o formulário a partir dessas rotinas de tratamento, pois isso será feito automaticamente pela estrutura.

Se você clicar dentro de um espaço vazio em um determinado painel, verá os eventos a seguir.

Evento

Descrição

onenter

Esse evento é chamado ao entrar no painel selecionado. Esse evento comporta-se exatamente como o evento onpanelenter global, exceto que é específico para um determinado painel e permite que um desenvolvedor especifique uma lógica especializada para esse painel.

onexit

Esse evento é chamado ao sair do painel selecionado. Esse evento comporta-se exatamente como o evento onpanelexit global, exceto que é específico para um determinado painel e permite que um desenvolvedor especifique uma lógica especializada para esse painel.

Se uma rotina de tratamento for especificada localmente para um determinado painel e você também tiver uma rotina de tratamento para o evento global, a rotina de tratamento especializada será chamada primeiro. Se ela retornar um valor diferente de nulo para OnExit ou verdadeiro para OnEnter, então a rotina de tratamento global será chamada.

Dica: 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.

Editar os Estilos

Se você precisar personalizar a aparência e o comportamento do Painel Tabulado, edite o CSS (Cascading Style Sheet) padrão denominado tabpanel.css. O arquivo está disponível em seu projeto no Project Navigator em /WebContent/theme/=-tabtree.css.

Agora você está pronto para iniciar o Exercício 3.3: Incluindo um Componente Árvore.

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