如何创建选项卡 - Jquery或JSF [英] How to create tabs - Jquery or JSF

问题描述

我想用标签创建JSF页面。有点像

并放置 jquery-1.7.1_.min.js 和 jquery-ui-1.8.18.custom.min.js in WebContent\resources\js 和 jquery-ui-1.8.18.custom.css in WebContent\resources\css

现在转到其他文件......

myTabs.xhtml

 <！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：ui =http://java.sun.com/jsf/facelets
 xmlns：h =http://java.sun.com/jsf/html
 xmlns：f =http://java.sun.com/jsf/core
 xmlns：c = http://java.sun.com/jsp/jstl/core > 
< h：head> 
< h：outputScript library =jsname =jquery-1.7.1_.min.jstarget =head/> 
< h：outputScript library =jsname =jquery-ui-1.8.18.custom.min.jstarget =head/> 
< h：outputStylesheet library =cssname =jquery-ui-1.8.18.custom.csstarget =head/> 
< h：outputScript library =jsname =mytabs.jstarget =head/> 
< / h：head> 
< h：body> 
 
< f：view> 
< h：form prependId =false> 
< h：panelGroup id =tabslayout =block> 
< ul> 
< c：forEach items =＃{myTabs.tabs}var =tab> 
< li>< a href =## {tab.tabid}onclick =$（'＃button _＃{tab.tabid}'）。click（）>＃{tab.tabid }< / A>< /锂> 
< h：commandButton id =button _＃{tab.tabid}value =TabClickaction =＃{myTabs.switchPages（tab.tabid）}style =display：none> 
< f：ajax render =tabs>< / f：ajax> 
< / h：commandButton> 
< / c：forEach> 
< / ul> 
 
< c：forEach items =＃{myTabs.tabs}var =tab> 
< h：panelGroup id =＃{tab.tabid}layout =blockrendered =＃{tab.tabid eq myTabs.selectedTab}> 
< ui：include src =＃{tab.tabfilename}>< / ui：include> 
< / h：panelGroup> 
< / c：forEach> 
< / h：panelGroup> 
< / h：form> 
< / f：view> 
< / h：body> 
< / html> 
  

MyTabs.java

 包装; 
 
 import java.util.ArrayList; 
 import java.util.List; 
 
 import javax.annotation.PostConstruct; 
 import javax.faces.bean.ManagedBean; 
 import javax.faces.bean.SessionScoped; 
 
 @ManagedBean 
 @SessionScoped 
公共类MyTabs {
 
 @PostConstruct 
 public void init（）{
 tabs = new ArrayList< MyTabObject>（）; 
 tabs.add（new MyTabObject（tab1.xhtml，tab1））; 
 tabs.add（new MyTabObject（tab2.xhtml，tab2））; 
 tabs.add（new MyTabObject（tab3.xhtml，tab3））; 
 
} 
 String selectedTab =tab1; 
 
 public String getSelectedTab（）{
 return selectedTab; 
} 
 
 public void setSelectedTab（String selectedTab）{
 this.selectedTab = selectedTab; 
} 
 
 public String switchPages（String selTab）{
 selectedTab = selTab; 
返回myTabs.xhtml; 
} 
 
 
列表< MyTabObject>标签; 
 
 
 public List< MyTabObject> getTabs（）{
返回标签; 
} 
 
 public void setTabs（List< MyTabObject> tabs）{
 this.tabs = tabs; 
} 
 
 
} 
  

MyTabObject

  package pack; 
 
 
 
公共类MyTabObject {
 
 
 String tabfilename; 
 String tabid; 
 public String getTabfilename（）{
 return tabfilename; 
} 
 public void setTabfilename（String tabfilename）{
 this.tabfilename = tabfilename; 
} 
 public String getTabid（）{
 return tabid; 
} 
 public void setTabid（String tabid）{
 this.tabid = tabid; 
} 
 public MyTabObject（String tabfilename，String tabid）{
 super（）; 
 this.tabfilename = tabfilename; 
 this.tabid = tabid; 
} 
 
} 
  

Tab1Page，（Tab2Page和Tab3Page完全相同，只需更改所有地方的数字）

  package pack; 
 
 import java.io.Serializable; 
 import java.text.Format; 
 import java.text.SimpleDateFormat; 
 import java.util.Date; 
 
 import javax.annotation.PostConstruct; 
 import javax.annotation.PreDestroy; 
 import javax.faces.bean.ManagedBean; 
 import javax.faces.bean.ViewScoped; 
 
 @ManagedBean 
 @ViewScoped 
