1. Introduction to XControls
October
22,
2014

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

3. Teamstudio
Unplugged
• 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

4. Unplugged
Template
Apps
•
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

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

6. Introduction to XControls

7. What are they?
 A series of custom controls that allow you to build XPages
applications that run on desktop and mobile browsers
2

8. Agenda
History
XControls
Creating a new application
Advanced applications
Migration Path
Documentation
Futures
1
2
3
3
4
5
6
7

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

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

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

12. Resources
 To try and simplify things, all supporting content has been
moved to ResourcesFiles
 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

13. Creating a new application
 Download the controls from OpenNTF
 Copy across ResourcesFiles
 Copy across UnpBoot… Custom Controls
 Copy across “blank” Theme (and enable in DB Properties)
 Copy across Unp… XPages
8

14. Common Header
 Best practice now is to create a commonheader and
commonfooter custom control and add to every XPage:
9

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

16. Common Footer
 We want to define the sync type and can add footer tabs if
we need to
11

17. Home Page
 As ever, we need a UnpMain XPage, so first add header and
footer:
12

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

19. Home Page
 The Document card will be easiest to re-use as a custom
control “personviewer” making use of the FormViewer
Control
14

20. Home Page
 If we add the personviewer custom control to UnpMain and
save, we now have a working page:
15

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

22. Edit Person
17

23. Edit Person
 Now when we click “Add” or “Edit” we see:
18

24. Accordion View
 This is much the same as the Flat View
 We can re-use the person viewer
19

25. Accordion View
 Just that simple addition gives us this:
20

26. Mobile Version
21

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

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

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

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

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

32. 27