XML, parte 2 M. en C. Erika Vilches
Documentos XML Válidos!= Bien formados Siguen reglas de sintáxis que hacen que un parser las pueda parsear sin problemas Un documento XML válido es aquel que ha sido probado contra un set de reglas que indican qué tipo de contenido se permite en el dócumento XML y dónde puede aparecer. Estas reglas se especifican ya sea como un DTD o archivos XML Schema
DTD s son simples pero menos poderosas y no utilizan la misma sintaxis que el documento XML Los Schemas son mucho mas poderosos pero más complejos. - Se escriben utilizando una sintaxis XML - Proveen un nivel de control más fino
XML Namespaces Tienen la forma <html xmlns= http://www.w3.org/1999/xhtml > Proveen una forma de prevenir que tags con el mismo nombre pero diferente significado colisionen entre si. Usualmente aparecen en el elemento raíz de un archivo. Contiene información apunta a algo que parece un URL
Cuándo pasaría algo como una colisión? Suponga que tenemos información XML que describe una mesa (table) y que queremos incluirla en un archivo que también incluye código HTML porque contiene información de cómo la información de la mesa será desplegada... PROBLEMAS!!!
Solución Declarar un namespace con un prefijo que irá en frente de los tags que vienen de una fuente de XML diferente.
Namespaces resuelven este problema... Default namespace
Los URLs que se ven, NO son utilzados por el parser para nada. El parser NO trata de acceder a estos URLs La regla es que el valor de los attibutos namespaces debe ser único. Dado que los URLs por lo general son únicos, son frecuentemente utilizados para este fin. También se pueden utilizar URN (Universal Resource Names) o URI (Universal Resource Identifiers), etc...
Manejo del Espacio en Blanco El espacio en blanco consiste de carriage returns, line feeds, tabs, espacios. Se puede añadir espacio en blanco en cualquier parte libremente para hacer un documento más legible. - El Parser de XML básicamente ignora el espacio en blanco a menos que ocurra dentro de un elemento, en cuyo caso lo pasa a la aplicación como parte de los datos del elemento.
La especificación dice que el parser de XML no debe tratar de adivinar que significa el espacio en blanco. Provee un atributo predefinido <xml:space> para controlar lo que sucede - default : la aplicación debe usar los settings por default - preserve : la aplicación debe preservar todo el espacio en blanco
Ej: El espacio en blanco no importa Ej: El espacio en blanco es parte de la información del elemento
Cada aplicación decide como manejar el espacio en blanco Ej: Internet Explorer el manejo del espacio en blanco depende de cómo se estén desplegando los datos XML (Independientemente de lo que diga en <xml:space>) - CSS Stylesheets Tratara el espacio en blanco de la misma forma que en HTML (Serie de caracteres en blanco = 1 espacio; Descartar el espacio en blanco antes o después de un elemento) - Data Binding Preservara todo el espacio en blanco.
Cada aplicación, decide como manejar el espacio en blanco.
Empezando a Trabajar con XML
Nuestro Primer Archivo XML Visual Web Developer Express
Categoría General XML File Open
Inserta la declaración XML por nosotros
Typeando nuestro primer programa Guardar el archivo
Abrir el archivo en Firefox Abrir el archivo en Internet Explorer
Asociando un archivo XML con un CSS Stylesheet Mejorar la apariencia en el browser que la vista de árbol default que se presenta cuando no hay un stylesheet
Crear un archivo nuevo
Categoría Web Style Sheet Open
Default Stylesheet No vamos a utilizar el body porque no es un archivo HTML. Reemplazar con el nombre del tag XML al que queremos darle estilo
Escribir nuestro CSS para el elemento FirstTag Guardarlo en el mismo lugar donde se guardo el archivo original Cómo conectarlos? A través de una instrucción de procesamiento para decirle al browser que hay un stylesheet que acompaña a este archivo
Escribir la instrucción de procesamiento y guardar el archivo Abrir el archivo en Firefox Abrir el archivo en Internet Explorer
Estilizando tags XML con Stylesheets El business card de ejemplos anteriores
Vista en Firefox Vista en Internet Explorer
CSS Stylesheet para la business card
Añadiendo el Stylesheet al archivo XML <?xml-stylesheet type= text/css href= businesscard.css > Añadiendo más de un elemetno BusinessCard
Vista en Firefox Vista en Internet Explorer
Notar que no hay un stylesheet para el tag BusinessCards Ignorado por el browser Notar que solo toma el contenido de texto del tag Ignoro que hay un atributo con el tipo de teléfono Es un problema al que nos enfrentamos al desplegar datos XML utilizando CSS nivel 1 Se corrige utilizando CSS nivel 2
Trabajando con XML y CSS2 Con CSS2 tenemos la habilidad de extraer información de atributos que se encuentran dentro de los tags.
Anadiendo el atributo primary para indicar cual es el contacto primario de una persona
Añadiendo email:before a nuestro CSS Nos permite añadir contenido nuevo directamente antes del contenido del tag email Añadiendo la etiqueta del tipo de número de teléfono antes del número Añadiendo que el número telefónico que tiene el atributo primary lo despliegue también (después), SOLO SI ese atributo existe []
Añadiendo el stylesheet al archivo XML
Vista en Firefox Soporte para CSS2 en Internet Explorer desde IE8
Si no queremos que un elemento se despliegue, cambiar a display:none; Vista en Firefox
Limitaciones de CSS Si no me gusta el orden en el que aparecen los tags adentro de un elemento, no lo puedo cambiar. Para ello tendríamos que utilizar algo como XSLT, que te permite modificar no solo el look, sino cómo se ordena y despliega.
Qué son las Islas de Datos? Las islas de datos son una característica de Internet Explorer Otros browsers permiten esto, pero IE provee características específicas hechas a la medida para trabajar con datos XML Una isla es información XML que ha sido embebida en una página web y conectada ( binded ) al diseño HTML que hay en la página El XML puede ser embebido o almacenado en un archivo externo y ser después ligado. Utilizan el tag <XML> para encerrar los datos Los atributos datasrc y datafld se utilizan para definir un binding a los datos XML
Utilizando el DOM para manipular XML
Introducción al Document Object Model Adoptado como W3C standard en 1998 Provee una manera estándar de descubrir, manipular, y cambiar el contenido de un documento utilizando técnicas de programación El DOM es neutral de browser, plataforma y lenguaje Representa a un documento como una estructura de árbol y permite el acceso a los objetos en el árbol Todo el contenido XML, tal como elementos, comentarios, instrucciones de procesamiento, secciones CDATA, etc. se presentan como objetos.
Estos objetos son llamados genéricamente nodos Los nodos en el árbol tienen una relación padre-hijo DOM utiliza terminos como parent, child, sibling, ancestor, descendant, etc. para indicar cómo se relacionan unos con otros.
Ejemplo de representación en DOM Nota: El texto de los elementos tiene su propio nodo.
Propiedades Importantes de los Nodos DOM
Propiedades Importantes de los Documentos
Otras Propiedades Importantes Get attribute values Set attribute values Remove an attribute from the attribute list Allows you to scope your search for particular elements to a starting element in the tree. The HTML content inside of the given element.
Descubriendo la Información del Documento Para obtener información del documento se utilizan las funciones get y las propiedades informativas. getelementbyid() getelementbytagname() getattribute() childnodes firstchild, lastchild data
Una vez que se han obtenido los datos, se puede trabajar con ellos como se trabajaría con cualquier otro dato en un script. Append strings, sumar números, etc.
Descubriendo qué Hay Nuevo en el XML Documento HTML Escribiremos código Javascript para utilizar el DOM XML embebido dentro de nuestro HTML
Recordando el XML... Código Javascript Liga dentro del body que llamara nuestra función
Nos queda así:
Vista en Internet Explorer Al dar click en la liga:
Pero... queremos mostrar que tipo de teléfono es cada uno! Recordando el XML... Modificamos el Javascript:
El resultado... Vista en Internet Explorer Al dar click en la liga:
Extrayendo Información y Manipulando los Datos Nuestro HTML Original
Recordando los divs... Nuestro Javascript quedaría asi:
Ahora que hemos escrito el código que extrae los datos y los despliega en los divs... Añadimos un event handler que cause que se ejecute la funcion populatefields() cuando la página cargue: Vista en Internet Explorer:
Añadiendo un stylesheet a lo que ya tenemos:
Contenido del stylesheet:
Vista en Internet Explorer: Vista en Firefox:
Si queremos poder mostrar y ocultar el email, escribimos 2 funciones de Javascript más: Añadimos dos ligas para llamar estas funciones:
Vista en Internet Explorer: Click en Hide Email Click en Show Email
Vista en Firefox: Click en Hide Email Click en Show Email
Qué es XPath? XPath es un lenguaje W3C Standard que se utiliza para encontrar información dentro de un documento XML. Parte fundamental de XSLT y otros tópicos de XML como XQuery y XPointer Literalmente define un path en un documento XML, como un path de un archivo define la ruta para llegar a el en una estructura de directorios. /root_tag/element_a/element_b El resultado de XPath no necesita ser un nodo único, puede devolver una colección de nodos.
Puede utilizarse por si solo, pero es frecuentemente utilizado en conjunción con otras tecnologías XML
Ejemplo HTML:
Ruta al elemento title:
Ruta al elemento p: En este caso nos devolvería los 3 elementos p
Si sólo nos interesa el primer elemento p: Predicate Filtra los resultados de un node set.
Conceptos Importantes de XPath Sintaxis muy compacta, rápida de aprender La path expression Se escribe utilizando una serie de location steps El nodo contexto el punto el documento a partir del cual se evalúa la expresión Se puede ver como el punto de inicio en el documento XML a partir del cual procede el path El axis La relación entre el nodo de contexto y los nodos seleccionados por la expresión Children, siblings, ancestors, etc.
Predicates Refinamientos que se pueden hacer al proceso de selección Solamente encontrar elementos que tengan cierto texto o atributos, etc.
Algunos Ejemplos de XPath
Llevando a XPath a Dar la Vuelta... Altova XMLSpy tiene un evaluador de XPath que te permite escribir expresiones XPath y ver los resultados evaluados en tiempo real.
Abrir el businesscard.xml que hemos venido utilizando: En la barra de herramientas hay un botón llamado Evaluate XPath, dar click en el:
Esto nos abre la ventana del XPath Evaluator: Aquí escribiremos nuestras expresiones y las evaluará con el documento que está abierto.
Consulta /
Consulta /BusinessCard
Consulta /BusinessCard/Name
Consulta /BusinessCard/Name/text()
Consulta /BusinessCard/phone
Consulta /BusinessCard/phone[1]
Consulta /BusinessCard/phone[2]
Consulta /BusinessCard/phone[last()]
Consulta //phone
Consulta //phone[last()]
Consulta //Name[contains(text(), Joe )]
Consulta //phone[@type]
Consulta //phone[@type = work ]
En un archivo XML mas complejo... Consulta /items/item[type= Tea ]/photo
Vista General de XSLT (extensible Stylesheet Language Transformations)
Qué es XSLT? XSLT es el extensible Stylesheet Language Transoformations Diferente de CSS - CSS utiliza reglas que se aplican a elementos, XSLT utiliza templates que transforman un árbol fuente en un árbol resultado XSLT se escribe utilizando sintáxis XML XSLT puede transformar XML en casi cualquier otra cosa: HTML, PDF, texto ASCII, RTF, o solamente otro archivo XML.
Es MUY poderoso - Utilizando XSLT se pueden hacer cosas como ordenar datos, reordenar radicalmente la salida, autonumerar elementos...
Creando Stylesheets XSLT Utilizan el namespace http://www.w3.org/1999/xsl/transform Típicamente se le asigna el prefijo xsl Los XSLT Stylesheets se definen utilizando el tag raíz <xsl:stylesheet> Los Stylesheets típicamente contienen uno o mas <xsl:template> tags, que definen a cada template
Los templates tienen atributos name y/o match El atributo match define una expresión XPath que se utiliza para determinar cuándo aplicar ese template. El atributo name se utiliza para aplicar manualmente el template Los templates contienen otros tags XSLT que controlan cómo se transforman los datos XML
Cómo trabaja XSLT?
Elementos XSLT Comunes <xsl:stylesheet> <xsl:template name= name match= path > <xsl:value-of select= xpath > <xsl:attribute> <xsl:text> <xsl:for-each select= xpath > <xsl:if test= condition > <xsl:choose>, <xsl:when>, <xsl:otherwise> <xsl:sort select= path > <xsl:call-template name= template name >
Un template XSL Ejemplo Documento XSLT - simple.xslt Documento XML Resultado