o3 portal customization. contenido introducción introducción o3 portal tecnología ...
TRANSCRIPT
O3 Portal Customization
Contenido
Introducción Introducción O3 Portal Tecnología Instalación Customización
Customización Básica Logo, Colores, Acceso Anónimo, etc.
Customización Avanzada
Introducción
Qué es customizar O3 Portal.. Objetivo Presentación: Preparar para afrontar
con éxito pedidos de customización de O3 Portal por parte del cliente
2 posibles soluciones en cuanto a quien la realiza Distribuidor o cliente, si la customización es básica Ideasoft, si la customización es compleja o es una integración
con otro sitio
O3 Portal
El O3 Portal es la implementación Web de la herramienta O3Browser.
El O3 Portal es una aplicación desarrollada con tecnología JSP (Java Server Pages). Es un conjunto de páginas jsp, html, archivos css, js, xml, imágenes, etc.
Su páginas principales son las que se observan a la derecha: 1) Login, 2) Selección de componente
(cubo, vista, tablero, dashboard, report, etc.)
3) Navegación
(1)
(2)
(3)
Tecnología (conocimientos requeridos)
En la implementación del O3 Portal se utilizaron diversas tecnologías:1. HTML, Scripting (Java Script), CSS Stylesheet, etc.
2. JSP (Java Server Pages), tecnología utilizada en las aplicaciones Java para crear paginas dinámicas (http://java.sun.com/products/jsp/).
3. JSP Tag Libraries, a fin de contar con componentes reutilizables para facilitar la programación de las páginas se utilizan estas librerías de tags,
4. JAVA, como el resto de O3, el O3 Portal esta basado completamente con tecnología JAVA (http://java.sun.com)
Tecnología - Tomcat
Tomcat es un servidor Web de distribución libre que tiene la capacidad de alojar páginas JSP.
Por la posibilidad de redistribuirlo y la amplia difusión que este tiene es que se incluye opcionalmente como soporte para el O3 Portal.
http://jakarta.apache.org/tomcat/index.html Algunos detalles:
La instalación de tomcat se hace en la carpeta con el mismo nombre bajo la carpeta de instalación de O3.
En la carpeta webapps dentro de tomcat es donde se alojan las aplicaciones web.
Las aplicaciones web son carpetas o archivos war (variación de los archivos ZIP).
Tecnología - JBoss
JBoss es un Servidor de Aplicaciones Java de distribución libre que tiene integrado internamente Tomcat.
Al igual que Tomcat se incluye opcionalmente como soporte para el O3 Portal.
http://jboss.org/products/jbossas Algunos detalles:
La instalación de jboss se hace en la carpeta con el mismo nombre bajo la carpeta de instalación de O3.
En el caso de JBoss el sitio O3 Portal se encuentra dentro del archivo o3portal.war en la carpeta {o3_install_dir}\jboss\server\default\deploy\gserver\0o3.ear\
Instalación
La instalación del O3 Portal se realiza desde el mismo instalador del resto de los componentes O3.
Instalación Personalizada
Selección de los componentes Web a Instalar
Customización Básica
Customización básica
Caso mas frecuente Son cambios que tratan de adecuar O3 Portal a la imagen
institucional de la empresa. Estilo: Colores, Tipos de letra, Imágenes, Textos, Nuevos
links, etc. todo esto representa el caso mas habitual de modificaciones.
Cambios de comportamiento de algunas componentes: lista (árbol) de selección, panel de navegación, etc.
Todos estos cambios requieren: tener conocimientos mínimos de HTML, saber en que lugar de la instalación se encuentra el sitio y conocer un poco su estructura.
Cambios Básicos - Logo
Se desea cambiar logo de Ideasoft por logo del cliente
Para esto:(suponiendo que la url es www.example.com y que el logo lo tiene
en un archivo logo.jpg)
1. Colocar el logo en la carpeta {o3_install_dir}/jboss/…./0o3.ear/o3portal.war/images
2. Y realizar el cambio que se marca en negrita en la página {o3_install_dir}/jboss/…./0o3.ear/o3portal.war/header.jsp:<a href="http://www.example.com" class="header"
target="_blank">
<img src="images/logo.jpg" border="0"/>
</a>
Cambios Básicos – Colores, Tipo de Letra, etc.
Cambios de colores, tipos de letra, estilos: En {o3_install_dir}/jboss/…./0o3.ear/o3portal.war/styles se
encuentran las hojas de estilos del sitio, en particular o3web.css tiene la mayoría de los estilos involucrados.
Si se modifica por ejemplo este elemento body y se deja como se ve a la derecha, el color de fondo de las páginas de O3 será rojo:
body {background-color:
#5B95BF;color: #FFFFFF;font-size: 9pt;font-family:
'Arial','Helvetica';}
body {background-color:
red;color: #FFFFFF;font-size: 9pt;font-family:
'Arial','Helvetica';}
Cambios Básicos – Etiquetas
Para cambiar etiquetas hay dos opciones: Modificar directamente la página jsp que la contiene.
› Se pierde la internacionalización (multi-lenguaje)
› Es sencillo
Modificar los archivos de internacionalización› Se mantiene la internacionalización
› Es más engorroso
Ejemplo: En página login.jsp en lugar de encontrar el texto “Login” van a
encontrar el texto:› <fmt:message key='log-in.input-submit' bundle='${lang}' />
Cambios Básicos – Acceso Anónimo
Si se desea que los usuarios ingresen como un usuario anónimo (es decir usuario por defecto), entonces usar la página anonymous.jsp que se provee con la distribución.
Se debe configurar ../o3portal.war/WEB-INF/context.xml descomentando el texto: <!--Valve className="com.ideasoft.sso.cas.tomcat.GuestUserValve" debug="0“
userName="user" password="user" filteredPage="/anonymous.jsp"/-->
Luego ingresar con la url: http://…./o3portal/anonymous.jsp en lugar de http://…./o3portal
Tag wt:extTree
Además de código HTML y javascript las páginas jsp contienen tags similares a los del propio HTML que permiten hacer la customización con mayor facilidad.
Un ejemplo es el tag <wt:extTree.....> que se encarga de mostrar la lista de cubos, vistas, tableros, etc. del usuario recién logueado.
Este tag es utilizado en la página booksmarksPage.jsp y mediante la modificación de los valores de sus atributos se cambia el comportamiento de la lista.
Cambios Básicos – No mostrar fecha en lista
Para no mostrar la fecha, en la lista de cubos y vistas disponibles que se despliega al entrar al sitio.
Boolean showCubeTime = Boolean.TRUE;Boolean showViewSecurityLevel = Boolean.TRUE;Boolean cubeCreateLink = Boolean.FALSE;Boolean viewCreateLink = Boolean.TRUE;
Para mostrar la lista colapsada<wt:extTree extTreeModel="${wtTreeModel}"
subTreeCssClass="bookmark"saveVisibility="true"expandFirstLevel=“false"target="_top"subtreeIndent="22"rowHeight="20"
Cambios Básicos – No mostrar menús
Si no se desea mostrar los menús de exploración de O3, dado que por ejemplo no desea que los usuarios naveguen por el cubo.
Para esto se debe realizar el cambio que se marca en negrita en la página {o3_install_dir}/jboss/…/o3portal.war/browser/browser.jsp:<c:set var="showAxisBar" value="false" /><c:set var="showCommandsBar" value="false" />
<c:set var="showDrillBar" value="false" />
Cambios Básicos – No click en gráfico
Se desea deshabilitar la posibilidad de hacer click en el gráfico y navegar, por ejemplo porque no se quiere que el usuario navegue la vista
Se debe realizar el cambio que se marca en negrita en la página {o3_install_dir}/jboss/…/o3portal.war/browser/view.jsp:
<ch:chart id="seriesImage" servlet="${pageContext.request.contextPath}/servlet/imageProvider" provider="chart"
imageId='${o3:generateChartImage(querymodel.chartModel)}' showChart="false" showSeriesTitle="false" showSeries="true" mouseProcessDisabled="true" onLoad="scheduleRedimChart();" />
Y además …
Cambios Básicos – No click en gráfico
Se debe realizar el cambio que se marca en negrita en la página {o3_install_dir}/jboss/…/o3portal.war/browser/view-chart.jsp:
<ch:chart id="lechart" servlet="${servletName}" provider="chart"
imageId='${o3:generateChartImage(querymodel.chartModel)}'
showChart="true" showTitle="true" showAxisTitle="false" autoResize="true" mouseProcessDisabled="true" />
Resumen y Ejemplos
Es posible customizar con éxito tanto por Cliente como por el Distribuidor
Alcanza con tener conocimientos de HTML y contar con cierta documentación de tags libs
Ejemplos de sitios customizados http://www.sulpapeis.com.br:8180/o3portal/ http://o3web.fanapel.com.uy/o3portal/
Customización Avanzada
Modificaciones avanzadas
Ejemplos: otra página de login (login contra otro sistema y por afuera) comportamientos especiales (drill automático) cambios en la organización de la página mas complejos integración fuerte con otro sitio un sitio totalmente nuevo
Todas estas modificaciones requieren conocer más: HTML, tag libs propios, JSP, y Java, etc.
Existen dos caminos a seguir:1. Partir del O3 Portal y cambiar lo que sea necesario.
2. Partir de una versión simplificada del O3 Portal y hacer los cambios.
Arquitectura O3 Portal (I)
index.jsp
header.jsp
main.jsp
mainHeader.jsp
login.jsp
¿Login?
NO
SI
bookmarksPage.jspComo muestra la figura partiendo de la pagina index, las paginas se van componiendo para formar el resultado (antes del login).
Al llegar a bookmarksPage ya el usuario esta logeado y eligiendo que cubo o vista ver.
Indica que una pagina incluye a otra
Arquitectura O3 Portal (II)
Aquí intentamos mostrar que el proceso de mostrar un cubo es complejo y no es la idea alterar las interacciones que aquí ocurren hasta que el cubo es desplegado.
bookmarksPage.jsp viewdesktop.jsp desktop.jsp
redirect.jsp/dispatcher/o3portal/
o3PortalHandler.jsp
/servlet/o3portal/dispatcher
browser.jsp
Estructura de Carpetas (I)
La estructura se encuentra en la carpeta {o3_install_dir}/jboss/…/o3portal.war y las carpetas mas importantes son las siguientes: o3portal: Páginas JSP que implementan la página inicial de login (index.jsp, main.jsp y login.jsp) y la página con la lista de vistas y cubos (booksmarksPage.jsp).
browser:› Páginas JSP que implementan la funcionalidad de navegación de
cubos, entre las que se destacan browser.jsp que es la principal y se encarga de componer las paginas drillbar.jsp, commandsbar.jsp y view.jsp para formar el panel de navegación.
› Paginas JSP que implementan los diálogos de ordenar (ranking.jsp), ocultar (hide.jsp), expresiones (expressions.jsp), grabado de vistas (saveView.jsp), impresión (print.jsp), etc,
Estructura de Carpetas (II)
images: Imágenes utilizadas en el sitio. Se destaca ideasoft.jpg que es el log de Ideasoft que aparece en el header del sitio. Esta imagen es un pedido usual de cambio. La referencia a esta imagen se encuentra en la pagina o3portal/header.jsp.
scripts: Fuentes javascripts utilizados. styles: Archivos .css utilizados. Se destaca o3web.css que
debe ser modificado para cambiar el estilo general del sitio, como colores de fondos, fonts, bordes, etc.
Estructura de Carpetas (III)
WEB-INF:› Archivos de configuración y librerías utilizadas en el portal. Se
destaca webapp.properties que contiene parámetros de funcionamiento importantes como son:– gclient.server.port y gclient.server.host cuyos valores son el puerto y el
nombre del host donde se encuentra atendiendo O3Server. Estas properties necesitan ser modificadas en caso de que el Web Server (tomcat) que hospeda a O3 Portal este corriendo en una maquina diferente que O3Server y/o en caso de que este ultimo atienda en un puerto diferente a 1099.
– webapp.log.debug y webapp.log.file se configuran para que se genere log de debug en un determinado archivo. Estas properties son importantes en el caso de que el Portal de errores, para intentar detectar cual es el problema, o para enviar el log generado junto a un pedido de soporte.
Estructura de Carpetas (IV)
› Archivos .tld (tag lib definition). Estos archivos contienen definiciones de tags libs utilizados en el Portal. Se destacan los que son propios de Ideasoft:– o3.tld, que contiene los tags mas importantes. Por ejemplo contiene el tag
<o3:viewList>
– dndTagLib.tld contiene los tags encargados de implementar el funcionamiento del “arrastrar” dimensiones a los ejes de la vista.
– pane.tld implementa el ocultado de paneles, como por ejemplo el ocultado de la drillbar y la commandsbar en la página de navegación.
– web.tld contiene tgas de uso general
Es importante saber que documentación de lo que cada tag hace se encuentra en estos archivos .tld en caso de no disponer de la misma en formato HTML
Lista de Tag’s
Actualmente la lista de los tag’s de O3 disponibles es la siguiente:
o3:axisChoice.o3:axisLabel. o3:cellSpano3:commando3:dimensionNameo3:expressionStateo3:formo3:o3Export
o3:o3pageo3:selectChartTypeo3:selectDimensiono3:selectDimensionElemento3:selectMeasureo3:selectRoleo3:submito3:viewList
Algunos tags son muy interesantes y valiosos como el o3:viewList pero otros son muy particulares. La documentación de cada uno se encuentra en formato HTML.
Lista de Tag’s
Además de los tags de O3 hay otros disponibles: Chart: para manejar la tabla. Panes: para manejar paneles (ocultar, visualizar, etc). Web: para manejar algunos aspectos web. DnD: para manejar los aspectos del drag & drop.
charttld:chart webtld:repeatRowwebtld:repeatCellwebtld:tabstripwebtld:tabwebtld:tabcontent
dndtld:ddsourcedndtld:acceptdragdndtld:ddtargetdndtld:acceptdropdndtld:ddhandlerdndtld:ddwindowdndtld:imgrendererdndtld:txtrendererdndtld:classrenderer
o3panes:windowo3panes:paneso3panes:paneo3panes:default-pane-renderero3panes:default-panesbar-renderer
Ejemplo Simplificado
Con el fin de dar una alternativa a la hora de reorganizar / reimplementar un portal, esta disponible un ejemplo mas sencillo y utilizando directamente la API.
¿Porque es mas simple?: porque no tiene mucha lógica y permite ver algunos aspectos
mas claramente. porque consta de 6 paginas que hacen la mayoría del trabajo.
index.jsp loginForm.jsp
¿Login?
NO
SI
cubeList.jsperror.jsp
active_view.jsp logout.jsp
Instalación del Ejemplo Simplificado
Simplemente descomprima el zip dentro de la carpeta {o3_install_dir}/jboss/…/o3portal.war
Para acceder http://localhost:8080/o3portal/wclient_example
O3 Portal API
Definición, Principales Clases
Principales Clases - Conexión
O3PortalSessionFactory: Esta clase permite obtener una instancia de O3PortalSession que representa una sesión en el portal de O3. openServerSession(O3PortalSessionContext): Es el método
que crea la sesión mencionada, recibe como parámetro el contexto.
ClientManagerFactory: Esta clase permite obtener una instancia de ClientManager que es el objeto utilizado para conectar con el servidor. getNewClientManager(String user, String pass): Crea un
objeto ClientManager con un usuario y contraseña indicados.
Principales Clases – Trabajo con Cubo
O3PortalSourceSession: Es el objeto que nos permite interactuar con un cubo (O3PortalSession.openSourceSession(“Demo”)).
Metadata: Representa el acceso a la metadata del cubo (O3PortalSourceSession.getMetadata()). getDimensionsCount(): Cantidad de dimensiones. getDimension(i): Una dimensión en particular.
O3PortalQueryModel: Representa el modelo que nos permitira hacer consultas sobre el cubo (O3PortalSourceSession.getQueryModel()) drillTo(dimension, member) addDimension(axis, level, dimension)
O3 Portal API
Ejemplo programado en Java
Ejemplo de la O3 API
Se trata de archivos de ejemplo ideados para ver las funcionalidades del API de O3.
Se muestra la secuencia normal de trabajo: conectarse, abrir un cubo, realizar operaciones, etc.
La distribución contiene: O3ApiExample.bat que sirve para ejecutar el ejemplo. O3ApiExample.jar son las clases del ejemplo compiladas en
caso que no desearan compilarse. O3ApiExample_src.zip es un zip con los códigos fuente de las
clases de O3. o3portal.jar son las clases que implementan la O3 API. o3PortalDocs.zip es la documentación estilo Java Doc sobre el
API.
Consideraciones del Ejemplo
El ejemplo muestra código java que podría ser colocado en cualquier aplicación, en particular podría colocarse en un portal ya existente para utilizar O3.
A continuación veremos secciones relevantes del código que precisamente realizan las tareas que mencionábamos anteriormente.
El ejemplo esta compuesto por dos clases: com/ideasoft/o3/portal/impl/test/PortalTest.java com/ideasoft/o3/portal/impl/test/StandaloneSessionContext.java
Abriendo la Sesión
El siguiente código se puede ver en la clase PortalTest para abrir la sesión:
StandaloneSessionContext ctx = new StandaloneSessionContext();O3PortalSessionFactory factory = new
O3PortalSessionFactoryImpl(Context.getIEnv());O3PortalSession session = factory.openServerSession(ctx);
Donde la información de login sale de la clase StandaloneSessionContext y en particular del método getClientManager() donde encontraremos este código:
public ClientManager getClientManager() throws O3PortalException {…
return ClientManagerFactory.getNewClientManager("user", "user");…
}Donde se esta utilizando “user” como usuario con contraseña “user”, como
sabemos cuales son los parámetros lo veremos en la siguiente transparencia.
Información sobre los métodos
Para obtener información sobre los parámetros de los distintos métodos y los métodos que existen, siempre nos referiremos a la documentación incluida en o3PortalDocs.zip. La documentación de las aplicaciones Java se estila distribuir en un formato llamado “JavaDoc”, donde esto es un conjunto de páginas Web que pueden ser navegadas para encontrar la información.
Para el ejemplo anterior:
Una vez conectados…
Podemos imprimir la lista de roles del usuario conectado:
ArrayUtilities.printArray("Roles", session.getRoleNames());
Obtener la lista de cubos y vistas disponibles, como siempre si quisiéramos averiguar mas información sobre lo que nos ofrece cada clase debemos consultar el JavaDoc:
Iterator it = session.getSourcesInfo();while (it.hasNext()) {
System.out.println("\tsource: " + it.next());}
Abriendo el cubo Demo y mostrando dimensiones
O3PortalSourceSession sourceSession = session.openSourceSession("Demo");
int dimsCount = sourceSession.getMetadata().getDimensionsCount();
System.out.println("Cantidad de dimensiones: " + dimsCount);
for (int i = 0; i < dimsCount; i++) {System.out.println("\tDimension: " + sourceSession.getMetadata().getDimension(i).getName());
}
Haciendo consultas
Abro un modelo de consulta para operar:
O3PortalQueryModel queryModel = sourceSession.getQueryModel();
Hago un DrillTo (dimension, member):
queryModel.drillTo(0, queryModel.getMember(0).getChild(0));
Agrego una dimensión a un eje (axis, level, dimension):
queryModel.addDimension(GridModel.Y, 0, 2);
Instalación de Ejemplo de la O3 API
Se supone que se dispone de instalación de O3 de versión superior o igual a 3.1.200
1. Copiar en {o3_install_dir}/classes el archivo O3ApiExample.jar que contiene el ejemplo, o compilar los fuentes del ejemplo y copiar las classes resultantes en el mismo lugar
2. Copiar en {o3_install_dir}/classes el archivo o3portal.jar3. Copiar en {o3_install_dir}/bat el archivo
O3ApiExample.bat4. Iniciar el servidor de O35. Desde una consola DOS y situado en la carpeta
{o3_install_dir}/bat ejecutar O3ApiExample.bat (pasarle el parámetro -debug para ver mas log si se desea)