Exercício 3.4: Incluindo um Componente Gráfico

Antes de iniciar, você precisa concluir o Exercício 3.3: Incluindo um Componente Árvore.

Inserindo e Configurando o Componente Gráfico

  1. Insira o componente Gráfico:
    1. Assegure-se de que seu arquivo JSP esteja aberto. Selecione o painel rotulado Gráfico no Painel Tabulado.
    2. Na Paleta, abra a gaveta Componentes Faces Client clicando nela.
    3. Arraste o componente Gráfico e solte-o no painel Gráfico na visualização Design.
  2. Configure as propriedades para o componente Gráfico. O componente Gráfico é um componente muito sofisticado que utiliza a tecnologia Macromedia Flash. Ele comporta-se como qualquer outro componente Faces Client visto até o momento. A diferença é que, internamente no navegador, em vez de utilizar JavaScript e DHTML para processar o controle, utiliza-se a tecnologia Macromedia Flash. Como resultado, o controle Gráfico, embora não seja um controle de gráfico de ponta, permite que você configure muitas séries de dados e escolha entre gráficos de setores circulares, barras e linhas. Para este tutorial, defina as seguintes propriedades:
    1. Assegure-se de que a Largura e a Altura do Painel Tabulado já estejam definidas para 700 pixels e 250 pixels, respectivamente. As dimensões são para a área de gráfico inteiro, incluindo as legendas e o título.
    2. Na guia odc:graphDraw, marque as caixas de opções para a propriedade Exibir Gráficos para ativar todos os três tipos de gráficos possíveis (Setores Circulares, Barras, Linhas).
    3. Selecione Barras no campo Exibir Inicialmente.
    4. Marque a caixa de opções Mostrar Legenda.
    5. Digite Portfólio para Título do Gráfico.
    6. Em Opções de Exibição à esquerda da visualização Propriedades, digite Ações para Opções de Exibição do Eixo X.
    7. Digite Dólares para Opções de Exibição do Eixo Y.
  3. Ligue os dados ao componente Gráfico. O controle Gráfico utiliza os dados como uma ou mais séries com as mesmas informações do eixo X. A melhor maneira de ilustrar isso é com uma tabela. Suponha que você tenha uma estrutura de dados que seja uma lista de registros de informações de compra de ações. Cada objeto possui três atributos: o nome da ação, a quantidade comprada e o preço de compra. Você pode visualizar os dados da seguinte forma:

    Ação

    Quantidade

    Preço

    IBM

    100

    58

    IBM2

    250

    130

    IBM3

    1000

    100

    IBM4

    500

    82

    Para criar gráfico disso, você precisa primeiro da própria lista como um ponto de âncora. Depois, precisa designar qual coluna deve ser utilizada como eixo X e, por último, indicar cada coluna que representará cada série de dados. Portanto, por exemplo, se você desejasse criar gráfico das quatro compras de ações e mostrar as informações sobre quantidade e preço lado a lado, especificaria as colunas de quantidade e preço como série de dados.

    Para este tutorial, crie um gráfico do conteúdo de um portfólio, ligue a propriedade posições e desenhe, lado a lado, o valor atual de cada ação e a quantidade apropriada.

    1. Na visualização Dados de Cliente, arraste o nó raiz.usuários.portfólios.posições para o controle Gráfico.
    2. Selecione o controle Gráfico na visualização de design.
    3. Na guia Valores do Eixo X na visualização Propriedades, selecione símbolo para ser empregado como seus dados do eixo X.
    4. Clique na guia Valores do Eixo Y na visualização Propriedades. Aqui você incluirá a série de dados.
    5. Clique no botão Incluir Série e configure cada série de dados. Para este tutorial, selecione preço no pull-down de valores na janela Incluir Série. Altere o campo Nome da Série para Preço. Siga as mesmas etapas para criar uma outra série de dados para quantidade.
    6. Digite um nome para cada série, que será mostrado como rótulo no gráfico.

    Nota: Se houver dados com linhas duplicadas, por exemplo, ponto de múltiplos dados para uma determinada ação, você poderá agrupar elementos de dados semelhantes, selecionando a caixa de opções Valores do grupo.

    Se você estiver agrupando os valores, precisará escolher qual função será utilizada para reunir dois ou mais elementos de dados que estão agrupados. O sistema suporta funções básicas, como soma, média, mínimo, máximo, primeiro e último. Se você tiver apenas duas séries de dados, poderá escolher para criar gráfico delas em conjunto, mas desenhar seus rótulos do eixo Y em cada lado do gráfico para que tenha um eixo Y à esquerda e um eixo Y à direita. Escolha a função SOMA para agrupar os dados porque há várias entradas para a mesma ação. No painel Formato de Dados, selecione o formato para cada série de dados. É importante, ao mostrar dados numéricos para a instância, especificar quantas casas decimais devem ser mostradas. As opções de formatação comportam-se exatamente como para o Gráfico.

Componente Gráfico no Painel Gráfico

Gerenciar as Rotinas de Tratamento de Eventos

O componente Gráfico não possui eventos porque não permite qualquer entrada do usuário; todos os eventos de exibição são gerenciados internamente pelo controle Flash. Ele apenas responde a outros eventos da página e, como resultado, atualiza sua exibição.

Editar os Estilos

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

Agora você está pronto para iniciar o Exercício 3.5: Testando no Servidor.

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