1. 1!
BLUG
LET YOUR
Benelux Lotus User Group
APPLICATIONS
LOOK GOOD
USE A
DESIGN
FRAMEWORK"
Matt White | Martin Vereecken | Mark Myers
Myers! | Mark Leusink!
2. 2!
BLUG
01.1 WHAT ABOUT?"
As a developer you can't get away anymore with an application that just works: your users expect it
Benelux Lotus User Group to look great too. Luckily there are many frameworks available to help you. In this session we will talk
about some of the leading contenders such as Bootstrap, Kendo UI, jQuery Mobile, Blueprint, 960
grids, show some demos and then open up the floor to have a discussion... What are the pros and
cons of every framework, how do you pick one, and why not just use the standard options that IBM
offers?!
Freedom of choice!
Matt White | Martin Vereecken | Mark Myers
Myers! | Mark Leusink!
3. 3!
BLUG
01.2 AGENDA"
Benelux Lotus User Group
Matt White | Martin Vereecken | Mark Myers
Myers! | Mark Leusink!
4. 4!
BLUG
Benelux Lotus User Group
Matt White | Martin Vereecken | Mark Myers | Mark Leusink!
Mark Leusink!
5. 5!
BLUG
02. THE FOUR M’S"
Choice of m&m’s is loosely based on framework characteristics they speak
about, not on the actual person*
Benelux Lotus User Group
*Except for the Dutch Mark Leusink, who insisted on being the orange one
Matt White | Martin Vereecken | Mark Myers | Mark Leusink!
Mark Leusink!
6. 6!
BLUG
02.1 THE FOUR M’S"
Who we are!
Benelux Lotus User Group
MATT WHITE" MARTIN VEREECKEN"
§ Consultant with London Developer § Thrown in the Notes Client in 1996!
Co-op! § Sees the web side of things since
§ Lead Developer with Elguji Software! 2000!
§ XPages developer since 2008! § Suffering in XPaging since 2011 !
§ Mobile web developer - Unplugged! § OpenNTF: Viewnify, Refresh Divine!
§ http://www.bizzybee.be!
Matt White | Martin Vereecken!
Vereecken | Mark Myers | Mark Leusink!
7. 7!
BLUG
02.2 THE FOUR M’S"
Who we are!
Benelux Lotus User Group
MARK MYERS" MARK LEUSINK"
§ Consultant with London Developer Co-op! § Freelance consultant/developer!
§ Fixing Collaboration, infrastructure and § Domino/Notes since previous millennium!
security issues in big companies for the last § Web apps!
14 years! § XPages!
§ Barely Human, allowed out sometimes to § Mobile: TeamStudio Unplugged!
present at conferences and scare small § Dutch!
children! § OpenNTF: XPage Debug Toolbar,
§ http://www.stickfight.co.uk! Auto-Logins!
Matt White | Martin Vereecken!
Vereecken | Mark Myers | Mark Leusink!
8. 8!
BLUG
Benelux Lotus User Group
Matt White | Martin Vereecken | Mark Myers | Mark Leusink!
Mark Leusink!
9. 9!
BLUG
03.1 WHY DESIGN MATTERS"
Because you don’t want your applications to look like this!
Benelux Lotus User Group
Matt White | Martin Vereecken | Mark Myers | Mark Leusink!
Mark Leusink!
10. 10 !
BLUG
03.2 WHY DESIGN MATTERS"
Benelux Lotus User Group
§ Users don't care about what the
application does, they do care about
how it looks and feels!
§ Consistent UI makes applications easier
to use!
!
Matt White | Martin Vereecken | Mark Myers | Mark Leusink!
Mark Leusink!
11. 11 !
BLUG
Benelux Lotus User Group
Matt White!
White | Martin Vereecken | Mark Myers | Mark Leusink!
12. 12 !
BLUG 04. WHAT ARE DESIGN
FRAMEWORKS"
Benelux Lotus User Group
§ A design framework is usually made up
of a package of CSS, sometimes
JavaScript!
§ It aims to do the heavy lifting of page
layout and cross browser support for
you!
§ Domino has a built in framework: OneUI!
§ But we're not limited to the defaults…!
!
Matt White!
White | Martin Vereecken | Mark Myers | Mark Leusink!
13. 13 !
BLUG
Benelux Lotus User Group
Matt White | Martin Vereecken!
Vereecken | Mark Myers | Mark Leusink!
14. 14 !
BLUG
05.1 WHY USE OTHER FRAMEWORKS"
To understand why we want to look at alternative frameworks, we have to look
at OneUI first!
Benelux Lotus User Group
Matt White | Martin Vereecken!
Vereecken | Mark Myers | Mark Leusink!
15. 15 !
BLUG
05.2 ONEUI" WHAT:"
§ A collection of CSS styles and JavaScript
(Dojo) to standardize the look and feel of
XPages applications!
Benelux Lotus User Group
§ A tight fit with the Extension Library and
SSJS:!
§ Many UI controls from the Extension Library
rely on the OneUI CSS classes!
§ Makes it harder (but not impossible) to use
those controls with other frameworks!
THE GOOD:"
§ Professional, business look!
§ And comes in lots of colors!
§ Required CSS/JS files are already on your
server!
§ Good to easily start with a complete layout
in XPages!
§ Out of the box already feature rich!
§ Nice integration with Domino Designer!
THE BAD:"
§ Difficult to customize!
§ A bit like "missionary position": the first time is
amazing, but it gets boring after a while ;-)!
§ Not responsive!
though that is coming eventually!
§ Look at the source!!
Matt White | Martin Vereecken!
Vereecken | Mark Myers | Mark Leusink!
16. 16 !
BLUG 05.3 WHY USE OTHER
FRAMEWORKS"
Benelux Lotus User Group
§ Easier to adjust!
§ More diversity in look and feel!
§ Simple source, use of divs for layout!
§ More UI controls/plugins available!
§ Responsive!
Matt White | Martin Vereecken | Mark Myers
Myers! | Mark Leusink!
17. 17 !
BLUG
Benelux Lotus User Group
Matt White!
White | Martin Vereecken | Mark Myers | Mark Leusink!
18. 18 !
BLUG 06.1 ADDING FRAMEWORKS
TO DOMINO"
Benelux Lotus User Group
§ Import the CSS/JS files into the files
resources of your NSF
OR
Drag & drop to WebContent folder via
Package Explorer
OR
Add them to your "classic" form designs!
§ Then you can reference them as
resources in your XPages!
Matt White!
White | Martin Vereecken | Mark Myers | Mark Leusink!
19. 19 !
BLUG 06.2 ADDING FRAMEWORKS
TO DOMINO"
Benelux Lotus User Group
§ You may need/want to disable OneUI!
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!
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!
Matt White!
White | Martin Vereecken | Mark Myers | Mark Leusink!
20. 20 !
BLUG
Benelux Lotus User Group
Matt White!
White | Martin Vereecken | Mark Myers | Mark Leusink!
21. 21 !
BLUG
07.1 YUI"
Benelux Lotus User Group WHAT:"
§ http://yuilibrary.com/!
§ Probably the first large
scale framework!
§ Still easy to use and
widely supported!
§ The current version of
IdeaJam uses it!
Matt White!
White | Martin Vereecken | Mark Myers | Mark Leusink!
22. 22 !
BLUG
07.2 BLUEPRINT"
Benelux Lotus User Group
WHAT:"
§ http://www.blueprintcss.org/!
§ A widely used framework in
2009/10!
§ Still works well for laying out
desktop websites but should
be considered legacy now!
§ Not updated recently (since
May 2011)!
§ We used it for IQJam:
http://iqjam.net!
§ Good example of a top
framework becoming
redundant!
Matt White!
White | Martin Vereecken | Mark Myers | Mark Leusink!
23. 23 !
BLUG
07.3 960 GRIDS - UNSEMANTIC"
Benelux Lotus User Group WHAT:"
§ 960 Grids is another grid
framework which offers
no other UI elements!
§ Styling of the UI is down
to you or your designers!
§ Also not responsive, but
Unsemantic by the same
team has taken over that
role!
Matt White!
White | Martin Vereecken | Mark Myers | Mark Leusink!
24. 24 !
BLUG
07.4 BOOTSTRAP"
Benelux Lotus User Group
Matt White | Martin Vereecken!
Vereecken | Mark Myers | Mark Leusink!
25. 25 !
BLUG
07.5 BOOTSTRAP"
WHAT:"
§ The current darling of the Internet!
§ Started as an internal project at Twitter!
Benelux Lotus User Group § Open source since August 2011!
§ Starting point: http://twitter.github.com/
bootstrap/index.html!
THE GOOD:"
§ Easy to use!
§ Well documented!
§ Frequently updated!
§ Responsive!
§ Integrates with jQuery so lots of plugins!
§ Customization and themes!
§ Extensions/plugins (date picker, value
pickers)!
§ Lots of internet resources!
THE BAD:"
§ Will it suffer the same fate as Blueprint?!
§ Default controls (e.g. date picker) don't look
so good anymore if you use Bootstrap!
You need to develop XPage version of Bootstrap
plugins!
§ Some trial and error to integrate in Xpages!
I'm currently creating a list of XPage controls that
play well with XPages!
§ A bit of a challenge to create your own theme!
But lots of tools to help!
Matt White | Martin Vereecken!
Vereecken | Mark Myers | Mark Leusink!
26. 26 !
BLUG
07.6 BOOTSTRAP CUSTOMIZED"
Benelux Lotus User Group
Matt White | Martin Vereecken!
Vereecken | Mark Myers | Mark Leusink!
27. 27 !
BLUG
07.7 BOOTSTRAP RESOURCES"
THEMES:"
Benelux Lotus User Group § Bootswatch (free)!
§ WrapBootstrap
(small fee, gorgeous)!
BUILDERS:"
§ Jetstrap!
§ Divshot!
§ StyleBootstrap!
§ BootTheme!
§ Bootstrap Designer (Innovastudio)!
TUTORIALS:"
§ Bootstrap!
§ W3Resource!
§ Lynda.com!
SNIPPETS, BUTTON
CREATORS,
PROTOTYPING,... "
Matt White | Martin Vereecken!
Vereecken | Mark Myers | Mark Leusink!
28. 28 !
BLUG
07.8 KENDO UI"
WHAT:"
§ http://www.kendoui.com!
§ Based on jQuery!
§ Half way between a single function library
Benelux Lotus User Group
and a full framework!
§ Split up into 4 products!
§ UI Web - Lots of Widgets for the Web!
§ UI Mobile - Native looking Web apps for Mobile!
§ UI DataViz - Graph Frenzy!
§ Server Wrappers - API Wrappers for when
you are not using Domino!
§ Feels like you are using Adobe Flex but this
time it won’t become legacy in 2 years!
THE GOOD:"
§ Doesn’t fall into the "you must use me" trap of
most frameworks!
§ It's not free - guaranteed support and updates !
§ The Mobile component looks VERY native on
iOS, Android, BB and Windows phone!
§ Easy to plug-in to existing servers including
Domino!
§ Supports back to IE7!
THE BAD:"
§ Eeek! - its not free!
§ If you choose the free version it's GPL-3.0!
§ As it not a full framework, it does not provide
the guidance that is sometimes required in the
corporate world!
§ It is with one company!
Matt White | Martin Vereecken | Mark Myers
Myers! | Mark Leusink!
29. 29 !
BLUG
07.9 KENDO UI"
Many widgets, not just the usual suspects!
Benelux Lotus User Group
Matt White | Martin Vereecken | Mark Myers
Myers! | Mark Leusink!
30. 30 !
BLUG
07.10 KENDO UI Mobile"
Looking native everywhere!
Benelux Lotus User Group
Matt White | Martin Vereecken | Mark Myers
Myers! | Mark Leusink!
31. 31 !
BLUG
07.11 JQUERY UI"
Benelux Lotus User Group
Matt White | Martin Vereecken | Mark Myers | Mark Leusink!
Mark Leusink!
32. 32 !
BLUG
07.12 JQUERY UI"
Benelux Lotus User Group
WHAT:"
§ Built on top of jQuery!
§ Very complete set of
controls, widgets,
animations, draggables, ...!
§ Check
out
h*p://xomino.com
for
examples
(by
Mark
Roden)
THE GOOD:"
§ Easy to customize!
Themes can be downloaded!
If you didn't like that grey look!
Matt White | Martin Vereecken | Mark Myers | Mark Leusink!
Mark Leusink!
33. 33 !
BLUG
07.13 JQUERY MOBILE"
Benelux Lotus User Group
WHAT:"
§ Mobile controls
framework built on top of
jQuery!
THE GOOD:"
§ Easy to get started with
in XPages!
§ Very active community
and used a lot for mobile
web apps/websites!
Matt White | Martin Vereecken | Mark Myers | Mark Leusink!
Mark Leusink!
34. 34 !
BLUG
07.14 JQUERY MOBILE"
GOOD TO KNOW:"
Benelux Lotus User Group
§ Uses HTML5 data-xxx attributes!
§ Add in XPages using the "attrs"
property!
§ By default, page navigation is done
using AJAX:!
§ All links are replaced by AJAX
calls!
§ Click on a link (AJAX) loads the
page and updates the DOM!
§ But doesn't execute inline
JavaScript!
§ Which means that doesn't play
well with XPages!
§ Can be disabled completely, but
impacts performance!
§ Check performance with your
targeted data size!
Matt White | Martin Vereecken | Mark Myers | Mark Leusink!
Mark Leusink!
35. 35 !
BLUG
Benelux Lotus User Group
Matt White | Martin Vereecken | Mark Myers
Myers! | Mark Leusink!
36. 36 !
BLUG 08.1 HOW TO CHOOSE A
FRAMEWORK"
Benelux Lotus User Group
§ What devices are you supporting?!
§ Just IE?!
§ Chrome / Safari / Firefox?!
§ Mobile?!
§ Is development time important?!
§ No time? Use OneUI with the Extension Library
controls!
§ Do you have a design team?!
§ Bootstrap is very easy to extend!
§ Let a designer create a theme for your
company!
§ Are you happy with Dojo or do you want to
use jQuery?!
!
Matt White | Martin Vereecken | Mark Myers
Myers! | Mark Leusink!
37. 37 !
BLUG
08.2 IS THAT ALL??"
Benelux Lotus User Group
§ Our overview is by no means complete!
§ There are a lot of other frameworks out
there!
§ Sencha Touch, ExtJS, MooTools!
But...!
§ Currently only a couple of complete,
widely used and active projects!
§ Who still remembers script.aculo.us?!
Matt White | Martin Vereecken | Mark Myers
Myers! | Mark Leusink!
39. 39 !
BLUG
Benelux Lotus User Group
Matt White | Martin Vereecken | Mark Myers | Mark Leusink!
40. 40 !
BLUG
09. DISCUSSION - QUESTIONS"
Benelux Lotus User Group
§ Know other great frameworks?!
§ Ever used <fill in framework name>?!
§ Experiences?!
§ Anything else you'd like to share?!
(related to design frameworks)!
Matt White | Martin Vereecken | Mark Myers | Mark Leusink!
41. 41 !
BLUG
Benelux Lotus User Group THANK YOU
FOR COMING
AND SEE
YOU SOON"
Matt White | Martin Vereecken | Mark Myers | Mark Leusink!