Desenhando uma página

Observação: Vinculação sob demanda dos recursos do NetBeans IDE 6.1. Onde os componentes requerem codificação de Java, agora você deve adicionar manualmente o atributo de vinculação aos componentes em uma aplicação Visual Web JSF. Para fazê-lo, clique com o botão direito do mouse em cada componente e escolha Adicionar atributo de vinculação. Para obter mais informações, consulte o On-demand Binding Attribute Wiki.

1. Crie uma nova aplicação Web chamada ListboxExample que use o framework Visual Web JavaServer Faces. O arquivo Page1.jsp da aplicação é aberto no Visual Designer.

   Observação: Criar um projeto no NetBeans 6.1 inclui novas opções que podem ser deixadas como padrão. Por exemplo, a caixa de verificação Usar pasta dedicada para armazenar bibliotecas pode ficar desmarcada.

2. Na seção Básico da paleta, arraste um componente Caixa de listagem para o canto esquerdo superior da página. Na janela Propriedades, altere a propriedade id para personDD.

3. Defina a propriedade multiple da caixa de listagem como True, selecionando a caixa de verificação na janela Propriedades.

   A propriedade multiple está na seção Dados da janela Propriedades. Um valor True permite que o usuário selecione vários itens na caixa de listagem.

4. Arraste um componente Área de texto da seção Básico da paleta. Coloque esse componente na caixa de listagem.

   A área de texto será usada para exibir os itens que estão selecionados na caixa de listagem.
5. Defina a propriedade rows do componente Área de texto como 10, configurando seu valor na janela Propriedades

Criando e preservando propriedades Listbox

Cada vez que o navegador do cliente solicita uma página da Web, uma nova página é gerada no servidor no qual o escopo Solicitação é chamado. Quando a nova página é inicializada, quaisquer informações armazenadas anteriormente no bean de página (Page1.java) são sobregravadas. Para permitir que a aplicação preserve os itens da caixa de listagem entre as solicitações, você deve salvar os itens em uma propriedade bean, que esteja no escopo Sessão

Observação: Vinculação sob demanda dos recursos do NetBeans IDE 6.1. Onde os componentes requerem codificação de Java, agora você deve adicionar manualmente o atributo de vinculação aos componentes em uma aplicação Visual Web JSF. Para fazê-lo, clique com o botão direito do mouse em cada componente e escolha Adicionar atributo de vinculação. Para obter mais informações, consulte o On-demand Binding Attribute Wiki.

1. Na janela Navegador, clique com o botão direito do mouse em SessionBean1 e escolha Editar código-fonte Java.
2. Digite Option[] listOptions; na classe sessionBean1.

3. Clique com o botão direito do mouse em listOptions e selecione a opção Inserir código no menu de contexto que mostra a opção Getter e Setter, como mostrado na figura seguinte.

   
   A caixa de diálogo Gerar getter e setter se abre.

4. Selecione a caixa de verificação listOptions e selecione Gerar para adicionar os métodos getter e de listOptions, como mostrado na figura seguinte.

   
5. Clique com o botão direito do mouse na página e selecione corrigir importações. Escolha na lista.

6. Clique em OK.

   A matriz listOptions contém objetos do tipo Opção. Cada objeto representa uma opção na lista. Cada opção contém um nome de exibição e um valor. O nome de exibição é sempre uma String, mas o valor pode ser qualquer tipo de objeto — nesse caso, também é uma String.
7. Agora você criará uma propriedade, chamada choices, para manter os valores dos itens selecionados no momento. Digite String[] choices; na classe sessionBean1.
8. Clique com o botão direito do mouse em choices e selecione a opção Inserir código para definir seus métodos Getter e Setter. Adicione-os da mesma forma que fez para listOptions.

Inicializando as propriedades Listbox

Nesta seção, você inicializa os valores das duas propriedades SessionBean criadas na seção anterior. Você também preenche a propriedade listOptions com um conjunto inicial de itens do componente Caixa de listagem.

