< Anterior | Próximo >

Lição 1.2: Incluir e Definir o Layout da Tabela de Funcionários

Nessa lição, você utilizará o editor visual Java para incluir um JScrollPane e um JTable no aplicativo. Em exercícios futuros, você programará o JTable para obter seus dados a partir de um serviço da Web que retorna uma lista de todos os funcionários no diretório da empresa.

Após incluir o JTable, você utilizará a visualização de design do editor visual Java para personalizar o layout do JTable para corresponder às especificações a seguir:

  • Estender JTable por três células horizontalmente e duas células verticalmente
  • Incluir uma inserção à esquerda de 15 pixels
  • Renomear JTable para employeesTable.

Abrir o Arquivo DirectoryApp.java no Editor Visual Java

Para abrir o arquivo DirectoryApp.java no Java Visual Editor:
  1. Na visualização Explorador de Pacotes da perspectiva Java, expanda o projeto MyDirectory e o pacote directory.client.
  2. Clique com o botão direito do mouse no arquivo DirectoryApp.java e selecione Abrir Com (Open With) > Visual Editor. O editor visual Java carrega a classe Java e exibe o design na área de canvas gráfico.
Dica:
  • Para alterar a aparência e o comportamento utilizados pelo editor visual Java, vá para Janela (Window) > Preferências (Preferences) > Java > Visual Editor e especifique uma aparência e comportamento Swing. A preferência terá efeito na próxima vez que você abrir a classe. Este tutorial utiliza a aparência e comportamento do Windows.
  • Para tornar o Visual Editor o editor padrão para todos os arquivos Java, você pode clicar em Janela (Window) > Preferências (Preferences) e ir para a página Workbench > Associações de Arquivos (File Associations), para definir sua preferência.

Incluir uma JTable em um JScrollPane

A janela principal do DirectoryApp.java utiliza um JFrame com um JPanel para seu painel de conteúdo principal. O JPanel em nosso aplicativo é chamado jContentPane. O jContentPane foi definido para utilizar um tipo de gerenciador de layout chamado GridBagLayout. O GridBagLayout é um poderoso esquema de layout com base em uma grade de células que podem ser ocupadas pelos componentes de visual. O editor visual Java torna fácil o trabalho com o GridBagLayout mostrando as bordas das grades. Ele também mostra os marcadores de localização quando você solta novos componentes na grade e ele mostra alças nos componentes que você está redimensionando ou movendo no GridBagLayout.

Para incluir a tabela de funcionários (javax.swing.JTable) na interface com o usuário DirectoryApp.java:
  1. Clique com o botão direito do mouse em jContentPane na visualização do design ou dos Java Beans e selecione Mostrar Grade (Show Grid). Uma linha pontilhada vermelha mostra o borda da grade e círculos numerados em azul indicam os números da linha e da coluna. Por exemplo, observe que o botão Novo (New) ocupa a célula na linha 1 (grade y) e a coluna 3 (grade x).

    Grade no Canvas Gráfico

  2. Na paleta do editor visual Java, selecione o componente Swing JTable no JScrollPane JTable no ícone JScrollPane, que é categorizado na gaveta Componentes Swing (Swing components) da paleta.
    Dica: Por padrão, a paleta é reduzida no lado direito da área de design. É possível redimensionar e mover a paleta.
  3. Mova o ponteiro do mouse sobre a célula na grade na coluna 0, linha 1:

    Posicionamento de Drop na Grade

    • Conforme você move o ponteiro do mouse sobre a grade, esse ponteiro mostra dois quadrados numerados que indicam as coordenadas x e y na grade com base no local do ponteiro do mouse.
    • Se você passar o ponteiro do mouse diretamente em uma borda de grade, novas linhas e colunas podem ser criadas e linhas e colunas existentes serão renumeradas. Nesse caso, quadrados amarelos no ponteiro do mouse, barras amarelas entre as grades e etiquetas amarelas de colunas e linhas indicam este comportamento e apontam o impacto que o posicionamento terá.
  4. Clique com o botão esquerdo em JScrollPane e JTable na célula na coluna 0 e linha 1:

    Tabela Dropped na Grade

Expandir JScrollPane e JTable em Várias Colunas e Linhas da Grade

