QuickBooks Online API - Add Connect Button - jsf

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" />

Related

OmniFaces CombinedResourceHandler does not combine JavaScript resources

I would like to use the OmniFaces CombinedResourceHandler to stream resources in one go.
I registered it in faces-config.xml without any additional configuration parameters as described in CombinedResourceHandler documentation.
While it works fine with CSS resources, it does nothing with JavaScript resources. Here are my tests:
<!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"
xmlns:o="http://omnifaces.org/ui">
<h:head>
<title>CombinedResourceHandlerTest</title>
<h:outputStylesheet name="css/bootstrap-3.3.5/bootstrap.css"/>
<h:outputStylesheet name="css/main.css" />
<h:outputScript name="js/jquery/jquery.min.js"/>
<h:outputScript name="js/bootstrap-3.3.5/bootstrap.min.js"/>
</h:head>
<h:body>
<f:view>
<h2>CombinedResourceHandlerTest</h2>
</f:view>
</h:body>
Output:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="j_idt2">
<title>CombinedResourceHandlerTest</title>
<script type="text/javascript" src="/testApp/javax.faces.resource/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/testApp/javax.faces.resource/js/bootstrap-3.3.5/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="/testApp/javax.faces.resource/eNpLLi7WT8rPLykuKUos0DXWM9YzRfD1kouLa4BYPzcxMw_EAQCLpxEP.css?ln=omnifaces.combined&v=1480321351184">
</head>
Tried with attribute target="head":
<h:head>
<h:outputScript name="js/jquery/jquery.min.js" target="head"/>
</h:head>
...
Output: (scripts are completly missing):
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="j_idt2">
<title>CombinedResourceHandlerTest</title>
<link type="text/css" rel="stylesheet" href="/testApp/javax.faces.resource/eNpLLi7WT8rPLykuKUos0DXWM9YzRfD1kouLa4BYPzcxMw_EAQCLpxEP.css?ln=omnifaces.combined&v=1480321351184">
</head>
...
</html>
The scripts are also missing when i move them on the top of the body:
<h:body>
<h:outputScript name="js/jquery/jquery.min.js" target="head"/>
....
</h:body>
After a look into the source i also tried with
<o:deferredScript name="js/jquery/jquery.min.js"/>
After inspecting the output for this case, I saw that the combinend script only contains the first script in order and the console shows "ReferenceError: OmniFaces is not defined":
<body>
<script type="text/javascript">OmniFaces.DeferredScript.add('/testApp/javax.faces.resource/eNpLL81JLE7OsMoq1s8qLE0tqoRSermZeXpZxQDDagwa.js?ln=omnifaces.combined&v=0');</script>
</body>
And I noticed, that even jsf.js is not included when having the CombinedResourceHandler active. the browser console tells "mojarra is not defined".
What am I doing wrong? Thanks in advance!
My environment is: Mojarra 2.2.12, Omnifaces 2.5.1, Tomcat 8.
I reproduced a very similar issue last weekend. The cause boiled down to that Mojarra was initialized twice on a Tomcat 8 server and thus corrupted the one and other. You can confirm this by looking at the server log and notice that among others Mojarra version, OmniFaces version and PrimeFaces version are logged twice.
Please doubleverify if you have only one Mojarra instance and that you do not have the ConfigureListener entry in web.xml like below, as it's by default autoregistered already.
<!-- You MUST remove this one from web.xml! -->
<!-- This is actually a workaround for buggy GlassFish3 and Jetty servers. -->
<!-- When leaving this in and you're targeting Tomcat, you'll run into trouble. -->
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
See also:
Configuration of com.sun.faces.config.ConfigureListener
How to properly install and configure JSF libraries via Maven?
For anyone else who runs into this issue I was also running into this issue using Jboss EAP 7.1.
I accidentally had the OmniFacesCombinedResourceHandler declared in a faces-config.xml in a Web Fragment JAR and in the faces-config.xml of the web application itself. Having this declared twice caused the same symptoms as the issue listed above. Once I removed it from the webapp faces-config.xml it started working.
I raised the issue on the OmniFaces issues to possibly detect and raise an error if this situation occurs: https://github.com/omnifaces/omnifaces/issues/504

JSF Primefaces datatable appearance [duplicate]

I created a JSF page with PrimeFaces components. The project runs fine, but the PrimeFaces UI look and feel is completely missing. I'm only noticing below message in server log:
One or more resources has the target of 'head' but not 'head' component has been defined within the view
What does this mean and how can I fix the PrimeFaces UI styling?
This means that you're using plain HTML <head> instead of JSF <h:head> in your XHTML template. The JSF <h:head> allows automatic inclusion of CSS/JS resources in the generated HTML <head> via #ResourceDependency annotations. PrimeFaces as being a jQuery based JSF component library needs to auto-include some jQuery/UI JS/CSS files and this really requires a <h:head>.
So, search for a
<head>
<title>Some title</title>
...
</head>
in your templates and replace it by
<h:head>
<title>Some title</title>
...
</h:head>
See also:
What's the difference between <h:head> and <head> in Java Facelets?
Unable to understand <h:head> behaviour
How to programmatically add JS and CSS resources to <h:head>
How to include another XHTML in XHTML using JSF 2.0 Facelets?

Primefaces: ProgressBar doesn't render with mobile render kit [duplicate]

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.

Can I add a meta tag to a particular page that is using templates

I have a page that uses a template
<ui:composition template="/WEB-INF/facelets/templates/clientPage.xhtml">
I was hoping to only render the compatibility view for this particular page using the meta tag
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
The tag does not work unless I add it to the root template page. Is there a way I can add it to specific pages that use the template.
Declare an <ui:insert> in the master template at the desired location:
clientPage.xhtml
<!DOCTYPE html>
<html ...>
...
<h:head>
<ui:insert name="head-meta" />
...
</h:head>
...
</html>
Extend the master template with another master template:
i18ClientPage.xhtml
<ui:composition template="/WEB-INF/facelets/templates/ie8ClientPage.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<ui:define name="head-meta">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
</ui:define>
</ui:composition>
Finally let those template clients use this master template instead.

ICEfaces MenuBar horizontal orientation doesn't work

i am using iceFaces 2.0.2
here's what i did:
<?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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:pretty="http://ocpsoft.com/prettyfaces"
xmlns:ice="http://www.icesoft.com/icefaces/component">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"></meta>
<link href="./xmlhttp/css/xp/xp.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ui:composition>
<h1>
<h:outputText value="my application" />
</h1>
<pretty:link mappingId="link">
some link
</pretty:link>
<ice:menuBar id="menuBar" orientation="Horizontal">
<ice:menuItem value="menuItem"></ice:menuItem>
<ice:menuItem value="menuItem2"></ice:menuItem>
</ice:menuBar>
</ui:composition>
</body>
</html>
above is a header file made with facelets, and the menu items appears vertically, please advise why the horizontal orientation doesn't work ?
Horizontal orientation is default, so you dont have to specify that explicitly.
Also try defining that in lower case, if you must define that.
Please make sure you have the correct CSS that is being used by it.
it was my mistake by giving the menubar a css class that was affecting the positioning.
You have to test your page on google chrome, the orientation will Work. I'm having the same issue with FireFox and IE, but not with google chrome. May be it's an icefaces bug.

Resources