Detalhes da Amostra do Faces Client

Visão Geral dos Exemplos

A amostra de portfólio imita um aplicativo de gerenciamento de portfólio baseado na Web. O objetivo é permitir que os usuários visualizem todos os seus portfólios, naveguem através deles, os exibam graficamente e os atualizem regularmente com preços atuais de estoque conforme entregues à página por um serviço da Web. Usuários também poderão alterar as quantidades de suas ações para fins de análise.

A amostra hello world demonstra a potência da estrutura do Faces Client mostrando um MVC (Model View Controller) configurado em uma página com modelos bastante simples e utilizando dois campos de entrada como controles.

Documentação do Portfólio do Aplicativo

A amostra de portfólio imita um aplicativo de gerenciamento de portfólio baseado na Web. O modelo deste aplicativo possui um objeto Raiz, que contém uma coleção de Usuários e uma Coleção de Ações. Ele também contém uma referência a um único objeto Ação utilizado como espaço reservado para enviar e receber dados a partir de serviços da Web na amostra. Também existem os Usuários. Cada usuário pode ter zero ou mais portfólios e cada portfólio pode ter zero ou mais posições. Cada posição indica uma Ação.

A seguir, você encontrará uma explicação sobre a configuração dos diferentes controles da página.

A página possui dois painéis com guias. O primeiro painel com guias possui 3 painéis. O painel Árvore mostra TreeView vinculado à uma lista de usuários conectados à Raiz e a lista de portfólios de cada usuário será mostrada. O painel DataGrid mostra uma DataGrid vinculada às posições de um portfólio selecionado. O Painel Completo mostra Árvore e DataGrid com a mesma configuração do Painel Árvore e do Painel DataGrid, lado a lado.
O segundo painel com guias possui dois painéis. O painel Gráfico mostra um controle de gráficos vinculado às posições de um portfólio selecionado. O eixo x do gráfico mostra uma lista de símbolos de ações e o eixo y mostra o preço e quantidade correspondentes para cada ação. O Painel WebServices mostra alguns campos de texto de entrada e saída vinculados às propriedades da ação temporária de espaço reservado. O botão de comando neste painel será utilizado para chamar um Serviço de Web de Ações.

A seguir você encontrará um breve resumo das interações entre os controles

Observe que cada controle está mapeado independentemente do modelo; portanto, qualquer alteração nos dados do modelo será refletida no controle. Além destas vinculações implícitas, existem algumas explícitas entre os controles. Quando você destaca um portfólio em TreeView, DataGrid e GraphDraw são atualizados com esse objeto de Portfólio e mostrarão as posições nesse objeto. Nos criamos esse tipo de sistema de eventos entre TreeView no Painel Árvore e DataGrid no Painel DataGrid e também entre TreeView e no Painel Completo e DataGrid no mesmo painel e GraphDraw no Painel GraphDraw. Um segundo tipo de evento que criamos ocorre entre DataGrid no Painel Completo e o objeto de ação de espaço reservado. Quando uma linha específica for destacada em DataGrid, todos os campos no objeto de ação para essa posição serão copiados para os campos correspondentes do objeto de ação de espaço reservado. Como resultado, os valores nos campos de entrada e saída no Painel WebService serão atualizados.

Para chamar o Serviço da Web de Ações para obter cotação de ações para um determinado símbolo, clique no botão "Buscar Informações" no Painel WebServices. Os valores exibidos pelos controles de formulário no Painel Web Service serão atualizados com os valores recebidos do Serviço da Web de Ações .

Você também pode alterar as quantidades dos estoques na Grade de Dados no Painel Completo. Qualquer alteração na quantidade de estoques atualizará automaticamente a coluna GraphDraw e Lucros/Prejuízos. Também é possível sincronizar quaisquer alterações nos dados no lado cliente com o bean do lado do servidor, pressionando o botão Concluir no Painel Completo.

Documentação do Aplicativo Hello World

Para este aplicativo no lado do servidor, temos uma classe simples chamada Hello, que contém um atributo chamado text, do tipo String. No lado do cliente, exportamos esse mesmo modelo em JavaScript, e temos dois campos de texto de entrada no navegador que desejamos vincular ao atributo text do objeto Hello. Quando atualizarmos o valor de um controle, o campo texto do objeto Hello será alterado, o que resultará na propagação do valor para o outro controle, sem voltar para o servidor.

Tente altera o valor da cadeia dentro do primeiro controle de caixa de texto de entrada para "Hello World!!!". O controle irá disparar um evento que atualizará o modelo de dados básico (no lado do cliente) e caso você saia do contexto da primeira caixa de texto (clique fora da caixa ou navegue para a segunda caixa de texto), o valor na segunda caixa de texto será alterado para "Hello World!!!", pois ele também está vinculado ao mesmo atributo do mesmo objeto do primeiro controle.