This question already has an answer here:
Why is my p:progressBar not displayed, only the number?
(1 answer)
Closed 7 years ago.
When I tried to render an p:progressBar in a site with mobile render kit enabled, the component didn't render (I see my own css styling of the component though).
I simply get two 404s in my browser's error console:
404 (Not Found) (undefined.css.xhtml, line 0) $HOSTADRESS$/javax.faces.resource/undefined/undefined.css.xhtml?ln=primefaces&v=5.1
404 (Not Found) (undefined.js.xhtml, line 0) $HOSTADRESS$/javax.faces.resource/undefined/undefined.js.xhtml?ln=primefaces&v=5.1
I'm sure this is a bug and I will open an issue (Issue 7717). I just wanted to display a static progress bar, is there a simple workaround for this use case? Btw. I'm using PrimeFaces 5.1
Here's a SSCCE:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:pm="http://primefaces.org/mobile">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<f:view locale="de_DE" encoding="UTF-8" contentType="text/html" renderKitId="PRIMEFACES_MOBILE">
<h:body>
<p:commandButton value="Renders"/>
<!--doesn't render-->
<p:progressBar value="#{70}" labelTemplate="#{70}"/>
</h:body>
</f:view>
</html>
Today I tackled this old problem again and found a workaround in this answer.
So I added
<h:outputScript target="body">
var originalPrimeFacesCw = PrimeFaces.cw;
PrimeFaces.cw = function(name, id, options, resource) {
resource = resource || name.toLowerCase();
originalPrimeFacesCw.apply(this, [name, id, options, resource]);
};
</h:outputScript>
to my mobile template and set the progressbar's background color via css:
.ui-progressbar .ui-widget-header {
background-color: SOMECOLOR;
}
At first I used <o:onloadScript> to load the workaround script, but this get's get on every ajax request and thus results in a RangeError if you're doing some of these on your page.
I still hope for an official fix though.
Related
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'm using JSF and When adding connect button to my index.html in Google Chrome as follows;
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ipp=""
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">
<f:view>
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<script type="text/javascript"
src="https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere.js">
intuit.ipp.anywhere.setup({
menuProxy: 'http://com.example/dispatch/BlueDotMenu',
grantUrl: 'http://com.example/dispatch/RequestOAuthToken' });
</script> </h:head>
</f:view>
</html>
I get the follwoing error;
The value of the attribute "xmlns:ipp" is invalid. Prefixed namespace bindings may not be empty.
Is there a namespace value I can use?
I've got a workaround for JSF here. Worked for me.
You need to rewrite a bit the JavaScript file that QBO provides for the button and menu functionality.
You can download it from here.
If you have implemented all the OAuth and stuff, then you just need to add the tags without 'ipp' prefix. Just insert like this:
<connectToIntuit></connectToIntuit>
<blueDot></blueDot>
No namespaces needed. JSF will just ignore unknown tag and the JS have the ability to insert html and events into it.
I've downloaded easyUI JS as well from here. Insert the JS-es you've downloaded like this:
<script type="text/javascript" src="#{request.contextPath}/js/jquery/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="#{request.contextPath}/js/intuit.ipp.anywhere.js"></script>
It is required to insert jQuery version not less than 1.4.4.
The last thing left is the call of 'setup' js-function:
<script>
intuit.ipp.anywhere.setup({
menuProxy: '#{request.scheme}://#{request.serverName}#{request.contextPath}/qb_blueDotMenu.jsf',
grantUrl: '#{request.scheme}://#{request.serverName}#{request.contextPath}/qb_requestToken.jsf'
});
</script>
where qb_blueDotMenu.jsf - is the servlet that render BlueDotMenu and
qb_requestToken.jsf - is the RequestTokenServlet that gets the OAuth request token like show in QuickBooks Sample App.
Let me know if you got questions.
This is probably late, but I had the same issue and solved it by displaying the ipp:connectToIntuit button with
<h:outputText value="#{bean.ippConnect}" escape="false" />
I have entered the following code:
<h:outputStylesheet library="css" name="style.css" target="body" />
The problem is that it is giving me an error on target="body" saying:
The attribute target is not defined in the component outputStylesheet
In the html part if the html I have the following:
<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"
xmlns:pe="http://primefaces.org/ui/extensions">
How can I solve this issue?
Thanks
Look in the tag documentation of <h:outputStylesheet>. It indeed doesn't list target attribute. Perhaps you're confusing with the one from <h:outputScript>.
The <h:outputStylesheet> is by default always relocated to HTML <head>, for the very simple reason because it's illegal to have a <style> or <link> element inside the HTML <body>. The <h:outputScript> however is by default located at exactly the same location as where it's been declared. The <script> element as generated by it may be placed anywhere in the HTML <head> or <body>. You can let JSF auto-relocate this by setting the target attribute to head (will then appear in <head>) or body (will then appear in end of <body>).
Just remove it. If target="body" would theoretically have worked, it would only end up in illegal HTML output anyway.
<h:outputStylesheet library="css" name="style.css" />
Unrelated to the concrete problem, a resource library name of "css" is semantically wrong. Put it in the resource name.
<h:outputStylesheet name="css/style.css" />
See also:
What is the JSF resource library for and how should it be used?
I'm using the JSF 2.2. I can't add .css in my .xhtml page.
Code in .xhtml
<h:head>
<title>Login Page</title>
</h:head>
<h:body>
<h:outputStylesheet library="resources/css" name="style.css" id="cascade1"/>
Also I tried declare it into a <h:head> with the same result.
FireBug is seeing this resource but it is showing message:
Reload the page to get source for .../javax.faces.resource/style.css.xhtml;...
There is no need to use the library attribute:
<h:outputStylesheet name="css/style.css" />
This way, the JSF servlet expects the style.css file to be in /resources/css path.
I need my application to run in IE9 document standard and I cannot figure out why it automatically renders in IE8 document standard.
I'm using JSF 2.1.17 and Primefaces 3.4, running in Glassfish 3.1.2. My IDE is Netbeans-7.1.2. When I open the developer tools in IE, under the "HTML" tab it shows:
<--!DOCTYPE html-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
However, under the "Script" tab it shows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML lang=en xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<HEAD>
<META content="IE=8.0000" http-equiv="X-UA-Compatible">
I have looked through all my pages and templates and NO WHERE can I find the meta content="IE=8.0000" or the !DOCTYPE that is shown above. It is very odd.
All my pages have:
<!DOCTYPE html>
My main template has this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
Other pages have:
<!DOCTYPE html>
<ui:composition 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"
template="/layout/someFile.xhtml" >
Here are the things I have tried:
1) Updated the Glassfish JSF to 2.1.17, since I read that there was a bug with older versions of Mojarra that caused it to ignore the DOCTYPE.
2) I added:
<meta http-equiv="X-UA-Compatible" content="IE=9" >
to every page, hoping it would enforce IE9, but this did not work.
3) I then tried using content="IE=Edge", still no changes.
4) I changed my DOCTYPE to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
unsure if XHTML needed this strict DOCTYPE to render properly. But this did not work.
Any help would be great. I have done a lot of research trying to sort this out, however I am new to web development, so I my understanding is quite limited.
I added:
<meta http-equiv="X-UA-Compatible" content="IE=9" >
to every page, hoping it would enforce IE9, but this did not work.
According to the MSDN document on this meta tag,
The X-UA-Compatible header isn't case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.
this must appear before all other elements expect for <title> and other <meta> elements. If you investigate the JSF/PrimeFaces-generated HTML closely, you'll see that there's a PrimeFaces specific <link> element before that which would block the X-UA-Compatible header from doing its job.
PrimeFaces supports several facets for the <h:head> so that you can control the ordering of the head resources. The following should do it for you:
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
</f:facet>
Again, this is specific to PrimeFaces, not to standard JSF.