ICEfaces MenuBar horizontal orientation doesn't work - jsf

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.

Related

ICEfaces configured for view /index.xhtml but h:head and h:body components are required

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.

Can the new Facelet Tag Libraries URI's be used in older JSF versions?

I read somewhere that the Facelet Tag Libraries URI's changed from http://java.sun.com/jsf/* to http://xmlns.jcp.org/jsf/*, so that means the new namespaces applies only for the new specification(JSF 2.2) or they can or should be used in older versions like 2.0, 2.1 or 1.x?
for example:
Library Old URI New URI
Composite Components http://java.sun.com/jsf/composite http://xmlns.jcp.org/jsf/composite
Faces Core http://java.sun.com/jsf/core http://xmlns.jcp.org/jsf/core
HTML_BASIC http://java.sun.com/jsf/html http://xmlns.jcp.org/jsf/html
JSTL Core http://java.sun.com/jsp/jstl/core http://xmlns.jcp.org/jsp/jstl/core
Facelets Templating http://java.sun.com/jsf/facelets http://xmlns.jcp.org/jsf/facelets
EDIT
To make the question more understandable nothing like a snippet of code:
<?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://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>test</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<link rel="stylesheet" type="text/css" title="Style" href="theme/stylesheet.css" />
</h:head>
<h:body>
<h:form id="form1" styleClass="form">
<h:inputText id="text1" styleClass="inputText"></h:inputText>
</h:form>
</h:body>
</html>
The previous code would be valid for JSF 2.0? notice the taglibs:
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
Thanks.
From what I've seen here : http://www.oracle.com/webfolder/technetwork/jsc/xml/ns/index.html, the canonical names for the large majority of taglibs stays http://java.sun.com/
However, as stated, you can use the new URIs since they created an alias.

JSF template: missing layout

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=...>.

JSF Facelets how to include external html?

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>

IE9 rendering IE8 document standard

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.

Resources