posts - 310, comments - 6939, trackbacks - 0, articles - 3
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

在NetBeans 6中开发Ajax功能的JSF组件

Posted on 2008-01-18 11:01 诗特林 阅读(2800) 评论(1)  编辑  收藏 所属分类: JSF
   

在NetBeans 6中开发Ajax功能的JSF组件


       早些年，微软件的开发利器总是让Java阵营的IDE显得很弱智。微软种可视化的开发方式让无数的Java程序员向往。虽然Eclipse的出现在一定程度上缓解了这种心态，但还是有差距啊。长江后浪推前浪，前浪死在沙滩上。如今的NetBeans 6号称很牛，试一试，发现确实也比较牛，虽然不能完全与微软的IDE相提并论，但至少让我们看到真正可视化编程的曙光。下面就介绍一下如何在NetBeans6中可初见化的开发具有Ajax功能的JSF组件。

开发运行环境：NetBeans 6+GlassFish v2

一、创建设计页面

       1．在NetBeans6下创建一个名称为ListboxExample的web application，选择Visual Web JavaServer Faces框架，进入Page.jsp的可视化设计器界面。

       2．从工具面板（Palette）中拖一个Listbox组件放在页面的左上方，在属性面板（Properties），设置Listbox的id为personDD。看看，这是不是有点像早期的VB6或是如今的VS2008的操作了？

       3．设置Listbox的multiple属性为True，这里主要是为了让Listbox可以进行多个值的选择。

       4．在工具面板（Palette）中拖一个Text Area组件，放置在页面的右边。它用于显示在Listbox选择一个选项时它的子选择。

       5．在属性窗口中，设置Text Area组件的row属性为10。



 

二、设计Bean

       为了将ListBox中的数据保存起来，这里采用了JavaBean的方式。

1．在Navigator窗口中，右击SessionBean1，并选择Edit Java Source.。

2．在sessionBeans1类中加入代码：

Option[] listOptions;

3．在listOptions是点击右键，选择Insert Code选择项，选择Getter and Setter选择项，如下图所示：



在出来的界面上，打上勾，点击OK。



       4．在代码的空白地点地右健，选择fix imports，引入类  com.sun.webui.jsf.model.Option
 

5．以同样的方式，再添加代码

String[] choices;

并加入getter与setter方法

6．在这个Bean时，还需要在这的构造函数里添加初始化Listbox的代码，代码如下：

        listOptions = new Option[]{
            new Option("选项1", "第一个选择"),
            new Option("选项2", "第二个选择"),
            new Option("选项3", "第三个选择")
        };
        choices = new String[]{};

 

三、绑定Listbox组件至Bean

接下来需要将上面所设计的Listbox与Bean进行数据绑定。

1．打开Page1.jsp页面的设计页面，右击Listbox组件，选择choose Bind to Data选项。

2．在出来界面中，选择SessionBean 1>listOptions，点击OK，如下图所示：



 

3．在Listbox的属性窗口，选择selected属性，点右边的按钮，在出来的对话框（与上面的有点类似）选择SessionBean1 > choices，点击OK。

 

 

四、Listbox的Ajax功能实现

当选择Listbox中的一条记录时，在Text Area中应该显示该记录的子选项。

1．在设计页面中，右击Listbox组件，选择Edit Event Handler>processValueChange。

2．在该方法中添加如下代码

        getSessionBean1().setChoices((String[]) personDD.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 = "没有选择任何值";
        } else {
            showSelections = "Select Value:\n" + showSelections;
        }
        // Display the list in the textArea1 text area
        getTextArea1().setValue(showSelections);

 

3．在页面的设计模式下，选择Listbox的属性窗口，点击onChange属性，在出来的对话框中输入如下代码

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

 

至此，功能已经完成，可以运行来看效果。但下面再加一个增加与删除的功能。

五、Listbox选择项的维护

为了对Listbox能进行页面上的增加与删除，这里加多两个button.

1．打开SessionBean1的代码进行编辑，加入新的属性，如下

int counter = 0;

 

当然，按前面的方法为counter增加getter与setter方法。

2．在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 = "新增项" + getCounter();
        Option opt = new Option(newItemVal, "新增子项 " + 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
        }
    }



  

3．打开页面的设计模式，从工具面板中拖一个Button，将ID修改为add，名称修改为增加。再拖一个Button，ID为Remove，名称为删除。

4．双击增加按钮，在add_action()方法中添加如下代码

        getSessionBean1().addOption();
        getTextArea1().setText("新增Item");
        return null;

 

5．双击删除按钮，在remove_action ()方法中添加如下代码；

        getSessionBean1().removeOptions((String[]) getPersonDD().getSelected());
        getTextArea1().setText("选择项已被删除");
        return null;

 

完成，运行整个工程。






 

参考：http://www.netbeans.org/kb/60/web/clientsiderendering.html


评论

# re: 在NetBeans 6中开发Ajax功能的JSF组件  回复  更多评论   

2008-01-20 23:48 by IT进行时
netbeans没用过，看来v6是该瞻仰一下了

只有注册用户登录后才能发表评论。
网站导航: