Cómo empezar con BBJSP

¿Qué es BBJSP y cómo usarlo?

por Richard Stollar

Probablemente has oído hablar de JavaServer Pages (JSP), un estándar en de Java para la generación de páginas web de contenido dinámico. Pero ¿sabías que agregamos una nueva característica llamada BBJSP a BBj® 16 que es similar a JSP pero diseñada para el lenguaje de programación BBj®? Este artículo te llevará a través de los primeros pasos con BBJSP y te llevará en la dirección correcta para el proceso de configuración.

Este es el primero de una serie de artículos que se analizarán el framework BBJSP, cada cual construido sobre la base de lo que vayas aprendiendo. En este proceso estaremos construiremos una aplicación completa de creación, lectura, actualización y eliminación (CRUD) que demuestra el poder de BBJSP.

Visión General

BBJSP tiene una sintaxis similar a JSP que permite que cualquier desarrollador con un conocimiento razonable de esta tecnología, puede moverse rápidamente a BBj y su organización puede aprovechar un framework ampliamente comprendido. Muchos de los conceptos serán familiares para los desarrolladores de PHP y ASP.

En su nivel interno, BBJSP es un generador de código que transforma el marcado HTML en programas BBj ejecutables que corren en el lado del servidor para renderizar contenido al cliente HTML. La arquitectura model-view-controller (MVC) detrás de BBJSP permite la separación completa de la lógica de negocio de la capa de presentación y siguiendo este paradigma se puede dividir el proyecto en distintas áreas permitiendo un uso más eficiente de los recursos de desarrolladores dentro de un equipo más amplio de diseñadores y programadores.

Cuando comiences a construir tu aplicación BBJSP, probablemente quieras agregar un nuevo Contexto al servidor Jetty, ya que esto facilita algunas cosas. Si no estás familiarizado en cómo funcionan los contextos, encontrar ayuda útil en uno de los otros artículos de esta serie, Contextos y BBJSP. Para el resto de este artículo, asumamos que estás familiarizado con los contextos y lo tiene todo funcionando.

Con BBJSP puedes abrazar una amplia gama de tecnologías abiertas que tienen el mejor soporte para desarrolladores de aplicaciones web y abrirte a nuevas posibilidades de desarrollo. A medida que adquieras experiencia con BBJSP encontrarás que la integración de tu código existente en una aplicación BBJSP es relativamente simple.

Figura 1. Tecnologías comunes que puedes aprovechar con BBJSP

Construyendo una aplicación CRUD

Vamos a construir una aplicación CRUD que demostrará cómo puedes utilizar los diferentes componentes del framework BBJSP para actualizar los datos.

Nuestra aplicación CRUD necesita tres componentes principales; una lista de registros, un formulario para editar dichos registros y la lógica de negocios para interactuar con la base de datos. Estos tres componentes se relacionan entre sí como se muestra en la Figura 2.

Figura 2. Un diagrama general de los componentes de nuestra aplicación CRUD

El componente de actualización tiene dos salidas; si no hay errores devuelve el componente de la página de lista y cualquier falla vuelve al componente de la página de edición. Esto permite que el componente de actualización valide los datos antes de actualizar la base de datos.

En este artículo se describe el primer componente del proceso, una página de lista que muestra una tabla de registros de una base de datos. Usaremos la tabla SALESREP de la base de datos ChileCompany, ya que seguro se encuentra disponible en tu instalación BBj. En un próximo artículo veremos los pasos necesarios para crear, actualizar y eliminar registros y llevarlos a una la aplicación CRUD completa que agrega los componentes finales de la siguiente manera:

• • Una página web que muestra un sólo registro para edición

  • Un programa BBj® que manejará la actualización a la base de datos

Presentando una Tabla de Registros

Primero crearemos una página básica que tiene la tabla con una encabezado de fila y una fila vacía de datos que llenaremos con registros más tarde. Añadimos algunos CSS para embellecer la tabla como se muestra en la Figura 3, aunque no es obligatorio.

Figure 3. La plantilla HTML para nuestra página de lista con código CSS

Ahora necesitamos conectar esa simple tabla HTML con la base de datos y poblar las filas.

Uno de los componentes principales de BBJSP son las etiquetas que siguen una sintaxis similar a las etiquetas HTML habituales, ya que tienen elementos de apertura y cierre como este: <tagname> … </tagname>. BBJSP procesa el cuerpo de la etiqueta basándose en las reglas para esa etiqueta. Por ejemplo, la etiqueta core:iterate repetirá todo entre las etiquetas de apertura <c:iterate> y cierre </c:iterate>.

Algunas etiquetas no tienen un cuerpo y para estas etiquetas usarías la sintaxis de cierre automático como esta: <tagname /> con una etiqueta como core:out la que escribe algunos valores en el flujo de salida.

Las etiquetas vienen en librerías y debes importarlas antes de poder utilizar la etiqueta en una página. Para importar una librería de etiquetas, debes especificar dónde está la biblioteca y cómo harás referencia a ella dentro de la página.

