1

我正在尝试将 YUI2 Menu 组件实现到 JSF 中。我将它编码在一个普通的 HTML 文件中，它可以工作。

在 HTML 中工作 yui2 菜单
（来源：alvinsim.com）

但是当我将代码移植到 JSF 时，它没有正确显示。我认为这是因为 JSF 找不到 YUI2 皮肤。

在 JSF 中不工作 yui2 菜单
（来源：alvinsim.com）

我正在使用 Netbeans 7.2、Java JDK6 和 Glassfish3。我的项目结构是这样的。

Netbeans 项目结构
（来源：alvinsim.com）

下面是我的 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 也是如此），但它仍然不起作用。

有人可以指出我做错了什么吗？

4

1 回答 1

1

用firebug和IE9自带的调试工具调试了几轮，代码切换，终于明白为什么不行了。这是一个简单的错误，在将我的代码从 HTML 移植到 JSF 时被忽略了。

它不起作用的原因是我遗漏了在<h:body />或父元素中加载 YUI 皮肤的代码。所以<h:body />标签应该看起来像<h:body styleClass="yui-skin-sam">.

最终结果如下

在 JSF 中工作 yui 菜单
（来源：alvinsim.com）

于 2012-11-29T07:42:06.203 回答