Introduction to XControls

October  22,  2014  

Introducing  •  Tools  for  collabora9ve  compu9ng  in  mid-­‐size  and  large  

enterprises,  primarily  for  IBM  Notes  

•  Easy-­‐to-­‐use  tools  for  developers  and  administrators  

•  Unplugged:  easy  mobiliza9on  of  Notes  apps  to  Blackberry,  Android  and  iOS  

•  2300+  ac9ve  customers,  47  countries  

•  Offices  in  US,  UK,  and  Japan  

•  Your  mobile  Domino  server:  take  your  Notes  apps  with  you!  

•  End-­‐users  access  Notes  applica9ons  from  mobile  devices  whether  online  or  offline  

•  Leverages  exis9ng  skills  and  technology  –  XPages  –  a  replica9on  model  you  already  know  

•  Unplugged  3.1  

Teamstudio  Unplugged  

•                 Con9nuity  –  Mobile  offline  access  to  BCM    programs  

•                 OneView  Approvals  –  Expense  approvals;    anywhere,  any9me  

•                 CustomerView  –  lightweight  CRM    framework  for  field  sales  and  field  service    teams  

•  Contacts  –  customer  informa9on  database  •  Ac9vi9es  –  customer  ac9vity  log  •  Media  –  mobile  offline  file  storage  and  access  

Unplugged  Template  Apps  

•  Next  webinar  with  TLCC:  

•  Access  Data  from  XPages  with  the  Rela9onal  Controls  

  Nov.  4  

•  Promo,ons:  

•  Sign  up  to  learn  about  our  Unplugged  Developer  Assistance  Program  before  Oct.  31,  2014,  and  be  automa9cally  entered  to  win  an  iPad  or  Android  tablet.  

•  Now  through  Dec.  15,  2014,  sign  up  to  learn  about  our  Moderniza9on  

Services,  and  be  automa9cally  entered  to  win  an  iPhone  6.  

Introduction to XControls

What are they?  A series of custom controls that allow you to build XPages

applications that run on desktop and mobile browsers

2

Agenda

History

XControls

Creating a new application

Advanced applications

Migration Path

Documentation

Futures

1

2

3

3

4

5

6

7

History

 First released in Jan 2013  15 released since then  The 3.4 Unplugged Controls work fine, but… –  But they are mobile only, we need desktop support –  They don’t integrate with other frameworks well –  The look and feel is already getting tired

 Bootstrap is a very popular and well supported framework –  Bootcards builds on top of this

 The Cards pattern is becoming increasingly popular –  We want a common UI across Unplugged platforms 4

More about cards

 The idea is that UI is broken down into cards –  Views become lists –  Forms become cards

 Twitter and Google are both heavy users of the cards pattern –  http://insideintercom.io/why-cards-are-the-

future-of-the-web/ –  http://smashinghub.com/9-inspirational-cards-ui-

design-example.htm –  https://dev.twitter.com/cards/overview –  http://www.pinterest.com/flexewebs/cards-ui/ 5

XControls List

 As with the Unplugged Controls, everything is done with Custom Controls and Resources

6

AccordionView Alert Calendar Carousel

DebugToolbar Dialog Files FlatView

Footer FormEditor FormViewer Header

ImageViewer Navigator PhotoUpload Resources

RichTextEdit RichTextRead Workspace

Resources

 To try and simplify things, all supporting content has been moved to Resources\Files

  So just copy the Files, Custom Controls and Unp* XPages to a new database to start

 We do also need a theme now that disables OneUI!

7

Creating a new application

 Download the controls from OpenNTF  Copy across Resources\Files  Copy across UnpBoot… Custom Controls  Copy across “blank” Theme (and enable in DB Properties)  Copy across Unp… XPages

8

Common Header

 Best practice now is to create a commonheader and commonfooter custom control and add to every XPage:

9

Common Header

 Every page we load needs the UnpBootResources custom control added –  This adds CSS, JavaScript and Server Side JavaScript

 We want the app to work on Mobile and Desktop so we add a UnpBootNavigator and define the navitems in UnpBootHeader

10

Common Footer

 We want to define the sync type and can add footer tabs if we need to

11

Home Page

 As ever, we need a UnpMain XPage, so first add header and footer:

12

Home Page  Now we need a list and a card  List first, using the Flat View control

13

Home Page

 The Document card will be easiest to re-use as a custom control “personviewer” making use of the FormViewer Control

14

Home Page

  If we add the personviewer custom control to UnpMain and save, we now have a working page:

15

Edit Person

 We need an XPage to handle the creation and editing of person documents

 The FormEditor control works almost exactly the same as the 3.x Controls –  Just slightly different markup for fields to match the

Bootstrap style

16

Edit Person

17

Edit Person

 Now when we click “Add” or “Edit” we see:

18

Accordion View

 This is much the same as the Flat View  We can re-use the person viewer

19

Accordion View   Just that simple addition gives us this:

20

Mobile Version

21

Advanced Functionality

 What we’ve seen is obviously very simple  The Sampler app has far more advanced controls: –  Rich Text editing* using Quill.js •  * rich text in this context means HTML

–  File Uploads (including photo rotation and resizing) –  Complex form controls like mobile switches, native date

pickers etc –  Calendar Control

22

Migration Path

 Because Bootstrap Controls 4.0 is a complete re-write of the Controls 3.x code stream there is no simple migration path

 Existing apps would need their XPages and Custom Controls re-writing

 Forms, Views and Data would not need to change  There will be a Controls 3.5 release but not much after that

other than critical bug fixes

23

Documentation

 We have a new documentation site: http://unplugged.github.io/xcontrols-domino/index.html

24

Future Changes

 1.1 was released yesterday (21st Oct)  There are already change requests queued up for XControls

1.2.  As ever these are managed in a public repository on Github: –  https://github.com/unplugged/xcontrols-domino

 We want your feedback –  Bugs –  Enhancements –  Ideas

25

Questions?

 Useful links: –  OpenNTF: http://www.openntf.org/main.nsf/project.xsp?r=project/XControls

–  Github: https://github.com/unplugged/xcontrols-domino

–  Documentation: http://unplugged.github.io/xcontrols-domino/index.html

–  Bootcards: http://bootcards.org

26

27