O componente Imagem oferece uma forma de adicionar uma imagem, como um arquivo JPEG, GIF ou PNG, a uma página JSF Visual Web.
Este componente possui suporte para funções JavaScript do lado do cliente que permitem realizar ações no cliente sem voltar ao servidor. Para obter mais informações sobre este recurso avançado, escolha Ajuda > Referência Javadoc > Biblioteca de marcas do Projeto Woodstock 4.2 e vá até webuijsf:image.
Ao soltar a imagem na página no Visual Designer, é exibida um quadro simples com a palavra Imagem nele. Se clicar com o botão direito do mouse neste quadro e escolher Definir imagem, é exibida uma caixa de diálogo que pode ser usada para especificar a imagem de três formas:
Escolher arquivo. Você pode ir até um arquivo do sistema de arquivos e clicar em OK. O arquivo de imagem é copiado para o projeto, e você pode vê-lo na em nome-do-projeto > Páginas da Web > recursos. A escolha desta opção define a propriedade url do componente Imagem como /resources/arquivo-de-imagem.
Inserir URL. Insere no arquivo um URL para um local da Web. Por exemplo, insere o seguinte URL:
.
A escolha desta opção define a propriedade url do componente Imagem como o URL inserido.
Definir ícone do tema. Exibe uma lista de ícones que estão no tema associado à aplicação. Selecione um nome de ícone na lista para exibi-lo na caixa de diálogo. A escolha desta opção define a propriedade icon do componente Imagem como o nome do ícone escolhido.
Se a propriedade url já estiver definida, a escolha de um ícone não altera a aparência do componente, pois a propriedade url tem prioridade sobre a propriedade icon. Para que o ícone esteja visível, a propriedade url não deve estar definida.
Outra forma de adicionar uma imagem à página é arrastar o nó do arquivo de uma caixa de diálogo do explorador de arquivos para a página. Por exemplo, se abrir o explorador de arquivos do Microsoft Windows e for até uma imagem GIF, você pode arrastar o seu nó para a página e soltar o arquivo de imagem onde quiser que ele seja exibido na página. O IDE adiciona o arquivo ao diretório resources, que pode ser visto na pasta nome-do-projeto > Páginas da Web na
Depois de soltar o componente na página, você pode selecioná-lo e editar suas propriedades na janela Propriedades do componente Imagem. Se necessário, clique com o botão direito do mouse no componente e escolha Propriedades para exibir a janela Propriedades. Além das propriedades descritas acima que especificam a imagem que será exibida, algumas propriedades típicas que podem ser definidas são:
id. O nome do componente Imagem. No arquivo JSP, este nome é o valor do atributo id do componente. No bean de página, o valor desta propriedade é o nome do objeto Image.
alt. O texto alternativo da imagem. O texto alt descreve o elemento gráfico na página HTML, pode ser lido por leitores de tela, pode ser exibido como uma dica de ferramenta e é exibido quando o usuário tem a visualização de imagens desativada no navegador da Web. Equivale ao atributo HTML alt da marca <img>.
align. A posição da imagem em relação ao seu contexto na página. Selecione uma posição na lista suspensa para alinhar a imagem a outros componentes.
borda. Especifica a largura da borda da imagem em pixels. O valor padrão desta propriedade depende do navegador do cliente.
Você pode clicar com o botão direito do mouse no componente e selecionar uma destas opções:
Vincular aos dados. Abre a caixa de diálogo que permite vincular a propriedade url do componente a um objeto ou a um provedor de dados que fornece seu valor para que você possa atualizar dinamicamente a imagem. Para obter mais informações, consulte Caixa de diálogo Vincular aos dados.
Definir imagem. Abre a caixa de diálogo que permite definir a imagem de um arquivo ou um ícone. Ao especificar a imagem nesta caixa de diálogo, as propriedades adequadas são definidas. A propriedade url especifica uma imagem em um arquivo ou em um URL na Web. A propriedade icon especifica um ícone no tema padrão.
Vinculações de propriedade. Abre a caixa de diálogo que permite vincular as propriedades dos componentes, além da propriedade url, a outros objetos ou propriedades que atualizam automaticamente estas propriedades do componente.
Adicionar atributo de vinculação. Essa opção adiciona um atributo de vinculação ao componente
Observação: se você planeja fazer o script do componente em código Java, deve adicionar um atributo de vinculação manualmente, que é vinculado usando uma expressão vinculadora de valor a uma propriedade do bean da página de backup.
Remover atributo de vinculação Essa opção remove o atributo de vinculação do componente.