Notas sobre creación de regla navegación

Resumen: En este post se va a ver el comportamiento de la aplicación cuando se añade páginas nuevas y reglas de navegación.

En el artículo anterior (Ejemplo creación reglas de navegación), vimos cómo crear unas reglas de navegación desde una página principal (menuPrincipal), desde la cual se podría ir a otras páginas del proyecto.

Una vez creadas procedemos a ejecutar la aplicación para ver el comportamiento.

vista ejecución menuPrincipal

vista página listado de Departamentos

Nota: En el caso de que no se produzca la navegación esperada, habría que revisar los siguientes puntos (al menos)
- ¿Se ha puesto la regla de navegación en el campo "action"?. Parece una tontería, pero mientras hacía el tutorial se me olvidó :P
- Hacer un Rebuild del project ViewController. En ocasiones es necesaria esta operación para que la aplicación pueda incluir las nuevas reglas de navegación. En especial es recomendable cuando se producen cambios en el faces-config.
- ¿La regla de navegación es correcta?. Igual la hemos escrito manualmente o com resultado de una expresión del lenguaje o como valor devuelto de un bean, y lo hemos escrito mal.

Si ejecutamos la aplicación desde la página de ver los Departamentos (vistaDepartamentos).
Podemos ver que se ejecuta con normalidad.

Podíamos preguntarnos lo siguiente: ¿No habíamos dicho antes, que las reglas de navegación evitaba que alguien entrar directamente en una página en vez de pasar por un proceso definido?
Es cierto, las reglas de navegación son parte de ese proceso, que veremos más adelante en profundidad.

Por ahora, lo que interesa aprender en este momento inicial, es que se pueden definir unos flujos para movernos de una página a otra, y que eso es una regla de navegación.

Artículos relacionados:
- Ejemplo creación de regla navegación

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

Ejemplo crear reglas de navegación

Descripción:  En este artículo vamos a ver un ejemplo sobre cómo crear reglas de navegación paso a paso.
En el siguiente ejemplo vamos a crear una página de menú que nos permitirá ir a otras páginas según la opción seleccionada.

Nota: Puedes descargar el ejemplo en este enlace: Descargar ejemplo

Creamos una primera página que llamamos "menuPrincipal.jspx".
En esta página añadimos dos Links (commandLinks) que nos permitirá luego ver un listado de trabajadores de la empresa o bien el listado de departamentos.

vista menuPrincipal.jspx

Si observamos el atributo action (attribute action) que se nos muestra el inspector de propiedades (Property Inspector), podemos ver las reglas de navegación que nos ofrece para esa página.

vista Property Inspector del componente Link

Opciones disponibles al pulsar el atributo action

Procedemos a crear las nuevas páginas para el proyecto vistaTrabajadores.jspx y vistaDepartamentos.jspx.

vista de diseño faces-config.xml

El funcionamiento de la página va a permitir ir del menu principal a cualquiera de las nuevas página creadas, de éstas al menú principal.
Para añadir una nueva regla de navegación tomamos el JSF Navigation Case.
Lo arrastramos a la página "Origen", y una vez ahí seleccionamos el destino de nuestra regla de navegacion.

JSF Navigation Case desde Component Palette

asignando la regla de navegación

asigna nombre a regla de navegación

A continuación se nos solicita un nombre para esta regla de navegación. Este nombre es el que nos referiremos para aplicar una regla en vez de otra. No se va a utilizar en el resto de la aplicación la página de destino, sino el nombre de la regla.
Si observamos en el property Inspector podemos ver algo más de la regla.

atributos navigation case

aviso por la nueva regla de navegación

En este caso aparece un triángulo amarillo indicándonos que una de las páginas no está creada completamente. Que está creada en el diagrama pero que ésta no tiene correspondencia con un fichero.

Hacemos doble click en la página de destino y se nos muestra la siguiente ventana, para crear la página.
Lo dejamos tal cual y le damos al "OK".

cuadro Create JSF Page

Tras hacerlo vemos que el icono de la nueva página se ha modificado, y también ha desaparecido el triángulo amarillo.

Si vamos a la página menuPrincipal, y seleccionamos el enlace de "ver Listado Trabajadores". Podemos ir a su atributo action, y comprobar cómo la nueva regla ya se encuentra disponible.

vista página menuPrincipal

Ahora hacemos lo mismo para la otra página, para que pueda ser accedida desde "menuPrincipal".