公共类Tab1Page实现Serializable {
 
 / ** 
 * 
 * / 
 private static final long serialVersionUID = 254415216070877770L; 
 //常量
 public final static String hashKey =tab1PageTab; 
 public String actionString =; 
 
 @PostConstruct 
 public void post（）{
 Format formatter; 
日期日期=新日期（）; 
 
 // Time formate 01:12:53 AM 
 formatter = new SimpleDateFormat（hh：mm：ss a）; 
 tabName = formatter.format（date）; 
 System.out.println（Tab1Page\t+ tabName +\t @ PostConstruct ...）; 
} 
 
 @PreDestroy 
 public void destroy（）{
 Format formatter; 
日期日期=新日期（）; 
 
 // Time formate 01:12:53 AM 
 formatter = new SimpleDateFormat（hh：mm：ss a）; 
 tabName = formatter.format（date）; 
 System.out.println（Tab1Page\t+ tabName +\t @ PreDestroy ...）; 
} 
 
 
 String tabName; 
 
 public String getTabName（）{
返回this.getClass（）。getName（）。substring（this.getClass（）。getName（）。lastIndexOf（。））+ \t+ TABNAME; 
} 
 public void setTabName（String tabName）{
 this.tabName = tabName; 
} 
 
 public String getActionString（）{
 return actionString; 
} 
 
 public void setActionString（String actionString）{
 this.actionString = actionString; 
} 
 
} 
  

tab1.xhtml（ tab2.xhtml和tab3.xhtml完全相同 - 只需替换数字）

 <！DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Transitional // EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> 
< ui：composition xmlns =http://www.w3.org/1999/xhtml
 xmlns：ui =http://java.sun.com/jsf/facelets
 xmlns：h =http://java.sun.com/jsf/html
 xmlns：f =http://java.sun.com/jsf/core
 xmlns ：C = http://java.sun.com/jsp/jstl/core > 
 
< h：panelGroup> 
< h：form> 
< h：outputText value =＃{tab1Page.tabName}/> 
< / h：form> 
< / h：panelGroup> 
< / ui：composition> 
  

和最后一个文件

mytabs.js（将其放在WebContent\resources\js中）

  $（文档）。 ready（function（）{
 $（＃tabs）。tabs（）; 
}）; 
 
 $（窗口）.load（function（）{
 jsf.ajax.addOnEvent（function（data）{
 if（data.status ===success） {
 $（＃tabs）。tabs（）; 
} 
}）; 
}）; 
  

为了使用会话范围豆：

MyTabs.java 中的方法 switchPages 应为 void 并且不返回任何内容，例如

  public void switchPages（String selTab）{
 selectedTab = selTab; 
} 
  

I want to create JSF page with tabs. Something like this. But I wonder if I choose to do this with Jquery can I implement lazy loading - when I click a tab on the JSF page the content is generated when the tab is opened. Is it possible to implement lazy loading of tabs in pure JSF? And I suppose that I can easily implement AJAX in both cases.

Best wishes

解决方案

Note: If you want your tabs beans be Session Scope then read instructions in the buttom of the Answer...

Since you are don't want to use any third party Libarary here is a PureJSF + jQuery example

JSF + Jquery + Ajax Lazy Loading + View Scope Beans Example...

B.T.W here is how it looks like eventually :

You can look at the web server console for the print outs of @PostConstruct and the @PreDestroy when you click on each tab...

The content of the tab - the xhtml page and its bean will be loaded upon tab click (Lazy Loading) and will be destroyed upon click on other tab,

I suggest you to create a new project and slowly place all the files inside it and start playing and looking into it... its 100% working , but I placed some print outs just to see that it is really working...

The Example is very simple and straight forward....

First Of all go to jQueryUI and download it(1.8.18)

and place jquery-1.7.1_.min.js and jquery-ui-1.8.18.custom.min.js in WebContent\resources\js and jquery-ui-1.8.18.custom.css in WebContent\resources\css

Now to the other files...

myTabs.xhtml

<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
 <h:outputScript library="js" name="jquery-1.7.1_.min.js" target="head" />
 <h:outputScript library="js" name="jquery-ui-1.8.18.custom.min.js" target="head" />
 <h:outputStylesheet library="css" name="jquery-ui-1.8.18.custom.css" target="head"     />
 <h:outputScript library="js" name="mytabs.js" target="head" />
</h:head>
<h:body>

