I am trying to implement a YUI2 Menu component into a JSF. I coded it in a normal HTML file and it works.
(source: alvinsim.com)
But when i ported the code to JSF, it didn’t show properly. I think it is because JSF couldn’t find the YUI2 skin.
(source: alvinsim.com)
I am using Netbeans 7.2, Java JDK6, and Glassfish3. My project structure is like this.
(source: alvinsim.com)
Below is my JSF code.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>YUI2 Menu</title>
<h:outputStylesheet name="styles.css" library="css" />
<!-- ===== YUI Library Implementation ===== -->
<!-- Fonts CSS - Recommended but not required -->
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/yui/fonts/fonts-min.css" />
<!-- <h:outputStylesheet name="yui/fonts/fonts-min.css" /> -->
<!-- Core + Skin CSS -->
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/yui/menu/assets/skins/sam/menu.css" />
<!-- <h:outputStylesheet name="yui/menu/assets/skins/sam/menu.css" /> -->
<!-- Dependencies -->
<script src="#{facesContext.externalContext.requestContextPath}/resources/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="#{facesContext.externalContext.requestContextPath}/resources/yui/container/container_core-min.js">
</script>
<!-- <h:outputScript name="yui/yahoo-dom-event/yahoo-dom-event.js" />
<h:outputScript name="yui/container/container_core-min.js" /> -->
<!-- Source File -->
<!-- <script src="#{facesContext.externalContext.requestContextPath}/resources/yui/menu/menu-min.js"></script> -->
<h:outputScript name="yui/menu/menu-min.js" />
<!-- ===== END ===== -->
</h:head>
<h:body>
<div id="mymenubar" class="yuimenubar yuimenubarnav">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#file">File</a>
<div id="file" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
New File <em class="helptext">Ctrl + N</em>
</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">New Folder</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#open">Open <em class="helptext">
Ctrl + O</em>
</a>
<div id="open" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 1</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 2</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 3</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Application 4</a>
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Print <em class="helptext">Ctrl + P</em>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#">Edit</a>
<div id="pim" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Undo<em class="helptext">Ctrl + Z</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Redo<em class="helptext">Ctrl + Y</em></a>
</li>
</ul>
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Cut<em class="helptext">Ctrl + X</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Copy<em class="helptext">Ctrl + C</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Paste<em class="helptext">Ctrl + V</em>
</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Delete<em class="helptext">Del</em></a>
</li>
</ul>
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Select All<em class="helptext">Ctrl + A</em>
</a>
</li>
</ul>
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#"> Find<em class="helptext">Ctrl + F</em></a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">
Find Again<em class="helptext">Ctrl + G</em>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#">Very Long Menu</a>
<div id="longMenu" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Very, very long Item 1</a>
</li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 2</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 3</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 4</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 5</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 6</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 7</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 8</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 9</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 10</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 11</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 12</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 13</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 14</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 15</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 16</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 17</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 18</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 19</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Item 20</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<script>
YAHOO.util.Event.onDOMReady(function () {
// Instantiate a MenuBar, passing in the id of the HTML element
// representing the MenuBar.
var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
autosubmenudisplay: true,
maxheight: 300
});
// Render the MenuBar instance
oMenuBar.render();
});
</script>
</h:body>
In my code, I did change from using the <link /> tag to <h:outputStylesheet /> tag (and same for the JavaScript), and it still doesn’t work.
Can someone point me where I am doing it wrong?
After several rounds of debugging using firebug and IE9’s own debugging tool, and code switching, I finally realized why it didn’t work. It was a simple mistaken which was overlooked when porting my code from HTML to JSF.
The reason it didn’t work is because I left out the code to load the YUI skin in the
<h:body />or parent element. So the<h:body />tag should look like<h:body styleClass="yui-skin-sam">.And the end result is below
(source: alvinsim.com)