Connect 2014 - JMP102: Creating a Great XPages User Interface

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

http://www.ibm.com/legal/copytrade.shtml�

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


Form Table control

Data View control

Dojo Form controls


Navigation controls


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


Form Table control

Data View control

Dojo Form controls


Navigation controls


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


Form Table control

Data View control

Dojo Form controls


Navigation controls


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


Form Table control

Data View control

Dojo Form controls


Navigation controls


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


Form Table control

Data View control

Dojo Form controls


Navigation controls


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


Form Table control

Data View control

Dojo Form controls


Navigation controls


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


Step 3: Enable required columns (not the recommended approach) – Left column – Middle column – Right column

52


Step 3: Enable ALL SIX facet areas in the applicationLayout by adding an Editable Area control (xp:callback) to each facet

53


Step 3 continued: Establish a Naming Convention for facets and panels

54


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


Form Table control

Data View control

Dojo Form controls


Navigation controls


Wrap up

Get the Slides and Demo Database

http://www.tlcc.com/JMP102

58

http://www.tlcc.com/JMP102�

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

Technology

Connect 2014 - JMP102: Creating a Great XPages User Interface