Primefaces implementation provides you a huge amount of components that used for different purposes. This tutorial will spotlight into these below components:
- Tab: Is generic container component used by other Primefaces components such as tabView and AccordionPanel.
- TabMenu: Is a navigation component that displays menuitems as tabs.
- TabView: Is a container component to group content in a tabs.
- TagCloud: Displays a collection of tag with different strengths.
Let’s get started depicts these components and see their featured aspects.
Table of Contents
- 1 Tab Basic Info
- 2 Tab Attributes
- 3 TabMenu Basic Info
- 4 TabMenu Attributes
- 5 Getting Started With TabMenu
- 6 TabView Basic Info
- 7 TabView Attributes
- 8 Getting Started With TabView
- 9 TabView – Dynamic Tabs
- 10 TabView – Effects
- 11 TabView – Ajax Behavior Events
- 12 TabView – Client Side API
- 13 TabView – Orientation & Scrollable Tabs
- 14 TabView – Client Side Callback
- 15 TagCloud Basic Info
- 16 TagCloud Attributes
- 17 Getting Started With TagCloud
- 18 Selecting Tags
- 19 TagCloud API
- 20 Summary
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 Attributes
You’ve already experienced using of AccordionPanel and TabView would be discussed in the next coming sections.
TabMenu is a navigation component that displays menuitems as tabs.
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.
index.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://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
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.
- TabMenu uses activeIndex attribute for determining which tab should be rendered once the component got displayed.
TabView Basic Info
TabView is a container component to group content in tabs.
TabView Attributes
Getting Started With TabView
TabView requires one more child tab components to display. Titles can also be defined by using “title” facet.
tabView.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://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.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 – 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.
Following example shows you impact of set dynamic attribute to false.
tabView.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://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.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:
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.
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.
tabViewEffects.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://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 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.
tabViewAjaxEvents.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://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.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.
- For enabling tab to be closed, closable attribute should be provided and its value should be true.
- The onClose event will be fired once the closable tab is closed.
- The onChange event will be fired once the inactive tab is activated.
- Instance of TabChangeEvent is passed for the handler method while the ajax onChange event is processed.
- Instance of TabCloseEvent is passed for the handler method while the ajax onClose event is processed.
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.
tabViewClientSideAPI.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://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.
- PF(‘WidgetVar’).<<Method-Name>>(<<Parameters If there>>) expression is used for invoking relevant methods.
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
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://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 – 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.
tabViewClientSideCallbacks.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://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 Basic Info
TagCloud displays a collection of tag with different strengths.
TagCloud Attributes
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.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://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.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.
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.
tagCloud.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://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.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 model component can be controlled using the below API.
You can list all of tags that are associated with your model through invoking of getTags() against your model like below:
tagCloud.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://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.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.
By using @SessionScope cause additional coding in clearing some fields and data for tabs. Can you use @ViewScope with the default tab index?
Is there a way to make tabMenu scrollable too?
Your tutorial really helped me to get started with jsf tabs. I want to know how to give styles for a jsf primeface tab? I want the color/design of tab to change when I select it. In simple, I want the selected tab to be highlighted. Please help me. Thanks in advance