Seam es un proyecto desarrollado por JBoss, cuyo lider es Gavin King. Es un completo framework para la creación de aplicaciones web 2.0 que unifica varias tecnologías como AJAX, Enterprise Java Beans (EJB3), Java Server Faces (JSF), Java Portlets and Business Process Management (BPM), Hibernate, y mucho más.

De la Wikipedia:

Seam introduce el concepto de contextos. Cada componente de Seam existe dentro de un contexto. El contexto conversacional por ejemplo captura todas las acciones del usuario hasta que éste sale del sistema o cierra el navegador – inclusive puede llevar un control de múltiples pestañas y mantiene un comportamiento consistente cuando se usa el botón de regresar de el navegador.

Tú puedes automáticamente generar una aplicación web de altas, bajas, cambio y modificaciones a partir de una base de datos existente utilizando una herramienta de linea de comandos llamada seam-gen incluida con el framework.

El desarrollo WYSIWYG es facilitado a través del uso de las JBoss Tools, que es un conjunto de plug-ins diseñados para el entorno integrado de desarrollo Eclipse. Seam puede ser integrado con las bibliotecas de componentes JSF JBoss RichFaces o con ICEsoft ICEFaces. Ambas bibliotecas poseen soporte para AJAX.

Actualmente soporta varios contenedores de aplicaciones como JBoss 4 o 5, IBM Websphere, BEA WebLogic, Oracle OC4J y por supuesto Apache Tomcat.

Puedes encontrar ejemplos de proyectos creados con seam y listos para ejecutar dentro del directorio examples de la aplicación.

Referencias y documentación:

• Página oficial de Seam Framework
• Página del producto JBoss Seam
• Documentación Online mantenida por la comunidad
• Documentación de JBoss Seam
• Introduction to JBoss Seam [artículo en InfoQ]

Laboratorio de JBoss Seam Framework

Con el siguiente laboratorio se pretende dar un punto de partida a la creación de aplicaciones usando Seam. El laboratorio está enfocado al desarrollo sobre Eclipse, que es el IDE que recomiendo para trabajar con Seam.

Este laboratorio está enfocado al uso de Seam para JBoss, aunque con pocas o sin modificaciones puede funcionar en Apache Tomcat. Recordemos además que Seam también soporta los contenedores IBM Websphere, BEA WebLogic y Oracle OC4J.

Nota: todas las pruebas se realizaron sobre Linux (Gentoo amd64) y OpenSolaris 9.6. Sin embargo, hacerlo en Windows con los mismos pasos no debería presentar problemas; solo se debe tener cuidado con las rutas donde se guarden los archivos usados.

Prerequisitos

• Eclipse 3.4 o 3.5
• La última versión de JBoss Seam (la más reciente al momento de escribir este documento es la 2.2.0).
• La última versión de Jboss Server (la más reciente al momento de escribir este documento es la 5.1.0).
• Un gestor de bases de datos. En mi caso he usado MySQL, aunque hay soporte para muchos otros gestores. No olvides además descargar el conector JDBC, en mi caso el mysql-connector-java-bin.jar.

Instalación

Para instalar Seam y JBoss basta con descomprimir los paquetes que descarguemos de Internet. Yo recomiendo hacerlo en la carpeta /opt en sistemas UNIX/Linux, o directamente en C:/ en sistemas Windows.

Creación de un proyecto base para Eclipse

SeamFramework nos proporciona una herramienta de línea de comandos para la generación de proyectos base. Vamos al directorio donde lo instalamos y ejecutamos:

Ahora debemos responder a cada una de las preguntas que nos hace; muchas de ellas las debemos dejar por defecto, así que nos concentraremos solo en aquellas en donde tengamos que cambiar. Resumiendo:

• El directorio donde se creará el proyecto:
  [input] Enter the directory where you want the project to be created (should not contain spaces) [/home/funtoo/projects] [/home/funtoo/projects]
  /home/funtoo/Poli/Componentes/seam-framework/workspace
• El directorio donde se encuentra el JBoss AS:
  [input] Enter your JBoss AS home directory [C:/Program Files/jboss-5.1.0.GA] [C:/Program Files/jboss-5.1.0.GA]
  /opt/jboss-5.1.0.GA/
• El nombre del proyecto:
  [input] Enter the project name [myproject] [myproject]
  holaseam
• Vamos a desarrollar nuestra aplicación como EAR:
  [input] Is this project deployed as an EAR (with EJB components) or a WAR (with no EJB support)? [war] (ear, [war])
  ear
• Definimos el nombre del paquete en base de la aplicación:
  [input] Enter the base package name for your Java classes [com.mydomain.holaseam] [com.mydomain.holaseam]
  org.ejemplo.seam
