Easy Menu Custom Control


<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:this.dataContexts>
		<xp:dataContext var="menuContent">
			<xp:this.value><![CDATA[#{javascript:			
				var list:java.util.ArrayList = compositeData.menuEntry;
				var list2:java.util.Vector = compositeData.menuEntries;
				var vec:java.util.Vector = new java.util.Vector();
				var texts:java.util.Vector = new java.util.Vector();
				var links:java.util.Vector = new java.util.Vector();
				if (list2 == null) {
					for (entry in list) {
						texts.add(entry.split("|")[0]);
						if (@Contains(entry.split("|")[1], "http://" ||
							@Contains(entry.split("|")[1], "#") ||
							@Contains(entry.split("|")[1], ".xsp"))) {
							links.add(entry.split("|")[1]);
						} else {
							links.add("http://" + entry.split("|")[1]);
						}
					}
				} else {
					for (entry in list2) {
						texts.add(entry.split("|")[0]);
						if (@Contains(entry.split("|")[1], "http://") || 
							@Contains(entry.split("|")[1], "#") ||
							@Contains(entry.split("|")[1], ".xsp")) {
							links.add(entry.split("|")[1]);
						} else {
							links.add("http://" + entry.split("|")[1]);
						}
					}
					
				}
				vec.add(texts);
				vec.add(links);			
				return vec;}]]>
			</xp:this.value>
		</xp:dataContext>
	</xp:this.dataContexts>
	<style>
		.menuBarItem { 
			height: 40px;
			width: 200px; 
		} .menuBarItemImage { 
			position: absolute; 
			width: 200px; 
		} .menuBarItemText { 
			position: absolute; 
			margin-top: 14px;
			margin-left: 25px; 
		}
	</style>
	<xp:repeat 
		id="menuPanelRepeat" 
		rows="30" 
		var="menuEntries"
		indexVar="menuIndex">
		<xp:this.value><![CDATA[#{javascript:return menuContent.get(0);}]]>
		</xp:this.value>
		<xp:div 
			id="menuBarItem" 
			styleClass="menuBarItem">
			<xp:eventHandler 
				event="onmouseover" 
				submit="false">
				<xp:this.script><![CDATA[
					try{
						document.getElementById("#{id:menuButtonImage}").src = "#{javascript:
							facesContext.getExternalContext().getRequestContextPath() + "/" + compositeData.menuItemPictureHover}";
					}catch(e){}]]>
				</xp:this.script>
			</xp:eventHandler>
			<xp:eventHandler 
				event="onmouseout" 
				submit="false">
				<xp:this.script><![CDATA[
					try{
						document.getElementById("#{id:menuButtonImage}").src = "#{javascript:
							facesContext.getExternalContext().getRequestContextPath() + "/" + compositeData.menuItemPicture}";
					}catch(e){}]]>
				</xp:this.script>
			</xp:eventHandler>
			<xp:image 
				id="menuButtonImage"
				url="#{javascript:compositeData.menuItemPicture}"				 
				styleClass="menuBarItemImage" />
			<xp:link 
				id="link1"
				escape="true" 
				styleClass="menuBarItemText"
				text="#{javascript:return menuContent.get(0).get(menuIndex)}"				
				value="#{javascript:return menuContent.get(1).get(menuIndex)}" />
		</xp:div>
		<xp:br />
	</xp:repeat>
</xp:view>
All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.
No comments yetLogin first to comment...