Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

8,595 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
  • Be the first to comment

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/

×