您现在的位置:首页 >> 前端 >> 内容

wicket常用控件和控件的使用方法介绍

时间:2018/6/14 10:17:10 点击:

  核心提示:wicket常用控件使用方法总述:Wicket开发和.Net很相似,在html页面中对控件做wicket的声明,然后在java代码中便可以生成一控件。控件的值或内容都以Model存放,所以当修改其值或...

wicket常用控件使用方法

总述:

Wicket开发和.Net很相似,在html页面中对控件做wicket的声明,然后在java代码中便可以生成一控件。控件的值或内容都以Model存放,所以当修改其值或内容时都是在修改Model中的对象,取值时只需要取到Model中对象再加以变形就是我们想要的值了。Model中可以存放任何类型,因为它存的是object类型。

文本控件(Label) 

生成:

有两种方法,第一种不使用Model,直接显示内容:

html:

<span wicket:id="lbName"></span>

java:

 Label lbName = new Label("lbName","wyk");

this.add(lbName);

此时只能显示wyk,且不可修改;

第二种方法,使用Model存放内容:

java:

private Model nameModel = new Model();

nameModel.setObject("12345");

Label lb = new Label("lbName",nameModel);

this.add(lb);

这种方法可以让Label显示任何我们想要的内容,当然在程序运行当中改变显示内容时只需要改变Model即可。

设置常值:

如方法一生成,设置一个字符串常量即可。

设置变量值:

如方法二生成,从数据库或其它数据集中得到变量再将设置Model即可。

取值:

只需要对Model取值即可:

nameModel.getObject().toString()

不使用Model时不能取得文本内容!

--------------------------------------------------------------------------------------------

多行文本控件(MultiLineLabel) 

在Label中设置了换行符<br/>,在客户端仍然原样输出,即:123<br/>45m,使用/n则html端不显示,所以想要输出多行文本就要使用MultiLineLabel。

java:

nameModel.setObject("123/n45");

this.add(new MultiLineLabel("lbTest",nameModel));

取值和Label相同。

--------------------------------------------------------------------------------------------

表单控件(Form) 

表单控件中最重要的莫过于submit的事件处理。

html:

 <form wicket:id="form">

            <span wicket:id="lbName"></span><p/>

            <input type="submit" value="提交"/>

        </form>

java:

Form form = new Form("form") {

            @Override

            protected void onSubmit() {

                String str = txtNameModel.getObject().toString();

                lbNameModel.setObject(upperAction.execute(str));

            }

        };

        this.add(form);

        form.add(new Label("lbName", lbNameModel));

在Form声明的时候重写onSubmit方法。

注:根据html页面中标志的层次,form 内的控件在java代码中一定要添加至form中,即form.add。

-------------------------------------------------------------

下拉框(DropDownChoices),单选按钮组(RadioChoice) 

这两个控件使用方法相同,都只能从一组中选择一项。

html:

<span wicket:id="raVisible"></span>

java:

//使用List设置控件的text

List lsVisible = Arrays.asList(new String[]{"显示", "不显示"});

raVisible = new RadioChoice("raVisible", visibleModel, lsVisible).setSuffix(" ");        //设置后缀为空字串可以横向显示

form.add(raVisible);

//设置value

raVisible.setModelValue(new String[]{"1", "0"});

//初始值

使用 visibleModel.setObject();可设置初始值。

如:visibleModel.setObject("显示");

//赋值

前面已经初始化好了控件,所以赋值时只需要将Model的值设置一下即可

//取值

取得Model的值即可,使用:

value = visibleModel.getObject().toString().equals("显示") ? 1 : 0;

从数据库中取出一组不确定的值可如下设置:

  private List lsSystemObject = new ArrayList();

    private Map mapSystemObject = new HashMap();

    private IChoiceRenderer renderer = new ChoiceRenderer() {

        @Override

        public Object getDisplayValue(Object object) {

            return mapSystemObject.get(object);

        }

    };

  List listAllSystemObject = getAllSystemObject();

        for (int i = 0; i < listAllSystemObject.size(); i++) {

            SystemObject sysObject = (SystemObject) listAllSystemObject.get(i);

            lsSystemObject.add(sysObject.getSystemID().toString());

            mapSystemObject.put(sysObject.getSystemID().toString(), sysObject.getSystemName());

        }

        ddcSystemObject = new DropDownChoice("ddcSystemObject", systemIDModel, lsSystemObject, renderer);

        form.add(ddcSystemObject);

设置初始值:

systemIDModel.setObject("100");

设置选中值:

从数据库中取得的值,让其在控件中表现为选中,

systemIDModel.setObject(menu.getSystemID().toString()); 

注:Model中的值的类型要和List中保持一致。

取值:

依然是从Model中取值,

Integer logTypeID = Integer.valueOf(logTypeIDModel.getObject().toString());

注:DropDownChoice控件则需要在html端声明为select,不能使用span.

--------------------------------------------------

复选框组(CheckBoxMultipleChoice) 

用list来装所有取出的数据,然后设置一下Model的值即可。下面的例子是一个测试项目,用于设置菜单和动作的关联:

html:

java:

private CheckBoxMultipleChoice cbcmOperateCode;

private Model operateCodeModel = new Model();

    private List lsCode = new ArrayList();

    private Map mapCode = new HashMap();

    private Integer menuID;

    IChoiceRenderer renderer = new ChoiceRenderer() {

        @Override

        public Object getDisplayValue(Object object) {

            return mapCode.get(object);

        }

    };

operateCodeModel.setObject((Serializable) getMenuOpreateCodeByMenuID(getMenuID()));

 cbcmOperateCode = new CheckBoxMultipleChoice("cbcmOperateCode", operateCodeModel, lsCode, renderer);

        add(cbcmOperateCode);

