I can't get the preRenderView event listener to work on a GET request in JSF 2.1.
I have found a lot about it but nothing seems to work e.g.:
Conditional redirection in JSF
http://andyschwartz.wordpress.com/2009/07/31/whats-new-in-jsf-2/#get-prerenderview-event
http://developer.am/j2eetutorial/jsf/?page=jsf-2-prerenderviewevent-example
JSF, Spring, and the PreRenderViewEvent
http://balusc.blogspot.dk/2011/09/communication-in-jsf-20.html#ProcessingGETRequestParameters
I have a template with 4 insert blocks and I have tried to insert the event code at all those places but without any luck. I have tried both with and without the f:metadata tag surrounding it.
<f:event type="preRenderView" listener="#{applicationData.redirectIfNoResults}" />
Bean:
#ManagedBean
#ApplicationScoped
public class ApplicationData implements Serializable {
public void redirectIfNoResults() throws IOException {
if (getTotal() < 1) {
ExternalContext ec = FacesContext.getCurrentInstance().getExternalContext();
ec.redirect(ec.getRequestContextPath() + "/noResults.xhtml");
}
}
...
}
Template:
<?xml version='1.0' encoding='UTF-8' ?>
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:insert name="beforeHeader" />
<f:view>
<ui:insert name="inView" />
</f:view>
<h:head>
<meta http-equiv="cache-control" content="no-store" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Quick Poll</title>
<ui:insert name="header" />
</h:head>
<h:body>
<h1>Quick Poll</h1>
<ui:insert name="content" />
</h:body>
</html>
View:
<ui:define name="content">
#{applicationData.question}?<p/>
<h:panelGrid columns="3" border="0">
Yes:
<h:panelGrid bgcolor="black" height="20" width="#{300*applicationData.yes/applicationData.total}"/>
#{applicationData.yes}
<h:outputText value="No:"/>
<h:panelGrid bgcolor="black" height="20" width="#{300*applicationData.no/applicationData.total}"/>
#{applicationData.no}
</h:panelGrid>
</ui:define>
</ui:composition>
Please help me figure out how to get it working..
Update 1:
I have made changes as suggested by BalusC but it is still not working..
Template:
<?xml version='1.0' encoding='UTF-8' ?>
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<meta http-equiv="cache-control" content="no-store" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Quick Poll</title>
<ui:insert name="header" />
</h:head>
<h:body>
<h1>Quick Poll</h1>
<ui:insert name="content" />
</h:body>
</html>
View:
<?xml version='1.0' encoding='UTF-8' ?>
<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:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
template="template.xhtml">
<ui:define name="content">
<f:event listener="#{applicationData.redirectIfNoResults}" type="preRenderView"></f:event>
#{applicationData.question}?<p/>
<h:panelGrid columns="3" border="0">
Yes:
<h:panelGrid bgcolor="black" height="20" width="#{300*applicationData.yes/applicationData.total}"/>
#{applicationData.yes}
<h:outputText value="No:"/>
<h:panelGrid bgcolor="black" height="20" width="#{300*applicationData.no/applicationData.total}"/>
#{applicationData.no}
</h:panelGrid>
</ui:define>
</ui:composition>
That <f:view> isn't rightly used, it has to wrap the entire view. Remove it (JSF will implicitly create one), or at least let it wrap the entire view, including <h:head> and <h:body> tags.
By the way, the <f:event> does not need to go in a <f:metadata>. That applies only to <f:viewParam>. A <f:event> listener which depends on results of <f:viewParam> is indeed often for sole self-documentary purposes also placed in the same <f:metadata> block, but that is thus not a requirement of <f:event> itself.
In your case, it'd be easier to just put it in <ui:define name="content">.
ComponentSystemEvent seems to be missing in the method signature.
Method needs to look like this:
public void newRequest(final ComponentSystemEvent event) {
System.out.println("Someone requested me");
}
And then place a caller in the template or in the seperate views, that won't do any difference.
<f:event listener="#{userSessionAction.newRequest}" type="preRenderView"></f:event>
I ended up making a solution with a PostConstruct method in a view scope bean.
Like this: Initializng a Backing Bean With Parameters on Page Load with JSF 2.0
Bean:
#ManagedBean
#ViewScoped
public class ResultsController {
#ManagedProperty(value="#{applicationData.total}")
private int total;
#ManagedProperty(value="#{applicationData.yes}")
private int yes;
#ManagedProperty(value="#{applicationData.no}")
private int no;
#PostConstruct
public void postConstruct() {
if (getTotal() < 1) {
ExternalContext ec = FacesContext.getCurrentInstance().getExternalContext();
try {
ec.redirect(ec.getRequestContextPath() + "/noResults.jsf");
} catch (IOException e) {
System.out.println("noResults.jsf redirect failed.");
e.printStackTrace();
}
}
}
...
}
View:
<?xml version='1.0' encoding='UTF-8' ?>
<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:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
template="template.xhtml">
<ui:define name="content">
#{applicationData.question}?<p/>
<h:panelGrid columns="3" border="0">
Yes:
<h:panelGrid bgcolor="black" height="20" width="#{300*resultsController.yes/resultsController.total}"/>
#{resultsController.yes}
<h:outputText value="No:"/>
<h:panelGrid bgcolor="black" height="20" width="#{300*resultsController.no/resultsController.total}"/>
#{resultsController.no}
</h:panelGrid>
</ui:define>
</ui:composition>
Related
Below is my code for my file upload page and I can't figure out why when the upload is done it doesn't update my datatable with if the upload was successful or not. I could do a like a do not render til after update but don't think that is supported with the fileupload command. I did a system out on my list and it does have the values in it so the list is fully populated and ready to display but my datatable isn't showing anything? Am I missing something?
Tomcat 7.0
JSF 2.2.1
Chrome/IE/Firefox
PrimeFaces 5.0
<?xml version="1.0" encoding="UTF-8"?>
<!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:p="http://primefaces.org/ui">
<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:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
template="templates/template.xhtml">
<ui:define name="title">Ingest</ui:define>
<ui:define name="metadata">
</ui:define>
<ui:define name="content">
<h:form>
<p:fileUpload fileUploadListener="#{ingestBean.ingestListener}"
label="choose" invalidFileMessage="Invalid file: "
allowTypes="/(\.|\/)(xml)$/" multiple="true" update="#form">
</p:fileUpload>
<p:dataTable var="errors" value="#{ingestBean.errorList}" id="errorTable">
<p:column headerText="File Name">
<h:outputText value="#{errors.fileName}" />
</p:column>
<p:column headerText="Status">
<h:form>
<h:commandLink action="#{ingestBean.getErrorInfo}"
value="errors.status">
<f:param name="id" value="#{errors.id}" />
</h:commandLink>
</h:form>
</p:column>
</p:dataTable>
</h:form>
</ui:define>
</ui:composition>
</html>
Edit: After a bunch of testing and code rewriting I have got it partially working but it seems like it doesn't like to render in my template code... So I was wondering if there may be something wrong in my template code.
Template code:
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<f:view contentType="text/html" id="fview">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><ui:insert name="title">Page template with PrimeFaces</ui:insert></title>
<ui:debug />
<f:metadata>
<ui:insert name="metadata" />
</f:metadata>
<h:head>
<style>
#leftPanel {
z-index: 1 !important;
}
#leftPanel div {
overflow: visible;
}
</style>
</h:head>
<h:body onload="statusDialog.hide();">
<h:outputStylesheet library="css" name="style.css" />
<p:ajaxStatus onstart="statusDialog.show();"
onsuccess="statusDialog.hide();" />
<p:layout fullPage="true" resizeTitle="resize"
style="background-color:#FFFFFF;">
<p:layoutUnit position="north" size="68" id="north">
<ui:include src="header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" size="202" header="Menu" id="leftPanel">
<ui:include src="menu.xhtml" />
</p:layoutUnit>
<p:layoutUnit styleClass="layoutUnitCenter" position="center">
<h:form id="mainForm">
<ui:insert name="content" />
</h:form>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
After a bunch of testing and deleting and rewriting like all my code I have figured out it was a stupid error with layouts and the <f:view> so I removed that and
<p:ajaxStatus onstart="statusDialog.show();"
onsuccess="statusDialog.hide();" />
And everything seemed to work fine!
I am trying to create an application using JSF and Primefaces. Unfortunately, I have an issue about page templates and could not manage to work it out properly.
I have a page template like this. What I want is to load Left Menu and the Content with ajax request without loading whole page. However, when I click the page2 link, everything gets broken like this.
I tried different combinations of how to place form, include, composition tags but, it's still the same. Only change is my server response according to place of form tag. When I checked the response it seems alright. It does not try to load whole page and nothing seems wrong to me:
<?xml version='1.0' encoding='UTF-8'?>
<partial-response id="j_id1"><changes><update id="javax.faces.ViewRoot"><![CDATA[<script id="innerLayout_s" type="text/javascript">$(function(){PrimeFaces.cw( "Layout","widget_innerLayout",{id:"innerLayout",widgetVar:"widget_innerLayout",west:{paneSelector:'#left',size:"200",resizable:false,closable:false},center:{paneSelector:'#innerContent',size:"auto",resizable:false,closable:false}},"layout");}) ;</script><div id="innerLayout"><div id="left" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-west"><div class="ui-layout-unit-header ui-widget-header ui-corner-all"><span class="ui-layout-unit-header-title">Left Menu</span></div><div class="ui-layout-unit-content ui-widget-content">
<form id="leftForm" name="leftForm" method="post" action="/Magician/pages/page2.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="leftForm" value="leftForm" />
Page2 Left Menu
</form></div></div><div id="innerContent" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-center"><div class="ui-layout-unit-content ui-widget-content">
<form id="contentForm" name="contentForm" method="post" action="/Magician/pages/page2.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="contentForm" value="contentForm" />
Page2 Content
</form></div></div></div>]]></update><update id="j_id1:javax.faces.ViewState:0"><![CDATA[2499963408064928377:-8018685353649439725]]></update></changes></partial-response>
However, when I look the console, there is an error like below:
Uncaught TypeError: Cannot read property '0' of null primefaces.js.xhtml?ln=primefaces&v=5.0:2
PrimeFaces.ajax.Utils.updateElement primefaces.js.xhtml?ln=primefaces&v=5.0:2
PrimeFaces.ajax.ResponseProcessor.doUpdate primefaces.js.xhtml?ln=primefaces&v=5.0:2
PrimeFaces.ajax.Response.handle primefaces.js.xhtml?ln=primefaces&v=5.0:2
p.success primefaces.js.xhtml?ln=primefaces&v=5.0:2
i jquery.js.xhtml?ln=primefaces&v=5.0:25
cd.fireWith jquery.js.xhtml?ln=primefaces&v=5.0:25
cg jquery.js.xhtml?ln=primefaces&v=5.0:25
i
Here are my codes:
default.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>My Application</title>
</h:head>
<h:body>
<h:outputStylesheet name="css/style.css" />
<p:layout id="fullPageLayout" fullPage="true">
<p:layoutUnit id="header" position="north" size="80">
<h:form id="headerForm">
<ui:insert name="headerUI">
<ui:include src="header.xhtml" />
</ui:insert>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="content" position="center">
<ui:insert name="contentUI" />
</p:layoutUnit>
</p:layout>
</h:body>
</html>
header.xhtml:
<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:p="http://primefaces.org/ui">
<p:tabMenu id="tabMenu" activeIndex="#{templateBean.activeIndex}">
<p:menuitem value="page1" action="#{templateBean.navigateToPage(0)}" update=":contentForm,tabMenu" />
<p:menuitem value="page2" action="#{templateBean.navigateToPage(1)}" update=":contentForm,tabMenu" />
</p:tabMenu>
</ui:composition>
content.xhtml:
<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:p="http://primefaces.org/ui">
<p:layout id="innerLayout">
<p:layoutUnit id="left" position="west" size="200" header="Left Menu">
<h:form id="leftForm">
<ui:insert name="leftUI" />
</h:form>
</p:layoutUnit>
<p:layoutUnit id="innerContent" position="center">
<h:form id="contentForm">
<ui:insert name="centerUI" />
</h:form>
</p:layoutUnit>
</p:layout>
</ui:composition>
index.xhtml:
<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:p="http://primefaces.org/ui"
template="templates/default.xhtml">
<ui:define name="contentUI">
<ui:include src="#{templateBean.activePage}.xhtml" />
</ui:define>
</ui:composition>
page1.xhtml:
<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:p="http://primefaces.org/ui"
template="templates/content.xhtml">
<ui:define name="leftUI">
<h:outputText value="Page1 Left Menu" />
</ui:define>
<ui:define name="centerUI">
<h:outputText value="Page1 Content" />
</ui:define>
</ui:composition>
page2.xhtml:
<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:p="http://primefaces.org/ui"
template="templates/content.xhtml">
<ui:define name="leftUI">
<h:outputText value="Page2 Left Menu" />
</ui:define>
<ui:define name="centerUI">
<h:outputText value="Page2 Content" />
</ui:define>
</ui:composition>
TemplateBean.java:
package com.myapplication.pagebeans;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;
#Component
#Scope("request")
public class TemplateBean {
private int activeIndex;
private String activePage = "page1";
public String navigateToPage(int index) {
activeIndex = index;
switch (index) {
case 0:
activePage = "page1";
break;
case 1:
activePage = "page2";
break;
default:
break;
}
return activePage;
}
public int getActiveIndex() {
return activeIndex;
}
public String getActivePage() {
return activePage;
}
}
Sorry for the long question and images (site does not let me to load images because of my reputation) but, I tried give information as much as I can.
Thanks in advance.
I searched a lot and already look at different questions like below ones:
How to include common content into multiple level template page
How to include another XHTML in XHTML using JSF 2.0 Facelets?
Facelets multi-level templates - ui:define not rendered
PrimeFaces exension javascript error
I am new here :)
I have got a problem with one of my first web-apps written using JSF.
I wrote a simple template, it looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<!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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<p:layout fullPage="true">
<p:layoutUnit position="north" header="North - header" style="font-size: 15px;">
<h:form>
<ui:include src="header.xhtml"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="west" header="West - menu" style="font-size: 15px;">
<h:form>
<ui:include src="menu.xhtml"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" header="Center - content" style="font-size: 15px;">
<h:form id="contentForm">
<ui:insert name="content"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" header="East - nothing" style="font-size: 15px;">
</p:layoutUnit>
<p:layoutUnit position="south" header="South - footer" style="font-size: 15px;">
<ui:include src="footer.xhtml"/>
</p:layoutUnit>
</p:layout>
</h:head>
<h:body>
</h:body>
</html>
And in another file (obrazek.xhtml) I wrote this code:
<?xml version="1.0" encoding="UTF-8"?>
<!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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Simple JSF Facelets page</title>
</h:head>
<h:body>
<ui:composition template="template.xhtml">
<ui:define name="content">
<h:form id="PHOTOS">
<p:panelGrid columns="2">
<h:commandLink action="#{pic.addValue1}">
<p:graphicImage url="resources/images/1.png">
<p:ajax update="wynik1" event="click"/>
</p:graphicImage>
</h:commandLink>
<h:commandLink action="#{pic.addValue2}">
<p:graphicImage url="resources/images/2.png">
<p:ajax update="wynik1" event="click"/>
</p:graphicImage>
</h:commandLink>
<h:outputText value="Obrazek 1: #{pic.val1}" id="wynik1"/>
<h:outputText value="Obrazek 2: #{pic.val2}" id="wynik2"/>
</p:panelGrid>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
I wanted to insert some code into "content" primefaces layoutUnit.
IDEA: It has to be 2 pictures and if I click on one of them, AJAX should show the value from ManagedBean using h:outputText. (it always adds +1 to the value :))
The problem is: if I dont add templating** into obrazek.xhtml everything works fine, but if I add:
<ui:composition template="template.xhtml">
<ui:define name="content">
CODE FROM FORM "PHOTOS" (the one about I called upper that "is no templated"**)
</ui:define>
</ui:composition>
while I am clicking on some picture nothing happens. Just "#" is added to my URL and it looks like that:
http://localhost:8080/obrazek.xhtml#
And my ManagedBean also:
#ManagedBean(name = "pic", eager = true)
#SessionScoped
public class PictureBean {
private int val1;
private int val2;
public void addValue1(){
val1 += 1;
}
public void addValue2(){
val2 += 1;
}
GETTERS AND SETTERS FOR VAL1 VAL2
}
I have rummaged all the web looking for the answer but uselessly.
Could anyone here help me? :)
Pardon for so long post and not coloured syntax, have to figure out "how to" do it, first :D
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.
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:
ReferenceError: $ is not defined
ReferenceError: PrimeFaces is not defined
These errors are because missing JavaScript files:
JQuery JavaScript.
Primefaces JavaScript.
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" />
I'm having trouble displaying the deploy-java button on ajax rerender
<h:form id="deployJavaForm" rendered="#{myBean.shouldRender}">
<h:outputScript library="js" name="http://java.com/js/deployJava.js" target="head" />
<script type="text/javascript">
deployJava.createWebStartLaunchButton('blah.jnlp', '1.7.0');
</script>
</h:form>
when
myBean.shouldRender == true
and the form is updated the only thing being displayed (on a white page) is the deployJava-button and the request is left hanging. if shouldRender is true on the initial request, page and button is displayed correctly.
Im using primefaces in case it can help.
What I want to do is to have the button to be displayed correctly regardless if its part of a ajax rerender or a complete initial request.
Update:
I did my homework and created a minimal example that still reproduces the problem. It seems I still get the same problems regardless if script declaration is in head or in body (I have copy of deployJava.js in resources/js)
<?xml version="1.0" encoding="UTF-8"?>
<!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">
<h:head>
<!-- <script type="text/javascript" src="http://java.com/js/deployJava.js" />-->
</h:head>
<h:body>
<h:outputScript library="js" name="deployJava.js" target="head" />
<h:form id="djForm">
<script type="text/javascript">
deployJava.createWebStartLaunchButton(
'test.jnlp', '1.7.0');
</script>
<p:commandButton value="update" update="djForm" />
</h:form>
</h:body>
</html>
edit: (specialgems)
below test give same problem as observed earlier.
<h:outputScript>
deployJava.createWebStartLaunchButton(
'test.jnlp', '1.7.0');
</h:outputScript>
edit: added picture
after click of update button, only deployJava button is rendered and page is loading
edit (daniel): both on success and oncomplete give same behaviour :(
<h:form id="djForm">
<h:outputScript>
function abcefg() {
deployJava.createWebStartLaunchButton('test.jnlp', '1.7.0');
}
</h:outputScript>
<p:commandButton value="update" update="djForm" onsuccess="abcefg()" />
</h:form>
Alternatively to using js and css visibility described in my comment you can write own composite button component. Using Firebug you can investigate which markup is generated by the deployJava.createWebStartLaunchButton script and add it by yourself statically. So your component could be:
<!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:composite="http://java.sun.com/jsf/composite">
<head>
<title>deployJava Button component</title>
</head>
<body>
<composite:interface>
<composite:attribute name="version" required="true"
type="java.lang.String" />
<composite:attribute name="url" required="true"
type="java.lang.String" />
</composite:interface>
<composite:implementation>
<a onmouseover="window.status=''; return true;"
href="javascript:if (!deployJava.isWebStartInstalled("#{cc.attrs.version}")) {if (deployJava.installLatestJRE()) {if (deployJava.launch("#{cc.attrs.url}")) {}}} else {if (deployJava.launch("#{cc.attrs.url}")) {}}"><img
border="0" src="//java.com/js/webstart.png" /></a>
</composite:implementation>
</body>
</html>
so your page will be:
<?xml version="1.0" encoding="UTF-8"?>
<!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:comps="http://java.sun.com/jsf/composite/comps"
xmlns:p="http://primefaces.org/ui">
<h:head>
<!-- <script type="text/javascript" src="http://java.com/js/deployJava.js" />-->
</h:head>
<h:body>
<h:outputScript library="js" name="deployJava.js" target="head" />
<h:form id="djForm">
<comps:deployJavaButton version="1.7.0" url="test.jnlp" rendered="#{myBean.shouldRender}" />
<p:commandButton value="update" update="djForm" />
</h:form>
</h:body>
</html>
The main idea is to avoid executing button creation script twice and more.
May be using h:panelGroup instead of h:form will help. Something like that:
<h:form id="djForm">
<h:panelGroup rendered="#{myBean.shouldRender}">
<script type="text/javascript">
deployJava.createWebStartLaunchButton(
'test.jnlp', '1.7.0');
</script>
</h:panelGroup>
<p:commandButton value="update" update="djForm" />
</h:form>