Como utilizar imagens em aplicações web

Este tutorial descreve o Image utilização de componentes em aplicações web.

Look & Feel

• Upload - é possível predefinir uma imagem premindo o botão e seleccionando uma imagem do sistema de ficheiros;

• Image alt [string] - também chamada alt tags e alt descriptions, alt text é a cópia escrita que aparece no lugar de uma imagem numa página web se a imagem não for carregada no ecrã de um utilizador. Este texto ajuda as ferramentas de leitura de ecrã a descrever imagens a leitores com deficiências visuais e permite aos motores de busca rastejar e classificar melhor o seu sítio web;
• Width [string] - largura da imagem por defeito;
• Height [string] - altura da imagem por defeito;
• Visible [boolean] - define se a imagem é visível ou não;
• Name [string] - nome do componente;

Processos empresariais relacionados

A imagem em HTML é uma referência ao próprio objecto de imagem. Portanto, Image trabalha sempre com links e, para utilizar dados de imagem, é necessário obter um link para o mesmo.

O seguinte BPs são pré-gerados para utilização em aplicações web:

• Image Get Properties - obtém propriedades de imagem:
  • Component ID [string] - identificador do componente;
  • Width [string] - largura da imagem;
  • Height [string] - altura da imagem;
  • Image URL [string] - endereço URL da imagem;
  • Tooltip [string] - fio de ferramentas a ser mostrado em pairar;
  • Visible [boolean] - define se a imagem é visível ou não;
  • Loading [boolean] - coloca a imagem em estado de "carregamento" se true;

• Image Set Properties - repõe todas as propriedades da imagem seleccionada e, em vez disso, define as propriedades dadas:
  • Component ID [string] - identificador do componente;
  • Width [string] - largura da imagem;
  • Height [string] - altura da imagem;
  • Image URL [string] - endereço URL da imagem;;
  • Tooltip [string] - fio de ferramentas a ser mostrado em pairar;
  • Visible [boolean] - define se a imagem é visível ou não;
  • Loading [boolean] - coloca a imagem em estado de "carregamento" se true;

• Image Update Properties - actualiza as propriedades da imagem:
  • Component ID [string] - identificador do componente;
  • Width [string] - largura da imagem;
  • Height [string] - altura da imagem;
  • Image URL [string] - endereço URL da imagem;
  • Tooltip [string] - fio de ferramentas a ser mostrado em pairar;
  • Visible [boolean] - define se a imagem é visível ou não;
  • Loading [boolean] - coloca a imagem em estado de "carregamento" se true;

Exemplo de utilização

Considere um exemplo de carregamento de um avatar de perfil de utilizador. A interface web consiste numa imagem e num botão que dispara o BP, e tem este aspecto:

A BP começa a partir de onClick gatilho. Para escolher os ficheiros a partir do sistema de ficheiros do dispositivo do utilizador Select Files bloco é utilizado (Max files = 1, File types = Image). Se o ficheiro for escolhido com sucesso, o elemento de matriz com index=0 a ser seleccionado.

O elemento do ficheiro resultante da Files deve ser carregada para o servidor de aplicações web para posterior utilização (Server request POST /_files/). Se o pedido for bem sucedido, o objecto de ficheiro à saída doServer request POST /_files/ bloco é passado para a entrada do Expand file bloco para obter o seu ID.

Para obter o URL, é necessário levar o ficheiro ID e converter o seu valor numa corda (To String). O caminho relativo do ficheiro seria /api/_files/<ID>/download/. Assim, para carregar uma imagem, o caminho do ficheiro tem de ser passado para a Image URL propriedade da Image Update Properties bloco.

A aplicação publicada está no exemplo abaixo