primefaces_Primefaces选项卡，TabMenu，TabView，TagCloud

primefaces

Primefaces implementation provides you a huge amount of components that used for different purposes. This tutorial will spotlight into these below components:

Primefaces实现为您提供了大量用于不同目的的组件。 本教程将重点介绍以下这些组件：

• Tab: Is generic container component used by other Primefaces components such as tabView and AccordionPanel.
  Tab ：是其他Primefaces组件（例如tabView和AccordionPanel）使用的通用容器组件。
• TabMenu: Is a navigation component that displays menuitems as tabs.
  TabMenu ：是一个导航组件，将菜单项显示为选项卡。
• TabView: Is a container component to group content in a tabs.
  TabView ：是一个容器组件，用于将选项卡中的内容分组。
• TagCloud: Displays a collection of tag with different strengths.
  TagCloud ：显示具有不同强度的标签的集合。

Let’s get started depicts these components and see their featured aspects.

让我们开始描述这些组件并查看它们的特色方面。

标签基本信息 (Tab Basic Info)

As we’ve mentioned earlier, Tab isn’t a separate component that can be used individually. It’s used dependently with AccordionPanel and TabView.

如前所述，Tab不是可以单独使用的单独组件。 它与AccordionPanel和TabView独立使用。

Tag	Tab
Component Class	org.primefaces.component.TabView.Tab
Component Type	org.primefaces.component.Tab
Component Family	org.primefaces.component

标签	标签
组件类别	org.primefaces.component.TabView.Tab
组件类型	org.primefaces.component.Tab
组件族	org.primefaces.component

标签属性 (Tab Attributes)

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.

名称	默认	类型	描述
ID	空值	串	组件的唯一标识符。
呈现	真正	布尔型	布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。
捆绑	空值	目的	一个el表达式，它映射到后备bean中的服务器端UIComponent实例。
标题	空值	布尔型	标签的标题文字
titleStyle	空值	串	选项卡的内联样式。
titleStyleClass	空值	串	选项卡的样式类。
残障人士	假	布尔型	禁用标签元素。
可关闭	假	布尔型	使选项卡在启用时可关闭。
标题提示	空值	串	标签标题的工具提示。

You’ve already experienced using of AccordionPanel and TabView would be discussed in the next coming sections.

您已经有使用AccordionPanel和TabView的经验，将在接下来的小节中进行讨论。

TabMenu基本信息 (TabMenu Basic Info)

TabMenu is a navigation component that displays menuitems as tabs.

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

标签	标签菜单
组件类别	org.primefaces.component.tabmenu.TabMenu
组件类型	org.primefaces.component.TabMenu
组件族	org.primefaces.component
渲染器类型	org.primefaces.component.TabMenuRenderer
渲染器类	org.primefaces.component.tabmenu.TabMenuRenderer

TabMenu属性 (TabMenu Attributes)

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.

名称	默认	类型	描述
ID	空值	串	组件的唯一标识符
呈现	真正	布尔型	布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。
捆绑	空值	目的	El表达式，它映射到支持Bean中的服务器端UIComponent实例
模型	空值	菜单型号	MenuModel实例以动态构建菜单。
样式	空值	串	组件的内联样式。
styleClass	空值	串	组件的样式类。
activeIndex	0	整数	活动标签的索引。
widgetVar	空值	串	客户端小部件的名称。

TabMenu入门 (Getting Started With TabMenu)

TabMenu requires menuitems as a children components, each menuitem is rendered as a tab. Menuitem can be used for initiating ajax, non-ajax and GET requests as it was been in a different types of Menu components had discussed.

TabMenu需要menuitems作为子组件，每个menuitem都呈现为一个选项卡。 Menuitem可以用于启动ajax，non-ajax和GET请求，因为它已经讨论过不同类型的Menu组件。

index.xhtml

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.journaldev.com/dev/primefaces"></p:menuitem>
		<p:menuitem value="Ajax Request" action="#{tabMenuManagedBean.doSomeWork}" update="tabMenu message"></p:menuitem>
	</p:tabMenu>
</h:form>
</html>

TabMenuManagedBean.java

TabMenuManagedBean.java

package com.journaldev.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 "";
	}
}

Here’s a detailed explanation for the sample above:

这是上面示例的详细说明：

