Databases
StackOverflow2013
Postsdbo
POImplementing YUI2 Menu Component in JSF
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POImplementing YUI2 Menu Component in JSF
    primarykey
    data
    text
    <p>I am trying to implement a YUI2 Menu component into a JSF. I coded it in a normal HTML file and it works. </p> <p><a href="http://www.alvinsim.com/stackoverflow/img/html_yuiMenu.png" rel="nofollow noreferrer">working yui2 menu in HTML http://www.alvinsim.com/stackoverflow/img/html_yuiMenu.png</a></p> <p>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.</p> <p><a href="http://www.alvinsim.com/stackoverflow/img/jsf_yuiMenu.png" rel="nofollow noreferrer">not working yui2 menu in JSF http://www.alvinsim.com/stackoverflow/img/jsf_yuiMenu.png</a></p> <p>I am using Netbeans 7.2, Java JDK6, and Glassfish3. My project structure is like this. </p> <p><a href="http://www.alvinsim.com/stackoverflow/img/projectFileStructure.png" rel="nofollow noreferrer">Netbeans Project Structure http://www.alvinsim.com/stackoverflow/img/projectFileStructure.png</a></p> <p>Below is my JSF code.</p> <pre><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt; &lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"&gt; &lt;h:head&gt; &lt;title&gt;YUI2 Menu&lt;/title&gt; &lt;h:outputStylesheet name="styles.css" library="css" /&gt; &lt;!-- ===== YUI Library Implementation ===== --&gt; &lt;!-- Fonts CSS - Recommended but not required --&gt; &lt;link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/resources/yui/fonts/fonts-min.css" /&gt; &lt;!-- &lt;h:outputStylesheet name="yui/fonts/fonts-min.css" /&gt; --&gt; &lt;!-- Core + Skin CSS --&gt; &lt;link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/resources/yui/menu/assets/skins/sam/menu.css" /&gt; &lt;!-- &lt;h:outputStylesheet name="yui/menu/assets/skins/sam/menu.css" /&gt; --&gt; &lt;!-- Dependencies --&gt; &lt;script src="#{facesContext.externalContext.requestContextPath}/resources/yui/yahoo-dom-event/yahoo-dom-event.js"&gt;&lt;/script&gt; &lt;script src="#{facesContext.externalContext.requestContextPath}/resources/yui/container/container_core-min.js"&gt; &lt;/script&gt; &lt;!-- &lt;h:outputScript name="yui/yahoo-dom-event/yahoo-dom-event.js" /&gt; &lt;h:outputScript name="yui/container/container_core-min.js" /&gt; --&gt; &lt;!-- Source File --&gt; &lt;!-- &lt;script src="#{facesContext.externalContext.requestContextPath}/resources/yui/menu/menu-min.js"&gt;&lt;/script&gt; --&gt; &lt;h:outputScript name="yui/menu/menu-min.js" /&gt; &lt;!-- ===== END ===== --&gt; &lt;/h:head&gt; &lt;h:body&gt; &lt;div id="mymenubar" class="yuimenubar yuimenubarnav"&gt; &lt;div class="bd"&gt; &lt;ul class="first-of-type"&gt; &lt;li class="yuimenubaritem first-of-type"&gt; &lt;a class="yuimenubaritemlabel" href="#file"&gt;File&lt;/a&gt; &lt;div id="file" class="yuimenu"&gt; &lt;div class="bd"&gt; &lt;ul&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#"&gt; New File &lt;em class="helptext"&gt;Ctrl + N&lt;/em&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#"&gt;New Folder&lt;/a&gt; &lt;/li&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#open"&gt;Open &lt;em class="helptext"&gt; Ctrl + O&lt;/em&gt; &lt;/a&gt; &lt;div id="open" class="yuimenu"&gt; &lt;div class="bd"&gt; &lt;ul class="first-of-type"&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#"&gt;Application 1&lt;/a&gt; &lt;/li&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#"&gt;Application 2&lt;/a&gt; &lt;/li&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#"&gt;Application 3&lt;/a&gt; &lt;/li&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#"&gt;Application 4&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#"&gt; Print &lt;em class="helptext"&gt;Ctrl + P&lt;/em&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class="yuimenubaritem first-of-type"&gt; &lt;a class="yuimenubaritemlabel" href="#"&gt;Edit&lt;/a&gt; &lt;div id="pim" class="yuimenu"&gt; &lt;div class="bd"&gt; &lt;ul class="first-of-type"&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#"&gt; Undo&lt;em class="helptext"&gt;Ctrl + Z&lt;/em&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#"&gt; Redo&lt;em class="helptext"&gt;Ctrl + Y&lt;/em&gt;&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;ul&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#"&gt; Cut&lt;em class="helptext"&gt;Ctrl + X&lt;/em&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#"&gt; Copy&lt;em class="helptext"&gt;Ctrl + C&lt;/em&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#"&gt; Paste&lt;em class="helptext"&gt;Ctrl + V&lt;/em&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#"&gt; Delete&lt;em class="helptext"&gt;Del&lt;/em&gt;&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;ul&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#"&gt; Select All&lt;em class="helptext"&gt;Ctrl + A&lt;/em&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;ul&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#"&gt; Find&lt;em class="helptext"&gt;Ctrl + F&lt;/em&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#"&gt; Find Again&lt;em class="helptext"&gt;Ctrl + G&lt;/em&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class="yuimenubaritem first-of-type"&gt; &lt;a class="yuimenubaritemlabel" href="#"&gt;Very Long Menu&lt;/a&gt; &lt;div id="longMenu" class="yuimenu"&gt; &lt;div class="bd"&gt; &lt;ul&gt; &lt;li class="yuimenuitem"&gt; &lt;a class="yuimenuitemlabel" href="#"&gt;Very, very long Item 1&lt;/a&gt; &lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 4&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 5&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 6&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 7&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 8&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 9&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 10&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 11&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 12&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 13&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 14&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 15&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 16&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 17&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 18&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 19&lt;/a&gt;&lt;/li&gt; &lt;li class="yuimenuitem"&gt;&lt;a class="yuimenuitemlabel" href="#"&gt;Item 20&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;script&gt; 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(); }); &lt;/script&gt; &lt;/h:body&gt; </code></pre> <p></p> <p>In my code, I did change from using the <code>&lt;link /&gt;</code> tag to <code>&lt;h:outputStylesheet /&gt;</code> tag (and same for the JavaScript), and it still doesn't work.</p> <p>Can someone point me where I am doing it wrong? </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAlvin Sim
    1. USAlvin Sim
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POImplementing YUI2 Menu Component in JSF
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThe `<h:outputStylesheet>` has indeed some implications (which I will explain in detail once the cause of your problem is more clear), but the `<link>` should really work just fine this way. Are you sure you're not looking at a cached version in browser?
      singulars
      1. POImplementing YUI2 Menu Component in JSF
      1. USBalusC
    2. CO@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.
      singulars
      1. POImplementing YUI2 Menu Component in JSF
      1. USAlvin Sim
    3. COYou 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.
      singulars
      1. POImplementing YUI2 Menu Component in JSF
      1. USAlexandre Lavoie
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload