Creación de widgets mediante herramientas básicas (en desuso)

Puede utilizar herramientas básicas como un editor de texto u otros editores para crear widgets personalizados.

1. Cree una estructura de directorios para contener los archivos del widget personalizado.
   Consejo: Los widgets comunes se hallan en la estructura siguiente: iWidget/widgets/nombre_widget. Puede utilizar esta vía de acceso para ser coherente o puede utilizar su propia estructura.
2. En el directorio nombre_widget cree el archivo de definición de widgets y defina el widget en él. Para obtener más información sobre la definición del widget y sus partes y sobre iContext, consulte la especificación de iWidget.
   Consejo: El convenio de denominación para el archivo de definición del widget es widgetName_iWidget.xml.

   En la definición del widget y sus elementos, se define lo siguiente:

   • El nombre del widget y los esquemas utilizados.
     Por ejemplo:

     <?xml version="1.0" encoding="UTF-8"?>
     <iw:iwidget 
     		id="HelloWorld" 
     		xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
     		xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" 
     		supportedModes="view edit" 
     		lang="en" 
     		iScope="HelloWorld" 
     		name="helloWorld">

     El id debe ser exclusivo.
   • El ámbito, que es la clase envoltorio Dojo para la implementación del widget.
     Por ejemplo:

     <iw:iwidget 
     		id="HelloWorld" 
     	...
     		iScope="HelloWorld" 
     		name="helloWorld">

     iScope debe coincidir con el nombre de la clase JavaScript que define el comportamiento del widget.
   • Las modalidades que el widget soporta y las definiciones para cada modalidad.
     Por ejemplo, añada las modalidades:

     <iw:iwidget 
     		id="HelloWorld" 
     	...
     		supportedModes="view edit" 
     	...
     		name="helloWorld">

     Por ejemplo, defina las modalidades añadidas:

     <iw:content mode="view">
     			<![CDATA[
     						<div>Hello World</div>
     			]]>
     </iw:content>

     Debe definir la modalidad view de forma que tenga algo que visualizar. Si desea que los usuarios modifiquen (con el elemento de menú Editar valores) el contenido del widget de alguna manera, añada la modalidad edit. La modalidad edit cambia los atributos del widget (valores) en la capa Atributo de la instancia. Si desea que determinados usuarios (normalmente sólo los administradores) modifiquen los valores predeterminados del widget, añada la modalidad config. La modalidad config cambia los atributos del widget en la capa Administración. Si desea que los usuarios personalicen la forma en que el widget visualiza sus datos y que el cambio solo se aplique a usuarios individuales, añada la modalidad personalize. La modalidad personalize cambia los atributos del widget en la capa Usuario. Para obtener información sobre las capas de atributos y sobre cómo funcionan, consulte En desuso: Capas de atributos del widget y En desuso: Soporte de la personalización de widgets.

   • La vía de acceso y el nombre el archivo JavaScript que declara iScope. iScope es una clase Dojo que es un punto de entrada para una clase iContext en tiempo de ejecución. Este punto de entrada es la parte del elemento que interacciona con el entorno a través de la clase iContext. La clase iContext es esencial para el entorno de ejecución del widget y proporciona todos los servicios de entorno como, por ejemplo, acceso a variables globales, un estado compartido, almacenamiento de variables locales, comunicación entre widgets mediante sucesos, servicios remotos, soporte de modalidad y otras muchas funciones. Por ejemplo: <iw:resource src="helloWorld.js" id="iScopeFile" />. En este caso, el archivo está en el mismo directorio que la definición del widget de manera que no hay que incluir la vía de acceso.
   • Los atributos del elemento, que incluyen los valores que pueden modificar los usuarios. Estos atributos proporcionan los valores predeterminados para el widget. Los valores se almacenan como series, por lo que es posible que la implementación necesite convertir estos valores. Por ejemplo:

     <iw:itemSet id="attributes" private="true">
     		<iw:item id="url" readOnly="false" value="http://www.ibm.com"/>
     </iw:itemSet>

   • Los sucesos que el widget publica y gestiona añadiendo una definición y una descripción de cada suceso. Por ejemplo:

     <iw:event eventDescName="displayHtml" handled="true" id="Receive URL" onEvent="displayMarkup"/>
     <iw:eventDescription 
     		description="Receives and displays a URL that is sent from another widget" 
     		id="displayHtml" 
     		lang="en" 
     		payloadType="url.html" 
     		title="Receive URL">
     </iw:eventDescription>

   • Añada, como recursos, la vía de acceso relativa y el nombre de cualquier otro archivo que el widget necesite. Por ejemplo, si el widget utiliza un archivo .css para el formateo, añada la vía de acceso y el nombre de este archivo como recurso. Sin embargo, cuando añada recursos, tenga en cuenta que tener demasiadas solicitudes de recursos influye en el rendimiento y el código debe hacer referencia al menor número posible de archivos JavaScript, CSS y de imagen. Tome en consideración la posibilidad de utilizar técnicas como la creación de sprites de imágenes, la combinación y minimización de archivos JavaScript y CSS y la carga lenta de recursos (como la espera a cargar los recursos para la modalidad edit hasta que se produzca el suceso onEdit) al diseñar el widget.
