Posicionamiento Dinámico (I)

Entendemos por posicionamiento dinámico la capacidad de situar un elemento en cualquier posición
de la página dependiendo de unas coordenadas, y no de la situación relativa del elemento respecto al
resto de elementos de la página. Esta funcionalidad se adquiere mediante los estilos, y concretamente
utilizando los atributos position, top, left y z-index a los valores de estilo que se deseen.

Otras novedades que aporta DHTML a través de ejemplos

Vamos a ver algunos ejemplos de funcionamiento de las posibilidades de Posicionamiento Dinámico,
Filtros, Descarga de Tipos de Letra (Font Download) y Enlaces de datos.

Ejemplo de Creación Dinámica de Tablas mediante el modelo DHTML (IV)

Podemos ver que el mecanismo utilizado aquí es ligeramente diferente, ya que los elementos se crean
invocando los nombres estándar de cada objeto por su definición HTML: TABLE, TBODY, TR y TD.
Una vez creados, es preciso asignarlos un lugar dentro del árbol jerárquico, lo que se consigue
mediante el método appendChild (añadir nodo hijo), siguiendo el orden natural de la estructura de la
tabla: primero se añade la tabla al objeto body del documento, después el objeto oTBody a la tabla, a
continuación se le añade el objeto oFila, y finalmente, se añaden las dos celdas a la fila. Para concluir,
como las celdas están vacías por defecto, se les asigna un valor.
Sin embargo hay un cambio más respecto al modo de trabajo anterior: no hemos asignado ningún
formato a la tabla ni a las filas, por lo que el borde de la tabla será 0, y sólo se visualizarán los
contenidos (“Celda 1”, “Celda 2” y “Celda 3”), sin ver la tabla que los contiene. Si queremos repetir la
situación que hemos creado antes, dando un borde a la tabla y asignándole un color de fondo, tenemos
que crear esos atributos explícitamente, o bien copiarlos a partir de los atributos asignados a otro
objeto similar.
Por ejemplo podríamos hacer que nuestra tabla oTabla, heredara los atributos de la primera tabla
utilizando el método mergeAttributes, que tienen casi todos los objetos. Bastaría una sola línea de
código para que la tabla tuviera borde igual a 1, y color azul.

oTabla.mergeAttributes(Tabla)

Código fuente 24
Esto significa que cualquier elemento puede ser destruido o creado a partir de código fuente y como
respuesta a un evento de usuario y/o sistema.

Ejemplo de Creación Dinámica de Tablas mediante el modelo DHTML (III)

Obtenemos la ventana de la Figura 20, donde se ven los elementos <TBODY> enmarcando al resto de
la tabla creada.

Sin embargo, para crear una tabla dinámica mediante DOM, debemos crear explícitamente los
elementos <TBODY>, si no queremos que los resultados sean impredecibles. El código
correspondiente al mismo procedimiento mediante DOM sería el que muestra el Código fuente 23.

Dim oTabla, oTBody, oFila, oCelda, oCelda2, oCelda3
Set oTabla =document.createElement("TABLE")
Set oTBody =document.createElement("TBODY")
Set oFila =document.createElement("TR")
Set oCelda =document.createElement("TD")
Set oCelda2=oCelda.cloneNode() 'Crea una nueva celda a partir de la anterior
Set oCelda3=oCelda.cloneNode() 'Crea una nueva celda a partir de la anterior
document.body.appendChild(oTabla)
oTabla.appendChild(oTBody)
oTBody.appendChild(oFila)
oFila.appendChild(oCelda)
oFila.appendChild(oCelda2)
oFila.appendChild(oCelda3)
oCelda.innerHTML="Celda 1"
oCelda2.innerHTML="Celda 2"
oCelda3.innerHTML="Celda 3"

Código fuente 23

Ejemplo de Creación Dinámica de Tablas mediante el modelo DHTML (II)

