Brug af properties filer og flersprogsdatabaser

15639432_sHvis du har en tekst eller indstilling du ænsker at bruge på tværs af flere XPages, så kan du med fordel gemme teksten i en .properties fil.

Step 1: Opret en .properties fil

Gemmes under ‘Resources\Files’ – skal have extension .properties, kald den f.eks. messages.properties

properties

Step 2: Inkludér filen via dit theme

<!-- From: http://www.dominoguru.com/pages/ibm_xpages_resource_bundle_datasources.html -->
<resources>
    <bundle
        target="xsp"
        src="messages.properties"
        var="messages"
        loaded="true"
        rendered="true" />
</resources>

src angiver filnavnet og var definerer hvilket navn du efterfølgende vil bruge i JavaScript

Step 3: Læs værdier med JavaScript

Herefter kan du nemt læse værdier fra filen – her er vist et eksempel hvor værdien indlæses i et computet field:

<xp:text escape="true" id="computedField1">
	<xp:this.value><![CDATA[#{javascript:messages['LegalText'];}]]></xp:this.value>
</xp:text>

Links

Dynamisk Dropdown menu med Bootstrap

Med Twitter Bootstrap kan man nemt lave en dynamisk dropdown menu i flere niveauerdropdown

Menuen er lavet som en Twitter Basic navbar. Til at beregne menuen automatisk benyttes en managed bean. Nedenfor ses noget at koden – bemærk at html koden er tweaket lidt for at få menuen til at åbne ‘OnMouserOver’ i stedet for ‘OnClick’ som er standarden foir Twitter Menuen. Bl.a. er class=\”dropdown-toggle\” data-toggle=\”dropdown\” fjernet og der der tilføjet en class=”cascading” til sub menuerne

/* Creates LI elements */
private String GetHtmlFromDocument( Document doc, int level ) {
	String html = "";
	try {
		if ( IsLinkSupportedOnWeb( doc )) {
			html += "<li class=\"dropdown\">";
			html += "<a  href=\""+GetUrlFromDocument( doc )+"\" target=\"_blank\">" + doc.getItemValueString("Subject"); //class=\"dropdown-toggle\" data-toggle=\"dropdown\"
			html += "</a>";
			html += GetHtmlFromResponses( doc.getResponses(), level+1);
			html += "</li>";
		}
		
	} catch (NotesException e1) {
		e1.printStackTrace();
	}
	return html;
}

/* Creates the UL element */
private String GetHtmlFromResponses( DocumentCollection coll, int level ) {
	Document doc;
	String html="";
	
	if (coll==null) return "";
	if(level==0){
		// top navigator
		html += "<ul class=\"nav\">";
	} else if (level==1) {
		// immediate dropdown menu
		html += "<ul class=\"dropdown-menu\" role=\"menu\" >";
	} else {
		// sub dropdown menu
		html += "<ul class=\"dropdown-menu cascading\" role=\"menu\" >";
	}
	
	try {
		doc = coll.getFirstDocument();
		if (doc==null) return "";
		
		while (doc!=null) {
			html += GetHtmlFromDocument( doc, level );
			doc = coll.getNextDocument(doc);
		}
	}
	catch (NotesException e) {
		e.printStackTrace();
	}
	
	html += "</ul>";
	return html;
}

På en XPage kan menuen indsættes med dette kode:

		<div class="navbar">
			<div class="navbar-inner">
				<div class="container">
					<!-- All menu html is read by a managed bean -->
					<xp:text escape="false" value="#{javascript:Menu.getHtml('Top');}"></xp:text>
				</div>
			</div>
		</div><!-- /.navbar -->

MouseOver effekt og formatering af undermenuer klares med nogle få CSS tilføjelser

/* Show on hover: http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click */
ul.nav li.dropdown:hover>ul.dropdown-menu {
	display: block;
}

ul.dropdown-menu li:hover>ul {
	display: block;
}

.navbar .dropdown-menu {
	margin-top: 0px;
}

/* Cascading menu */
.cascading {
	position: absolute;
	top: 20px;
	left: 50px;
	z-index: top;
}

Links: