download the presentation here

unevenechoΛογισμικό & κατασκευή λογ/κού

30 Οκτ 2013 (πριν από 4 χρόνια και 9 μέρες)

65 εμφανίσεις

Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Mark
Myers
!
LET YOUR

APPLICATIONS

LOOK GOOD

USE A

DESIGN
FRAMEWORK
"
1 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Mark
Myers
!
01.1
WHAT ABOUT?"
As a developer
you

can't

get

away

anymore
with
an

application

that

just

works
:
your

users

expect

it

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!
2 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Mark
Myers
!
01.2
AGENDA"
3 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Mark
Leusink
!
4 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Mark
Leusink
!
02.
THE FOUR M’S"
Choice of
m&m’s

is

loosely

based
on
framework

characteristics

they

speak

about
, not on the
actual

person*

*
Except
for the
Dutch
Mark
Leusink
,
who

insisted
on
being
the
orange

one
5 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Martin Vereecken!
02.1
THE FOUR M’S"
Who
we
are
!
§

Consultant with London Developer
Co-
op
!
§

Lead
Developer with
Elguji
Software!
§

XPages
developer
since
2008!
§

Mobile web developer -
Unplugged
!
MATT WHITE"
§

Thrown
in the Notes Client in 1996!
§

Sees
the web
side
of
things

since

2000!
§

Suffering
in
XPaging

since
2011 !
§

OpenNTF
:
Viewnify
,
Refresh

Divine
!
§

http://
www.bizzybee.be
!
MARTIN VEREECKEN"
6 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Martin Vereecken!
02.2
THE FOUR M’S"
Who
we
are
!
MARK MYERS"
§

Freelance

consultant
/developer!
§

Domino/Notes
since

previous
millennium!
§

Web
apps
!
§

XPages
!
§

Mobile:
TeamStudio

Unplugged
!
§

Dutch!
§

OpenNTF
:
XPage

Debug

Toolbar
,

Auto-
Logins
!
MARK LEUSINK"
7 !
§

Consultant with London Developer Co-
op
!
§

Fixing
Collaboration,
infrastructure
and
security

issues
in big
companies
for the
last

14
years
!
§

Barely
Human,
allowed
out
sometimes
to
present

at

conferences
and
scare
small
children
!
§

http://
www.stickfight.co.uk
!
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Mark
Leusink
!
8 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Mark
Leusink
!
03.1
WHY DESIGN MATTERS"
Because

you

don’t
want
your

applications
to
look

like

this
!
9 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Mark
Leusink
!
03.2
WHY DESIGN MATTERS"
10 !
§

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
!
BLUG



Benelux Lotus User Group
Matt
White!
11 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Matt
White!
04.
WHAT ARE DESIGN
FRAMEWORKS"
12 !
§

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 | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Martin Vereecken!
13 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Martin Vereecken!
05.1
WHY USE OTHER FRAMEWORKS"
14 !
To
understand

why
we want to
look

at

alternative

frameworks
, we
have
to
look

at

OneUI

first
!
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Martin Vereecken!
05.2
ONEUI"
§

A
collection
of CSS
styles
and
JavaScript

(
Dojo
) to
standardize
the
look
and
feel
of
XPages

applications
!
§

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
!
WHAT:"
§

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 GOOD:"
§

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
!!
THE BAD:"
15 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Mark
Myers
!
05.3
WHY USE OTHER
FRAMEWORKS"
16 !
§

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 | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Matt
White!
17 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Matt
White!
06.1
ADDING FRAMEWORKS
TO DOMINO"
18 !
§

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 | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Matt
White!
06.2
ADDING FRAMEWORKS
TO DOMINO"
19 !
§

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 | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Matt
White!
20 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
07.1
YUI"
§

http://
yuilibrary.com
/
!
§

Probably
the
first

large

scale

framework
!
§

Still

easy
to
use
and
widely

supported
!
§

The
current
version of
IdeaJam

uses

it
!
WHAT:"
21 !
Matt
White!
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Matt
White!
07.2
BLUEPRINT"
§

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
!
WHAT:"
22 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Matt
White!
07.3
960 GRIDS - UNSEMANTIC"
§

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!
WHAT:"
23 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Martin Vereecken!
07.4
BOOTSTRAP
"
24 !
24 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Martin Vereecken!
07.5
BOOTSTRAP
"
§

The
current

darling
of the Internet!
§

Started
as
an

internal

project

at

Twitter
!
§

Open
source

since
August 2011!
§

Starting
point: http://
twitter.github.com
/
bootstrap
/
index.html
!
WHAT:"
§

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 GOOD:"
§

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
!
THE BAD:"
25 !
25 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
07.6
BOOTSTRAP CUSTOMIZED
"
26 !
26 !
Martin Vereecken!
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
07.7
BOOTSTRAP RESOURCES
"
§

Bootswatch
(
free
)!
§

WrapBootstrap

(small
fee
,
gorgeous
)!
THEMES:"
§

Jetstrap
!
§

Divshot
!
§

StyleBootstrap
!
§

BootTheme
!
§

Bootstrap
Designer (
Innovastudio
)!
BUILDERS:"
§

Bootstrap
!
§

W3Resource!
§

Lynda.com
!
TUTORIALS:"
27 !
27 !
SNIPPETS, BUTTON
CREATORS,
PROTOTYPING,... "
Martin Vereecken!
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Mark
Myers
!
07.8
KENDO UI
"
28 !
28 !
§

http://
www.kendoui.com
!
§

Based
on
jQuery
!
§

Half
way

between
a single
function

library

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!
§

S
erver
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
!
WHAT:"
§

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 GOOD:"
§

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
!
THE BAD:"
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Mark
Myers
!
07.9
KENDO UI
"
29 !
29 !
Many
widgets
, not
just
the
usual

suspects
!
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
07.10
KENDO UI Mobile
"
30 !
30 !
Looking

native

everywhere
!
Mark
Myers
!
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Mark
Leusink
!
07.11
JQUERY UI
"
31 !
31 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Mark
Leusink
!
07.12
JQUERY UI
"
§

Built
on top of
jQuery
!
§

Very

complete
set of
controls,
widgets
,
animations
,
draggables
, ...!
§

Check  out  
h*p://
xomino.com
 
for
 
examples
 (
by
 Mark  Roden)  
WHAT:"
§

Easy
to
customize
!
Themes

can
be
downloaded
!
If

you

didn't

like

that

grey

look
!
THE GOOD:"
32 !
32 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Mark
Leusink
!
07.13
JQUERY MOBILE
"
§

Mobile controls
framework

built
on top of
jQuery
!
WHAT:"
§

Easy
to
get

started
with
in
XPages
!
§

Very

active

community

and
used
a lot for mobile
web
apps
/
websites
!
THE GOOD:"
33 !
33 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
07.14
JQUERY MOBILE
"
§

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
!
GOOD TO KNOW:"
34 !
34 !
Mark
Leusink
!
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Mark
Myers
!
35 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Mark
Myers
!
08.1
HOW TO CHOOSE A
FRAMEWORK"
36 !
§

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 | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Mark
Myers
!
08.2
IS THAT ALL??"
37 !
§

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 | Mark
Leusink
!
BLUG



Benelux Lotus User Group
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
39 !
Matt White | Martin Vereecken | Mark Myers | Mark
Leusink
!
BLUG



Benelux Lotus User Group
09.
DISCUSSION - QUESTIONS"
40 !
§

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
!
BLUG



Benelux Lotus User Group
THANK YOU

FOR COMING

AND SEE

YOU SOON"
41 !