XControls - UI Framework for XPages

In this session I showed how to use the XControls open source project in your XPages applications.

Transcript

1. w w w . l d c v i a . c o m XControls – UI Framework for XPages Matt White | LDC Via
2. w w w . l d c v i a . c o m About Me • Domino web developer since the 1990s • Lotus Award winner with IdeaJam • Java developer • XPages developer since before it was released! • Co-founder of LDC Via • http:/ /ldcvia.com
3. w w w . l d c v i a . c o m What are XControls? • An open source project that allows you to quickly build simple applications that will work equally well on desktop or mobile devices. • The UI will automatically format itself for • Desktop • Phone • Tablet • iOS • Android
4. w w w . l d c v i a . c o m What are XControls?
5. w w w . l d c v i a . c o m XControls History • Teamstudio started a project called the Unplugged Custom Controls back in 2012 • Over two years this evolved and grew • But it was for mobile devices only, no desktop support • So in late 2014 we ported what we had to start using Bootstrap so that we could target all users • This was the start of the XControls project • Now in early 2016 I’m still trying to push out a new release every 3 months with new features and bug fixes
6. w w w . l d c v i a . c o m Why should I use XControls? • If design isn’t your thing • We hired a UI designer to do all of that work for you! • You need to quickly put together an application • The simplest apps can be built in minutes • You can’t, or don’t want to, use the Extension Library • You want to modify the source code or design of the framework • You have full and simple access to all design elements
7. w w w . l d c v i a . c o m A little deeper • UI based upon Bootcards and Bootstrap • Easy to add your own theme • Or change colour schemes using CSS • jQuery • Simple to add any jQuery plugins required • Font Awesome • Hundreds of icons built in • Offline support with Teamstudio Unplugged • 20 different custom controls
8. w w w . l d c v i a . c o m Bootcards • Open source project based upon Bootstrap • Built by Mark Leusink • Well known in the Domino community • Designed by Jack Herbert • A UI designer • http:/ /bootcards.org • We’ve modified it to fit into an XPages model a little easier
9. w w w . l d c v i a . c o m Cards Based Interface • Different pieces of information are contained by a card • Common design pattern • Google • Twitter • Pinterest • Amazon • Fits with Domino applications very nicely
10. w w w . l d c v i a . c o m The Controls Accordion Alert Calendar Carousel Debug Toolbar Detailed View Dialog Files Flat View Footer Form Editor Form Viewer Header Image Viewer Login Photo Upload Resources Rich Text Editor Rich Text Reader Workspace
11. w w w . l d c v i a . c o m Sampler App • Demo of Sampler App
12. w w w . l d c v i a . c o m Getting started • Download the project from OpenNTF • http:/ /xcontrols.org • Or clone project from Github • https:/ /github.com/whitemx/xcontrols-domino • Copy design elements into your application • XPages • Custom Controls • Script Libraries • File Resources • Theme • Enable the Theme in application properties
13. w w w . l d c v i a . c o m Getting started • Create a header custom control • Add UnpBootResources custom control • Add UnpBootHeader custom control • Define navigation options
14. w w w . l d c v i a . c o m Getting started • Now we can create our home XPage • Add the common header custom control just created • Add some basic Bootstrap / Bootcards markup • This will be a common pattern for most pages in your application
15. w w w . l d c v i a . c o m Getting started • On the home page we will want a view of data. • The simplest way to display this is with the UnpBootFlatView control • There are more than 20 options to control where the data comes from, how it is displayed and what happens when it is opened
16. w w w . l d c v i a . c o m Getting started • Now to display the document when it’s selected • We will use the UnpBootFormViewer control • Data binding is managed for us • We just lay out the fields as we want them displayed
17. w w w . l d c v i a . c o m Getting started • Demo 1 of what we have so far
18. w w w . l d c v i a . c o m Adding and editing documents • For simple documents this is done using Ajax posts • We’ll come to rich text and file attachments later • In the main XPage, we enable add, and edit buttons
19. w w w . l d c v i a . c o m Adding and editing documents • Now we need to create an XPage that will be used for edit mode • Using the “UnpBootFormEditor” control
20. w w w . l d c v i a . c o m Adding and editing documents • Options for field functionality • Add “clear input” button • Make field mandatory • Typeahead (local or remote) • Date • Time • Mobile toggle • Checkboxes • http:/ /xcontrols.org/public/docs.html#doc- formeditor
21. w w w . l d c v i a . c o m Adding and editing documents • For performance reasons, the default saving is handled with an Ajax post to UnpSaveDocument XPage • Makes saving much faster but… • Naming of controls in your XPage is very important • Advanced features will not work • Rich Text • File Attachments • If you want full XPages functionality then use a “normal” save button in place of the XControls buttons.
22. w w w . l d c v i a . c o m Adding and editing documents • Demo 2
23. w w w . l d c v i a . c o m Searching • You have three options for searching • Local • Requires no round trip to server, but only searches what’s on screen • View searching • Does a “find in view” style search, suited to Unplugged applications • Full text Searching • Performs a full text search and is most powerful
24. w w w . l d c v i a . c o m Searching • Add a view to support type-ahead • Enable searching in the Flat View control
25. w w w . l d c v i a . c o m Searching • Demo 3
26. w w w . l d c v i a . c o m Rich text • You’ve got two options • Store HTML as text • Store “real” rich text • HTML is the simplest • We use Quill JS • http:/ /quilljs.com/
27. w w w . l d c v i a . c o m Rich text • If you need real rich text then you’ll need to change things around a little • In the Form Viewer change editxpagewithajax to “no” • This will force a full page reload • Which means the edit version of the page has to also include the full application layout: resources, header, view etc. • In the edit XPage, we set showbuttons to false and fullpagemode to true • Add a “normal” rich text field • Add your own Save and Cancel buttons
28. w w w . l d c v i a . c o m Rich text • Demos 4 & 5
29. w w w . l d c v i a . c o m File attachments • Displaying attachments has a couple of options • List of files • Display images • The Form Viewer control automatically builds viewScope.images • An array of JSON objects with file attachment details • It can be passed into UnpBootFiles • It can be iterated over to output one or more UnpBootImageViewer controls
30. w w w . l d c v i a . c o m File attachments • Similar to full rich text for editing • We need to edit with a full page refresh and our own save button • There is a UnpBootPhotoUpload control • Works for mobile devices • Is quite complicated to modify
31. w w w . l d c v i a . c o m File attachments • Demo 6
32. w w w . l d c v i a . c o m Categorized views • Useful for categorised lists of data • Very similar to Flat View to implement
33. w w w . l d c v i a . c o m Categorized views • Demo 7
34. w w w . l d c v i a . c o m Calendars • A wrapped version of Full Calendar • http:/ /fullcalendar.io/ • View needs to be configured in a specific format
35. w w w . l d c v i a . c o m Calendars • Demo 8
36. w w w . l d c v i a . c o m What next? • We are always looking for help… • New ideas • Bug reports • Even committers! • There’s a long list of issues open on Github that we are gradually working through • Please add to them or help us remove them • Next release in early summer 2016 • Most of all visit http:/ /xcontrols.org
37. w w w . l d c v i a . c o m Contact Me • Contact me: • @mattwhite • matt@ldcvia.com • Download slides at: http:/ /mattwhite.me/presentations