• Menuitems can be used for generating GET, Ajax, non-Ajax and internal application requests.
  菜单项可用于生成GET，Ajax，非Ajax和内部应用程序请求。
• TabMenu uses activeIndex attribute for determining which tab should be rendered once the component got displayed.
  TabMenu使用activeIndex属性来确定在显示组件后应呈现哪个选项卡。

TabView基本信息 (TabView Basic Info)

TabView is a container component to group content in tabs.

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
组件类别	org.primefaces.component。 tabview.TabView
组件类型	org.primefaces.component.TabView
组件族	org.primefaces.component
渲染器类型	org.primefaces.component.TabViewRenderer
渲染器类	org.primefaces.component.tabview.TabViewRenderer

TabView属性 (TabView Attributes)

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.

名称	默认	类型	描述
ID	空值	串	组件的唯一标识符。
呈现	真正	布尔型	布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。
捆绑	空值	目的	一个el表达式，它映射到后备bean中的服务器端UIComponent实例。
widgetVar	空值	串	客户端小部件的变量名。
activeIndex	0	整数	活动标签的索引。
影响	空值	串	过渡效果的名称。
effectDuration	空值	串	过渡效果的持续时间。
动态	假	布尔型	启用非活动选项卡的延迟加载。
快取	真正	布尔型	当标签内容通过ajax toggleMode延迟加载时，缓存仅检索一次标签内容，并且随后缓存的标签的切换不会与服务器通信。 如果关闭了缓存，则每次单击选项卡时都会从服务器重新加载选项卡内容。
onTabChange	空值	串	单击选项卡时执行的客户端回调。
onTabShow	空值	串	显示选项卡时执行的客户端回调。
onTab关闭	空值	串	在选项卡关闭时执行的客户端回调。
样式	空值	串	主容器的内联样式。
styleClass	空值	串	主容器的样式类。
变种	空值	串	引用集合中项目的迭代器名称。
值	空值	目的	收集模型以显示动态选项卡。
方向	最佳	串	选项卡标题的方向。
目录	ltr	串	定义文本方向，有效值为ltr和rtl。
可滚动	假	布尔型	启用后，标签​​页标题可以水平滚动而不是环绕滚动。
prependId	真正	布尔型	TabView是一个命名容器，因此默认情况下会将其ID附加到其子级，false值会关闭此行为（动态选项卡除外）。

TabView入门 (Getting Started With TabView)

TabView requires one more child tab components to display. Titles can also be defined by using “title” facet.

TabView需要再显示一个子选项卡组件。 也可以使用“ title”构面来定义标题。

tabView.xhtml

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

TabViewManagedBean.java

package com.journaldev.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 –动态选项卡 (TabView – Dynamic Tabs)

By default, all tab contents are rendered to the client as dynamic attribute is set to false. If the value of this attribute is set to true only the active tab contents are rendered to the client and when an inactive tab header is selected, content is loaded with ajax.

默认情况下，由于动态属性设置为false，所有选项卡内容都呈现给客户端。 如果将此属性的值设置为true，则仅将活动的选项卡内容呈现给客户端，并且当选择了非活动的选项卡头时，将使用ajax加载内容。

Following example shows you impact of set dynamic attribute to false.

以下示例显示将动态属性设置为false的影响。

tabView.xhtml

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

TabViewManagedBean.java

package com.journaldev.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;
	}
}

But when the dynamic is set to true the result will be like below:

但是，当动态设置为true时，结果将如下所示：

As you’ve noticed, only the content of active tab has been loaded unlike what’s happened when the dynamic attribute is set to false. Dynamically loaded tabs cache their contents by default, by that, tab reactivating doesn’t result in an ajax request since contents are cached. If you want to reload content of tab each time tab is selected, turn off caching by set cache attribute into false.

您已经注意到，与动态属性设置为false时发生的情况不同，仅加载了活动选项卡的内容。 动态加载的选项卡默认情况下会缓存其内容，通过这种方式，重新激活选项卡不会导致ajax请求，因为内容已被缓存。 如果要在每次选择选项卡时重新加载选项卡的内容，请通过将缓存属性设置为false来关闭缓存。

TabView –效果 (TabView – Effects)

Content displaying can be controlled to be effected by providing effect and effectDuration attributes. EffectDuration specifies the speed of the effect, slow, normal and fast are only applicable values for it.

