Creación de widgets con Rational Application Developer (en desuso)

Puede utilizar Rational Application Developer o Integration Designer para ayudarle a crear widgets personalizados.

1. Utilizando la perspectiva web, cree un proyecto web dinámico para el widget personalizado y asigne el proyecto a un EAR. El proyecto web dinámico se correlaciona con un WAR cuando exporta el EAR.
   Consejo: Si planea que el widget utilizando su raíz de contexto encuentre sus recursos, tenga en cuenta la raíz de contexto de la aplicación web. Puede mantener el valor predeterminado o cambiarlo. Utilice la página siguiente del asistente para cambiar la raíz de contexto.
2. En el directorio WebContent del proyecto (creado automáticamente como parte del proyecto web), cree una estructura de directorios donde alojar el código del widget. La estructura de directorios WebContent es donde se colocan los recursos desplegables para el widget como los archivos HTML y JSP. Los recursos que coloque fuera de la estructura de directorios WebContent son para recursos que no se despliegan como archivos Java y SQL.
   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.
3. En el directorio widget, cree el archivo de definición de iWidget para el widget personalizado. Asegúrese de que el ID del iWidget sea exclusivo y que iScope coincide con el nombre de la clase JavaScript que define el comportamiento del widget. Para obtener información, consulte Creación de iWidgets en la ayuda de Rational Application Developer.
   Consejo: El convenio de denominación para el archivo de definición del widget es nombreWidget_iWidget.xml.
4. Con el editor de iWidgets, defina el widget; para ello, proporcione esta información:
   • Añada las modalidades que soporta el widget y los datos o código de cada modalidad.

     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.

   • Añada los atributos del widget añadiendo un conjunto de elementos y los elementos que contiene. Estos atributos proporcionan los valores predeterminados para el widget. Por ejemplo, si el widget muestra un sitio web, añada un atributo url para almacenar el URL.

     Los valores se almacenan como series, por lo que es posible que la implementación necesite convertir estos valores.

     Asegúrese de que incluye un atributo para soportar todos los valores o personalizaciones que los usuarios pueden realizar en el widget. Por ejemplo, si el widget incluye una tabla y desea dar soporte a la personalización de qué columna utiliza la tabla para clasificar la información, es posible que tenga un atributo sort_column para almacenar esta información.

   • Los sucesos que el widget publica y gestiona añadiendo una definición y una descripción de cada suceso.
   • Añada, como recurso, la vía de acceso relativa y el nombre del archivo 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 widget 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.

     En este caso, el archivo está en el mismo directorio que la definición del widget así que no hay necesidad de incluir la vía de acceso.

   • 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.
   También puede añadir el código o los datos directamente al archivo XML utilizando el separador Origen. Para obtener más información sobre la definición del widget y sus elementos y sobre iContext, consulte la Especificación de iWidget 2.1.
5. 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.

6. Cree archivos de imagen para que sirvan de imágenes de icono y vista previa del widget personalizado y póngalos en alguna parte del directorio WebContent. Cree la imagen de icono de 28 píxeles por 28 píxeles y la imagen de vista previa de 160 píxeles de ancho por 128 píxeles de alto.
7. 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.
8. 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. Si crea un archivo de catálogo, póngalo en un directorio catalog fuera del directorio WebContent.
   Consejo: El convenio de denominación para el archivo de registro de widget es catalog_nombreCatálogo.xml.
9. Empaquete y despliegue el widget personalizado. Si el perfil que contiene las aplicaciones BSpace* no es local, utilice la herramienta wsadmin en el servidor de aplicaciones tal como se describe en En desuso: Empaquetado y despliegue de widgets personalizados. Las aplicaciones BSpace* contienen el código de infraestructura para los paneles de control de Monitor. Si el perfil es local, puede ejecutar los mandatos en el entorno de desarrollo utilizando los pasos siguientes:
   1. Exporte el directorio catalog en un archivo JAR y especifique que la extensión del archivo es .zip. El archivo .zip debe tener el archivo de catálogo dentro de un directorio catalog.
   2. Cree un directorio para contener el empaquetado y el script de despliegue. Asegúrese de que el directorio script no esté en el directorio WebContent o en cualquiera de los subdirectorios.
   3. Cree un archivo de script Jython en el directorio script y póngale un nombre parecido a installBSpaceWidget.py.
   4. Edite el archivo de script para añadir el código siguiente:

      AdminTask.installBusinessSpaceWidgets('[-nodeName nombre_nodo -serverName nombre_servidor -widgets vía de acceso/archivo_catálogo.zip]')

   5. Guarde el archivo y ciérrelo.
   6. En la vista de explorador, pulse con el botón derecho del ratón y seleccione Ejecutar como > Script administrativo
   7. En la ventana Editar configuración, añada esta información:
      • Para el entorno de ejecución de script, especifique el tipo de servidor de aplicaciones.
      • Para el nombre del perfil, especifique el perfil que contiene las aplicaciones BSpace*.
      • Para los argumentos de wsadmin, escriba -conntype NONE.
      • Si se ha habilitado la seguridad, especifique el ID de usuario administrador y la contraseña.
      Puede realizar un seguimiento del progreso del script en la vista Consola. En función del servidor, llevará varios minutos completarse el script.
10. Pruebe el elemento, para ello, siga estos pasos:
    1. En la vista Servidor, pulse con el botón derecho del ratón y seleccione Nuevo.
    2. Utilice el asistente Nuevo servidor, cree una vista que apunte al perfil que contiene las aplicaciones BSpace*.
    3. Añada el proyecto EAR del elemento al servidor que ha creado. Ahora que ha conectado el entorno de desarrollo a las aplicaciones BSpace*, puede probar y desarrollar el widget. No tiene que volver a empaquetar y desplegar el widget a no ser que tenga que hacer cambios en el archivo de catálogo o en el plug-in de documentación.
    4. En un navegador web, vaya al URL del panel de control. El URL será algo parecido a http://localhost:9080/BusinessSpace.
    5. Inicie sesión en el panel de control de Monitor y pruebe los widgets.