I want to implement a pacman game in an jsf/primefaces project.
The game can be found here.
Here is my jsf page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns=""
xmlns:h=""
xmlns:f=""
xmlns:ui=""
xmlns:p="">
<h:head>
<title>Screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<style type="text/css">
@font-face {
font-family: 'BDCartoonShoutRegular';
src: url('BD_Cartoon_Shout-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#pacman {
height: 450px;
width: 342px;
margin: 20px auto;
}
#shim {
font-family: BDCartoonShoutRegular;
position: absolute;
visibility: hidden
}
h1 {
font-family: BDCartoonShoutRegular;
text-align: center;
}
body {
width: 342px;
margin: 0px auto;
font-family: sans-serif;
}
a {
text-decoration: none;
}
</style>
</h:head>
<h:body>
<div id="shim">shim for font face</div>
<h1>HTML5 Pacman</h1>
<a href="/">Writeup</a> |
Code on <a href="/">Github</a>
<div id="pacman"></div>
<h:outputScript src="../pacman.js"/>
<h:outputScript src="../modernizr-1.5.min.js"/>
<script>
// <![CDATA[
var el = document.getElementById("pacman");
if (Modernizr.canvas && Modernizr.localstorage &&
Modernizr.audio && (Modernizr.audio.ogg || Modernizr.audio.mp3)) {
window.setTimeout(function () { PACMAN.init(el, "./"); }, 0);
} else {
el.innerHTML = "Sorry, needs a decent browser<br /><small>" +
"(firefox 3.6+, Chrome 4+, Opera 10+ and Safari 4+)</small>";
}
// ]]>
</script>
</h:body>
</html>
I get no exceptions in my page. However, when I load the page it looks like that:
as you can see the game does not gets added!
Any idea how to fix that?
UPDATE
when I do:
<script src="pacman.js"></script>
<script src="modernizr-1.5.min.js"></script>
I also get no output... UPDATE
My folder structure:
I want to implement a pacman game in an jsf/primefaces project.
The game can be found here.
Here is my jsf page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml"
xmlns:h="http://java.sun./jsf/html"
xmlns:f="http://java.sun./jsf/core"
xmlns:ui="http://java.sun./jsf/facelets"
xmlns:p="http://primefaces/ui">
<h:head>
<title>Screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<style type="text/css">
@font-face {
font-family: 'BDCartoonShoutRegular';
src: url('BD_Cartoon_Shout-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#pacman {
height: 450px;
width: 342px;
margin: 20px auto;
}
#shim {
font-family: BDCartoonShoutRegular;
position: absolute;
visibility: hidden
}
h1 {
font-family: BDCartoonShoutRegular;
text-align: center;
}
body {
width: 342px;
margin: 0px auto;
font-family: sans-serif;
}
a {
text-decoration: none;
}
</style>
</h:head>
<h:body>
<div id="shim">shim for font face</div>
<h1>HTML5 Pacman</h1>
<a href="http://arandomurl./">Writeup</a> |
Code on <a href="http://arandomurl./">Github</a>
<div id="pacman"></div>
<h:outputScript src="../pacman.js"/>
<h:outputScript src="../modernizr-1.5.min.js"/>
<script>
// <![CDATA[
var el = document.getElementById("pacman");
if (Modernizr.canvas && Modernizr.localstorage &&
Modernizr.audio && (Modernizr.audio.ogg || Modernizr.audio.mp3)) {
window.setTimeout(function () { PACMAN.init(el, "./"); }, 0);
} else {
el.innerHTML = "Sorry, needs a decent browser<br /><small>" +
"(firefox 3.6+, Chrome 4+, Opera 10+ and Safari 4+)</small>";
}
// ]]>
</script>
</h:body>
</html>
I get no exceptions in my page. However, when I load the page it looks like that:
as you can see the game does not gets added!
Any idea how to fix that?
UPDATE
when I do:
<script src="pacman.js"></script>
<script src="modernizr-1.5.min.js"></script>
I also get no output... UPDATE
My folder structure:
Share Improve this question edited May 2, 2013 at 1:33 BalusC 1.1m376 gold badges3.7k silver badges3.6k bronze badges asked Apr 30, 2013 at 15:54 maximusmaximus 11.6k30 gold badges96 silver badges124 bronze badges2 Answers
Reset to default 3The <h:outputScript> tag can be used to load script from resources folder only.
If you wish to load from other folder outside resources folder, use this code:
<script type="text/javascript" src="#{request.contextPath}/path/to/js"></script>
where request.contextPath is the context path of your site (for example: /pacman).
Example:
if your js file is in this path: /waitingScreen/audio/pacman.js
corresponding code:
<script type="text/javascript" src="#{request.contextPath}/waitingScreen/audio/pacman.js"></script>
(request.contextPath is already defined by JSF, you could use it)
The <h:outputScript> tag is also useful to load existing script and resources from primeFaces, example, to load jquery:
<h:outputScript library="primefaces" name="jquery/jquery.js" />
(The library attribute in meaning of the path of a folder in resources folder)
That's a fully expected behaviour. There is no src attribute define within <h:outputScript> tag. You have to use its name attribute like this:
<h:outputScript name="pacman.js"/>
As a side note, that of course means that your file is stored at webapp/resources folder of your web application.