Connect 2014 - JMP102: Creating a Great XPages User Interface
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Connect 2014 - JMP102: Creating a Great XPages User Interface

on

  • 1,941 views

IBM Notes and Domino 9 Social Edition includes many new controls to make it easier to develop a great web 2.0 user interface for your XPages applications. This session will focus on those new controls ...

IBM Notes and Domino 9 Social Edition includes many new controls to make it easier to develop a great web 2.0 user interface for your XPages applications. This session will focus on those new controls that deliver the most in terms of rapidly building an exceptional user experience. Learn how to use the form table and the data view controls to surface IBM Domino data with a modern web interface. Then learn to use navigators, dialogs, value pickers, the in place form, tooltips and Dojo UI controls to allow your users to interact with your application. Finally, you'll learn how to set up the application layout control to provide an interface framework with menus using the IBM OneUI interface or even Twitter Bootstrap.
Speakers: Howard Greenberg and Paul Della-Nebbia from TLCC

Statistics

Views

Total Views
1,941
Views on SlideShare
1,441
Embed Views
500

Actions

Likes
0
Downloads
101
Comments
0

5 Embeds 500

http://www.tlcc.com 438
http://www.idonotes.com 35
http://ae-a11.kreditwerk.de 14
http://tlcc.com 12
http://172.29.6.144 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Connect 2014 - JMP102: Creating a Great XPages User Interface Presentation Transcript

  • 1. JMP102: Creating a Great XPages User Interface Howard Greenberg, TLCC Paul Della-Nebbia, TLCC © 2014 IBM Corporation
  • 2. Acknowledgements and Disclaimers Availability. 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. The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this presentation or any other materials. Nothing contained in this presentation 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. All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer. 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. © Copyright IBM Corporation 2014. All rights reserved.  U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.  IBM, the IBM logo, ibm.com, Domino, and Notes are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or both. If these and other IBM trademarked terms are marked on their first occurrence in this information with a trademark symbol (® or ™), these symbols indicate U.S. registered or common law trademarks owned by IBM at the time this information was published. Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM trademarks is available on the Web at “Copyright and trademark information” at www.ibm.com/legal/copytrade.shtml Other company, product, or service names may be trademarks or service marks of others. 2
  • 3. Who are we?  Howard Greenberg & Paul Della-Nebbia – Teaching Notes and Domino since 1994 – Partners at TLCC, the Leader in Notes and Domino Training – And Now, the Leader in XPages Training 3
  • 4. About TLCC  Lots of XPages Courses for both 9 and 8.5! ‒ ‒ ‒ ‒ ‒ Introduction to XPages Development … FREE !! JavaScript for XPages Development XPages Development 1 XPages Development 2 Rapid XPages Development Using the Application Layout and Dojo UI Controls ‒ Mobile XPages for Domino ‒ Java 1 for XPages Developers ‒ Java 2 for XPages Developers  Self Paced Training ‒ Learn anywhere! ‒ An Instructor is a click away  Instructor Led (Private) ‒ Online or at your site  TLCC Mentoring Services 4
  • 5. Goal: Make a More Usable, Better Looking XPages Application! Data View View Panel Demo100_ViewPanel Demo761_CustByNameView 5
  • 6.  Prerequisites & Configuration  Form Table control  Data View control  Dojo Form controls  Dialogs and Value pickers  Navigation controls  Application Layout Design Framework  Wrap up 6
  • 7. System Prerequisites  Notes and Domino 8.5.3 (Install Extension Library from OpenNTF or IBM’s Update Pack 1) – Domino Server • Copy files or use an Update Site Database (preferred) – Designer • Install Plugin – Notes client (only needed for XPINC apps) • Use Update Site  Notes and Domino 9 (Extension Library is already included for Domino server, Designer, and Notes clients) – Optionally install Bootstrap4XPages plugin - to use Bootstrap and Bootstrap responsive themes 7
  • 8. Application Configuration 8
  • 9.  Prerequisites & Configuration  Form Table control  Data View control  Dojo Form controls  Dialogs and Value pickers  Navigation controls  Application Layout Design Framework  Wrap up 9
  • 10. Form Table  Quickly create input area for editing and reading  Server-side validation error messages – Either at top or next to field control  Header area – title and description at top – content area  labels can be positioned above or left of the input controls  required field indicator ( * ) Note: Need IBM OneUIV2 Theme to display (or BootStrap4Xpages)  Footer area (use for buttons)  Multi-column Demo101_FormTable 10
  • 11. What’s a facet?  Not a flat surface of a jewel, think the other definition – “part or element of something”  It is a place to add control(s) to a control  Either Named or Unnamed – Example of Unnamed • Where the Form Column and Form Row controls go in the Form Table control • Can have as many as you want – Example of Named • Footer area of Form Table • Uses the XP:Key to denote where the facet area is attached to • Can only have ONE (but can add a panel)  Used Extensively on XPages Controls 11
  • 12. Named versus Unnamed Facets 12
  • 13.  Prerequisites & Configuration  Form Table control  Data View control  Dojo Form controls  Dialogs and Value pickers  Navigation controls  Application Layout Design Framework  Wrap up 13
  • 14. Data View Data View View Panel 14
  • 15. What’s Better About the Data View  A completely different interface – styling differences for links, pagers, column headings, column text, etc…  A Summary column (or facet to add anything)  A row detail area – shown or hidden all at once or individually – can have other controls to allow: • in-view editing • look-ups to other data • single page read-only applications  additional pager types and locations available  additional columns are right-aligned  Note: Need IBM OneUIV2 Theme to display (or Bootstrap4XPages) 15
  • 16. New Pagers  New pagers in addition to standard pager control – Use with any iterator control (repeat, Data Table, View)  pagerDetail – show/hide details for all rows (Data View only)  pagerSizes - choose the number of rows per page to display  pagerAddRows - append more rows (great for mobile)  pagerExpand – expand/collapse all rows)  pagerSaveState – Not really a pager, save/restore the view state (return to same page) – Used with viewStateBean 16 Demo151DataView Demo153DataView Demo154DataView
  • 17.  Prerequisites & Configuration  Form Table control  Data View control  Dojo Form controls  Dialogs and Value pickers  Navigation controls  Application Layout Design Framework  Wrap up 17
  • 18. Dojo Form Controls  An easy way to increase input usability!  Client-side – does not require a server round-trip  Uses Dojo Toolkit – 1.8 for Domino 9, 1.6 for 8.5.3  Either extends a control with added functionality – Dojo Combo Box  Or, adds entirely new functionality – Dojo Slider Rule or Dojo Number Spinner 18
  • 19. Dojo Validation Text Box  Immediately validate text entry using: – Required: user must enter something – A Regular Expression to validate content  User sees prompt when entering field  User gets immediate feedback  No JavaScript alerts!  Must Require User Input – Either set the required property to true – Or, provide a Required Validator  Optionally, provide a Regular Expression  Server Side Validators (like length) still use Error Message Control 19 Demo210_ValidationTextBox
  • 20. Dojo Combo Box and Filtering Select  Provides Type Ahead along with a drop-down selection – Dojo Combo Box allows the entry of values not in list – Dojo Filtering Select only allows user to select supplied values  Optionally can limit the number of items shown  Filtering Select adds support for: – label | value pairs – built-in validation for entered values – Can provide a tooltip prompt  Tip! Create a standard Combo Box to build Select Items and copy via source view to the Dojo Combo Box or Filtering Select Demo220_FilteringSelect 20
  • 21. Dojo Number Text Box and Dojo Currency Text Box  Add number constraints with messages displayed as a tooltip – User gets immediate feedback  Can provide a tooltip prompt  Can set a pattern (to standardize format instead of allowing for locale changes)  Can set decimal places  Display Options – Decimal – Percent – Currency Demo230_Number  Currency Text Box adds ability to fix the currency symbol – ISO 4217 three letter sequence 21
  • 22. Dojo Spinner  User can type in a number or use up/down arrows  Extension of Dojo Number Text Box  Set constraints and tooltips  Set a value for the increment/decrement when: – User uses up or down arrow keys or clicks arrow (smallDelta) – User uses page up or down key (largeDelta) Demo240_Spinner 22
  • 23. Dojo Slider  Horizontal or Vertical (two different controls)  User can drag slider, use arrows, or click on slider to set value  Optional Slider Rule and Slider Rule Labels  Set a value for the increment/decrement when: – User uses up or down arrow keys or clicks arrow (smallDelta) – User uses page up or down key (largeDelta)  User does not see value selected – Can add via the onchange Client side event – Get the value via CSJS and write to a computed field Demo250_Slider 23
  • 24.  Prerequisites & Configuration  Form Table control  Data View control  Dojo Form controls  Dialogs and Value pickers  Navigation controls  Application Layout Design Framework  Wrap up 24
  • 25. Dialog Control  Displays a modal dialog  Related controls (optional but useful!) – dialogButtonBar – placeholder for buttons – dialogContent – placeholder for content  Opening and Closing a Dialog Control – Client Side JavaScript • XSP.openDialog("#{id:dialogId }") • XSP.closeDialog("#{id:dialogId }","#{id:refreshId }" ); – Server Side JavaScript (use getComponent(“id”) for dialogComponent) • dialogComponent.show( ) • dialogComponent.hide(refreshId ) 25
  • 26. Dialog Control Strategies Different ways to accept input and pass values back to “calling” page  Use the same data source for both “calling” page and dialog – easy to implement  Have a different data source for dialog content – Dialog close button saves data source in dialog  Bind the same scoped variables in dialog and on “calling” page  Pass values using the getValue() and setValue() methods – Use getValue() to get values from dialog controls – Use setValue() to write to controls on “calling” page – Least preferred way! Demo310DataView Demo310Input 26
  • 27. Value Picker  Present a dialog to user to select a value(s)  Data Providers – xe:simpleValuePicker - hard coded or computed choices – xe:dominoViewValuePicker – uses Domino view – xe:beanValuePicker – the choices are from a Java bean  Value Picker is for selection only, must be bound to a control like an Edit Box which is bound to the data source  Options – Support for Label | Value pairs (value is always first sorted column in view) – Single or Multi-value – Optionally use checkboxes – Add search capability – Type Ahead in Edit Box (values are from Value Picker) 27 Demo320_ValuePicker
  • 28. Value Picker Validation  Can set target control to only allow values that are in the Value Picker – Use case: When user types in a value in the target control (Edit Box)  New Validator: xe:pickerValidator Demo330_ValuePickerValidation 28
  • 29. Dojo List Text Box and Value Pickers  Works Great Together!  In Edit mode user can delete entries with the X  In Read mode only the values show  Specify a MultipleSeparator  Works with Label | Value Pairs too – displayLabel property set to true  Use onChange event to trigger refresh if needed 29 Demo340_DojoListTextBox
  • 30. Tooltip and Tooltip Dialog  Both display a tooltip with content – Non-modal, they go away when user clicks elsewhere or moves cursor  Tooltip is for displaying text when user hovers over a control – Tooltip goes away when user moves cursor off control – Doesn’t work for all controls or for panels – Tie the Tooltip control to the desired control the user hovers over  Tooltip Dialog is opened via code 30
  • 31. Tooltip  Used for displaying information when user hovers over a control – Goes away when user moves mouse off control (onMouseOut) – No need for any code  for property defines what control  Either use: – label property for one value (Simple) – Put content between tooltip tags and set dynamicContent=“true” (Complex) Demo350_Tooltip 31
  • 32. Tooltip Dialog  Useful to allow user to edit information – Requires code to open – Closes when user clicks outside toolip or via code (button or link)  Open via Client Side JavaScript – XSP.openTooltipDialog("#{id:tooltipDialogId }","#{id:tooltipTargetId }") – No Server Side equivalent  Close via Client Side or Server Side JavaScript – Client Side: XSP.closeTooltipDialog("#{id:tooltipDialogId }","#{id:refreshId }" ); – Server Side: dialogComponent.hide(refreshId )  Put all content inside TooltipDialog tags – No label property like Tooltip 32
  • 33. Dialog vs. Tooltip Dialog Dialog Tooltip Dialog Demo360_DojoTooltipDialog 33
  • 34. InPlaceForm  Displays a dialog “in-line” on the page – Shifts contents down (unlike Tooltip Dialog) – Only closed via buttons  Related controls (optional but useful!) – dialogButtonBar – placeholder for buttons – dialogContent – placeholder for content  Creates components when opened  Opened and closed via SSJS  Great for use in a Data View, Repeat, etc. 34
  • 35. InPlaceForm Methods, Properties, and Events  Open the InPlace Form – inPlaceFormComponent.show( )  Close the InPlace Form – inPlaceFormComponent.hide( )  Toggle the InPlaceForm – inPlaceFormComponent.toggle( )  Determine if InPlaceForm is being shown/hidden – inPlaceFormComponent.isVisible( )  Events (SSJS only) – beforeContentLoad – afterContentLoad Demo370_InPlaceForm 35
  • 36. Inline View Editing Made Easy!  Edit Domino data right in the view!  Use a Data View with an InPlace Form in the Details Demo380_InPlaceForm_DataView 36
  • 37.  Prerequisites & Configuration  Form Table control  Data View control  Dojo Form controls  Dialogs and Value pickers  Navigation controls  Application Layout Design Framework  Wrap up 37
  • 38. Navigation Controls  Dozen or so navigation type controls  Most use TreeNodes for items  Set submitValue property for each item – onItemClick event to find out what user clicked (CSJS or SSJS)  Navigator control is most useful when combined with Application Layout control – selected property used to determine which item is highlighted 38
  • 39. Tree Nodes – Builds the list  xe:basicLeafNode  xe:basicContainerNode  xe:separatorTreeNode  xe:dominoViewEntriesTreeNode  xe:dominoViewListTreeNode  xe:pageTreeNode  xe:repeatTreeNode  xe:loginTreeNode  xe:userTreeNode  xe:beanTreeNode 39
  • 40. One onItemClick event per control  Code to determine what the user clicked (submitValue property is returned) – CSJS … XSP.getSubmitValue() – SSJS … context.getSubmittedValue() 40 DemoXPage617
  • 41. Navigator control  Best navigator control for use in LeftColumn facet of Application Layout control – node for currently displayed page is automatically selected (pageTreeNode) – selected property can be coded when other types of nodes • dominoViewEntriesTreeNode • dominoViewListTreeNode 41 DemoXPage619 DemoXPage621a, 621b, 621c
  • 42. Toolbar control  Good control for functionality of Form and View Action Bars 42 DemoXPage652View DemoXPage652Input
  • 43. Popup Menu control  Popup menu navigation  Code an event on a button or link to popup the menu using XSP.openMenu DemoXPage642 43
  • 44.  Prerequisites & Configuration  Form Table control  Data View control  Dojo Form controls  Dialogs and Value pickers  Navigation controls  Application Layout Design Framework  Wrap up 44
  • 45. Six Facets and Five Bar Areas 45
  • 46. One onItemClick event for All Nodes in Configuration  onItemClick – triggered when any node in any of its configuration properties is fired, including: – bannerApplicationLinks SSJS - get submitted value for clicked node: – bannerUtilityLinks – titleBarTabs – placeBarActions – footerLinks CSJS - get the submit value for clicked node: DemoXPage711, DemoXPage712 46
  • 47. Designing an Application Layout in a Custom Control Demo761_CustByNameView 47
  • 48. Designing an Application Layout in a Custom Control  Enable all six facet areas in the applicationLayout by adding an Editable Area control (xp:callback) to each facet  Add Property Definitions to the custom control to pass property values from the XPage to ccAppLayout (like navigationPath, enableSearch, enableSalesBar enablePartsBar, etc…) 48
  • 49. Designing an Application Layout in a Custom Control (procedure)  Step 1: Create a Custom Control and drag in an Application Layout control – Choose a OneUI version 2.1 theme 49
  • 50. Designing an Application Layout in a Custom Control (procedure continued)  Step 2: Set the configuration properties: – Banner nodes – Title Bar nodes (tabs) – Place Bar nodes (buttons) – Footer links – Legal text 50
  • 51. Designing an Application Layout in a Custom Control (procedure continued)  Step 3: Enable required columns (not the recommended approach) – Left column – Middle column – Right column 51
  • 52. Designing an Application Layout in a Custom Control (procedure continued)  Step 3: Enable ALL SIX facet areas in the applicationLayout by adding an Editable Area control (xp:callback) to each facet 52
  • 53. Designing an Application Layout in a Custom Control (procedure continued)  Step 3 continued: Establish a Naming Convention for facets and panels 53
  • 54. Designing an Application Layout in a Custom Control (procedure continued)  Step 4: Add Property Definitions to the custom control to pass property values from the XPage to ccAppLayout (like navigationPath, enableSearch, enableSalesBar, etc…) 54
  • 55. Navigation and Context – You are Here! Demo761_AppLayout (custom control) Demo761_CustByNameView 55
  • 56. Application Configuration for Bootstrap4XPages  Install Bootstrap4XPages plugin – Domino sever – Domino Designer – Notes client (for XPiNC)  Application settings (xsp.properties) – xsp.library.depends= com.ibm.xsp.extlib.library, org.openntf.xsp.bootstrap.library – xsp.theme= (one of these) • bootstrapv2.3.2 • bootstrapv2.3.2r • bootstrapv3.0.0 56 DemoXPage721
  • 57.  Prerequisites & Configuration  Form Table control  Data View control  Dojo Form controls  Dialogs and Value pickers  Navigation controls  Application Layout Design Framework  Wrap up 57
  • 58. Get the Slides and Demo Database http://www.tlcc.com/JMP102 58
  • 59. Key Points  Great stuff in the Extension Library – Build better looking apps faster  Data View and Form Table make your apps look very Web 2.0  OneUI is a very good idea  The Application Layout control is used to Rapidly develop a consistent user interface that can implement the “One UI” design framework (awesome)  Application Layout control + Bootstrap4XPages (totally awesome) 59
  • 60. Other Suggested Sessions  BP202 - Rapid XPages Development Using the Application Layout Control, Thursday at 11:00 – with Howard and Paul!  SHOW102 - XPages: Still No Experience Necessary, Wednesday at 10:30  CUST104 - XPages at SMC Corporation: See how XPages can drive business forward, Wednesday at 11:15  AD302 - Get the Best Out of Bootstrap with Bootstrap4XPages, Tuesday at 3:00  AD503 - XPages Mobile Development in IBM Domino 9.0.1 and Beyond, Thursday at 10:00  BP204 - It's Not Infernal: Dante's Nine Circles of XPages Heaven, Tuesday at 10:00  BP203 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality, Tuesday at 1:30 Reminder: Slides and Demo Database are at: http://www.tlcc.com/JMP102 60
  • 61.  Access Connect Online to complete your session surveys using any: – Web or mobile browser – Connect Online kiosk onsite 61