Analicemos la secuencia de comandos de VBScript:
En la variable sTable, se asigna primeramente la definición básica de la tabla y se añade al contenido
del documento (propiedad innerHTML). Desde ese momento, el objeto tabla puede ser referenciado
mediante su nombre: Tabla3. Utilizando los métodos insertRow e insertCell, añadimos a la estructura
las correspondientes marcas <TR> y <TD>, mientras que las colecciones rows y cells nos dan acceso
al contenido de las filas y celdas y a sus valores dinámicos (length nos indica el número de celdas,
etc).
Si asignamos este código al evento Load del documento (puede ser cualquier otro), cuando
visualicemos la página, veremos que en la parte inferior aparece la nueva tabla (Tabla 3), tal y como
ha sido definida, con la particularidad de que DOM ha construido para nosotros un elemento
<TBODY> que no habíamos creado expresamente, ya que al solicitar el código fuente mediante una
caja de mensaje tal y como vemos en el Código fuente 22.

Msgbox oTable1.outerHTML

Código fuente 22

Ejemplo de Creación Dinámica de Tablas mediante el modelo DHTML (I)

En el caso de las tablas, esto significa que debe de contener un elemento <TBODY> dentro del
elemento <TABLE>. El Código fuente 21 crea una tabla nueva al final de documento, conteniendo 3
celdas cuyo contenido son los textos “Celda 1”, “Celda 2” y “Celda 3”, utilizando el modelo DHTML:

Dim sTable
sTable ="<TABLE Border='1' ID='Tabla3'></TABLE>"
document.body.innerHTML=document.body.innerHTML & sTable
Tabla3.insertRow(oTable1.rows.length)
Tabla3.rows(0).insertCell(oTable1.rows(0).cells.length)
Tabla3.rows(0).insertCell(oTable1.rows(0).cells.length)
Tabla3.rows(0).insertCell(oTable1.rows(0).cells.length)
Tabla3.rows(0).cells(0).innerHTML="Celda 1"
Tabla3.rows(0).cells(1).innerHTML="Celda 2"
Tabla3.rows(0).cells(2).innerHTML="Celda 3"

Código fuente 21

Una vista jerárquica del modelo de objetos DOM (III)

Tenemos, pues, una jerarquía híbrida de cara al programador, que permite acceder a los elementos
mediante varios métodos. Aquí nos centraremos, sobre todo, en el modelo de objetos de documento
(DOM), que constituye una evolución consistente del modelo DHTML, y que se encuentra disponible
en la versión de Internet Explorer 5.0 y posteriores.
Parece sólito comentar aquí las ventajas del modelo DOM respecto al anterior. Entre otras cosas, un
programador puede:
• Mover una parte del árbol de documento a otra sin destruir ni recrear el contenido.
• Crear elementos nuevos y asignarles a cualquier parte del árbol de documento.
• Organizar y manipular ramas nuevas o ya existentes, antes de insertar nuevos objetos en la
estructura.
• Más todas las posibilidades añadidas al modelo de Hojas de Estilo en Cascada (CSS1 y
CSS2).
Al conjunto de propiedades y métodos específicos de DOM, se le conoce como Interfaz de DOM. En
la Tabla 3 se listan algunos de los más importantes.

 

Se ha comentado que este conjunto de extensiones del primitivo DHTML permite, por ejemplo, la
creación de elementos dinámicos (en tiempo de ejecución) como respuesta a eventos. Pongamos un
ejemplo basado en la construcción de una tabla nueva a partir de nuestra página web básica utilizando
ambos modelos, para ver las diferencias. Para evitar problemas en la creación de tabla, debemos
utilizar lo que se denomina HTML bien formado, es decir aquel que sigue –lo más estrictamente
posible- las especificaciones de HMTL tal y como se recomiendan por la W3C.

Una vista jerárquica del modelo de objetos DOM (II)

Supongamos, que queremos saber cuantas tablas tiene un documento. Siguiendo este razonamiento
podemos obtener esos datos a partir de dos mecanismos distintos, el soportado por DHTML y el
aportado por DOM mediante métodos.
En el primer caso, la colección all, del objeto body nos permite el acceso directo al dato a través de su
propiedad tags mediante el Código fuente 19.
Msgbox document.body.all.tags("TABLE").length ‘Devuelve un 2
Código fuente 19
Mientras que también lo podemos hacer a través de su propiedad getElementsByTagName, con una
sintaxis similar a la que muestra el Código fuente 20.
Msgbox document.getElementsByTagName("Table").length ‘Devuelve un 2, igualmente
Código fuente 20

