XPages Extension Library - Create an app in 1 hour (almost)

8,127 views

Published on

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

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,127
On SlideShare
0
From Embeds
0
Number of Embeds
2,671
Actions
Shares
0
Downloads
78
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

XPages Extension Library - Create an app in 1 hour (almost)

  1. 1. XPages Extension Library: Create an app in 1 hour (almost) PHL-Consult.dk info@PHL-Consult.dk Per Henrik LaustenApril 19, 2012 per.lausten.dk/blog/ twitter.com/perlausten
  2. 2. PrerequisitesLotus Domino 8.5.3XPages Extension Library from OpenNTF or Upgrade Pack 1
  3. 3. PurposeFrom classic:To modern:In 1 hour (almost)
  4. 4. Application LayoutOneUI 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 propertyTabs <xe:this.titleBarTabs>
  5. 5. NavigatorMenu <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. 6. Dynamic View PanelDynamic 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. 7. FormsForm 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. 8. FormsValue 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. 9. StylingCSS
  10. 10. Demohttp://notesnet.dk/databaser/perlausten/extlibdemo.nsf/

×