Vistas

TOOLBOX

LANGUAGES

Guia de desarrollo de Gadgets

De MorfeoWiki

Contenido

Introducción

En una aplicación basada en un entorno de Mashup como EzWeb, los gadgets son el principal elemento:

  • Configuran el entorno operacional del usuario.
  • El usuario elige los gadgets que más se ajusten a sus necesidades.
  • Centralizan la interactuación entre el usuario y el sistema, así como entre otros gadgets.

Diseño Conceptual de Gadgets

Los gadgets deben ser:

  • Componentes sencillos, reutilizables, que centralicen la interactuación del usuario.
  • Lo más genéricos posible, aunque a veces sea necesario recurrir a soluciones particulares.
  • Deben adaptarse a problemas reales y concretos.
  • Son elementos de front-end (vista). No suele ser conveniente que desempeñen funciones de back-end (controlador o modelo) ya que esto lo puede proporcionar la plataforma (persistencia de estado).
  • En su desarrollo puede utilizarse cualquiera de las tecnologías aceptadas por el propio navegador Web (XHTML, JavaScript, SVG, Flash, Applets, etc).

Desarrollo de Gadgets

Un gadget está dividido en dos grandes bloques, que se corresponden con dos ficheros distintos:

  • Un template, o parte declarativa (XML).
  • Y la propia implementación (HTML).

Template

Es un documento XML que define el comportamiento del gadget con su entorno (usuario, plataforma, otros gadgets,...), permitiendo que el gadget pueda compartir información de manera estandarizada, declarativa y semántica. Además, es posible definir varios templates para una misma implementación de gadget, dependiendo de cual se desea que sea su comportamiento.

