This question already has answers here:
Load images from outside of webapps / webcontext / deploy folder using <h:graphicImage> or <img> tag
(4 answers)
Closed 7 years ago.
I am using Primefaces 5.2 and I need to display some images on my webpage.
I am using the GraphicImage tag from primefaces and in the name attribute I am passing the full path of the image, but nothing is getting displayed on the webpage and when I checked the source code of the html page generated , there is RES NOT FOUND value on the source attribute of the img tag.
Here is my code
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Add your Experience</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</h:head>
<body>
<div class="container">
<p:contentFlow value="#{testBean.images}" var="image">
<p:graphicImage name="C:/Users/Singh/Desktop/Photos/#{image}"
styleClass="content" />
<div class="caption">#{image}</div>
</p:contentFlow>
<p:graphicImage name="image/bg.jpg" />
<h:graphicImage name="C:/Users/Singh/Desktop/Photos/abh.jpg"></h:graphicImage>
</h:form>
</div>
</body>
</html>
you are choosing the wrong attribute, to specify a link you have to choose the url attribute
<p:graphicImage url="image/bg.jpg" />
<h:graphicImage url="C:/Users/Singh/Desktop/Photos/abh.jpg"></h:graphicImage>
for the attribute name, In JSF 2.x, you can render above image via “resource library” concept, by adding resources folder under webapp in your project, and in your case you have to add images folder under resources and add your image in this folder.
The code will be like that :
<h:graphicImage library="images" name="bg.jpg" />
Related
I am trying to integrate the ICEFaces ACE component library in my project. I've the following view:
<!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">
<head>
<h:outputStylesheet library="org.icefaces.component.skins"
name="rime.css" />
<f:loadBundle basename="resources.application" var="msg" />
<title>
<h:outputText value="#{msg.templateTitle}" />
</title>
</head>
<body>
<div id="content">
<h:form>
<ace:dataTable var="user" value="#{userBean.users}"
paginator="true" rows="50" selectionMode="multiple">
<ace:column headerText="users">
<ace:row>#{user}</ace:row>
</ace:column>
</ace:dataTable>
</h:form>
</div>
</body>
</html>
Unfortunately apparently there is no JavaScript / CSS loaded, so the components are not displayed properly. Moreover, the server logs this:
ICEfaces configured for view /index.xhtml but h:head and h:body components are required
Is this related?
You need to use JSF <h:head> and <h:body> components instead of plain HTML <head> and <body>. This way JSF and any JSF component library will be able to programmatically auto-include CSS/JS resources in there.
E.g.
<!DOCTYPE html>
<html lang="en"
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"
>
<f:loadBundle basename="resources.application" var="msg" />
<h:head>
<title>#{msg.templateTitle}</title>
</h:head>
<h:body>
...
</h:body>
</html>
Note that this way you also don't need that <h:outputStylesheet> anymore.
See also:
One or more resources has the target of 'head' but not 'head' component has been defined within the view
Unrelated to the concrete problem, you'd better declare resources.application as <resource-bundle> in faces-config.xml, so that you don't need to repeat it over all views. Also note that you don't necessarily need <h:outputText> over all place. The <head> and all of above also indicates that you're learning JSF based on a JSF 1.x targeted tutorial instead of a 2.x targeted one. Make sure that you're using the right resources to learn.
I'm trying to implement a p:carousel in my page.
It is, however, completely broken.
I'm running Primefaces 5 and JSF2.2 on Tomcat 7.0.52 and I tried it in both Chrome and Internet Explorer 8.
I tried downgrading from Primefaces 5.0 to 4.0, and it made no difference whatsoever.
Wrapping it in an <f:view contentType="text/html"> didn't either.
What baffles me is that the example on the official primefaces site works brilliantly.
Here's my 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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>title</title>
</h:head>
<body>
<p:carousel >
<p:graphicImage value="/images/cloudy.png" />
<p:graphicImage value="/images/rainy.png" />
<p:graphicImage value="/images/logo.gif" />
<p:graphicImage value="/images/redball.png" />
<p:graphicImage value="/images/yellowball.png" />
<p:graphicImage value="/images/greenball.png" />
</p:carousel>
</body>
</html>
Not exactly rocket science eh?
UPDATE:
Apparently, the problem was that not all of my images were of the same size.
Specifically, they're all 48x48 except logo.gif which is 300x111.
Moving the images around so that logo.gif is the first one seems to have sort of fixed it: now the carousel takes 300x111 as the size of each component and shapes accordingly.
Giving the images a fixed sizes also works.
My problem now is another one: i'm using the carousel to display components that do not have a fixed size (<p:chart>) and it breaks again.
If i wrap them in a <p:panel> and give the panel a fixed size it works once more, however the fixed size is fugly and unacceptable (it ruins the whole styling of the application).
Is there any way around this?
I ended up solving it in the end.
As it turns out, p:carousel needs a fixed width for its elements.
By manually setting it to 400 pixels wide and 400 pixels high it started working again.
I think the tag's attribute was "itemStyle" (or "itemStyleClass" if you wanted to use a class), but I am not 100% sure (it was a long time ago).
Just thought I'd share the solution in case someone else runs into the same issue.
Try this:
<!DOCTYPE html>
<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"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>title</title>
</h:head>
<h:body>
<p:carousel >
<p:graphicImage value="/images/cloudy.png" />
<p:graphicImage value="/images/rainy.png" />
<p:graphicImage value="/images/logo.gif" />
<p:graphicImage value="/images/redball.png" />
<p:graphicImage value="/images/yellowball.png" />
<p:graphicImage value="/images/greenball.png" />
</p:carousel>
</h:body>
</html>
I recognized PrimeFaces 5.0 doesn't work well if you use <body> instead of <h:body>.
Also make sure that the value attribute of <p:graphicImage> points to the right directory.
I'm very new to JSF and I have some problem using JSF template. The code of the template newTemplate.xhtml) 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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">Top</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">Left</ui:insert>
<h:form>
<h:commandButton id="test" value="Test" action="/jsf/newTemplateClient.xhtml"/>
</h:form>
</div>
<div id="content" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
<div id="bottom">
<ui:insert name="bottom">Bottom</ui:insert>
</div>
</h:body>
</html>
Start page called index1.xhtml 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:ui="http://java.sun.com/jsf/facelets">
<body>
<ui:composition template="/WEB-INF/newTemplate.xhtml">
<ui:define name="title">
TEST
</ui:define>
</ui:composition>
</body>
</html>
Finally template client page (called newTemplateClient.xhtml):
<ui:composition template="/WEB-INF/newTemplate.xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:define name="content">
Some content in newTemplateClient.xhtml
</ui:define>
</ui:composition>
Here is the behaviour of the application:
Application starts (address bar says localhost:8080/WebTEST/) and the layout and content is displayed properly,
I click on the 'Test' button and the content of newTemplateClient.xhtml is also displayed properly (address changes to: localhost:8080/WebTEST/faces/index1.xhtml),
I click again 'Test' button and the content is displayed but I loose the layout like there is no css style applied (no colors and formatting). Now the address bar says: localhost:8080/WebTEST/faces/jsf/newTemplateClient.xhtml
The template file is located in WEB-INF folder, the newTemplateClient.xhtml is located in jsf folder.
I know it's probably some simple thing but I really ran out of ideas what might be the cause of this problem.
To repeat my comment, the problem is that the relative URL in the CSS links resolves to a different absolute URL after you leave the index page. However, there is a nice JSF tag you can use instead of the raw link to solve your problem: use <h:outputStylesheet library="css" value="default.css"> instead of <link href=...>.
I have an app that i'm developing and my company has a header banner that is required to be on all pages. We have about 6 different versions floating around my team of that header banner and I now want to make it so that I just include the banner from the source into my app so that if they update the source of the banner, my app's version of the banner is automatically updated as well.
using <ui:include src="http://mycompany.com/banner.html" /> causes the error The markup in the document following the root element must be well-formed..
How can i include this banner even if it's not well formed xml?
My current template:
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition>
<h:body>
<div>
<ui:include src="http://mycompany.com/banner.html" />
</div>
<ui:insert name="content" />
</h:body>
</ui:composition>
</html>
The Facelets <ui:include> tag is the wrong tool for the purpose of embedding external resources in a HTML document.
Use the HTML <iframe> element instead.
<iframe src="http://mycompany.com/banner.html"></iframe>
I have a simple JSF application with 2 .xhtml files. When I run the application, the 1st page displayed is welcome.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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Final Project</title>
</h:head>
<h:body bgcolor="white">
<div align="center" style="border:5px outset blue;">Welcome to the Product Inventory Application</div>
<br></br>
<br></br>
<h:commandButton value="View All Products" action="allProducts"/>
</h:body>
It displays fine, but when I press the View All Products button, I expect it to display the allProducts.xhtml facelet. But when I click the button, nothing happens at all, no exception or anything. The allProducts.xhtml page is just:
<?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">
<h:head>
<title>All Products</title>
</h:head>
<h:body bgcolor="white">
<h3>Test</h3>
</h:body>
</html>
The problem is that an UICommand (<h:commandButton>, <h:commandLink> and similars) must be inside a form i.e. <h:form>. Change your welcome.xhtml page to:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Final Project</title>
</h:head>
<h:body bgcolor="white">
<div align="center" style="border:5px outset blue;">Welcome to the Product Inventory Application</div>
<br></br>
<br></br>
<h:form>
<h:commandButton value="View All Products" action="allProducts"/>
</h:form>
</h:body>
More info:
h:commandLink / h:commandButton is not being invoked, reason 1. IMO, I suggest you to mark this question as a favorite if you're going to work a lot with JSF :).
I don't know the precise detail by heart, but here is the general idea. The action attribute of the button on the welcome page is referring to an 'allProducts' method of the backing bean. That method would have to return the string 'allProducts.xhtml' in order to have JSF present the products page.
So you have to introduce a backing bean for the welcome page and endow that class with a method 'allProducts'.