I gave this presentation along with a live coding demo at the monthly NotesNet.dk meeting on April 19, 2012.

1. XPages Extension Library:
Create an app in 1 hour (almost)
PHL-Consult.dk
info@PHL-Consult.dk
Per Henrik Lausten
April 19, 2012 per.lausten.dk/blog/
twitter.com/perlausten

2. Prerequisites
Lotus Domino 8.5.3
XPages Extension Library from OpenNTF or Upgrade Pack 1

3. Purpose
From classic:
To modern:
In 1 hour (almost)

4. Application Layout
OneUI application layout
<xe:applicationLayout id="applicationLayout1">
<xe:this.configuration>
<xe:oneuiApplication>
</xe:oneuiApplication>
</xe:this.configuration>
</xe:applicationLayout>
Dropdown menu
<xe:basicContainerNode label="Dropdown menu">
<xe:this.children>
<xe:basicLeafNode label="Choice 1"></xe:basicLeafNode>
<xe:basicLeafNode label="Choice 2"></xe:basicLeafNode>
<xe:basicLeafNode label="Choice 3"></xe:basicLeafNode>
</xe:this.children>
</xe:basicContainerNode>
NavigationPath custom property and the selection property
Tabs
<xe:this.titleBarTabs>

5. Navigator
Menu
<xe:navigator id="navigator1">
<xe:this.treeNodes>
<xe:pageTreeNode label="Index" page="/index.xsp" selection="/Tab1/Index"></xe:pageTreeNode>
<xe:pageTreeNode label="Page 2" page="/page2.xsp" selection="/Tab1/Page2"></xe:pageTreeNode>
</xe:this.treeNodes>
</xe:navigator>
View list
<xe:dominoViewListTreeNode filter="All.*" submitValue="#{viewEntry.name}" var="viewEntry">
<xe:this.databaseName><![CDATA[#{javascript:database.getServer() + "!!" +
"notesnet//forum.nsf"}]]></xe:this.databaseName>
<xe:this.selected><![CDATA[#{javascript:viewEntry.getName() ==
sessionScope.clickedView}]]></xe:this.selected>
</xe:dominoViewListTreeNode>
<xp:eventHandler event="onItemClick" submit="true" refreshMode="complete">
<xp:this.action>
<![CDATA[#{javascript:sessionScope.clickedView = context.getSubmittedValue();
context.redirectToPage("forumview.xsp");}]]>
</xp:this.action>
</xp:eventHandler>

6. Dynamic View Panel
Dynamic views
<xe:dynamicViewPanel id="dynamicViewPanel1" pageName="/forumpost.xsp" var="viewEntry">
<xe:this.data>
<xp:dominoView var="view1" viewName="#{sessionScope.clickedView}">
<xe:this.databaseName><![CDATA[#{javascript:database.getServer() + "!!" +
"notesnet//forum.nsf"}]]></xe:this.databaseName>
</xp:dominoView>
</xe:this.data>
<xp:eventHandler event="onColumnClick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:var url="/forumpost.xsp?
action=openDocument&documentId="+viewEntry.getNoteID();
context.redirectToPage(url);}]]></xp:this.action>
</xp:eventHandler>
</xe:dynamicViewPanel>
Customizer Bean

7. Forms
Form Table, Form Layout Row og Form Layout Column
<xe:formTable id="formTable1">
<xe:formRow id="formRow1" label="Subject">
<xp:inputText id="inputText1" value="#{document1.Subject}"></xp:inputText>
</xe:formRow>
<xe:formRow id="formRow2" label="Body">
<xp:inputRichText id="inputRichText1" value="#{document1.Body}"></xp:inputRichText>
</xe:formRow>
</xe:formTable>
Name picker
<xe:djextNameTextBox id="From" value="#{document1.From}"></xe:djextNameTextBox>
<xe:namePicker id="namePickerFrom" for="From">
<xe:this.dataProvider>
<xe:dominoNABNamePicker addressBookSel="all-public" nameList="people"></xe:dominoNABNamePicker>
</xe:this.dataProvider>
</xe:namePicker>

8. Forms
Value picker
<xp:inputText id="Categories" value="#{document1.Categories}">
<xp:typeAhead mode="partial" minChars="1" preventFiltering="true">
<xp:this.valueList><
[CDATA[#{javascript:getComponent("valuePickerCategories").getTypeAheadValue(this)}]]>
</xp:this.valueList>
</xp:typeAhead>
</xp:inputText>
<xe:valuePicker id="valuePickerCategories" for="Categories">
<xe:this.dataProvider>
<xe:simpleValuePicker>
<xe:this.valueList><![CDATA[#{javascript:DbColumnArray("", "Notesnetforum.nsf",
"cache", "unique", "sort", "AllByCategory", 2)}]]></xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>

9. Styling
CSS

10. Demo
http://notesnet.dk/databaser/perlausten/extlibdemo.nsf/