主要是使用<layout:accordionLayout/>控件实现效果,话不多说,直接上代码:
<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
xmlns:w="http://www.apusic.com/jsf/widget" xmlns:layout="http://www.apusic.com/jsf/layout"
xmlns:h="http://java.sun.com/jsf/html" xmlns:ajax="http://www.apusic.com/jsf/ajax"
xmlns:ui="http://java.sun.com/jsf/facelets" renderKitId="AJAX">
<w:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<w:stylesheet src="resources/css/style.css"></w:stylesheet>
</w:head>
<w:page title="Insert title here">
<layout:borderLayout fitToBody="true">
<layout:panel region="north" autoHeight="true" border="false">
<ui:include src="header.xhtml"></ui:include>
</layout:panel>
<layout:panel region="west" width="200" title="菜单" split="true" border="false" collapsible="true">
<layout:accordionLayout id="layout" animate="true" fit="true" border="false"></layout:accordionLayout>
</layout:panel>
<layout:panel region="center" title="center" fit="true">
<w:iframe style="width: 100%; height: 100%" id="frame" src="workspace.xhtml" name="content" frameborder="no" />
</layout:panel>
<layout:panel region="south" autoHeight="true" border="false">
<ui:include src="footer.xhtml" />
</layout:panel>
</layout:borderLayout>
</w:page>
</f:view>
package com.ahsl.index;
import java.util.List;
import javax.faces.application.Application;
import javax.faces.component.html.HtmlGraphicImage;
import javax.faces.component.html.HtmlOutputLink;
import javax.faces.component.html.HtmlOutputText;
import javax.faces.context.FacesContext;
import org.operamasks.faces.annotation.BeforeRender;
import org.operamasks.faces.annotation.Bind;
import org.operamasks.faces.annotation.Inject;
import org.operamasks.faces.annotation.ManagedBean;
import org.operamasks.faces.annotation.ManagedBeanScope;
import org.operamasks.faces.component.layout.impl.UIAccordionLayout;
import org.operamasks.faces.component.layout.impl.UIPanel;
import com.ahsl.index.enities.Function;
import com.ahsl.index.enities.Functiontype;
import com.ahsl.index.service.IFunctionService;
import com.ahsl.index.service.IFunctiontypeService;
@ManagedBean(name = "AccordionLayoutBean", scope = ManagedBeanScope.REQUEST)
public class AccordionLayoutBean {
@Inject(value="functionSpringService")
private IFunctionService fs;
@Inject(value="functiontypeSpringService")
private IFunctiontypeService fts;
@Bind
private UIAccordionLayout layout;
@BeforeRender
public void beforeRender(boolean isPostback) {
FacesContext context = FacesContext.getCurrentInstance();
Application app = context.getApplication();
List<Functiontype> ftlist=fts.findAll();
for (Functiontype ft:ftlist) {
UIPanel panel = (UIPanel) app
.createComponent(UIPanel.COMPONENT_TYPE);
panel.setTitle(ft.getName());
List<Function> flist=fs.findByTypeID(ft.getUid());
for (Function fun:flist) {
HtmlOutputLink hOL = (HtmlOutputLink) app
.createComponent(HtmlOutputLink.COMPONENT_TYPE);
hOL.setValue(fun.getFunCode());
hOL.setTarget("content");
hOL.setStyle("color: #0078C2;text-decoration: none;margin: 6px 3px;font-size: 14px;font-weight: bold;");
// 显示图标
// if (hnode.getImage() != null) {
// HtmlGraphicImage image = (HtmlGraphicImage) app
// .createComponent(HtmlGraphicImage.COMPONENT_TYPE);
// image.setUrl(hnode.getImage());
// image.setStyle("margin: 0px 10px;");
// hOL.getChildren().add(image);
// }
// 显示文字
HtmlOutputText text = (HtmlOutputText) app
.createComponent(HtmlOutputText.COMPONENT_TYPE);
String txt = fun.getName() + "<br/>";
text.setValue(txt);
text.setEscape(false);
hOL.getChildren().add(text);
panel.getChildren().add(hOL);
}
layout.getChildren().add(panel);
}
}
}
其中funciton和functiontype是多对一得关系。。。。。这我就不多说了想必大家也都能理解。。效果见附件。