Imágenes con codificación base64
Cuando una imagen está codificada como texto base64, puede almacenarse como contenido de texto de un nodo XML. En el fragmento de código que aparece a continuación, por ejemplo, la imagen con codificación base64 es el contenido del elemento <png>.
<images><png>iVBORw0KGgoAAAANSUhEU...</png></images>
Para insertar una imagen con codificación base64 la expresión XPath de la propiedad Fuente de imagen del control Imagen debe dar como resultado la cadena de texto base64 de la imagen. También puede arrastrar el nodo XML que contenga la cadena de texto base64 de la imagen desde el panel Fuentes de página hasta el control Imagen. Más abajo encontrará en un ejemplo de uso de imágenes base64.
| Nota: | la imágenes de nodos de fuente de página y BD se almacenan como imágenes con codificación base64. |
Archivo de ejemplo: Base64Images.mtd
El archivo de diseño Base64Images.mtd está en la carpeta (Mis) Documentos de MobileTogether: MobileTogetherDesignerExamples\Tutorials\Images. Abra este archivo en MobileTogether Designer, ejecútelo en el simulador (F5) y consulte los resultados.
El archivo de diseño utiliza imágenes con codificación base64 que están almacenadas en el archivo XML Base64Images.xml (situado también en la carpeta Tutorials\Images). La estructura del archivo XML aparece en la imagen siguiente. El elemento images tiene 5 elementos secundarios y todos ellos almacenan una imagen de formato distinto pero como cadena de texto base64. La estructura $PERSISTENT sirve para guardar las selecciones del usuario de forma temporal (ComboBoxValue) y los datos Exif de la imagen seleccionada (si existen).
El diseño (imagen siguiente) tiene una etiqueta para el título de la página y dos tablas. La primera tabla contiene un cuadro combinado y una imagen. La segunda contiene una etiqueta y un campo de edición.
Lo que queremos hacer es seleccionar un tipo de imagen en el cuadro combinado (imagen siguiente). La selección del cuadro combinado sirve para seleccionar qué imagen base64 (del archivo XML) se debe presentar en la página.
Hay varios puntos importantes que se deben tener en cuenta:
•El evento AlCargarPágina inicializa el nodo $PERSISTENT/ComboBoxValue con el valor jpg.
•El cuadro combinado está asociado al nodo $PERSISTENT/ComboBoxValue (esto se consiguió arrastrando el nodo desde el panel Fuentes de página hasta el cuadro combinado). Esta asociación implica que el valor actual del nodo aparece siempre en el cuadro combinado y que la selección del cuadro combinado actualiza automáticamente el nodo.
•La lista desplegable del cuadro combinado se crea con una sencilla lista de valores.
•La propiedad Tipo de fuente de la imagen del control Imagen tiene el valor base64.
•La propiedad Fuente de imagen el control Imagen tiene como valor esta expresión XPath: $XML1/images/element()[local-name() eq $PERSISTENT/Root/ComboBoxValue]. Esto selecciona el elemento secundario del elemento images cuyo nombre sea igual al contenido del nodo $PERSISTENT/ComboBoxValue. Es decir, seleccionamos el elemento image con codificación base64 del archivo XML cuyo nombre coincide con el contenido del nodo $PERSISTENT/ComboBoxValue.
•Así que, cuando el usuario seleccione una entrada del cuadro combinado, el valor de dicha entrada se introducirá en el nodo $PERSISTENT/ComboBoxValue. El valor de este nodo se usará después para seleccionar el elemento de imagen base64 correcto en el archivo XML. Por ejemplo, si el usuario selecciona png en el cuadro combinado, entonces se introduce el valor png en el nodo $PERSISTENT/ComboBoxValue. Después, la expresión XPath de la propiedad Fuente de imagen selecciona el elemento png del archivo XML y muestra su contenido (la imagen PNG con codificación base64) como imagen.
•Todavía nos falta una acción importante. Cada vez que se selecciona un valor nuevo en el cuadro combinado, debemos solicitar que se vuelva a cargar la imagen. Cada vez que se vuelva a cargar la imagen, se lee el valor de $PERSISTENT/ComboBoxValue y se recupera la imagen correspondiente del archivo XML.
•En la segunda tabla, el tipo de imagen se obtiene de la cadena de texto con codificación base64 por medio de la función de extensión XPath de Altova suggested-image-file-extension. Esta función toma como argumento una cadena (la imagen base64) y recupera la información de extensión de archivo. Si esta información no está disponible en la cadena base64, entonces devuelve una cadena vacía. La expresión XPath utilizada es:
for $k
in suggested-image-file-extension($XML1/images/element()[local-name() eq $PERSISTENT/Root/ComboBoxValue])
return if ($k != '') then $k else "Data not available"
La expresión crea una variable ($k) que almacena la extensión de archivo que devuelve la función suggested-image-file-extension. Si la variable no está vacía, el contenido se presenta en la página. De lo contrario aparece un mensaje informativo.
En el siguiente apartado (Formato Exif) se describe el resto de este archivo de diseño.