I've been learning about facelets, and I can't seem to get a simple <ui:include> tag to work.
I have the following xhtml file:
<?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"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head />
<body>
<f:view>
<h:form>
<ui:include src="header.xhtml" />
Body text here.
</h:form>
</f:view>
</body>
</html>
and the following is header.xhtml (in the same directory):
<?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:ui="http://java.sun.com/jsf/facelets">
<h:head />
<body>
<ui:composition>
<h2>Our Company</h2>
</ui:composition>
</body>
</html>
But when I open the first file in Chrome, the <h2>Our Company<\h2> does not display. What am I doing wrong?
Related
I am using Primefaces 11.0.0 and try to include a Spinner Component.
A requirement for my task is to get a WCAG 2.0 Level A. This is why the rendered input-element must have the role spinbutton.
This role should be added by spinner.js (line 371), but everytime I run my application the role of the input-element is set to textbox, and I cannot figure out why this is happening.
Even if i have a simple .xhtml-File with only the Spinner the role is textbox.
<?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" xml:lang="en" lang="en"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Title</title>
</h:head>
<h:body>
<p:spinner/>
</h:body>
</html>
Rendered output (role="textbox" instead of role="spinbutton"):
<span id="j_idt5" class="ui-spinner ui-widget ui-corner-all ui-spinner-stacked">
<input id="j_idt5_input"
name="j_idt5_input"
type="text"
class="ui-spinner-input ui-inputfield ui-state-default ui-corner-all"
autocomplete="off"
role="textbox"
aria-multiline="false"
aria-readonly="false"
aria-disabled="false"/>
<a class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only">
<span class="ui-button-text">
<span class="ui-icon ui-c ui-icon-triangle-1-n"></span>
</span>
</a>
<a class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only">
<span class="ui-button-text"><span class="ui-icon ui-c ui-icon-triangle-1-s"></span>
</span>
</a>
</span>
<div id="textarea_simulator" style="position: absolute; top: 0px; left: 0px; visibility: hidden;"></div>
Does anyone know why the role is not set correctly or where I can find a solution for this?
The role="textbox" is set by PrimeFaces.skinInput(this.input) which is executed after the right ARIA role was set. This is fixed in PrimeFaces 12 by https://github.com/primefaces/primefaces/pull/8397
See also:
https://github.com/primefaces/primefaces/blob/38c62b7eb8acf8aa5663be43b19e8a14c16f7bae/primefaces/src/main/resources/META-INF/resources/primefaces/core/core.js#L312
As Jasper de Vries mentions in his answer, this is a bug, which is fixed in PrimeFaces 12.
Workaround with Primefaces 11
I found a "hacky" workaround for this. If you are using Primefaces 11, follow these 3 steps:
Create a copy from the actual spinner.js file
Add it to the resources of the webapp (path in my case: .../webapp/resources/script/spinner.js)
Add the added script to the bottom of the page where the spinner is used (see example below)
<?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" xml:lang="en" lang="en"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Title</title>
</h:head>
<h:body>
<p:spinner/>
<h:outputScript name="script/spinner.js"/>
</h:body>
</html>
I am trying to build a template with common header/footer.
for some reason,my other pages are not showing the template
My pages:
layout/layout.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<h:html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<meta charset="ISO-8859-1"/>
<title>Test</title>
<link href="../stylesheet/template.css" rel="stylesheet" type="text/css" />
</h:head>
<h:body>
<div id="templateHearderDiv" class="templateHearder">
<h1> Test logo</h1>
</div>
<div id="content" class="contentBody">
<ui:insert name="content">
default content
</ui:insert>
</div>
<div id="templateFooterDiv" class="templateFooter">
<p> 2016-2017. All Rights Reserved</p>
</div>
</h:body>
</h:html>
CSS, stylesheet/template.css
#CHARSET "ISO-8859-1";
* { margin:0; padding:0; }
.templateHearder{
background: #FFCF75;
height: 10%;
}
.contentBody{
}
.templateFooter{
height: 10%;
background: #FFCF75;
}
.contentBody{
margin-left: 20%;
margin-right: 20%;
}
.logoFont{
font-family: "Impact";
padding-top: 10px;
}
home.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="/layout/layout.xhtml">
<ui:define name="content">
<h2>This is page1 content</h2>
</ui:define>
</ui:composition>
home.xhtml is my welcome page, when i see that page the template is not shown.
Any clue?
The problem was servlet mappings in web.xml.
Understanding their significance.
We need default servlet handler(depends on the server).
The default servlet helps listing out directories,static resources etc.
I missed default servlet mappings and for that reason the template was not loaded.
I am experiencing quiet an unusual issue with salesforce when I put it in a html frame, when I click on the login button link, it is not loading the login page. but every other link is working perfectly fine, as soon as I take it out of the html frame it works, is there something that can be done to fix this issue by any chance? I have looked and been unsuccessful.
So i got 2 .html files 1 named Script, which is just plain simple text to be displayed in the left frame, and the main frame is the salesforce link.
Then the third html file is the frame file which links both html files to load into one.
The code for all this is below, please let me know if you are successful, Thanks.
script.html
<!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">
<head>
<meta http-equiv="refresh" content="60; url=script.html" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Script</title>
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
-->
</style>
</head>
<body>
<p> hello how are you </p>
</body>
</html>
salesForce.html
<!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">
<head>
<meta http-equiv="refresh" content="0; url=http://www.salesforce.com/au/" />
<title>Sales Force</title>
</head>
<body>
</body>
</html>
salesForceScript.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sales Force & Script</title>
</head>
<frameset rows="*" cols="277*,973*" framespacing="0" frameborder="no" border="0">
<frame src="script.html" name="leftFrame" id="leftFrame" title="leftFrame" />
<frame src="salesForce.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
Look at the following code:
<?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">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<title></title>
<style type="text/css">
/*<![CDATA[*/
body.c1 {font-size:66pt}
/*]]>*/
</style>
</head>
<body id="body" class="ignoreWebkitDefault c1">
A 🔔
</body>
</html>
When I run this in Safari on my MacBook, both the character and the pictograph get resized. On my iPad, only the character gets resized. Any workaround?
Here is my html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
kjkj
</div>
</body>
</html>
Lve demo:
http://tinkerbin.com/O2MwkUTj
Why is there a blank line at the top of my web page?
I noticed that removing the div, or removing the doctype fixes the problem...
It is because Tinkerbin is getting confused.
If you put your HTML into a file it works fine. In Tinkerbin, the following happens in the preview:
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div>
kjkj
</div>
</body>
I presume it is removing some tags such as <html>, <head> and <body> when outputting your page in order to display inside a page created for the preview.