Exibir Informações Dinâmicas em Páginas da Web com JavaServer Faces > Módulo 2: Incluir Recursos Avançados >
< Anterior | Próximo >

Lição 2.2: Utilize o Componente Upload de Arquivo

Utilize essa lição para aprender como fornecer aos usuários a capacidade de fazer upload de imagens para os anuncios classificados. Essa função é particularmente importante nas páginas new_record.jsp e update_record.jsp. O componente upload de arquivo permite que os usuários procurem em seus sistemas de arquivos, façam upload de um arquivo para o banco de dados e façam com que esse arquivo seja mostrado no banco de dados imediatamente.

Como o procedimento para utilizar o componente upload de arquivo é semelhante nos casos de criação e atualização, este exercício permitirá que a página de atualização altere a imagem atual para qualquer listagem. Se você quiser, poderá fazer as mesmas alterações na página de novo registro quando terminar com a página de atualização.

Inclua a Foto Atual na Página

Você notará que o formulário de atualização não é nada mais que uma tabela HTML com texto estático e componentes de entrada ligados a colunas no registro relacional update_record. Conhecendo isso, é possível incluir linhas e colunas para modificar o formulário da mesma forma que modificaria uma tabela HTML. Nas etapas seguintes, você incluirá uma nova linha para mostrar a foto atual.

Incluir linhas e colunas é mais complicado em uma tabela de dados que exiba uma lista de registros relacionais. Para obter informações sobre a inclusão de colunas em uma tabela de dados, consulte Lição 1.2: Conectar-se a um Banco de Dados e Exibir Dados em uma Página da Web.

  1. Dê um clique duplo na página update_record.jsp na visualização Explorador de Projetos (Project Explorer).
  2. Posicione o cursor na primeira célula (em cima à esquerda) da tabela. Essa célula é chamada ID.
  3. No menu principal, clique em Tabela (Table) > Especificar e Incluir (Specify and Add). O diálogo Incluir Linhas ou Colunas (Add Rows or Columns) é aberto. Clique em Linhas (Rows), em seguida, Acima da Célula Selecionada (Above the selected cell). Isso criará uma nova linha no início da tabela, que conterá a foto atual para o registro. Clique em OK.
  4. Na célula à esquerda dessa nova linha, digite Foto atual: (Current photo:) para agir como uma etiqueta.
  5. Arraste um componente Imagem (Image) na gaveta Componentes Faces da Paleta para a célula mais à direita da nova linha. Diferentemente do exercício anterior, você permitirá que o usuário veja a imagem completa sem restringir o tamanho, portanto, não altere a largura e a altura na visualização Propriedades (Properties).
  6. Ligue o componente de imagem à coluna FOTO (PHOTO) de update_record, arrastando a coluna FOTO (PHOTO) da visualização Dados da Página (Page Data) para o novo componente de imagem. O componente de imagem está ligado agora à coluna FOTO (PHOTO) do banco de dados.
  7. Na imagem de gráfico ainda selecionada, vá para a visualização Propriedades (Properties) e clique em Selecionar Objeto de Dados da Página (Select Page Data Object) próximo ao campo Tipo (Type). A janela Selecionar Objeto de Dados da Página (Select Page Data Object) será aberta.
  8. Clique em update_record (Objeto de Dados do Serviço) (Service Data Object) > update_record (ADS) > IMAGETYPE (Cadeia) (String).
  9. Clique em OK. Agora, a página mostra a foto atual do anúncio classificado, se ele tiver uma. Sua página agora deve ser semelhante a esta:
    Aparência atual da página (Current page appearance).

Incluir o Componente de Upload de Arquivo na Página

Em seguida, inclua uma nova linha no final da tabela para conter o componente de upload de arquivo.
  1. Posicione o cursor na última linha clicando nela.
  2. Na barra de menus, clique em Tabela (Table) > Incluir Linha Abaixo (Add Row Below).
  3. Na primeira célula da nova linha, digite Nova Foto: como a etiqueta.
  4. Arraste um componente Upload de Arquivo (File Upload) da gaveta Componentes Faces Avançados (Enhanced Faces Components) da Paleta para a última célula da nova linha.
  5. Da mesma maneira que você ligou o componente de imagem, ligue o componente de upload de arquivo à coluna PHOTO do registro relacional update_record. {FOTO} ({PHOTO}) é mostrado no campo de texto para mostrar que esse componente está ligado à coluna FOTO (PHOTO) e que o arquivo transferido por upload será colocado nessa coluna. Sua página agora deve ser semelhante a esta:
    Aparência atual da página (Current page appearance).
  6. Salve a página e teste-a, se quiser.

Ponto de Verificação do Exercício

Você concluiu a Lição 2.2. Nela, você aprendeu como manipular a tabela na página de atualização, incluir uma foto atual na tabela e incluir um componente de upload de arquivo na tabela.

< Anterior | Próximo >