movilizando aplicaciones en un entorno ibm lotus domino con xpages 2012 xpages... · 2013-12-19 ·...

Movilizando aplicaciones en un entorno IBM Lotus Domino con XPages

Movilizando aplicaciones en un entorno IBM Lotus Domino con

XPagesMiguel Angel Calvo

ESLUG 2012


2

Presentación

Miguel Angel Calvo

[email protected]

www.zarazaga.net

Consultor en tecnología IBM Lotus Domino,

…perdón IBM Collaboration Software– 14 años trabajando con tecnologías IBM Lotus

– IBM Certified Application Developer

– IBM Certified System Administrator

– IBM Certified Lotus Instructor

ITTAKA innovacion SLEspecialistas en tecnología Lotus Domino

XPages Extension Library

mailto:[email protected]


Agenda• Objetivos• Modelos de desarrollo móvil• Opciones de movilización en IBM Lotus Domino• Introducción a XPages• Movilización con XPages• Prerrequisitos• Elementos de diseño • Ejemplo de aplicativo móvil• Construcción de la aplicación


Objetivos


Objetivos• Revisar estado actual de las tecnología móviles en la

actualidad• Revisar opciones de movilización en entorno Lotus

Domino

• Profundizar en la movilización de aplicaciones con Xpages

• Revisar el desarrollo de un aplicativo móvil con XPages


Introducción

• Auge de la movilización• Conceptos calientes BYOD, MDM,


Introducción

• Nuevas necesidades– Transformación del corpotamiento del

usuario.– Acceso a las aplicaciones corporativas desde

dispositivos móviles.


Modelos de desarrollo móvil


Modelos de desarrollo móvil• Nativo

– Específico para el disposito• Android – Java• iPhone – Objective C• Windows - C#

– Ventajas• Integrado con la plataforma• Mejor rendimiento de las aplicaciones.• Uso de funcionalidades específicas de la plataforma

– Inconvenientes• Desarrollo exclusivo para cada platadforma• Modelo de desarrollo más costoso


Modelos de desarrollo móvil• Desarrollo híbrido

– Despliegue en dispositivo móvil– HTML CSS JavaScript– Funcionalidad nativa en envoltorio Javascript– Se ejecuta en un contenedor Web en el dispositivo (Webkit,..)– Opción IBM– Ventajas

• Desarrollo único para múltiples plataformas– El framework se encarga del despliegue multiplataforma

• Tecnología web estandar– HTML, CSS, Javascript

• Reutilización de código de aplicativos web• Acceso a funcionalidades nativas

– Inconvenientes• Rendimiento inferior al de aplicaciones nativas

– SDKs• PhoneGap, Titanium,..


Modelos de desarrollo móvil• Modelo web

– Características• HTML/CSS/JavaScript• HTML5 Webkit• Contenido cargadao en el navegador mediante URLS• Aspecto no nativo • Opción Xpages• Frameworks javascript

– Ventajas• Tecnologías muy extendidas• Soportado en más dispositivos• Desarrollo y despliegue más rápido

– Inconvenientes• Más lento que opciones híbridas o nativas• No dispone de funcionalidades nativas


Opciones de movilización en IBM Lotus Domino


Opciones de movilización en IBM Lotus Domino

• Productos de terceros– Teamstudio Unplugged– YouAtNotes Domino To Go – …

• Desarrollo aplicaciones nativas/web– Independientes de tecnología Domino– Acceso via REST a Domino

• Desarrollo nativo Domino– Con Xpages

• Domino 8.5.3 UP1– controles móviles nativos– Basados en Dojo Mobile

• Integrando otros frameworks– Jquery mobile– Sencha– …


Introducción a XPages


Introducción a XPages: ¿ Qué son XPages?

• Un elemento de diseño Notes/Domino• Un modelo de ejecución para para generar aplicaciones web

modernas• Utiliza lenguaje de marcas XML para definir:

– Controles, orígenes de datos, lógica de negocios y controles personalizados

• Resuelve limitaciones “históricas” en Lotus Domino como plataforma de desarrollo web– Separación del interfaz de usuario y el modelo de datos, control de la

generación del HTML, estado en el servidor, multiidioma, extensibilidad• Modelo único para distintos tipos de cliente• Extensible en tiempo de ejecución y desarrollo• Basado en tecnología estándar: JavaServer™ Faces• Integrado en Domino Designer 8.5.x• Herramientas de desarrollo visuales


Introducción a XPages: Desarrollo Domino en la actualidad

