Muestre datos empresariales como HTML dinámico usando IBM Mashup Center

Generando contenido distintivo de orígenes de datos empresariales que pueden ser usados en un mashup

IBM® Mashup Center viene con widgets para mostrar datos en distintos formatos, por ejemplo en una tabla, en un mapa o en una gráfica. Estos widgets permiten un ensamblado de página muy rápido pero normalmente sólo proporcionan un conjunto limitado de personalización como tamaño de fuente, alineación o color. Para tener un mayor control, IBM Mashup Center V3 soporta la generación de cualquier XML directamente utilizando datos de orígenes de datos empresariales. Aprenda cómo generar HTML (XHTML, ya que el feed está bien formado) para conseguir presentaciones más distintivas utilizando el creador de mashup de datos. Además, este artículo también describe un widget simple que puede mostrar HTML arbitrario y puede interceptar clics del ratón para desencadenar eventos que pueden conectarse a otros widgets.

Louis Mau, Solution Architect, IBM

Louis Mau es parte del equipo de desarrollo de InfoSphere MashupHub. Su enfoque actual está en ayudar a los clientes a construir aplicaciones situacionales utilizando IBM Mashup Center. Antes de tener este rol, fue el arquitecto de DB2 Everyplace Sync Server, que ayuda a sincronizar datos de bases de datos empresariales en una base de datos de huella pequeña ejecutándose en dispositivos móviles.



Rajesh Kartha, Software Engineer, IBM Cloudscape Group

Rajesh Kartha trabaja en IBM Silicon Valley Lab en San José como un Arquitecto de Soluciones para IBM Mashup Center. Tiene una gran experiencia en el desarrollo de software en varios productos de IBM Information Management.



22-08-2011

Visión General

IBM Mashup Center viene con un conjunto de widgets para una rápida visualización de los datos. Estos widgets proporcionan personalizaciones comunes, como el tamaño de fuente, la alineación y el color. Para obtener una presentación más exclusiva o requisitos de interacción, la expectativa es que los clientes lleguen a desarrollar widgets personalizados. Desarrollar un widget personalizado es una tarea de programación que necesita conocimientos de JavaScript y estar familiarizado con la API de cliente IBM Mashup Center Widget, y potencialmente con Dojo u otro paquete de JavaScript de terceros. El esfuerzo requerido tal vez no sea justificable o las habilidades necesarias tal vez no estén disponibles. Para casos donde la presentación exclusiva puede conseguirse mediante HTML estático y CSS sin el uso de JavaScript dinámico, un enfoque alternativo es generar HTML directamente a partir de orígenes de datos empresariales utilizando el creador de mashup de datos de IBM Mashup Center.

IBM Mashup Center incluye InfoSphere MashupHub y Lotus® Mashups.

En este artículo, aprenderá cómo usar el creador de mashup de datos para generar HTML — HTML compatible con XML — que pueda ser mostrado usando el widget Website Displayer listo para usar o en un navegador. Con CSS, esto puede producir algunas presentaciones distintivas. También describimos un widget simple que puede mostrar HTML arbitrario e interceptar clics del ratón para desencadenar eventos que pueden conectarse a otros widgets.

Este artículo asume que ya está familiarizado con el uso de IBM Mashup Center para crear mashups y feeds. En particular, para la primera parte de este artículo, deberá tener experiencia utilizando el creador de mashup de datos de IBM Mashup Center. La sección Recursos contiene un enlace al artículo "Creando un feed a partir de una base de datos empresarial (JDBC)", que puede ayudarle a ponerse al día sobre los fundamentos de la creación de mashups de datos. Para seguir la sección sobre la creación del widget especial, debe saber cómo programar en JavaScript y las bases de escribir un widget. Vea Recursos Para obtener información útil adicional.


Creador de mashup de datos de IBM Mashup Center

