Written by Clarisa Maman Orfali

 

En el artículo anterior hemos creado una aplicación móvil desde Oracle APEX usando el asistente de forma muy rápida y sencilla.

 

En esta sección vamos a ver cómo podemos presentar la información de diferentes formas usando la región de tipo Vista de Lista (List View).

 

Crear una Vista de Lista Básica

 

Para aprender las diferentes formas de presentar la información usando el List View, vamos a crear una Vista de Lista Básica que tome la información de la tabla DEMO_PRODUCT_INFO.

 

Creamos una nueva página de tipo Informe con una región de “Vista de Lista” el cual la llamaremos Productos.

 


 

 

Creamos una nueva entrada del menú de navegación con el nombre Productos.

 


 

 

En el Origen seleccionamos la tabla DEMO_PRODUCT_INFO.

 


 

 

Seleccionamos el estilo de la Lista como “Lista de Recuadros” y en la Columna de Texto seleccionamos PRODUCT_NAME.

 


 

 

Llegamos a la página de confirmación y hacemos clic en el botón Crear.

 

Ejecutamos la aplicación y podemos visualizar la página Productos con la región Vista de Lista con un estilo de Recuadros.

 


 

 

Habilitar la característica de Búsqueda

 

Editamos la página de Productos y desde el diseñador de páginas seleccionamos los Atributos de la Región Vista de Lista “Productos”, destildamos la opción “Inset List” y tildamos la opción “Enable Search”.

 


 

 

En el tipo de búsqueda tenemos varias opciones:

- Búsqueda del lado del Cliente (Client Side) --- Seleccionamos esta opción. (Este tipo de configuración es más amigable e intuitivo para el usuario pero puede tener una desventaja que es que se cargan todos los registros de la lista en el navegador web)

- Búsqueda del lado del Servidor (Server Side)

- Server: Exact & Case Sensitive,

- Server: Exact & Ignore Case,

- Serer: Like & Case Sensitive

- Server: Like & Ignore Case.

 

En Buscar Columna, seleccionamos: “PRODUCT_NAME” y en Marcador de Posición de Cuadro de Búsqueda (placeholder) “Buscar por un Producto…”.

 


 

 

Guardamos los cambios y ejecutamos la aplicación.

 


 

En el caso que quisiéramos colocar en todos los Marcadores de Posición (placeholder) un texto diferente al texto por defecto que es Search… lo podemos hacer desde Componentes Compartidos --- Globalización --- Mensajes de Texto:

 

Hacemos clic en el botón Crear Mensaje de Texto:

- Nombre: APEX.REGION.JQM_LIST_VIEW.SEARCH

- Texto, colocamos lo que queremos que sea el texto por defecto, por ejemplo: Buscar en esta lista...

 

 

  

 

Volvemos a la Página de Productos y en el Placeholder eliminamos el texto que habíamos agregado: “Buscar por un Producto...“ y ejecutamos la aplicación. Podemos ver que ahora dentro de la casilla del buscador se visualiza el texto por defecto “Buscar en esta lista…”

 


 

 

Esta característica sólo se aplica si el placeholder está vacío, en el caso que en la región de la lista ingresamos un texto en el placeholder, el valor por defecto no se mostrará, ya que será reemplazado por el texto que ingresemos en ese atributo.

 

Dividir el contenido de la Lista

 

Otra característica que nos presenta la Vista de Lista es el poder dividir la visualización de los registros por medio de la función “Show List Divider”.

 

Desde los Atributos de la Región Vista de Lista “Productos” hacemos Check en “Show List Divider” y en Columna de Divisor de Lista seleccionamos la columna CATEGORY.

 

En Destino de Enlace por ahora sólo vamos a ingresar en la URL lo siguiente: ‘javascript:void(0);’ para que se muestren las flechas que permitirán ver el producto seleccionado. Por ahora este enlace no dirige a ninguna parte, más adelante veremos cómo colocar la URL de destino.

 


 

Guardamos los cambios y ejecutamos la aplicación.

 


 

 

Propiedad Columna Contador

 

Tenemos otra propiedad que podemos utilizar en nuestra página de Productos que es la “Columna Contador”.

 

Para utilizar esta característica necesitamos modificar nuestra consulta SQL de origen de la lista agregando la sub-consulta siguiente:

 

(Select Count(1) from demo_order_items i where i.product_id = p.product_id) as items_ordered

 

Nuestra consulta se mostrará de esta forma:

 

select PRODUCT_ID,

PRODUCT_NAME,

PRODUCT_DESCRIPTION,

CATEGORY,

PRODUCT_AVAIL,

LIST_PRICE,

PRODUCT_IMAGE,

MIMETYPE,

FILENAME,

IMAGE_LAST_UPDATE,

TAGS,

(Select Count(1) from demo_order_items i
where i.product_id = p.product_id) as items_ordered

from DEMO_PRODUCT_INFO p

 

Regresamos a los Atributos de la región y en Columna Contador seleccionamos la nueva columna ITEMS_ORDERED.

 


 

Guardamos y ejecutamos la aplicación.

 


 

 

Mostrar la Imagen del Producto

 

Para mostrar la imagen del producto necesitamos indicar en las funciones de la Vista de Listas que se muestre la imagen.

 

