Creating a Great XPages User Interface, TLCC Teamstudio Webinar - Feb, 2014
Upcoming SlideShare
Loading in...5
×
 

Creating a Great XPages User Interface, TLCC Teamstudio Webinar - Feb, 2014

on

  • 1,335 views

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

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.

Statistics

Views

Total Views
1,335
Views on SlideShare
1,000
Embed Views
335

Actions

Likes
0
Downloads
51
Comments
0

4 Embeds 335

http://www.tlcc.com 264
http://tlcc.com 58
http://www.slideee.com 11
https://www.tlcc.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Creating a Great XPages User Interface, TLCC Teamstudio Webinar - Feb, 2014 Creating a Great XPages User Interface, TLCC Teamstudio Webinar - Feb, 2014 Presentation Transcript

  • 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 View slide
  • 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 View slide
  • 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