Sobre el nombre de la regla, no tiene por qué ser el mismo nombre que la página a donde se va. Simplemente, debe ser lo suficientemente sencillo como para que podamos tenerlo en mente.
Recomendación: Aunque hay libertad para escribir la regla de navegación como queramos, mantener siempre una misma forma de escribirla (todo minúsculas, por ejemplo, o minúscula y el segundo nombre en mayúscula, como con las funciones en Java). 

asignar la regla de navegación al atributo action

resultado vista diseño faces-config

Si vamos al faces-config, podemos observar en el apartado "Overview", cómo se han creado las reglas de navegación.

vista Navigation rules dentro de overview

Si observamos el fuente (source), podemos ver el código generado. Es interesante estudiar este código, porque nos permite conocer bien su estructura, y también porque en el caso de que queramos modificar a través de código las reglas de navegación, sepamos dónde hacerlo.

código de las reglas de navegación en faces-config

Enlace para Descargar ejemplo

Otros artículos relacionados:
- Reglas de navegación - Navigation Rules

Ejemplo: Hola Mundo!

En este ejemplo, veremos cómo añadir un texto a una página en blanco, así como ejecutar la página de manera que podamos ver el resultado. Durante el proceso veremos algunas partes del JDeveloper para ir familiarizándonos.

Seleccionamos en primer lugar la página con la que queremos trabajar.
En este caso es muy sencillo, porque sólo tenemos una, pero debemos fijarnos que aquellas páginas que van a mostrar el "aspecto" de la aplicación, se encontrará en ficheros con extensión . jspx. (esto es una simplificación, pero iremos ampliando a medida que se vaya avanzando en los ejemplos).

vista diseño de jspx

En la parte superior derecha, nos encontramos la pestaña de Componentes (Components). Ésta contiene a su vez un desplegable que nos permite seleccionar el tipo de componente que queremos incluir en nuestra página.

Components palette

En este caso el tipo de componente que seleccionamos es del tipo ADF Core. Si en otro momento necesitamos utilizar otro de los disponibles, como por ejemplo, un enlace HTML a una página web, podemos utilizar el HTML Common.

componets palette

De entre los componentes elegimos OutputText, que es el equivalente a etiqueta, y es bastante utilizado a la hora de mostrar textos en la página.

Al seleccionarlo, se nos coloca en el bloque central. Esta vista que estamos viendo es la de "Diseño" (Design). Existen otras, que son del Fuente (Source), y el histórico (History). Ya se verán éstos más adelante.

También observemos en la parte inferior izquierda donde encontramos la pestaña de Estructura ( Structure).
Esta pestaña nos ofrece un árbol con los elementos que componen la página. Como podemos observar, hay muchos elementos que no están a la vista en el bloque central.

En la parte inferior derecha, podemos encontrar el Inspector de propiedades ( Propierties Inspector), en el cual, podemos ver todos los atributos del componente seleccionado.

En el atributo "Value", cambiamos el valor original por el texto que queremos mostrar.

A continuación guardamos los cambios.

Ya guardados los cambios podemos ejecutar la página.
Seleccionamos el fichero indice.jspx, con el botón derecho del ratón (menú contextual), y elegimos "Run" (ejecutar).

Tras unos instantes, se abrirá el navegador que tengamos por defecto en nuestro equipo y se mostrará el resultado.

Otros artículos relacionados:
- Estructura del jspx del ejemplo Hola Mundo

Crear la primera página JSF

Para crear una página en jsf, hay dos formas de realizarlo, y ambos están relacionados con el faces-config.
En este post se va a mostrar cómo se realiza de la forma "sencilla", más adelante veremos la forma "complicada" o manual.
La razón de que exista esa segunda forma complicada es que en proyectos muy muy grandes, el entorno Jdeveloper se nos vuelve muy lento, con lo que debemos trabajar de otra manera más a bajo nivel. Pero todo eso, más adelante, hoy toca la "sencilla".

Nos vamos a la pestaña Application Navigator, y seleccionamos el fichero faces-config.xml.
Puedes ver donde se encuentra en la siguiente imagen.

Application Navigator

Hacemos doble click en dicho fichero, y se nos muestra una página en el bloque central en la cual podremos arrastrar elementos.
En este momento no hay ningún elemento porque es una página nueva.

vista completa JDeveloper