Agora é necessário fazer JScrollPane (e seu filho JTable) expandir em 3 colunas e 2 linhas para um melhor comportamento de espaçamento e redimensionamento. Para fazer a tabela estender as colunas e linhas:
  1. Selecione JScrollPane na área de design ou exibição Java Beans (ainda deve estar selecionada, pois acabou de ser incluída). Observe os pequenos quadrados verdes no canto inferior direito do JScrollPane. Você utilizará estas alças de redimensionamento para arrastar o JScrollPane para expandir várias colunas e linhas.
  2. Clique e segure o botão esquerdo do mouse na alça verde no lado direito de JScrollPane.
  3. Arraste o ponteiro do mouse para a direita até que o posicionamento do cursor indique coluna 2, linha 1. Uma sombra cinza escura também indicará as células que o componente ocupará quando você soltar o botão do mouse.

    Tabela Arrastada para Estender Três Colunas

  4. Solte o botão do mouse. Agora o JScrollPane foi estendido em 3 colunas.
  5. Repita o processo semelhante para arrastar a alça inferior do JScrollPane até que JScrollPane seja estendido na linha 2:

    Tabela Arrastada para Estender 2 Linhas

Personalizar o Espaçamento do JScrollPane Dentro de GridBag

Um outro recurso do gerenciador GridBagLayout é que você pode especificar diversos limites para personalização do layout. Por exemplo, é possível especificar as seguintes restrições:
  • âncora: (anchor:) Um componente pode receber uma orientação de âncora dentro de sua célula, que afetará como o componente se move conforme o aplicativo é redimensionado por um usuário. Por exemplo, um componente poderia ser ancorado no canto superior esquerdo, médio esquerdo, centro ou inferior direito.
  • preencher: (fill:) Um componente pode ser indicado para ocupar todo o espaço disponível dentro de sua célula ou células, horizontalmente, verticalmente ou ambos.
  • inserção: (insets:) Um componente pode ser indicado para seu próprio preenchimento superior, inferior, à esquerda e à direita, para fornecer espaçamento entre o componente e a linha da grade.

Para personalizar a âncora, o preenchimento e as inserções para JScrollPane:

  1. Clique com o botão direito do mouse em JScrollPane na visualização de design ou dos Java Beans e selecione Customizar Layout (Customize Layout).

    Menu Pop-up em jScrollPane

    Dica: A caixa de diálogo Customizar Layout (Customize Layout) pode permanecer aberta como selecionada e alterar o layout para diferentes componentes. É possível abrir a caixa de diálogo Customizar Layout (Customize Layout) a qualquer momento, clicando no botão Customizar Layout (Customize Layout) na barra de menus:

    ícone do menu Customizar Layout (Customize Layout)

  2. Na guia Componente (Component) da caixa de diálogo Customizar Layout (Customize Layout), certifique-se de que o botão Centro de Âncora está pressionado.
  3. Certifique-se de que os botões Preenchimento Horizontal (Fill horizontal) e Preenchimento Vertical (Fill vertical) estão pressionados.
  4. Inclua uma inserção à esquerda de 15 (pixels) para tornar o espaçamento à esquerda do JScrollPane semelhante aos outros componentes visuais no aplicativo.

    Caixa de Diálogo Customizar Layout (Customize Layout)

    A tabela agora alinha-se com a etiqueta Filtro (Filter), por exemplo.

    Caixa de Diálogo Customizar Layout (Customize Layout)

Renomear o Novo JTable para um Valor Útil e Definí-lo para Selecionar uma Única Linha

Como você trabalhará posteriormente com a tabela, será viável renomear a instância do JTable e seu método getter. Para renomear a tabela:
  1. Na visualização Java Beans, clique com o botão direito do mouse no componente jTable e selecione Renomear Campo (Rename field) no menu pop-up.

    Menu Pop-up em jTable

  2. Digite employeesTable e clique em OK. O JTable está renomeado para employeesTable, e o método para sua instância é getEmployeesTable.
  3. Configure a tabela para permitir apenas uma única linha a ser selecionada:
    1. Selecione employeesTable na visualização de design.
    2. Na visualização Propriedades, selecione a propriedade selectionMode e a defina como SINGLE_SELECTION.

      Visualização Propriedades Mostrando SINGLE_SELECTION em JTable

    3. Salve o arquivo DirectoryApp.java.

Ponto de Verificação da Lição

Nessa lição, você aprendeu como utilizar o editor visual para incluir uma tabela em uma interface com o usuário existente. Em seguida, você aprendeu como customizar seu layout, posicionamento e espaçamento.

< Anterior | Próximo >