Programación de Componentes Web Java
UNIDAD Nº III
La API de Persistencia de Java
[Link]
SEMANA 5
Introducción
En la unidad III semana 5, se utilizará el patrón DAO, para el acceso a datos codificando los
servicios de datos para persistir objetos de negocio. Este patrón de diseño es una solución
probada que resuelve un tipo específico de problema en el desarrollo de software referente al
diseño.
Se verá además, el DOM, que nos permite ver todos los elementos presentes en una página
web, ordenados en forma de nodos, de manera jerárquica.
En este proceso, se trabajará la tolerancia a la frustración provocada por programaciones
erróneas, dando cuenta de su capacidad de perseverancia frente a determinadas situaciones. El
alumno debe ser prolijo en sus actividades para cumplir con las especificaciones técnicas
demostrando una actitud de indagación con la finalidad del constante perfeccionamiento
profesional en el área de la programación.
Además, debe mostrar una actitud de indagación con la finalidad del constante
perfeccionamiento profesional en el área de la programación.
2 [Link]
Ideas Fuerza
1. Utilizar el Patrón DAO: El alumno debe conocer y utilizar el Patrón DAO, pues resuelve
un tipo específico de problema en el desarrollo de software referente al diseño
2. .Conocer el DOM: Se conocerá los elementos presentes en una página web, ordenados en forma
de nodos, de manera jerárquica.
3. Cumplir con las especificaciones técnicas: La aplicación construida debe dar respuesta
satisfactoria al requerimiento inicial planteado.
3 [Link]
Desarrollo
Patrón DAO
¿Qué es Patrón DAO?
Un patrón de diseño es una solución probada que resuelve un tipo específico de problema en el
desarrollo de software referente al diseño.
Permiten tener el código bien organizado, legible y mantenible, además te permite reutilizar
código y aumenta la escalabilidad en tu proyecto.
En sí proporcionan una terminología estándar y un conjunto de buenas prácticas en cuanto a la
solución en problemas de desarrollo de software.
Existen una infinidad de patrones de diseño. En nuestro caso utilizaremos el Patrón DAO.
El patrón Data Access Object (DAO), pretende principalmente independizar la aplicación de la
forma de acceder a la base de datos. Para ello se centraliza el código relativo al acceso al
repositorio de datos en las clases llamadas DAO. Fuera de las clases DAO no debe haber
ningún tipo de código que acceda al repositorio de datos.
Imagina que tienes un sistema en producción con una base de datos MySQL y de pronto lo
debes cambiar a Oracle o a cualquier otro motor de base de datos. Esto puede ser un verdadero
[Link] es lo que soluciona este patrón, tener una aplicación que no esté ligada al acceso
a datos, por ejemplo, si en la aplicación se pide encontrar los productos que tienen stock
superior a 10 productos, el DAO se encarga de traer esos datos independientemente si está en
un archivo o en una base de datos.
La capa DAO contiene todos los métodos CRUD (create, read, update, delete), por lo general se
tiene un DAO para cada tabla en la base de datos y la implementación se la realiza de la
siguiente manera:
Se crea un proyecto de escritorio o web, con el nombre almacen, luego:
1.- Se crea una clase Producto en el package modelo, únicamente con sus constructores,
getters y setters y toString():
4 [Link]
2.- Se crea el acceso a los datos a través de una interface [Link] en el package
idao, aquí se declara todos los métodos para acceder a los datos:
5 [Link]
3.- Se implementa en la clase [Link] haciendo un implements de la
interface [Link] en el package dao, lo que se hace aquí, no es más que implementar
cada método de la interface:
6 [Link]
4.- Por último se prueba el patrón DAO a través de la clase [Link] en el package
daodemo:
7 [Link]
Obteniendo el siguiente resultado:
8 [Link]
DOM
Un navegador web utiliza varios sub-sistemas simultáneamente que nos permiten navegar por
internet en forma fluida. Cada vez que va a mostrar una página web realiza los siguientes pasos:
1 Realiza una petición a un servidor para ver una página web.
2 Genera una representación abstracta de todos los elementos HTML.
3 Genera una representación abstracta de todos los estilos CSS aplicados a cada
elemento HTML.
4 Genera un árbol de procesamiento, el cual mezcla la representación abstracta de
HTML y CSS.
5 Determina qel espacio que utilizarán los elementos y se dibujan en pantalla.
6 El navegador queda esperando alguna acción por parte del usuario.
La generación de una representación abstracta de todos los elementos constituye una interfaz
que permite la comunicación entre “el mundo de HTML” y “mundo de JavaScript”. Esto permitirá
la creación, manipulación y eliminación de elementos en nuestras páginas web para así otorgar
dinamismo e interactividad en nuestros desarrollos.
¿Qué es el DOM?
El DOM (Document Object Model), corresponde a una interfaz de programación para
documentos HTML. Representa todos los elementos presentes en una página web, ordenados
en forma de nodos, de manera jerárquica. Es una especificación totalmente anexa al lenguaje de
JavaScript. Es una especificación creada por la W3C (World Wide Web Consortium), que es una
comunidad internacional que desarrolla estándares abiertos para garantizar el crecimiento a
largo plazo de la Web. El DOM permite representar documentos basados en XML (como HTML).
El DOM se diseñó para ser independiente de cualquier lenguaje de programación y plataforma.
Sin embargo, en JavaScript podemos acceder al DOM gracias al navegador web.
9 [Link]
¿Cómo funciona el DOM?
En el DOM el nodo raíz del árbol representa la etiqueta html, de la cual heredan head y body.
Las etiquetas HTML presentes dentro de body tendrán su representación de igual manera en el
árbol:
El DOM es una poderosa interfaz que se construye al momento de procesar el HTML de una
página. Es una especie de “mapa virtual” que representa cada uno de los elementos presentes
en una página web.
Esta interfaz permite comunicarnos con cada uno de sus elementos, pudiendo así agregar,
modificar y eliminar elementos. De esta manera nuestras páginas web se ven transformadas en
un ente vivo.
10 [Link]
Los pasos que ocurren al abrir un documento HTML en el navegador son los siguientes:
1. El código fuente de la página HTML es procesado como cualquier otro lenguaje: se
identifican cada una de sus partes léxicas, se crea un árbol sintáctico y se muestra el
resultado en el navegador:
2. Se crea un árbol jerarquizado (DOM tree) con cada una de las etiquetas presente en el
código HTML. Cada etiqueta creará un nodo, el cual corresponde a un objeto que
representa el contenido de la página con cada uno de sus atributos:
11 [Link]
3. Luego de crearse el DOM y establecerse las relaciones de dependencias entre cada
nodo, se muestra la página en el navegador:
Explorando en DOM
Para realizar una exploración rápida del DOM te invitamos a abrir tu navegador web. Si tu
navegador es Google Chrome, abre una nueva pestaña y escribe en la barra de direcciones
about:blank.
Dirígete a las herramientas de desarrollo del navegador y luego a la consola. Escribe [Link]
(document); y luego presiona la tecla Enter (ver imágenes):
12 [Link]
Como se puede apreciar en la imagen anterior, al inspeccionar el contenido de document, se
muestra la estructura de la página HTML (en este caso vacía).
13 [Link]
Creemos un documento de prueba:
Inspeccionemos el código:
14 [Link]
¿Qué es document?
El objeto document es un objeto global que representa a la página web cargada en el navegador
web. Sirve como un punto de entrada para el contenido de la página mediante la representación
del DOM Tree. Posee atributos y métodos que permiten el acceso y modificación de elementos.
15 [Link]
Conclusión
En la unidad III semana 5, se utilizó el el patrón DAO, para el acceso a datos codificando los
servicios de datos para persistir objetos de negocio y así dar una solución probada que resuelve
un tipo específico de problema en el desarrollo de software referente al diseño.
Se vió además, el DOM, que nos permite ver todos los elementos presentes en una página web,
ordenados en forma de nodos, de manera jerárquica.
En este proceso, se revisaron conceptos relevantes como patrón DAO y el DOM que nos
permiten dar una solución a un problema y conocer la estructura de árbol de nuestra página
web. El alumno indagó con la finalidad del constante perfeccionamiento profesional en el área de
la programación.
16 [Link]
Bibliografía
[Link]
[Link]
[Link]
17 [Link]
18 [Link]