En la parte superior derecha, hay una pestaña con el nombre "component Palette". En este bloque se nos muestra aquellos componente que podemos utilizar en la página o bloque central.

Component Palette

Pinchamos en JSF Page, y lo arrastramos al bloque central.

Diagrama con el nuevo elemento

Al hacerlo, se nos solicita un nombre para el fichero (página) que vamos a crear.
También podemos observar que hay un triangulo amarillo con un signo de exclamación, y lo que hace es indicarnos, que no hay una correspondencia entre el elemento que estamos creando, y un fichero.
Esto se debe, a que podemos haber creado un fichero anteriormente, y lo que queremos es enlazar en este diagrama con dicho fichero.

La función de este diagrama, no es sólo mostrarnos las páginas que hay creadas, sino también las reglas de navegación que hay entre éstas.

Le ponemos el nombre índice:

renombrar página

A continuación hacemos doble click en el elemento que acabamos de crear. Al hacerlo, se abre un asistente que nos va a ayudar a configurar este elemento, así como completar su creación.
De hecho, si miramos a la parte izquierda Applications Navigator, podemos observar que no se ha producido ningún cambio todavía.

Asistente creación JSF

Al avanzar en el asistente nos solicita la siguiente información.

En este caso estamos creando una página JSF, y por lo tanto necesitaremos que nuestra página sera del tipo .jspx.
Ya veremos mas cosas sobre este tipo de ficheros más adelante.
Al hacer el cambio, podemos ver que la terminación del fichero cambia automáticamente.

Al continuar, se nos pide información para vincular la página a un Bean. Más adelante veremos lo que es un bean, por lo que por ahora no seleccionaremos nada.

El siguiente paso (Tag Libraries) nos permite elegir qué tipo de tecnología se va a utilizar en esta página.
Aunque hayamos creado una página JSF, y pensemos que ahí va a haber sólo elementos de esta tecnología, esto no es así.
Habrá componentes que nos interese utilizar, aparte de los propios del JSF, como por ejemplo los del ADF.
En este ejemplo vamos a seleccionar también los dos elementos relacionados con ADF.

En este punto ya podemos seleccionar "Terminar". Al hacerlo el entorno cambia a la siguiente imagen.

En la pestaña "Applications Navigator", aparecen en cursiva "ViewController" y el fichero "faces-config.xml".
También podemos ver que se ha creado un fichero "indice.jspx".

El bloque central ha cambiado, y nos muestra una página en blanco, para que podamos empezar a trabajar en la página.
Esta página central es un editor WYSIWIG, que ya veremos más adelante, así como el resto de pestañas que han cambiado en la página.

Si en el bloque central, seleccionamos la pestaña "faces-config", podemos ver que el icono que teníamos antes con el triángulo amarillo de aviso, ya no se encuentra. Además se muestra el nombre y la extensión que le hemos puesto.
Cuando esto sucede, quiere decir que ese elemento "lógico" que habíamos creado en el diagrama, tiene una correspondencia con un fichero "real".

vista diagram del faces-config.xml

Creando una primera aplicación

Descripción: Este ejemplo, va a crear una aplicación web en ADF que realizará algunas operaciones con el esquema de datos de ejemplo que hemos visto en el apartado anterior (HR).

Para ello, observamos en la parte superior izquierda, que en el apartado del menú "File", podemos seleccionar "New".

vista inicial de JDeveloper

Al seleccionar New, se abre una ventana modal que nos pregunta qué es lo que queremos crear.

vista galería proyectos

El tipo de aplicación lo veremos en el siguiente menú que se nos presenta:

asistente seleccionar tipo aplicación

En este caso hemos seleccionado JSF, ADF BC.
Aunque la primera opción nos indica "No template (All Technologies)", nos crearía un proyecto totalmente en blanco, sin la estructura de directorios que nos haría falta.

También nos pregunta cómo se llamará la aplicación, y en qué directorio lo guardaremos.
Es preferible un directorio fuera del propio JDeveloper, y cercano al directorio raíz de la unidad.

vista general Jdeveloper

Podemos observar en la parte superior izquierda, dentro de la pestaña "Application Navigator", que se ha creado una estructura.
En la imagen se ha desplegado para que se pueda ver la estructura completa.

Más adelante se explicará el papel de cada directorio, así como de los ficheros que aparecen.

Otros artículos relacionados:
- Crear la primera página JSF
- Ejemplo: Hola Mundo!