Template

EzWeb es una plataforma de desarrollo sobre la cual el programador puede construir pequeñas aplicaciones o "gadgets" que un usuario de EzWeb cualquiera puede instanciar en su entorno de ejecución o "dashboard".

El desarrollador debe programar el gadget en lenguaje xhtml y javascript, conforme a una serie de reglas establecidas por el API EzWeb. Además del cuerpo del gadget propiamente dicho, el desarrollador deberá escribir una "plantilla" en formato xhtml, que permitirá incluir el gadget en el seno de la plataforma EzWeb.

En esta plantilla se recogerán todos los detalles de implementación que no tienen que ver con la "capa de negocio" en sí, del gadget. Estos detalles no están fuertemente relacionados con la forma en que gadget lleva a cabo las operaciones y cálculos, sino más bien con los datos que alimentan dichos procesos y la forma en que el gadget va a conseguir estos datos.

La información que aparece en la plantilla

Para que un gadget pueda ejecutarse correctamente sobre la plataforma EzWeb es necesario que queden descritos de forma explícita ciertos pormenores sobre el modelo de datos que el gadget maneja. En este sentido, la plantilla recogerá detalles sobre:

• las preferencias que el usuario del gadget puede modificar y guardar,

• otras propiedades persistentes que el própio código del gadget puede leer y modificar,

• los eventos que el gadget puede propaga por toda la plataforma EzWeb

• y la forma de reaccionar frente a eventos generados por otros gadgets.

Preferencias de usuario

En cuanto a las preferencias de usuario, la plantilla expresará de manera declarativa, los datos que el usuario podrá ver y configurar. La plataforma se encargará de hacer estos valores persistentes, así como de proveear al usuario de herramientas para la edición y validación de estos datos. El programador de gadgets no se tiene que preocuparse de programar una interfaz para modificar estas preferencias, sino que la plataforma EzWeb genera automáticamente un interfaz apropiado para cada variable, en función del tipo de dato. El código fuente del gadget, podrá acceder a estas variables en todo momento, sin embargo debe tener en cuenta que pueden ser modificadas por el usuario de forma arbitraria.

Variables de estado

Otro tipo de variables que deberán explicitarse en la plantilla son las relativas al estado del gadget. Este tipo de datos pueden cambiar a lo largo de la ejecución del gadget sin que el usuario del mismo se vea involucrado. No pueden ser modificadas por el usuario a través de ningún interfaz ni se llevará a cabo ningún chequeo adicional sobre esos datos. Sin embargo, la plataforma EzWeb debe conocer cuáles son estas variables y de qué tipo son, para poder asegurar la persistencia de estos valores. El desarrollador no tiene que preocuparse de ningún aspecto adicional sobre la persistencia de estos datos.

Eventos

En relación a los eventos, la plantilla guarda información sobre dos tipos básicos de datos:

• los slots

• y los eventos

Las ranuras o "slots" hacen referencia a los eventos a los que puede responder el gadget mediante ciertos manejadores. Estas slots pueden ser accedidas, en modo lectura, desde el código fuente del gadget. Sin embargo, solo pueden ser modificados mediante eventos disparados por algun gadget de la plataforma EzWeb. Este tipo de variables deben estar expecificadas en la plantilla para que la plataforma EzWeb se encargue de actualizarlas cada vez que algún gadget de la plataforma genera el evento adecuado.

Los eventos que el propio gadget produce deben ser explicitados también el la plantilla. Estas variables serán modificadas desde el código fuente del gadget. De hecho es la única forma de modificarlas. Para el desarrollador del gadget, disparar un evento significa modificar una de estas variables. La plataforma EzWeb se encarga de exportar y propagar el evento y hacer saber al resto de los gadgets que el valor ha cambiado.

Una vez que el usuario ha instanciado varios gadgets en su dashboard, puede establecer conexiones entre eventos y slots, denominadas "canales". Estas asignaciones pueden ser realizadas "en caliente" y tendrán un caracter persistente sobre la plataforma EzWeb.

Otra información

Por otro lado, en la plantilla aparece otro tipo de información más relacionada con la catalogación y recuperación de gadgets. Esta información consiste en varios campos de datos básicos, por ejemplo: el autor, la versión, fecha de creación, etc.

