Проектирование страницы

Примечание: В среде IDE NetBeans 6.1 поддерживается привязка по запросу. В тех местах, где элементы требуют написания кода Java, теперь следует вручную добавить атрибут привязки к элементам в визуальном веб-приложении JSF. Для этого щелкните правой кнопкой мыши каждый элемент и выберите "Add Binding Attribute". Для получения дополнительных сведений см. вики-страницу On-demand Binding Attribute.

1. Создайте новое веб-приложение с названием ListboxExample, использующее инфраструктуру визуальных веб-приложений JavaServer Faces. Файл приложения Page1.jsp откроется в Visual Designer.

   Примечание: При создании проекта в NetBeans 6.1 доступны новые параметры, для которых можно оставить значения по умолчанию. Например, флажок Use Dedicated Folder for Storing Libraries может быть оставлен неустановленным.

2. Перетащите элемент "Listbox" из раздела "Basic" окна "Palette" в верхний левый угол страницы. В окне "Properties" измените значение свойства id на personDD.

3. Установите для свойства "Multiple" элемента "Listbox" значение "True" с помощью флажка в окне "Properties".

   Свойство "Multiple" находится в разделе "Data" окна "Properties". Значение "True" разрешает пользователю выбрать несколько элементов в элементе "Listbox".

4. Перетащите элемент "Text Area" из раздела "Basic" окна "Palette". Поместите этот элемент под элементом "Listbox".

   Для отображения отдельных пунктов, выбранных в списке выбора, будет использоваться текстовая область.
5. Установите для свойства строк элемента "Text Area" значение "10" путем установки этого значения в окне "Properties".

Проектирование и сохранение свойств элемента "Listbox"

Каждый раз при запросе обозревателем клиента веб-страницы на сервере создается новая страница в так называемом контексте запроса. При инициализации новой страницы происходит перезапись всей информации, которая была предварительно сохранена в компоненте страницы (Page1.java). Для сохранения приложением пунктов списка выбора по запросам следует сохранить эти пункты в свойстве компонента, относящемся к контексту сеанса.

Примечание: В среде IDE NetBeans 6.1 поддерживается привязка по запросу. В тех местах, где элементы требуют написания кода Java, теперь следует вручную добавить атрибут привязки к элементам в визуальном веб-приложении JSF. Для этого щелкните правой кнопкой мыши каждый элемент и выберите "Add Binding Attribute". Для получения дополнительных сведений см. вики-страницу On-demand Binding Attribute.

1. В окне "Navigator" щелкните правой кнопкой мыши "SessionBean1" и выберите "Edit Java Source".
2. Введите Option[] listOptions; в классе "sessionBean1".

3. Щелкните правой кнопкой мыши "listOptions" и выберите параметр "Insert Code" из контекстного меню с пунктом "Getter and Setter", как показано на следующем рисунке.

   
   Откроется диалоговое окно "Generate Getter and Setter".

4. Установите флажок "listOptions" и выберите "Generate" для добавления методов получения и установки для "listOptions", как показано на следующем рисунке.

   
5. Щелкните правой кнопкой мыши страницу и выберите "Fix Imports". Выберите из списка com.sun.webui.jsf.model.Option.

6. Нажмите кнопку "OK".

   Массив "listOptions" содержит объекты типа "Option". Каждый объект представляет пункт в списке. Каждый пункт содержит как отображаемое имя, так и значение. Отображаемым именем всегда является String, но значение может быть любым видом объекта. В этом случае значением также является String.
7. Теперь создайте свойство "choices" для сохранения значений выбранных в настоящий момент пунктов. Введите String[] choices; в классе "sessionBean1".
8. Для настройки методов получения и установки щелкните правой кнопкой мыши свойство "choices" и выберите параметр "Insert Code". Добавьте их тем же способом, который был использован для "listOptions".

Инициализация свойств элемента "Listbox"

В этом разделе описана инициализация значений двух свойств "SessionBean", созданных в предыдущем разделе. Также заполните свойство "listOptions" начальным набором пунктов для элемента "Listbox".

