Skip to main content link. Accesskey S

The useful resource for IBM Lotus Domino XPages development

Submit Search


Home > Working with oneUI theme
xpageswiki.com
is maintained by 
Julian Buss.
You can hire me.

Working with oneUI theme

ShowTable of Contents

Setting up oneUI


To use a nice standard theme for your app you can use a theme called "oneUI" as follows:

- copy the theme "oneUI" from for example Dec's phone book application download at openNTF
- application properties -> basics -> default theme = "oneUI"
- create a stylesheet "custom.css"
- in every XPage: all properties -> style -> styleClass = "tundra"
- in every XPage or in a commonly used custom control: all properties -> basics -> dojoParseOnload = true, dojoTheme = true

Basic Layout


Create the following custom controls

layout_PlaceBar

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">	
	<div id="lotusPlaceBar">PLACEBAR</div>
</xp:view>


layout_banner

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoParseOnLoad="true"
	dojoTheme="true">
	BANNER
</xp:view>


layout_content

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<div id="lotusContent">
	<xp:callback facetName="facet_1" id="callback1"></xp:callback>

</div>
</xp:view>


layout_footer

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<div id="lotusfooter">Footer Contents Here</div>
</xp:view>


layout_leftSidebar

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<div id="lotusColLeft">
	SIDEBAR	
</div>
</xp:view>


layout_titlebar

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">	
	TITLEBAR
</xp:view>


Basic code for the XPage for including the controls

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
	xmlns:xc="http://www.ibm.com/xsp/custom" pageTitle="Home">

	<xc:layout_banner></xc:layout_banner>
	<xc:layout_titlebar></xc:layout_titlebar>
	<xc:layout_PlaceBar></xc:layout_PlaceBar>
	<div id="lotusMain">
		<xc:layout_leftSidebar></xc:layout_leftSidebar>
		<xc:layout_content>
			<xp:this.facets>
				<xp:span xp:key="facet_1">
					<xp:link escape="true" text="Neue Eingabe"
						id="link1" value="/Data.xsp">
					</xp:link>
					HERE IS THE CONTENT 
				</xp:span>
			</xp:this.facets>
		</xc:layout_content>
	</div>
	<xc:layout_footer></xc:layout_footer>
</xp:view>

Display Error control


Add all properties -> style -> styleClass="xspMessage" to display error messages in the usual yellow box.


How to take your XPages App to the iPhone, iPad, Android: use Domino To Go!
Do you look for an XPages Workflow solution? Take YouAtNotes Workflow.