domingo, 15 de mayo de 2016

Listando datos con HTML, CSS y JavaScript



El método get() implementado en el código 11-7 solo retorna un objeto por vez (el último insertado). En el siguiente ejemplo vamos a usar un cursor para generar una lista incluyendo todas las películas almacenadas en el Almacén de Objetos peliculas.

Cursores

Los cursores son una alternativa ofrecida por la API para obtener y navegar a través de un grupo de objetos encontrados en la base de datos. Un cursor obtiene una lista específica de objetos de un Almacén de Objetos e inicia un puntero que apunta a un objeto de la lista a la vez.
Para generar un cursor, la API provee el método openCursor(). Este método extrae información del Almacén de Objetos seleccionado y retorna un objeto IDBCursor que tiene sus propios atributos y métodos para manipular el cursor:
  • continue() Este método mueve el puntero del cursor una posición y el evento success del cursor es disparado nuevamente. Cuando el puntero alcanza el final de la lista, el evento success es también disparado, pero retorna un objeto vacío. El puntero puede ser movido a una posición específica declarando un valor de índice dentro de los paréntesis.
  • delete() Este método elimina el objeto en la posición actual del cursor.
  • update(valor) Este método es similar a put() pero modifica el valor del objeto en la posición actual del cursor.

El método openCursor() también tiene atributos para especificar el tipo de objetos retornados y su orden. Los valores por defecto retornan todos los objetos disponibles en el Almacén de Objetos seleccionado, organizados en orden ascendente. Estudiaremos este tema más adelante.

Código 11-9. Lista de objetos.

function iniciar(){
cajadatos=document.getElementById('cajadatos');
var boton=document.getElementById('grabar');
boton.addEventListener('click', agregarobjeto, false);
if('webkitIndexedDB' in window){
window.indexedDB=window.webkitIndexedDB;
window.IDBTransaction=window.webkitIDBTransaction;
window.IDBKeyRange=window.webkitIDBKeyRange;
window.IDBCursor=window.webkitIDBCursor;
}else if('mozIndexedDB' in window){
window.indexedDB=window.mozIndexedDB;
}
var solicitud=indexedDB.open('mibase');
solicitud.addEventListener('error', errores, false);
solicitud.addEventListener('success', crear, false);
}
function errores(e){
alert('Error: '+e.code+' '+e.message);
}
function crear(e){
bd=e.result || e.target.result;
if(bd.version==''){
var solicitud=bd.setVersion('1.0');
solicitud.addEventListener('error', errores, false);
solicitud.addEventListener('success', crearbd, false);
}else{
mostrar();
}
}
function crearbd(){
var almacen=bd.createObjectStore('peliculas',{keyPath: 'id'});
almacen.createIndex('BuscarFecha', 'fecha',{unique: false});
}
function agregarobjeto(){
var clave=document.getElementById('clave').value;
var titulo=document.getElementById('texto').value;
var fecha=document.getElementById('fecha').value;
var transaccion=bd.transaction(['peliculas'],
IDBTransaction.READ_WRITE);
var almacen=transaccion.objectStore('peliculas');
var solicitud=almacen.add({id: clave, nombre: titulo, fecha:
fecha});
solicitud.addEventListener('success', mostrar, false);
document.getElementById('clave').value='';
document.getElementById('texto').value='';
document.getElementById('fecha').value='';
}
function mostrar(){
cajadatos.innerHTML='';
var transaccion=bd.transaction(['peliculas']);
var almacen=transaccion.objectStore('peliculas');
var cursor=almacen.openCursor();
cursor.addEventListener('success', mostrarlista, false);
}
function mostrarlista(e){
var cursor=e.result || e.target.result;
if(cursor){
cajadatos.innerHTML+='<div>'+cursor.value.id+' -
'+cursor.value.nombre+' - '+cursor.value.fecha+'</div>';
cursor.continue();
}
}
window.addEventListener('load', iniciar, false);