Una vista jerárquica del modelo de objetos DOM (I)

Al principio, puede ser útil para hacerse una idea del funcionamiento de DOM, crear gráficamente el
modelo de objetos que se genera a partir de una página simple. El gráfico de la figura adjunta
representa dicho esquema partiendo del documento que nos sirve de ejemplo. Nótese que en el
esquema se representan todas las etiquetas como descendientes del propio documento HTML,
representado aquí mediante el nodo o elemento document, que hace las veces de nodo raíz. Todos los
otros nodos o elementos son descendientes de document, destacando, igualmente, documentElement,
que corresponde con la marca <HTML>, que contiene al resto del documento.
Una vez creada la jerarquía de objetos de DOM para un documento dado, DOM expone al
programador una serie de métodos pertenecientes a los objetos predeterminados que permiten el
acceso a cualquier otro elemento de la jerarquía, siguiendo diferentes criterios de necesidad.
Por ejemplo, hasta ahora hemos visto como se accede a elementos basándonos en que éstos sean los
elementos seleccionados por el usuario, pero podemos utilizar otros mecanismos de aproximación,
como las colecciones predeterminadas o los métodos de acceso GetElementsByID,
GetElementsByTagName y GetElementsByName.
En el caso de las colecciones predeterminadas el acceso estaba presente desde la primera
implementación del modelo, mientras que los métodos citados derivan del modelo posterior de DOM.

La propiedad document (VII)

Por tanto, vemos que todo depende del objeto document, y que la jerarquía está estructurada
dependiendo de él. Concretamente, y ya que todo el documento HTML tiene una estructura de árbol,
siempre existirá un nodo raíz o principal, que en éste caso, será la propia etiqueta HTML. Ese
elemento principal, aparece en la referencia del modelo de objetos como una propiedad del objeto
document, llamada documentElement (el lector tendrá que ser cuidadoso a la hora de nombrar los
elementos dentro de su código fuente, pues dependiendo del lenguaje utilizado tales objetos pueden no
ser reconocidos en los lenguajes que diferencian entre mayúsculas y minúsculas, como es el caso de
Javascript). A lo largo del libro, nos referiremos a los objetos nombrándolos de acuerdo a su sintaxis
exacta.
De acuerdo con esto la línea de código document.documentElement.outerHTML, mostraría íntegro
todo el contenido de una página web (etiquetas incluidas), como puede verse en la Figura 18. De todas
formas, la mayor parte de las veces no es necesario acceder al contenido íntegro de la página,
resultando más útil acceder a porciones concretas del documento. Una vez más, no hay más que seguir
el modelo de objetos para averiguar el procedimiento a seguir.

La propiedad document (VI)

Además de éstas dos, existe una propiedad innerText, que muestra los contenidos de cualquier
etiqueta, pero excluyendo todas las etiquetas, y no sólo las que definen el elemento seleccionado. Esto
significa que un nuevo cambio a nuestro código fuente (document.activeElement.innerText),
produciría las siguientes salidas:
Para una tabla (Figura 16)

La propiedad document (V)

La propiedad innerHTML, muestra el contenido de cualquier elemento y tiene una homónima, outerHTML, que hace lo mismo, pero incluyendo las propias etiquetas del elemento. Eso quiere decir que si cambiamos según esto la propiedad en el código fuente, (document.activeElement.outer- HTML), al seleccionar la misma celda anterior la salida sería la que muestra la Figura 15.

La propiedad document (IV)

Y si pulsamos en cualquier otra parte del documento, obtendremos el contenido de su elemento
contenedor, esto es, el contenido de <BODY> en este caso (Figura 14)

La propiedad document (III)

Si hacemos clic sobre el borde de la tabla, estaremos seleccionando uno de los dos objetos TABLE de
la página por lo que tendremos una caja de diálogo con todo el contenido de la misma (se excluye la
propia etiqueta <TABLE>).

La propiedad document (II)