• Добавьте следующие строки кода в конструктор SessionBean1: Для пояснения кода сюда включены комментарии и следующие примеры.

  Пример кода 1: инициализация значений свойств и добавление вариантов выбора

  // Для начала работы инициализируйте значения свойства и добавьте некоторые варианты выбора в свойство "listOptions". listOptions = new Option[] { new Option("choice1", "My Choice 1"), new Option("choice2", "My Choice 2"), new Option("choice3", "My Choice 3")}; choices = new String[] {};

  
  Вторая строка примера кода, приведенного выше, инициализирует свойство listOptions. Следующие три строки служат для добавления пункта в список. Первым параметром (например, choice1) является значение пункта. Это значение сохраняется в значении свойства элемента "Listbox" при выборе пункта. В этом случае используется String, но может использоваться и любой другой экземпляр класса Java. Вторым параметром (например, My Choice 1) является текст, отображаемый в списке. Последняя строка инициализирует свойство choices с отсутствием выбранных пунктов по умолчанию.

Привязка свойств к элементу "Listbox"

Теперь свяжем свойство элементов listbox1 и массив choices со свойством в SessionBean1.java. Процесс привязки свойств фактически означает связывание значения свойства элемента со значением свойства компонента.

Примечание: В среде IDE NetBeans 6.1 поддерживается привязка по запросу. В тех местах, где элементы требуют написания кода Java, теперь следует вручную добавить атрибут привязки к элементам в визуальном веб-приложении JSF. Для этого щелкните правой кнопкой мыши каждый элемент и выберите "Add Binding Attribute". Для получения дополнительных сведений см. вики-страницу On-demand Binding Attribute.

1. Откройте "Page1.jsp" в Visual Designer. Щелкните правой кнопкой мыши элемент "Listbox" и выберите "Bind to Data".

   Появится диалоговое окно "Bind to Data".

2. На вкладке "Bind to an Object" выберите SessionBean 1 > listOptions, как показано на следующем рисунке.

   
3. Нажмите кнопку "OK".

4. В окне "Properties" для "Listbox" нажмите кнопку с многоточием (...) для выбранного свойства. Это свойство расположено в разделе "Data" окна "Properties".

   Откроется диалоговое окно "listbox1 – selected".
5. Выберите "SessionBean1 > choices" в качестве целевого элемента привязки и нажмите кнопку "OK".

Отображение выбранных элементов элемента "Listbox"

Теперь добавьте поведение к элементу "Listbox", предусматривающее получение списка выбранных в настоящий момент пунктов из компонента "SessionBean" и вывод на экран этого списка в текстовой области без обновления всей страницы посредством функциональных возможностей Ajax.

Примечание: В среде IDE NetBeans 6.1 поддерживается привязка по запросу. В тех местах, где элементы требуют написания кода Java, теперь следует вручную добавить атрибут привязки к элементам в визуальном веб-приложении JSF. Для этого щелкните правой кнопкой мыши каждый элемент и выберите "Add Binding Attribute". Для получения дополнительных сведений см. вики-страницу On-demand Binding Attribute.