El Código 11-9 muestra el código Javascript completo que necesitamos para este ejemplo. De las funciones usadas para configurar la base de datos, solo crear() presenta un pequeño cambio. Ahora, cuando la versión de la base de datos sea diferente a null (lo que significa que la base de datos ya ha sido creada) la función mostrar() es ejecutada. 
Esta función ahora se encuentra a cargo de mostrar la lista de objetos almacenados en el Almacén de Objetos, por lo que si la base de datos ya existe veremos una lista de objetos en la caja derecha de la pantalla tan pronto como la página web es cargada. 
La mejora introducida en este código se encuentra en las funciones mostrar() y mostrarlista(). Aquí es donde trabajamos con cursores por primera vez.
Leer información de la base de datos con un cursor es también una operación que debe hacerse a través de una transacción. Por este motivo, lo primero que hacemos en la función mostrar() es generar una transacción del tipo READ_ONLY sobre el Almacén de Objetos peliculas. Este Almacén de Objetos es seleccionado como el involucrado en la transacción y luego el cursor es abierto sobre este almacén usando el método openCursor().
Si la operación es exitosa, un objeto es retornado con toda la información obtenida del Almacén de Objetos, un evento success es disparado desde este objeto y la función mostrarlista() es ejecutada.
Para leer la información, el objeto retornado por la operación ofrece varios atributos: 
  • key Este atributo retorna el valor de la clave del objeto en la posición actual del cursor. 
  • value Este atributo retorna el valor de cualquier propiedad del objeto en la posición actual del cursor. El nombre de la propiedad debe ser especificado como una propiedad del atributo (por ejemplo, value.fecha).
  • direction Los objetos pueden ser leídos en orden ascendente o descendente (como veremos más adelante); este atributo retorna la condición actual en la cual son leídos. 
  • count Este atributo retorna en número aproximado de objetos en el cursor.

En la función mostrarlista() del Código 11-9, usamos el condicional if para controlar el contenido del cursor. Si ningún objeto es retornado o el puntero alcanza el final de la lista, entonces el objeto estará vacío y el bucle no es continuado. Sin embargo, cuando el puntero apunta a un objeto válido, la información es mostrada en pantalla y el puntero es movido hacia la siguiente posición con continue().
Es importante mencionar que no debemos usar un bucle while aquí debido a que el método continue() dispara nuevamente el evento success del cursor y la función completa es ejecutada para leer el siguiente objeto retornado.
Hágalo usted mismo: El código 11-9 reemplaza todos los códigos Javascript previos. Vacíe el archivo indexed.js y copie en su interior este nuevo código. Abra la plantilla del Código 11-1 y, si aún no lo hizo, inserte todas las películas del código encontrado al comienzo de este capítulo. Verá la lista completa de películas en la caja derecha de la pantalla en orden ascendente, de acuerdo al valor de la propiedad id.

Cambio de orden

Hay dos detalles que necesitamos modificar para obtener la lista que queremos. Todas las películas en nuestro ejemplo están listadas en orden ascendente y la propiedad usada para organizar los objetos es id. Esta es la propiedad declarada como el atributo clave cuando el Almacén de Objetos peliculas fue creado, y es por tanto el índice usado por defecto. Pero ésta clase de valores no es lo que a nuestros usuarios normalmente les interesa. 
Considerando esta situación, creamos otro índice en la función crearbd(). El nombre de este índice adicional fue declarado como BuscarFecha y la propiedad asignada al mismo es fecha. Este índice nos permitirá ordenar las películas de acuerdo al valor del año en el que fueron filmadas.

Código 11-10. Orden descendiente por año.

function mostrar(){
cajadatos.innerHTML='';
var transaccion=bd.transaction(['peliculas']);
var almacen=transaccion.objectStore('peliculas');
var indice=almacen.index('BuscarFecha');
var cursor=indice.openCursor(null, IDBCursor.PREV);
cursor.addEventListener('success', mostrarlista, false);
}

La función en el Código 11-10 reemplaza a la función mostrar() del código 11-9. Esta nueva función genera una transacción, luego asigna el índice BuscarFecha al Almacén de Objetos usado en la transacción, y finalmente usa openCursor() para obtener los objetos que tienen la propiedad correspondiente al índice (en este caso fecha).

Existen dos atributos que podemos especificar en openCursor() para seleccionar y ordenar la información obtenida por el cursor. El primer atributo declara el rango dentro del cual los objetos serán seleccionados y el segundo es una de las siguientes constantes:
  • NEXT (siguiente). El orden de los objetos retornados será ascendente (este es el valor por defecto).
  • NEXT_NO_DUPLICATE (siguiente no duplicado). El orden de los objetos retornados será ascendente y los objetos duplicados serán ignorados (solo el primer objeto es retornado si varios comparten el mismo valor de índice).
  • PREV (anterior). El orden de los objetos retornados será descendente. 
  • PREV_NO_DUPLICATE (anterior no duplicado). El orden de los objetos retornados será descendente y los objetos duplicados serán ignorados (solo el primer objeto es retornado si varios comparten el mismo valor de índice).