La versión más reciente del creador de mashup de datos de IBM Mashup Center V3 introdujo varios dispositivos importantes, incluyendo:

  • Soporte de declaración de espacio de nombres — El espacio de nombres es frecuentemente utilizado en documentos XML para identificar el vocabulario de marcación definido por distintas organizaciones. A partir de la V3, el operador de transformación en el creador de mashup de datos soporta la manipulación de declaración de espacio de nombres. La declaración de espacio de nombres puede ser creada, modificada y suprimida de cualquier elemento; y cualquier elemento puede ser asignado a cualquiera de los espacios de nombres válidos dentro de este ámbito.
  • Habilidad para manipular la cabecera de feed — La declaración de espacio de nombres puede ser añadida al elemento raíz. Elementos adicionales pueden ser añadidos al elemento raíz como hermanos o como padres para las entradas repetidas. De hecho, un fragmento XML completo para la cabecera y el pie de página puede ser importado en el operador de Publicación para que se incorpore en la salida.
  • Habilidad de especificar el tipo MIME en el operador de Publicación — Los navegadores dependen del tipo MIME para determinar qué programa usar y cómo mostrar el contenido recibido. Por ejemplo: text/xml, text/html, application/xml, application/rss+xml image/svg+xml, application/atom+xml, application/vnd.google-earth.kml+xml, etc.

Generando HTML usando el creador de mashup de datos

IBM Mashup Center tiene un conjunto enriquecido de generadores de feeds que pueden extraer información de orígenes de datos empresariales en formato ATOM. Con el uso del creador de mashup de datos, estos feeds pueden ser convertidos a otras formas estándar como ATOM, JSON o incluso una estructura XML personalizada con su tipo de MIME correspondiente. En particular, al convertir a HTML, los datos empresariales pueden ser mostrados en el widget Website Displayer listo para usar. El usuario puede usar todo el poder de HTML y CSS para crear visualizaciones exclusivas y no limitarse por el diseño o apariencia de ningún widget particular.

Ilustraremos la generación de HTML con un ejemplo simple. Para que sea más fácil seguir adelante, usaremos el feed de muestra "MyCo Customer List" que viene incluido en el producto. Convertiremos el feed de ATOM en una tabla HTML. La siguiente figura muestra cómo representa en el widget Website Displayer.

Figura 1. MyCo Customer List como una tabla HTML
MyCo Customer List como una tabla HTML

El mashup de datos usado para crear el HTML anterior es simple.

Figura 2. Mashup de datos simple para conversión de HTML
Mashup de datos simple para conversión de HTML

Vamos a rodar. Usamos un operador de origen para cargar el feed de datos en el editor. Después, conectamos el operador de origen al operador de trasformación. Para convertir cada entrada del feed de origen de entradas para mostrar una fila en una tabla HTML:

  • Cree el elemento <tr> apropiado para la fila como el padre.
  • Cree todos los elementos <td> para los valores de columna o celda como los elementos hijos del elemento <tr> en el árbol derecho del operador de transformación.
  • Para el primer elemento <td> correspondiente al nombre de la compañía, cree un elemento hijo <a> con un atributo href y copie el valor de texto del elemento <URL> del árbol izquierdo en el atributo href. Esto habilitará al nombre de la compañía para que tenga un hipervínculo.
  • Copie los valores de texto correspondientes del árbol derecho en cada uno de los elementos <td> como sea necesario.
Figura 3. Operador de transformación en el mashup de datos para conversión HTML
Operador de transformación en el mashup de datos para conversión HTML

La salida de la transformación está conectada al operador de publicación, donde se hacen la mayoría de las personalizaciones:

  • Seleccione la opción Custom Header y, para el tipo de Feed, elija Custom MIME type de la lista desplegable y seleccione text/html como el tipo de MIME.
  • En la sección Header Template , haga clic con el botón derecho en root y seleccione el valor Set Template Tree para proporcionar una plantilla personalizada.
