viernes, 23 de mayo de 2014

Cambiar el skin de una aplicación en tiempo de ejecución

Resumen: En este articulo vamos a ver cómo cambiar en tiemo de ejecución un skin. (change skin in runtime)

El skin hasta ahora lo hemos visto como un valor constante que está definido en el fichero
- trinidad.config.xml (en ADF 11g)
o bien
- adf-faces-config.xml en ADF 10g.

Como hemos visto en ambas versiones la filosofía de registro y uso de skins es similar.

<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
  <skin-family>skinEjemplo</skin-family>
</trinidad-config>

Imaginemos que queremos un skin diferente para cada idioma, o para cada tipo de usuario.
Una solución es tener un unico skin que tenga los estilos de cada idioma. Esto nos obligaría a tener en las páginas estilos "algo" que indicara al skin que está en una página en un idioma y no está en otro.
La otra opción es tener varios ficheros de skin, uno para cada idioma, y que en tiempo de ejecución se elija el adecuado.

Para ello, el elemento skin-family, se colocará una expresión que sea válida durante toda la sesión, de manera que el skin que se seleccione se hará de acuerdo al valor de dicha expresión.

Por ejemplo:

<skin-family>#{sessionScope.skinFamily}</skin-family>

<skin-family>#{facesContext.viewRoot.locale.language=='de' ? 'german' : 'english'}</skin-family> 

Como indicamos, es una expresión. En el primer caso es una expresión que se refiere al valor resultante del método getSkinFamily() dentro del bean sessionScope.
En el segundo caso, utilizamos una expresión condicional a partir de la variable de contexto facesContext.viewRoot.locale.language.

La indicación de que sean valores de sesión, es importante, porque en valores que provengan de beans de tipo request, podemos tener valores inesperados, pues el bean se vuelve a crear cada vez que es llamado, por lo que si durante ese método se realizan operaciones podemos tener valores no esperados en el skin-family.

Referencias:
Conditionally Changing Skins for Users (11g)
http://docs.oracle.com/cd/E25178_01/webcenter.1111/e10148/jpsdg_skin.htm

Developing and Using ADF Faces Skins. Jonas Jacobi (10g)
http://www.oracle.com/technetwork/developer-tools/jdev/index-092146.html
Si te ha gustado este artículo, puedes seguir el blog por Blogger o Twitter

miércoles, 14 de mayo de 2014

Crear y Registar un skin en 11g

Resumen: En este artículo se va a ver cómo crear un skin en ADF 11g, y cómo registrar el skin en la aplicación para su uso.
Existe unos artículos relacionados con la misma temática y orientados a ADF 10g,
-

-

La forma de crear un skin
, es similar (en teoría) a la que hay en 10g, aunque con diferentes matices.
Para empezar existe tanto el concepto de crear un skin, como de registrar el skin.
Crear un skin, es crear el fichero que va a contener el skin.
Registrar un skin, es indicar a la aplicación que dicho skin está disponible para su uso.
Ojo! Registrar no significa usar, sino disponible para ser utilizado. La utilización es otro paso distinto.

Para empezar a crear un skin, vamos al Application Navigator y en Web Content, con el botón derecho, menú contextual seleccionamos "New".



directorio web content
web Content

Se abrirá la galería, para mostrarnos el componente que queremos crear.





Dentro de Web Tier / JSF/Facelets seleccionamos ADF Skin.

Nota: En ADF 10g, no existía este elemento, sino que se creaba un fichero css.



En este ejemplo, el nombre que se puso al skin fue el de skinEjemplo.
Como vemos, al cambiar el nombre, también se cambia en el campo skinId.
También indica que este skin extiende o va a modificar aspectos de uno ya existente (fusionFX-simple-v2.1.desktop).

Nota: si quieres saber lo que significa cada cosa con más profunidad lo puedes hacer en la página de referencia.
Creating a Skin file


También observamos en qué lugar de la estructura de nuestro proyecto se va a colocar el fichero.



Si observamos la estructura resultante, se han quedado marcados como "modificados" (aparecen en cursiva), dos ficheros: trinidad-config.xml
y trinidad-skins.xml

Observemos estos dos ficheros a ver qué es lo que ha ocurrido.
Veamos en primer lugar trinidad-skins.xml

trinidad-skins.xml
vista trinidad-skins.xml





Podemos ver que se ha incluido el skin que acabamos de crear. Indicando donde se encuentra, que nombre tiene, de qué skin se extiende. Esto significa que el nuevo skin ha sido registrado.

Veamos ahora trinidad-config.xml

