Creating Great XPages UIs

Creating a Great XPages User Interface
Tweet about this event: #XPages
and mention us: @teamstudio @TLCCLTD
@PaulDN
February 13, 2014

Courtney Carter
Inbound Marketing Specialist

@teamstudio
teamstudio.com
@TLCCLTD
tlcc.com

Who We Are
• Our background is in creating tools for collaborative
computing in mid-size and large enterprises,
primarily for IBM Notes
• Easy-to-use tools for developers and administrators
• 2300+ active customers, 47 countries
• Offices in US, UK and Japan
• Entered mobile space in 2010 with Unplugged: easy
mobilization of Notes apps to Blackberry, Android
and iOS

Teamstudio Unplugged
• Your mobile Domino server: take your Notes apps
with you!
• End-users access Notes applications from mobile
devices whether online or offline
• Leverages existing skills and technology – XPages –
a replication model you already know
• Unplugged 3.0 recently released
• IBM Collaboration Solutions Award Winner 2013 and
2014

Unplugged Templates
•

Continuity – Mobile offline access to
BCM programs

•

OneView Approvals – Expense
approvals; anywhere, anytime

•

CustomerView – lightweight CRM
framework for field sales and field
service teams
• Contacts – customer information database
• Activities – customer activity log
• Media – mobile offline file storage and access

• Next Teamstudio/TLCC webinar: March 13, 2014
• Next Wireless Wednesdays webinar: Part 2 on March 5, 2014
o Learn Domino mobile development

• Promotion:
o Demo CustomerView and be entered to win an iPad
Mini

Creating a Great XPages UI
Your Hosts and Presenters Today:

Howard Greenberg
TLCC

@TLCCLtd

Paul Della-Nebbia

#XPages

TLCC
@PaulDN

1

TLCC Courses and Services

• The Leader in Notes and Domino Training since
1997
• Self Paced Distance Learning Courses for
Notes/Domino
– XPages, Development, and Administration (user too!)

• OnSite Private Classes
• Mentoring/Consulting Services
• Free demo courses
– Intro. To XPages Development
– Application Development 1

2

• Save hundreds and even Thousands of Dollars
on the most popular courses and packages
• Through February 28th

www.tlcc.com/admin/tlccsite.nsf/pages/connectsale

3

Upcoming and Recorded Webinars

Next Webinar – In March 13th
Application Layout Control with Howard and Paul

www.tlcc.com/xpages-webinar

View Previous Webinars
(use url above)

4

Engage User Conference

• In Europe? Don’t Miss Engage (formerly BLUG)
– March 16th and 17th
– FREE!
– Over 50 breakout sessions by
the leading experts, the list is now available

• Tack on an extra day of training on March 18th
– Admin topic: Managing a Cross System Identity
– Developer topic: Rapid XPages Development

• With Howard Greenberg
• Get TLCC’s Four Day Rapid XPages Development course as part of
the tuition!!!
– A $600 value by itself!

Click here for more information
5

Asking Questions

Q & A at the end!
Type in your
questions as they
come up
6

Goal: Make a More Usable, Better Looking XPages Application!

Data View

View Panel

Demo100_ViewPanel
Demo761_CustByNameView

7

Agenda

• Prerequisites & Configuration
• Form Table control
• Data View control
• Dojo Form controls
• Dialogs and Value pickers
• Navigation controls
• Introduction to Application Layout
• Q&A

8

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

9

Agenda

• Q&A

11

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 ( * )
• Footer area (use for buttons)
• Multi-column

Note: Need IBM OneUIV2 Theme to display
(or BootStrap4Xpages)

Demo101_FormTable

12

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

13

Named versus Unnamed Facets

14

Agenda

• Q&A

15

Data View

Data View

View Panel

16

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)

17

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

Demo151DataView
Demo153DataView
Demo154DataView

18

Agenda

• Q&A

19

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

20

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
Demo210_ValidationTextBox

21

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

22

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

Demo230_Number

23

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

24

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

25

Agenda

• Q&A

26

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 )

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)

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

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

•
•
•
•
•

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

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

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

33

Dialog vs. Tooltip Dialog

Dialog
Tooltip Dialog

Demo360_DojoTooltipDialog

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.

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
36

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

37

Agenda

• Q&A

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

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

40

One onItemClick event per control
• Code to determine what the user clicked (submitValue property is returned)
– CSJS … XSP.getSubmitValue()
– SSJS … context.getSubmittedValue()

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

DemoXPage619
DemoXPage621a, 621b, 621c

42

Toolbar control
 Good control for functionality of Form and View Action Bars

DemoXPage652View
DemoXPage652Input

43

Agenda

• Q&A

44

Six Facets and Five Bar Areas

45

One onItemClick event for All Nodes in Configuration
• onItemClick – triggered when any node in any of its configuration properties is fired,
including:
– bannerApplicationLinks
– bannerUtilityLinks
SSJS - get submitted value for clicked node:
– titleBarTabs
– placeBarActions
– footerLinks

CSJS - get the submit value for clicked node:

DemoXPage711, DemoXPage712

46

Designing an Application Layout in a Custom Control

Demo761_CustByNameView

47

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

DemoXPage721

48

Agenda

• Q&A

49

Get the Slides and Demo Database

www.tlcc.com/feb-webinar

50

Want to Learn More?
Rapid XPages Development using Application Layout and Dojo UI Controls Course

• Self paced course

• Four Days of content
• Lots of demos/activities
• An instructor is a click away

• On sale for only $599
• Save $300!

More information on the 8.5 version
More information on the 9.0 version

51

Questions????

Use the Q&A pane in WebEx
to ask questions
We will answer your questions
verbally

52

Question and Answer Time!

Paul Della-Nebbia

Howard Greenberg

Download the demo - www.tlcc.com/feb-webinar
Upcoming Events:

TLCC Olympic Sale
Engage in the Netherlands, March
TLCC TackItOn the day after!

TLCC Questions?
howardg@tlcc.com paul@tlcc.com
888-241-8522 or 561-953-0095

Courtney Carter

#XPages
@ptcalhoun

17th-18th

@TLCCLtd
@Teamstudio
@PaulDN

Teamstudio Questions?
contactus@teamstudio.com
877-228-6178

53

Creating Great XPages UIs

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Creating Great XPages UIs

Similaire à Creating Great XPages UIs (20)

Plus de Teamstudio

Plus de Teamstudio (20)

Dernier

Dernier (20)

Creating Great XPages UIs