Nota: Aunque existen muchos y buenos editores HTML, para seguir el razonamiento que estamos usando en la
construcción de este libro, nos hemos guiado por el entorno de desarrollo de Microsoft Visual Interdev, por que
muestra los objetos según se crean y permite la aplicación de la tecnología IntelliSense al estilo de otras
herramientas de desarrollo, mostrando para cada objeto creado la lista de propiedades y métodos disponibles.
Según lo indicado, el acceso desde código a las etiquetas que componen esta página puede hacerse
mediante las colecciones individuales a que pertenecen o bien mediante la colección genérica all. Si
incluimos algo de código fuente asociado al evento onClick de la página, podemos acceder y mostrar
cualquier parte de su contenido, ya que todo él está expuesto como parte del Modelo de Objetos de
DOM. Además, y como se ha comentado, no es imprescindible utilizar el lenguaje Javascript (siempre
que asumamos que estamos visualizando el contenido con Internet Explorer).
Por ejemplo, dado que el objeto document hace referencia a todo el documento, podemos usar la
propiedad activeElement para determinar el objeto en que está situado el cursor (o bien sobre el que se
ha producido una pulsación de ratón por parte del usuario), y mostrar el contenido de ese elemento en
una caja de diálogo, utilizando la propiedad innerHTML, que, lógicamente, variará en función del
elemento seleccionado. El Código fuente 18, muestra diferentes contenidos según pinchamos en
distintas áreas de la página.
<SCRIPT LANGUAGE="VBScript">
Sub Sacar()
Msgbox document.activeElement.innerHTML
End Sub
</SCRIPT>
<BODY onclick="Sacar()">
Código fuente 18

La propiedad document (I)

Veamos un ejemplo de lo que estamos comentando. Lo que sigue es una página web muy simple, que
posee dos tablas, de las cuales, solamente la primera posee un atributo ID de valor “Tabla”, que
incluye también dos elementos <DIV>, y un gráfico, tal y como aparece en la Figura 11.

Apertura de nuevas ventanas del Explorador: método open() (II)

Observamos como las características indicadas en el tercer argumento, configuran la forma en que se
muestra la ventana (con menús y barra de estado, pero sin barras de desplazamiento, ni de
herramientas), y que podemos cerrar a continuación invocando al método close() de la ventana a través
de la variable ‘Ventana2’: dentro de la misma ventana y no fuera.
Ventana2.close()
Código fuente 17

Apertura de nuevas ventanas del Explorador: método open() (I)

Respecto al método open() nos permite abrir nuevas ventanas del explorador con información
adicional y control de la presentación y características de la ventana (control de presencia de bordes,
barras de herramientas y estado, menús, etc.) pudiendo, eventualmente ser cerradas desde la ventana
que las llamó, gracias a que en el momento de la creación, es posible asignar una referencia a la
ventana en una variable.
Posteriormente, es posible llamar a los métodos de esa ventana, como si fueran los de la ventana de
ejecución principal (obviamente, habrá que tener cuidado y gestionar los errores que podrían
producirse al cerrar el usuario manualmente la ventana e intentar nosotros posteriormente hacer uso de
ese objeto inexistente).

Como ejemplo de utilización, podemos abrir una nueva ventana que muestre la misma página web de
prueba que hemos utilizado antes en la caja de diálogo, sólo que esta vez se abre en otra instancia del
explorador (Código fuente 16), que produce la ventana de salida que muestra la Figura 10.
var Ventana2 = window.open('pagina.htm', 'Ventana2',
'width=300,height=250,status=yes,menubar=yes,scrollbars=no,toolbar=no')
Código fuente 16

h

Ventanas de Diálogo Modales: showModalDialog() (III)

Añadimos, además, otra página HTML, para que recoja los datos que le envía el formulario principal,
y se muestre al pulsar el botón button1. En este caso, el dato pasado es la hora en que se entra en la
página, y el método de paso, su inclusión como segundo argumento de la función showModalDialog(),
Cstr(Time).
La página del formulario, por su parte, recogería esa información leyéndola de su propiedad
dialogArguments y mostrándola en un elemento:
Al seleccionar el Formulario de Entrada, se mostraría la nueva caja de diálogo modal, cuyo código
fuente incluye un mecanismo de lectura para el parámetro pasado, y otro para devolver el valor de
retorno incluido en la caja de texto.
<BODY bgColor=silver onload="Hora.innerHTML=Hora.innerHTML
+ ': ' +window.dialogArguments">
<P>Formulario de Entrada</P>
<P ID="Hora">Hora:</P>
Código fuente 15

