Tag image

.html ›› .html ›› .html ››
Parent Previous Next

Tag IMAGE

       A tag/componente image representa uma imagem na interface visual.


Herança

O image possui todas as características de um controle qualquer. Veja Características de todas as tags visuais.


Características

Além das características herdadas, o image também possui as seguintes características:


Propriedades e Atributos

Propriedade

Tipo

Valor Padrão

Descrição

animate

Boolean

false

Define se deve executar a animação de imagens que são animadas (exemplo: GIF, GIFV) quando suportadas.


url, src ou imageURL

String

<string vazio>

Define a URL/caminho de onde se encontra a imagem!


Este valor:

  • Pode ser um endereço de internet (exemplo: “http://xxxx.com.br/a.png”) 
  • Pode ser o caminho de um arquivo contido no pacote do plugin.
  • Pode ser um arquivo que se encontra no HD Virtual do plugin instalado.


style ou showStyle

Enumerado:

  • “proportional”
  • “autoFit”
  • “originalSize”
  • “stretch”

“proportional”


Define como a imagem será apresentada na interface:


“proportional”:

A imagem será redimensionada, proporcionalmente, para o tamanho do controle, não necessariamente ocupando todo o espaço disponível.


“autoFit”:

A imagem será exibida de forma que SEMPRE ocupe TODO o espaço do controle da forma mais adequada, isto é, aumentando/diminuindo a imagem, centralizando-a e cortando excessos.


“originalSize”:

A imagem será apresentada no tamanho original, sem redimensionamento.


“stretch”:

A imagem será redimensionada de forma que ocupe todo o espaço disponível no controle, podendo achatar ou alongar a imagem.


center

Boolean

true

Quando true, a imagem será exibida de forma centralizada no controle.


Esta propriedade é válida apenas quando a propriedade “showStyle” for “proportional” ou “originalSize”


optimizeQuality ou 

optimize

Boolean

false

Quando true, o SDK salvará uma cópia da imagem já redimensionada de acordo com a propriedade “style”.


Utilize este atributo apenas em controles image que não sofrem constante mudança de tamanho.


showProgress

Boolean

true

Quando true, o controle exibe uma barra de carregamento para informar que a imagem está sendo baixada.


Quando false, a imagem definida pela propriedade “URLWhileLoading” é exibida enquanto o download é feito.


URLWhileLoading

String

<string vazio>

Define a URL/caminho da imagem que é exibida APENAS enquanto a imagem principal (definida na propriedade “url”) é carregada.


Este valor:

  • Pode ser um endereço de internet (exemplo: “http://xxxx.com.br/a.png”) 
  • Pode ser o caminho de um arquivo contido no projeto do plugin
  • Pode ser um arquivo que se encontra no HD Virtual do plugin instalado.


field

String

<string vazio>

Caminho de um campo no NodeDatabase.


Quando associado, a imagem passa a apresentar a imagem de URL contida no campo do NodeDatabase informado.


Veja também:


editable

Boolean

false

Quando True, a tag permite o usuário alterar a URL da imagem.


Se o atributo "field" estiver preenchido, a URL escolhida pelo usuário é salva no campo do NodeDatabase.


naturalAnimated

Boolean

false

(Somente Leitura) Quando a imagem tiver sido carregada, contém a informação se ela suporta animação.


naturalWidth

Double

0

(Somente Leitura) Quando a imagem tiver sido carregada, contém a largura original da imagem em pixels.  


naturalHeight

Double

0

(Somente Leitura) Quando a imagem tiver sido carregada, contém a altura original da imagem em pixels.

 


Eventos

Nome do evento

Descrição

onLoad

Este evento é invocado quando a imagem tiver sido carregada.


onPictureLoadedChange

Este evento é invocado quando a imagem que será exibida mudou.


Este evento é chamado quando a imagem é carregada 100% ou quando uma imagem é descarregada.




Veja Tratando eventos do Lua Form


Exemplos


Exemplo 1 - Imagem dentro do projeto de plug-in

Neste exemplo, existe uma pasta chamada "imagens" dentro da pasta projeto do plug-in, e dentro desta pasta existe a imagem "fenix.png".


<?xml version="1.0" encoding="UTF-8"?>
<form name="frmFichaTeste"> 

        <image left="20" top="20" width="200" height="200" src="/imagens/fenix.png"/>

</form>





Exemplo 2 - Imagem baixada por URL e diversos styles


<?xml version="1.0" encoding="UTF-8"?>
<form name="frmFichaTeste"> 

        <image left="20" top="20" width="400" height="200" style="autoFit"                
               src="http://fc03.deviantart.net/fs70/i/2011/234/5/4/dragon_aspects_by_rattlesnakedefender-d47ii5y.jpg"/>
</form>





style="proportional"


style="autoFit"



style="originalSize"


style="stretch"

Created with the Personal Edition of HelpNDoc: Free EPub and documentation generator