Con el método openCursor() usado en la función mostrar() en el Código 11-10, obtenemos los objetos en orden descendente y declaramos el rango como null. Vamos a aprender cómo construir un rango y retornar solo los objetos deseados más adelante en este capítulo.
Hágalo usted mismo: Tome el código anterior presentado en el Código 11-9 y reemplace la función show() con la nueva función del Código 11-10. Esta nueva función lista las películas en la pantalla por año y en orden descendente (las más nuevas primero). El resultado debería ser el siguiente: 
id: tt1285016 nombre: La Red Social fecha: 2010
id: tt0111161 nombre: Cadena Perpetua fecha: 1994
id: tt0086567 nombre: Juegos de Guerra fecha: 1983
id: tt0068646 nombre: El Padrino fecha: 1972



Espero haber ayudado en algo. Hasta la próxima oportunidad!











  

No hay comentarios:

Publicar un comentario

       

Etiquetas

Accediendo a datos con ADO .NET (31) Acceso a la red (30) Algoritmo (34) Algoritmos en JAVA (2) Ampliación de clases (2) APRENDA A PROGRAMAR COMO SI ESTUVIERA EN PRIMERO - Autores : IKER AGUINAGA (3) APRENDA A PROGRAMAR COMO SI ESTUVIERA EN PRIMERO - Autores : IKER AGUINAGA (10) Aprendiendo a desarrollar en Windows 8 (5) Aprendiendo UML en 24 Horas (Autor : Joseph Schmuller ) (30) Arquitectura (29) Arquitectura del Computador (3) Arquitectura del Computador - Historia de la informática (1) Asignación de direcciones IP (23) Aspectos fundamentales de bases de datos (5) Auditoría de la dirección (2) Auditoría de Sistemas (3) Auditoría Informática - Un enfoque práctico - Mario G . Piattini y Emilio del Peso (7) Avanzado (23) Base de Datos (67) Básico (23) Bios (29) Business Productivity Online Suite - BPOS (3) Capa de Red (22) Capa de Transporte (16) Capítulo 1 - Documentos HTML5 (6) Capítulo 10. API Web Storage (2) Capítulo 11. API IndexedDB (4) Capítulo 12. API File (1) Capítulo 2. Estilos CSS y modelos de caja (7) Capítulo 3. Propiedades CSS3 (4) Capítulo 4. Javascript (6) Capítulo 5. Video y audio (6) Capítulo 6. Formularios y API Forms (8) Capítulo 7. API Canvas (5) Capítulo 8. API Drag and Drop (2) Capítulo 9. API Geolocation (2) CCNA1 v5.0 (244) CCNA1 v6.0 (23) CCNA2 v5.0 (26) CCNA3 v5.0 (25) CCNA4 v5.0 (23) CD-ROM (3) Chapter 1 How does Xamarin.Forms fit in? (7) Chapter 2 Anatomy of an app (5) Cisco (346) Cloud Computing (3) CNNA v5.0 Routing & Switching (265) CNNA v6.0 Routing & Switching (2) Codigo (2) Computadora (32) Configuración (29) Configuración de un sistema operativo de red (21) Control (29) Creación de tipos de datos y tablas (3) Creación y Administración de bases de datos (3) Creando la Interface de la Aplicación Windows (50) Creating Mobile Apps with Xamarin.Forms (13) Cuenta (29) Curso (32) Curso Aprendiendo a Programar (25) Datos (3) Desarrollando en Windows 8 - AVANZADO (2) Desarrollando en Windows 8 - BÁSICO (3) Desarrollando en Windows 8 - INTERMEDIO (2) Desarrollo (2) Desarrollo .Net (21) Desarrollo avanzado de Windows Store Apps usando C# (1) Desarrollo basado en conceptos de Ingeniería de Software para Visual Studio (2) DESARROLLO DE APLICACIONES WINDOWS CON MICROSOFT .NET (37) DESARROLLO DE APLICACIONES WINDOWS CON MICROSOFT .NET (Autor: Luis Dueñas Huaroto) (29) Desarrollo en Microsoft Visual Studio (44) Desarrollo en Microsoft Visual Studio - AVANZADO (15) Desarrollo en Microsoft Visual Studio - BÁSICO (14) Desarrollo en Microsoft Visual Studio - INTERMEDIO (18) Desarrollo en Windows Phone 8 (13) Diagnostico (4) Diagrama (3) Diagramas de actividades (2) Diagramas de colaboraciones (2) Diagramas de secuencias (2) Digital (2) Diplomado (2) Disco (29) Disco Duro (4) Diseño de aplicaciones de Windows 8 en HTML 5 (7) Dispositivos Electrónicos (11) Doctorado (2) Ejemplos de algoritmos (27) El camino hacia el CSS3 (3) El diseño web flexible (6) El elemento de diseño Canvas (3) El enfoque de los sistemas (3) El flujo de un programa (2) El gran libro de HTML5 - CSS3 y Javascript - Autor: Juan Diego Gauchat (55) El principio de organicidad (7) Electrónica (2) Elementos de un sistema (5) Empresas (2) Entrada y salida (4) Entropía y neguentropía (7) Estrategia (2) Estructura de un programa Java (12) Estructuras de almacenamiento (10) Estructuras de control (6) Estructuras de las tablas en SQL Server (2) Estructuras fundamentales de los datos (2) Ethernet (21) Evolución y Familias de los Microprocesadores (15) Exámen (23) Exploración de la red (23) Extensión de clases (4) Facebook (4) Familia Intel (15) Forefront (8) Función (3) Funciones de una red (12) Funciones de una red informática (1) Fundamentos de C# para absolutos principiantes (17) Fundamentos de programación en Java (50) Generaciones de la computadora (5) Gestión (3) Gestión de riesgos - Auditoría de Sistemas (1) GONZALO MARTÍNEZ (1) Grupos Facebook (1) Harvard (29) Historia de las computadoras (11) HTML5 y CSS3 - Autor: Christophe Aubry (99) HTML5 y CSS3 aplicadal texto (7) HTML5 y CSS3 para los formularios (15) Imágenes (2) Implementación de Windows 7 (11) Información (31) Informática (29) Ingeniería (4) Instalar (29) Inteligencia (2) Inteligencia de Negocios con SQL Server (3) Intermedio (23) Internet (29) Internet Explorer 9 (3) Introducción a ASP.NET 5 (8) Introducción a Java (7) Introducción a jQuery (8) Introducción a la Auditoría de Sistemas (2) Introducción a la teoría general de sistemas (Oscar Johansen Bertoglio) (39) Introducción a Networking (2) Introducción a Window Forms (5) Introducción al acceso a datos con ADO .NET (9) Investigación de Operaciones (12) Java (52) Jump Start de consultas en las bases de datos de Microsoft SQL Server 2012 (8) La definición de un Sistema (6) La evolución del HTML y del CSS (3) La nueva sintaxis HTML5 (12) LA QUINTA DISCIPLINA en la práctica (Autor : Peter Senge) (28) Las animaciones en CSS3 (5) Las transformaciones CSS3 (11) Las transiciones con CSS3 (8) Licenciamiento Microsoft (3) Local Area Network (LAN) - Red de Area Local (2) Lógico (2) Los elementos de la estructura en html5 (9) Los elementos multimedia: audio y vídeo (2) Los estilos de caja en CSS3 (13) Los nuevos selectores de CSS3 (6) Maestría (2) Mantenimiento de Mouse y Teclado (2) Manual de Microsoft SQL Server - Full Transact SQL (68) Manual de soporte técnico para escuelas sobre windows 7 (42) Marco Teorico de Investigación de Operaciones (6) Medios de Almacenamiento (11) Medios de Networking (2) Mejorando la Interface de las Aplicaciones Windows (26) Memoria Tipos y Clases (5) Método (2) Metodología (1) Microsoft (324) Microsoft Lync 2010 (7) Microsoft Silverlight 4.0 (2) Microsoft Virtual Academy (356) Modelo (2) Modelo OSI y TCP-IP (2) Modelos con poco grado de dificultad de Programación Lineal - Investigación de Operaciones (13) Modelos con razonable grado de dificultad de Programación Lineal - Investigación de Operaciones (10) Modelos de desafio de Programación Lineal - Investigación de Operaciones (5) Modelos difíciles de Programación Lineal - Investigación de Operaciones (5) Modelos Fáciles de Programación Lineal - Investigación de Operaciones (13) Modelos lineales con solver (3) Modulo (23) Movimiento (2) Mozilla (29) MS SQL Server (77) MS Virtualization para Profesionales VMware - Gestión (3) MS Virtualization para Profesionales VMware- Plataforma (4) MVA (263) Negocio (2) Nivel Avanzado Desarrollo .Net (6) Nivel Básico Desarrollo .Net (11) Nivel Intermedio Desarrollo .Net (8) Normas técnicas peruanas y su evolución - Auditoría de Sistemas (1) Nube Privada - Avanzado (6) Nube Privada - Básico (6) Nube Privada - Intermedio (6) Office 365 (3) Optimización de Escritorio (10) Optimización de Escritorio - Avanzado (4) Optimización de Escritorio - Básico (3) Optimización de Escritorio - Intermedio (3) ORACLE 10g - ADMINISTRACIÓN Y ANÁLISIS (3) Oracle 10g y el Grid Computing (3) Organización aleatoria y secuencial (1) Partes principales de la Mainboard (12) Perceptron (2) Perfil (2) Periféricos de Entrada / Salida (15) Pesi (2) PHP y MySQL - Manual de aprendizaje para crear un sitio web - Autor : Olivier ROLLET (79) Plan (2) Plataforma (29) PMBOK (24) PMBOK - Guía de los fundamentos para la dirección de proyectos (24) PMBOK - INFLUENCIA DE LA ORGANIZACIÓN Y CICLO DE VIDA DEL PROYECTO (6) PMBOK - Introducción (11) PMBOK - PROCESOS DE LA DIRECCIÓN DE PROYECTOS (5) Prevención - Herramientas e Instrumentos de Medida (9) Principios básicos de enrutamiento y switching (218) Proceso (2) Proceso de auditoría de sistemas informáticos (2) Programación en Android - Auor : Salvador Gómez Oliver (46) Programación paso a paso de C# - Autor : Nacho Cabanes (16) Protocolos y comunicaciones de red (17) Proyecto (2) Qué es un sistema (4) Red de Área Local Inalámbrica (WLAN) (4) Redes (30) Redes inalámbricas - WIRELESS - Conocimiento general (15) Redes neuronales (2) Redes y Comunicaciones (45) Reparación de Fuentes - UPS - Estabilizadores (10) Reparación de Impresoras (9) Reparación de Monitores (16) Router (29) Seguridad en la Nube (3) Seminario (23) Server (24) Sharepoint 2010 - Nivel Básico (6) Sharepoint 2010 - Niveles Avanzados (18) Sharepoint 2010 - Niveles Avanzados - Básico (8) Sharepoint 2010 - Niveles Avanzados - Intermedio (9) Sinergia y recursividad (4) Sistema (33) Sistema de Cableado Estructurado (9) Software (30) SOLUCIÓN GRÁFICA DE MODELOS DE PROGRAMACIÓN LINEALES - INVOPE (8) Soporte a Infraestructura (3) SQL (38) SQL Azure - Introducción (3) Subsistemas de control (4) Tablas (4) Tarjeta Principal del Sistema (10) Tarjetas de Interfaces (7) Tecnología (31) Tecnologías LAN (1) TEORÍA GENERAL DE SISTEMAS (1) Tic (2) Tipo (2) TML5 y CSS3 - Autor: Christophe Aubry (12) Trabajando con el Formulario (7) Un diseño HTML5/CSS3: dConstruct 2011 (3) Un diseño HTML5/CSS3: FlipThru (2) Un diseño HTML5/CSS3: The Cat Template (2) Usando Controles Windows Forms (12) Usando Herramientas de Datos de Visual Studio (6) Ventas (2) Virtualización Hyper - V Nivel Básico (5) Virtualización Hyper - V Nivel Intermedio (5) What’s New in Windows 8.1 Security (4) Window (29) Windows 7 Segunda Fase - AVANZADO (4) Windows 7 Segunda Fase - BÁSICO (6) Windows 7 Segunda Fase - INTERMEDIO (4) Windows 8 - Vista Previa (4) Windows 8.1 To Go (2) Windows Azure (3) Windows Phone 7 (2) Windows Server 2008 R2 (3) Windows Server 2012 - Gestión y Automatización (3) Windows Server 2012 R2 Essentials (7) Windows Server 2012: Almacenamiento (5) Windows Server 2012: Identidad y Acceso (4) Windows Server 2012: Revisión Técnica (7) Xamarin (1)

Páginas vistas en total según Google