• Adicione as linhas de código seguintes no construtor SessionBean1. Os comentários são incluídos neste e nos exemplos seguintes para explicar o código.

  Amostra de código 1: Inicializando os valores de propriedade e adicionando opções

  // Initialize the property values and //add some choices to the listOptions property to get started. listOptions = new Option[] { new Option("choice1", "My Choice 1"), new Option("choice2", "My Choice 2"), new Option("choice3", "My Choice 3")}; choices = new String[] {};

  
  A segunda linha na amostra de código acima inicializa a propriedade listOptions. As próximas três linhas adicionam um item à caixa de listagem. O primeiro parâmetro (por exemplo, choice1) é o valor do item. Esse valor é capturado na propriedade value do componente Caixa de listagem quando você seleciona um item. Nesse caso, uma String é usada, mas você pode usar uma instância de qualquer classe Java. O segundo parâmetro (por exemplo, My Choice 1) é o texto exibido na caixa de listagem. A última linha inicializa a propriedade choices de forma que nada seja selecionado por padrão.

Vinculando propriedades ao componente Caixa de listagem

Agora vinculamos a propriedade items deflistbox1 e a matriz choices às propriedades em SessionBean1.java. O processo de vinculação de propriedades vincula realmente o valor da propriedade component ao valor de uma propriedade bean.

Observação: Vinculação sob demanda dos recursos do NetBeans IDE 6.1. Onde os componentes requerem codificação de Java, agora você deve adicionar manualmente o atributo de vinculação aos componentes em uma aplicação Visual Web JSF. Para fazê-lo, clique com o botão direito do mouse em cada componente e escolha Adicionar atributo de vinculação. Para obter mais informações, consulte o On-demand Binding Attribute Wiki.

1. Abra Page1.jsp no Visual Designer. Clique com o botão direito do mouse no componente e escolha Vincular aos dados.

   A caixa de diálogo Vincular aos dados se abre.

2. Na aba Vincular a um objeto, selecione SessionBean 1 > listOptions, como mostrado na figura seguinte.

   
3. Clique em OK.

4. Na janela Propriedades da caixa de listagem, clique no botão de reticências (...) da propriedade selecionada. Essa propriedade está na seção Dados da janela Propriedades.

   A caixa de diálogo listbox1 selecionada se abre.
5. Selecione SessionBean1 > choices como o destino da vinculação e clique em OK.

Exibindo os itens da caixa de listagem selecionados

Agora você adiciona o comportamento ao componente Caixa de listagem que faz duas coisas: obtém a lista de itens selecionados no momento de SessionBean e exibe a lista na área de texto sem atualizar a página inteira usando a funcionalidade Ajax.

Observação: Vinculação sob demanda dos recursos do NetBeans IDE 6.1. Onde os componentes requerem codificação de Java, agora você deve adicionar manualmente o atributo de vinculação aos componentes em uma aplicação Visual Web JSF. Para fazê-lo, clique com o botão direito do mouse em cada componente e escolha Adicionar atributo de vinculação. Para obter mais informações, consulte o On-demand Binding Attribute Wiki.

