0
Show110 Using the XPagesExtension Library for the RealWorldPaul Hannan | Software Engineer | IBMTony McGuckin | Software E...
Legal disclaimer© IBM Corporation 2012. All Rights Reserved. The information contained in this publication is provided for...
IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawalwithout notice at IBM’s so...
Agenda■   1. Introduction■   2. Installation and Deployment■   3. Application Layout Control■   4. Data View Control■   5....
About The Speakers         ■   Tony McGuckin – Software Engineer – IBM, Dublin, Ireland              ─ With IBM since 2006...
Quick Survey■   How many of you know about XPages?■   How about the XPages Extension Library (ExtLib)?■   How many of you ...
Introduction■   What is this session about?     ─ Show and tell how the XPages Extension Library is used in the production...
Introduction■   What is the Extension Library     ─ A set of Java plug-ins that greatly extend XPages runtime functionalit...
Introduction■   What are “Upgrade Packs” | UP1?     ─ Additional new features to existing Notes Domino releases■   Custome...
Case Study: Quick Tour of the TeamRoom XL                                            |   © 2012 IBM Corporation
Case Study: TeamRoom XL■   New TeamRoom XL from Lotus® Notes® Domino® 8.5.3 UP1                                           ...
Case Study: TeamRoom XL ■   Using the OneUI Application Layout      ─ Consistent with Lotus UX. Title bar at the top, navi...
Case Study: TeamRoom XL ■   The new “Home” page      ─ Showing Recent Activities – Unified Experience ; a “Project Vulcan”...
Case Study: TeamRoom XL ■   All Documents using a XPages Discussion-like UI      ─ The code in the Discussion template was...
Case Study: TeamRoom XL ■   Thread view page based on the OneUI “Comment in a Forum” component      ─ In-context editing i...
Case Study: TeamRoom XL■   Select View and Filter mechanism     ─ To simplify the UI design, uses multiple views of the sa...
Case Study: TeamRoom XL■   Simplification of the New / Edit Main Document UI     ─ Makes the required and most commonly us...
Case Study: TeamRoom XL■   An XPages Calendar View    control     ─ Used to display in-       application calendar       g...
Case Study: TeamRoom XL■   Pager state restoration     ─ When you click into a doc and then return to the view, the re-dis...
Case Study: TeamRoom XL■   Members thumbnail photos     ─ The ExtLib gives a unified API for user information, including t...
Case Study: TeamRoom XL■   Member creation using Name Picker control     ─ ExtLib control with directory integration      ...
Case Study: TeamRoom XL■   Members view using multi-column view control configuration                                     ...
Agenda■   1. Introduction■   2. Installation and Deployment■   3. Application Layout Control■   4. Data View Control■   5....
Installation and Deployment■   Installation and deployment the XPages Extension Library depends on where it    is download...
Installation and Deployment | Upgrade Pack■   Designer Client Install from 8.5.3 Upgrade Pack 1                           ...
Installation and Deployment | Upgrade Pack■   The 853 Upgrade Pack Download    from Passport Advantage■   853UpgradePackIn...
Installation and Deployment | Upgrade Pack■   Unpack the big Zip file contains 3 folders; client, designer and domino.■   ...
Installation and Deployment | Upgrade Pack■   The server install contains the       ■   The client folder contains 3 Notes...
Installation and Deployment | Upgrade Pack■   Designer Client Install from UP1■   Running the 853UpgradePack1_20111208-071...
Installation and Deployment | Upgrade Pack■   Designer Client Install from UP1■   First install screen     ─ Youve two cho...
Installation and Deployment | Upgrade Pack■   Designer Client Install from UP1■   The Welcome screen■   Select Next here  ...
Installation and Deployment | Upgrade Pack■   Designer Client Install from UP1■   This is the key part, accepting the UP1 ...
Installation and Deployment | Upgrade Pack■   Designer Client Install from UP1■   Make sure you dont have the Notes Standa...
Installation and Deployment | Upgrade Pack■   Designer Client Install from UP1■   Click the Install button to begin       ...
Installation and Deployment | Upgrade Pack■   Designer Client Install from UP1■   ...installing...                        ...
Installation and Deployment | Upgrade Pack■   Designer Client Install from UP1■   ...and youre done!                      ...
Installation and Deployment | Upgrade Pack■   Designer Client Install from UP1■   Complete!     ─ New Designtime installed...
Installation and Deployment | Upgrade Pack■   Designer with the Extension Library                                         ...
Installation and Deployment | Upgrade Pack■   Discussion XL app on XPiNC                                             |   ©...
Installation and Deployment | Upgrade Pack■   Discussion XL app on the preview Server                                     ...
Installation and Deployment | OpenNTF■ Alternative deployment for OpenNTF release■ The 853 ExtLib UpdateSite NSF Deploymen...
Installation and Deployment | OpenNTF■   Select CTRL+N to create a new application■   Name the application what you wish, ...
Installation and Deployment | OpenNTF■   This is the app    created and how    it appears when    launched in    Notes.   ...
Installation and Deployment | OpenNTF■   We can now import the updatesite which is extracted from any zip from the    Open...
Installation and Deployment | OpenNTF■   Select the site.xml from the extracted zip file■   Then select OK on this dialog ...
Installation and Deployment | OpenNTF■   Once that is done, restart the server or...■   restart task http                 ...
Installation and Deployment | OpenNTF■   Run restart task http at the server console■   Console should return the message ...
Installation and Deployment | OpenNTF■   Now that the server is done,■   we can point a Designer client at the same NSF, i...
Installation and Deployment | OpenNTF■   Must have Enable Eclipse plug-in    install checked in Preferences               ...
Installation and Deployment | OpenNTF■   Select the option to search for    new features to install    and then Next.     ...
Installation and Deployment | OpenNTF■   Select the Add Remote    Location button■   Type in a name and then the    URL to...
Installation and Deployment | OpenNTF■   This adds a location to the    dialog■   Select this and then Finish             ...
Installation and Deployment | OpenNTF■   This will then fetch the list of features to install.■   We usually select all   ...
Installation and Deployment | OpenNTF■   Accept the licence■   Here is the screenshot for the    Apache licence from    Op...
Installation and Deployment | OpenNTF■   This lists what you are about    to install in Designer                          ...
Installation and Deployment | OpenNTF■   The releases to OpenNTF include un-signed jars.■   This dialog prompts you to acc...
Installation and Deployment | OpenNTF■   And you are done. All that is left to do is to restart your Designer (and the oth...
Installation and Deployment | OpenNTFOnce Designer has been restarted, both the server and the Designer client will beusin...
Installation and Deployment■   Summary | Main points to take away     ─ Install and deployment depends on from where the E...
Agenda■   1. Introduction■   2. Installation and Deployment■   3. Application Layout Control■   4. Data View Control■   5....
Application Layout Control – What is this sectionabout?■   Overview of the Application Layout control■   Explain how this ...
Application Layout Control■   Get a running OneUI application in less than 5 minutes!■   Fully customizable OneUI renderin...
Application Layout Control■   Exposed in Domino    Designers control    palette along with    several property    categori...
Application Layout Control■   Used in the new TeamRoom XL, Discussion XL and DocLib XL templates■   Most effective when us...
Getting to grips with it...                              65 |   © 2012 IBM Corporation
Application Layout Control – TeamRoom XL    Several XPages                               allDocuments.xsp     announcement...
Application Layout Control – TeamRoom XL   Several XPages          + One Custom Control                                   ...
Application Layout Control – TeamRoom XL   Several XPages          + One Custom Control          =                        ...
Application Layout Control – TeamRoom XL  layout.xsp (Custom Control)                                           69 |   © 2...
Application Layout Control – TeamRoom XL  layout.xsp (Custom Control)<xe:applicationLayout/>                              ...
Application Layout Control – TeamRoom XL  layout.xsp (Custom Control)<xe:applicationLayout/>                              ...
Application Layout Control – TeamRoom XL  layout.xsp (Custom Control)<xe:applicationLayout/>                              ...
Application Layout Control – TeamRoom XL  layout.xsp (Custom Control)<xe:applicationLayout/>                              ...
Application Layout Control – TeamRoom XLallDocuments.xsp (XPage)<xc:layout/>                                           74 ...
Application Layout Control – TeamRoom XLallDocuments.xsp (XPage)<xc:layout/>                                           75 ...
Zero to App Layout Hero...                             76 |   © 2012 IBM Corporation
Application Layout Control■   In a TeamRoom XL based database...     ─ Create two blank XPages         – Name both XPages ...
Application Layout Control■   Once you dragndrop the    Application Layout control to the    ccLayoutContainer Custom Cont...
Application Layout Control■   An instance of the Application Layout control will now reside on the    ccLayoutContainer Cu...
Application Layout Control■   Dragndrop an instance of the ccLayoutContainer Custom Control unto each of    your previousl...
Application Layout Control■   Ensure you have saved all    your changes to xpOne,    xpTwo, and    ccLayoutContainer■   No...
Application Layout Control■   You can now continue to    configure the Application Layout    control to establish a shared...
Application Layout Control■   Click on the Add Item button     ─ Select Page Link Node from the options       list     ─ R...
Application Layout Control■   You will now have two Page Link Nodes in the Title Bar Area■   Set the label and page proper...
Application Layout Control■   Using the ccLayoutContainer Custom Control, type some text into the middle    area facet and...
Application Layout Control■   Refresh the xpOne XPage in the web browser■   You will now see the configuration of your App...
Application Layout Control■   Summary | Main points to take away     ─ You have learnt how the TeamRoom XL, Discussion XL,...
Agenda■   1. Introduction■   2. Installation and Deployment■   3. Application Layout Control■   4. Data View Control■   5....
The Data View | What is this section about?■   Give an overview of this control■   Highlight and explain the various eleme...
The Data View (xe:dataView)                              90 |   © 2012 IBM Corporation
The Data View (xe:dataView)■   The Data View control is used everywhere – web and mobile■   Extended from the View Panel c...
The Data View (xe:dataView)                              92 |   © 2012 IBM Corporation
The Data View (xe:dataView)■   Lets build a Data View from scratch■   Create a blank XPage on a Discussion XL app, expand ...
The Data View (xe:dataView)■   A representation of the Data View will now appear on the Design pane■   This needs further ...
The Data View (xe:dataView)■   Go to the All Properties of the Data View and locate the attribute    summaryColumn in the ...
The Data View (xe:dataView)■   This is enough to give us our first look at the Data View on the web browser■   Save your c...
The Data View (xe:dataView)■   We can add column titles by adding a columnTitle for summaryColumn and    setting columnTit...
The Data View (xe:dataView)■   Lets add some details to the view entry■   To the details editable area we add a Panel cont...
The Data View (xe:dataView)■   Then to the Panel we add a Computed Field control.■   We are going to use this field to com...
The Data View (xe:dataView)■   The Computed Field is configured by combining two column values from the    view data sourc...
The Data View (xe:dataView)■   Select the Data View and to the var property set the value – dview1■   Just one more thing ...
The Data View (xe:dataView)■   Set the property expandedDetails to true...■   So at runtime these    details now display  ...
The Data View (xe:dataView)■   We can add more detail here thatll give us a preview of the document in that row     ─ like...
The Data View (xe:dataView)■   Add a Computed Field to previewPanel and set the value to get the value of the    Abstract ...
The Data View (xe:dataView)■   Save your changes.■   Then preview this update at runtime on a web browser                 ...
The Data View (xe:dataView)■   Sometimes you may not want the details to show when the Data View is first    launched, but...
The Data View (xe:dataView)■   The Data View with collapsible detail                                            107 |   © ...
The Data View (xe:dataView)■   The Data View indents response documents by default. We can add a twisty    here to parent ...
The Data View (xe:dataView)■   Pagers can be added to the Data View just like the View Panel, Repeat and    Data Table■   ...
The Data View (xe:dataView)■   Once the pager has been dropped into any editable area, its for property    needs to be set...
The Data View (xe:dataView)■   Set also the row count, 15 rows, at this stage to see the pager.                           ...
The Data View (xe:dataView)■   Use the Extra Column feature to include more columns from the view data    source in the Da...
The Data View (xe:dataView)■   This will add a viewExtraColumn[0] complex type■   The columnName property here corresponds...
The Data View (xe:dataView)■   The Data View with extra columns                                       114 |   © 2012 IBM C...
The Data View (xe:dataView)■   Categorization is also handled by the Data View■   Take the By Category view from the Discu...
The Data View (xe:dataView)■   First step is to create a new Data View like before but using the By Category    view as th...
The Data View (xe:dataView)■   Back on the Data View locate the categoryColumn property and select the plus    button■   A...
The Data View (xe:dataView)■   The categorized Data View.                                 118 |   © 2012 IBM Corporation
The Data View (xe:dataView)■   Sub categories can be added in the same way by adding a new    viewCategoryColumn after the...
The Data View (xe:dataView)■   Summary | Main points to take away     ─ The main container control used to display a data ...
Agenda■   1. Introduction■   2. Installation and Deployment■   3. Application Layout Control■   4. Data View Control■   5....
XPages Mobile | What is this section about?■   Give an overview of what the new XPages Mobile controls are■   Show and exp...
XPages Mobile Applications – what are they?■   These apps build new and extend the reach of existing applications to smart...
Domino Templates go Mobile■   Demo of the TeamRoom XL and Discussion XL Templates...                                      ...
Hello XPages Mobile Applications World■   In this exercise we are going to build a XPages Mobile Application from scratch■...
Hello XPages Mobile Applications World■   Take any existing Application that inherits its design from the Discussion    te...
Hello XPages Mobile Applications World XPage (xp:view)       Single Page Application (xe:singlePageApp)       Mobile Page ...
Hello XPages Mobile Applications World■   Enable the    application to use    the XPages    Extension Library■   Select th...
Hello XPages Mobile Applications World■   The next step is to add the Mobile Theme prefix -    xsp.theme.mobile.pagePrefix...
Hello XPages Mobile Applications World■   This should add the    Package Explorer view to    beside main working set.■   F...
Hello XPages Mobile Applications World■   Select the Source tab■   Then add the prefix to the source – xsp.theme.mobile.pa...
Hello XPages Mobile Applications World■   Create a new XPage with the with the mobile theme prefix                        ...
Hello XPages Mobile Applications World■   On the new XPage, drag and drop from the Mobile palette the Single Page    Appli...
Hello XPages Mobile Applications World■   Then add a Mobile Page control to the Single Page Application. And save the    c...
Hello XPages Mobile Applications World■   So, to resolve this error we must first name the Mobile Page that was added to  ...
Hello XPages Mobile Applications World■   Add a Heading control (xe:djxmHeading) to the Mobil Page. This will be the    he...
Hello XPages Mobile Applications World■   To the header enter a    value for the label.■   The XPages Mobile    applicatio...
Hello XPages Mobile Applications World■   Running the XPages Mobile App on a Web Kit browser - Chrome                     ...
Hello XPages Mobile Applications World■   The next step is to add a view to the Mobile Page. From the Extension Library   ...
Hello XPages Mobile Applications World■   After the Data View has been added to the Mobile page, we want to set one    pro...
Hello XPages Mobile Applications World■   The Documents display now in the row.                                           ...
Hello XPages Mobile Applications World■   Were going to add a second mobile page to the single page application. This is  ...
Hello XPages Mobile Applications World■   Add a Heading control to the “documentPage” (1)■   And for this header the follo...
Hello XPages Mobile Applications World■   Next, add (1.) a Panel container control after the Heading control on the Mobile...
Hello XPages Mobile Applications World■   Then add a Rounded List control to the Panel. This will add additional styling  ...
Hello XPages Mobile Applications World■   And to the Rounded List container control add labels and bound    input fields f...
Hello XPages Mobile Applications World■   Go back to the Data View.■   Here set the pageName to documentPage (1.) and anot...
Hello XPages Mobile Applications World■   Then finally resetContent property■   For the viewPage, set this to false■   And...
Hello XPages Mobile Applications World■   Now we can see the results of our changes.■   The document should now open in th...
Discussion XL Template for Mobile■   Tour around the Discussion XL app                                        150 |   © 20...
Discussion XL Template for Mobile■   Peel apart the mobile.xsp page                                       151 |   © 2012 I...
Discussion XL Template for Mobile■   The contents of each mobile page is contained within custom control.■   Why?■   Easie...
Discussion XL Template for Mobile■   The allDocumentsView serves as a content for a XPages mobile page■   Design elements ...
Discussion XL Template for Mobile■   The isMobile method can also be used else where to reuse design elements     ─ Change...
Discussion XL Template for Mobile■   The Heading Controls actionFacet - buttons used to create a save documents■   This is...
Discussion XL Template for Mobile■   Other action buttons in the template reuse existing design elements■   Though these e...
Discussion XL Template for Mobile■   Navigation - Transitioning between XPages Mobile Pages - MoveTo and Back    button■  ...
Discussion XL Template for Mobile■   Slide transition – going to a page     ─ Opening a document     ─ Creating a new docu...
Discussion XL Template for Mobile■   How the Default XPage launch works for Mobile applications     ─ Currently no setting...
Mobile■   Summary | Main points to take away     ─ XPages Mobile Apps are essentially Web Apps     ─ Limited number of con...
Agenda■   1. Introduction■   2. Installation and Deployment■   3. Application Layout Control■   4. Data View Control■   5....
Q&A      162 |   © 2012 IBM Corporation
Reference:■   Wiki documentation on the ExtLib in the Upgrade Pack     ─ http://www-10.lotus.com/ldd/ddwiki.nsf/xpViewCate...
XPages Extension Library Book■   Factoids...     ─ Comprehensive 600 page volume     ─ IBM Press publication     ─ Authore...
XPages Portable Command Guide Book■   Factoids...     ─ Compact 320 page volume     ─ IBM Press publication     ─ Authored...
Mastering XPages Book■   Factoids...     ─ Compact 750 page Best Selling volume     ─ IBM Press publication     ─ Authored...
Other Sessions That May Interest YouSessions                                                                            Sp...
Other Sessions That May Interest YouSessions                                                                            Sp...
Other Sessions That May Interest YouSessions                                                                              ...
Other Sessions That May Interest YouSessions                                                                          Spea...
Upcoming SlideShare
Loading in...5
×

Show110 | Using the XPages Extension Library for the Real World

10,000

Published on

This is a Show n' Tell session from Lotusphere 2012 on how the XPages Extension Library is used in the production ready TeamRoom XL and Discussion XL templates.

Published in: Technology, Business
1 Comment
8 Likes
Statistics
Notes
  • Impressive & convincing, this is a luxurious highway for anyone who wants to consume knowledge about developing using xPages
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
10,000
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
355
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "Show110 | Using the XPages Extension Library for the Real World"

  1. 1. Show110 Using the XPagesExtension Library for the RealWorldPaul Hannan | Software Engineer | IBMTony McGuckin | Software Engineer | IBMDate: Wednesday, January 18th 2012Time: 04:30 PM - 06:15 PM© 2012 IBM Corporation
  2. 2. Legal disclaimer© IBM Corporation 2012. All Rights Reserved. The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results. IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld and Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or both. Unyte is a trademark of WebDialogs, Inc., in the United States, other countries, or both. All references to Renovations refer to a fictitious company and are used for illustration purposes only. 2 | © 2012 IBM Corporation
  3. 3. IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawalwithout notice at IBM’s sole discretion.Information regarding potential future products is intended to outline our general product directionand it should not be relied on in making a purchasing decision.The information mentioned regarding potential future products is not a commitment, promise, orlegal obligation to deliver any material, code or functionality. Information about potential futureproducts may not be incorporated into any contract. The development, release, and timing of anyfuture features or functionality described for our products remains at our sole discretion. 3 | © 2012 IBM Corporation
  4. 4. Agenda■ 1. Introduction■ 2. Installation and Deployment■ 3. Application Layout Control■ 4. Data View Control■ 5. Mobile■ 6. Q&A 4 | © 2012 IBM Corporation
  5. 5. About The Speakers ■ Tony McGuckin – Software Engineer – IBM, Dublin, Ireland ─ With IBM since 2006 – IBM® Lotus® Notes® Domino® XPages server runtime • Product & Template development • Customer Enablement & Proof-of-Concept development – Co-creator of global XPages@... Workshops ─ IBM Lotus® OneUI Adoption Workgroup ─ Co-author of Mastering XPages and XPages Portable Command Guide books ■ Paul Hannan – Software Engineer – IBM, Dublin, Ireland ─ Is a senior software engineer and XPager in the IBM Ireland software lab in Dublin and is also a member of the IBM® Lotus® Notes® Domino® XPages runtime team. He has worked on XPages from the beginning and before that too when the same technology was XFaces in Lotus Component Designer®. Previous to this he worked on JSF tooling for Rational Application Developer®, and before that on Notes Domino 6 back to Notes 3.3x and Lotus® ScreenCam®. ─ Twitter: @pdhannan ─ Linkedin: http://www.linkedin.com/pub/paul-hannan/10/3bb/4b8 ─ Team Blog: www.xpagesdev.com ─ Lead author of the XPages Extension Library book(April 2012) 5 | © 2012 IBM Corporation
  6. 6. Quick Survey■ How many of you know about XPages?■ How about the XPages Extension Library (ExtLib)?■ How many of you have used the ExtLib to build apps?■ Built apps that are now on production servers?■ How many are using the TeamRoom XL■ How built mobile apps? | © 2012 IBM Corporation
  7. 7. Introduction■ What is this session about? ─ Show and tell how the XPages Extension Library is used in the production ready TeamRoom XL and Discussion XL templates (and DocLib XL – the big 3). ─ Reverse engineering an XPages app that uses the XPages Extension Library ─ Learn about the next generation of XPages controls ─ Learn how to build XPages applications more effectively, build them faster and perform better; all using real life examples. ─ Learn how to bring your applications beyond modernity with XPages Extension Library and will into the future. | © 2012 IBM Corporation
  8. 8. Introduction■ What is the Extension Library ─ A set of Java plug-ins that greatly extend XPages runtime functionality ─ Works on web, Notes® client and mobile devices ─ Installs on top of Lotus® Notes® Domino® 8.5.3 ─ Contains cool new IBM® Lotus® Notes® Domino® Designer® enhancements ─ A fully accessible runtime library and templates ─ Enhanced Lotus Notes TeamRoom and Lotus Notes Discussion templates ─ Online documentation ─ Runtime is localized ─ Built to IBM globalization standards ─ Implemented using the XPages Extensibility API ─ IBM Lotus Notes Domino 8.5.3® Upgrade Pack 1® release is officially supported by IBM ─ Source code included■ No longer a play thing; this is production ready | © 2012 IBM Corporation
  9. 9. Introduction■ What are “Upgrade Packs” | UP1? ─ Additional new features to existing Notes Domino releases■ Customers on active maintenance can download from IBM Passport Advantage®■ IBM Business Partners can download from Partnerworld Software Access Catalog™■ Download 1 zip for UP1 which contains install kits for the following ─ Lotus Notes® client – XPages Extension Library runtime ─ Lotus Domino® Designer® – XPages Extension Library runtime (for local preview) – Designer plugins for working with XPages Extension Library ─ Lotus Domino® & IBM XWork® Server – XPages Extension Library runtime – Domino Access Services (REST APIs) | © 2012 IBM Corporation
  10. 10. Case Study: Quick Tour of the TeamRoom XL | © 2012 IBM Corporation
  11. 11. Case Study: TeamRoom XL■ New TeamRoom XL from Lotus® Notes® Domino® 8.5.3 UP1 11 | © 2012 IBM Corporation
  12. 12. Case Study: TeamRoom XL ■ Using the OneUI Application Layout ─ Consistent with Lotus UX. Title bar at the top, navigation on the left ■ 12 | © 2012 IBM Corporation
  13. 13. Case Study: TeamRoom XL ■ The new “Home” page ─ Showing Recent Activities – Unified Experience ; a “Project Vulcan”- live feed of recent changes ─ Using a Tag Cloud for easier identification of the most used categories 13 | © 2012 IBM Corporation
  14. 14. Case Study: TeamRoom XL ■ All Documents using a XPages Discussion-like UI ─ The code in the Discussion template was improved and extracted to a drag- and-drop control in the ExtLib, for ease of reuse ─ Abstracts of the body text available in the view 14 | © 2012 IBM Corporation
  15. 15. Case Study: TeamRoom XL ■ Thread view page based on the OneUI “Comment in a Forum” component ─ In-context editing in the Thread view, including response creation/editing ─ With some refinements to better fit with Lotus Domino® views ─ Again, extracted to a control for ease of re-use 15 | © 2012 IBM Corporation
  16. 16. Case Study: TeamRoom XL■ Select View and Filter mechanism ─ To simplify the UI design, uses multiple views of the same data on the same page, and provides a consistent UI for filtering categorized views to a specific category ─ Implementation uses the ExtLib Dynamic Content control, for switching between different content at a location in the page 16 | © 2012 IBM Corporation
  17. 17. Case Study: TeamRoom XL■ Simplification of the New / Edit Main Document UI ─ Makes the required and most commonly used fields more prominent ─ Using ExtLib controls for selecting and displaying Reviewer lists 17 | © 2012 IBM Corporation
  18. 18. Case Study: TeamRoom XL■ An XPages Calendar View control ─ Used to display in- application calendar giving dates and times of team meetings, events, review due- dates etc ─ Single-click switching to day-at-a-glance, week, month, year modes ─ Was not previously available, a great addition to the ExtLib ─ Client side support for Drag n Drop, Delete, Double-Click edit etc 18 | © 2012 IBM Corporation
  19. 19. Case Study: TeamRoom XL■ Pager state restoration ─ When you click into a doc and then return to the view, the re-displayed view remembers the page number 19 | © 2012 IBM Corporation
  20. 20. Case Study: TeamRoom XL■ Members thumbnail photos ─ The ExtLib gives a unified API for user information, including thumbnail photos ─ The TeamRoom is using photos stored in the NSF 20 | © 2012 IBM Corporation
  21. 21. Case Study: TeamRoom XL■ Member creation using Name Picker control ─ ExtLib control with directory integration 21 | © 2012 IBM Corporation
  22. 22. Case Study: TeamRoom XL■ Members view using multi-column view control configuration 22 | © 2012 IBM Corporation
  23. 23. Agenda■ 1. Introduction■ 2. Installation and Deployment■ 3. Application Layout Control■ 4. Data View Control■ 5. Mobile■ 6. Q&A 23 | © 2012 IBM Corporation
  24. 24. Installation and Deployment■ Installation and deployment the XPages Extension Library depends on where it is downloaded from... 1) Lotus Notes® Domino 8.5.3 Upgrade Pack 1 (UP1) from IBM 2) 8.5.3 updatesite from OpenNTF■ Step through the Domino Designer® install from UP1 and an overview of the Server and Notes Client installs■ Step through the OpenNTF Server and Domino Designer® client deployment using the UpdateSite.NSF | © 2012 IBM Corporation
  25. 25. Installation and Deployment | Upgrade Pack■ Designer Client Install from 8.5.3 Upgrade Pack 1 | © 2012 IBM Corporation
  26. 26. Installation and Deployment | Upgrade Pack■ The 853 Upgrade Pack Download from Passport Advantage■ 853UpgradePackInstalls.zip■ One big zip under the same part number | © 2012 IBM Corporation
  27. 27. Installation and Deployment | Upgrade Pack■ Unpack the big Zip file contains 3 folders; client, designer and domino.■ Plus a readme.txt file | © 2012 IBM Corporation
  28. 28. Installation and Deployment | Upgrade Pack■ The server install contains the ■ The client folder contains 3 Notes addon installs for AIX32, AIX64, client addon installs for Windows®, iSeries, Linux, Solaris, Win32, Win64 Apple® Mac® and Linux. and zSeries. ■ The designer folder contains the one installable for Windows | © 2012 IBM Corporation
  29. 29. Installation and Deployment | Upgrade Pack■ Designer Client Install from UP1■ Running the 853UpgradePack1_20111208-0717.exe from the extlib-designer- add-win32 folder in designer launches the install program■ In Microsoft® Windows7TM, a prompt will appear to accept that the program is about to make changes to the computer. | © 2012 IBM Corporation
  30. 30. Installation and Deployment | Upgrade Pack■ Designer Client Install from UP1■ First install screen ─ Youve two choices here; unpack the files; then install and then delete the install package; the second choice is to preserve the install files | © 2012 IBM Corporation
  31. 31. Installation and Deployment | Upgrade Pack■ Designer Client Install from UP1■ The Welcome screen■ Select Next here | © 2012 IBM Corporation
  32. 32. Installation and Deployment | Upgrade Pack■ Designer Client Install from UP1■ This is the key part, accepting the UP1 licence from IBM. | © 2012 IBM Corporation
  33. 33. Installation and Deployment | Upgrade Pack■ Designer Client Install from UP1■ Make sure you dont have the Notes Standard All Client running before attempting this install | © 2012 IBM Corporation
  34. 34. Installation and Deployment | Upgrade Pack■ Designer Client Install from UP1■ Click the Install button to begin | © 2012 IBM Corporation
  35. 35. Installation and Deployment | Upgrade Pack■ Designer Client Install from UP1■ ...installing... | © 2012 IBM Corporation
  36. 36. Installation and Deployment | Upgrade Pack■ Designer Client Install from UP1■ ...and youre done! | © 2012 IBM Corporation
  37. 37. Installation and Deployment | Upgrade Pack■ Designer Client Install from UP1■ Complete! ─ New Designtime installed | notesframeworksharedeclipse ─ New Client runtime for the Extlib | notesframeworksharedeclipse ─ Preview server installed with Extlib | notesosgiextlibeclipse ─ The TeamRoom XL and Discussion XL templates | notesdata■ You are now ready to build the next generation of XPages Applications. | © 2012 IBM Corporation
  38. 38. Installation and Deployment | Upgrade Pack■ Designer with the Extension Library | © 2012 IBM Corporation
  39. 39. Installation and Deployment | Upgrade Pack■ Discussion XL app on XPiNC | © 2012 IBM Corporation
  40. 40. Installation and Deployment | Upgrade Pack■ Discussion XL app on the preview Server | © 2012 IBM Corporation
  41. 41. Installation and Deployment | OpenNTF■ Alternative deployment for OpenNTF release■ The 853 ExtLib UpdateSite NSF Deployment■ Domino 8.5.3 contains a feature which makes it easy for the administrator to deploy and update an Extension Library without the need to manually copy any files to the Domino Server.■ Using a standard NSF based on updateSite.ntf the administrator can dynamically deploy OSGi plugins to the server.■ This new feature is optional and simple to use.■ By default the dynamic contribution is turned off.■ Use notes.ini setting OSGI_HTTP_DYNAMIC_BUNDLES■ OSGI_HTTP_DYNAMIC_BUNDLES=updateSite2.nsf for example.■ Not available in 852 | © 2012 IBM Corporation
  42. 42. Installation and Deployment | OpenNTF■ Select CTRL+N to create a new application■ Name the application what you wish, but use the template...■ Eclipse Update Site (8.5.3) updatesite.ntf | © 2012 IBM Corporation
  43. 43. Installation and Deployment | OpenNTF■ This is the app created and how it appears when launched in Notes. | © 2012 IBM Corporation
  44. 44. Installation and Deployment | OpenNTF■ We can now import the updatesite which is extracted from any zip from the OpenNTF release - updateSiteOpenNTF-designer.zip■ Select the Import Local Update Site Button | © 2012 IBM Corporation
  45. 45. Installation and Deployment | OpenNTF■ Select the site.xml from the extracted zip file■ Then select OK on this dialog box■ This will begin the import process to the Update Site NSF | © 2012 IBM Corporation
  46. 46. Installation and Deployment | OpenNTF■ Once that is done, restart the server or...■ restart task http | © 2012 IBM Corporation
  47. 47. Installation and Deployment | OpenNTF■ Run restart task http at the server console■ Console should return the message “...NSF Based plugins are being installed in the OSGi runtime...” | © 2012 IBM Corporation
  48. 48. Installation and Deployment | OpenNTF■ Now that the server is done,■ we can point a Designer client at the same NSF, install the same updatesite and match what is on the server | © 2012 IBM Corporation
  49. 49. Installation and Deployment | OpenNTF■ Must have Enable Eclipse plug-in install checked in Preferences | © 2012 IBM Corporation
  50. 50. Installation and Deployment | OpenNTF■ Select the option to search for new features to install and then Next. | © 2012 IBM Corporation
  51. 51. Installation and Deployment | OpenNTF■ Select the Add Remote Location button■ Type in a name and then the URL to the Update Site NSF on your server■ Then select OK on the Add Remote Site dialog | © 2012 IBM Corporation
  52. 52. Installation and Deployment | OpenNTF■ This adds a location to the dialog■ Select this and then Finish | © 2012 IBM Corporation
  53. 53. Installation and Deployment | OpenNTF■ This will then fetch the list of features to install.■ We usually select all here, but individual pieces can be selected though not advised as this can lead to a mismatch in the code | © 2012 IBM Corporation
  54. 54. Installation and Deployment | OpenNTF■ Accept the licence■ Here is the screenshot for the Apache licence from OpenNTF■ Accept this and click Next to proceed. | © 2012 IBM Corporation
  55. 55. Installation and Deployment | OpenNTF■ This lists what you are about to install in Designer | © 2012 IBM Corporation
  56. 56. Installation and Deployment | OpenNTF■ The releases to OpenNTF include un-signed jars.■ This dialog prompts you to accept these unsigned jars■ NOTE: the jars from the Update Pack install are signed by IBM they are not from OpenNTF | © 2012 IBM Corporation
  57. 57. Installation and Deployment | OpenNTF■ And you are done. All that is left to do is to restart your Designer (and the other Notes clients)! | © 2012 IBM Corporation
  58. 58. Installation and Deployment | OpenNTFOnce Designer has been restarted, both the server and the Designer client will beusing the same version of the OpenNTF XPages Extension Library | © 2012 IBM Corporation
  59. 59. Installation and Deployment■ Summary | Main points to take away ─ Install and deployment depends on from where the ExtLib is downloaded ─ The ExtLib with the Upgrade Packs are supported by IBM ─ Upgrade Pack install is an executable and straight forward, just like any other installation ─ Updating the Upgrade Packs will be straight forward too ─ The ExtLib from OpenNTF isnt supported by IBM but contains more features ─ The UpdateSite NSF and OSGi bundling in 853 is the preferred way to deploy the OpenNTF version of the ExtLib on the server (not supported for production UP) ─ TeamRoom XL and Discussion XL are available from both download sources as well (OpenNTF = not signed | UP1 = signed) | © 2012 IBM Corporation
  60. 60. Agenda■ 1. Introduction■ 2. Installation and Deployment■ 3. Application Layout Control■ 4. Data View Control■ 5. Mobile■ 6. Q&A 60 | © 2012 IBM Corporation
  61. 61. Application Layout Control – What is this sectionabout?■ Overview of the Application Layout control■ Explain how this control is typically used■ Show how this control in a simple example 61 | © 2012 IBM Corporation
  62. 62. Application Layout Control■ Get a running OneUI application in less than 5 minutes!■ Fully customizable OneUI rendering■ Abstracts all the OneUI application parts■ Can even be customized by providing an inherited renderer 62 | © 2012 IBM Corporation
  63. 63. Application Layout Control■ Exposed in Domino Designers control palette along with several property categories and supported facets 63 | © 2012 IBM Corporation
  64. 64. Application Layout Control■ Used in the new TeamRoom XL, Discussion XL and DocLib XL templates■ Most effective when used on a single Custom Control that is shared across several XPages within an application ─ In-line with the Layout Container Pattern■ Exposed in Domino Designers control palette along with several property categories 64 | © 2012 IBM Corporation
  65. 65. Getting to grips with it... 65 | © 2012 IBM Corporation
  66. 66. Application Layout Control – TeamRoom XL Several XPages allDocuments.xsp announcements.xsp events.xsp calendar.xsp search.xsphome.xsp *.xsp 66 | © 2012 IBM Corporation
  67. 67. Application Layout Control – TeamRoom XL Several XPages + One Custom Control allDocuments.xsp announcements.xsp events.xsp calendar.xsp search.xsphome.xsp *.xsp layout.xsp (Custom Control) 67 | © 2012 IBM Corporation
  68. 68. Application Layout Control – TeamRoom XL Several XPages + One Custom Control = allDocuments.xsp Layout Container Pattern announcements.xsp events.xsp calendar.xsp search.xsphome.xsp *.xsp layout.xsp (Custom Control) 68 | © 2012 IBM Corporation
  69. 69. Application Layout Control – TeamRoom XL layout.xsp (Custom Control) 69 | © 2012 IBM Corporation
  70. 70. Application Layout Control – TeamRoom XL layout.xsp (Custom Control)<xe:applicationLayout/> 70 | © 2012 IBM Corporation
  71. 71. Application Layout Control – TeamRoom XL layout.xsp (Custom Control)<xe:applicationLayout/> 71 | © 2012 IBM Corporation
  72. 72. Application Layout Control – TeamRoom XL layout.xsp (Custom Control)<xe:applicationLayout/> 72 | © 2012 IBM Corporation
  73. 73. Application Layout Control – TeamRoom XL layout.xsp (Custom Control)<xe:applicationLayout/> 73 | © 2012 IBM Corporation
  74. 74. Application Layout Control – TeamRoom XLallDocuments.xsp (XPage)<xc:layout/> 74 | © 2012 IBM Corporation
  75. 75. Application Layout Control – TeamRoom XLallDocuments.xsp (XPage)<xc:layout/> 75 | © 2012 IBM Corporation
  76. 76. Zero to App Layout Hero... 76 | © 2012 IBM Corporation
  77. 77. Application Layout Control■ In a TeamRoom XL based database... ─ Create two blank XPages – Name both XPages as follows: • xpOne and xpTwo ─ Create a new Custom Control – Name the Custom Control as follows: • CcLayoutContainer■ In the WYSIWYG editor for the ccLayoutContainer Custom Control... ─ From the Extension Library category of the Control Palette – Dragndrop an Application Layout control 77 | © 2012 IBM Corporation
  78. 78. Application Layout Control■ Once you dragndrop the Application Layout control to the ccLayoutContainer Custom Control a wizard dialog appears ─ This wizard assists you in configuring the Application Layout■ Choose “OneUI Application Configuration” from the Configuration options list (1.)■ Check all the checkboxes available for the different types of Area (2.)■ Choose the oneuiv2_1_blue from the Application Theme options list (3.) ─ Though this theme on the Discussion template. Any theme from the app can be selected here.■ Click the OK button 78 | © 2012 IBM Corporation
  79. 79. Application Layout Control■ An instance of the Application Layout control will now reside on the ccLayoutContainer Custom Control■ You should Save all your changes at this point 79 | © 2012 IBM Corporation
  80. 80. Application Layout Control■ Dragndrop an instance of the ccLayoutContainer Custom Control unto each of your previously created XPages (xpOne and xpTwo)■ Again, Save all your changes 80 | © 2012 IBM Corporation
  81. 81. Application Layout Control■ Ensure you have saved all your changes to xpOne, xpTwo, and ccLayoutContainer■ Now open the xpOne and xpTwo XPages in a web browser■ You should see both pages with a header bar and footer links■ A number of resources, title, and pageIcon have also been automatically added■ You can also view the source of each page to study the emitted HTML markup structure 81 | © 2012 IBM Corporation
  82. 82. Application Layout Control■ You can now continue to configure the Application Layout control to establish a shared layout for the xpOne and xpTwo XPages■ Select the ccLayoutContainer Application Layout control instance in Designer■ Choose the Title Bar category in the Properties panel■ Then add text to the Title text field■ Save your changes 82 | © 2012 IBM Corporation
  83. 83. Application Layout Control■ Click on the Add Item button ─ Select Page Link Node from the options list ─ Repeat this step so that there are two of these nodes 83 | © 2012 IBM Corporation
  84. 84. Application Layout Control■ You will now have two Page Link Nodes in the Title Bar Area■ Set the label and page properties accordingly for each one using the Property editor 84 | © 2012 IBM Corporation
  85. 85. Application Layout Control■ Using the ccLayoutContainer Custom Control, type some text into the middle area facet and the LeftColumn facet■ Save your changes 85 | © 2012 IBM Corporation
  86. 86. Application Layout Control■ Refresh the xpOne XPage in the web browser■ You will now see the configuration of your Application Layout being reflected within the different areas of the page 86 | © 2012 IBM Corporation
  87. 87. Application Layout Control■ Summary | Main points to take away ─ You have learnt how the TeamRoom XL, Discussion XL, and DocLib XL templates use the same Layout Container pattern with the Application Layout control ─ You have successfully created an Application Layout layout container that can be shared throughout the application ─ By using this design pattern you can quickly establish a common layout and configuration for an application | © 2012 IBM Corporation
  88. 88. Agenda■ 1. Introduction■ 2. Installation and Deployment■ 3. Application Layout Control■ 4. Data View Control■ 5. Mobile■ 6. Q&A 88 | © 2012 IBM Corporation
  89. 89. The Data View | What is this section about?■ Give an overview of this control■ Highlight and explain the various elements of the control■ Then build a Data View from scratch in 20 easy steps 89 | © 2012 IBM Corporation
  90. 90. The Data View (xe:dataView) 90 | © 2012 IBM Corporation
  91. 91. The Data View (xe:dataView)■ The Data View control is used everywhere – web and mobile■ Extended from the View Panel control and is more flexible■ One of the most used ExtLib control■ HasWill become the main control for displaying a document collection■ You need to know this control 91 | © 2012 IBM Corporation
  92. 92. The Data View (xe:dataView) 92 | © 2012 IBM Corporation
  93. 93. The Data View (xe:dataView)■ Lets build a Data View from scratch■ Create a blank XPage on a Discussion XL app, expand the Extension Library drawer on the palette■ Select the Data View control and drag it to the page (1.)■ Then in the following dialog select the xpAllDocuments view as the data source for the Data View. (2.)■ OK this. 93 | © 2012 IBM Corporation
  94. 94. The Data View (xe:dataView)■ A representation of the Data View will now appear on the Design pane■ This needs further configuration before anything displays■ So lets start by displaying the topic title from the view data source 94 | © 2012 IBM Corporation
  95. 95. The Data View (xe:dataView)■ Go to the All Properties of the Data View and locate the attribute summaryColumn in the Format section■ Select the complex type xe:viewSummaryColumnfrom the add button thatll appear■ And then type in the name of the column you wish to display here – in this case Topic into columnName■ Save and preview this page. 95 | © 2012 IBM Corporation
  96. 96. The Data View (xe:dataView)■ This is enough to give us our first look at the Data View on the web browser■ Save your changes. Then view the results from Designer by selecting from the main menu Design – Preview in Web Browser – Default System Web Browser 96 | © 2012 IBM Corporation
  97. 97. The Data View (xe:dataView)■ We can add column titles by adding a columnTitle for summaryColumn and setting columnTitles to true 97 | © 2012 IBM Corporation
  98. 98. The Data View (xe:dataView)■ Lets add some details to the view entry■ To the details editable area we add a Panel container control.■ This becomes the facet for detail - <xp:panel xp:key="detail"> 98 | © 2012 IBM Corporation
  99. 99. The Data View (xe:dataView)■ Then to the Panel we add a Computed Field control.■ We are going to use this field to compute the Author and date the document was composed 99 | © 2012 IBM Corporation
  100. 100. The Data View (xe:dataView)■ The Computed Field is configured by combining two column values from the view data source of the Data View■ The Data View variable hasnt been set yet so lets do that now... 100 | © 2012 IBM Corporation
  101. 101. The Data View (xe:dataView)■ Select the Data View and to the var property set the value – dview1■ Just one more thing and thats to show these details. 101 | © 2012 IBM Corporation
  102. 102. The Data View (xe:dataView)■ Set the property expandedDetails to true...■ So at runtime these details now display 102 | © 2012 IBM Corporation
  103. 103. The Data View (xe:dataView)■ We can add more detail here thatll give us a preview of the document in that row ─ like pulling in the value of the Abstract column from the view ─ Adding actions, like a reply link ─ Display the documents tags■ So first add a new Panel, and set a name to it (so it could be used for partial refresh if needed) 103 | © 2012 IBM Corporation
  104. 104. The Data View (xe:dataView)■ Add a Computed Field to previewPanel and set the value to get the value of the Abstract column. 104 | © 2012 IBM Corporation
  105. 105. The Data View (xe:dataView)■ Save your changes.■ Then preview this update at runtime on a web browser 105 | © 2012 IBM Corporation
  106. 106. The Data View (xe:dataView)■ Sometimes you may not want the details to show when the Data View is first launched, but would like an option to display the details when needs be. Heres how.■ Clear the value on the expandedDetail property■ And set collapsibleDetail to true 106 | © 2012 IBM Corporation
  107. 107. The Data View (xe:dataView)■ The Data View with collapsible detail 107 | © 2012 IBM Corporation
  108. 108. The Data View (xe:dataView)■ The Data View indents response documents by default. We can add a twisty here to parent documents to expand and collapse those rows. 108 | © 2012 IBM Corporation
  109. 109. The Data View (xe:dataView)■ Pagers can be added to the Data View just like the View Panel, Repeat and Data Table■ Theres six available facets on the Data View to add the Pager 109 | © 2012 IBM Corporation
  110. 110. The Data View (xe:dataView)■ Once the pager has been dropped into any editable area, its for property needs to be set to that Data View. 110 | © 2012 IBM Corporation
  111. 111. The Data View (xe:dataView)■ Set also the row count, 15 rows, at this stage to see the pager. 111 | © 2012 IBM Corporation
  112. 112. The Data View (xe:dataView)■ Use the Extra Column feature to include more columns from the view data source in the Data View.■ Go to the extraColumns property and select the plus + button to add a column 112 | © 2012 IBM Corporation
  113. 113. The Data View (xe:dataView)■ This will add a viewExtraColumn[0] complex type■ The columnName property here corresponds to the column name on the data source – in this case it is Date■ More columns can be added and these will appear to the right of the first column 113 | © 2012 IBM Corporation
  114. 114. The Data View (xe:dataView)■ The Data View with extra columns 114 | © 2012 IBM Corporation
  115. 115. The Data View (xe:dataView)■ Categorization is also handled by the Data View■ Take the By Category view from the Discussion template■ This too can be represented in the Data View 115 | © 2012 IBM Corporation
  116. 116. The Data View (xe:dataView)■ First step is to create a new Data View like before but using the By Category view as the data source.■ Set the summaryColumn property to use the Topic column like before.■ Save and preview in a web browser 116 | © 2012 IBM Corporation
  117. 117. The Data View (xe:dataView)■ Back on the Data View locate the categoryColumn property and select the plus button■ And then set the columnName property to categories, from the view data source 117 | © 2012 IBM Corporation
  118. 118. The Data View (xe:dataView)■ The categorized Data View. 118 | © 2012 IBM Corporation
  119. 119. The Data View (xe:dataView)■ Sub categories can be added in the same way by adding a new viewCategoryColumn after the first category 119 | © 2012 IBM Corporation
  120. 120. The Data View (xe:dataView)■ Summary | Main points to take away ─ The main container control used to display a data collection in the TeamRoom and Discussion XL templates ─ Inherits from the View Panel control | © 2012 IBM Corporation
  121. 121. Agenda■ 1. Introduction■ 2. Installation and Deployment■ 3. Application Layout Control■ 4. Data View Control■ 5. Mobile■ 6. Q&A 121 | © 2012 IBM Corporation
  122. 122. XPages Mobile | What is this section about?■ Give an overview of what the new XPages Mobile controls are■ Show and explain how these controls are use to build a simple XPages Mobile application■ Quick tour of how these controls are used in the Discussion XL template■ Explain the typical design patterns of the XPages Mobile application, using the Discussion XL template as an example 122 | © 2012 IBM Corporation
  123. 123. XPages Mobile Applications – what are they?■ These apps build new and extend the reach of existing applications to smart phones and tablets ─ Provide pervasive access to Notes/Domino data from your mobile device – Apple IOS® 4 & 5 (iPhone™, iPad™ and iPod Touch™) – Android™ 2.3 (phones) and 3.x (tablets) ─ Improve business process efficiency by allowing decision makers to approve workflows on the go■ Enable templates with mobile access ─ Enable existing applications by refreshing the design ─ TeamRoom & Discussion XL (UP1 and DocLib in UP2) templates■ Extend the XPages framework to support mobile web browsers ─ Make it easy to develop mobile applications with the technology you know ─ One programming model for mobile, desktop browser and rich client 123 | © 2012 IBM Corporation
  124. 124. Domino Templates go Mobile■ Demo of the TeamRoom XL and Discussion XL Templates... 124 | © 2012 IBM Corporation
  125. 125. Hello XPages Mobile Applications World■ In this exercise we are going to build a XPages Mobile Application from scratch■ Enhance a existing non Extension Library application■ Enable it to use the XPages Extension Library■ Set the mobile app prefix in the xsp.properties■ Create the XPage■ Create the Single Page application■ Add the mobile pages to view documents■ These are the basic principles for XPages Mobile applications■ Built rapidly with little fuss... 125 | © 2012 IBM Corporation
  126. 126. Hello XPages Mobile Applications World■ Take any existing Application that inherits its design from the Discussion template (StdR85Discussion) - pre-UP1 126 | © 2012 IBM Corporation
  127. 127. Hello XPages Mobile Applications World XPage (xp:view) Single Page Application (xe:singlePageApp) Mobile Page (xe:appPage) Mobile Page (xe:appPage) 127 | © 2012 IBM Corporation
  128. 128. Hello XPages Mobile Applications World■ Enable the application to use the XPages Extension Library■ Select the Application Properties, then the Advanced Tab, and then under XPages Libraries select the checkbox for com.ibm.xsp.extli b.library 128 | © 2012 IBM Corporation
  129. 129. Hello XPages Mobile Applications World■ The next step is to add the Mobile Theme prefix - xsp.theme.mobile.pagePrefix■ This will enable the XPages Mobile theme for XPages in the application that begin with that prefix.■ Add the Package Explorer view to the Perspective if this hasnt already been done.■ Do this by selecting... ─ Window ─ Show Eclipse Views ─ Package Explorer. 129 | © 2012 IBM Corporation
  130. 130. Hello XPages Mobile Applications World■ This should add the Package Explorer view to beside main working set.■ From here locate the existing application■ Expand the WebContentWEB-INF folder.■ Then launch the xsp.properties file 130 | © 2012 IBM Corporation
  131. 131. Hello XPages Mobile Applications World■ Select the Source tab■ Then add the prefix to the source – xsp.theme.mobile.pagePrefix=m_■ In this case we have chosen the prefix m_, though you can select any prefix you like. 131 | © 2012 IBM Corporation
  132. 132. Hello XPages Mobile Applications World■ Create a new XPage with the with the mobile theme prefix 132 | © 2012 IBM Corporation
  133. 133. Hello XPages Mobile Applications World■ On the new XPage, drag and drop from the Mobile palette the Single Page Application Control.■ The Single Page Application Control (xe:singlePageApp) is the container for the XPages Mobile application. 133 | © 2012 IBM Corporation
  134. 134. Hello XPages Mobile Applications World■ Then add a Mobile Page control to the Single Page Application. And save the changes to the XPage.■ This will cause an error.■ The Single Page Application needs to have the selectedPageName property set! 134 | © 2012 IBM Corporation
  135. 135. Hello XPages Mobile Applications World■ So, to resolve this error we must first name the Mobile Page that was added to the Single Page Application■ Then use this Page Name to fill out the selectedPageName property. 135 | © 2012 IBM Corporation
  136. 136. Hello XPages Mobile Applications World■ Add a Heading control (xe:djxmHeading) to the Mobil Page. This will be the header for the mobile page, containing the Back button, header label and the actionFecet editable area. 136 | © 2012 IBM Corporation
  137. 137. Hello XPages Mobile Applications World■ To the header enter a value for the label.■ The XPages Mobile application is now ready to have a first look at it on a mobile device or a web kit browser... 137 | © 2012 IBM Corporation
  138. 138. Hello XPages Mobile Applications World■ Running the XPages Mobile App on a Web Kit browser - Chrome 138 | © 2012 IBM Corporation
  139. 139. Hello XPages Mobile Applications World■ The next step is to add a view to the Mobile Page. From the Extension Library palette select the Data View and Add that to the Mobile Page (1.)■ This will display a dialog Box. And from here (2.) Choose the xpAllDocuments view 139 | © 2012 IBM Corporation
  140. 140. Hello XPages Mobile Applications World■ After the Data View has been added to the Mobile page, we want to set one property, the summaryColumn. Select this complex type (1.) and then on xe:viewSummaryColumn select columnName and enter the value here for the Topic view (2.).■ Now lets have a look at this page on the web kit browser 140 | © 2012 IBM Corporation
  141. 141. Hello XPages Mobile Applications World■ The Documents display now in the row. 141 | © 2012 IBM Corporation
  142. 142. Hello XPages Mobile Applications World■ Were going to add a second mobile page to the single page application. This is going to be the mobile page in which well display documents■ Drag and drop another Mobile Page control to the Single Page Application■ And give this Mobile Page a name - pageName = ”documentPage” 142 | © 2012 IBM Corporation
  143. 143. Hello XPages Mobile Applications World■ Add a Heading control to the “documentPage” (1)■ And for this header the following properties are set. ─ Firstly the back property is Back – this is the label of the back button (2a). ─ The header label is set to Document Page (2b). ─ Then the moveTo property is then set to viewPage - this is the location on the page - Single Page Application - to which this action is to go back to (2c) 143 | © 2012 IBM Corporation
  144. 144. Hello XPages Mobile Applications World■ Next, add (1.) a Panel container control after the Heading control on the Mobile page■ Then to this Panel add a document data source ─ Select the Data panel and then the Add dropdown button ─ Choose the Domino Document option (2.) ─ Then select the MainTopic form from the Form combobox (3.) as the document data source for the Panel 144 | © 2012 IBM Corporation
  145. 145. Hello XPages Mobile Applications World■ Then add a Rounded List control to the Panel. This will add additional styling to the document page 145 | © 2012 IBM Corporation
  146. 146. Hello XPages Mobile Applications World■ And to the Rounded List container control add labels and bound input fields from the Data pane. ─ Though avoid using Tables in mobile apps – used here for demo purposes 146 | © 2012 IBM Corporation
  147. 147. Hello XPages Mobile Applications World■ Go back to the Data View.■ Here set the pageName to documentPage (1.) and another property openDocAsReadonly to true (2.) 147 | © 2012 IBM Corporation
  148. 148. Hello XPages Mobile Applications World■ Then finally resetContent property■ For the viewPage, set this to false■ And for the documentPage set it to true 148 | © 2012 IBM Corporation
  149. 149. Hello XPages Mobile Applications World■ Now we can see the results of our changes.■ The document should now open in the documentPage with the Back allowing the user to navigate back. 149 | © 2012 IBM Corporation
  150. 150. Discussion XL Template for Mobile■ Tour around the Discussion XL app 150 | © 2012 IBM Corporation
  151. 151. Discussion XL Template for Mobile■ Peel apart the mobile.xsp page 151 | © 2012 IBM Corporation
  152. 152. Discussion XL Template for Mobile■ The contents of each mobile page is contained within custom control.■ Why?■ Easier to work with and maintain■ Notice here that not all custom controls were initially designed for Mobil■ Reuse, reuse, reuse e.g. allDocumentsView 152 | © 2012 IBM Corporation
  153. 153. Discussion XL Template for Mobile■ The allDocumentsView serves as a content for a XPages mobile page■ Design elements are loaded when the loaded in a device – isMobile() - e.g. on a controls loaded property "${javascript:isMobile()}" ─ isMobile() is a function defined in /mobile-server.jss (this is a Server JavaScript file contained within the Discussion XL and TeamRoom XL templates) 153 | © 2012 IBM Corporation
  154. 154. Discussion XL Template for Mobile■ The isMobile method can also be used else where to reuse design elements ─ Change the default row count in a Data View ─ Change the page to open ─ And used to not load elements in Mobile - !isMobile■ Rip and Replace not required 154 | © 2012 IBM Corporation
  155. 155. Discussion XL Template for Mobile■ The Heading Controls actionFacet - buttons used to create a save documents■ This is a callback area where buttons take on the typical Mobile look and feel.■ And in Designtime■ 155 | © 2012 IBM Corporation
  156. 156. Discussion XL Template for Mobile■ Other action buttons in the template reuse existing design elements■ Though these elements need specific styling for Mobile 156 | © 2012 IBM Corporation
  157. 157. Discussion XL Template for Mobile■ Navigation - Transitioning between XPages Mobile Pages - MoveTo and Back button■ The MoveTo is used to navigate to another mobile page within the Single Page Application. ─ The simple action MoveTo action can also save the document■ The Back button returns the user to the previous Mobile page. It can also be used as a cancel or close button to a Mobile page■ Whats important is how the pages transition between each other, especially when the transition type is slide rather then fade or flip 157 | © 2012 IBM Corporation
  158. 158. Discussion XL Template for Mobile■ Slide transition – going to a page ─ Opening a document ─ Creating a new document■ ...transition is usually Left-To-Right■ Slide transition – returning from a document or view ─ Closing a document to return to a view ─ Saving a new document ─ Saving changes ─ Cancelling change ─ Or using the back button■ ---transition is usually Right-to-Left 158 | © 2012 IBM Corporation
  159. 159. Discussion XL Template for Mobile■ How the Default XPage launch works for Mobile applications ─ Currently no setting for setting the default XPage for Mobile devices ─ An alternative technique is used in the Discussion and TeamRoom XP templates – see main.xsp■ context.getUserAgent().getUserAgent() is used to get the platform the application is running upon and then redirects to the appropriate XPage 159 | © 2012 IBM Corporation
  160. 160. Mobile■ Summary | Main points to take away ─ XPages Mobile Apps are essentially Web Apps ─ Limited number of controls use the Mobile Theme | All controls in the Mobile palette, Data View and Outline ─ Support for iOS and Android ─ XPages mobile apps are usually contained within the one XPage – uses Dojo view swapping to move between mobile pages 160 | © 2012 IBM Corporation
  161. 161. Agenda■ 1. Introduction■ 2. Installation and Deployment■ 3. Application Layout Control■ 4. Data View Control■ 5. Mobile■ 6. Q&A 161 | © 2012 IBM Corporation
  162. 162. Q&A 162 | © 2012 IBM Corporation
  163. 163. Reference:■ Wiki documentation on the ExtLib in the Upgrade Pack ─ http://www-10.lotus.com/ldd/ddwiki.nsf/xpViewCategories.xsp?lookupName=Domino Designer XPages Extension Library■ The Notes Domino 8.5.3 Upgrade Pack download from IBM Passport Advantage ─ http://www-01.ibm.com/software/howtobuy/passportadvantage/■ The XPages Extension Library on OpenNTF ─ http://extlib.openntf.org■ XPages Info ─ http://xpages.info■ XPages Mobile Controls Tutorial ─ http://www-10.lotus.com/ldd/ddwiki.nsf/dx/XPages_Mobile_Controls_Tutorial_ 163 | © 2012 IBM Corporation
  164. 164. XPages Extension Library Book■ Factoids... ─ Comprehensive 600 page volume ─ IBM Press publication ─ Authored by a team of all-star XPages experts, Featuring contributions from key community members ─ Take full advantage of the XPages Extensibility Framework, Library & API ─ Step-by-step guide for developers of all experience levels ─ Combines reference material and practical use cases■ Coming Soon■ Available Q2 – 2012 ─ www.ibmpressbooks.com/bookstore/product.asp?isbn=0132901811 ─ www.amazon.com/XPages-Extension-Library/dp/0132901811 164 | © 2012 IBM Corporation
  165. 165. XPages Portable Command Guide Book■ Factoids... ─ Compact 320 page volume ─ IBM Press publication ─ Authored by members of XPages & Domino Designer dev teams ─ Perfect complement to the popular Mastering XPages book, helping experienced XPages developers go even further ─ Thoroughly covers XSP properties, Command Manager instructions, INI variables, OSGi console commands, debugging, logging and more. ─ Dozens of practical examples providing immediate solutions■ Available soon online ─ www.ibmpressbooks.com/bookstore/product.asp?isbn=0132943050 ─ www.amazon.com/XPages-Portable-Command-Guide/dp/0132943050 165 | © 2012 IBM Corporation
  166. 166. Mastering XPages Book■ Factoids... ─ Compact 750 page Best Selling volume ─ IBM Press publication ─ Authored by members of XPages & Domino Designer dev teams ─ The popular Mastering XPages book, helping experienced XPages developers go even further ─ Dozens of practical examples providing immediate solutions■ Available NOW online ─ http://www.ibmpressbooks.com/bookstore/product.asp?isbn=0132486318 ─ http://www.amazon.com/Mastering-XPages-Step---Step-Application/dp/0132486318 166 | © 2012 IBM Corporation
  167. 167. Other Sessions That May Interest YouSessions SpeakersJMP101: IBM Lotus Domino XPages Jumpstart Paul Della-Nebbia Howard GreenbergJMP102: Introduction To Java for Domino Developers Paul CalhounJMP301: Master Class: eXtending IBM Lotus Domino Designer and Domino XPages Graham OKeeffe Dan OConnorJMP302: Master Class: Using Themes to control the look and feel of your IBM Lotus Scott GoodDomino XPages applicationsJMP304: Master Class: Integration in the world of Social Business John Head Andrew BarickmanINV309: Strategy in Action: Social Business Application Development Brent Peters Philippe RiandAD101: IBM Lotus Domino Version 8.5.3 Application Development and Beyond Pete Janzen Maureen G. LelandAD102: Source Control For The IBM Lotus Domino Developer Declan Lynch 167 | © 2012 IBM Corporation
  168. 168. Other Sessions That May Interest YouSessions SpeakersAD103: Embracing the Eclipse Within Maureen G. LelandAD104: IBM Lotus Domino XPages Made Social Philippe RiandAD105: Use IBM Lotus Domino and XPages for your Social Business Herbert Wagger Niklas HeidloffAD106: IBM Lotus Domino XPages anywhere - Write them once, See them Everywhere Stephan Wissel Viktor KrantzAD107: IBM Lotus Domino XPages Meets Enterprise Data - Relational++ Andrejus ChaliapinasAD108: The Grand Tour of IBM Lotus Notes and Domino 8.5.3 Upgrade Pack 1s XPages Martin DonnellyCapabilitiesAD109: Ready, Set, Go! How IBM Lotus Domino XPages Became Mobile Eamon MuldoonAD110: IBM Lotus Domino XPages Go Zoom! Tony McGuckin Darin Egan 168 | © 2012 IBM Corporation
  169. 169. Other Sessions That May Interest YouSessions SpeakersAD111: The X Path: Practical guide to taking your IBM Lotus Notes applications to Domino Stephan WisselXPages Hunter R. MedneyAD113: Moving Forward with IBM Lotus Domino REST services Stephen AuriemmaAD114: Dont be afraid of curly brackets reloaded - even more JavaScript for LotusScript Stephan WisselDevelopersAD306: Integrate your applications into IBM Websphere Portal Thomas StoberBP103: IBM Lotus Domino XPages Blast! Matt White Tim ClarkBP107: IBM Lotus Notes/Domino Application Development Competitive Advantage : The David ViaSocial Business Edition John HeadBP109: Apps, Apps, and More Apps: Meet the Very Best Open Source Apps from OpenNTF Niklas Heidloff- The 2012 Edition Bruce ElgortBP114: To IBM Lotus Domino XPages and Beyond! The Lotusphere Sessions Database Tim Davis Ben Langhinrichs 169 | © 2012 IBM Corporation
  170. 170. Other Sessions That May Interest YouSessions SpeakersBP115: Deploying and Managing Your IBM Lotus Domino XPages Applications Warren Elsmore Matt WhiteBP118: Using Java to build applications fit for the enterprise Chris ConnorBP120: One Application To Rule Them All Kathy Brown Paul SteelSHOW110: Using the IBM Lotus Domino XPages Extension Library for the Real World Tony McGuckin Paul HannanSHOW111: How YOU deliver mobile applications the easy way with IBM Lotus Domino Chris ConnorXPages Web AppsSHOW112: Domino OSGi development David Taieb Paul R. Fiore 170 | © 2012 IBM Corporation
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×