Pages

Showing posts with label richfaces. Show all posts
Showing posts with label richfaces. Show all posts

Wednesday, January 16, 2013

How to create a "Processing" panel in RichFaces

Supose you have a page with a form inside to edit some values, and you want to show a "Processing" or "Please Wait" message when you click on a "save" button on that form. In RichFaces you can use the popupPanel compoment to this purpose.

This article assumes you are using RichFaces 4, and JSF/Facelets

I've created this wait.xhtml file containing only the wait panel to favor reusability and maintainability.


<ui:composition 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:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">

<a4j:status name="waitStatus" onstart="#{rich:component('wait')}.show();"
onstop="#{rich:component('wait')}.hide();" />
<rich:popupPanel id="wait" autosized="true"
modal="false" moveable="false" resizeable="false" zindex="2005">
<f:facet name="header">
<h:outputText value="Processing" />
</f:facet>
<h:outputText value="Please wait..." />
</rich:popupPanel>
</ui:composition>


In the page where you have the form, add the reference to that file:

...
<ui:include src="../wait.xhtml" />
</h:form>

Somewhere inside the form you'll have a "Save" button that processes the input:


<a4j:commandButton value="Save"
action="#{bBean.save}"
status="waitStatus"
oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('ap')}.hide(); return false;">
</a4j:commandButton>

The key part for the wait popup panel to appear only when the "Save" commandButton is clicked, is the status="waitStatus" that links the action of the commandButton to the a4j:status that opens the wait panel.

If you don't do it this way, the wait panel will popup upon every ajax call  in the editing form (autocomplete fields, a4j:ajax calls, etc).

Hope this helps, comment if you have problems with this approach.


Monday, December 17, 2012

Solving character encoding issues in JSF

When developing a non-english webapp, you'll probably encounter some issues with special characters as "ñ", "á", etc, ie, when you input some of this characters in a text input field, you get those characters back from the server rendered as "Ö" or something similar.

The best approach is to use UTF-8 enconding all over the application so the response is not encoded differently depending of the place that handles that response.

This approach applies to:

  • Tomcat 6
  • Java 1.6
  • MyFaces 2.1.10
  • RichFaces 4.2.3-Final


The places to configure the encoding are:

  • server.xml in Tomcat

    It's neccesary to get Tomcat to encode GET parameters. This is done by adding the URIEncoding attribute to the HTTP connector.

          <Connector port="8080" protocol="HTTP/1.1" URIEncoding="UTF-8"
           .... />


  • Servlet Filter

    Implement a servlet filter to do the UTF-8 encoding of  the requests and responses:

    public class SetCharacterEncodingFilter implements Filter {
    
        protected String encoding = null;
        protected FilterConfig filterConfig = null;
        protected boolean ignore = true;
    
        /**
         * Take this filter out of service.
         */
        public void destroy() {
            this.encoding = null;
            this.filterConfig = null;
        }
    
        /**
         * Select and set (if specified) the character encoding to be used to
         * interpret request parameters for this request.
         * @param request The servlet request we are processing
         * @param result The servlet response we are creating
         * @param chain The filter chain we are processing
         * @exception IOException if an input/output error occurs
         * @exception ServletException if a servlet error occurs
         */
        public void doFilter(ServletRequest request, ServletResponse response,
                             FilterChain chain)
     throws IOException, ServletException {
    
            // Conditionally select and set the character encoding to be used
            if (ignore || (request.getCharacterEncoding() == null)) {
                String encoding = selectEncoding(request);
                if (encoding != null)
                    request.setCharacterEncoding(encoding);
            }
    
            response.setContentType("text/html; charset=UTF-8");
            response.setCharacterEncoding("UTF-8");
            // Pass control on to the next filter
            chain.doFilter(request, response);
        }
    
        /**
         * Place this filter into service.
         * @param filterConfig The filter configuration object
         */
        public void init(FilterConfig filterConfig) throws ServletException {
     this.filterConfig = filterConfig;
            this.encoding = filterConfig.getInitParameter("encoding");
            String value = filterConfig.getInitParameter("ignore");
            if (value == null)
                this.ignore = true;
            else if (value.equalsIgnoreCase("true"))
                this.ignore = true;
            else if (value.equalsIgnoreCase("yes"))
                this.ignore = true;
            else
                this.ignore = false;
        }
    
        /**
         * Select an appropriate character encoding to be used, based on the
         * characteristics of the current request and/or filter initialization
         * parameters.  If no character encoding should be set, return
         * null.
         * * The default implementation unconditionally returns the value configured
         * by the encoding initialization parameter for this
         * filter.
         *
         * @param request The servlet request we are processing
         */
        protected String selectEncoding(ServletRequest request) {
            return (this.encoding);
        }
    
    }
    
    

    Then you have to reference and map that filter in web.xml:

    <filter>
       <filter-name>SetCharacterEncodingFilter</filter-name>
       <filter-class>com.foo.filters.SetCharacterEncodingFilter</filter-class>
       <init-param>
          <param-name>encoding</param-name>
          <param-value>UTF-8</param-value>
       </init-param>
    </filter>
    <filter-mapping>
       <filter-name>SetCharacterEncodingFilter</filter-name>
       <url-pattern>*.xhtml</url-pattern>
    </filter-mapping>


    Here I mapped only xhtml files because I'm also encoding the responses to UTF-8, so mapping images and other resources as UTF-8 will probably generate an encoding error.

  • .xhtml Files

    One final step is neccesary to ensure we have coherent encoding all across the webapp.

    The first line in the xhtml files must be:
    <?xml version="1.0" encoding="UTF-8"?>

         Then, inside the head tag of the xhtml, add the following meta tag:
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    This is a lot less painful if you are using facelet templating technique; if that is the case, you'd only have to add the line mentioned above in the master template instead of in every .xhtml file.