En nuestra página de ejemplo, necesitaremos usar la biblioteca de etiquetas de núcleo, que proporciona funciones básicas como iteración (equivalente al bucle FOR ... NEXT en BBj) y la librería de etiquetas SQL para leer la base de datos.

Las librerías de etiquetas se importan en la parte superior de la página, normalmente antes de la etiqueta <html> de apertura. Vamos a agregar la etiqueta de importación a la parte superior de nuestro ejemplo anterior de la siguiente forma:

Figura 4. Un extracto de la plantilla HTML con etiquetas de importación añadidas

Ahora podemos hacer referencia a cualquier etiqueta dentro del núcleo y las librerías de etiquetas SQL usando el prefijo que especificamos.

NOTA: El prefijo es arbitrario, pero generalmente es una buena idea establecerse en una convención de cómo lo usarás en todas sus páginas.

Necesitaremos consultar la base de datos para obtener un conjunto de resultados que usaremos para rellenar la tabla HTML. La librería de etiquetas SQL proporciona la funcionalidad para ejecutar esta consulta. Como un principio general, es una buena idea mantener las cosas juntas colocando la etiqueta de consulta cerca de donde va a escribir los datos; Justo antes del comienzo de la tabla es un gran lugar. La Figura 5 muestra el fragmento de código que lee la base de datos.

Figura 5. La etiqueta SQL responsable de consultar la base de datos

Desde la etiqueta query , los atributos datasource y sql serán bastante auto-explicativos, pero los otros dos atributos son menos obvios. Los atributos var y template le indican al framework BBJSP cómo haremos referencia al conjunto de resultados y a la plantilla del resultado respectivamente en el resto de la página y funcionarán como variables name-bound o vinculadas al nombre (sigue leyendo para obtener más información). Los datos vinculados a result (el valor del atributo var ) contendrán un BBjVector de registros en el formato plantilla. La plantilla estará en la variable de nombre tpl como se especifica en el atributo template .

A continuación, necesitamos iterar a través de los elementos de la variable con nombre mediante el uso de la etiqueta iterate de la librería de etiquetas del núcleo, para rellenar con los datos de fila de las entradas a partir del resultset. Para ello, ajustaremos la fila de la tabla en una etiqueta de iteración de abierto-cerrado, como se muestra en la Figura 6.

Figure 6. La fila de la tabla HTML envuelta en una etiqueta de iteración

Eso todavía no es exactamente lo que queremos porque todo lo que producirá es varias filas vacías ya que no hemos llenado las celdas de la tabla con nada. Pero antes de hacer eso, vamos a pensar en el propósito de la etiqueta iterate . El atributo data indica a la etiqueta qué datos procesaremos y el atributo id nos indicará cómo queremos hacer referencia al elemento actual durante el procesamiento.

En nuestro ejemplo, le estamos diciendo al framework que envíe los datos que ya hayan sido enlazados al nombre result (identificado por la expresión ${result}) al campo data de la etiqueta iterate . La etiqueta iterate procesará todos los elementos de los datos uno a uno, enlazando cada elemento al nombre item a medida que pasa por el conjunto de resultados.

Sin embargo, la plantilla de consulta vincula una cadena que contiene el formato de los datos al nombre tpl y un BBjVector al nombre item que contiene todas las filas del resultset. Necesitaremos convertir la cadena formateada en un diseño para nuestra página, lo que hacemos con la etiqueta template de la librería central. La Figura 7 muestra cómo lo usamos.

Figure 7. La etiqueta template que es responsable de formatear cada registro

Esta etiqueta tomará los datos identificados por la variable de nombre ${item} y aplicará la plantilla string identificada por la variable de nombre ${tpl} para producir una estructura de datos que BBJSP usa para llenar cada celda de la tabla HTML. Para hacer la presentación final de los campos en cada registro, ahora podemos acceder a ellos como elementos en un nuevo elemento de datos vinculado a theRecord. La Figura 8 muestra el bloque de código final que hará eso:

Figura 8. El bloque completo de iteración utilizado para llenar la tabla HTML

Observarás que podemos hacer referencia a cada uno de los campos del conjunto de resultados por el nombre de columna utilizado en la tabla. ${theRecord} es actualmente un HashMap que almacena los campos individuales, haciendo posible extraer el número de teléfono del registro usando una sintaxis como ${theRecord['PHONE']}.

Resumen

Hemos dado los primeros pasos para crear una aplicación CRUD, pero todavía queda mucho trabajo por hacer. Actualmente nuestra aplicación mostrará el contenido de la base de datos en una tabla HTML, como se muestra en la Figura 9, pero aún no vamos lo suficientemente lejos. En un próximo artículo continuaremos desarrollando nuestra aplicación CRUD para editar estos registros.

Figura 9. La salida HTML desde el navegador a partir de nuestra nueva aplicación

Revisa el ejemplo disponible para descarga en links.basis.com/16code

Para más información sobre contextos, revisa el siguiente artículo:

• • http://documentation.basis.com/advantage/v18-2014/14jetty.pdf