您的位置：首页 > Web前端 > JavaScript

JSF2.xdatatable分页控件与左侧菜单最简单应用

2012-11-23 16:56 330 查看
　　　JSF2.xdatatable分页控件与左侧菜单最简单应用

　　JSF2.x，功能强大，使用方便。全世界使用JSF的人越来越多。而且也有很多很好的控件给发出来了，如：richfaces、primefaces、myfaces等，就日前来讲primefaces功能很强大，控件很多，但有一点不好就是不支持IE6，特别是下拉列表，p:dialog等，其它的分页p:datatable实际使用起来总有不如意的地方。richfaces还支持可视化开发，可惜就是控件开发进度相比其它的慢了很多。下面帖我的控件的使用方法：

　　下载地址：http://download.csdn.net/detail/ptianfeng/4816928

一、分页具体使用方法如下(不多说，直接给你些颜色看看)：

1. xhtml文件：　

　　<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:ems="http://www.ems.com.cn"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:ui="http://java.sun.com/jsf/facelets">

<h:dataTable id="tableId" value="#{userlogMBean.defaultDataModel}"

var="var" rows="10">

<h:column>

<f:facet name="header">

<h:outputText value="" />

</f:facet>

<h:outputText value="#{var.sqlid}" style="display:none;" />

</h:column>

</h:dataTable>

<ems:page id="pageId" for="tableId" maxPage="5" />

2.　相应的Managedbean:

/**
*   EMS 11185 限时未达邮费奉还
* @author 螃蟹
*/
@SuppressWarnings(value = "serial")
@ManagedBean(name = "userlogMBean")
@ViewScoped()
public class UserlogMBean extends PageListBaseBean implements Serializable {

public PagedListDataModel getDefaultDataModel() {
if (defaultDataModel == null) {
defaultDataModel = new PagedListDataModel(pageSize) {
public DataPage fetchPage(int startRow, int pageSize) {
ArrayList<UserlogVo> dataList = new ArrayList<UserlogVo>();
List<Userlog> list = dao.getObjectList(jpql, pageSize,
startRow);
if (list != null) {
for (Userlog u : list) {
UserlogVo vo = new UserlogVo();
vo.setSqlid(u.getSqlid());
vo.setCode(u.getCode());
vo.setDate(u.getDate());
vo.setStation(u.getStation());
vo.setUserid(u.getUserid());
vo.setText(u.getText());
dataList.add(vo);
}
}
int size = dao.getCountOption(jpql);
DataPage dataPage = new DataPage(size, startRow, dataList);
return dataPage;
}
};
}
return defaultDataModel;
}
}


提示：关于PageListBaseBean更多的信息，可以参阅我在百度的blog（百度改版后，让我很QF，所以转到CSDN来了）：

http://hi.baidu.com/kittopang/item/19af4e37c6ede2fae6bb7a11

　　至此，分页已经实现。下面是使用截图：



二、左侧菜单：

1. xhtml文件：

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:e="http://www.ems.com.cn">

<h:head>

</h:head>

<ui:composition>

<h:form id="menuFormId">

<div style="text-align:center; width:220px; height:500px; border-right-style:solid; border-right-color: Green; border-right-width: 2px; ">

<f:facet name="header">

<h:outputText value="系统功能菜单" style="font-size: 18px"/>

</f:facet>

<h:commandButton action="users" value="查看用户"/>

<h:commandButton action="userlog" value="查看日志"/>

<a href="http://localhost:8080/r/index.jsp">主页</a>

<e:menu value="#{menuBean.model}"></e:menu>

</div>

</h:form>

</ui:composition>

</html>

提示：<e:menu value="#{menuBean.model}"></e:menu>中的menuBean是你自己定义的managedbean，model为MenuModel在menuBean中的实例；

。

2.　相应的Managedbean:

