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

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

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

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


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

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

一、创建设计页面

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

       2.从工具面板(Palette)中拖一个Listbox组件放在页面的左上方,在属性面板(Properties),设置ListboxidpersonDD。看看,这是不是有点像早期的VB6或是如今的VS2008的操作了?

       3.设置Listboxmultiple属性为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;

并加入gettersetter方法

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

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

 

三、绑定Listbox组件至Bean

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

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

2.在出来界面中,选择SessionBean 1>listOptions,点击OK,如下图所示:



 

3.在Listbox的属性窗口,选择selected属性,点右边的按钮,在出来的对话框(与上面的有点类似)选择SessionBean1 > choices,点击OK

 

 

四、ListboxAjax功能实现

当选择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增加gettersetter方法。

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,名称修改为增加。再拖一个ButtonIDRemove,名称为删除。

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是该瞻仰一下了

只有注册用户登录后才能发表评论。


网站导航: