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>





This is a small tool to integrate easily a fully customizable and configurable menu in your XPage.
You can define a picture for your menu button and also a picture which will be displayed on mouseover. You can leave the picture properties empty, so you can define your buttons using CSS-styles.
The whole menu is designable via CSS-styles, either directly in the code, like in the example above or in a seperate CSS file via the defined classes.
For defining the content of your menu, just pass a java.util.Vector with entries with the following structure via the menuEntries property:

[ButtonLabel]|[Link]

You can also use multiple menuEntry properties with the same structure to define it manually.

You can define the link in different ways. You cann define an URL like google.de or a full URL. Also you can define XPages, but you have put a / before the name, like this: /xpage1.xsp.
I had put that in a configuration document.

To make the customControl work, you have to add the following properties:

menuEntry - type String - String Editor - Allow multiple instances
menuItemPicture - type String - Image File Picker
menuItemPictureHover - type String - Image File Picker
menuEntries - type java.util.Vector - String Editor

I hope I didn't forgot something

http://mnicklisch.wordpress.com/2012/04/18/xsnippet-easy-menu-login-dialog/

XPages
Matthias Nicklisch
April 18, 2012 4:05 PM
Rating
241

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