trinidad-config.xml
trinidad-config.xml






Aquí vemos el skin que se está utilizando.
Es en este fichero, donde indicaremos qué skin utilizar en el caso de que tengamos alguno de creación propia, o estemos utilizando alguno de los que vienen con el ADF.

También me gustaría que se mirara al nuevo fichero que hemos creado skinEjemplo.css, y observemos qué nos ofrece.



Este editor, difiere en mucho a los que hemos visto hasta ahora. En el panel de la izquierda tenemos los posibles selectores globales, estilos (css) y selectores de componentes, para que podamos ir añadiendo nuestros cambios de una forma visual.
Ya veremos más adelante cómo ir añadiendo selectores.

También podemos observar su interior (source).

estructura skin creada
estructura skin creada



Como podemos observar, sólo se refiere a los espacios de nombres que se van a utilizar.

Como último detalle, haremos una prueba similar a la que se hizo en el artículo en 10g.
Con el skin ya creado, vamos a añadirle una propiedad para que veamos que lo que hagamos en este fichero, afecta a nuestra aplicación.
Si no afecta, es posible que nos estemos equivocando en algo (al escribir, en el skin equivocado, etc).
Para ello, vamos a poner el fondo de la página de color verde, y utilizaremos las hojas de estilo para ello.


skin body selector




Si ejecutamos la aplicación nos daremos cuenta de una cosa: No Pasa Nada.
Qué raro, funcionaba esto en 10g, y ahora en 11g, cómo es que esto no es posible?.

La respuesta es que no siempre vamos a poder trabajar directamente con un elemento HTML a través de CSS. Sino que al estar utilizando un skin, éste ya tiene unas propiedades asignadas a ese elemento HTML, por lo que si lo que queremos es realizar un cambio, lo deberemos hacer utilizando los selectores disponibles en el skin.

cambiar background af:document
cambio de fondo a traves de selector af|document




En este caso se usó el selector af|document, para referirnos al componente document.
Ya se verá esto en mayor detalle más adelante.

El resultado de esta modificación sería el siguiente, que es muy similar al que habíamos obtenido en 10g.

vista resultado cambio skin
vista resultado cambio skin

Referencia para el artículo
Creating a Skin file


Si te ha gustado este artículo, puedes seguir el blog por Blogger o Twitter

martes, 13 de mayo de 2014

Registar un skin en 10g (register skin 10g)

Resumen: En este post veremos cómo indicar a la aplicación los skins disponibles para ser utilizados   (registrar skin).

En el post anterior vimos cómo crear el fichero CSS que contendrá el skin
. En este artículo vamos a ver cómo indicar a la aplicación que existe ese fichero, y que se trata de un skin.
Esta operación se la suele llamar registar el skin ( register skin) en algunos textos.

Para hacer este registro del skin, seguiremos los siguientes pasos.

Dentro de Web-inf, creamos el fichero adf-faces-skins.xml.
Para ello, seleccionamos el directorio, y le damos a new, en el menú contextual.


creacion adf-faces-skins.xml
creación de fichero adf-faces-skins.xml

De la galería que nos aparece, seleccionamos XML Document.


creacion adf-faces-skins
creación fichero xml (adf-faces-skins)


Una vez ahí, vamos a indicar que el nuevo fichero css que hemos creado (y que todavia no le hemos añadido nada nuevo),
va a ser su skin.
Para ello en algunos textos, esta operacion se le llama registrar el skin (register skin).

La forma que va a tener este fichero es similar a este:
 

 <skins xmlns="http://xmlns.oracle.com/adf/view/faces/skin">
  <skin>
    <id>mycompany.desktop</id>
    <family>mycompany</family>
    <render-kit-id>oracle.adf.desktop</render-kit-id>
    <style-sheet-name>skins/mycompany/myCompanySkin.css</style-sheet-name>
  </skin>
</skins>


Explicacion de los parametros:
id: es el id que va a tener el skin dentro de la aplicación. La explicación de este parametro, es que para una aplicación puede haber
más de un skin posible. Por ejemplo, si queremos realizar un cambio de diseño, o que ciertos usuarios van tener un aspecto mientras que para otros usuarios la aplicación se mostrará diferente.

family
: configura la aplicación para que funcionen con una familia de skin. Por ejemplo si tenemos varios skins, poder agruparlos dentro de una familia.