可以通过提供effect和effectDuration属性来控制内容显示的效果 。 EffectDuration指定效果的速度， 慢速，正常和快速仅是适用的值。

tabViewEffects.xhtml

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 Behavior Events)

TabView component has supported two different type of events that can be triggered with ajax, tabChange and tabClose are executed when a tab is changed and closed respectively.

TabView组件支持两种可以用ajax触发的事件类型，分别在更改和关闭选项卡时执行tabChange和tabClos​​e 。

tabViewAjaxEvents.xhtml

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

TabViewManagedBean.java

package com.journaldev.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"));
	}
}

Here’s detailed explanation for the above sample:

以下是上述示例的详细说明：

• As because of TabView component is a container, it’s not applicable for you to update message component directly without referring its parent. That’s achieved by using Primefaces search expression just like using @previous and @form:message.
  由于TabView组件是一个容器，因此不适用于在不引用父组件的情况下直接更新消息组件的情况。 这可以通过使用Primefaces搜索表达式来实现，就像使用@previous和@form ：message一样 。
• For enabling tab to be closed, closable attribute should be provided and its value should be true.
  要关闭启用选项卡，应提供可关闭的属性，其值应为true。
• The onClose event will be fired once the closable tab is closed.
  一旦关闭可关闭的标签页，就会触发onClose事件。
• The onChange event will be fired once the inactive tab is activated.
  停用非活动标签后，将触发onChange事件。
• Instance of TabChangeEvent is passed for the handler method while the ajax onChange event is processed.
  处理ajax onChange事件时，将为处理程序方法传递TabChangeEvent的实例。
• Instance of TabCloseEvent is passed for the handler method while the ajax onClose event is processed.
  在处理ajax onClose事件时，将为处理程序方法传递TabClos​​eEvent的实例。

TabView –客户端API (TabView – Client Side API)

TabView component can be controlled using the client side API. You can define JavaScript functions for invoking all below pre defined methods against TabView component.

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

方法	参数	返回类型	描述
选择（索引）	index：要显示的标签的索引	虚空	使用给定索引激活选项卡
selectTab（索引）	index：要显示的标签的索引	虚空	（不建议使用，请使用select代替）使用给定索引激活选项卡
禁用（索引）	index：要禁用的标签的索引	虚空	禁用具有给定索引的选项卡
启用（索引）	index：要启用的标签的索引	虚空	启用具有给定索引的标签
删除（索引）	index：要删除的标签的索引	虚空	删除具有给定索引的标签
getLength（）	–	数	返回选项卡数
getActiveIndex（）	–	数	返回当前标签页的索引

tabViewClientSideAPI.xhtml

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>

Here’s the important points you have to notice:

您必须注意以下重要事项：

• Tabs inside TabView component has begun with index zero.
  TabView组件内的选项卡已从索引零开始。
• PF(‘WidgetVar’).<<Method-Name>>(<<Parameters If there>>) expression is used for invoking relevant methods.
  PF（'WidgetVar'）。<<方法名称>>（<<参数是否存在>>）表达式用于调用相关方法。

TabView –方向和可滚动选项卡 (TabView – Orientation & Scrollable Tabs)

You can control the Tab orientation and the form of the tab header using both of orientation and scrollable attributes, respectively.

您可以分别使用方向属性和可滚动属性来控制选项卡方向和选项卡标题的形式。

Four different orientations are available; top (default), left, right and bottom. At the same time, scrollable feature keeps your Tabs aligned horizontally and provide a navigation buttons to access those hidden tabs.

有四种不同的方向可供选择； 顶部（默认），左侧，右侧和底部。 同时，可滚动功能使您的标签页保持水平对齐，并提供导航按钮以访问这些隐藏的标签页。

tabViewOrientationScrollable.xhtml

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 – Client Side Callback)

TabView has defined three callbacks for client side. onTabChange is executed when an inactive tab is clicked, onTabShow is executed when an inactive tab becomes active to be shown and onTabClose when a closable tab is closed. All of these callbacks receive index parameter as the index of tab.

TabView为客户端定义了三个回调。 单击不活动的选项卡时执行onTabChange，当不活动的选项卡变为活动状态以显示时执行onTabShow，关闭可关闭的选项卡则执行onTabClos​​e。 所有这些回调都将index参数作为tab的索引。

