Exercício 2.3: Utilizando o Componente Upload de Arquivo

Antes de iniciar, você precisa concluir o Exercício 2.2: Formatando uma Tabela de Dados.

Agora que está exibindo a coluna PHOTO, você deve fornecer ao usuário a capacidade de fazer upload de fotos para os anúncios 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.

Incluindo a Foto Atual na Página

Mostre-me

Você notará que o formulário de atualização não é nada mais que uma tabela HTML com algum texto estático e alguns componentes de entrada ligados a colunas no registro relacional update_record. Conhecendo isso, você pode 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 como incluir colunas em uma tabela de dados consulte Ajustando a Tabela de Dados Padrão no Exercício 1.2: Trabalhando com os Componentes Lista de Registros Relacionais e Tabela de Dados.

  1. Dê um clique duplo na página update_record.jsp na visualização Explorador de Projetos.
  2. Posicione o cursor na primeira célula (em cima à esquerda) da tabela. Essa célula é chamada ID.
  3. Na barra de menus, clique em Tabela > Incluir Linha > Incluir Acima para criar uma nova linha no início da tabela, que conterá a foto atual para o registro.
  4. Na célula mais à esquerda dessa nova linha, digite Foto atual: para agir como uma etiqueta.
  5. Arraste um componente Imagem 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.

  6. Ligue o componente de imagem à coluna PHOTO de update_record, arrastando a coluna PHOTO da visualização Dados da Página para o novo componente de imagem. O componente de imagem está ligado agora à coluna PHOTO do banco de dados.
  7. Na visualização Propriedades, clique no botão Selecionar Objeto de Dados da Página próximo ao campo Tipo. A janela Selecionar Objeto de Dados da Página será aberta.
  8. Clique no símbolo + para expandir o registro relacional update_record.
  9. Clique em IMAGETYPE (String).
  10. Clique em OK.

    Agora, a página mostra a foto atual para o anúncio classificado, se ele tiver uma. A página deve ter esta aparência:

    Aparência da Página Atual

Incluindo o Componente Upload de Arquivo na Página

Mostre-me

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 dentro da célula que contém o texto Telefone:.
  2. Na barra de menus, clique em Tabela > Incluir Linha > Incluir Abaixo.
  3. Na primeira célula da nova linha, digite Nova Foto: como a etiqueta.
  4. Arraste um componente Upload de Arquivo da gaveta Componentes Faces 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. {PHOTO} é mostrado no campo de texto para mostrar que esse componente está ligado à coluna PHOTO e que o arquivo transferido por upload será colocado nessa coluna.

    A página deve ter esta aparência:

    Aparência da Página Atual

  6. Salve a página e teste-a, se quiser.

Você está pronto para iniciar o Exercício 2.4: Utilizando Regras de Navegação.

Termos de Uso | Feedback
(C) Copyright IBM Corporation 2000, 2004. Todos os Direitos Reservados.