3. Cree el archivo JavaScript que declara iScope y luego empiece a definir el iScope identificando su interfaz. Cree la implementación del widget utilizando JavaScript o cualquier otro lenguaje de programación o script. Siga desarrollando el iScope mientras desarrolla la implementación del widget.
   Consejo: Si el widget es simple y utiliza JavaScript para su implementación, cree la implementación del widget en el archivo de iScope en sí.
   1. Cree manejadores para las modalidades que ha añadido en la definición de iWidget y los distintos sucesos definidos en la interfaz, incluidos los sucesos predefinidos de la especificación de iWidget. Para los siguientes iEvents predefinidos (en la especificación de iWidget), hay manejadores de sucesos predeterminados, que se pueden sobrescribir si es necesario:
      • onLoad, al que se llama cuando el widget se carga por primera vez y cuando se renueva el navegador. El elemento puede inicializar la vista inicial en este manejador. No hay carga útil de sucesos. Puede recuperar los valores de elementos utilizando código de esta manera:

        var att = this.iContext.getiWidgetAttributes();
        this.name = att.getItemValue("name");

      • onReload, al que se llama cuando el widget se vuelve a cargar. Este manejador de sucesos es similar a onLoad, sin embargo, se llama bajo circunstancias distintas. Cuando un usuario está en modalidad edit y selecciona uno de los botones de la parte inferior de la ventana de valores, el manejador de sucesos onReload se llama cuando se renueva la modalidad view. Es un comportamiento ligeramente diferente del que llama la especificación de iWidget, ya que la especificación pide que este suceso se active antes de la operación de volver a cargar, en lugar de durante la renovación del contenido del iWidget por parte de la modalidad edit. No hay carga útil de sucesos.
      • onUnload, al que se llama justo antes de descargar el widget. No hay carga útil de sucesos.
        Importante: Asegúrese de que todos los widgets Dojo que ha creado son limpiados durante este manejador de sucesos. Tiene que llamar <widget>.destroyRecursive() para asegurarse de que se limpian todos los widgets Dojo hijos en cuanto al uso de memoria.
      • onRefreshNeeded, al que se llama cuando el iContext determina que los datos del widget son obsoletos. Este suceso indica al iWidget que renueve sus datos cuando sea necesario.
   2. Para cada modalidad especificada en el atributo supportedModes de la definición del widget, cree un manejador de modalidad. Por ejemplo, si el widget tiene una modalidad view y una modalidad edit, cree los métodos onView y onEdit. El método onView puede codificarse de la manera siguiente:

      onView: function(){
      ... 
      }

   3. Cree un manejador para el suceso onSizeChanged. El suceso tiene una carga útil que contiene valores para los atributos newWidth y newHeight. El manejador utiliza esta información para cambiar el tamaño del widget con la anchura y altura especificadas. Si el usuario ha minimizado el widget, estos atributos tendrán un valor de 0.

      El código siguiente muestra cómo utilizar el manejador onSizeChanged:

      onSizeChanged: function(iEvent) { 
            var data = iEvent.payload; 
            if (data) { 
               alert("new height: " + data.newHeight); 
               alert("new width: " + data.newWidth); 
            } 
         }

   4. Opcional: Si el widget accede a los datos a través de API de REST, utilice los URI (Uniform Resource Identifier) en el código como el ejemplo siguiente:

      dojo.xhrGet({ 
        url: this.iContext.io.rewriteURI(uri), 
        load: handler 
      }); 

      Puede utilizar un método similar para acciones HTTP como PUT, POST y DELETE.

4. Cree archivos de imagen para que sirvan de imágenes de icono y vista previa del widget personalizado. La imagen de icono debe ser de 28 píxeles por 28 píxeles mientras que la imagen de vista previa debe ser de 160 píxeles de ancho por 128 píxeles de alto.
5. Opcional: Si el widget personalizado va a disponer de ayuda en línea, cree uno o varios archivos HTML para proporcionar el texto de ayuda. Puede empaquetar estos archivos con el widget o puede crear un plug-in de documentación y colocar los archivos de ayuda en el plug-in. Consulte En desuso: Creación de un plug-in de documentación para obtener información.
6. Empaquete el archivo de definición de widgets, los archivos de implementación de widgets y los archivos de imagen en un EAR con una herramienta de empaquetado adecuada. La herramienta debe poder empaquetar los EAR y WAR de acuerdo con las especificaciones J2EE.
7. Para registrar el widget personalizado, cree una definición del widget en el archivo de catálogo. Puede poner la entrada en un archivo de catálogo existente o puede crear su propio archivo de catálogo. Consulte En desuso: Registro de widgets personalizados mediante archivos de catálogo para obtener información acerca de cómo crear un archivo de catálogo y una definición de registro de widget.
   Consejo: El convenio de denominación para el archivo de registro de widget es catalog_nombreCatálogo.xml.
8. Empaquete y despliegue el widget personalizado como se describe en el apartado En desuso: Empaquetado y despliegue de widgets personalizados.
9. En un navegador web, vaya al URL panel de control. El URL será algo parecido a http://localhost:9080/BusinessSpace.