Ventanas de Diálogo Modales: showModalDialog() (II)

Y dentro del formulario, basta con incluir un mecanismo de lectura, que situamos en el proceso de
carga del formulario, y que muestra la hora en que se lanza y otro de reenvío de la información, en el
momento de salir de la Caja de Diálogo y volver a la página que recoge el valor de la primera caja de
texto (la que guardaría el nombre del usuario) hace la llamada:
<BODY bgColor=silver onload = "Hora.innerHTML = Hora.innerHTML + ': ' +
window.dialogArguments">
--------------------------------------------------------------------------
<INPUT id=submit1 name=submit1 type=submit value=Enviar onclick="Salir()">
--------------------------------------------------------------------------
<SCRIPT LANGUAGE="Javascript">
function Salir() {
window.returnValue = window.document.all.text1.value;
window.close();
}
</SCRIPT>
Código fuente 14
El aspecto del formulario es muy simple, y –dado su carácter modal- no permite que tome el foco la
ventana del Explorador hasta que no se haya cerrado (ver Figura 9).

Ventanas de Diálogo Modales: showModalDialog() (I)

Dentro de las ventanas de usuario, quizá el método más interesante es showModalDialog(), ya que nos permite mostrar en otra ventana el contenido de una página web creada por nosotros. La diferencia con su homónima showModelessDialog(), es que, mientras la primera obliga al usuario a que la ventana presentada se cierre para continuar con la navegación, no sucede así con la segunda. En cuanto a sus características, la ventana utilizada no es redimensionable y carece de menús y de barras de botones o barras de estado, adoptando el aspecto que puede verse en la Figura 7.

Respecto a los otros dos tipos de ventanas comentados, createPopup() sólo está disponible para las
versiones Internet Explorer 5.5 y posteriores.
No obstante, estas ventanas tienen dos inconvenientes principales:
• Son de sólo lectura: El usuario no puede seleccionar los contenidos que se visualizan en la
ventana
• No son navegables: Cuando se pulsa en un vínculo no se abre la página en dicha ventana, sino
que se ejecuta una nueva instancia del navegador.
En cuanto al paso de parámetros de y desde una ventana de explorador a un cuadro de diálogo, el
segundo argumento de la llamada a showModaldialog(), admite una variable (que eventualmente
puede ser un array) y que se recoge a través de la propiedad dialogArguments de la nueva ventana.
Recíprocamente, la propiedad returnValue de la nueva ventana permite devolver información la
ventana principal que efectúa la llamada.
Vamos a implementar un ejemplo de funcionamiento mediante una página que solicite datos
personales a un usuario. La ventana principal puede incluir el Código fuente 13, que tendría el aspecto
aproximado de la Figura 8.

<SCRIPT LANGUAGE="VBScript">
Sub LanzarVentana()
Path = "C:/Documents and Settings/mposadas/Escritorio"
ValorDevuelto = window.showModalDialog Path & "/Formulario.htm", Cstr(Time)
TxtRespuesta.value = ValorDevuelto
End sub
</SCRIPT>
<INPUT id=button1 name=button1 type=button value="Formulario de Entrada"
onclick="LanzarVentana()">
<INPUT id=txtRespuesta name=txtRespuesta></P>
Código fuente 13

Cómo solicitar información del usuario: métodos prompt() y confirm() (III)

En tiempo de ejecución, al cargarse la página, el usuario recibe la caja de mensaje que muestra la
Figura 6.

Y al aceptar la entrada, el valor introducido se almacena en la variable Respuesta, que podrá asignarse
a la propiedad innerHTML de cualquier elemento para mostrar la información. Dejamos como ejercicio de aplicación para el lector implementar ésta solución mediante un botón y una caja de texto
que formen parte de un formulario HTML.