Provides a layout for an XPage.
<xe:applicationLayout attributes>content</xe:applicationLayout>
Property | Description |
---|---|
id | Defaults to applicationLayout1, applicationLayout2, and so on. |
configuration | Specifies the structure of the layout. |
Category | Properties |
---|---|
basics | binding, configuration, id, loaded, rendered, rendererType |
events | onItemClick |
styling | disableTheme, themeId |
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.
<?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>
<?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>