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.
Related
I have below code to display an editor and toolbar, somehow toolbar is not displaying and I am just getting a big thin line (yellow highlighted in screenshot).
I used the toolbar code from here.
Could someone please help me point out the issue, I search and see that jquery could be issue but I am not loading any jquery or other library explicitly. Also, my editor is working fine but not toolbar.
<?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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h1>Hello World PrimeFaces</h1>
<h:form>
<p:editor></p:editor>
<br></br>
<p:toolbar>
<f:facet name="left">
<p:commandButton type="button" title="Save" icon="ui-icon-disk" />
<p:commandButton type="button" title="Delete" icon="ui-icon-trash" />
<p:commandButton type="button" title="Print" icon="ui-icon-print" />
</f:facet>
</p:toolbar>
</h:form>
</h:body>
</html>
I cloned the PrimeFaces Test Project: https://github.com/primefaces/primefaces-test
Entered your exact code above into test.xhtml.
I then then ran the project with mvn clean jetty:run and navigated to http://localhost:8080/primefaces-test/test.xhtml
And here is my my screenshot.
I have a working JSF page, but if I add xmlns:leaf="http://java.sun.com/jsf/composite/jsf2leaf" to it, and try to use any ot its tags, like <leaf:map center="42.120000,-72.540000" />, I get the following warning:
One or more resources have the target of 'head', but no 'head' component has been defined within the view.
Everything works fine, the map is there, I can add markers, but I can't get rid of the warning message.
My JSF page 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:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui" xml:lang="hu" lang="hu"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:leaf="http://java.sun.com/jsf/composite/jsf2leaf"
>
<f:view contentType="text/html">
<f:metadata>
<f:viewAction action="#{dashboardController.readURLParam()}"/>
</f:metadata>
<h:head/>
<h:body>
...
<h:form>
...
<p:panel>
...
<c:forEach>
...
<p:panel>
<leaf:map center="42.120000,-72.540000" />
</p:panel>
</c:forEach>
</p:panel>
</h:form>
</h:body>
</f:view>
found the problem, it, in the jsf2leaf.jar the map.xhtml and advancedmap.xhtml uses <head></head> instead of <h:head></h:head>, changed it, repackaged the jar file, and it works fine
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" />
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 have this working code in my webapp:
<h:button value="Edit user..." outcome="/public/user" >
<f:param name="userName" value="#{authBean.authUser}"/>
</h:button>
What it does:
It makes the button send a GET
It passes the specified parameter in the URL, making it bookmarkable.
What I need:
It should work like h:button above (send GET)
the button should look like other Primefaces buttons (eg. decorated with an image... etc).
This is the closest I could get:
<p:commandButton value="Edit user..." action="/public/user?faces-redirect=true" ajax="false" immediate="true" >
<f:param name="userName" value="#{authBean.authUser}"/>
</p:commandButton>
It sends a POST that gets redirected to the new URL with a GET. However the parameter is lost in the process.
Another idea:
<p:linkButton value="Edit user..." href="http://localhost:8080/contextpath/faces/public/user.xhtml">
<f:param name="userName" value="#{authBean.authUser}"/>
</p:linkButton>
The GET request is aborted (??? according to Firebug) and the current page is POSTed again.
What is the proper way of doing this?
UPDATE: this works (on an empty page, with no p:dataTable):
<p:linkButton value="Edit user..." href="http://localhost:8080/contextpath/faces/public/user.xhtml?userName=myusername">
but this does not:
<p:linkButton value="Edit user..." href="http://localhost:8080/contextpath/faces/public/user.xhtml?userName=myusername&secondParam=otherValue">
the latter results in:
500: javax.servlet.ServletException:
Error Parsing /sample0.xhtml: Error
Traced[line: 14] The reference to
entity "secondParam" must end with the
';' delimiter.
UPDATE2: the & should be escaped:
<p:linkButton value="Edit user..." href="http://localhost:8080/contextpath/faces/public/user.xhtml?userName=myusername&secondParam=otherValue">
and it looks good... but I still get the GET aborted and POST resent:
alt text http://img64.imageshack.us/img64/1017/primefaceslinkbutton.jpg
This is the full empty page I've been trying it with:
<?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:c="http://java.sun.com/jsp/jstl/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head />
<h:body>
<h:form>
<p:linkButton value="Click me" href="http://stackoverflow.com" />
</h:form>
</h:body>
</html>
Primefaces 2.1 release.
In PrimeFaces 2.2., we'll deprecate linkButton and introduce p:button. Issue ticket;
http://code.google.com/p/primefaces/issues/detail?id=1037
Use p:linkButton.
Update: as per your update with the code example, the URL should be specified in href attribute, not in the url attribtue. Also see the component's documentation which I linked here above.
The symptoms at least sounds like as if you're firing an asynchronous (Ajax) GET request, not a synchronous one. FireBug would then indeed give this kind of error when the request is fired on a different domain.
Don't you have some other Javascripts which are disturbing/colliding with the linkButton's default behaviour? The button is navigating by a simple onclick="window.location=newurl;".
Update 2: does it work if you test it standalone in a simple page? E.g.
<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<title>Test</title>
</h:head>
<h:body>
<p:linkButton value="test" href="http://stackoverflow.com" />
</h:body>
</html>