1. В Visual Designer щелкните правой кнопкой мыши элемент "Listbox" и выберите "Edit Event Handler > processValueChange".
2. Добавьте следующий код обработчика событий к методу listbox1_processValueChange(). После вставки кода можно нажать комбинацию клавиш Alt+Shift+F для автоматического форматирования кода.

   Пример кода 2: метод listbox1_processValueChange().

   public String listbox1_processValueChange(ValueChangeEvent event) { //Установка текущие варианты выбора в "SessionBean1" getSessionBean1().setChoices((String[]) listbox1.getSelected()); //Получение текущих вариантов выбора из "SessionBean1" String[] mySelections = getSessionBean1().getChoices(); String showSelections = ""; if (mySelections != null) { // Создание списка значений выбранных элементов 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; // Вывод список на экран в текстовой области "textArea1" getTextArea1().setValue(showSelections); }

3. В Visual Designer в окне свойств элемента "Listbox" нажмите кнопку с многоточием (...) рядом со свойством onChange. Это свойство находится под разделом "JavaScript" окна свойств.

4. Добавьте следующий код к выражению javascript.

   Пример кода 3: свойство onChange

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

   Этот код фактически использует функциональные возможности Ajax, посредством которых выполняется обновление элемента "TextArea" без обновления всей страницы.
5. Для создания и выполнения приложения щелкните зеленую стрелку на основной панели инструментов или выберите "Run > Run Main Project".

6. В работающем приложении выберите один или несколько пунктов в списке, после чего выбранные пункты появятся в текстовой области без обновления страницы. Для выбора нескольких пунктов при щелчке мышью удерживайте нажатой клавишу Ctrl.

   Приложение после развертывания показано на следующем рисунке.

   

Добавление и удаление пунктов из элемента "Listbox"

В этом заключительном разделе создаются кнопки, которые используются для добавления и удаления отдельных пунктов из списка. Каждый пункт списка имеет как имя, так и значение. Значения для вновь добавляемого пункта устанавливаются в зависимости от положения этого пункта в списке. Значения пунктов также используются для определения пунктов, которые необходимо удалить из списка.

Примечание: В среде IDE NetBeans 6.1 поддерживается привязка по запросу. В тех местах, где элементы требуют написания кода Java, теперь следует вручную добавить атрибут привязки к элементам в визуальном веб-приложении JSF. Для этого щелкните правой кнопкой мыши каждый элемент и выберите "Add Binding Attribute". Для получения дополнительных сведений см. вики-страницу On-demand Binding Attribute.

1. Откройте Visual Designer. В окне "Navigator" дважды щелкните "SessionBean1" для открытия исходного кода в редакторе Java.
2. В "SessionBean1" введите int counter = 0;.
3. Для настройки методов получения и установки щелкните правой кнопкой мыши счетчик и выберите параметр "Insert Code". Добавьте их тем же способом, который был использован для listOptions и choices.

4. Вставьте следующие методы после конструктора "SessionBean1".

   Пример кода 4: добавление в конструктор SessionBean1.

   public void addOption() { // Добавление нового пункта в список путем создания обновляемого массива, содержащего этот новый пункт setCounter(getCounter() + 1); // Счетчик для проверки уникальности значений String newItemVal = "newitem"+getCounter(); Option opt = new Option(newItemVal, "New Item "+getCounter()); Option[] current = getListOptions(); Option[] newOpts = new Option[current.length + 1]; // Добавление текущих пунктов к новому массиву for (int i = 0; i < current.length; i++) newOpts[i] = current[i]; newOpts[current.length] = opt; setListOptions(newOpts); // Обновление списка setChoices(new String[] {newItemVal}); // Выбор нового пункта } public void removeOptions(String[] selectedValues) { // Удаление выбранных в списке параметров путем сопоставления значений и параметров Option[] current = getListOptions(); int curLength = current.length; if (selectedValues != null) { int numSelected = selectedValues.length; int newLength = curLength - numSelected; Option[] newOpts = new Option[newLength]; // Обновленный массив списка int k = 0; // Счетчик для обновленного списка boolean found = false; for (int i = 0; i < current.length; i++) { // Проверка текущих пунктов для определения тех из них, которые следует удалить found = false; for (int j = 0; j < numSelected; j++) { if (current[i].getValue().equals(selectedValues[j])) { // Этот пункт будет удален found = true; break; } } if (!found) { // Поскольку этот пункт не был выбран, он должен быть добавлен к обновленному списку newOpts[k] = current[i]; k++; } } setListOptions(newOpts); // Обновление списка setChoices(null); // Удаление существующих выбранных значений } }

5. Откройте Visual Designer. Перетащите элемент "Button" из палитры и поместите его справа от элемента "Listbox". Измените текст кнопки на Add.
6. Перетащите вторую кнопку из палитры и поместите ее под кнопкой "Add". Измените текст кнопки на Remove.

   Примечание: Во избежание проблем с визуализацией в Internet Explorer 7 кнопки должны быть либо размещены в сетке, либо их размер должен быть непосредственно установлен в таблице свойств.

7. Дважды щелкните кнопку "Add" и вставьте следующий код в метод button1_action.

   Пример кода 5: метод button1_action

   public String button1_action() { // Добавление созданного пункта в элемент "listbox1" getSessionBean1().addOption(); getTextArea1().setText("New Item Added"); return null; }

8. Откройте Visual Designer. Дважды щелкните кнопку Remove.

9. Замените метод button2_action следующим кодом.

   Пример кода 6: метод button2_action

   public String button2_action() { // Удаление выбранного пункта или пунктов getSessionBean1().removeOptions((String[])getListbox1().getSelected()); getTextArea1().setText("Selected Items Removed"); return null; }

10. Запустите приложение.

11. Для тестирования нового кода нажмите кнопку "Add" и добавьте новый пункт в конец списка, как показано на следующем рисунке. Для удаления одного или нескольких пунктов выберите эти пункты и нажмите кнопку "Remove".

    

Заключение

В этом руководстве было показано создание приложения со списком многократного выбора и текстовой областью с использованием функциональных возможностей Ajax в инфраструктуре визуальных веб-приложений JSF в среде NetBeans.

Дополнительная информация

• Введение в разработку визуальных веб-приложений JSF
• Разработка веб-приложения
• Учебная карта по веб-приложениям