<f:view>
    <h:form prependId="false">
        <h:panelGroup id="tabs" layout="block">
            <ul>
                <c:forEach items="#{myTabs.tabs}" var="tab">
                    <li><a href="##{tab.tabid}" onclick="$('#button_#{tab.tabid}').click()">#{tab.tabid}</a></li>
                    <h:commandButton id="button_#{tab.tabid}" value="TabClick" action="#{myTabs.switchPages(tab.tabid)}" style="display:none">
                        <f:ajax render="tabs"></f:ajax>
                    </h:commandButton>  
                </c:forEach>
            </ul>

            <c:forEach items="#{myTabs.tabs}" var="tab">
                <h:panelGroup id="#{tab.tabid}" layout="block" rendered="#{tab.tabid eq myTabs.selectedTab}">
                    <ui:include src="#{tab.tabfilename}"></ui:include>
                </h:panelGroup>
            </c:forEach>
        </h:panelGroup>
    </h:form>
</f:view>
</h:body>
</html>

MyTabs.java

package pack;

import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class MyTabs{

@PostConstruct
public void init(){
    tabs = new ArrayList<MyTabObject>();
    tabs.add(new MyTabObject("tab1.xhtml", "tab1"));
    tabs.add(new MyTabObject("tab2.xhtml", "tab2"));
    tabs.add(new MyTabObject("tab3.xhtml", "tab3"));

}
String selectedTab="tab1";

public String getSelectedTab() {
    return selectedTab;
}

public void setSelectedTab(String selectedTab) {
    this.selectedTab = selectedTab;
}

public String switchPages(String selTab) {
    selectedTab = selTab;
    return "myTabs.xhtml";
}


List<MyTabObject> tabs;


public List<MyTabObject> getTabs() {
    return tabs;
}

public void setTabs(List<MyTabObject> tabs) {
    this.tabs = tabs;
}


}

MyTabObject

package pack;



public class MyTabObject{


String tabfilename;
String tabid;
public String getTabfilename() {
    return tabfilename;
}
public void setTabfilename(String tabfilename) {
    this.tabfilename = tabfilename;
}
public String getTabid() {
    return tabid;
}
public void setTabid(String tabid) {
    this.tabid = tabid;
}
public MyTabObject(String tabfilename, String tabid) {
    super();
    this.tabfilename = tabfilename;
    this.tabid = tabid;
}

}

Tab1Page , (Tab2Page and Tab3Page are exactly the same , just change the number in all places)

package pack;

import java.io.Serializable;
import java.text.Format;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.annotation.PostConstruct;
import javax.annotation.PreDestroy;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class Tab1Page implements Serializable{

/**
 * 
 */
private static final long serialVersionUID = 254415216070877770L;
// Constants
public final static String hashKey = "tab1PageTab";
public String actionString = "";

@PostConstruct
public void post(){
  Format formatter;
  Date date = new Date();

  // Time formate 01:12:53 AM
  formatter = new SimpleDateFormat("hh:mm:ss a");
  tabName = formatter.format(date);
    System.out.println("Tab1Page\t"+tabName+"\t@PostConstruct...");
}

@PreDestroy
public void destroy(){
  Format formatter;
  Date date = new Date();

  // Time formate 01:12:53 AM
  formatter = new SimpleDateFormat("hh:mm:ss a");
  tabName = formatter.format(date);
    System.out.println("Tab1Page\t"+tabName+"\t@PreDestroy...");
}


String tabName;

public String getTabName() {
    return this.getClass().getName().substring(this.getClass().getName().lastIndexOf("."))+"\t"+tabName;
}
public void setTabName(String tabName) {
    this.tabName = tabName;
}

public String getActionString() {
    return actionString;
}

public void setActionString(String actionString) {
    this.actionString = actionString;
}

}

tab1.xhtml (tab2.xhtml and tab3.xhtml are exactly the same - just replace the numbers)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html" 
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:panelGroup>
    <h:form>
        <h:outputText value="#{tab1Page.tabName}" />
    </h:form>
</h:panelGroup>
</ui:composition>

and to the last file

mytabs.js (place it in WebContent\resources\js)

$(document).ready(function () { 
    $("#tabs").tabs();
});

$(window).load(function() {
    jsf.ajax.addOnEvent(function (data) {
        if (data.status === "success") {
                $("#tabs").tabs();
        }
    });
});

In order to use Session Scope Beans:

The method switchPages in MyTabs.java should be void and not to return anything, like this

    public void switchPages(String selTab) {
    selectedTab = selTab;
}

这篇关于如何创建选项卡 - Jquery或JSF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！