• 8.5.3 FP2 ( 20 septiembre de 2012)• Versión 8.5.4 Domino Social Edition ( 1er trim. 2013)• XPages

– JSF en plataforma Lotus Domino• Dojo toolkit

– Framework javascript– Widgets de definición interfaz de usuario, AJAX, mobile

• ONEUI 2.1 CSS– Un framework CSS– Soporte multinavegador

• Xpages Extension Library– Controles basados en Java– Software libre– Incorporado como “Feature Pack” en Domino 8.5.3 UP1


Movilización con XPages


Movilización con XPages• Principios de diseño

– Modelo de desarrollo web• Aplicaciones web - Acceso online• Estilo de desarrollo: Aplicaciones en “una” página”• Estilos y eventos hacen uso de Dojo (en segundo plano)

1.6.1– No es necesario conocer Dojo

– Dispositivos objetivo• iPhone, Android, Blackberry ( pendiente )

– Diseño basado en controles del Domino 8.5.3UP1• Elementos propios para desarrollo móvil• Elementos compartidos con aplicativos de escritorio

– DataView, FormTable, FormRow,…


Movilización con XPages• Alternativas

– Desarrollo web clásico • Es necesario crear un Framework propio.• Hay que “lidiar” con la transformación de HTTP de Domino

– Prácticamente es desarrollo en editor de texto• No recomendado

– Uso de frameworks alternativos• P.ej. Jquery mobile• Una opción viable• Requiere más trabajo• Es necesario conocer el funcionamiento del framework• No se aprovechan los controles existentes

– DataView, Form


Movilización con XPages

• Interfaz jquery mobile


Movilización con Xpages: Dojo mobile


Prerrequisitos• Software necesario

– Domino 8.5.3 FP1 o superior– Domino Designer 8.5.3 FP1 o superior– Domino 8.5.3 Upgrade Pack 1 (CI5HUEN)

• Descargable desde IBM Passport Advantage– Paquete ejecutable– ISO

• Instalación de Domino 8.5.3 UP1 en– Domino Designer– Lotus Notes– Servidor Domino


Prerrequisitos: Domino 8.5.3 UP1

• Instalación en Domino Designer/Notes– Para Windows:

• Lanzar el ejecutable 853UpdatePack_• Seguir las indicaciones del asistente.• NOTA: Ejecutar la instalación de Designer, la de

Notes o ambas.



• Instalación en Domino– Asegurarnos de no tener instalada la XPages

Extension Library– Para Windows:

• Lanzar el ejecutable w32n_upgradepack.exe o w64n_upgradepack.exe

• Seguir las indicaciones del asistente.



• Instalación en Domino– Reiniciamos el servidor y comprobamos la

correcta instalación de los nuevos plug-ins desde la consola:

> tell http osgi ss com.ibm.domino> tell http osgi ss com.ibm.wink> tell http osgi ss com.ibm.xsp.extlib


Elementos de diseño


Elementos de diseño

• Nuevos elementos de diseño incorporados en la XPages Extension Library


Elementos de diseñoTag name Common name DescriptionappPage Mobile Page Contains one mobile page. Only one

page displays at a time.

djxmHeading Page Heading Provides header information and basic navigation.

djxmLineItem Static line item Provides a way to link to other mobile pages.

djxmRoundRectList

Rounded List This control displays a rectangle with rounded corners.

djxmSwitch Mobile Switch Works as an on/off switch with behavior like a checkbox.

singlePageApp Single Page Application

Contains a mobile application. Controls its layout and configuration.

tabBar Tab Bar Presents a banner upon which buttons can be placed.

tabBarButton Tab Bar Button Presents a banner upon which buttons can be placed.


Elementos de diseño• Reutilización de controles no

específicos para desarrollo móvil– Distintos comportamientos de los

controles en función del dispositivo– Visualización: Estilos ajustados al

dispositivo mediante temas, automáticamente.

– Controles para visualización de vistas, de documentos,…


Ejemplo de aplicativo móvil


Ejemplo de aplicativo móvil• Aplicación desarrollada en 2004

– Gestión de clientes, proyectos, actividades e incidencias.

– Interfaz Lotus Notes• Objetivo

– Permitir el acceso desde dispositivos móviles• iPhone, Android, BB

• Presupuesto asignado al proyecto– El mínimo

• Propuesta tecnológica– XPages



• Gestión de clientes: Interfaz Notes



• Interfaz móvil


Construcción de la aplicación


Construcción de la aplicación• SinglePage Application

Control– La aplicación se crea en

una sola XPage– La aplicación contiene

