LECTURE 1: INTRODUCTION · –ExtJS –GWT –YUI –Openlazlo 19. Escuela de Ingeniería de...

Escuela de Ingeniería de Sistemas y Computación - Universidad del ValleProfesora: Paola J. Rodríguez

Agenda

– DOM

– RIA

– Diagramas de Navegación

– Pruebas

1


Document Object Model - DOM

API

Definición a manera de una jerarquía de nodos

Independiente del Lenguaje de programación

Dependiente del Navegador

2



Ejemplo:

3



Ejemplo:

4



DOM permite:• Añadir, eliminar, modificar y reemplazar nodos

• Requiere carga completa de la página

Tipos de Nodos• Document

• DocumentType

• Element

• Attr

• Text

5



Funciones principales:

6



7



Algunos Ejemplos:

8



Algunos Ejemplos:

– Obteniendo el nodo raíz:

– Obteniendo nodos hijo:

9



Atributos:

10



Acceso directo a los nodos:

– getElementsByTagName()

– getElementsByName()

– getElementById()

– Cualquier de las anteriores retorna NodeList

– IE6 presenta problemas con estas funciones

11



Creando Nodos:

– Página Original:

– Cómo crear un párrafo y agregarlo al documento?

• Crear un elemento, crear un nodo de texto, asociarlos

• Añadir el nuevo nodo a la página original

12



Creando Nodos:

– Creando el elemento:

– Creando el texto del elemento:

– Asociando el texto y elemento

– Uniendo el nuevo nodo a la página

13


RIA

Desventajas de las aplicaciones Tradicionales:

– Recarga de toda la página.

– Interacción limitada para el usuario

• Enlaces

• Botones

• Cajas de texto.

– Forma predefina, no se permite personalización

– Limitantes para construir aplicaciones con servicios para redes sociales

• Juegos en línea, chats, mensajería, blogs, wikis, etc.14


RIA

WEB 2.0

15


RIA

AJAX

– Ajax (Asynchronous JavaScript and XML)

– Solo se transmite la info. relevante sin redundancias

– Se evita el renderizado completo

– Supone una experiencia más agradable al usuario

16


RIA

AJAX

– Llámados Asíncronos

17


RIA

AJAX

– Tecnologías

– Presentación basada en estándares usando XHTML y CSS

– Despliegue dinámico e interacción usando DOM

– Intercambio de datos y manipulación usando XML

– Recuperación asincrónica de datos usando XMLHttpRequest

– JavaScript poniendo todo junto

18


RIA

AJAX

– Cómo trabajarlo?

• Usando directamente XMLHttpRequest

• Usando un API– Prototype

– Qooxdo

– ExtJS

– GWT

– YUI

– Openlazlo

19


Diagramas de Navegación

Estereotipos:

20



Asociaciones:

21



Ejemplo 1:

22



Ejemplo 2:

23

LECTURE 1: INTRODUCTION · –ExtJS –GWT –YUI –Openlazlo 19. Escuela de Ingeniería de...

Documents

Transcript of LECTURE 1: INTRODUCTION · –ExtJS –GWT –YUI –Openlazlo 19. Escuela de Ingeniería de...