Figura 4. Operador de publicación en el mashup de datos para conversión HTML
Operador de publicación en el mashup de datos para conversión HTML
  • Una plantilla puede ser proporcionada en el operador de publicación. La plantilla puede ser generada utilizando cualquier herramienta de creación HTML estándar. Consulte la sección Descargas para la plantilla HTML utilizada en el ejemplo actual. La plantilla a ser agregada será como se indica a continuación.
Listado 1. Plantilla de cabecera para la generación del feed HTML
<html>
	<head>
		<style>
			table { 
				background:#FFFFFF;
				border:1px solid gray;
			...
			...
			.description{
				font:bold 11px verdana;
			} 
			p {
				white-space:normal;
			} 	
		</style>
	</head>
	<body>
	<div class="content">
	  MyCo Customer List:
	</div>
	<div class="description">Here is the transformed MyCo Customer list sample feed 
	presented in a CSS formatted HTML Table using a data mashup:
	</div>
		<table>
			<caption>My Customer List</caption>
			<th>Customer</th>
			...
		</table>
	</body>
</html>
  • Agregue la plantilla HTML anterior en el recuadro Set Template Tree y haga clic en OK en los diálogos siguientes. La plantilla HTML es representada en forma de árbol, lo que permite modificaciones posteriores como añadir nuevos elementos hijos, atributos, espacios de nombres, etc., e incluso añadir elementos deseados del operador en sentido ascendente.
  • Adjunte los datos reales proporcionados por el operador anterior bajo el elemento <table>. Para esto, haga clic con el botón derecho en el elemento <table> y seleccione Attach repeating element.
Figura 5. Adjuntando el elemento de repetición en el operador de publicación
Adjuntando el elemento de repetición en el operador de publicación
  • En el diálogo Attach Repeating Element , seleccione el elemento <tr>, que es la salida que viene del operador de transformación anterior, y haga clic en Attach.
Figura 6. Seleccione el elemento <tr> para adjuntar como elemento de repetición
Seleccione el elemento <tr> para adjuntar como elemento de repetición
  • El elemento <tr> ahora se convierte en el elemento hijo del elemento <table>, según es necesario.
  • Salve el mashup de datos y ejecútelo para confirmar que la salida se muestra como es esperado, que sería una tabla HTML bien formada.

El feed de mashup de datos anterior puede ser usado directamente en el widget Website Displayer. Sólo vaya a Edit Settings para el widget y especifique la URL. Se le puede dar estilo a la tabla para que tenga una apariencia distinta al cambiar el CSS en la plantilla HTML. Es una buena práctica mantener la separación entre la lógica de la transformación de datos y la presentación. Si los datos empresariales necesitan ser transformados, agrupados o aumentados, esas operaciones deben hacerse en un mashup de datos separado. El resultado puede entonces convertirse en HTML usando un mashup de datos distinto. Mantenerlos separados facilitan cambiar la presentación a medida que cambian los requisitos.


Un widget simple para añadir soporte de eventos

Lo que hemos hecho hasta ahora sólo involucra al creador de mashup de datos. Esto está muy bien si sólo desea crear un aspecto visual exclusivo. Si desea que el contenido HTML generado esté disponible para interactuar con otros widgets en una página, necesita la ayuda de un widget especial. En esta sección, le guiaremos a través del proceso de creación de un widget que:

  • Pueda mostrar fragmentos de HTML arbitrario exactamente como el widget de marcación HTML listo para usar
  • Mediante el uso de un atributo personalizado, haga que elementos de HTML arbitrario generen eventos de iWidget al hacer clic en ellos.

Como se mencionó en la Visión General, asumiremos que ya está familiarizado con el archivo de definición del widget y las bases de escribir un iWidget. En lo sucesivo, sólo daremos una descripción breve de nuestro widget. Ya que nuestro widget captura clics del ratón y los convierte en eventos de iWidget, llamamos a nuestro widget "HTMLEvent." Comenzaremos por buscar nuestro archivo de iWidget en Listado 2 a continuación.

Listado 2. Parte del archivo iwidget.xml
<iw:iwidget name="sample.mashupcenter.HTMLEvent"
            xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" 
            allowInstanceContent="true"
            supportedModes="view edit"
            mode="view" 
            iScope="sample.mashupcenter.HTMLEvent">

<iw:resource uri="HTMLEvent.js" />

<iw:event id="HtmlUrl" eventDescName="HtmlUrlDesc"
           handled="true" onEvent="handleHtmlUrl" />  
   <iw:eventDescription  id="HtmlUrlDesc" payloadType="text"
                          description="Url to retrieve HTML fragment" lang="en" > 
</iw:eventDescription>

<iw:content mode="view">
<![CDATA[
    <div  id="_IWID_HtmlArea"></div>
]]>
</iw:content>

Algunas notas sobre el contenido de iwidget.xml :

  1. El elemento iWidget del atributo iScope define el nombre de la clase de JavaScript Dojo que implementa el widget.
  2. El elemento iresource especifica el archivo JavaScript que contiene la implementación de JavaScript y debe ser cargado antes de que el widget sea instanciado.
  3. Observe que sólo hemos definido un único evento de recepción para cambiar la URL, pero no hemos enviado eventos. Los últimos son creados dinámicamente y especificados en el fragmento HTML. Hablaremos sobre eso a detalle más adelante.
  4. El elemento content con el atributo mode establecido en view define el HTML a ser mostrado en el modo de vista. Es muy simple y consiste en un vacío div. Tome en cuenta que tiene un atributo id que consiste en la serie _IWID_HtmlArea. El prefijo especial _IWID_ será reemplazado con el ID de instancia de widget real generado por la infraestructura cuando el widget es instanciado. El contenido real mostrado vendrá del feed de entrada, que se asume que contiene el fragmento HTML.

Para decirle al widget dónde capturar eventos de clic de ratón, añada un atributo MCEVENTonclick="eventName" a cualquier elemento en el fragmento HTML en el que desee que se pueda hacer clic. Aquí, eventName debe ser reemplazado con el valor de texto deseado utilizado para generar nombres de evento que aparezcan en el diálogo de conexión del widget. Como se muestra en Listado 3 más adelante, la función de devolución de llamada _cbHtmlReceived en el widget va a preprocesar el fragmento HTML y buscará todas las ocurrencias de tales atributos. El valor de tales atributos es extraído y salvado en un objeto newEvents para que sea usado para registrar dinámicamente Send events. Estos eventos, una vez que han sido registrados, aparecerán en la "pestaña Send" del diálogo de conexión. Entonces la función _insertOnclick será llamada con el fragmento HTML de entrada, la cadena de caracteres de atributos completa y el nombre de evento. (Lo último es redundante ya que ya está incluido en la cadena de caracteres de atributos completa).

Listado 3. _cbHtmlReceived cuerpo de su función
var  newEvents = {};
var  beg = strHtml.indexOf( "MCEVENTonclick=" );
var  len = 14 + 1; // length of "MCEVENTonclick="
while ( beg > 0 ) {
    var  quote = strHtml.charAt( beg + len );
    var  end   = strHtml.indexOf( quote, beg + len + 1 );
    var  name  = strHtml.substring( beg + len + 1, end );
    newEvents[ name ] = true;
    strHtml = this._insertOnclick( strHtml, strHtml.substring(beg,end+1), name );

    beg = strHtml.indexOf( "MCEVENTonclick=" );
}

this.updateDynamicEvents( newEvents );

this.htmlFragment = strHtml;
var node = dojo.byId(this.uid + "HtmlArea" );
node.innerHTML = this.htmlFragment;

La función _insertOnclick es muy simple y es reproducida en su totalidad en Listado 4 a continuación. Para un eventName dado, usa soporte de expresión regular de JavaScript para reemplazar todas las ocurrencias de MCEVENTonclick="eventName" con el atributo onclick del DOM especificando el script a ejecutar cuando se hace clic en el elemento HTML. El script debe llamar nuestra función handleOnclick con eventName como el parámetro, de forma que nuestro widget pueda generar un evento de iWidget para el nombre especificado. Más precisamente, ya que pueden haber múltiples instancias de este widget en una sola página web, necesitamos llamar la función handleOnclick desde "esta" instancia. Para localizar esta instancia de iWidget, anteponga el ID de widget contenido en la variable this.uid a iContext y llame la función iScope. El ID del widget es inicializado en la función onLoad. Para este y otros detalles, consulte el archivo JavaScript de implementación del widget de la sección de Descargas.

Listado 4. El cuerpo de la función _insertOnclick
_insertOnclick: function( strHtml, srchString, eventName )
{
    this.debugTrace( "_insertOnclick srchString,event=" + srchString + "," + eventName ); 

    var rexp  = new RegExp(srchString, "g");  // global
    // Beware: flipping between using single and double quote for wrapping strings.
    var sTo   = " onclick='JavaScript: "
              + this.uid + 'iContext.iScope().handleOnclick( "'
              + eventName
              + '", this );'
              + "return false;' ";
    var result = strHtml.replace( rexp, sTo );
    return result;
},

Una vez que el preprocesamiento HTML está completo, localizamos el nodo del DOM con el ID _IWID_HtmlArea definido en la sección de modo de vista del archivo de definición del iWidget. El widget muestra el fragmento HTML simplemente asignándolo al elemento del DOM innerHTML. Cuando se hace clic en cualquier elemento HTML en el que se puede hacer clic, un evento de iWidget se iniciará. Si el elemento HTML es un enlace ancla, el valor href es utilizado como datos de evento. Para todos los otros elementos, es el contenido de texto del elemento.

El widget soporta dispositivos adicionales como fondo transparente y la inserción dinámica de CSS para el estilo. Aquellos que estén interesados, consulten el archivo JavaScript de implementación del widget. Ahora veamos el widget en acción.


Poner el widget HTMLEvent en acción

En la sección anterior, cubrimos la creación del widget HTMLEvent simple. En esta sección, veremos cómo puede conectarse a otros widgets y usarse en una página de mashup dinámica.

Para comenzar a utilizar cualquier widget personalizado en un creador de mashup, los archivos ZIP (widgets ligeros) o WAR (para iWidgets) necesitan ser subidos al catálogo primero, seguidos de la acción Add to Mashup Builder en ello. El mismo proceso aplica al widget HTMLEvent creado anteriormente.

A continuación, necesitamos un feed que tenga el atributo de evento MCEVENTonclick añadido a sus elementos, que puede ser útil en el widget HTMLEvent para la generación de eventos. Para esto, usaremos el mismo mashup de datos creado en la sección Generando HTML usando el creador de mashup de datos para añadir el atributo de evento MCEVENTonclick. Abra el mashup de datos para edición y, en el operador de transformación, haga clic con el botón derecho en el elemento <a> y añada el atributo de evento MCEVENTonclick=mytest como se muestra a continuación. El valor de atributo para MCEVENTonclick indica que el nombre de evento será mytest y habilitará pasar el valor del atributo href bajo el elemento <a> una vez que ha sido adecuadamente conectado.

Figura 7. Añadir el atributo MCEVENTonclick
Añadir el atributo MCEVENTonclick

Salve el mashup y ejecute el feed para confirmar que no existen errores.

Cree una nueva página en el creador de mashup y añada el widget HTMLEvent a la página. Haga clic en Edit settings y para la URL HTML, proporcione la URL para el mashup de datos que fue editado en el paso anterior. Tome en cuenta que el widget HTMLEvent también proporciona una sección para añadir CSS personalizado para formatear el feed HTML. Ya que el fragmento HTML es insertado, no todos los navegadores soportan la inclusión de etiquetas de estilo HTML incorporadas. En el ejemplo actual, extraiga el cuerpo de la etiqueta de estilo de la plantilla de cabecera HTML mostrada en Listado 1 y péguela en el área de texto de CSS. Haga clic en Save para salvar los valores del widget. (Tome en cuenta que no hay necesidad de incluir la etiqueta de estilo en la plantilla HTML cuando se construye el mashup de datos para el widget HTMLEvent. De hecho, no hay necesidad de generar las etiquetas html y body. Ya que estas etiquetas extra son ignoradas, no hay necesidad de eliminarlas del mashup de datos).

Agregue un widget Website Displayer a la misma página, haga clic en su Edit Wiring para habilitar la conexión entre el widget HTMLEvent y el widget Website Displayer. En el diálogo de conexión, seleccione la opción URL using Text para el Website Displayer, después seleccione el widget HTMLEvent como el widget para enviar el contexto. Tome en cuenta que el widget HTMLEvent expone el valor mytest que viene del atributo MCEVENTonclick=mytest, seleccione eso como el contenido a enviar, como se muestra a continuación. Haga clic en Done para salvar la conexión del widget.

Figura 8. Conectando el widget HTMLEvent
Conectando el widget HTMLEvent

Los dos widgets — HTMLEvent y Website Displayer — están ahora conectados. Esto puede ser probado haciendo clic en el enlace para el cliente dentro de la tabla HTML. Ahora debe abrir la URL subyacente, correspondiente al cliente seleccionado en el widget Website Display.

Figura 9. Widgets HTMLEvent y Website Displayer conectados en acción
Widgets HTMLEvent y Website Displayer conectados en acción

Otros usos

La mayoría de los widgets de IBM Mashup Center están optimizados para mostrar datos dentro de los límites del tamaño de ventana del navegador. Si existen más elementos de datos que pueden hacerse visibles al mismo tiempo, la paginación y el desplazamiento son frecuentemente usados para mostrar los datos ocultos. Más específicamente, considere una página simple con un widget visor de datos conectado a un widget de entrada de usuario, donde los valores de búsqueda pueden ser ingresados. Si el visor de datos es configurado para mostrar sólo 20 filas y 100 son regresadas, la impresión de pantalla sólo capturará las 20 filas visibles. ¿Cómo hacemos una copia impresa de todas las filas? U enfoque es usar el creador de mashup de datos para reformatear el contenido feed en HTML y añadir un icono de impresión en la página para mostrarla en una página de navegador separada, donde la función de impresión estándar puede ser usada para imprimir el contenido. Usando el mismo feed de ejemplo anterior, usamos otro mashup de datos para generar marcación HTML que pueda ser mostrada en una página de navegador y dimensionada apropiadamente para impresión.

Figura 10. Contenido de tabla de muestra formateado para impresión
Contenido de tabla de muestra formateado para impresión

Nota: Una vez que el contenido feed está en un formato de tabla HTML, aplicaciones de escritorio estándar como Microsoft® Excel® pueden importarlo fácilmente.


Conclusión

Este artículo mostró como usar el creador de mashup de datos de IBM Mashup Center para generar contenido mostrable directamente desde orígenes de datos empresariales. Para fines ilustrativos, los ejemplos elegidos fueron muy simples. Una presentación visualmente enriquecida puede ser generada usando todo el poder de HTML y CSS. Más importante aún, mediante el uso de una convención especial, un atributo insertado en los datos generados, es posible desarrollar un widget que pueda mostrar la presentación generada e interactuar con otros widgets. Esperamos que un lector introduzca otra convención y extendra el widget más allá para proporcionar comportamientos adicionales.


Descargar

DescripciónNombretamaño
Format examplegenHtmlDownloadPkg.zip8KB

Recursos

Aprender

Obtener los productos y tecnologías

  • Para obtener experiencia práctica con IBM Mashup Center, visite Lotus Greenhouse.
  • Descargue una versión de prueba gratuita de IBM Mashup Center desde developerWorks.
  • Construya su próximo proyecto de desarrollo con software de prueba IBM, disponible para descarga directamente de developerWorks.

Comentar

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=Information mgmt, Lotus
ArticleID=751792
ArticleTitle=Muestre datos empresariales como HTML dinámico usando IBM Mashup Center
publish-date=08222011