1. No Visual Designer, clique com o botão direito do mouse no componente Caixa de listagem e selecione Editar manipulador de ventos > processValueChange.
2. Adicione o código seguinte do manipulador de eventos ao método listbox1_processValueChange(). Depois de inserir o código, você pode pressionar Alt+Shift+F para formatar o código automaticamente.

   Amostra de código 2: o método listbox1_processValueChange().

   public String listbox1_processValueChange(ValueChangeEvent event) { //set the current selections in the SessionBean1 getSessionBean1().setChoices((String[]) listbox1.getSelected()); //get the current selections from the SessionBean1 String[] mySelections = getSessionBean1().getChoices(); String showSelections = ""; if (mySelections != null) { // Create a list of the values of the selected items for (int i = 0; i < mySelections.length; i++) showSelections = showSelections + mySelections[i] +"\n"; } if (showSelections.equals("")) showSelections = "nothing selected"; else showSelections = "Values chosen:\n" + showSelections; // Display the list in the textArea1 text area getTextArea1().setValue(showSelections); }

3. No Visual Designer, na janela Propriedades da caixa de listagem, clique no botão de reticências (...) da propriedade onChange. Essa propriedade está na seção JavaScript da janela Propriedades.

4. Adicione o seguinte código à expressão javascript.

   Amostra de código 3: propriedade onChange

   document.getElementById('form1:textArea1').refresh('form1:listbox1'); return false;

   Esse código está na verdade usando a funcionalidade Ajax ao atualizar a área de texto sem atualizar a página inteira.
5. Clique na seta verde na barra de ferramentas principal, ou escolha Executar > Executar projeto principal para construir e executar o aplicativo.

6. No aplicativo que está em execução, selecione um ou mais itens na Caixa de listagem e os itens selecionados aparecem na área de texto sem atualizar a página. Para selecionar vários itens, use Control+clique.

   A figura seguinte mostra o aplicativo implantado.

   

Adicionando e removendo itens da caixa de listagem

Nesta seção final, você cria os botões que adicionará e removerá itens da caixa de listagem. Cada item na lista possui um nome e um valor. Defina os valores para um item recém-adicionado, com base na posição do item na lista. Você também usa os valores dos itens para determinar quais itens devem ser removidos da lista.

Observação: Vinculação sob demanda dos recursos do NetBeans IDE 6.1. Onde os componentes requerem codificação de Java, agora você deve adicionar manualmente o atributo de vinculação aos componentes em uma aplicação Visual Web JSF. Para fazê-lo, clique com o botão direito do mouse em cada componente e escolha Adicionar atributo de vinculação. Para obter mais informações, consulte o On-demand Binding Attribute Wiki.

1. Abra o Visual Designer. Na janela Navegador, clique duas vezes em SessionBean1 para abrir o código-fonte no editor Java.
2. Em SessionBean1, digite int counter = 0;
3. Clique com o botão direito do mouse no contador e selecione a opção Inserir código para definir seus métodos Getter e Setter. Adicione-os, da mesma forma que você fez para listOptions e choices.

4. Insira os métodos seguintes depois do construtor SessionBean1.

   Amostra de código 4: adição ao construtor SessionBean1.

   public void addOption() { // add a new item to the list // by creating an updated array that contains the new item setCounter(getCounter() + 1); // counter to assure unique values String newItemVal = "newitem"+getCounter(); Option opt = new Option(newItemVal, "New Item "+getCounter()); Option[] current = getListOptions(); Option[] newOpts = new Option[current.length + 1]; // add the current items to the new array for (int i = 0; i < current.length; i++) newOpts[i] = current[i]; newOpts[current.length] = opt; setListOptions(newOpts); // update the list setChoices(new String[] {newItemVal}); // select the new item } public void removeOptions(String[] selectedValues) { // remove the options that are selected in the list // by matching the values to the options Option[] current = getListOptions(); int curLength = current.length; if (selectedValues != null) { int numSelected = selectedValues.length; int newLength = curLength - numSelected; Option[] newOpts = new Option[newLength]; // updated list array int k = 0; // counter for the updated list boolean found = false; for (int i = 0; i < current.length; i++) { // scan the current items to identify the ones to remove found = false; for (int j = 0; j < numSelected; j++) { if (current[i].getValue().equals(selectedValues[j])) { // this item will be removed found = true; break; } } if (!found) { // since this item was not selected, add it to the updated list newOpts[k] = current[i]; k++; } } setListOptions(newOpts); // update the list setChoices(null); // remove the existing selected values } }

5. Abra o Visual Designer. Arraste um componente Botão da paleta e coloque-o à direita do componente Caixa de listagem. Altere o texto do botão para Adicionar.
6. Arraste um segundo botão da paleta e coloque-o sob o botão Adicionar. Altere o texto deste botão para Remover.

   Observação: Os botões devem ser colocados em uma grade ou seu tamanho deve ser definido explicitamente na folha de propriedades para evitar problemas de renderização no Internet Explorer 7.

7. Clique duas vezes no botão Adicionar e insira o seguinte código no método button1_action com o seguinte código.

   Amostra de código 5: método button1_action

   public String button1_action() { // Add a new generated item to the listbox1 component getSessionBean1().addOption(); getTextArea1().setText("New Item Added"); return null; }

8. Abra o Visual Designer. Clique duas vezes no botão Remover.

9. Substitua o método button2_action pelo seguinte código.

   Amostra de código 6: método button2_action

   public String button2_action() { // Remove the selected item or items getSessionBean1().removeOptions((String[])getListbox1().getSelected()); getTextArea1().setText("Selected Items Removed"); return null; }

10. Execute a aplicação.

11. Para testar o novo código, clique no botão Adicionar para adicionar um novo item ao fim da lista, como mostrado na figura seguinte. Para remover um ou mais itens, selecione os itens e clique no botão Remover.

    

Resumo

Neste tutorial, você usou o framework Visual Web JSF do NetBeans para criar um aplicativo que usa uma caixa de listagem de seleção múltipla e uma área de texto usando a funcionalidade Ajax.

Consulte também

• Introdução ao desenvolvimento de aplicações JSF Visual Web
• Desenvolvendo uma aplicação Web
• Trilha do aprendizado das aplicações Web