Hope this helps, comment if you have any problem using this aproach.



Tuesday, December 11, 2012

How to setup a masked input for rich:calendar in RichFaces

In richfaces you can use jquery to set up masked inputs. First, you must download masked input plugin for the jQuery javascript library and reference it in some part of the page:

<h:outputScript name="js/jquery.maskedinput-1.3.min.js" target="head" />

Then, to mask some input field you should do:


<h:inputText id="date" value="#{bBean.date}" >
    <rich:jQuery selector="#date" query="mask('99/99/9999',{placeholder:'_'})" />
</h:inputText>

Unfortunely, the same doesn't work for rich:calendar. Richfaces automatically renders rich:calendar into an input field for the date text and a div for the calendar itself. The input field is generated with the id of the rich:calendar tag plus "inputDate" as a prefix: ie, if the calendar has id="dob", the generated input field will have the id="dobInputDate"; so one workaround could be:

<h:form id="someForm">
    ...

    <rich:calendar id="date" value="#{bBean.date}"
        enableManualInput="true" popup="true" showApplyButton="false" >
    </rich:calendar>
    <rich:jQuery selector="#someForm\:dateInputDate" query="mask('99/99/9999',{placeholder:'_'})" />
    ...
</h:form>

The attribute enableManualInput of the calendar should be set to true, otherwise it doesn't make sense to mask the input field.


Thursday, December 6, 2012

Avoid closing a rich:popupPanel in richfaces when validation error occurs

In richfaces is common to have a rich:popupPanel that allows some input. If you must validate that input, you may want to left the panel open when a validation error occurs to show error messages. See the following picture that shows the case:




You can achieve this using the oncomplete attribute of the a4j:commandButton tag.


<rich:popupPanel 
  id="cp" minHeight="200" minWidth="450" modal="true"
     domElementAttachment="form" autosized="true">
....


   <a4j:commandButton
      value="Save"
      disabled="#{not securityScope.userInRole['ROLE_ABM']}"
  action="#{backingBean.save}"
      oncomplete="if (#{facesContext.maximumSeverity==null}) 
                  #{rich:component('cp')}.hide(); return false;">
   </a4j:commandButton>
...
</rich:popupPanel>

The important part is  #{facesContext.maximumSeverity == null} to ensure that there are no errors present after validation.