múltiples vistas (páginas)• Transiciones AJAX entre

páginas– Navegación entre vistas

• Reseteo de contenido


Construcción de la aplicación: Configuración

• Propiedades de la aplicación– Activación del uso de la librería XPages

Extension Library– Activado automáticamente


Construcción de la aplicación: Configuración

• Modificación de xsp.properties• xsp.theme.mobile.pagePrefx=m_• Indicamos el prefijo que tendrán las Xpages que

van a requerir el uso de temas móviles• Utilizado para los controles que pueden utilizarse

en aplicaciones móviles y de escritorio


Construcción de la aplicación: Primeros pasos

• Estructura de la aplicación– SinglePageApp

• Contenedor de TODA la aplicación

• Un elemento que agrupa todo el diseño

• selectedPageName– Obligatorio– Nombre de la

página viaulizada al arrancar la aplicación



• La primera página– mobilePage

• Representa la ventana de visualización

• Contendrá listas de registros, formularios, imágenes.

• Es el elemento destino de las transiciones entre páginas



• La primera página– Panel de diseño en Designer– Visualización en el navegador


Construcción de la aplicación: Elementos de página

• Page Heading– Título superior de

la página– Navegación de

retorno– Permite incluir

acciones• Static Line Item

– Etiquetas – Navegación


Construcción de la aplicación : Elementos de página

• Previsualización– PageHeading



• Incluyendo una etiqueta– Rounded List

• Actúa como marco contenedor• Cuadro con fondo blanco y

bordes redondeados– Static Line Item

• Etiqueta con propiedades– Navegación, icono, texto, texto a la

derecha



• Arrastramos el control RoundedList a nuestra XPage



• Insertamos el control Static Line Item

• Propiedades– label

• Etiqueta que se visualiza– moveTo

• Página que se va a visualizar al “tocar” la etiqueta

– transition• Fade,flip,slide,…



• Visualización de los controles de navegación



• Incluyendo una imagen– Image

• Previamente importada en la base de datos


Construcción de la aplicación: Transiciones entre páginas

• Transiciones entre páginas



• LineItem– Permite navegar a una página de la

aplicación– Prop. moveTo

• Incluir el valor del atributo pageName de la página destino

– Propiedad transition• Indica cómo va a ser la transición entre

páginas• Puede definirse a nivel de Round Rect List

• Page Heading– Elemento de navegación que permite

“Volver” a una página anterior– Prop. moveTo

• Incluir el valor del atributo pageName de la página destino

– Prop. Transition– Prop. Back

• Etiqueta a mostrar al usuario



• Otros mecanismos– Transiciones mediante eventos

• P.ej. En un botón

– Forzando la URL• Bbdd.nsf/xpage.xsp#miPagina


Construcción de la aplicación: Organizando el diseño

• Usando controles personalizados– Equivalente “conceptualmente” a un subformulario– Permite “ordenar” y clarificar el diseño– Permite reutilización de elementos de diseño– Vamos a utilizarlo para “ordenar”



• Copiamos y cortamos el código de nuestra mobilePage

• Pegamos el código en el control personalizado creado anteriormente– Insertamos el namespace xmlns:xe="http://www.ibm.com/xsp/coreex"



• Código fuente de nuestra Xpage tras la creación de los controles personalizados– Se han insertado mediante “arrastrar y soltar”

los nuevos controles creados


Construcción de la aplicación: Visualización de datos

• DataView control– Elemento no específico

de desarrollo móvil– Estilo visual

dependiente del dispositivo que solicita la página

– Permite visualizar los documentos de una vista.

– Adicionálmente, puede mostrar información de un origen de datos relacional



• DataView control– Puede mostrar informacíón

de una vista de la propia bbdd o de otra.

– Data source name• Nombre programático del

control en SSJS



• DataView control– Propiedades básicas

• rows– Nº de filas a mostrar

• summaryColumn– Nombre de la

columna de la vista a mostrar



• Visualizando más registros: Pager Add Rows – Permite mostrar más

registros.– Mecanismo AJAX de

petición de registros y modificación del interfaz de usuario

– Propiedades• for

– Nombre del control al que se asocia este paginador

• rowCount– Nº de filas a añadir

• text– Etiqueta a mostrar



• Resultado en nuestra aplicación


Construcción de la aplicación: Visualización de documentos

• Apertura de documentos– Crear página de visualización docCliente

• Contendrá un control de tipo panel– Es un elemento contenedor– Puede gestionar su propio datasource

– Indicar en el DataView cómo abrir el documento

