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
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
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
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
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
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
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
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