/**
* EMS 11185 限时未达邮费奉还
*
* @author 螃蟹
*/
@SuppressWarnings(value = "serial")
@ManagedBean(name = "menuBean")
@SessionScoped
public class MenuBean implements Serializable {

MenuModel model;

public MenuModel getModel() {
return model;
}

public MenuBean() {
MenuItem mi;
model = new MenuModel();
model.setTitle("系统菜单");
MenuSub ms = new MenuSub();
ms.setValue("消息管理");
mi = new MenuItem();
mi.setUrl("users");
mi.setValue("添加消息");
ms.getChildren().add(mi);
mi = new MenuItem();
mi.setUrl("users");
mi.setValue("删除消息");
ms.getChildren().add(mi);
MenuSub sub = new MenuSub();
sub.setValue("消息审查");
mi = new MenuItem();
mi.setUrl("users");
mi.setValue("添加审查");
sub.getChildren().add(mi);
mi = new MenuItem();
mi.setUrl("users");
mi.setValue("删除审查");
sub.getChildren().add(mi);
ms.getChildren().add(sub);
model.addSubmenu(ms);
ms = new MenuSub();
ms.setValue("设备管理");
mi = new MenuItem();
mi.setUrl("users");
mi.setValue("设备进口");
ms.getChildren().add(mi);
mi = new MenuItem();
mi.setUrl("users");
mi.setValue("设备下发");
ms.getChildren().add(mi);
model.addSubmenu(ms);
ms = new MenuSub();
ms.setValue("用户日志");
mi = new MenuItem();
mi.setUrl("users");
mi.setValue("查看用户");
ms.getChildren().add(mi);
mi = new MenuItem();
mi.setUrl("userlog");
mi.setValue("查看日志");
ms.getChildren().add(mi);
model.addSubmenu(ms);
}
}


这种方法是通过redirect跳转。

三、左侧菜单action事件跳转：

1. xhtml文件：

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:e="http://www.ems.com.cn">

<h:head>

</h:head>

<ui:composition>

<h:form id="menuFormId">

<div style="text-align:center; width:220px; height:500px; border-right-style:solid; border-right-color: Green; border-right-width: 2px; ">

<f:facet name="header">

<h:outputText value="系统功能菜单" style="font-size: 18px"/>

</f:facet>

<h:commandButton action="users" value="查看用户"/>

<h:commandButton action="userlog" value="查看日志"/>

<a href="http://localhost:8080/r/index.jsp">主页</a>

<e:menu value="#{menuBean.model}" action="#{menuBean.navigationAction}"></e:menu>

</div>

</h:form>

</ui:composition>

</html>

　　提示：<e:menu value="#{menuBean.model}" action="#{menuBean.navigationAction}"></e:menu>中的menuBean是你自己定义的managedbean，

并且要extends　EMS11185MenuBean；　action="#{menuBean.navigationAction}"，这个内容你必需不能更改（或者说你无需更改）直接用在你的<e:menu />标签中。

2.　相应的Managedbean:

/**
*   EMS 11185 限时未达邮费奉还
* @author 螃蟹
*/
@SuppressWarnings(value = "serial")
@ManagedBean(name = "menuBean")
@SessionScoped
public class MenuBean extends EMS11185MenuBean implements Serializable{

public MenuBean(){
MenuItem mi;
model = new MenuModel();
model.setTitle("系统菜单");
MenuSub ms = new MenuSub();
ms.setValue("消息管理");

mi = new MenuItem();
mi.setUrl("users");
mi.setValue("添加消息");
ms.getChildren().add(mi);

mi = new MenuItem();
mi.setUrl("users");
mi.setValue("删除消息");
ms.getChildren().add(mi);

MenuSub sub = new MenuSub();
sub.setValue("消息审查");

mi = new MenuItem();
mi.setUrl("users");
mi.setValue("添加审查");
sub.getChildren().add(mi);

mi = new MenuItem();
mi.setUrl("users");
mi.setValue("删除审查");
sub.getChildren().add(mi);

ms.getChildren().add(sub);

model.addSubmenu(ms);

ms = new MenuSub();
ms.setValue("设备管理");

mi = new MenuItem();
mi.setUrl("users");
mi.setValue("设备进口");
ms.getChildren().add(mi);

mi = new MenuItem();
mi.setUrl("users");
mi.setValue("设备下发");
ms.getChildren().add(mi);

model.addSubmenu(ms);

ms = new MenuSub();
ms.setValue("用户日志");

mi = new MenuItem();
mi.setUrl("users");
mi.setValue("查看用户");
ms.getChildren().add(mi);

mi = new MenuItem();
mi.setUrl("userlog");
mi.setValue("查看日志");
ms.getChildren().add(mi);

model.addSubmenu(ms);
}

}


3. EMS11185MenuBean代码：

@SuppressWarnings("serial")
public class EMS11185MenuBean implements Serializable{
protected MenuModel model;
private String navigation;

public MenuModel getModel() {
return model;
}

public void setModel(MenuModel model) {
this.model = model;
}

public String navigationAction(){
return navigation;
}

public void setNavigation(String navigation) {
this.navigation = navigation;
}
}


　　至此，左侧菜单已经实现。下面是使用截图：










                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航