Programação - Dynamic HTML
DHTML no Internet Explorer 4.0
A implementação DHTML, apresentada pela Microsoft na versão 4.0 do Internet Explorer, cobre quatro áreas principais que, na perspectiva do criador de conteúdo para a Web, lhe oferecem novas funcionalidades extremamente interessantes. Essas áreas são:
É possível alterar dinâmicamente qualquer atributo CSS (Cascading Style Sheet) de qualquer texto. Entre esses atributos incluem-se, por exemplo: cores, visibilidade, fonts, etc.
Possibilita o posicionamento de objectos na página através da manipulação de determinados atributos CSS (top, right, etc).
Permite adicionar, eliminar ou modificar qualquer porção de texto ou gráficos em qualquer posição da página.
É possível apresentar, manipular e actualizar os dados da página, estabelecendo ligações entre os dados e tags HTML.
Nota: Os exemplos apresentados nesta página apenas funcionarão correctamente com o Microsoft Internet Explorer 4.0 ou superior.
Estilos Dinâmicos
A utilização de Cascading Style Sheets permite controlar a apresentação de uma página Web. Utilizando DHTML, torna-se possível criar efeitos interactivos alterando qualquer um dos atributos de estilo de qualquer um dos elementos da página.
É possível alterar as definições de estilo local ou globalmente, utilizando três técnicas diferentes:
Mova o mouse sobre este texto para o ver mudar de cor
O código a incluir na página é o seguinte:
<HEAD>
<SCRIPT LANGUAGE="VBScript">
<--
sub makeRed_onMouseOver
makeRed.style.color
= "red"
end sub
sub makeRed_onMouseOut
makeRed.style.color
= "blue"
end sub
// -->
</SCRIPT>
</HEAD>
<BODY>
...
<SPAN ID="makeRed"
style="color:blue;">Mova o rato sobre este texto para o ver mudar de cor</SPAN>
...
</BODY>
Na prática cada elemento da página tem um conjunto de eventos a que pode responder. Existem 5 tipos principais de eventos: "keyboard", "mouse", "focus-related", "element-specific" e "events for specific objects". Eis alguns exemplos:
Finalmente, todos os objectos têm a propriedade "visibility" que permite controlar a sua visibilidade e, por exemplo, colocar numa página objectos escondidos que apenas será mostrados ao utilizador mediante certas condições.
Assim, para tornar um determinado visível ou invisível deve, respectivamente, fazer:
Uma outra funcionalidade importante do DHTML é a facilidade de posicionar e dimensionar qualquer elemento da página utilizando coordenadas simples (top, left, right, width, etc). Isto para além da possibilidade de controlar a "Z-order" dos objectos (que define a sua sobreposição vertical), o que permite, por exemplo, colocar uma imagem sobre outra.
O posicionamento dos objectos pode ser efectuado de duas formas distintas:
Neste caso as coordenadas do objecto são definidas em relação ao objecto que o contém, ou seja, ao pai do objecto. O pai por defeito será o BODY do documento. O canto superior esquerdo do objecto pai define a coordenada (0,0) e as coordenadas do objecto podem ser definidas como valores numéricos ou percentuais (para suportar diferentes resoluções do ecrã do utilizador).
Exemplo:
<DIV
ID="o1" STYLE="position:absolute; left:50; top:100; width:66; height=33;">
<IMG SRC="mouse.gif">
</DIV>
Neste caso as coordenadas do objecto são definidas em relação à posição em que este estaria normalmente na página (segundo o funcionamento puro do HTML). Por exemplo, se definir a coordenada TOP igual a -100, o objecto apareceria 100 pixels acima da sua posição natural.
Exemplo:
<DIV
ID="o2" STYLE="position:relative; left:50; top:25;">
Texto aqui
</DIV>
<DIV
ID="o3" STYLE="position:absolute; z-index:11;">
<IMG SRC="sphere.gif">
</DIV>
Conteúdo Dinâmico
Utilizando DHTML, é perfeitamente possível e simples modificar o conteúdo de uma página sem necessidade de intervenção do servidor.
Sempre que o conteúdo da página for modificado, esta será redesenhada, de forma a englobar o novo conteúdo da melhor forma.
É possível, por exemplo, alterar o texto de qualquer elemento da página. Uma forma de o fazer, através de uma script, é criar um ID para o objecto e utilizá-lo para referir as propriedades do objecto, como no exemplo seguinte:
Clique para o texto pode mudar
Eis o código:
<HEAD>
<SCRIPT LANGUAGE="VBScript">
<--
sub document_onClick
dim itemID,
itemType
itemID
= window.event.srcElement.id
if itemID
= "thisClick" then
thisClick.innerHTML="Uau!
O texto mudou!"
end if
end sub
// -->
</SCRIPT>
</HEAD>
<BODY>
...
<SPAN ID="thisClick"
style="color:blue; font-weight:bold;">Clique para o texto pode mudar</SPAN>
...
</BODY>
E não pense que as potencialidades em termos de modificar o conteúdo de um documento HTML se ficam por aqui. A implementação DHTML da Microsoft apresenta outras sofisticações como, por exemplo, a facilidade de adicionar, eliminar e substituir tags HTML, procurar texto na página e seleccionar blocos de texto ("text ranges") para manipulação dinâmica.
"Data Binding"
"Data binding" corresponde ao acto de ligar uma "data source" a uma página Web. Essa fonte de dados pode ser tão simples como um ficheiro de texto ou tão complicada como uma base de dados acessível via ODBC.
Utilizando esta ténica, será fácil apresentar páginas HTML que mostram, ordenam e/ou filtram dados provenientes da "data source", isto sem a necessidade de repetidas intervenções do servidor.
Fontes de Informação
Caso pretenda obter mais informação e exemplos sobre a versão DHTML apresentada pelo Microsoft Internet Explorer, aqui ficam alguns links para sites extremamente interessantes sobre o assunto:
Analisado o suporte DHTML no Internet Explorer 4.0 é chegada a altura de o compararmos com o seu rival: o Netscape Navigator 4.0.