5 Replies Latest reply on Nov 23, 2011 11:36 AM by esrafiki

RF4: rich:toolbar with rich:menuitem(s) appears in plain text only

cschlaefcke Sep 29, 2011 11:45 AM

Hi All,

I have a problem implementing a simple xhtml page with a rich:toolbar containing a rich:dropDownMenu and some rich:menuitem(s).

I have a login page that uses a loginBean to redirect to a welcome page. When I enter some valid credentials the welcome pages is loaded but the toolbar on it only appears in plain text. The menu items are there as defined in my xhtml and the dropDownMenu somehow opens its entries in an ajax way (some more plaintext appears with the items I also defined in the xhtml when I move the mouse over). When I load the welcome.xhtml page directly (http://myhost/myapp/views/welcome.xhtml) the menu looks like it should.

The relevant content of my faces-config.xml:

  <navigation-rule>
    <from-view-id>*</from-view-id>
    <navigation-case>
      <from-outcome>login</from-outcome>
      <to-view-id>/views/login.xhtml</to-view-id>
    </navigation-case>
  </navigation-rule>

  <navigation-rule>
    <from-view-id>/views/login.xhtml</from-view-id>
    <navigation-case>
      <from-outcome>success</from-outcome>
      <to-view-id>/views/welcome.xhtml</to-view-id>
    </navigation-case>
  </navigation-rule>

The login.xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
  xmlns:h="http://java.sun.com/jsf/html" 
  xmlns:a4j="http://richfaces.org/a4j" 
  xmlns:rich="http://richfaces.org/rich" 
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head></h:head>

<body>
  <f:view contentType="text/html">
    <h:form id="loginForm">
      <rich:panel header="#{msgs.label_loginPrompt}">
        <h:panelGrid columns="3">
          <h:outputText value="Name:" />
          <h:inputText value="#{loginBean.name}" />
          <br />
          <h:outputText value="Password:" />
          <h:inputSecret id="password" value="#{loginBean.password}" />
          <br />
          <a4j:commandButton id="loginButton" value="login" action="#{loginBean.loginAction()}" />
        </h:panelGrid>
      </rich:panel>
    </h:form>
  </f:view>
</body>
</html>

And the welcome.xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
  xmlns:h="http://java.sun.com/jsf/html" 
  xmlns:a4j="http://richfaces.org/a4j" 
  xmlns:rich="http://richfaces.org/rich" 
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:ui="http://java.sun.com/jsf/facelets">

  <h:head></h:head>

  <body>
    <h:form>
      <rich:toolbar>
        <rich:dropDownMenu mode="ajax">
          <f:facet name="label">
            <h:panelGrid>
              <h:outputText value="Administration" />
            </h:panelGrid>
          </f:facet>
          <rich:menuItem label="Search" action="#{globalNavigationDataBean.backToEmptySearch}" />
          <rich:menuItem label="Edit" action="postedit" />
        </rich:dropDownMenu>
        <rich:menuItem label="Reports" action="reportview" />
        <rich:toolbarGroup location="right">
          <rich:menuItem label="Change Password}" action="changePass" />
          <rich:menuItem label="Llogout" action="#{loginBean.logoutAction()}" />
        </rich:toolbarGroup>
      </rich:toolbar>
    </h:form>
  </body>
</html>

I have searched the RF-Docs and this forum with no luck - any help or hint would be very appreciated!

Best Regards,

Christian

1. Re: RF4: rich:toolbar with rich:menuitem(s) appears in plain text only

cschlaefcke Oct 20, 2011 12:26 PM (in response to cschlaefcke)

Hi All,

I am still searching for a solution to this problem and try to break down the problem to a very small example.

I have a login page:

When you hit "Log In" the loginBean.loginAction() gets fired and redirects you to the welcome page that contains some other richfaces stuff like a toolbar with drowpdown menus:

(I get the this expected result when I enter the full path of the xhtml in the browsers address: http://localhost:8080/my-richfaces-app/views/welcome.xhtml - but the use of the template.xhtml normally hides the full path and just shows: http://localhost:8080/my-richfaces-app - maybe somewhere here lies the problem)

But all I get is this plain text result:

And I have absolutely no clue what might be wrong with my project.

This is the layout of my little project:

The LoginBean.java

package de.megalon.my_richfaces_app;

import java.io.Serializable;
import java.util.logging.Logger;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class LoginBean implements Serializable {
    private static final Logger log = Logger.getLogger("LoginBean"); 

    private static final long serialVersionUID = -2403138958014741653L;
    private String name;
    private String password;

    public LoginBean() {
    }

    public String loginAction() {
      log.info("logging in!");
      return "success";
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
      return password;
    }

    public void setPassword(String password) {
      this.password = password;
    }
}

The login.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:rich="http://richfaces.org/rich" 
    xmlns:a4j="http://richfaces.org/a4j" 
    template="/templates/template.xhtml">

  <ui:define name="body">
    <h:form id="loginForm">
      <div style="vertical-align: middle; width: 350px;">
        <br /> <br /> <br />

        <rich:panel header="Please Log in!">
          <h:panelGrid id="loginPanel" columns="2" style="text-align: left;">
          Name<h:inputText id="name" value="#{loginBean.name}" />
          Password<h:inputSecret id="password" value="#{loginBean.password}" />
          </h:panelGrid>
          <p>
            <a4j:commandButton id="loginButton" value="Log In" action="#{loginBean.loginAction()}" render="@form" />
          </p>
        </rich:panel>
      </div>
    </h:form>
  </ui:define>
</ui:composition>

The welcome.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:rich="http://richfaces.org/rich" 
    xmlns:a4j="http://richfaces.org/a4j" 
    template="/templates/template.xhtml">

  <ui:define name="body">
    <h:form>
        <rich:toolbar height="26px">
            <rich:dropDownMenu mode="ajax">
                <f:facet name="label">
                    <h:panelGroup>
                        <h:graphicImage value="/images/icons/copy.gif" styleClass="pic" alt="copy" />
                        <h:outputText value="File" />
                    </h:panelGroup>
                </f:facet>
                <rich:menuItem  label="New"
                    action="#{dropDownMenuBean.doNew}" icon="/images/icons/create_doc.gif">
                </rich:menuItem>
                <rich:menuItem  label="Open"
                    action="#{dropDownMenuBean.doOpen}" icon="/images/icons/open.gif" />
                <rich:menuGroup label="Save As...">
                    <rich:menuItem  label="Save"
                        action="#{dropDownMenuBean.doSave}" icon="/images/icons/save.gif" />
                    <rich:menuItem  label="Save All"
                        action="#{dropDownMenuBean.doSaveAll}">
                        <f:facet name="icon">
                            <h:graphicImage value="/images/icons/save_all.gif" alt="save_all"/>
                        </f:facet>
                    </rich:menuItem>
                </rich:menuGroup>
                <rich:menuItem  label="Close"
                    action="#{dropDownMenuBean.doClose}" />
                <rich:menuSeparator id="menuSeparator11" />
                <rich:menuItem  label="Exit"
                    action="#{dropDownMenuBean.doExit}" />

            </rich:dropDownMenu>

            <rich:dropDownMenu mode="ajax">
                <f:facet name="label">
                    <h:panelGrid cellpadding="0" cellspacing="0" columns="2"
                        style="vertical-align:middle">
                        <h:outputText value="Links" />
                    </h:panelGrid>
                </f:facet>
                <rich:menuItem submitMode="client"
                    onclick="document.location.href='http://labs.jboss.com/jbossrichfaces/'">
                        <h:outputText value="RichFaces Home Page" />
                </rich:menuItem>
                <rich:menuItem submitMode="client"
                    onclick="document.location.href='http://jboss.com/index.html?module=bb&op=viewforum&f=261'">
                        <h:outputText value="RichFaces Forum" />
                </rich:menuItem>
            </rich:dropDownMenu>
        </rich:toolbar>
    </h:form>
  </ui:define>
</ui:composition>

The tamplate.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:rich="http://richfaces.org/rich" 
    xmlns:a4j="http://richfaces.org/a4j">

<h:head>
    <title><ui:define name="title">Application Title</ui:define></title>
    <meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
</h:head>

<h:body>
    <ui:insert name="body">Default content</ui:insert>
</h:body>
</html>

The web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name>Sample RichFaces 4 Application</display-name>
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
  </servlet-mapping>
  <session-config>
    <session-timeout>30</session-timeout>
  </session-config>
  <mime-mapping>
    <extension>ecss</extension>
    <mime-type>text/css</mime-type>
  </mime-mapping>
  <welcome-file-list>
    <welcome-file>views/login.xhtml</welcome-file>
  </welcome-file-list>
</web-app>

And the faces-config.xml

<?xml version="1.0"?>
<faces-config version="2.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">

  <navigation-rule>
    <from-view-id>/views/login.xhtml</from-view-id>
    <navigation-case>
      <from-outcome>success</from-outcome>
      <to-view-id>/views/welcome.xhtml</to-view-id>
    </navigation-case>
  </navigation-rule>
</faces-config>

I appreceate any help as I need to get some real problems solved - please help!

Best Regards,

Christian

2. Re: RF4: rich:toolbar with rich:menuitem(s) appears in plain text only

sabya113 Oct 21, 2011 1:39 AM (in response to cschlaefcke)

Hi,
i tried your code without the actions in a dummy project.Worked Fine
<rich:toolbar>
<rich:dropDownMenu mode="ajax">
<f:facet name="label">

<h:panelGrid>

<h:outputText value="Administration" />

</h:panelGrid>
</f:facet>
<rich:menuItem label="Search"/>
<rich:menuItem label="Edit" action="postedit" />
</rich:dropDownMenu>
<rich:menuItem label="Reports" action="reportview" />

<rich:toolbarGroup location="right">

<rich:menuItem label="Change Password}" action="changePass" />

<rich:menuItem label="Logout"/>
</rich:toolbarGroup>
</rich:toolbar>

Just check your jars included in your lib-
cssparser-0.9.5.jar
guava-r09.jar
jsf-api-2.0.3.jar
jsf-impl-2.0.3.jar
jstl-1.0.2.jar
richfaces-components-api-4.1.0.20110910-M2.jar
richfaces-components-ui-4.1.0.20110910-M2.jar
richfaces-core-api-4.1.0.20110910-M2.jar
richfaces-core-impl-4.1.0.20110910-M2.jar
Actions
3. Re: RF4: rich:toolbar with rich:menuitem(s) appears in plain text only

cschlaefcke Oct 25, 2011 12:03 PM (in response to sabya113)
Thank you for your reply!

Did you try to implement the redirect as well? I ask because the problem occurs exactly at this stage of te applications lifecycle. When I initially start the application and opening the login page in the browser everything looks fine. But as soon as I click on the submit button the rf styles are gone!

Please check out the attached demo application as it demonstrates quite well what I mentioned in my second post.

And thanks alkot for your support!

Regards,

Christian

my-richfaces-app.zip 12.8 MB
Actions
4. Re: RF4: rich:toolbar with rich:menuitem(s) appears in plain text only

cschlaefcke Oct 25, 2011 12:23 PM (in response to cschlaefcke)

Meanwhile I tested my demo app on a plain tomcat 7.0.12 as well. Before that I tested on a JBoss AS 7.0.1 ...

The result remains the same :-(
Actions
5. Re: RF4: rich:toolbar with rich:menuitem(s) appears in plain text only

esrafiki Nov 23, 2011 11:36 AM (in response to cschlaefcke)

Hi,
I had a similar problem and I found this workaround:

Try changing your template's <h:head> section to:

<h:head>
    <title><ui:define name="title">Application Title</ui:define></title>
    <meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
    <h:outputStylesheet library="org.richfaces" name="toolbar.ecss" target="head"/>
    <h:outputStylesheet library="org.richfaces" name="dropdownmenu.ecss" target="head"/>
</h:head>

I know this is not the correct way to solve the problem: every page that use that template will load both css (even if they are not used), but this is a "slight cost", isn't it?

Best regards,
Jordi
Actions

Go to original post