No es un ejemplo sobre maquetación, sino que está orientado a perder el miedo a la hora de trabajar con la estructura de la página.
Nota: Puedes descargar el ejemplo completo en este enlace: Descargar Ejemplo
En este artículo vamos a modificar la maquetación de una página con el fin de mejorar el aspecto de ésta.
No es un artículo específico de maquetación, sino para dos cosas:
- Manejarnos con la pestaña de estructura de la página jspx, y operar a través de ahí.
- Empezar a conocer las opciones que nos ofrece ADF para personalizar la aplicación.
Para ayudarnos a entender lo que se quiere hacer, se puede hacer como en esos anuncios para adelgazar: El ANTES, y el DESPUÉS.
 |
| ANTES |
 |
| DESPUÉS |
Vamos a ir viendo cada uno de los cambios que vamos haciendo para que podamos comprenderlos.
En primer lugar podemos ver ese botón de búsqueda que está aislado a la izquierda, justo encima del listado de resultados.
Lo normal suele ser colocarlo debajo del formulario.
Es más, podemos ver ese botón como parte del formulario, así que debemos moverlo a una situación más cercana a éste.
Para ello, vamos a hablar de los facets.
Los componentes tienen aspectos específicos que son propios de ese componente. Los aftables tienen los suyos, así como en este caso el Panel Form tiene su propio facet.
Este facet se llama footer (pie), y como podemos imaginar, es la parte inferior del componente Panel Form.
Una cosa a tener en cuenta es que los facets, no están visibles en el panel de Estructura. Eso no significa que no existan, simplemente que hasta que no se usan no se ponen. Supongo que si se pusieran todos, aunque fueran vacíos se llenaría la vista de estructura y ésta sería impracticable.
Por eso en el ejemplo, se selecciona el componente, y éste se inserta en el panel de estructura (Structure tab).
 |
| insertar facet de panel Form |
 |
| facet en la vista de estructura |
Ya con el facet a la vista, se arrastra el botón al facet que lo va a contener.
 |
| botón de búsqueda dentro del facet |
Podemos ver el cambio en nuestra aplicación.
 |
| vista resultado |
El aspecto ha mejorado un poco. El botón de búsqueda se encuentra más cerca del cuadro de búsqueda que antes, que parecía estar perdido.
Ahora vamos a separar el cuadro de búsqueda del botón.
Para ello, vamos a utilizar el objeto ObjectSpacer que lo que añade es un separador en forma de imagen transparente.
 |
| componente ObjectSpacer en Component Palette |
 |
| objectSpacer dentro del Panel Form |
Nota sobre alineación de objetos
Hay objetos que alinean los objetos uno debajo de otro, como es el caso del Panel Form. Hay otros objetos que tienen un comportamiento distinto o incluso que podemos definirlo a través de un atributo.
Podemos ver el resultado de este cambio cuando ejecutamos la aplicación (o si pulsamos F5, aunque en ocasiones puede dar problemas).
 |
| vista resultado |
Faltaría cambiar un par de detalles del buscador, la etiqueta que acompaña al campo de búsqueda (inputText) , y el texto que hay en el botón de búsqueda (commandButton).
Para ello vamos al cuadro de inspector properties, y cambiamos el atributo Value del inputText, y ponemos el nombre del campo (Nombre).
Para cambiar el texto en el commandButton, modificamos el atributo Label.
 |
| seleccionamos commandButton en Structure |
 |
| cambio en el CommandButton con el atributo Label |
Este es el aspecto que tiene nuestro buscador.
 |
| vista resultado buscador |
En cuando se coge el ritmo de dónde está cada cosa, el hacer estas tareas es bastante más rápido.
En el próximo artículo completaremos el ejemplo para que se pueda tener un aspecto más presentable de nuestro buscador.
Artículos Relacionados:
- Ejemplo de maquetación de una página. Parte 2.
- Ejemplo de Maquetación. Parte 3
No hay comentarios:
Publicar un comentario