//取到数据置入list中

 private List getMenuOpreateCodeByMenuID(int menuID) {

        SysRefOperateMenuDAO refDao = new SysRefOperateMenuDAO();

        List lsOMenu = new ArrayList();

        try {

            List list = refDao.getAllSysRefOperateMenu(menuID);

            for (int i = 0; i < list.size(); i++) {

                SysRefOperateMenu omenu = (SysRefOperateMenu) list.get(i);

                lsOMenu.add(omenu.getOperateCode());

            }

        } catch (Exception ex) {

            ex.printStackTrace();

        }

        return lsOMenu;

    }

设置值 :

将值放入到List中,然后执行序列化操作。

operateCodeModel.setObject((Serializable) getMenuOpreateCodeByMenuID(getMenuID()));

取值:

List lsOperateCode = (List) operateCodeModel.getObject();

                for (int i = 0; i < lsOperateCode.size(); i++) {

                    lsOperateCode.get(i).toString();

                }

--------------------------------------------------

密码控件(Password) 

此控件的生成和取值都比较简单,只是在赋值的时候《指南》中并没有提到。

html:

<input type="text" wicket:id="txtPassword">

java:

PasswordTextField pwf = new PasswordTextField("txtPassword", passwordModel);

pwf.setResetPassword(false);

初值:

设置完passwordModel的值后需要对控件进行设置以原密码而不是空:

pwf.setResetPassword(false);

-----------------------------------------

日期控件(DatePicker) 

常用方法是将日期控件添加到一个文本框中,这样点选日期后文本框中将会显示日期,并且可以手动在文本框中进行日期的修改。

html:

<input type="text" wicket:id="txtRegisterDate" />

java:

DateTextField date = new DateTextField("txtRegisterDate", registerDateModel, "yyyy-MM-dd");

        date.setRequired(true);

        DatePicker dp = new DatePicker();

        date.add(dp);

        form.add(date);

"yyyy-MM-dd"用于格式化日期,但此控件只能取到日期而不能取到时间。

取值 :

取值时要注意,Model中的值要进行转换.

DateFormat tmpYearFormat = new SimpleDateFormat("yyyy-MM-dd");

String strRegisterDate = tmpYearFormat.format(registerDateModel.getObject()) + strRegDate;

Date registerDate = dateFormat.parse(strRegisterDate);

-----------------------------------------------------------------

树控件(TreeTable): 

这个控件比较复杂,将树和表格集成到了一起。需要注意几点:1、列的显示  ;2、父子结点的生成;3、结点点击事件的处理。

1.使用IColumn定义要显示的列: 

 private IColumn columns[] = new IColumn[]{new PropertyTreeColumn(new ColumnLocation(Alignment.LEFT, 180, Unit.PX), "菜单名称", "userObject.name"),

        new PropertyRenderableColumn(new ColumnLocation(Alignment.MIDDLE, 1, Unit.PROPORTIONAL), "菜单ID", "userObject.menuID"),

        new PropertyRenderableColumn(new ColumnLocation(Alignment.MIDDLE, 5, Unit.PROPORTIONAL), "编码", "userObject.code"),

        new PropertyRenderableColumn(new ColumnLocation(Alignment.RIGHT, 350, Unit.PX), "链接地址", "userObject.linkAddress"),};

2.树控件所使用的Model是它自己的TreeModel

我的方法从数据集中做递归取出父子关系的同时向TreeModel中添加结点:

private TreeModel treeModel;

实现:

treeModel = buildTreeModel(rootMenuID, "");

 /**

     * 得到TreeTable可使用的树结构

     */

    private TreeModel buildTreeModel(int parentID, String type) {

        recursionSysMenu(rootNode, parentID, type);

        return new DefaultTreeModel(rootNode);

    }

    /**

     * 取得层次关系

     */

    private void recursionSysMenu(DefaultMutableTreeNode rtNode, int parentID, String type) {

        List sysMenuList = new ArrayList();

        sysMenuList = getSubSysMenuByParent(parentID, type);

        for (int i = 0; i < sysMenuList.size(); i++) {

            SysMenu sysmenu = new SysMenu((SysMenu) sysMenuList.get(i));

            DefaultMutableTreeNode parentNode = new DefaultMutableTreeNode(sysmenu);

            rtNode.add(parentNode);

            //递归生成子菜单

            recursionSysMenu(parentNode, ((SysMenu) sysMenuList.get(i)).getMenuID(), type);

        }

    }

这样就可以生成一棵树了,如下:

html:

<p wicket:id="treeTable"></p>

java:

TreePage treePage = new TreePage("view");

tree = new TreeTable("treeTable", treePage.getTreeModel(), columns);

this.add(tree);

3.结点点击处理:

在定义的时候需要重写onNodeLinkClicked方法:

 TreePage treePage = new TreePage("view");

        tree = new TreeTable("treeTable", treePage.getTreeModel(), columns) {

            @Override

            protected void onNodeLinkClicked(AjaxRequestTarget target, TreeNode node) {

                SysMenu menu = (SysMenu) ((DefaultMutableTreeNode) node).getUserObject();

                SysMenuEditContainer page = new SysMenuEditContainer(menu.getMenuID().toString());

                setResponsePage(page);

                getTreeState().selectNode(node, true);

                super.onNodeLinkClicked(target, node);

            }

        };

        tree.setRootLess(true);

        tree.getTreeState().expandAll();

        tree.setLinkType(LinkType.REGULAR);

        add(tree);

tree.getTreeState().expandAll();//是将树的结点全部展开

setLinkType:点击时链接的方式,上面的方面是会刷新的,如果想不刷新可以使用AJAX,但具体没研究过。

Tags:WI IC CK KE 
作者:网络 来源:always007的