El template está divido en dos grandes bloques conceptuales:

  1. Descripción. Contiene toda la información contextual del Gadget. En el documento XML debe aparecer un único elemento perteneciente a este bloque, el cual debe tener como prefijo la palabra Catalog, concretamente este elemento es:
    • Catalog.ResourceDescription. Recoge toda la información relativa al gadget. Está formado por los siguientes campos:
      • Vendor. Es el distribuidor del gadget.
      • Name. Nombre del gadget.
      • Version. Versión actual del gadget 
        Nota: Estos tres campos forman el identificador del gadget

        

        

      • Author. Persona que ha desarrollado el gadget

      • Mail. Dirección de correo electrónico para ponerse en contacto con el autor

      • Description. Breve descripción del gadget

      • ImageURI. Ruta donde se encuentra la imagen que más tarde se mostrará en el catálogo

      • WikiURI. Entrada a una Wiki donde encontrar una descripción más completa del gadget

      

      <Catalog.ResourceDescription>

          <Vendor>Morfeo</Vendor>

          <Name>Localizador</Name>

          <Version>1.0</Version>

          <Author>lmayllon</Author>

          <Mail>lmayllon@tid.es</Mail>

          <Description>

              Este gadget presenta la ubicacion en el plano de una determinada direccion

          </Description>

          <ImageURI>

              http://ezweb.hi.inet/gadgets/img/brujula.gif

          </ImageURI>

          <WikiURI>

              http://ezweb.hi.inet/wiki/Localizador

          </WikiURI>

      </Catalog.ResourceDescription>

      

      

    

    

  2. Variables de Integración y Elementos de Plataforma. En este bloque se definen las variables que usa el gadget para interactuar con el entorno, asociando conceptos con aspectos. Así mismo también se definen algunos otros elementos propios de la interfaz, como puede ser el tamaño del propio gadget. 

    El documento XML correspondiente al template deberá estar formado por varios elementos pertenecientes a este bloque, todos ellos con la palabra Platform como prefijo. Concretamente deben aparecer los elementos:

    • Platform.Preferences. Son las preferencias de usuario, las cuales podrá modificar a través de la plataforma. Es un elemento obligatorio, formado por varios campos Preference, aunque también puede aparecer vacío. 

      • Preference. Define una preferencia de usuario. Debe tener obligatoriamente los siguientes atributos:

        • name. Nombre de la variable.

        • type. Tipo de datos de la variable. Por ahora sólo se permite el tipo text (cadena de caracteres)

        • description. Texto descriptivo que acompaña a la variable

        • label. Etiqueta con la cual se mostrará la variable al usuario en la interfaz

        

      

      <Platform.Preferences>

          <Preference name="bg" type="text" description="descripcion" label="background color"/>

          <Preference name="textcolor" type="text" description="descripcion" label="text color"/>

      </Platform.Preferences>

      

      

    • Platform.StateProperties. Elemento en el que se engloban las variables de estado de los Gadgets. El estado puede ser cualquier información que el gadget deba hacer persistente (como una nota, etc). Es un elemento obligatorio que define una lista de Property (particularmente la lista puede estar vacía). 

      • Property . Define una variable de estado. Debe tener obligatoriamente los siguientes atributos:

        • name. Nombre de la variable.

        • type. Tipo de datos de la variable. Por ahora sólo se permite el tipo text (cadena de caracteres)

        • label. Etiqueta con la cual se mostrará la variable al usuario

        

      

      <Platform.StateProperties>

          <Property name="nota" type="text" label="nota"/>

      </Platform.StateProperties>

      

      

    • Platform.Wiring. Define una lista con las variables que utiliza un Gadget para comunicarse con otros Gadgets. Puede contener un número cualquiera de estos elementos:

      • Event. Se corresponden con los eventos que produce un gadget, los cuales serán recibidos por otros gadgets en los denominados slots. Está formado por los siguientes atributos:

        • name. Nombre de la variable.

        • type. Tipo de datos de la variable. Por ahora sólo se permite el tipo text (cadena de caracteres)

        • label. Etiqueta con la cual se mostrará la variable al usuario

        • friendcode. Etiqueta que define los slots con los que el evento está relacionado, y con los cuales puede conectarse a través de un canal. Cuando un usuario crea un canal en la plataforma, ésta le sugiere como posibles entradas y salidas, aquellos eventos y slots que tengan el mismo valor friendcode.

        

      • Slot. Define la variable donde se recibe el valor del evento que ha producido otro gadget. Cada elemento debe tener los siguientes atributos:

        • name. Nombre de la variable.

        • type. Tipo de datos de la variable. Por ahora sólo se permite el tipo text (cadena de caracteres)

        • label. Etiqueta con la cual se mostrará la variable al usuario

        • friendcode. Funciona de manera similar al de la variable Event.

        

      

      <Platform.Wiring>

          <Slot name="serviceHired" type="text" label="ServiceHired" friendcode="service"/>

          <Event name="deviceId" type="text" label="deviceId" friendcode="deviceId"/>

          <Event name="deviceStatus" type="text" label="deviceStatus" friendcode="deviceStatus"/>

      </Platform.Wiring>

      

      

    • Platform.Context. Elemento en el cual se define aquellas variables encargadas de dotar de contexto a un gadget, y las cuales son manejadas por la propia plataforma. Al igual que los anteriores, es un elemento obligatorio y puede albergar un número cualquiera de los siguientes dos elementos:

      • External. Define una variable de contexto cuyo ámbito abarca toda la plataforma (p.e. usuario, etc)

      • Gadget. En este caso, el ámbito de estas variables se reduce al propio Gadget (p.e. altura, anchura, etc)

        Ambos deben tener los siguiente atributos:

        

        • name. Nombre de la variable.

        • type. Tipo de datos de la variable. Por ahora sólo se permite el tipo text (cadena de caracteres)

        • concept. Etiqueta que dota de semántica a la variable. Concretamente debe corresponde con uno de los conceptos que maneja la plataforma. Actualmente únicamente se encuentran definidos los conceptos externos nombre de usuario y lenguaje como user_name y language respectivamente, y los contextos de gadget altura y anchura como height y width respectivamente.

        

      

      <Platform.Context>

          <Context name="user" type="text" concept="user_name"/>

          <Context name="language" type="text" concept="language"/>

          <GadgetContext name="height" type="text" concept="height"/>

          <GadgetContext name="width" type="text" concept="width"/>

      </Platform.Context>

      

      

    • Platform.Link. Elemento en el que se asocia el fichero template con su correspondiente. Esta formado por el elemento XHTML, en cuyo atributo href se define la URL donde se aloja el código HTML del gadget.

      <Platform.Link>

          <XHTML href="http://ezweb.morfeo-project.org/gadgets/myGadgetCode.html"/>

      </Platform.Link>

      

      

    • Rendireing. Contiene la información de presentación de interfaz. Debe contener los atributos height y width, los cuales definen la anchura y altura del gadget respectivamente.

      <Platform.Rendering width="1" height="11"/>

      

      

    

    




 Implementación




Es un fichero HTML en el que se define qué hace concretamente el gadget, utilizando para ello los elementos declarados en el template. En su desarrollo puede utilizarse cualquier tecnología soportada por los navegadores Web (JavaScript, Flash, SVG, etc)

Pese a que en el template las variables se definen con multitud de aspectos (preference, event, slot, context,...) de cara a la implementación sólo existen dos tipos de variables: lectura y escritura, de manera que todas las variables definidas en el template quedan englobadas en una de estas categorías de la siguiente manera:



  • Variables de sólo lectura

    • SLOT

    • PREFERENCE

    • EXTERNAL CONTEXT 

    • GADGET CONTEXT

    

  • Variables de lectura-escritura

    • EVENT

    • PROPERTY

    



 Declaración y uso de variables


Para poder hacer uso de las variables declaradas en el template, es necesario declarar previamente las variables en el código haciendo uso de la API de la plataforma EzWeb (ver más adelante EzWebAPI). Posteriormente, se puede hacer uso de ellas mediante los métodos get y set que incorporan (evidentemente, el método set sólo estará disponible para las variables de lectura-escritura).



  • Variables de sólo lectura (RGadgetVariable)

    function setColorbg(color){

       ...	

    }

    var backgroundColor = EzWebAPI.createRGadgetVariable("background", setBackgroundColor);

    ...

    document.getElementById('layer').style.background=backgroundColor.get();

    

    Cómo puede observarse, para las variables de lectura hay que declarar una función manejadora (en este caso setColorbg) que se ejecutará cuando el valor de la variable haya sido modificado.

    

  • Variables de lectura-escritura (RWGadgetVariable)

    var phoneNumber = EzWebAPI.createRWGadgetVariable("phone");

    ...

    phoneNumber.set("913378986");

    ...

    var currentPhone = phoneNumber.get();

    

    



 API JavaScript para el desarrollo de Gadgets. EzWebAPI


EzWebAPI es el API que los gadget deben utilizar para poder explotar las funcionalidades que proporciona la plataforma, que básicamente son:



  • Gestión automática de las variables (persistencia, propagación de eventos, etc)

  • Comunicación HTTP evitando los problemas Cross-Domain de AJAX



Los métodos que exporta el API de EzWeb son:



  • createRGadgetVariable. Crea una nueva variable de lectura. Recibe como parámetro:

    • name. Nombre con el que se definió la variable en el template. 

    • handler. Nombre de la función manejadora que se ejecutará cuando el valor de la variable haya sido modificado.

    

    EzWebAPI.prototype.createRGadgetVariable = function(name, handler);

    

    

  • createRWGadgetVariable. Crea una nueva variable de lectura-escritura. Recibe como parámetro:

    • name. Nombre con el que se definió la variable en el template. 

    

    EzWebAPI.prototype.createRWGadgetVariable = function(name);

    

    

  • send_get. Realiza una petición HTTP utilizando el método GET. Recibe como parámetro:

    • url. Es la URL destinataria de la petición. En caso de utilizar parámetros, estos deberán ir codificados junto con la URL de la siguiente manera: 

       url?param1=value1&param2=value2& ... & paramN=valueN

      

      

    • context. Debido a los problemas de perdida del contexto de ejecución en JavaScript, es necesario pasar siempre un puntero a this en este tipo de métodos para así poder llamar a la función de callback.

    • successHandler. Función de callback que se ejecutará cuando la petición se haya realizado con éxito.

    • errorHandler. Función de callback que se ejecutará cuando durante la petición se haya producido algún error.

    

    EzWebAPI.prototype.send_get = function(url, context, successHandler, errorHandler);

    

    

  • send_post. Realiza una petición HTTP utilizando el método POST. Recibe como parámetro:

    • url. Es la URL destinataria de la petición.

    • parameters. Son los parámetros de la petición. En este caso deberán pasarse a la función codificados en un string de la siguiente manera:

      parameters = "param1=value1&param2=value2& ... &paramN=valueN";

      

      

    • context. Puntero al contexto this. Similar al caso del método send_get.

    • successHandler. Función de callback que se ejecutará cuando la petición se haya realizado con éxito.

    • errorHandler. Función de callback que se ejecutará cuando durante la petición se haya producido algún error.

    

    EzWebAPI.prototype.send_post = function(url, parameters, context, successHandler, errorHandler);

    

    

  • Ejemplos de implementación:





Objetivos:

  •  construir un gadget básico que sirva de toma de contacto al desarrollador

  •  observar el funcionamiento de las propiedades persistentes entre sesiones

  •  tratar con preferencias de usuario






Objetivos:

  •  declaración de eventos y slots

  •  uso de variables de lectura y lectura-escritura

  •  establecimiento de manejadores sobre variables de lectura






Objetivos:

  •  acceso a las variables de contexto de la plataforma












Obtenido de "http://forge.morfeo-project.org/wiki/index.php/Guia_de_desarrollo_de_Gadgets"