Upload
howard-greenberg
View
2.095
Download
12
Embed Size (px)
DESCRIPTION
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
Citation preview
© 2014 IBM Corporation
JMP102: Creating a Great XPages User Interface
Howard Greenberg, TLCC Paul Della-Nebbia, TLCC
2
Acknowledgements and Disclaimers
© 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.
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.
Who are we?
3
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
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
Goal: Make a More Usable, Better Looking XPages Application!
5
Data View
View Panel
Demo100_ViewPanel Demo761_CustByNameView
6
Prerequisites & Configuration
Form Table control
Data View control
Dojo Form controls
Dialogs and Value pickers
Navigation controls
Application Layout Design Framework
Wrap up
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
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
Form Table
10
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 ( * )
Footer area (use for buttons)
Multi-column
Note: Need IBM OneUIV2 Theme to display (or BootStrap4Xpages)
Demo101_FormTable
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
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
Data View
14
Data View
View Panel
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
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
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
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
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
20
Demo220_FilteringSelect
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
Currency Text Box adds ability to fix the currency symbol – ISO 4217 three letter sequence
21
Demo230_Number
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)
22
Demo240_Spinner
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
23
Demo250_Slider
24
Prerequisites & Configuration
Form Table control
Data View control
Dojo Form controls
Dialogs and Value pickers
Navigation controls
Application Layout Design Framework
Wrap up
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
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!
26
Demo310DataView Demo310Input
Value Picker
27
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)
Demo320_ValuePicker
Value Picker Validation
28
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
Dojo List Text Box and Value Pickers
29
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
Demo340_DojoListTextBox
Tooltip and Tooltip Dialog
30
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
Tooltip
31
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
Tooltip Dialog
32
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
Dialog vs. Tooltip Dialog
33
Tooltip Dialog
Dialog
Demo360_DojoTooltipDialog
InPlaceForm
34
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.
InPlaceForm Methods, Properties, and Events
35
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
Inline View Editing Made Easy!
36
Edit Domino data right in the view!
Use a Data View with an InPlace Form in the Details
Demo380_InPlaceForm_DataView
37
Prerequisites & Configuration
Form Table control
Data View control
Dojo Form controls
Dialogs and Value pickers
Navigation controls
Application Layout Design Framework
Wrap up
Navigation Controls
38
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
Tree Nodes – Builds the list
39
xe:basicLeafNode
xe:basicContainerNode
xe:separatorTreeNode
xe:dominoViewEntriesTreeNode
xe:dominoViewListTreeNode
xe:pageTreeNode
xe:repeatTreeNode
xe:loginTreeNode
xe:userTreeNode
xe:beanTreeNode
One onItemClick event per control
40
Code to determine what the user clicked (submitValue property is returned) – CSJS … XSP.getSubmitValue() – SSJS … context.getSubmittedValue()
DemoXPage617
Navigator control
41 DemoXPage619 DemoXPage621a, 621b, 621c
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
Toolbar control
42 DemoXPage652View DemoXPage652Input
Good control for functionality of Form and View Action Bars
Popup Menu control
43
DemoXPage642
Popup menu navigation
Code an event on a button or link to popup the menu using XSP.openMenu
44
Prerequisites & Configuration
Form Table control
Data View control
Dojo Form controls
Dialogs and Value pickers
Navigation controls
Application Layout Design Framework
Wrap up
Six Facets and Five Bar Areas
45
One onItemClick event for All Nodes in Configuration
46
DemoXPage711, DemoXPage712
onItemClick – triggered when any node in any of its configuration properties is fired, including:
– bannerApplicationLinks – bannerUtilityLinks – titleBarTabs – placeBarActions – footerLinks
SSJS - get submitted value for clicked node:
CSJS - get the submit value for clicked node:
47
Demo761_CustByNameView
Designing an Application Layout in a Custom Control
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…)
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
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
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
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
53
Designing an Application Layout in a Custom Control (procedure continued)
Step 3 continued: Establish a Naming Convention for facets and panels
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…)
55
Navigation and Context – You are Here!
Demo761_AppLayout (custom control) Demo761_CustByNameView
Application Configuration for Bootstrap4XPages
56
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
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
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
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
60
Reminder: Slides and Demo Database are at: http://www.tlcc.com/JMP102
Access Connect Online to complete your session surveys using any: – Web or mobile browser – Connect Online kiosk onsite
61