Creating a Great XPages User Interface

73 %
27 %
Information about Creating a Great XPages User Interface
Technology

Published on February 14, 2014

Author: Teamstudio

Source: slideshare.net

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

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

Application Configuration 10

Agenda • Prerequisites & Configuration • Form Table control • Data View control • Dojo Form controls • Dialogs and Value pickers • Navigation controls • Introduction to Application Layout • 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 • Prerequisites & Configuration • Form Table control • Data View control • Dojo Form controls • Dialogs and Value pickers • Navigation controls • Introduction to Application Layout • 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 • Prerequisites & Configuration • Form Table control • Data View control • Dojo Form controls • Dialogs and Value pickers • Navigation controls • Introduction to Application Layout • 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 • Prerequisites & Configuration • Form Table control • Data View control • Dojo Form controls • Dialogs and Value pickers • Navigation controls • Introduction to Application Layout • 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 • Prerequisites & Configuration • Form Table control • Data View control • Dojo Form controls • Dialogs and Value pickers • Navigation controls • Introduction to Application Layout • 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 • Prerequisites & Configuration • Form Table control • Data View control • Dojo Form controls • Dialogs and Value pickers • Navigation controls • Introduction to Application Layout • 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 • Prerequisites & Configuration • Form Table control • Data View control • Dojo Form controls • Dialogs and Value pickers • Navigation controls • Introduction to Application Layout • 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

#xpages presentations

Add a comment

Related presentations

Related pages

[Webinar] Creating a Great XPages User Interface - YouTube

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 ...
Read more

Creating a Great XPages User Interface - Technology

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

User Interface Design with XPages | First XPages site ...

User Interface Design with XPages. Design Guide. ... then you will miss out on great built in ... Companies are migrating over to XPages creating cool user ...
Read more

JMP102: Creating a Great XPages User Interface - documents.mx

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.
Read more

User Interface Design with XPages | Customizing the HTML ...

Customizing the HTML log-in form with bootstrap ... Companies are migrating over to XPages creating cool user ... © User Interface Design with XPages ...
Read more

XSeries - Introduction to XPages Development - YouTube

XSeries - Introduction to XPages Development GBS. ... -Creating XPages for your ... Creating a Great XPages User Interface - Duration: ...
Read more

Harness the power of XPages in Lotus Domino Designer ...

... XPage-based user interface and your Domino data, creating a link ... result XPages-based user interface: ... next great app . Learn more. dW ...
Read more

Connections Developers | XPages/IBM Domino App Dev ...

XPages/IBM Domino App Dev Sessions at IBM Connect 2014. Niklas Heidloff / January 6, 2014 / 0 comments. ... JMP102 : Creating a Great XPages User Interface
Read more