render-kit-id: Indica qué motor se va a utilizar para renderizar la aplicación, orientándola a un dispositivo.
Los valores posibles son:
- oracle.adf.desktop: Renderiza para ofrecer la aplicación en un equipo de sobremesa (pc's, laptops, etc).
- oracle.adf.pda: Renderiza para PDA.
Nota: En el momento en que salió ADF 10g, estaban de moda las PDA's y los Smartphones aparecieron más adelante.
Se ha hecho pruebas con Smartphones utilizando el oracle.adf.desktop, y el resultado ha sido aceptable. Pero personalmente, no he probado el otro motor, para poder ver los resultados.

style-sheet-name: Se indica la ruta hacia el fichero CSS que contiene los selectores (skin) y css.

Volviendo a nuestro ejemplo, vamos a indicar el nombre que queremos poner a nuestro skin, así como dónde se encuentra.

fichero adf-faces-skins
fichero adf-faces-skins



Con esto sería suficiente para registrar el skin
.

Si queremos comprobar que el skin está correctamente configurado, y que apunta a donde debe, podemos hacer la siguiente prueba.
Nos vamos al fichero css que tiene el skin, y le cambiamos una propiedad que sea muy "visible".
En este caso, voy a poner la propiedad background de la etiqueta body, de color verde (green).

cambio css skin fondo verde
cambio css skin fondo verde

Ejecutamos la aplicación, y observemos el resultado. Nos da igual la página que vayamos a observar, el skin, está configurado para que sea utilizado en todas las páginas de la aplicación.

vista resultado skin cambiado
vista resultado con el skin cambiado


Ya se verá más adelante la potencia que tiene los skins, así como la posibilidad de cambiar de skin, en tiempo de ejecución.

Referencia:
Developing and Using ADF Faces. Jonas Jacobi


Si te ha gustado este artículo, puedes seguir el blog por Blogger o Twitter


lunes, 12 de mayo de 2014

Crear un skin en 10g

Resumen: En este post vamos a ver cómo se crea un skin (create skin).
Este artículo está orientado para Oracle ADF 10g
. Más adelante lo veremos también para ADF 11g.

Un skin, es un fichero de texto, que tiene una serie de selectores propios de ADF skin, y también se incluye otros selectores de CSS (Cascade Style Sheet).
En otro artículo veremos qué selectores se pueden utilizar con el fin de modificar el aspecto de los componentes.

Ahora vamos a crear el fichero, para ello, seleccionamos Web Content, dentro de ViewController, y le damos a new en el menú contextual.

web content
seleccionar Web Content en la estructura




Seleccionamos dentro de las categorias (categories) Web Tier / HTML / CSS File.

CSS File
seleccion CSS File en la galeria de componentes


Al hacerlo, nos pregunta por la ruta donde queremos colocar el fichero.
Si observamos, el fichero se crea por defecto dentro de un directorio que llama css. Esto es debido a que no sabe a priori, si este fichero se va a usar para css o para skin.
En algunos textos, cambia el directorio por skin, y luego el nombre del fichero, que termina en css.
En el ejemplo que expongo, he decidido mantenerlo en el directorio (que todavía no existe), llamado css.

fichero CSS creado
CSS que contendrá el skin


Con esto ya hemos creado el fichero que contendrá el skin.
Como se puede observar, no se crea vacío sino con algunos estilos concretos, pero todo ello se puede cambiar.

En el próximo post se explicará cómo registrar un skin en la aplicación, y luego cómo utilizarlo.

Fuente de referencia:

viernes, 9 de mayo de 2014

skins disponibles en 11g

Resumen: Este artículo es la continuación del anterior (skin y skin-family) en el que se vio cómo indicar el skin así como las opciones que nos ofrece 11g.

El fichero que nos indica el skin que estamos utilizando se llama trinidad-config.xml.


vista Application Navigator



En este fichero nos encontraremos con el elemento skin-family, que nos indica el skin que estamos utilizando.
En ocasiones se añade de otro elemento skin-version, que nos indica la versión dentro de las disponibles dentro de una familia.
Para conocer mejor este funcionamiento recomendaría el artículo:

Este artículo se encuentra del manual de referencia para ADF 11g.

Al igual que hicimos en el artículo anterior, vamos a mostrar una captura de pantalla de los distintos skins, para que se pueda realizar una idea de lo que dispone ADF 11g.

Skin fussionFx

vista trinidad-faces.xml
vista trinidad-faces.xml

vista resultado skin fussionFX
vista resultado skin fussionFx

Skin simple

trinidad-faces.xml skin simple
vista trinidad-faces.xml

vista resultado skin simple
vista resultado skin simple

Skin fusion

vista trinidad-faces.xml
vista trinidad-faces.xml

vista resultado skin fusion
vista resultado skin fusion


Antes de continuar me gustaría señalar un detalle que no había visto hasta que me puse a hacer este artículo.
Cuando modificamos trinidad-faces.xml con el skin que queremos que queremos utilizar, no veíamos el efecto de este cambio hasta que se arrancaba la aplicación.
Sin embargo, es posible ver este cambio en la vista de Design (Diseño) en el cual si aparecen de forma más o menos cercana en este editor, los elementos de acuerdo al skin seleccionado. ¡Sin tener que ejecutar la aplicación!
Nota: Hay un tiempo de procesado en el momento en el que se hace el cambio, por lo que si se tiene muchas páginas en la vista Design (diseño) abiertas en el JDeveloper éste se tomará un tiempo para actualizarlas.

design view al cambiar el skin
Design view (vista diseño) al cambiar el skin



A continuación unos ejemplos con algunos elementos más en la pantalla para que se pueda ver la diferencia entre ellos.

vista skin fusion
vista con skin fusion

vista skin skyros
vista skin skyros

vista skin blafplus_rich
vista skin blafplus_rich

Si te ha gustado este artículo, puedes seguir el blog por Blogger o Twitter  

jueves, 8 de mayo de 2014

skin y skin-family

Resumen: Este artículo está orientado a mostrar los skins que ofrece ADF 10g. En el próximo artículo veremos su evolución en ADF 11g.

ADF Faces ofrece una serie de skins que se pueden utilizar "tal cual" en las aplicaciones que vayamos a realizar.
Aparte de este enfoque del uso "tal cual", de un skin, también lo podemos ver como el punto de partida para nuestra personalización.
Habrá proyectos en los cuales el skin nos guste tal como nos lo ofrece ADF Faces, o bien le podemos cambiar algunos colores, o iconos, de manera que se acerque más al diseño que nos queremos para nuestra aplicación.

Pensemos en la potencia que tiene esto, y es que podemos cambiar todo el aspecto de nuestra aplicación, por grande que sea, con tan solo cambiar el skin. Por lo que es importante tener encuenta cómo hacemos las páginas, los componentes que utilicemos, para que cuando vayamos a crear un skin, podamos tenerlo fácil tanto en el momento del mantenimiento como de la aplicación de un nuevo diseño.

En este artículo vamos a ver dónde se encuentra el fichero que contiene ese skin en funcionamiento, y también el aspecto de nuestra aplicación con estos skins.

En 10g, el skin en uso lo encontraremos en el fichero: adf-faces-config.xml.

Los skins, o los nombres de los skins que tenemos disponibles son:
Oracle (oracle), Minimal (minimal), and Simple (simple).

A continuación veremos el aspecto de nuestra aplicación dependiendo del skin que se esté utilizando.

Nota: Cada vez que se cambie el skin, es preciso cambiar y ejecutar de nuevo la aplicación.

Skin Oracle



adf-faces-config
vista adf-faces-config.xml


vista resultado skin oracle
vista resultado skin oracle



Skin Minimal

adf-faces-config skin minimal
adf-faces-config.xml skin minimal


vista resultado skin minimal
vista resultado skin minimal



Skin Simple

adf-faces-config.xml skin simple
adf-faces-config.xml skin Simple

vista resultado skin simple
vista resultado skin simple

En el próximo post se mostrarán los skins que nos ofrece ADF 11g, para que se pueda ver su evolución, tanto a nivel estético como de opciones.

Referencias: Si quieres saber más sobre skins, puedes leer el artículo


Si te ha gustado este artículo, puedes seguir el blog por Blogger o Twitter  

martes, 6 de mayo de 2014

Personalizar Aspecto con estilos y skins




Para cambiar el aspecto a una aplicación ADF, se dispone de lo que se llama skins.
Estos skins proveen de aspecto para todos los componentes de la aplicación, por lo que dado la gran cantidad de componentes, no vamos a ir definiendo el aspecto de cada uno de ellos, sino que se parte de un skin, y luego personalizaremos ciertos componentes o elementos de pantalla.

Para esta personalización utilizaremos dos elementos:
- CSS  (CSS3), dependiendo de la versión de ADF en la que nos encontremos. Que nos permitirá dar formato a elementos de la página, tal como lo haríamos en una página "normal".
Es decir, tendríamos un clase en nuestra hoja CSS, y esta clase se colocaria en el atributo "styleClass".
No es la propia de un skin o propia de ADF, pero se puede seguir utilizando.

- Selectors o selectores (skin style selectors).
El enforque de estos selectores, a diferencia del anterior, está orientado al componente. No a un componente concreto, sino a todos los componentes y a aspectos específicos del componente.
En el manual de Oracle podemos leer lo siguiente:
- Global selectors

Global selectors determine the style properties for multiple ADF Faces components. If the global selector name ends in the :alias pseudo-class, then the selector is most likely included in other component-specific selectors and will affect the skin for more than one component. For example, most, if not all, components use the .AFDefaultFontFamily:alias definition to specify the font family. If your skin overrides this selector with a different font family, that change will affect all the components that have included it in their selector definition. Example 20-1 shows the global selector for the default font family for ADF Faces components in an application.

Example 20-1 Global Selector for Default Font Family

.AFDefaultFontFamily:alias {
       font-family: Tahoma, Verdana, Helvetica, sans-serif;
}

- Component selectors

Component-specific selectors are selectors that can apply a skin to a particular ADF Faces component. Example 20-2 shows the selector set to red as the background color for the content area of the af:inputText component.

Example 20-2 af:inputText Component Selector

af|inputText::content {
         background-color: red;
}

Como podemos observar en este artículo. Podemos cambiar el aspecto no sólo lo que nos permite el CSS que ya conocemos, sino también botones que pudiera tener un componente, o filas si están seleccionadas o no.
Más adelante crearemos ejemplos para entender todo esto, y sobre todo la gran potencialidad que tiene esta faceta para personalizar nuestras aplicaciones.

Referencia Customizing the Appearance Using Styles and Skins. 

Si te ha gustado este artículo, puedes seguir el blog por Blogger o Twitter  
 

viernes, 2 de mayo de 2014

Mostrar un valor de un bean

Resumen: En este post se va a explicar cómo tomar un valor de un bean y mostrarlo en pantalla.
Se puede descargar el siguiente fichero que contiene el ejemplo Descargar Ejemplo.
Aunque las imágenes y el ejemplo son en 11g, los pasos que se van a mostrar son equivalentes para 10g.

En la siguiente imagen podemos ver el bean ejemploBean, que inicialmente está vacío.
Creamos la variable de tipo String cadenaTexto que se utilizará para mostrar el mensaje.
No es necesario que sea una variable de tipo String, puede ser int, o de otro tipo, pero sí debe ser un tipo primitivo. Por ejemplo los Number no se pueden escribir directamente en pantalla, sino a través de llamar a un método que devuelva el contenido en un formato que sí permita mostrarlo.



bean nueva propiedad

Tras crear la variable, se deben crear los accessors (método get y set).
Esto se puede hacer seleccionando con el botón derecho en la propiedad creada, y elegir "generate accessors
" del menú contextual.

Aparte de ser una buena práctica crear los accesors de las propiedades, es obligatorio a la hora de mostrar un valor referirse a través de un método get. Si no es así, no va a mostrar la propiedad ni la va a reconocer cuando lo pongamos en el jspx.


generate accessors

En el proceso de generar accesors
, se nos pregunta sobre qué variables crear (por si se quisiera crear para otras variables), además de si se desea el get y el set.
En este ejemplo marcamos ambos.

generate accessors

Una vez creados los accessors, este es el resultado del bean.

accessors get y set



A continuación vamos al jspx, donde queremos mostrar el valor.
Todo lo que sea presentar información en la pantalla tiene que pasar por el jspx.
Utilizamos para este ejemplo un outputText, y en el atributo Value, ponemos la expresión que nos indica que tomamos el valor el bean.

Probemos a hacer lo siguiente: En el campo Value escribir #{EjemploBean.}.
A continuación del punto, pulsamos Ctrl+Space para que el autocompletar
nos muestre las opciones.
En la siguiente imagen vemos que nos muestra el nombre del método (sin el get), no confundir con el nombre de la variable.


autocomplete jspx

El autocompletar, aparte de ayudarnos a la hora de escribir el código en el jspx, nos indica también si algo no va bien. Por ejemplo en este caso, si el método que esperábamos, no aparece, quiere decir que algo se ha hecho mal en el código, y por eso no lo reconoce.
Por ejemplo, cuando el método get no ha sido creado correctamente, o cuando nos equivocamos al crear un bean (como en el ejemplo crear un bean , donde se crea una clase Java, que no resulta ser un bean).


codigo jspx para mostrar valor del bean

Guardamos todo y ejecutamos la aplicación para ver el resultado.

pagina resultado
vista página resultado

Si te ha gustado este artículo, puedes seguir el blog por Blogger o Twitter