tabViewClientSideCallbacks.xhtml

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 Basic Info)

TagCloud displays a collection of tag with different strengths.

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

标签	标签云
组件类别	org.primefaces.component.tagcloud.TagCloud
组件类型	org.primefaces.component.TagCloud
组件族	org.primefaces.component
渲染器类型	org.primefaces.component.TagCloudRenderer
渲染器类	org.primefaces.component.tagcloud.TagCloudRenderer

TagCloud属性 (TagCloud Attributes)

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.

名称	默认	类型	描述
ID	空值	串	组件的唯一标识符
呈现	真正	布尔型	布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。
捆绑	空值	目的	El表达式，它映射到支持Bean中的服务器端UIComponent实例
widgetVar	空值	串	客户端小部件的名称。
模型	空值	标签云模型	支持标签云模型。
样式	空值	串	容器元素的内联样式。
styleClass	空值	串	容器元素的样式类。

TagCloud入门 (Getting Started With TagCloud)

To get started use TagCloud component, TagCloud model should be provided within your own back-end. TagCloudModel has associated and binded into set of TagCloudItem, and for every TagCloudItem you binded the name and strength of the tag should be specified. Also, it’s applicable for you to provide a string represents the TagCloudItem’s url for a navigation purpose.

要开始使用TagCloud组件，应在您自己的后端中提供TagCloud模型。 TagCloudModel已关联并绑定到TagCloudItem的集合中，并且对于绑定的每个TagCloudItem，应指定标签的名称和强度。 同样，您也可以提供一个表示TagCloudItem网址的字符串以用于导航。

tagCloud.xhtml

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

TagCloudManagedBean.java

package com.journaldev.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.journaldev.com/dev/primefaces", 10);
		TagCloudItem hibernate = new DefaultTagCloudItem("Hibernate","https://www.journaldev.com/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;
	}
}

As you’ve noticed, Hibernate and Grails are the most strength Tags. Primefaces and Hibernate Tags are clickable and by doing so you’ll navigate into associated URL inside.

您已经注意到，Hibernate和Grails是最强大的标签。 Primefaces和Hibernate标签是可单击的，通过这样做，您将导航到内部的关联URL。

选择标签 (Selecting Tags)

TagCloudItem can be selected using select ajax behavior with one important condition that those selected TagCloudItem should have null as url value. For those have not null as a url value, they will cause get url navigation done.

可以使用select ajax行为来选择 TagCloudItem，其中一个重要条件是那些选定的TagCloudItem应具有null作为url值。 对于那些不为null的url值，它们将导致完成url导航。

tagCloud.xhtml

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

TagCloudManagedBean.java

package com.journaldev.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.journaldev.com/dev/primefaces", 10);
		TagCloudItem hibernate = new DefaultTagCloudItem("Hibernate","https://www.journaldev.com/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 (TagCloud API)

TagCloud model component can be controlled using the below 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.

方法	描述
List <TagCLoudItem> getTags（）	返回模型中的所有标签。
无效的addTag（TagCloudItem项目）	添加标签。
无效removeTag（TagCloudItem项目）	删除标签。
无效clear（）	删除所有标签。

You can list all of tags that are associated with your model through invoking of getTags() against your model like below:

您可以通过对模型调用getTags（）来列出与模型关联的所有标签，如下所示：

tagCloud.xhtml

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

TagCloudManagedBean.java

package com.journaldev.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.journaldev.com/dev/primefaces", 10);
		TagCloudItem hibernate = new DefaultTagCloudItem("Hibernate","https://www.journaldev.com/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 "";
	}
}

摘要 (Summary)

TabMenu, TabView and TagCloud are used for generating navigation menus, providing different contents contained in a tab-manner view and displaying Custom-Strength Tags, respectively. This tutorial has focused on the most important things that these components are providing. Find attached source code and left your comments right below.

TabMenu，TabView和TagCloud用于生成导航菜单，分别提供选项卡方式视图中包含的不同内容并显示自定义强度标签。 本教程重点介绍这些组件提供的最重要的内容。 找到随附的源代码，然后在下面留下您的评论。

Download PrimeFaces TabMenu TabView TagCloud Project 下载PrimeFaces TabMenu TabView TagCloud项目

翻译自: https://www.journaldev.com/3784/primefaces-tab-tabmenu-tabview-tagcloud

primefaces