Además, existe la posibilidad de insertar campos libres, sin un significado a priori para la plataforma y sin un comportamiento predeterminado asociado, para cubrir las necesidades no previstas en cuando a funcionalidad asociadas a la plantilla. Mediante estos campos se posibilita la innovación permitendo darle a ese campo novedosas utilizaciones.

Syntaxis de la plantilla

<Template schemaLocation="http://morfeo-project.org/2007/Template">

    <!-- Meta tags define gadgets properties -->
    <Catalog.ResourceDescription>
        <Vendor>Morfeo</Vendor>
        <Name>Device_Data_Viewer</Name>
        <Version>1.0</Version>
        <Author>lmayllon</Author>
        <Mail>lmayllon@tid.es</Mail>
        <Description>This gadget shows the information relates to a devide</Description>
        <ImageURI>http://myimages/devices/samples.jpg</ImageURI>
        <WikiURI>http://mywiki/Device_Data_Viewer</WikiURI>
    </Catalog.ResourceDescription>

    <!-- EzWeb Gadgets Tags -->
    <Platform.Preferences>
        <Preference name="bg" type="text" description="background color" label="background color"/>
        <Preference name="textcolor" type="text" description="Text color" label="text color"/>
    </Platform.Preferences>

    <!-- EzWeb Gadget Persistent State -->
    <Platform.StateProperties>
        <Property name="note" type="text" label="note"/>
    </Platform.StateProperties>

    <!-- EzWeb Gadget Data Wiring -->
    <Platform.Wiring>
        <Event name="deviceAddress" type="text" label="Address" friendcode = "deviceAddress" />
        <Slot name="deviceVendor" type="text" label="Vendor" friendcode = "deviceVendor" />
        <Slot name="deviceModel" type="text" label="Model" friendcode = "deviceModel" />
        <Slot name="deviceId" type="text" label="Identifier" friendcode = "deviceIdentifier" />
    </Platform.Wiring>


    <!-- EzWeb Gadget Data Context -->
    <Platform.Context>
        <Context name="user" type="text" concept="user_name"/>
        <GadgetContext name="width" type="text" concept="width"/>
        <GadgetContext name="height" type="text" concept="height"/>  
    </Platform.Context>

    <!-- EzWeb Gadget Code related -->
    <Platform.Link>
        <XHTML href="http://mycode/DeviceDataViewer.html"/>
    </Platform.Link>

    <!-- EzWeb Gadget rendering -->
    <Platform.Rendering width="3" height="11"/>

</Template>

Ejemplo del código fuente de un gadget

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>

    <title>Title as html code</title>

    <!-- Stylesheet or Inlined CSS -->
    <link rel="stylesheet" href="http://morfeo-porject.org/ezweb/css" type="text/css" />
    <style type="text/css" media="screen">
    img {border: none;}
    </style>

    <!-- Javascript library for Morfeo EzWeb Gadgets -->
    <script type="text/javascript" src="http://morfeo-project.org/ezweb/js"></script>
    <script type="text/javascript">
    // my javascript code
    </script>

  </head>
  <body>

    <!-- The body of the gadget -->

    <h3>Encabezado</h3>
    <p>El widget puede tener <strong>algo resaltado</strong>.</p>

    <h4>Sección</h4>
    <table>
      <thead>
        <tr><td></td><td>variable 1</td><td>variable2</td></tr>
      </thead>
      <tbody>
        <tr><td>uno</td><td>valor 1</td><td>valor2</td></tr>
        <tr><td>uno</td><td>valor3</td><td>valor4</td></tr>
        <tr><td>uno</td><td>valor5</td><td>valor6</td></tr>
      </tbody>
      <tfooter>
        <tr><td></td><td>casos</td><td>unidades</td></tr>
      </tfooter>
    </table>
    <p>Si hay algo que decir, pues se escribe por aquí...</p>
    <ul>
      <li>esto</li>
      <li>aquello</li>
      <li>lo de más allá</li>
    </ul>
    <p>Si tiene que haber algo de orden:
    <ol>
      <li>lo primero,</li>
      <li>lo segundo,</li>
      <li>lo tercero,</li>
    </ol>
    </p>
    <p>También alguna imagen <img src="foto.jpg" alt="imagen de ejemplo" /></p>

  </body>
</html>