Welcome!

APIs for the Internet of Things

Max Katz

Subscribe to Max Katz: eMailAlertsEmail Alerts
Get Max Katz via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Related Topics: mHealth & H-Cloud

mHealth & H-Cloud: Blog Feed Post

Creating “Please wait” with RichFaces modal panel

Showing user a modal “Please wait” or “Working” dialog is a good way to prevent him or her clicking a button more than once. It can be easily done in RichFaces by combining a4j:status and rich:modalPanel tags.

<h:form>
   <a4j:commandButton value="Do something" 
      action="#{bean.dosomething}"
      status="ajaxStatus"/>
</h:form>
 
<a4j:status id="ajaxStatus"
   onstart="#{rich:component('waitPanel')}
      .show('',{top:'40px', left:'80px',height:'100px', width:'200px'})"
   onstop="#{rich:component('waitPanel')}.hide()" />
 
<rich:modalPanel id="waitPanel" style="text-align:center">
   <h:outputText value="Please wait..."
      style="font-weight:bold;font-size:large" />
</rich:modalPanel>

When the button is clicked, a4j:status is executed. Instead of showing some text or animated image, we use onstart event to open a modal panel. While Ajax request is executing on the server, the modal panel is active and prevents clicking anything on the page. When the request is done, onstop event on status is called and hides the modal panel.

Short and neat, right?

Read the original blog entry...

More Stories By Max Katz

Max Katz heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces” (Apress 2008, 2011), DZone MVB (Most Valuable Blogger), and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: http://maxkatz.org and Twitter: @maxkatz.