JSF抽屉式菜单的实现
主要是使用<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是多对一得关系。。。。。这我就不多说了想必大家也都能理解。。效果见附件。