CODEWITHSUNDEEP
javacssjsf-2primefaces
Amit Sharma
Amit Sharma

Reputation: 319

how to display the mirror image of primefaces layout

I got some issue regarding Primefaces. There is a requirement that when we change language in my top panel from Engish to Arabic the entire layout should be displayed in right to left position (Like mirror image applying to all inner pages).please help me out.

i am including english version layout,top panel and controller beans.

1.layout

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:head>
 <title>Facelet Title</title>
        <style type="text/css">
            .ui-growl{
                left:20px;
            }
        </style>

</h:head>
<body>

    <ui:composition template="/home/template/common/commonLayout.xhtml">
        <ui:define name="content">




            <h:form enctype="multipart/form-data" dir="#{localeControllerBean.direction}" id="form1">
                <div id="add">
                <p:growl  id="msgs" autoUpdate="true" display="icon" style="left:20px"></p:growl>

                </div>
                <p:panel header="#{msg['sponsor_detail']}">
                    <h:panelGrid columns="2">
                    <f:event listener="#{localeControllerBean.islang}" type="preRenderView" />

                        <p:outputLabel for="sname" value="#{msg['sponsor_name']}"
                            styleClass="label" />
                        <p:inputText id="sname" value="#{sponsorBean.sponsor_name}"
                            required="true" requiredMessage="#{msg['sponsor_name_msg']}"
                            styleClass="input">
                            <f:validator validatorId="sponsorValidator" />
                        </p:inputText>

                        <p:outputLabel for="sadd" value="#{msg['sponsoraddress']}:"
                            styleClass="label" />
                        <p:inputText id="sadd" value="#{sponsorBean.s_address}"
                            required="true" requiredMessage="#{msg['Sponsor_address_msg']}"
                            styleClass="input" />

                        <p:outputLabel for="smb" value="#{msg['sponsor_mbno']}:"
                            styleClass="label" />
                        <p:inputText id="smb" value="#{sponsorBean.s_mobile_no}"
                            required="true" requiredMessage="#{msg['sponsor_mbno_msg']}"
                            styleClass="input" />

                        <p:outputLabel for="ss" value="#{msg['sponsor_status']}:" styleClass="label" />
                        <p:inputText id="ss" value="#{sponsorBean.status}" required="true"
                            requiredMessage="#{msg['sponsor_mbno_msg']}" styleClass="input" />

                    </h:panelGrid>
                    <p:commandButton id="submit" value="#{msg['save']}" ajax="false"
                        action="#{sponsorBean.save}" style="margin-bottom:50px;"
                        update="msgs" />

                    <p:commandButton type="reset" value="#{msg['reset']}"
                        style="margin-bottom:50px;margin-left:30px;" ajax="false" />
                </p:panel>
            </h:form>
        </ui:define>
    </ui:composition>
</body>
</html>

2.toppanel Here i change language..

<html xmlns="http://www.w3.org/1999/xhtml"   
        xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:head>

</h:head>
    <body>
        <ui:composition>

<h:form>

  <p:growl id="messages" >

  <p:toolbar style="Font-size:small;"> 

  <p:toolbarGroup align="left"> 
       <h:outputText value="User : " style=" margin-left:15px;"  />  


    <h:outputText  value="#{loginBean.username}">


</h:outputText>



       <p:commandButton value="Logout" action="#{loginBean.doLogout}"  icon="ui-icon-extlink" />



    </p:toolbarGroup>


    <p:toolbarGroup align="right">
     <p:commandButton value="#{loginBean.toggleButton}" action="#{loginBean.goHome}"  icon="ui-icon-home"/>

 <p:inputText id="firstname" value="#{manageEmployee.search}" dir="ltr" styleClass="input"  style="margin-right:15px" />         


    <h:selectOneMenu  
            value="#{manageEmployee.searchFilter}" style="FONT-STYLE: plain; FONT-SIZE:small;margin-right:10px">
             <f:selectItem itemLabel="All" itemValue="All" />  
            <f:selectItem itemLabel="Search by company" itemValue="company" /> 
            <f:selectItem itemLabel="Search by sponsor" itemValue="sponsor" /> 
        </h:selectOneMenu>





      <p:commandButton id="submit" value="Search" ajax="false"
                action="#{manageEmployee.searchRecords}"  update="msgs" style="margin-left:10px" icon="ui-icon-search"  />


     <h:selectOneMenu value="#{localeBean.language}" onchange="submit()" style="margin-left:10px" >
                <f:selectItem itemValue="en" itemLabel="English" />
                <f:selectItem itemValue="ar" itemLabel="Arabic" />


    </h:selectOneMenu>
    </p:toolbarGroup>

  </p:toolbar></p:growl>
</h:form>
        </ui:composition>
    </body>
</html>

3.Local Bean contoller:

import java.util.Locale;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.servlet.http.HttpSession;

@ManagedBean
@SessionScoped
public class LocaleBean {

    private Locale locale = FacesContext.getCurrentInstance().getViewRoot().getLocale();

    public Locale getLocale() {
        return locale;
    }

    public String getLanguage() {
        return locale.getLanguage();
    }

    public void setLanguage(String language) {
        locale = new Locale(language);
        FacesContext.getCurrentInstance().getViewRoot().setLocale(locale);
        FacesContext facesContext = FacesContext.getCurrentInstance();
        HttpSession session = (HttpSession) facesContext.getExternalContext().getSession(true);
        session.setAttribute("user", locale);
//        session.setAttribute("language", language);
    }


    public String save()
    {
        return "homePage";
    }
}

4.Language controller:

import java.util.Locale;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.ComponentSystemEvent;
import javax.servlet.http.HttpSession;

@ManagedBean
@SessionScoped
public class LocaleControllerBean {
    public static String dir="";
    private String direction="";

    public String getDirection() {
        return direction;
    }

    public void setDirection(String direction) {
        this.direction = direction;
    }

    public void islang(ComponentSystemEvent event)
    {
        FacesContext facesContext = FacesContext.getCurrentInstance();
        HttpSession session = (HttpSession) facesContext.getExternalContext().getSession(true);
        Locale l=(Locale) session.getAttribute("user");
        if(l.toString().equals("ar"))
        {
//          dir="rtl";
            setDirection("rtl");
        }
        else
        {
            setDirection("ltr");
//          dir="ltr";
        }
        System.out.println("locale"+l);
        facesContext.getViewRoot().setLocale(l);
    }

}

Upvotes: 1

Views: 630

Answers (1)

bjedrzejewski
bjedrzejewski

Reputation: 2436

The RTL support is something new in primefaces. I think it is not possible, just to have the whole page looking like a mirror image without actually recreating the page. The css itself probably will not do it, so you will need to create a separate page (or set of pages) to which you will be redirected after changing your locale.

More about RTL support in primefaces can be found here: http://code.google.com/p/primefaces/issues/detail?id=3890 and as you can see- it is component, by component, rather than global.

Upvotes: 1

Related Questions