Para crear una aplicación web con Echo2, crearemos dos clases Java: una ApplicationInstance y un WebContainerServlet.  La ApplicationInstance representará el estado de la instancia de usuario de la aplicación.  El WebContainerServlet es una implementación del Servlet que procesará las conexiones HTTP de los clientes web e instanciará nuevas ApplicationInstance para usuarios nuevos.

La ApplicationInstance

Propósito: Una ApplicationInstance representa el estado del interfaz de usuario para un usuario.  Cada usuario que visita una aplicación Echo2 tendrá su propia instancia única.  Echo2 almacenará la ApplicationInstance en la sesión de usuario del contenedor de servlet, de modo que la instancia esté disponible hasta que el usuario salga de la aplicación o que caduque la sesión debido a la inactividad.

Implementación:  ApplicationInstance es una clase abstracta, que obliga al desarrollador a definir un único método: init().  El método init() es invocado para inicializar el estado del interfaz de usuario para un usuario nuevo.  Debe devolver un objeto Window de Echo2 que represente el estado de la ventana inicial de una aplicación.  La implementación de una aplicación del método init() debería crear y configurar una nueva Window para un nuevo usuario ensamblando en ella una gerarquía de componentes Echo2.  El siguiente código de ejemplo muestra una implementación de ApplicationInstance para una sencilla aplicación "Hola, mundo!":

public class HolaMundoApp extends ApplicationInstance {
public Window init() {
Window window = new Window();
ContentPane contentPane = new ContentPane();
window.setContent(contentPane);
Label label = new Label("Hola, mundo!");
contentPane.add(label);
return window;
}
}

Propiedades:  Ya que una ApplicationInstance representa a un usuario único de una aplicación, es seguro añadir propiedades a esta clase en tu implementación con la esperanza de que las propiedades sean únicas para cada usuario.  Por ejemplo, si una aplicación necesita autentificación, podría ser práctico almacenar el nombre del usuario en una propiedad del objeto ApplicationInstance.

El WebContainerServlet

La clase WebContainerSerlvet es una derivación específica de Echo2 de la clase HttpServlet de la especificación Servlet.  El WebContainerSerlvet es responsable de procesar todas las peticiones del lado cliente del motor Echo2, incluyendo la renderización de la página HTML inicial, el manejo del servicio de sincronización XML, y el envío de imágenes gráficas al cliente.  Todo ese trabajo de interacción con el cliente se realiza entre bambalinas.  Como desarrollador de aplicaciones, tu única interacción necesaria con la clase  WebContainerSerlvet  consiste en crear una implementación derivada que devuelva nuevas ApplicationInstance.  El siguiente ejemplo muestra un WebContainerSerlvet que devuelve nuevas ApplicationInstance de la aplicación "Hola, mundo!" anterior:

public class HolaMundoServlet extends WebContainerServlet {
public ApplicationInstance newInstance() {
return new HolaMundoApp();
}
}

Componentes

Un interfaz de usuario Echo2 se construye ensamblando Components (componentes) gerárquicamente.  Un "Component" (componente) es un objeto que extiende de la clase nextapp.echo2.app.Component, tal como Column (columna), Label (etiqueta), Button (botón), TextField (cuadro de texto), o WindowPane (panel de ventana).  Un Component puede tener multiples hijos Component, pero un único padre Component.  Las gerarquías se crean y manipulan usando los métodos add() y remove() en Components individuales.  El siguiente código de ejemplo muestra la construcción de una jerarquía en la que se añaden dos Button a un Column:

Column buttonColumn = new Column();
Button button1 = new Button("Primer Botón");
buttonColumn.add(button1);
Button button2 = new Button("Segundo Botón");
button2.setBackground(Color.GREEN);
buttonColumn.add(button2);

Properties (propiedades), Styles (estilos), y StyleSheets (hojas de estilo):  Una clase Component generalmente tendrá propiedades que definen su apariencia y comportamiento.  Como se muestra en el ejemplo superior, la propiedad de color de fondo del segundo botón se ha fijado al color verde.  Además de fijar propiedades en Components individuales, algunas propiedades de Component se puede establecer usando los conceptos de Styles y StyleSheets que se explican en capítulos posteriores del tutorial.

