Detalles del ejemplo Faces Client

Visión general de los ejemplos

El ejemplo portfolio representa una aplicación de gestión de cartera de acciones basada en Web. El objetivo consiste en permitir que los usuarios vean todas sus carteras de acciones, naveguen por ellas, las visualicen gráficamente y que estas se actualicen habitualmente con los precios de las acciones que un servicio Web proporcione a la página. Los usuarios también podrán cambiar las cantidades de sus stocks a efectos de análisis.

El ejemplo hello world demuestra la potencia de la infraestructura Faces Client mostrando una configuración MVC (Controlador de vista de modelo) en una página con un modelo muy simple y utilizando dos campos de entrada como controles.

Documentación de la aplicación portfolio

El ejemplo portfolio representa una aplicación de gestión de cartera de acciones basada en Web. El modelo de esta aplicación tiene un objeto Root que contiene una colección de usuarios y de acciones. También contiene una referencia a un solo objeto Stock utilizado como variable de sustitución para enviar y recibir datos de servicios Web en el ejemplo. También hay usuarios. Cada usuario puede tener cero más portfolios y cada portfolio puede tener cero o más posiciones. Cada posición señala a una acción.

A continuación se proporciona una explicación de la disposición de los distintos controles en la página.

La página tiene dos paneles con pestañas. El primer panel con pestañas tiene 3 paneles. El panel Tree muestra una vista de árbol enlazada con una lista de usuarios conectados a Root y para cada usuario se muestra la lista de portfolios correspondientes. El panel DataGrid muestra una cuadrícula de datos enlazada con las posiciones de un portfolio seleccionado. El panel Full muestra el árbol y la cuadrícula de datos con la misma disposición que en el panel Tree y en el panel Tree DataGrid uno junto a otro.
El segundo panel con pestañas tiene dos paneles. El panel Graph muestra un control de gráfico enlazado con las posiciones de un portfolio seleccionado. El eje x del gráfico muestra una lista de símbolos de acciones y el eje y muestra el precio y la cantidad correspondiente para cada acción. El panel WebServices muestra campos de texto de entrada y de salida enlazados con las propiedades de la acción de sustitución temporal. El botón del mandato de este panel se utilizará para invocar un Servicio Web de acción.

A continuación se proporciona un breve resumen de las interacciones entre los controles

Tenga en cuenta que cada control se correlaciona independientemente con el modelo, por lo que los cambios en los datos del modelo se reflejarán en el control. Además de estos enlaces implícitos hay algunos enlaces explícitos entre los controles. Cuando resalta un portfolio en TreeView, DataGrid y GraphDraw se actualizan con ese objeto Portfolio y se renuevan para mostrar las posiciones del objeto de portfolio. Se crea esta especie de sistema de eventos entre TreeView en el panel Tree y DataGrid en el panel DataGrid y también entre TreeView en el panel Full y DataGrid en el mismo panel y GraphDraw en el panel GraphDraw. Un segundo tipo de evento creado es entre DataGrid en el panel Full y el objeto de acción de sustitución temporal. Cuando se resalta una fila determinada de DataGrid, los campos del objeto de acción para esa posición se copian en los campos correspondientes del objeto de acción de sustitución temporal. Como resultado, se renuevan los valores de los campos de entrada y salida en el panel WebService.

Para invocar el servicio Web de acción para obtener la cotización de acciones para un símbolo determinado, pulse el botón "Fetch Info" en el panel WebServices. Los valores visualizados por los controles de formulario en el panel de servicio Web se actualizarán con los valores recibidos del servicio Web de acción.

También puede cambiar la cantidad de las acciones en la cuadrícula de datos del panel Full. Los cambios en la cantidad de acciones actualizarán automáticamente GraphDraw y la columna Gains/Losses. También puede sincronizar los cambios realizados en los Datos del lado del cliente con el bean del lado del servidor pulsando el botón Finalizar en el panel Full.

Documentación de la aplicación Hello World

Para esta aplicación tenemos en el lado del servidor una clase simple llamada Hello que contiene un atributo llamado texto de tipo String. En el lado del cliente, hemos exportado este mismo modelo en JavaScript y en el navegador, tenemos dos campos de texto que queremos enlazar con el atributo de texto del objeto Hello. Cuando actualizamos el valor de un control, esto cambiará el campo de texto del objeto Hello, lo que resultará en la propagación del valor al otro control sin necesidad de volver al servidor.

Intente cambiar el valor de la serie dentro del primer control de recuadro de texto de entrada por "Hello World!!!" El control activará un evento que actualizará el modelo de datos subyacente (en el lado del cliente) y si sale del contexto del primer recuadro de texto (pulse fuera del recuadro o navegue al segundo recuadro de texto) el valor del segundo recuadro de texto cambiará a "Hello World!!!" puesto que también está enlazado al mismo atributo del mismo objeto que el primer control.