Primefaces选项卡，TabMenu，TabView，TagCloud
时间：2020-02-23 14:41:40 来源:igfitidea点击:
Primefaces实现为您提供了大量用于不同目的的组件。
本教程将重点介绍以下这些组件：
选项卡：是其他Primefaces组件使用的通用容器组件，例如tabView和AccordionPanel。
TabMenu：是一个导航组件，将菜单项显示为选项卡。
TabView：是一个容器组件，用于将选项卡中的内容分组。
TagCloud：显示具有不同强度的标签的集合。
让我们开始描述这些组件并查看它们的特色方面。
标签基本信息
如前所述，Tab不是可以单独使用的单独组件。
它与AccordionPanel和TabView独立使用。
| Tag | Tab |
|---|---|
| Component Class | org.primefaces.component.TabView.Tab |
| Component Type | org.primefaces.component.Tab |
| Component Family | org.primefaces.component |
标签属性
| Name | Default | Type | Description |
|---|---|---|---|
| id | null | String | Unique identifier of the component. |
| rendered | true | Boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered. |
| binding | null | Object | An el expression that maps to a server side UIComponent instance in a backing bean. |
| title | null | Boolean | Title text of the tab |
| titleStyle | null | String | Inline style of the tab. |
| titleStyleClass | null | String | Style class of the tab. |
| disabled | false | Boolean | Disables tab element. |
| closable | false | Boolean | Makes the tab closable when enabled. |
| titletip | null | String | Tooltip of the tab header. |
您已经有使用AccordionPanel的经验，接下来的小节将讨论TabView。
TabMenu基本信息
TabMenu是一个导航组件，将菜单项显示为选项卡。
| Tag | TabMenu |
|---|---|
| Component Class | org.primefaces.component.tabmenu.TabMenu |
| Component Type | org.primefaces.component.TabMenu |
| Component Family | org.primefaces.component |
| Renderer Type | org.primefaces.component.TabMenuRenderer |
| Renderer Class | org.primefaces.component.tabmenu.TabMenuRenderer |
TabMenu属性
| Name | Default | Type | Description |
|---|---|---|---|
| id | null | String | Unique identifier of the component |
| rendered | true | Boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered. |
| binding | null | Object | An el expression that maps to a server side UIComponent instance in a backing bean |
| model | null | MenuModel | MenuModel instance to build menu dynamically. |
| style | null | String | Inline style of the component. |
| styleClass | null | String | Style class of the component. |
| activeIndex | 0 | Integer | Index of the active tab. |
| widgetVar | null | String | Name of the client side widget. |
TabMenu入门
TabMenu需要menuitems作为子组件，每个menuitem都呈现为一个选项卡。
Menuitem可用于发起ajax，non-ajax和GET请求，因为它已经讨论过不同类型的Menu组件。
index.xhtml
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:500px;">
<p:growl id="message"></p:growl>
<p:tabMenu id="tabMenu" activeIndex="#{tabMenuManagedBean.index}">
<p:menuitem value="GET Request" url="https://www.theitroad.local/dev/primefaces"></p:menuitem>
<p:menuitem value="Ajax Request" action="#{tabMenuManagedBean.doSomeWork}" update="tabMenu message"></p:menuitem>
</p:tabMenu>
</h:form>
</html>
TabMenuManagedBean.java
package com.theitroad.prime.faces.beans;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
@ManagedBean
@SessionScoped
public class TabMenuManagedBean {
private int index = 0;
public int getIndex() {
return index;
}
public void setIndex(int index) {
this.index = index;
}
public String doSomeWork(){
//Do some work
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Some Work Achieved"));
//Change the index that TabMenu refers as activated tab
index = 1;
return "";
}
}
这是上述示例的详细说明：
菜单项可用于生成GET，Ajax，非Ajax和内部应用程序请求。
TabMenu使用activeIndex属性来确定显示组件后应呈现哪个选项卡。
TabView基本信息
TabView是一个容器组件，用于将选项卡中的内容分组。
| Tag | TabView |
|---|---|
| Component Class | org.primefaces.component. tabview.TabView |
| Component Type | org.primefaces.component.TabView |
| Component Family | org.primefaces.component |
| Renderer Type | org.primefaces.component.TabViewRenderer |
| Renderer Class | org.primefaces.component.tabview.TabViewRenderer |
TabView属性
| Name | Default | Type | Description |
|---|---|---|---|
| id | null | String | Unique identifier of the component. |
| rendered | true | Boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered. |
| binding | null | Object | An el expression that maps to a server side UIComponent instance in a backing bean. |
| widgetVar | null | String | Variable name of the client side widget. |
| activeIndex | 0 | Integer | Index of the active tab. |
| effect | null | String | Name of the transition effect. |
| effectDuration | null | String | Duration of the transition effect. |
| dynamic | false | Boolean | Enables lazy loading of inactive tabs. |
| cache | true | Boolean | When tab contents are lazy loaded by ajax toggleMode, caching only retrieves the tab contents once and subsequent toggles of a cached tab does not communicate with server. If caching is turned off, tab contents are reloaded from server each time tab is clicked. |
| onTabChange | null | String | Client side callback to execute when a tab is clicked. |
| onTabShow | null | String | Client side callback to execute when a tab is shown. |
| onTabClose | null | String | Client side callback to execute on tab close. |
| style | null | String | Inline style of the main container. |
| styleClass | null | String | Style class of the main container. |
| var | null | String | Name of iterator to refer an item in collection. |
| value | null | Object | Collection model to display dynamic tabs. |
| orientation | top | String | Orientation of tab headers. |
| dir | ltr | String | Defines text direction, valid values are ltr and rtl. |
| scrollable | false | Boolean | When enabled, tab headers can be scrolled horizontally instead of wrapping. |
| prependId | true | Boolean | TabView is a naming container thus prepends its id to its children by default, a false value turns this behavior off except for dynamic tabs. |
TabView入门
TabView需要再显示一个子选项卡组件。
也可以使用" title"构面来定义标题。
tabView.xhtml
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:500px;">
<p:growl id="message"></p:growl>
<p:tabView activeIndex="#{tabViewManagedBean.index}">
<p:tab title="Tab#1">
<p:outputLabel value="Content goes here ! Message # 1"></p:outputLabel>
</p:tab>
<p:tab title="Tab#2">
<p:outputLabel value="Content goes here ! Message # 2"></p:outputLabel>
</p:tab>
<p:tab title="Tab#3">
<p:outputLabel value="Content goes here ! Message # 3"></p:outputLabel>
</p:tab>
</p:tabView>
</h:form>
</html>
TabViewManagedBean.java
package com.theitroad.prime.faces.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class TabViewManagedBean {
private int index = 0;
public int getIndex() {
return index;
}
public void setIndex(int index) {
this.index = index;
}
}
TabView –动态选项卡
默认情况下，由于动态属性设置为false，所有选项卡内容都呈现给客户端。
如果该属性的值被设置为true仅在活动选项卡的内容向客户端呈现以及当选择不活动选项卡头，内容加载AJAX。
以下示例显示了将set动态属性设置为false的影响。
tabView.xhtml
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:500px;">
<p:growl id="message"></p:growl>
<p:tabView activeIndex="#{tabViewManagedBean.index}" dynamic="false">
<p:tab title="Tab#1">
<p:outputLabel value="#{tabViewManagedBean.messageNum1}"></p:outputLabel>
</p:tab>
<p:tab title="Tab#2">
<p:outputLabel value="#{tabViewManagedBean.messageNum2}"></p:outputLabel>
</p:tab>
</p:tabView>
</h:form>
</html>
TabViewManagedBean.java
package com.theitroad.prime.faces.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class TabViewManagedBean {
private int index = 0;
private String messageNum1 = "Tab#1 Content Is Loaded";
private String messageNum2 = "Tab#2 Content Is Loaded";
public String getMessageNum1() {
System.out.println(messageNum1);
return messageNum1;
}
public void setMessageNum1(String messageNum1) {
this.messageNum1 = messageNum1;
}
public String getMessageNum2() {
System.out.println(messageNum2);
return messageNum2;
}
public void setMessageNum2(String messageNum2) {
this.messageNum2 = messageNum2;
}
public int getIndex() {
return index;
}
public void setIndex(int index) {
this.index = index;
}
}
但是当dynamic设置为true时，结果将如下所示：
您已经注意到，与动态属性设置为false时发生的情况不同，仅加载了活动标签的内容。
动态加载的标签页默认情况下会缓存其内容，因为重新缓存标签页后，重新激活标签页不会导致Ajax请求。
如果您想在每次选择选项卡时重新加载选项卡的内容，请通过将cache属性设置为false关闭缓存。
TabView –效果
可以通过提供effect和effectDuration属性来控制内容显示的效果。
EffectDuration指定效果的速度，"慢"，"正常"和"快速"仅是适用的值。
tabViewEffects.xhtml
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:500px;">
<p:growl id="message"></p:growl>
<p:tabView activeIndex="#{tabViewManagedBean.index}" dynamic="true" effect="fade" effectDuration="fast">
<p:tab title="Tab#1">
<p:outputLabel value="#{tabViewManagedBean.messageNum1}"></p:outputLabel>
</p:tab>
<p:tab title="Tab#2">
<p:outputLabel value="#{tabViewManagedBean.messageNum2}"></p:outputLabel>
</p:tab>
</p:tabView>
</h:form>
</html>
TabView – Ajax行为事件
TabView组件支持两种可以用ajax触发的事件类型，分别更改和关闭选项卡时会执行tabChange和tabClose。
tabViewAjaxEvents.xhtml
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form id="form" style="width:500px;">
<p:growl id="message"></p:growl>
<p:tabView id="tabView" activeIndex="#{tabViewManagedBean.index}">
<p:ajax event="tabChange" listener="#{tabViewManagedBean.onTabChanged}" update="@previous"></p:ajax>
<p:ajax event="tabClose" listener="#{tabViewManagedBean.onTabClosed}" update="@form:message"></p:ajax>
<p:tab title="Tab#1" closable="true">
<p:outputLabel value="#{tabViewManagedBean.messageNum1}"></p:outputLabel>
</p:tab>
<p:tab title="Tab#2" closable="true">
<p:outputLabel value="#{tabViewManagedBean.messageNum2}"></p:outputLabel>
</p:tab>
</p:tabView>
</h:form>
</html>
TabViewManagedBean.java
package com.theitroad.prime.faces.beans;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import org.primefaces.event.TabChangeEvent;
import org.primefaces.event.TabCloseEvent;
@ManagedBean
@SessionScoped
public class TabViewManagedBean {
private int index = 0;
private String messageNum1 = "Tab#1 Content Is Loaded";
private String messageNum2 = "Tab#2 Content Is Loaded";
public String getMessageNum1() {
System.out.println(messageNum1);
return messageNum1;
}
public void setMessageNum1(String messageNum1) {
this.messageNum1 = messageNum1;
}
public String getMessageNum2() {
System.out.println(messageNum2);
return messageNum2;
}
public void setMessageNum2(String messageNum2) {
this.messageNum2 = messageNum2;
}
public int getIndex() {
return index;
}
public void setIndex(int index) {
this.index = index;
}
public void onTabChanged(TabChangeEvent e){
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Tab With Index :: "+e.getTab().getTitle()+" Is Changed"));
}
public void onTabClosed(TabCloseEvent e){
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Tab With Index :: "+e.getTab().getTitle()+" Is Closed"));
}
}
以下是上述示例的详细说明：
由于TabView组件是容器，因此不适用于在不引用父组件的情况下直接更新消息组件的情况。
使用Primefaces搜索表达式可以实现这一点，就像使用@previous和@form：message一样。要关闭启用标签页，应提供"可关闭"属性，其值应为true。
一旦关闭可关闭的标签页，就会触发onClose事件。
停用非活动标签后，将触发onChange事件。
处理ajax onChange事件时，将为处理程序方法传递TabChangeEvent的实例。
处理ajax onClose事件时，将为处理程序方法传递TabCloseEvent的实例。
TabView –客户端API
TabView组件可以使用客户端API进行控制。
您可以定义JavaScript函数，以针对TabView组件调用以下所有预定义的方法。
| Method | Params | Return Type | Description |
|---|---|---|---|
| select(index) | index: Index of tab to display | void | Activates tab with given index |
| selectTab(index) | index: Index of tab to display | void | (Deprecated, use select instead) Activates tab with given index |
| disable(index) | index: Index of tab to disable | void | Disables tab with given index |
| enable(index) | index: Index of tab to enable | void | Enables tab with given index |
| remove(index) | index: Index of tab to remove | void | Removes tab with given index |
| getLength() | – | Number | Returns the number of tabs |
| getActiveIndex() | – | Number | Returns index of current tab |
tabViewClientSideAPI.xhtml
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
<script>
function showTab(index){
PF('tabView').select(index);
}
</script>
</h:head>
<h:form id="form" style="width:500px;">
<p:growl id="message"></p:growl>
<p:tabView id="tabView" activeIndex="#{tabViewManagedBean.index}" widgetVar="tabView">
<p:tab title="Tab#1" closable="true">
<p:outputLabel value="#{tabViewManagedBean.messageNum1}"></p:outputLabel>
</p:tab>
<p:tab title="Tab#2" closable="true">
<p:outputLabel value="#{tabViewManagedBean.messageNum2}"></p:outputLabel>
</p:tab>
</p:tabView>
<p:commandButton value="Show Tab 1" type="button" onclick="showTab(0);"></p:commandButton>
<p:commandButton value="Show Tab 2" type="button" onclick="showTab(1);"></p:commandButton>
</h:form>
</html>
您必须注意以下重要事项：
TabView组件内的选项卡已从索引零开始。
PF('WidgetVar')。
<<方法名称>>(<<参数是否存在>>)表达式用于调用相关方法。
TabView –方向和可滚动选项卡
您可以分别使用Orientation和scrollable属性来控制Tab方向和选项卡标题的形式。
有四种不同的方向可供选择；顶部(默认)，左侧，右侧和底部。
同时，可滚动功能使您的标签页保持水平对齐，并提供导航按钮以访问这些隐藏的标签页。
tabViewOrientationScrollable.xhtml
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:500px;"> <p:growl id="message"></p:growl> <p:outputLabel value="Orientation Example"></p:outputLabel> <p:tabView orientation="left"> <p:tab title="Tab#1"> Tab#1 </p:tab> <p:tab title="Tab#2"> Tab#2 </p:tab> <p:tab title="Tab#3"> Tab#3 </p:tab> <p:tab title="Tab#4"> Tab#4 </p:tab> </p:tabView> <p:separator <p:outputLabel value="Scrollable Example"></p:outputLabel> <p:tabView scrollable="true"> <p:tab title="Tab#1"> Tab#1 </p:tab> <p:tab title="Tab#2"> Tab#2 </p:tab> <p:tab title="Tab#3"> Tab#3 </p:tab> <p:tab title="Tab#4"> Tab#4 </p:tab> <p:tab title="Tab#5"> Tab#5 </p:tab> <p:tab title="Tab#6"> Tab#6 </p:tab> <p:tab title="Tab#7"> Tab#7 </p:tab> <p:tab title="Tab#8"> Tab#8 </p:tab> </p:tabView> </h:form> </html>
TabView –客户端回调
TabView为客户端定义了三个回调。
单击不活动的选项卡时执行onTabChange，当不活动的选项卡变为活动状态以显示时执行onTabShow，关闭可关闭的选项卡则执行onTabClose。
所有这些回调都将index参数作为tab的索引。
tabViewClientSideCallbacks.xhtml
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
<script>
function onTabChange(){
alert('Tab Is Changed');
}
function onTabShow(){
alert('Tab Is Shown');
}
function onTabClose(){
alert("Tab Is Closed");
}
</script>
</h:head>
<h:form id="form" style="width:500px;">
<p:growl id="message"></p:growl>
<p:tabView id="tabView" activeIndex="#{tabViewManagedBean.index}" onTabChange="onTabChange()" onTabClose="onTabClose()" onTabShow="onTabShow()">
<p:tab title="Tab#1" closable="true">
<p:outputLabel value="#{tabViewManagedBean.messageNum1}"></p:outputLabel>
</p:tab>
<p:tab title="Tab#2" closable="true">
<p:outputLabel value="#{tabViewManagedBean.messageNum2}"></p:outputLabel>
</p:tab>
</p:tabView>
</h:form>
</html>
TagCloud基本信息
TagCloud显示具有不同优势的标签集合。
| Tag | TagCloud |
|---|---|
| Component Class | org.primefaces.component.tagcloud.TagCloud |
| Component Type | org.primefaces.component.TagCloud |
| Component Family | org.primefaces.component |
| Renderer Type | org.primefaces.component.TagCloudRenderer |
| Renderer Class | org.primefaces.component.tagcloud.TagCloudRenderer |
TagCloud属性
| Name | Default | Type | Description |
|---|---|---|---|
| id | null | String | Unique identifier of the component |
| rendered | true | Boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered. |
| binding | null | Object | An el expression that maps to a server side UIComponent instance in a backing bean |
| widgetVar | null | String | Name of the client side widget. |
| model | null | TagCloudModel | Backing tag cloud model. |
| style | null | String | Inline style of the container element. |
| styleClass | null | String | Style class of the container element. |
TagCloud入门
要开始使用TagCloud组件，应在您自己的后端中提供TagCloud模型。
TagCloudModel已关联并绑定到TagCloudItem的集合中，并且对于绑定的每个TagCloudItem，都应指定标签的名称和强度。
另外，您也可以提供一个字符串，该字符串表示TagCloudItem的网址以用于导航。
tagCloud.xhtml
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:500px;">
<p:tagCloud model="#{tagCloudManagedBean.tagCloud}"></p:tagCloud>
</h:form>
</html>
TagCloudManagedBean.java
package com.theitroad.prime.faces.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.model.tagcloud.DefaultTagCloudItem;
import org.primefaces.model.tagcloud.DefaultTagCloudModel;
import org.primefaces.model.tagcloud.TagCloudItem;
import org.primefaces.model.tagcloud.TagCloudModel;
@ManagedBean
@SessionScoped
public class TagCloudManagedBean {
private TagCloudModel tagCloud = new DefaultTagCloudModel();
public TagCloudManagedBean(){
//Create set of TagCloudItem (s)
TagCloudItem primefaces = new DefaultTagCloudItem("Primefaces","https://www.theitroad.local/dev/primefaces", 10);
TagCloudItem hibernate = new DefaultTagCloudItem("Hibernate","https://www.theitroad.local/dev/hibernate", 5);
TagCloudItem apachePluto = new DefaultTagCloudItem("Apache Pluto", 3);
TagCloudItem spring = new DefaultTagCloudItem("Spring", 4);
TagCloudItem grails = new DefaultTagCloudItem("Grails", 5);
TagCloudItem apacheLvy = new DefaultTagCloudItem("Apache lvy", 6);
//Add created TagCloudItems into your TagCloudModel
this.tagCloud.addTag(primefaces);
this.tagCloud.addTag(hibernate);
this.tagCloud.addTag(apachePluto);
this.tagCloud.addTag(spring);
this.tagCloud.addTag(grails);
this.tagCloud.addTag(apacheLvy);
}
public TagCloudModel getTagCloud() {
return tagCloud;
}
public void setTagCloud(TagCloudModel tagCloud) {
this.tagCloud = tagCloud;
}
}
您已经注意到，Hibernate和Grails是最强大的标签。
Primefaces和Hibernate标签是可单击的，通过这样做，您将导航到内部的关联URL。
选择标签
可以使用selectajax行为来选择TagCloudItem，其中一个重要条件是所选的TagCloudItem的URL值应为null。
对于那些不为null的url值，它们将导致完成url导航。
tagCloud.xhtml
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:500px;">
<p:growl id="message"></p:growl>
<p:tagCloud model="#{tagCloudManagedBean.tagCloud}">
<p:ajax event="select" listener="#{tagCloudManagedBean.selectListener}" update="message">
</p:ajax>
</p:tagCloud>
</h:form>
</html>
TagCloudManagedBean.java
package com.theitroad.prime.faces.beans;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import org.primefaces.event.SelectEvent;
import org.primefaces.model.tagcloud.DefaultTagCloudItem;
import org.primefaces.model.tagcloud.DefaultTagCloudModel;
import org.primefaces.model.tagcloud.TagCloudItem;
import org.primefaces.model.tagcloud.TagCloudModel;
@ManagedBean
@SessionScoped
public class TagCloudManagedBean {
private TagCloudModel tagCloud = new DefaultTagCloudModel();
public TagCloudManagedBean(){
//Create set of TagCloudItem (s)
TagCloudItem primefaces = new DefaultTagCloudItem("Primefaces","https://www.theitroad.local/dev/primefaces", 10);
TagCloudItem hibernate = new DefaultTagCloudItem("Hibernate","https://www.theitroad.local/dev/hibernate", 5);
TagCloudItem apachePluto = new DefaultTagCloudItem("Apache Pluto", 3);
TagCloudItem spring = new DefaultTagCloudItem("Spring", 4);
TagCloudItem grails = new DefaultTagCloudItem("Grails", 5);
TagCloudItem apacheLvy = new DefaultTagCloudItem("Apache lvy", 6);
//Add created TagCloudItems into your TagCloudModel
this.tagCloud.addTag(primefaces);
this.tagCloud.addTag(hibernate);
this.tagCloud.addTag(apachePluto);
this.tagCloud.addTag(spring);
this.tagCloud.addTag(grails);
this.tagCloud.addTag(apacheLvy);
}
public TagCloudModel getTagCloud() {
return tagCloud;
}
public void setTagCloud(TagCloudModel tagCloud) {
this.tagCloud = tagCloud;
}
public void selectListener(SelectEvent e){
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(((TagCloudItem)e.getObject()).getLabel() + " Is Selected"));
}
}
TagCloud API
可以使用以下API控制TagCloud模型组件。
| Method | Description |
|---|---|
| List<TagCLoudItem> getTags() | Returns all tags in model. |
| void addTag(TagCloudItem item) | Adds a tag. |
| void removeTag(TagCloudItem item) | Removes a tag. |
| void clear() | Removes all tags. |
您可以通过针对模型调用getTags()列出与模型关联的所有标签，如下所示：
tagCloud.xhtml
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
<script>
function printAllTags(){
alert(PF('tagCloudModel').getTags());
}
</script>
</h:head>
<h:form style="width:500px;">
<p:growl id="message" ></p:growl>
<p:tagCloud widgetVar="tagCloudModel" model="#{tagCloudManagedBean.tagCloud}">
<p:ajax event="select" listener="#{tagCloudManagedBean.selectListener}" update="message">
</p:ajax>
</p:tagCloud>
<p:commandButton value="List All Tags" action="#{tagCloudManagedBean.listAllTags}" update="message"></p:commandButton>
</h:form>
</html>
TagCloudManagedBean.java
package com.theitroad.prime.faces.beans;
import java.util.List;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import org.primefaces.event.SelectEvent;
import org.primefaces.model.tagcloud.DefaultTagCloudItem;
import org.primefaces.model.tagcloud.DefaultTagCloudModel;
import org.primefaces.model.tagcloud.TagCloudItem;
import org.primefaces.model.tagcloud.TagCloudModel;
@ManagedBean
@SessionScoped
public class TagCloudManagedBean {
private TagCloudModel tagCloud = new DefaultTagCloudModel();
public TagCloudManagedBean(){
//Create set of TagCloudItem (s)
TagCloudItem primefaces = new DefaultTagCloudItem("Primefaces","https://www.theitroad.local/dev/primefaces", 10);
TagCloudItem hibernate = new DefaultTagCloudItem("Hibernate","https://www.theitroad.local/dev/hibernate", 5);
TagCloudItem apachePluto = new DefaultTagCloudItem("Apache Pluto", 3);
TagCloudItem spring = new DefaultTagCloudItem("Spring", 4);
TagCloudItem grails = new DefaultTagCloudItem("Grails", 5);
TagCloudItem apacheLvy = new DefaultTagCloudItem("Apache lvy", 6);
//Add created TagCloudItems into your TagCloudModel
this.tagCloud.addTag(primefaces);
this.tagCloud.addTag(hibernate);
this.tagCloud.addTag(apachePluto);
this.tagCloud.addTag(spring);
this.tagCloud.addTag(grails);
this.tagCloud.addTag(apacheLvy);
}
public TagCloudModel getTagCloud() {
return tagCloud;
}
public void setTagCloud(TagCloudModel tagCloud) {
this.tagCloud = tagCloud;
}
public void selectListener(SelectEvent e){
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(((TagCloudItem)e.getObject()).getLabel() + " Is Selected"));
}
public String listAllTags(){
List<TagCloudItem> tags = this.tagCloud.getTags();
String message = "";
for(TagCloudItem item : tags){
message = message + ","+item.getLabel();
}
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Your Tags Are: "+message));
return "";
}
}