Hijos:  Solamente algunos Components, generalmente los usados para labores de maquetación, pueden contener otros Components.  Ejemplos de dichos contenedores incluyen a WindowPane, Column, Grid, y ContentPane.  Algunos Components también pueden especificar requisitos para que solamente puedan ser añadidos a un tipo concreto de Component padre, o que sus Component hijos se limiten a un número y/o tipo específico.  La documentación del API de cada Component describirá cualquiera de dichos casos en detalle.




Raíces de la Gerarquía:  El componente raiz de un Interfaz de Usuario Echo2 debe ser un Window.  Un componente Window representa la ventana de nivel superior del navegador que contiene la aplicación.  Una Window solamente puede tener un componente hijo, y dicho hijo debe de ser un ContentPane.  El ContentPane representa la región de la Window, a la que se pueden añadir componentes hijos.  Del mismo modo, generalmente un ContentPane solamente permite un componente hijo (existen excepciones a esta regla, como en el caso de añadir WindowPanes a ContentPanes, que se discutirá más adelante en esta documentación).

LayoutData

La propiedad "LayoutData" de un Component se usa para describir cómo debe ser representado el Component por su Component padre contenedor.  Por ejemplo, en el trozo de código anterior que mostraba dos Buttons siendo añadidos a un Column, podríamos usar un LayoutData para indicar al Column cómo se deberían alinear los Buttons.  Fijando de un modo adecuado la propiedad LayoutData, podríamos hacer que el Column justificase a la derecha el primer botón y justificase a la izquierda el segundo.

Cada Component contenedor tiene su propia implementación LayoutData.  Por ejemplo, un Grid tiene GridLayoutData mientras que un Column tiene ColumnLayoutData.  Para configurar la alineación de los Buttons en un Column, fijaríamos la propiedad LayoutData de cada Button a una instancia de ColumnLayoutData configurada adecuadamente.  Por ejemplo:

Column buttonColumn = new Column();
Button button1 = new Button("Primer Botón");
ColumnLayoutData button1ColumnLayoutData = new ColumnLayoutData();
button1ColumnLayoutData.setAlignment(new Alignment(Alignment.RIGHT, Alignment.DEFAULT));
button1.setLayoutData(button1ColumnData);
buttonColumn.add(button1);
Button button2 = new Button("Segundo Botón");
button2.setBackground(Color.GREEN);
buttonColumn.add(button2);

Eventos

Los Components que capturan la entrada de usuario pueden lanzar eventos cuando se producen entradas.  Para poder notificar a una aplicación de los eventos, un Component proporcionará métodos para registra y des-registrar escuchadores de eventos que se correspondan con un tipo específico de evento.  Otros tipos de objetos Echo2, como los modelos de datos, también utilizan este patrón de ventos para indicar cuándo se producen cambios de estado.

Por ejemplo, los componentes Button proporcionan la capacidad de registrar ActionListeners que recibirán ActionEvents cuando se realice una pulsación del botón (Echo2 define sus propios objetos ActionListener/ActionEvent, en vez de usar los del API Java AWT/Swing).

El siguiente trozo de código muestra un botón con un ActionListener registrado.  El método actionPerformed() del ActionListener se invocará cuando el usuario pulse sobre el botón.  El parámetro ActionEvent proporcionado describirá la particularidad del evento, como el origen (Button) que lo generó (en este sencillo ejemplo no utilizamos dicha información).  En este caso el listener de eventos define un comportamiento para cambiar el texto del Button en respuesta a la pulsación del usuario.

final Button button = new Button("Por favor púlsame.");
button.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
button.setText("Thanks!");
}
});

Implmentaciones de listeners usando anonymous inner class:  El código de arriba usa un anonymous inner class para proporcionar la implementación del listener de eventos.  Mientras que muchos desarrolladores pueden hacer recomendaciones contra el uso de anonymous inner classes en general, éstas pueden ser extremadamente útiles para implementaciones de sencillos listeners de eventos como el anterior.

Dirigido por eventos:  En este punto es apropiado indicar que Echo2 es un framework dirigido por aventos: la dinámica de una aplicación Echo2 se define mediante el registro de eventos que hacen que se produzcan determinados comportamientos en respuesta a acciones del usuario.  El control completo del flujo de una aplicación Echo2 de define usando eventos.  Mientras que un desarrollador web que utilice un framework convencional definiría un hiper-enlace para llevar al usuario a una nueva pantalla del interfaz de usuario, un desarrollador de Echo2 creará un Button con un ActionListener que defina el comportamiento de actualizar adecuadamente el estado del interfaz de usuario cuando sea pulsado.