Para ello desde Atributos de la Vista de Lista “Productos” hacemos un Check en “Show Image” y aparecerán las siguientes columnas de atributos:

 

  • Columna BLOB de Imagen: PRODUCT_IMAGE
  • Zolumna de Clave Primaria de Imagen 1: ROWID

 


 

 

Guardamos y ejecutamos la aplicación.

 


 

 

Es importante destacar que debemos tener especial cuidado con las imágenes que usemos en nuestra aplicación. Si necesitamos usar imágenes de gran tamaño y también miniaturas, es mejor cargar esos dos tipos de imágenes para que se carguen en la aplicación, porque si solo usamos las imágenes grandes estamos haciendo que la app tarde mucho más en cargar la página por la cantidad de megas que debe cargar por cada imagen.

 

Modificar el Enlace de Destino

 

Para poder visualizar el producto seleccionado de nuestra lista, necesitamos crear un formulario que muestre los datos del Producto para que el usuario los pueda manipular.

 

Desde la página de Inicio de la aplicación hacemos clic en el botón Crear Página, seleccionamos Pantalla, luego seleccionamos Pantalla Basada en Tabla o Vista.

 

Seleccionamos la tabla DEMO_PRODUCT_INFO y la clave primaria como PRODUCT_ID, aceptamos todos los valores por defecto y en la página de bifurcación seleccionamos la página de la Vista de Lista Productos.

 

Regresamos a la página de Productos, en Atributos de la Vista de Listas y reemplazamos el valor de la URL en el Destino de Enlace por la siguiente URL:

 

f?p=&APP_ID.:7:&APP_SESSION.::&DEBUG.::P7_PRODUCT_ID:&PRODUCT_ID.

 

Nota: Reemplazamos el número de página 7 por el número de página que corresponde a nuestro formulario de datos.

 

Al ejecutar la aplicación y hacer clic en la flechita por ejemplo del producto Jacket, podemos ver el formulario para editar los datos del producto.

 


 

 

Añadiendo Formato Avanzado

 

Otra característica que podemos usar en nuestra Vista de Lista es la de “Advanced Formatting”. Desde los atributos de la Vista de Lista de Productos seleccionamos con un check “Advanced Formatting” y aparecerán los siguientes atributos y le asignamos los siguientes valores:

 

- Atributos de Lista: data-divider-theme="a" (podemos cambiar los estilos del tema usado para la división de cada categoría, si colocamos “a” nos mostrará la división como una franja de color rojo, si colocamos por ejemplo “d” veremos la división en blanco con una línea inferior negra).

 

- Atributos de Entrada de Lista: data-icon="gear" (podemos cambiar el icono que se muestra, en vez de la flecha podemos mostrar el signo de la rueda, aquí podemos encontrar un demo de jquerymobile con diferentes iconos para seleccionar).

 

- Formato de Texto: (en esta sección colocamos por medio de la variable de sustitución el nombre del producto y la descripción del producto)

&PRODUCT_NAME.

<p class="description">&PRODUCT_DESCRIPTION.</p>

 

- Formato de Información Complementaria: (en esta sección colocamos por medio de la variable de sustitución el precio del producto)

<p class="price">$&LIST_PRICE.</p>

 


 

 

Agregamos algunos estilos CSS en línea en la página de los Productos.

 

Estilos CSS

 

/* Reduce el tamaño de la miniatura*/

.ui-li-thumb

{

width : 50px;

height : 50px;

}

/* Reduce el alto del elemento li con la miniatura */

.ui-li-has-thumb

{

height : 75px;

}

 

/* ubicación del contador y del icono */

.ui-li-has-alt.ui-li-has-count .ui-li-count,

.ui-btn-icon-right > .ui-btn-inner > .ui-icon

{

top : 20px;

right : 45px;

}

/* Mover el texto a la izquierda */

.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit

{

padding-left : 55px;

}

/* Estilos para el Precio y la Descripción */

.price

{

position : absolute;

right : 40px;

top : 50px;

font-size : 11px;

color : blue;

}

.description

{

font-size : 10px;

margin : 0px -1px;

}

 

 

  

 

 

Modificar Cantidad de Registros por Página

 

Podemos cambiar la cantidad de registros por página desde los atributos de la Vista de Lista, en la sección Diseño, ingresamos en Número de Filas, por ejemplo: 5 y guardamos los cambios. Cuando ejecutamos la página veremos que no hay ningún cambio y eso se debe a que en el buscador hemos seleccionado la opción “Client Side” y por ello de todos modos se cargan todos los registros, pero si cambiamos el tipo de búsqueda por alguno que sea del lado del servidor y volvemos a ejecutar podemos ver la diferencia:

 


 

 

De igual modo a lo explicado anteriormente si queremos cambiar el texto que aparece por defecto “Cargar Más…” por otro tipo de texto, vamos a Componentes Compartidos --- Globalización --- Mensajes de Textos y creamos un nuevo mensaje de texto con el nombre: APEX.REGION.JQM_LIST_VIEW.LOAD_MORE y en el placeholder colocamos el texto que deseamos.

 


 

 

A lo largo de todo éste artículo hemos podido observar lo realmente fácil que es crear una página en APEX utilizando la Región de tipo Vista de Listas y a conocer las diferentes propiedades que disponemos para mostrar la información en nuestra página.

 

Será hasta la próxima!