Images won't display, navigation won't occur (learning? JSF 2) - jsf-2

Here is the JSF code trying to display and navigate.
<!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">
<h:head>
<title>A Simple JavaServer Faces 2.0 View</title>
</h:head>
<h:body>
<h:form>
<h1>Images</h1>
<p><h:graphicImage library = "/images" name = "img_jsf.jpg"/>
<h:button value = "Proceed to page 2" outcomr = "gotopage2"/></p>
<p>Above the Main table</p>
<h:dataTable border="1" var="book"
value="#{catalogBean.bookList}">
<h:column>
<h:graphicImage url="#{book.imageLink}" height = "150" width= "150"/>
<h:link outcome="gotopage2">
<h:outputText value = "Proceed to page 2"/>
</h:link>
</h:column>
</h:dataTable>
</h:form>
Here is faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
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-facesconfig_2_0.xsd"
version="2.0"
>
<!-- Comments here, wow talk about hard to do this right.... -->
<navigation-rule>
<from-view-id>CatProdPage.xhtml</from-view-id>
<navigation-case>
<from-outcome>gotopage2</from-outcome>
<to-view-id>/storePage2.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
Here is storePage2.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">
<h:head>
<title>Store Page2</title>
</h:head>
<ui:composition template="./../template/secondaryTemplate.xhtml">
<ui:define name="header">
<ui:include src="/common/header.xhtml" />
</ui:define>
<ui:define name="leftMenu">
<ui:include src="/common/leftMenu.xhtml" />
</ui:define>
<ui:define name="CatProdPage">
<ui:include src="CatProdPage.xhtml" />
</ui:define>
<ui:define name="page2">
<ui:include src="page2.xhtml" />
</ui:define>
</ui:composition>
</html>
This is the result of a snippet from "view source" on the page
<h1>Images</h1>
<p><img src="RES_NOT_FOUND" /><input type="button" onclick="window.location.href='/jsfreg/faces/store/storePage.xhtml'; return false;" value="Proceed to page 2" /></p>
<p>Above the Main table</p><table border="1">
<tbody>
<tr>
<td><img src="/jsfreg/resources/images/img_coreJsf.jpg" height="150" width="150" /><span>: This link is disabled because a navigation case could not be matched.Proceed to page 2</span></td>
</tr>
The core problem is that I can't get images to display and can't get static navigation to work.
I have tried moving the images/*.jpg folder to every possible location I can think of beneath the application root, under WEB-INF, etc.
I am using Glassfish 4 and Maven.

Related

How to solve issue 790 in JSF 2.0 using Templating

I'm in the same situation of continuation of pressing button twice
This is the template
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>SXGA</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
</h:head>
<h:body style="zoom: 1;">
<h:panelGroup layout="block" styleClass="wrapper" id="wrapper">
<ui:insert name="header">
<ui:include src="/secured/template/commonHeader.xhtml" />
</ui:insert>
<ui:insert name="content">
<ui:include src="/secured/template/commonContent.xhtml" />
</ui:insert>
<ui:insert name="footer">
<ui:include src="/secured/template/commonFooter.xhtml" />
</ui:insert>
</h:panelGroup>
</h:body>
</html>
This is the header
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:head>
<title>commonHeader</title>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
</h:head>
<h:body>
<ui:insert name="header">
<ui:include src="/secured/template/commonMenu.xhtml" />
</ui:insert>
</h:body>
</html>
This is the Menu
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>commonMenu</title>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
</h:head>
<h:body>
<ui:composition>
<p:megaMenu orientation="horizontal" style="margin-top:20px">
<p:submenu label="Gestione Rapporti" icon="ui-icon-check">
<p:column>
<p:submenu label="TV.1">
<p:menuitem value="TV.1.1" url="#" />
<p:menuitem value="TV.1.2" url="#" />
</p:submenu>
<p:submenu label="TV.2">
<p:menuitem value="TV.2.1" url="#" />
<p:menuitem value="TV.2.2" url="#" />
<p:menuitem value="TV.2.3" url="#" />
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Autorizzazione Flussi" icon="ui-icon-document">
<p:column >
<p:submenu label="Sports.1">
<p:menuitem value="Sports.1.1" url="#" />
<p:menuitem value="Sports.1.2" url="#" />
</p:submenu>
<p:submenu label="Sports.2">
<p:menuitem value="Sports.2.1" url="#" />
<p:menuitem value="Sports.2.2" url="#" />
<p:menuitem value="Sports.2.3" url="#" />
</p:submenu>
</p:column>
</p:submenu>
<!-- <p:menuitem value="Quit" url="http://www.primefaces.org" icon="ui-icon-close" /> -->
<f:facet name="options">
<!--
<h:form>
<h:commandLink action="#{loginBean.doLogout}" value="Logout" />
</h:form>
<h:form>
<h:commandButton value="Avanti" action="#{loginBean.doLogout}" styleClass="btn btn-primary"/>
</h:form>
-->
<h:form>
<p:button value="Logout" outcome="#{loginBean.doLogout()}" id="iconOnly" icon="ui-icon-power" title="Icon Only" />
</h:form>
</f:facet>
</p:megaMenu>
</ui:composition>
</h:body>
</html>
This is the tipical page
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>SXGAWEB</title>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
</h:head>
<h:body>
<ui:composition template="/secured/template/commonTemplate.xhtml">
</ui:composition>
</h:body>
</html>
Before I was using
<h:form>
<h:commandLink action="#{loginBean.doLogout}" value="Logout" />
</h:form>
or
<h:form>
<h:commandButton value="Avanti" action="#{loginBean.doLogout}" styleClass="btn btn-primary"/>
</h:form>
All the problem started using PrimeFaces.
With BalusC suggestion continuation of pressing button twice i have solved more or less.
<p:button ... outcome="otherViewId" />
I can't understand the real problem. Is related with templating or in general is related with the normal usage of JSF.
In https://java.net/jira/browse/JAVASERVERFACES_SPEC_PUBLIC-790 a possible solution is the use of OmniFaces or the same script from Prime Faces http://showcase.omnifaces.org/scripts/FixViewState
A possible solution is mentioned here
how to fixe twice needed click inside JSF page?
And
h:commandButton/h:commandLink does not work on first click, works only on second click
Where the solution is the script.
I have also read
commandButton/commandLink/ajax action/listener method not invoked or input value not updated
and
Which XHTML files do I need to put in /WEB-INF and which not?.

/ UI Layout Initialization Error The center-pane element does not exist. The center-pane is a required element

I am new to stackoverflow and also this my very first question to this forum so if i am doing something wrong when i am posting here please let me know.
my question related to primefaces i tried with lot of solution but nothing work for me.
i am using...
jsf 2.2.4
primefaces 5.2
tomcat 8
below code is the my template.xhtml
it's located on /templates/template.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: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>Page template with PrimeFaces</title>
<ui:debug />
<f:metadata>
<ui:insert name="metadata" />
</f:metadata>
<h:head>
<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" id="west" resizable="false" size="225">
<ui:include src="menu.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center" id="centerLayout">
<h:form id="mainForm">
<p:messages autoUpdate="true" id="msgs" showDetail="true"
showSummary="true" />
<ui:insert name="content" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" size="0"
style="width:0px; display:none;" id="east">
</p:layoutUnit>
<p:layoutUnit position="south" resizable="true" id="south">
<ui:include src="footer.xhtml" />
</p:layoutUnit>
</p:layout>
</h:head>
And below code is my home.xhtml
it's located on pages/home.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"
xmlns:f="http://java.sun.com/jsf/core"
template="../templates/template.xhtml">
<ui:define name="metadata">
</ui:define>
<ui:define name="content">
Hello world! Welcome to a page derived from a template
</ui:define>
when i run my application request successfully go to the controller and return. But browser come up with alert
> / UI Layout Initialization Error
The center-pane element does not exist.
The center-pane is a required element.
If any one know the proper answer for my question please help me.
Thanks in advance.

Your components and tags structure is all wrong. Here is how it should look.
<!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 encoding="UTF-8" contentType="text/html">
<ui:insert name="metadata" />
<h:head>
<title>Page template with PrimeFaces</title>
</h:head>
<h:body>
<ui:debug />
<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" id="west" resizable="false" size="225">
<ui:include src="menu.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center" id="centerLayout">
<h:form id="mainForm">
<p:messages autoUpdate="true" id="msgs" showDetail="true" showSummary="true" />
<ui:insert name="content" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" size="0" style="width:0px; display:none;" id="east">
</p:layoutUnit>
<p:layoutUnit position="south" resizable="true" id="south">
<ui:include src="footer.xhtml" />
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
The main mistake: layout and content belong in body, not head.
Title and meta tags must be in head.
Template can't use f:metadata. The client view can. See f:metadata doc.
Define content type and encoding in f:view.
There is no id attribute in f:view.
By the way I don't recommend using ui:debug. It evaluates all the properties it can see, and sometimes provokes undesirable side-effects.

JSF2.0 Value is not valid on Submitting form

I am running JSF2.0 with Java 6 code on JBOSS 7.1.0.Final. Here is the code for my page:
<!DOCTYPE composition 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:s="http://jboss.org/schema/seam/taglib"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:a4j="http://richfaces.org/a4j"
template="layout/template.xhtml">
<ui:define name="body">
<h:form id="quizform">
<rich:panel>
<f:facet name="header">Quiz Details</f:facet>
<a4j:repeat value="#{quizHome.mcqs}" var="_mcq" rowKeyVar="idx">
<s:decorate template="layout/display.xhtml">
<h:outputText value="#{idx+1}.#{_mcq.questionText}"/>
<h:selectOneRadio id="optionId-#{idx}" immediate="true" value="#{answerBean.optionId}" valueChangeListener="#{answerBean.selectAnswerLsnr}">
<s:selectItems value="#{_mcq.mcqOptions}" var="opt" label="#{opt.optionText}" itemValue="#{opt.id}" />
</h:selectOneRadio>
</s:decorate>
</a4j:repeat>
<div style="clear:both"/>
</rich:panel>
<div class="actionButtons">
<h:commandButton value="Submit Response" action="#{answerBean.findUserAnswer}" />
<h:commandButton value="Reset" type="reset" />
<s:button view="/StartQuiz.xhtml" id="startquiz" value="Restart Quiz"/>
</div>
</h:form>
</ui:define>
</ui:composition>
The page renders with correct values from the database. But, on submitting the form, I get the following message in the browser:
value is not valid.
What am I doing wrong? Thanks for your suggestions.

jsf2 template and adding style sheet

Trying to use the JSF2 templates feature.The base.xhtml page looks like below
<?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:ui="http://java.sun.com/jsf/facelets"
>
<h:head>
<h:outputStylesheet name="test.css" library="style" target="head"/>
</h:head>
<h:body>
<div id="page">
<div id="header">
<ui:insert name="header" >
<ui:include src="/layout/header.xhtml" />
</ui:insert>
</div>
<div id="content">
<ui:insert name="content" >
???
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer" >
<ui:include src="/layout/footer.xhtml" />
</ui:insert>
</div>
</div>
</h:body>
</html>
Trying to inherit this template into my page (testpage.xhtml)
<?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:ui="http://java.sun.com/jsf/facelets"
>
<h:body>
<ui:composition template="/layout/base.xhtml">
<ui:define name="content">
Default Page content!!!!
<h:outputText value="Foo bar" style="green"/>
</ui:define>
</ui:composition>
</h:body>
</html>
The test.css file is available under the folder webcontent/resources/style and the content of the css file is as follows
.green{
color:#0000FF;
}
Now the problem is when I try to run the testpage the stylesheet is adding into the page (with view source able to identify) but it is not reflecting in the UI.
Is anything wrong in the above code? Any help on this appreciated.

You should use styleClass attribute (equivalent to the class attribute of plain HTML)
Replace
<h:outputText value="Foo bar" style="green"/>
With
<h:outputText value="Foo bar" styleClass="green"/>

p:submenu is not expanded

I am trying but figure out how to use p:panelMenu
for some reason I am unable to make a submenu item expanded like the showcase example http://www.primefaces.org/showcase/ui/panelMenu.jsf
This is my jsf example:
<!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">
<h:head>
</h:head>
<h:body>
<h:form>
<p:panelMenu style="width:300px">
<p:submenu label="Non-Ajax Menuitem">
<p:menuitem value="Delete" ajax="false" icon="ui-icon-close" />
</p:submenu>
</p:panelMenu>
</h:form>
</h:body>
Any idea what I am missing here ?
Thanks

Resources