• Los que hacen referencia a los Session Beans o Test Cases los podemos dejar como nos lo pongan. El gestor de base de datos; en este caso usé mysql aunque debería ser practicamente transparente:
  [input] What kind of database are you using? [hsql] ([hsql], mysql, derby, oracle, postgres, mssql, db2, sybase, enterprisedb, h2)
  mysql
• Ingresamos la ruta en donde se encuentra el driver JDBC:
  [input] Enter the filesystem path to the JDBC driver jar [] []
  /opt/conectores/mysql-connector-java-5.0.8-bin.jar
• Ahora debemos definir la URL de conexión a la base de datos. En este caso, he creado una base de datos llamada ejemplo, y por lo tanto la URL quedaría así:
  [input] Enter the JDBC URL for your database [jdbc:mysql:///test] [jdbc:mysql:///test]
  jdbc:mysql://localhost:3306/ejemplo
• Con esta opción se ejecutará un script llamado import.sql cada vez que hagamos un deploy del proyecto. Dicho archivo deberá tener los scripts necesarios para crear tablas y registros. Puesto que en este laboratorio poco vamos a usar MySQL, puedes poner lo que quieras; pero es importante tener en cuenta esta opción a la hora de desarrollar un proyecto.
  [input] Do you want to recreate the database tables and execute import.sql each time you deploy? [n] (y, [n])
  y

Ya que hemos configurado lo que será el proyecto, es hora de crearlo. Ejecutamos el comando:

Esto creará un proyecto base que puedes abrir con Eclipse, y eso es justo lo que haremos a continuación.

Abrimos eclipse y nos aseguramos que el workspace sea el mismo directorio en el que creamos el proyecto desde Seam. Vamos a la creación de un nuevo proyecto Java:

Le damos el mismo nombre que a nuestra aplicación Seam (en este caso holaseam):

Y puesto que ya existe un proyecto creado en el workspace muchas de las opciones ya aparecen asignadas. Hacemos clic en Next y vemos que ya hay una estructura de directorios creada con la base del proyecto Seam.

Hacemos clic en Finish, y ya podemos comenzar a editar y modificar el proyecto.

Despliegue del proyecto

Primero debemos iniciar el servicio de JBoss. Para ello ejecutamos el archivo run.sh (run.bat en Windows) del directorio bin de Jboss. Este dejará el servicio web corriendo por defecto en el puerto 8080.

Para hacer el despliegue sobre JBoss, usamos un archivo Ant que se generó junto con el proyecto. Dicho archivo nos permite ejecutar tests, hacer (re)despliegues, generar el JavaDoc, entre otras. Así que habrímos el archivo build.xml y nos aseguramos que la vista Outline esté abierta:

Dentro de la vista Outline podemos ver los componentes del archivo build.xml y podemos ejecutarlos con Ant. En este caso, buscamos el componente deploy, hacemos clic derecho, Run As, y Ant Build.

Algunas veces se generan errores al hacer el despliegue:

Si es tu caso, deberás eliminar los archivos y directorios que tengan el nombre del proyecto del directorio deploy en JBoss. En mi caso los elimino con este comando:

Si todo sale bien, cuando hagamos de nuevo deploy veremos algo como esto:

Es hora de probar la aplicación. Abrimos el navegador en la dirección: http://localhost:8080/holaseam/

Descargar versión en PDF

Descargar

Descargar Paper

El resultado del how-to que voy a describir es el siguiente:

Lo muestro antes que nada para que veas de que estoy hablando, y si te interesa ya seguirás leyendo, sino pues te ahorras tiempo valioso.

La mayor parte del tip lo he tomado de esta entrada (en inglés), aunque le he mejorado algunas cosas que lo hacen mucho más eficiente. La idea, como dice el título, es implementar mediante AJAX un método de autocompletación de palabras cuando nuestros lectores deseen buscar algo. Todo esto basado en los tags que hayamos asignado a cada post.

Necesitaremos entonces seguir estos sencillos 4 pasos:

1. Código PHP

Debes crear un archivo PHP (llámalo por ejemplo ajax.php), y lo pones en alguna parte de tu servidor (yo recomiendo: la carpeta de tu theme):

<?php
if (isset($_POST['search']))
    $search = htmlentities($_POST['search']);
else
   $search ='';
$db = mysql_connect('localhost','usuario','password'); //Don't forget to change
mysql_select_db('nombre base de datos', $db);           //theses parameters
$arreglo = explode(' ', $search);
if($arreglo[count($arreglo)-1]=="" || $arreglo[count($arreglo)-1]==" "){
   mysql_close();
   die();
}
$sql = "SELECT name from wp_terms WHERE name LIKE '%".$arreglo[count($arreglo)-1]."%'";
$req = mysql_query($sql) or die();
echo '<ul>';
while ($data = mysql_fetch_array($req))
{
   echo '<li><a href="#" onclick="selected(this.innerHTML);">'.htmlentities($data['name']).'</a></li>';
}
echo '</ul>';
mysql_close();
?>

No te olvides de modificar los datos de usuario y contraseña, así como el nombre de la base de datos. Este sencillo script se encargará de buscar en la base de datos los tags que coincidan con lo que el usuario está empezando a buscar.

2. Código JavaScript

Luego, debes crear un archivo JavaScript (llámalo por ejemplo buscar.js), y ponerlo en alguna parte de tu servidor (yo recomiendo: la carpeta de tu theme):

var myAjax = ajax();
function ajax() {
   var ajax = null;
   if (window.XMLHttpRequest) {
      try {
         ajax = new XMLHttpRequest();
      }
      catch(e) {}
   }
   else if (window.ActiveXObject) {
      try {
         ajax = new ActiveXObject("Msxm12.XMLHTTP");
      }
      catch (e){
         try{
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (e) {}
      }
   }
   return ajax;
}
function request(str) {
   //Don't forget to modify the path according to your theme
   myAjax.open("POST", "http://tusitio.com/wp-content/themes/TU_TEMA/ajax.php");
   myAjax.onreadystatechange = result;
   myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   myAjax.send("search="+str);
}
function result() {
   if (myAjax.readyState == 4) {
      var liste = myAjax.responseText;
      var cible = document.getElementById('tag_update').innerHTML = liste;
      document.getElementById('tag_update').style.display = "block";
   }
}
function selected(choice){
   var cible = document.getElementById('s');
      var posc = 0;
      for (var i=cible.value.length-1; i>=0; i--)   {
         var caracter = cible.value[i];
         if (caracter==" "){
            posc = i+1;
            break;
         }
      }
   cible.value = cible.value.substring(0,posc)+""+choice+" ";
      cible.focus();
   document.getElementById('tag_update').style.display = "none";
}

Éste se compone de cuatro métodos:

1. ajax(), que creará el objeto XMLHTTPRequest.
2. request(), que enviará las peticiones al archivo PHP.
3. return(), que recuperará los datos que envíe el archivo PHP.
4. selected(), que actualizará el campo de búsqueda.

Por supuesto debes cambiar el header de tu theme de tal manera que cargue este archivo javascript. Si creaste el archivo en la carperta de tu theme lo tienes fácil, simplemente deberás añadir lo siguiente en el archivo header.php:

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/buscar.js"></script>

No olvides cambiar la ruta donde pusiste el archivo PHP (línea 25 del archivo buscar.js).

3. Cambiando el theme

Ahora es cuando debes cambiar el formulario que tienes por defecto, por uno que implemente llamadas a las funciones javascript del paso anterior. Por lo general tendrás algo como esto:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
   <div>
      <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
      <input type="submit" id="searchsubmit" value="Buscar" />
   </div>
</form>

Lo cual debes cambiar por esto:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
    <div>
   <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" onkeyup="request(this.value);"/>
   <input type="submit" id="searchsubmit" value="Buscar" class="button" />
    </div>
    <div id="tag_update"></div>
</form>

Como puedes darte cuenta, se añaden esencialmente dos cosas:

1. Una llamada al método request() cada vez que se presione una tecla en el campo de búsqueda.
2. Una capa <div> que contendrá las palabras claves sugeridas para la búsqueda

4. Añadiendo CSS

Por último deberás añadir lo siguiente al archivo style.css de tu plantilla:

#tag_update {
   display: block;
   border-left: 1px solid #373737;
   border-right: 1px solid #373737;
   border-bottom: 1px solid #373737;
   position:absolute;
   z-index:1;
}
#tag_update ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
#tag_update li{
   display:block;
   clear:both;
}
#tag_update a {
   width:134px;
   display: block;
   padding: .2em .3em;
   text-decoration: none;
   color: #fff;
   background-color: #1B1B1C;
   text-align: left;
}
#tag_update a:hover{
   color: #fff;
   background-color: #373737;
   background-image: none;
}

Esto decorará adecuadamente el cuadro donde aparecen las sugerencias.

Créditos

Por supuesto el 99% de los créditos es para la persona que diseñó el código AJAX y demás. Aunque cabe resaltar lo que añadí por mi cuenta:

• Las sugerencias se generan en base a la última palabra escrita, y cuando se selecciona NO borra todo el contenido del cuadro de búsqueda. Esto implicó cambios tanto en el archivo javascript como en el código PHP.
• El cuadro de búsqueda es enfocado una vez se selecciona un palabra de las que son sugeridas

Descargar código fuente