• pageName property



• Creación del formulario de visualización del documento.– Pasos

• Crear un control mobilePage– pageName=docCliente

• Crear un control PageHeading– Titulo, navegación,…

• Posteriormente– Crear un Panel– Crear un datasource en el Panel– Crear un formulario asociado al datasource para mostrar el

contenido de los campos herramienta automática



• Preparación del contenedor Panel– Necesario para

que el ámbito del datasource sea el correcto

– Pasos• Arrastramos un

control de Panel en nuestro CC

• Insertamos un Round Rect List dentro del panel



• Definimos el datasource a nivel de Panel

– En la ventana de diseño Seleccionamos el control Panel

– Accedemos a la pestaña >Data– Pulsamos el botón Add– Indicamos el formulario a utilizar Form

• Creamos del formulario DENTRO del Panel

– En la vista de Eclipse Data• Activamos el uso del asistente• Seleccionamos todos los campos• Arrastramos los campos al interior de

nuestro panel



• Indicar en el DataView cómo abrir el documento

• pageName property– Incluir el valor del atributo

pageName de la página destino

• openDocAsReadonly property



• Resultado visual


Construcción de la aplicación: Edición de documentos

• Mecanica de edición similar a una aplicación para navegador estándar– Utilización de acciones simples / o mediante código

• Vamos a crear una barra de acciones– TabBar, TabBar Button

• Puede crearse en la cabecera de la página o dentro de la misma• Botones soportan condiciones del tipo “Visible”

– Podemos ocultarlos condicionálmente– Acción simple move To Mobile Page

• Permite navegar a una página distinta• Utilizable en cualquier evento de la XPage



• Creación de una barra de acciones dentro del control Panel

– TabBar• barType property

– SegmentedControl• Insertamos los “botones TabBar

Button– TabBar Button

• Label property– Etiqueta del control



• Ocultando botones– Seleccionamos el control

TabBarButton ( botón EDITAR)

– Desmarcamos la propiedad Visible

– Pulsamos botón derecho del ratón sobre el icono en forma de rombo junto a la propiedad

– Indicamos la condición mediante SSJS para la visualización del control!document1.isEditable

– Repetimos el procedimiento con el resto de botones



• Creando la acción GUARDAR– Seleccionamos el control

TabBarButton ( botón GUARDAR)

– Abrimos la pestaña Eventos– Seleccionamos Server– Pulsamos el botón Add

Action…– Seleccionamos la acción

simple Move To Application Page

• Abandona la página actual y opcionalmente guarda el documento que estuviéramos editando

• Propiedades– forceFullRefresh– saveDocument– targetPage– TransitionType


Construcción de la aplicación: Eliminación de documentos

• Creando la acción ELIMINAR– Seleccionamos el control

TabBarButton ( botón ELIMINAR)

– Abrimos la pestaña Eventos– Seleccionamos Sever– Pulsamos el botón Add

Action…– Seleccionamos la acción

simple Delete Document• Elimina un documento,

solicitando, opcionálmente, confirmación al usuario.

• Propiedades– Name of page to open

next– Data source name

– Pulsamos el botón Add Action…

– Seleccionamos la acción simple Move To Application Page


Construcción de la aplicación: Búsquedas

• No automáticas• Uso de variables de

sesión– requestScope

• Filtrado del DataView similar al utilizado en aplicaciones web para navegador de escritorio


Construcción de la aplicación: Propiedades especiales

• appPage– resetContent

• Por defecto a FALSE• Indica que ha de volver a

cargarse el contenido de la página

• A TRUE, en páginas que contengan contenido dinámico


Construcción de la aplicación• Forzando la página de inicio según el tipo de navegador

– afterPageLoad event

<xp:this.afterPageLoad><![CDATA[#{javascript:

var uAgent = context.getUserAgent().getUserAgent();if ((uAgent.match("iPhone") !== null || param.platfrom=="iphone") ||

(uAgent.match("Android") !== null || param.platfrom=="android") || uAgent.match("iPad") !== null

){

context.redirectToPage("/m_Application.xsp", true);}else{

context.redirectToPage("/allDocuments.xsp", true);}

}]]></xp:this.afterPageLoad>


76

Turno de preguntas

http://www.slug.es

http://www.slug.es/

http://www.slug.es/

http://www.slug.es/


77

Créditos

http://www.slug.es

http://www.slug.es/

http://www.slug.es/

http://www.slug.es/


78

Gracias Gràcies Eskerrik asko Merci Thank you Dankeschön Grazie Graça