Skip to main content link. Accesskey S

The useful resource for IBM Lotus Domino XPages development

Submit Search


Home > Work with oneUI theme
xpageswiki.com
is maintained by 
Julian Buss.
You can hire me.
at openNTF">download">http://www.openntf.org/Projects/pmt.nsf/ProjectLookup/XPages%20Phonebook 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

Update April 2010: simply download the "XPages Framework" project from OpenNTF: http://www.openntf.org/catalogs/a2cat.nsf/topicThread.xsp?action=openDocument&documentId=843875756A556ED2852576D2002ECD37

There is a full documentation in that project.

History stuff for an older version of oneUI

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.


Work with oneUI theme

ShowTable of Contents

Setting up oneUI


(for Domino 8.5.1, in 8.5.2 you can install the extension pack from OpenNTF which contains ready-to-use controls for the 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 http://www.openntf.org/Projects/pmt.nsf/ProjectLookup/XPages%20Phonebook
downloaddownload

Add Comment

Name:
Comments:
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.