PrimeFaces Spotlight
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">
<p:spotlight target="pipanel" widgetVar="spot"/>
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>