Implementing YUI2 Menu Component in JSF

Question

I am trying to implement a YUI2 Menu component into a JSF. I coded it in a normal HTML file and it works.

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.

I am using Netbeans 7.2, Java JDK6, and Glassfish3. My project structure is like this.

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?

The `` has indeed some implications (which I will explain in detail once the cause of your problem is more clear), but the `` should really work just fine this way. Are you sure you're not looking at a cached version in browser? — BalusC, Nov 28 '12 at 12:17
@BalusC I cleared the browser cache and ran it again. But unfortunately still the same. I noticed that in yui/assets/skins/sam directory there are also PNG files. And in this directory also, there is a menu.css which references these PNG files as background images and sprites. At the moment I am guessing that the CSS file is not able to locate the PNG files. — Alvin Sim, Nov 29 '12 at 02:40
You can use Firebug or a similar tool to validate exactly which file is loading or not. Also you'll see the exact path the browser is trying to load these files. — Alexandre Lavoie, Nov 29 '12 at 03:33
@AlvinSim , take a look at JSF Component Library , like primefaces http://www.primefaces.org/showcase/ui/home.jsf — Daniel, Nov 29 '12 at 06:36
OH GOD! I feel so embarrass.. it's one of those days I left something out without realizing it.. So sorry everyone for the trouble.. I will post my answer now — Alvin Sim, Nov 29 '12 at 07:31
@Daniel I did. Actually in our project we are using PrimeFaces. For our menu bar, we wanted to use PrimeFaces' menubar component. But, some of our 2nd level submenu is super long. Using PrimeFaces' menubar for that will force the submenu to go all the way to the top hiding the top few menu items. After further exploration, we found that YUI2's menu component allows scrolling for long submenus. If there is no such requirement for long submenus, I would be very glad to use PrimeFaces' components. — Alvin Sim, Nov 29 '12 at 07:49
okay , there is also this : http://www.primefaces.org/showcase/ui/megaMenu.jsf — Daniel, Nov 29 '12 at 08:09
Ya, but the outcome wasn't what the manager was looking for. — Alvin Sim, Nov 29 '12 at 08:25

score 1 · Accepted Answer · edited Aug 27 '19 at 13:10

1

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)}

edited Aug 27 '19 at 13:10

Glorfindel

21,988
13
81
109

answered Nov 29 '12 at 07:42

Alvin Sim

338
1
9
21

You'll only miss the JSF resource relocation feature this way. You should really use the ``. You can use the `styleClass` attribute to specify the style class: ``. – BalusC Nov 29 '12 at 11:22

Implementing YUI2 Menu Component in JSF

1 Answers1