applicationLayout - Application Layout

Provides a layout for an XPage including responsive and non-responsive layout options.

Syntax

<xe:applicationLayout attributes>content</xe:applicationLayout>

Table 1. Essential properties
Property	Description
id	Defaults to `applicationLayout1`, `applicationLayout2`, and so on.
configuration	Specifies the structure of the layout.

Table 2. All properties
Category	Properties
basics	binding, configuration, id, loaded, rendered, rendererType
events	onItemClick
styling	disableTheme, themeId

Usage

This control is intended to contain the entire display portion of a page, and provides the following layout areas: banner, title bar, place bar, left column, middle column, right column, footer, and legal.

Best practice is to develop one application layout control in a custom control. Insert callback (Editable Area) controls (also called drop targets) in the columns where pages are to provide their own content. For each page in the application, insert the custom control and develop the editable areas as appropriate.

To assist with using the responsive design Bootstrap theme, the Application Layout control provides a two page Application Layout wizard. The first page of the Application Layout wizard displays a list of all available configurations. This list can then be filtered to display responsive or non-responsive configurations using the radio buttons at the top of the wizard page. A sample URL and image is also displayed for any the listed configurations that already exist. The second page of the wizard contains further configurable options for the configuration that you choose from the first page of the wizard. Refer to the Designing with themes in XPages section in this guide for additional information.

Examples

Here is a custom control that defines an application layout using the oneuiApplication configuration. The configuration provides editable areas for the left (facet_1) and middle (facet_2) columns. The right column is not used.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
	<xe:applicationLayout id="applicationLayout1">
		<xp:callback facetName="facet_2" id="callback2"></xp:callback>
		<xp:this.facets><xp:callback facetName="facet_1" id="callback1"
			xp:key="LeftColumn"></xp:callback></xp:this.facets>
		<xe:this.configuration>
			<xe:oneuiApplication
				placeBarName="Welcome to the application"
				productLogo="/xpagesui-logo.jpg" productLogoAlt="XPages UI logo"
				productLogoHeight="50%">
				<xe:this.footerLinks>
					<xe:basicContainerNode>
						<xe:this.children>
							<xe:basicLeafNode label="IBM"
								href="http://www.ibm.com">
							</xe:basicLeafNode>
							<xe:basicLeafNode label="Google"
								href="http://www.google.com">
							</xe:basicLeafNode>
						</xe:this.children>
					</xe:basicContainerNode>
				</xe:this.footerLinks>
				<xe:this.titleBarTabs>
					<xe:pageTreeNode label="main" page="/main.xsp"></xe:pageTreeNode>
					<xe:pageTreeNode label="mainview"
						page="/mainview.xsp">
					</xe:pageTreeNode>
				</xe:this.titleBarTabs>
			</xe:oneuiApplication>
		</xe:this.configuration>
	</xe:applicationLayout>
</xp:view>

Here the custom control (MyOneUILayout) is employed with values provided for the two editable areas.

<?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">
	<xp:this.data>
		<xp:dominoDocument var="document1" formName="main"></xp:dominoDocument>
	</xp:this.data>
	<xc:MyOneUILayout>
		<xp:this.facets>
			<xp:dataTable id="dataTable1" rows="30" xp:key="facet_1"
				var="rowdoc"
				value="#{javascript:return database.getAllDocuments()}">
				<xp:column id="column1">
					<xp:this.facets>
						<xp:span xp:key="header">
							<xp:span style="font-weight:bold">
								</xp:span>
							<xp:label value="Existing subjects" id="label2" 
								style="color:rgb(0,128,255);font-weight:bold">
							</xp:label>
							<xp:span style="font-weight:bold">
							</xp:span>
						</xp:span>
					</xp:this.facets>
					<xp:text escape="true" id="computedField1">
						<xp:this.value><![CDATA[#{javascript:return rowdoc.getItemValueString("subject")}]]>
						</xp:this.value>
					</xp:text>
				</xp:column>
			</xp:dataTable>
			<xp:panel xp:key="facet_2" style="height:173.0px">
				<xp:label value="Create a new subject" id="label1"
					style="font-weight:bold;color:rgb(0,128,255)">
				</xp:label>
				<xp:br></xp:br>
				<xp:table>
					<xp:tr>
						<xp:td>
							<xp:label value="Category:"
								id="category_Label1" for="category1">
							</xp:label>
						</xp:td>
						<xp:td>
							<xp:inputText value="#{document1.category}"
								id="category1">
							</xp:inputText>
						</xp:td>
					</xp:tr>
					<xp:tr>
						<xp:td>
							<xp:label value="Subject:"
								id="subject_Label1" for="subject1">
							</xp:label>
						</xp:td>
						<xp:td>
							<xp:inputText value="#{document1.subject}"
								id="subject1">
							</xp:inputText>
						</xp:td>
					</xp:tr>
					<xp:tr>
						<xp:td>
							<xp:label value="Number:" id="number_Label1"
								for="number1">
							</xp:label>
						</xp:td>
						<xp:td>
							<xp:inputText value="#{document1.number}"
								id="number1">
								<xp:this.converter>
									<xp:convertNumber></xp:convertNumber>
								</xp:this.converter>
							</xp:inputText>
						</xp:td>
					</xp:tr>
					<xp:tr>
						<xp:td></xp:td>
						<xp:td>
							<xp:button value="Submit" id="button1">
								<xp:eventHandler event="onclick"
									submit="true" refreshMode="complete" immediate="false"
									save="true" id="eventHandler1">
								</xp:eventHandler>
							</xp:button>
							<xp:button value="Cancel" id="button2">
								<xp:eventHandler event="onclick"
									submit="true" refreshMode="complete" immediate="true"
									save="false" id="eventHandler2">
								</xp:eventHandler>
							</xp:button>
						</xp:td>
					</xp:tr>
				</xp:table>
			</xp:panel>
		</xp:this.facets>
	</xc:MyOneUILayout>
</xp:view>