Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

A Tip for the Fade Effect in Primefaces Components

DZone's Guide to

A Tip for the Fade Effect in Primefaces Components

· Java Zone
Free Resource

Microservices! They are everywhere, or at least, the term is. When should you use a microservice architecture? What factors should be considered when making that decision? Do the benefits outweigh the costs? Why is everyone so excited about them, anyway?  Brought to you in partnership with IBM.

I was trying to fade in a Primefaces panel component that was initially hidden and found it to be somewhat of a struggle. After a bit of googling, the only thing I found out was that I wasn’t the first to come across the problem. Here’s the basic JSF code to use an effect on a panel in response to the button click.

<p:button id="showme" value="Show Me" onclick="return false">
	<p:effect type="fade" event="click" for="myPanel"/>
</p:button>

<h:panelGroup layout="block" id="myPanel" style="display:none">Show Me</h:panelGroup>

This code does nothing because by default the fade effect fades out the component. Looking at the options for the fade gives us no clues either since it claims there are no parameters. The solution is to provide a mode parameter that can be either show or hide which is used for most of the effects. In our case, we want to show the component.

<p:button id="showme" value="Show Me" onclick="return false">
	<p:effect type="fade" event="click" for="myPanel">
		<f:param name="mode" value="'show'"/>
	</p:effect>
</p:button>

<h:panelGroup layout="block" id="myPanel" style="display:none">Show Me</h:panelGroup>

This will show the panel that was initially hidden when you click the button. The only nagging problem is that the button retains its hover style until you click elsewhere in the page.

 

From http://www.andygibson.net/blog/quickbyte/fading-in-primefaces-components/

Discover how the Watson team is further developing SDKs in Java, Node.js, Python, iOS, and Android to access these services and make programming easy. Brought to you in partnership with IBM.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}