PrimeFaces 5 Spotlight Example

By Arvind Rai, February 02, 2015
This page will provide the example for PrimeFaces 5 Spotlight. Using Spotlight, we can highlight a region for any event. Spotlight has the attribute as target and widgetVar. "target" attribute is assigned with id of component or region which is will be highlighted. "widgetVar" attribute will be used with Promeface function as an argument.
To understand the Spotlight, suppose we have a panel with id pipanel .
<p:panel id="pipanel" header="Personal Information" style="margin-top:5px"> 
Now find the spotlight tag.
<p:spotlight target="pipanel" widgetVar="spot"/> 
The attributes of spotlight are as given below.
target : We assign the id of the PrimeFaces component that needs to be highlighted.
widgetVar : The value assigned to widgetVar is used to show and hide the region.
We are showing how to use spotlight to hide and show the region. PrimeFaces provides the function as PF in which we pass the widgetVar value of spotlight tag as given below.
<p:commandButton value="Block" icon="ui-icon-check"  oncomplete="PF('spot').show()"/>
<p:commandButton value="UnBlock" icon="ui-icon-close"  oncomplete="PF('spot').hide()"/> 

Create View with spotlight

Find the sample UI which is using spotlight tag.
userform.xhtml
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
	  xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title> PrimeFaces 5 Spotlight Example </title>
    </h:head>
    <h:body>
	<h3> PrimeFaces 5 Spotlight Example </h3>
	<p:panel id="pipanel" header="Personal Information" style="margin-top:5px">
	   <h:panelGrid columns="2" id="pgrid" cellpadding="5">
	 	<p:outputLabel value="Name:" />
		<p:inputText id="fname" value=""/>
		<p:outputLabel value="Age:" />
		<p:inputText id="age" value=""/>
	   </h:panelGrid>
	   <p:commandButton value="Block" icon="ui-icon-check"  oncomplete="PF('spot').show()"/>
	   <p:commandButton value="UnBlock" icon="ui-icon-close"  oncomplete="PF('spot').hide()"/>
	</p:panel>
	<p:panel id="apnl" header="Person Address" style="margin-top:5px">
	   <h:panelGrid columns="2" id="addgrid" cellpadding="5">
		<p:outputLabel value="Village:" />
		<p:inputText id="village" value=""/>
		<p:outputLabel value="City:" />
		<p:inputText id="city" value=""/>
	   </h:panelGrid>
	</p:panel>
	<p:spotlight target="pipanel" widgetVar="spot"/>
    </h:body>
</html>	 

Output

Download the source code by the link given below and deploy it into tomcat. Access the URL http://localhost:8080/primefaces5-1/userform.xhtml . Click the button Block and we will observe that only panel with id pipanel with be highlighted.
PrimeFaces 5 Spotlight Example

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI







©2024 concretepage.com | Privacy Policy | Contact Us