Реализация компонента меню YUI2 в JSF

Я пытаюсь реализовать компонент меню YUI2 в JSF. Я закодировал его в обычном HTML-файле, и он работает.

http://www.alvinsim.com/stackru/img/html_yuiMenu.png

Но когда я перенес код в JSF, он не показывался должным образом. Я думаю, это потому, что JSF не смог найти скин YUI2.

http://www.alvinsim.com/stackru/img/jsf_yuiMenu.png

Я использую Netbeans 7.2, Java JDK6 и Glassfish3. Моя структура проекта такая.

http://www.alvinsim.com/stackru/img/projectFileStructure.png

Ниже мой код JSF.

<?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>

В моем коде я изменил использование <link /> тег к <h:outputStylesheet /> тег (и то же самое для JavaScript), и он все еще не работает.

Может кто-нибудь указать мне, где я делаю это неправильно?

1 ответ

Решение

После нескольких раундов отладки с использованием Firebug и собственного инструмента отладки IE9 и переключения кода я наконец понял, почему это не сработало. Это была простая ошибка, которую упустили из виду при переносе моего кода из HTML в JSF.

Причина, по которой это не сработало, в том, что я пропустил код для загрузки обложки YUI в <h:body /> или родительский элемент. Итак <h:body /> тег должен выглядеть так <h:body styleClass="yui-skin-sam">,

И конечный результат ниже

http://www.alvinsim.com/stackru/img/jsf_yuiMenu_ok.png

Другие вопросы по тегам