CODEWITHSUNDEEP
springjsfprimefacesspring-webflow
Tomasz Więcław
Tomasz Więcław

Reputation: 11

Spring-Webflow + Primefaces application doesn't work like it should

My name is Tomasz and this is my first question here. Here is my problem.

I am a junior Java EE developer and I have 4 moths experience with Java EE, Spring, Spring-Webflow, JSF 2 and Primefaces. I want to learn more by doing my own web application. I have no experience with starting a new project with technologies I mentioned, so basically I copied a template application and changed it a little bit (mostly removed unnecessary features which I won't need now). So my application contains:
- Spring 3.2.2
- Spring Webflow 2.3.2
- JSF 2.1.22
- Primefaces 3.5
- and Hibernate JPA (it doesn't matter, this part works good).

As a server I use Tomcat 7.0.40.

I configured my application using many configuration tutorials. Application works, it doesn't have warnings but it does not work as it should. Let me show you screen shots:

Firt one, when I start the application, it looks like this:
http://oi44.tinypic.com/2wd4od3.jpg

But after I refresh the browser by pressing F5, it looks like it should from the beginning:
http://oi39.tinypic.com/17fr06.jpg

It is a really strange behaviour for me, I don't know why it happens. Browser doesn't matter. I've tried it on Chrome, FireFox and IE - the same effect.

Also p:commandLink seems to ignore me. I click it and nothing happens. When I have option 

    ajax="false"

enabled it looks like the page is refreshed, but still nothing happens. I work a lot with primefaces and swf at work, and that never happend to me.

Here are some details from my application, I can post everything on request:

template (main.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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:include src="/WEB-INF/layout/fragments/layout.xhtml" />
</html>

layout (layout.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:c="http://java.sun.com/jsp/jstl/core"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html" encoding="UTF-8">
    <h:head>
    </h:head>

    <h:body>
        <!-- outputStyle have to be here, otherwise css order is wrong -->
        <h:outputStylesheet id="cssStandard" library="css" name="standard.css" />
        <!--       <h:outputStylesheet id="cssStandard" library="css" name="simple.css" />  -->
        <h:form>
            <div id="glass"
                style="position: absolute; width: 100%; height: 100%; z-index: 2000; display: none;"></div>

            <ui:include src="/WEB-INF/layout/fragments/ajaxError.xhtml" />

            <p:layout id="layout" fullPage="false"
                style="width: 1000px; height: 900px; margin: 0 auto;">
                <p:layoutUnit position="north" size="150">
                    <ui:include src="/WEB-INF/layout/fragments/north.xhtml" />
                </p:layoutUnit>
                <p:layoutUnit position="center">
                    <h:form>
                        <ui:insert name="content" />
                    </h:form>
                </p:layoutUnit>
            </p:layout>

            <p:outputPanel id="dialogs" style="display:block; overflow: auto;">
                <ui:insert name="dialogs" />
            </p:outputPanel>
        </h:form>
    </h:body>

</f:view>
</html>

navigation menu (north.xhtml):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    <h:form>
        <a href="#{facesContext.externalContext.requestContextPath}"> <p:graphicImage
                name="logo.png" library="images/application" />
        </a>
        <h:panelGrid columns="3" style="width: 100%">
            <h:column>
                <p:menubar style="width: 300px">
                    <p:menuitem value="Strona Główna" action="forwardTo" ajax="false">
                        <f:setPropertyActionListener target="#{flowController.flowId}"
                            value="main" />
                    </p:menuitem>
                    <p:submenu label="MENU_2">
                    </p:submenu>
                </p:menubar>
            </h:column>
            <h:column>
                <h:outputText value="Zalogowany jako: " style="float: right" />
            </h:column>
            <p:column>
                <p:menuButton
                    value="#{mainController.loggedUser != null ? mainController.loggedUser.login : 'Gość'}">
                    <p:menuitem value="Zaloguj" action="forwardTo" ajax="false">
                        <f:setPropertyActionListener target="#{flowController.flowId}"
                            value="login" />
                    </p:menuitem>
                    <p:menuitem value="Wyloguj" />
                </p:menuButton>
            </p:column>
        </h:panelGrid>


    </h:form>
</ui:composition>

base-flow.xml:

<?xml version="1.0" encoding="UTF-8"?>
<flow xmlns="http://www.springframework.org/schema/webflow"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="
        http://www.springframework.org/schema/webflow
        http://www.springframework.org/schema/webflow/spring-webflow-2.0.xsd"
    abstract="true">

    <end-state id="endAndForwardTo" view="flowRedirect:#{flowController.flowId}" />

    <global-transitions>
        <transition on="forwardTo" to="endAndForwardTo" validate="false" />
        <transition on="endAndForwardTo" to="endAndForwardTo" />
    </global-transitions>


</flow>

FlowController.java:

package tomashoov.polskielowiska.flow;

import org.apache.log4j.Logger;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;

@Component
@Scope("session")
public class FlowController {

    private Logger LOG = Logger.getLogger(FlowController.class);

    public final static String MAIN = "main";
    public final static String LOGIN = "login";

    private String flowId = MAIN;

    public String getFlowId() {
        return flowId;
    }

    public void setFlowId(String flowId) {
        this.flowId = flowId;
    }
}

If more details are needed, please tell me.

Upvotes: 1

Views: 2636

Answers (1)

Ahmed Hassanien
Ahmed Hassanien

Reputation: 537

I faced the exact same problem and I dug a little in this problem and I made a work around to fix this bug (since I am very late in my project). I will come back with a robust solution later, but here is what I got:

You are using Spring Webflow the start page is index.jsp with <meta http-equiv="Refresh" content="0; URL=MAIN_WEB_FLOW_URL" /> to force redirect to the main web flow.

You will find in your browser console 2 JavaScript errors:

  1. ReferenceError: $ is not defined
  2. ReferenceError: PrimeFaces is not defined

These errors are because missing JavaScript files:

  1. JQuery JavaScript.
  2. Primefaces JavaScript.
  3. Layout JavaScript.

Note that there is also CSSs files missing and that is why the page layout sizes and locations are missed up.

So, it is obvious the the <h:head></h:head> tags didn't fetch some Primefaces JavaScript files and CSSs on the redirect. I found an issue here with the redirect resources fetch failure. The proposed solution was to add <h:outputScript library="primefaces" name="jquery/jquery.js" target="head" /> in the <h:head></h:head>. So, I added the missing scripts and the CSS files in the <h:head></h:head> and it worked like a charm.

<h:outputStylesheet library="primefaces" name="primefaces.css" />
<h:outputStylesheet library="primefaces" name="layout/layout.css" />

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />
<h:outputScript library="primefaces" name="primefaces.js" target="head" />
<h:outputScript library="primefaces" name="layout/layout.js" target="head" />

Upvotes: 1

Related Questions