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 workFacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Some Work Achieved"));// Change the index that TabMenu refers as activated tabindex = 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和tabClose 。
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事件时,将为处理程序方法传递TabCloseEvent的实例。
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,关闭可关闭的选项卡则执行onTabClose。 所有这些回调都将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 TagCloudModelthis.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 TagCloudModelthis.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 TagCloudModelthis.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用于生成导航菜单,分别提供选项卡方式视图中包含的不同内容并显示自定义强度标签。 本教程重点介绍这些组件提供的最重要的内容。 找到随附的源代码,然后在下面留下您的评论。
翻译自: https://www.journaldev.com/3784/primefaces-tab-tabmenu-tabview-tagcloud
primefaces
primefaces_Primefaces选项卡,TabMenu,TabView,TagCloud相关推荐
- primefaces教程_PrimeFaces教程
primefaces教程 Recently we have published a lot of Primefaces tutorial. PrimeFaces is one of the most ...
- LVGL8.2学习笔记
LVGL8.2学习笔记 LVGL控件的基础知识 (1) C语言编写的LVGL以结构体的形式实现类似C++ "Class"的思想: (2) 父子对象的默认关系 LVGL基础对象 LV ...
- LVGL|lvgl教程之修改lvgl tabview部件顶部框(选项卡)的默认样式
效果预览 前言 lvgl提供了非常多的部件(30多个)给用户使用,这些部件的所有样式都是可以修改的.它们都有默认的样式,但是当我们觉得默认的样式不合适自己项目的时候可以就需要进行修改了,本文来教大家怎 ...
- Android开发学习之TabView选项卡具体解释 -- 基于Android4.4
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/he90227/article/details/24474197 直接上代码 -- 基于Android ...
- SwiftUI 问答之更改 TabView 选项卡时如何运行函数
实战需求 我尝试了很多不同的方法,但都没有奏效,当我尝试添加 .onChange 时出现此错误 Instance method 'onChange(of:perform:)' requires tha ...
- Android --- TabHost 切换时,改变选项卡下字体的状态(大小、加粗、默认被选中第一个)
上效果图: MiddleFragment.java 代码如下 import android.os.Bundle; import android.view.LayoutInflater; import ...
- Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...
- android tabhost的使用方法,android TabHost(选项卡)的使用方法
首先,定义TabHost的布局文件: android:id="@android:id/tabhost" android:layout_width="fill_parent ...
- 嵌入式GUI LVGL『Tableview选项卡控件』介绍
一. LVGL GUI开关控件的概念 选项卡视图对象可用于组织选项卡中的内容. 二. LVGL GUI开关小部件和样式 Tab 视图对象包含几个部分.主要是 LV_TABVIEW_PART_BG .它 ...
最新文章
- TensorFlow与PyTorch模型部署性能比较
- 乘风破浪的前端小姐姐,是如何一步步走向成功的?
- Async,Await和ConfigureAwait的关系
- string 找出所有数字 index_发现规律,解决整数转罗马数字
- jQuery学习笔记开篇
- Effective C++ 学习笔记(24)
- 学习数学到底有什么用?
- 5.自定义MAGENTO主题
- php 生成文件出错,php生成excel文件打开报错?!!!
- 基于vue 2.x的移动端网页弹窗插件wc-messagebox(支持Alert,Confirm,Toast,Loading)
- mysql daemon failed to start._MySQL Daemon failed to start错误解决办法
- do while和while的区别
- 一文读懂 MySQL Explain 执行计划
- 《数据库原理及应用教程》考试系统
- 2022年陕西省中级工程师职称评定流程是怎样的,仔细看哦
- 学习Vue3 第十三章(实操组件和认识less 和 scoped)
- kubernetes 二进制安装(v1.20.15)(九)收尾:部署几个仪表盘
- 【图像处理通道分离去除印章】
- 一图带你了解人工智能简史
- 软件开发者的精力管理(一)
热门文章
- [转载] 第一个Python CGI编程和配置
- [转载] python int 幂函数_Python中对数和幂函数的不精确结果
- [转载] python跨行 print:多用(),换行符\要小心,少用+或者不用(其它程序代码跨行用\就行,不能用括号)
- JDBC秒变C3P0连接池——再加连接解耦
- React 入门与实战-课时7 虚拟DOM的本质和目的
- 图标缩排和悬浮突显的简单实现
- html标记语言 --超链接
- HDU 4031 Attack(线段树/树状数组区间更新单点查询+暴力)
- 一大波Java来袭(四)String类、StringBuilder类、StringBuffer类对照
- sql server 小技巧(8) visual studio 2013里使用Sql server compact 4.0及发布问题处理