Alternative XPages Frameworks

This was a new session which gets more techie than the discussion format we used in Belgium. Sample databases are also available either in this download or from by Github page.

When you create an XPages application for the first time, OneUI seems wonderful. But the shine quickly wears off... what about mobile, or plugins from the Internet?

In this session we'll look at some of the leading alternatives and how they can be used with XPages. You'll walk away with samples of using Bootstrap, KendoUI, jQuery UI in XPages.

We'll also look at how to choose which framework to use and what happens when your chosen framework goes into maintenance mode!

Transcript

1. © 2013 Matt White Alternative XPage Frameworks Matt White London Developer Co-op
2. © 2013 Matt White IamLUG 2013 Sponsors
3. IamLUG 2013 3 Matt White • London Developer Co-op s Four developers based in London „ Ben Poole „ Julian Woodward „ Mark Myers „ Matt White s XPages s Mobile s Java • Elguji Software s IdeaJam / IQJam • XPages101.net s “iamlug13” for a 33% discount
4. IamLUG 2013 4 What We’ll Cover … • What Are Frameworks • Demo Application • jQuery UI • Kendo UI • Twitter Bootstrap • How to choose a framework • Questions
5. IamLUG 2013 What are Frameworks • As developers we can’t get away with applications that just work. They have to look good as well. • Most developers aren’t designers • So we can leverage frameworks to help us out 5
6. IamLUG 2013 What are Frameworks • A framework is usually made up of a package of CSS, images and sometimes JavaScript • Domino has a built in framework: OneUI 6
7. IamLUG 2013 What are Frameworks - OneUI • A collection of CSS styles and JavaScript (Dojo) to standardize the look and feel of XPages applications s A tight fit with the Extension Library and SSJS: s Many UI controls from the Extension Library rely on the OneUI CSS classes s Makes it harder (but not impossible) to use those controls with other frameworks • The Pros s Professional, business look s And comes in lots of colors s Required CSS/JS files are already on your server s Good to easily start with a complete layout in XPages s Out of the box already feature rich s Nice integration with Domino Designer 7
8. IamLUG 2013 What are Frameworks - OneUI • The Cons s Difficult to customize s Very “samey” look which is good if you like to look like IBM s Not responsive „ though that is coming eventually s Look at the source! • But we’re not limited to the defaults... 8
9. IamLUG 2013 Why use a Framework? • Easier to customize • More diversity in look and feel • Can add responsiveness s simple mobile support • Better HTML for the purist developers among us • More help and resources available 9
10. IamLUG 2013 10 What We’ll Cover … • What Are Frameworks • Demo Application • jQuery UI • Kendo UI • Twitter Bootstrap • How to choose a framework • Questions
11. IamLUG 2013 Demo Application • We’re going to implement a simple contacts application using jQueryUI, KendoUI and Twitter Bootstrap to see the differences. s Single Form with different data types, validation requirements s View of data using a table or grid s A chart showing contacts by their country • You can download each example from s http://mattwhite.me/presentations 11
12. IamLUG 2013 Adding Frameworks to XPages • Import the CSS/JS files into the files resources of your NSF s OR • Drag & drop to WebContent folder via Package Explorer • Then you can reference them as resources in your XPages • You may need/want to disable OneUI s Create a new theme for your application and remove the "extends" property: it will stop loading extra Dojo css-files • If you really want to be brave, disable Dojo as well s Edit xsp.properties: xsp.client.script.libraries=none • Beware that server interaction (e.g. view pagers) will no longer work • If you disable OneUI or Dojo then it's likely that you won't be able to use the Extension Library 12
13. IamLUG 2013 13 What We’ll Cover … • What Are Frameworks • Demo Application • jQuery UI • Kendo UI • Twitter Bootstrap • How to choose a framework • Questions
14. IamLUG 2013 jQuery UI • A suite of free widgets built on top of jQuery • Going to demo along with another suite on top of that called JQWidgets s JQWidgets costs $699 for enterprise or $399 per developer • Modular like Dojo, so you need to know which JS files to include on each page 14
15. IamLUG 2013 jQuery UI • And we’re going to see... s Grid s Date Picker s Masking s Validation s Pie Chart 15
16. IamLUG 2013 jQuery UI • Demo 16
17. IamLUG 2013 17 What We’ll Cover … • What Are Frameworks • Demo Application • jQuery UI • Kendo UI • Twitter Bootstrap • How to choose a framework • Questions
18. IamLUG 2013 KendoUI • Is not free - $699 per developer s Just web is $399, Mobile is $199 or charts are $399 • Made up of a collection of widgets s Great charting • Not responsive per se, different frameworks for Web vs Mobile • Very easy to implement - took me 3.5 hours • In the demo we’re going to see... s Grid s Auto complete s Combo box s Date Picker s Validation (required, email format) s Pie Chart 18
19. IamLUG 2013 KendoUI • Demo 19
20. IamLUG 2013 20 What We’ll Cover … • What Are Frameworks • Demo Application • jQuery UI • Kendo UI • Twitter Bootstrap • How to choose a framework • Questions
21. IamLUG 2013 Twitter Bootstrap 21
22. IamLUG 2013 Twitter Bootstrap • Open Source • Current darling of the Internet s Supported by Twitter • Uses jQuery so lots of plugins are available • Very easy to customize • Well documented • You have to develop your own XPages versions of controls (e.g. Date Picker, pager etc) • Based on CSS3 / HTML5 so doesn't look great in older browsers (IE8) • In the demo we’re going to see s Header Nav s Standard view customised with CSS - pager shows crappy HTML from XPages / OneUI s Opening document from row click (new row methods in 9.0) s Validation (using built in functions) s Theme to control different fields (date picker) s Charts Using Google JS API 22
23. IamLUG 2013 Twitter Bootstrap • Demo 23
24. IamLUG 2013 24 What We’ll Cover … • What Are Frameworks • Demo Application • jQuery UI • Kendo UI • Twitter Bootstrap • How to choose a framework • Questions
25. IamLUG 2013 How to Choose a Framework • What devices are you supporting? s Just IE? s Chrome / Safari / Firefox? s Mobile? • Is development time important? s No time? Use OneUI with the Extension Library controls • Do you have a design team? s Twitter Bootstrap is very easy to extend s Let a designer create a theme for your company • Are you happy with Dojo or do you want to use jQuery? • There are a lot of other frameworks out there s Sencha Touch, ExtJS, MooTools 25
26. IamLUG 2013 But remember... • What happens when your chosen framework is no longer flavor of the month? • In IdeaJam we used YUI 26
27. IamLUG 2013 But remember... • In IQJam we use Blueprint grids • Who remembers script.aculo.us ? 27
28. IamLUG 2013 28 What We’ll Cover … • What Are Frameworks • Demo Application • jQuery UI • Kendo UI • Twitter Bootstrap • How to choose a framework • Questions
29. IamLUG 2013 29 Resources • http://mattwhite.me/presentations • JQueryUI s http://jqueryui.com/ s http://jqwidgets.com/ • KendoUI s http://kendoui.com • Twitter Bootstrap s http://twitter.github.com/bootstrap/ • Sample applications on Github s https://github.com/whitemx/XPagesjQueryUI s https://github.com/whitemx/XPagesKendoUI s https://github.com/whitemx/XPagesBootstrap • A tutorial on using Github with XPages s http://bit.ly/xpb_github • This session is adapted from one I worked on with Martin Vereecken, Mark Leusink and Mark Myers
30. IamLUG 2013 30 Questions How to contact me: Matt White matt@londc.com | @mattwhite | mattwhite.me