@
DefaultStringArrayValue


int

-


@
DefaultIntValue


float

-


@
DefaultFloatValue


double

-

@
DefaultDoubleValue


boolean

-

@
DefaultBooleanValue


Map

-



@
DefaultStringMapValue


Rich Java Client Seminar

Constants Example








...

passLength
=
15

...

UserConstants_he_IL.properties

public

interface

UserConstants

extends

Constants
{


@
DefaultStringValue
(
"Welcome!"
)


String
loginMessage
();


@
DefaultStringArrayValue
({
"admin"
,

"user"
})


String
[]

builtInUsers
();


@Key
(
"
passLength
"
)


int

minPasswordLength
();

{

Rich Java Client Seminar

ConstantsWithLookup


ConstantsWithLookup



an extension of
Constants.


Adds
ability to look up constants at
runtime:







Received parameter is a method name.

UserConstants

userConstants

=

GWT
.
create
(
UserConstants
.
class
);

String
msg

=

userConstants
.
getString
(
"
loginMessage
"
);

Rich Java Client Seminar

Messages


Messages

interface


similar to Constants
interface.


Used
for
parameterized
string
messages.


Follows same rules and conventions as
Constants interface, except:


Methods
can receive parameters.


Methods return only String.








Rich Java Client Seminar

Messages Example








MyMessages

messages
=

GWT
.
create
(
MyMessages
.
class
);

String
msg

=

messages
.
likeFruitMessage
(
"Yoav"
,

"Apple"
);

public

interface

MyMessages

extends

Messages
{


String welcome
(
String name
);


String
likeFruitMessage
(
String name
,

String fruit
);

{

MyMessages

Interface

MyMessages.properties

likeFruitMessage
=
Hello, {
0
}, your favorite fruit is {
1
}

welcome
=
Welcome
{
0
}


Usage

Rich Java Client Seminar

Annotations


@
DefaultLocale



Specifies
the
default Locale.




@
DefaultMessage

-

Default
text to be used if
no translation is
found.



@Optional
-

Indicates the
parameter
is
optional.



@
DefaultLocale
(
"
en_US
"
)

public

interface

MyMessages

extends

Messages
{

...
}

@
DefaultMessage
(
"Welcome, {
0
}!"
)
String
welcome
();

String
displayName
(
String
firstName
,



@
Optional

String
lastName
, String id
);

Rich Java Client Seminar

Annotations


Plural Form


@
PluralCount

-

Provides
multiple plural forms
based on a count
.


The parameter chosen must be of type
short

or
int
.


Available
translation
values are Locale dependent,
but include at least:


one



passed value is
1
.


other



other value passed.


@
AlternateMessage



U
se to provide default
plural messages.


@Offset
-

Provides
an offset to be subtracted
from the value before a plural rule is
chosen.



Rich Java Client Seminar

Constants Example








rowsSelected
=
{
0
} items
selected.

rowsSelected
[one
]
=
One
item selected
.


public

interface

MyMessages

extends

Messages
{


@
AlternateMessage
({
"one"
,

"One row selected"
})


String
rowsSelected
(
@
PluralCount

int

itemCount
);

{

MyMessages.properties

Rich Java Client Seminar

Dynamic String
Initialization


Very flexible.


Applications look up localized strings in the
module's host page.


No need to recompile upon adding a new
Locale.


Suitable when integrating a GWT application
with an existing server
-
side localization
system.


To learn more see
Dictionary

interface.






Rich Java Client Seminar

Localizable
Interface


Most powerful.


Allows developers to
create localized versions
of custom types.


Very advanced and not often used.





Rich Java Client Seminar

Number and Date Formatting


GWT does not fully emulates the date and
number formatting classes.


Instead it provides:


com.google.gwt.i
18
n.client.
NumberFormat


com.google.gwt.i
18
n.client.
DateTimeFormat







Rich Java Client Seminar

NumberFormat


Number formats:


NumberFormat.getDecimalFormat
()

(default
:
“#,##
0
.###”)


NumberFormat.getScientificFormat
() (default
:
“#E
0
”)


NumberFormat.getPercentFormat
()

(default:
“#,##
0
%”)


NumberFormat.getFormat
(format)


Commonly used pattern symbols for decimal
formats:


Rich Java Client Seminar

Using Number Formats


NumberFormat

is used to
format()

numbers
or
parse()

strings:

NumberFormat

fmt

=

NumberFormat
.
getDecimalFormat
();

double

value
=

12345.6789
;

String formatted
=

fmt
.
format
(
value
);


//Convert a numeric string back into a double

value
=

NumberFormat
.
getDecimalFormat
().
parse
(
"
12345.6789
"
);


//You can also specify your own pattern for formatting numbers

formatted
=

NumberFormat
.
getFormat
(
"
0000.0000
"
).
format
(
value
);

Rich Java Client Seminar

DateFormat


Date Formats:


DateTimeFormat.getFormat
(
redefinedFormatEnum
Value
);

e.g
.
DateTimeFormat.getFormat
(
PredefinedFormat.
DATE
_FULL
)


DateTimeFormat.getFormat
(
stringFormat
);

e.g
.
DateTimeFormat.getFormat
("
dd
/MM/
yyyy
")

Rich Java Client Seminar

DateFormat

Pattern Symbols


Rich Java Client Seminar

Bidirectional Widgets


Some widgets are
Bidirectional

(“
bidi
” in
short).


That is, they may have
Direction
, right
-
to
-
left
or left
-
to
-
right.


GWT uses a special algorithm to automatically
estimate text direction.


This is done using
a
DirectionEstimator

and
widgets with this
ability
implement
HasDirectionEstimator
.

e.g.
TextBox
,
TextArea
,
Anchor,
Label,
HTML,
...


To disable (or replace) this behavior use
:

widget.
setDirectionEstimator
(false)
or

widget.
setDirectionEstimator
(
estimatorImpl
)

Rich Java Client Seminar


Rich Java Client Seminar

ClientBundle


API for bundling multiple UI resources in one
interface.


Advantages:


Work with Java interface & methods, instead of
Strings and constants.


Eliminate
mismatches between
filenames
and
constants.


Easier refactoring and usage detection.



Support I
18
N



Rich Java Client Seminar

ClientBundle


API for bundling multiple UI resources in one
interface.


Advantages


Consistency checks: Eliminate mismatches
between physical filenames and constants in Java
code


Better cache control


I
18
N + Direction (RTL) support


Highly optimized
(Image Sprites & other CSS
Optimizations)


Use constants and evaluation in CSS


And more...

Rich Java Client Seminar

ClientBundle


Resource types


DataResource


ImageResource


TextResource

&
ExternalTextResource


GwtCreateResource


CssResource

Rich Java Client Seminar

ClientBundle

-

DataResource


Offers a URL by which the contents of a file
can be retrieved at runtime


Automatically renames files based on their
contents in order to make the resulting URL
strongly
-
cacheable by the browser

interface

Resources

extends

ClientBundle

{



Resources

INSTANCE
=

GWT
.
create
(
Resources
.
class
);




@Source
(
"mycursor.cur"
)



DataResource

customCursor
();

}


// Elsewhere

someDiv
.
getStyle
().
setProperty
(
"cursor"
,

"
url
("

+

Resources
.
INSTANCE
.
customCursor
().
getUrl
()

+

")"
);

Rich Java Client Seminar

ClientBundle

-

ImageResource


ImageResouce

interface

Resources

extends

ClientBundle

{



@Source
(
"logo.png"
)



ImageResource

logo
();




@Source
(
"arrow.png"
)



@
ImageOptions
(
flipRtl

=

true
)



ImageResource

pointer
();

}

Resources

resources

=

GWT
.
create
(
Resources
.
class
);

Image

img

=

new

Image
(
resources
.
logo
());

Rich Java Client Seminar

ClientBundle

-

ImageResource


@
ImageOptions


flipRtl
:

The image will be mirrored about its Y
-
axis
when

LocaleInfo.isRTL
()

returns

true


repeatStyle
:

Used in combination with the
@sprite

directive to indicate that the image is
intended to be tiled



Supported formats


All common web image formats (uses Java’s
ImageIO
)


Animated GIF files will not be incorporated into an
image strip

Rich Java Client Seminar

ClientBundle

-

ImageResource


ImageResource

available methods:


getLeft
()


getTop
()


getHeight
()


getWidth
()


getUrl
()


isAnimated
()


ImageResource

can be annotated with @
ImageOptions

which
has the following properties


flipRtl


height


repeatStyle

(none, horizontal, vertical, both)


width

Rich Java Client Seminar

ClientBundle

-

ExternalTextResource


Provide access to static text content


TextResource
: Interns the text into the compiled
JavaScript


ExternalTextResource
: Bundles related text
resources into a single file, which is accessed
asynchronously

Rich Java Client Seminar

ClientBundle

-

ExternalTextResource


interface

Resources

extends

ClientBundle

{



Resources

INSTANCE
=

GWT
.
create
(
Resources
.
class
);




@Source
(
"a.txt"
)



TextResource

synchronous
();




@Source
(
"b.txt"
)



ExternalTextResource

asynchronous
();

}


// Using a
TextResource

myTextArea
.
setInnerText
(
Resources
.
INSTANCE
.
synchronous
().
getText
());


// Using an
ExternalTextResource

Resources
.
INSTANCE
.
asynchronous
().
getText
(
new

ResourceCallback
<
TextResource
>()

{



public

void

onError
(
ResourceException

e
)

{

...

}



public

void

onSuccess
(
TextResource

r
)

{





myTextArea
.
setInnerText
(
r
.
getText
());



}

});

Rich Java Client Seminar

ClientBundle

-

GwtCreateResource



GwtCreateResource


Ability to act as a factory of some other
(resource) type that is default
-
instantiable

Rich Java Client Seminar

ClientBundle

-

GwtCreateResource


interface

Resources

extends

ClientBundle

{



Resources

INSTANCE
=

GWT
.
create
(
Resources
.
class
);




@
ClassType
(
SomeClass
.
class
)



GwtCreateResource
<
ReturnType
>

factory
();

}


// Elsewhere

ReturnType

obj

=

Resources
.
INSTANCE
.
factory
().
create
();

The above is equivalent to:


ReturnType

obj

= GWT.<
ReturnType
> create(
SomeClass.class
);


It allows the consuming classes to be ignorant of the specific class
literal passed into

GWT.create
()

Rich Java Client Seminar

ClientBundle



CssResource


ensureInjected
()


Before we start working with
CssResource
, we
should make sure that the contents of the
stylesheet

have been injected to our instance.
We do that by invoking the
ensureInjected

method:





This method is safe to call multiple times, as
subsequent invocations will be a no
-
op

// Inject the contents of the CSS file

MyResources
.
INSTANCE
.
css
().
ensureInjected
();

Rich Java Client Seminar

ClientBundle



CssResource


Constants


Give us the possibility to define constants in our
CSS and the reuse them


We can use them for:


Property values (
1
px,
100
%, etc.)


CSS classes (.
myClass

{ … })

Rich Java Client Seminar

ClientBundle



CssResource


Constants

Our CSS:

Our
CssResource
:

Calling small() would return the value
1

(the return type is
int
)

@def

small
1
px
;

@def

black
#
000
;

border
:

small solid black
;


interface

MyResources

extends

CssResource

{



int

small
();

}


Rich Java Client Seminar

ClientBundle



CssResource


Constants

Our CSS:

Our
CssResource
:

Calling small() returns "
1
px
"

Calling black() returns "
#
000
"

@def

small
1
px
;

@def

black
#
000
;

border
:

small solid black
;


interface

MyResources

extends

CssResource

{



String

small
();



String

black
();

}


Rich Java Client Seminar

@def

myIdent

10
px
;

.
myIdent

{



...

}


interface

MyResources

extends

CssResource

{



String

myIdent
();




@
ClassName
(
"
myIdent
"
)



String

myIdentClass
();

}

ClientBundle



CssResource


Constants

What happens if we have a constant with the same name
of a CSS class?

returns @def value "
10
px"

returns the obfuscated class
name for .
myIdent

Rich Java Client Seminar

ClientBundle



CssResource


Runtime Substitution


Provides support for evaluating static methods
when the
stylesheet

is injected.


Allows us to substitute in our CSS values that
come from our Java written code.

@
eval

userBackground

com
.
module
.
UserPreferences
.
getUserBackground
();

div
{



background
:

userBackground
;

}

Rich Java Client Seminar

ClientBundle



CssResource


Value function


The value function takes
2
parameters:


A sequence of dot
-
separated identifiers


An optional suffix





The function evaluates the dot
-
separated
expression using the interface passed to
GWT.create
() as the root namespace

.
myDiv

{



offset
-
left
:

value
(
'
imageResource.getWidth
'
,

'
px
'
);

}

Rich Java Client Seminar

ClientBundle



CssResource


Value function


The value function may also be combined with
@def

@def

SPRITE_WIDTH value
(
'
imageResource.getWidth
'
,

'
px
'
)


.
selector
{



width
:

SPRITE_WIDTH
;

}

Rich Java Client Seminar

ClientBundle



CssResource


Literal function


Some user agents make use of property values
that do not conform to the CSS grammar.
The

literal()

function exists to allow these non
-
standard property values to be used.





Note that it is necessary to escape the
backslash (
\
) and double
-
quote (") characters.

div
-
with
-
literal
{



top
:

literal
(
"expression(
document.compatMode
==
\
"CSS
1
Compat
\
" ?


documentElement.scrollTop

:
document.body.scrollTop

\
\

2
)"
);

}

Rich Java Client Seminar

ClientBundle



CssResource


Conditional CSS


Allows is to write if blocks on our CSS
evaluating:


Static context (like @
eval
)


Compile time evaluation (like the value function)


We can decide which CSS block to use if the
user.agent

(browser) is IE or Firefox, if the locale
is
en

or
il
, if we are in one skin of our
application or other one, etc.

Rich Java Client Seminar

ClientBundle



CssResource


Conditional CSS

/* Runtime evaluation in a static context */

@if

(
com
.
module
.
Foo
.
staticBooleanFunction
())

{



...

css

rules
...

}


/* Compile
-
time evaluation */

@if

<
deferred
-
binding
-
property
>

<
space
-
separated list of values
>

{



...

css

rules
...

}

@if

user
.
agent

safari gecko
1
_
8
{

...

}

@if

locale en
{

...

}

Rich Java Client Seminar

ClientBundle



CssResource


Conditional CSS


Negation and chaining are supported

/* Negation is supported */

@if

!
user
.
agent

ie
6
opera
{



...

}


/* Chaining is also supported */

@if

(
true
)

{

}

@
elif

(
false
)

{

}

@else

{

}

Rich Java Client Seminar

ClientBundle



CssResource


Image Sprites


For every image that we include in our
application, there is minimum a request to the
server


Sprite combines several images in one single
image and with the use of CSS we load a
specific region of it


Sprite decreases in a great amount the number
of request to the web server


GWT does all the work for us: combines our
images and display the
apropiate

area of the
sprite

Rich Java Client Seminar

ClientBundle



CssResource


Image Sprites


@sprite on our CSS:

@sprite

.
mySpriteClass

{
gwt
-
image
:

"
imageAccessor
"
;

other
:

property
;}


=>

generates
=>




.
mySpriteClass

{





background
-
image
:

url
(
gen
.
png
);





clip
:

...;





width
:

27
px
;





height
:

42
px
;





other
:

property
;



}

Rich Java Client Seminar

ClientBundle



CssResource


Image Sprites

interface

MyCssResource

extends

CssResource

{



String

mySpriteClass
();

}


class

MyResources

extends

ClientBundle

{



@Source
(
"my.css"
)



MyCssResource

css
();




@Source
(
"some.png"
)



ImageResource

imageAccessor
();




@Source
(
"some.png"
)



@
ImageOptions
(
repeatStyle
=
RepeatStyle
.
Horizontal
)



ImageResource

repeatingImage
();

}

Rich Java Client Seminar

ClientBundle



CssResource


References to Data Resources


GWT allows us to reference to the
url

of a
DataResource

directly from the CSS.


As we saw,
DataResource

give us a convenient
and cache friendly way of access resources. We
can use those
DataResources

from our own CSS

Rich Java Client Seminar

ClientBundle



CssResource


References to Data Resources


Suppose we declare a
DataResource

which source is
myCursor.cur

and we obtain it calling the
fancyCursorResource

method on our
MyResource

interface


We also declare our
CssResource

interface

MyResources

extends

ClientBundle

{



@Source
(
"myCursor.cur"
)



DataResource

fancyCursorResource
();




@Source
(
"my.css"
)



CssResource

css
();

}

Rich Java Client Seminar

ClientBundle



CssResource


References to Data Resources


Now on our CSS we can reference directly to
that
DataResource

and use it as the URL of an
element

/* @
url

<constant name> <
DataResource

method name> */

@
url

myCursorUrl

fancyCursorResource
;


.
myClass

{



cursor
:

myCursorUrl
,

pointer
;

}

Rich Java Client Seminar

ClientBundle



CssResource


RTL support


CssResource

supports automatic
transformations of CSS code into a right
-
to
-
left
variant at compile time.


Very important for right to left languages (e.g.
Hebrew)


The transformations depends on the value of
com.google.gwt.i
18
n.client.LocaleInfo.getCurrentLocale().
isRTL
()


Rich Java Client Seminar

ClientBundle



CssResource


RTL support


Some of the transformations are:


The

left

and

right

properties are flipped


Any properties that have values

left

or

right

are
flipped


clear


float


text
-
align


page
-
break
-
before


page
-
break
-
after

Rich Java Client Seminar

ClientBundle



CssResource


RTL support


The

background/background
-
position

property is
flipped. Attachments expressed in percentage
points are mirrored:
40
% becomes
60
%


The following

four
-
valued properties are flipped:

1
px
2
px
3
px
4
px

becomes

1
px
4
px
3
px
2
px


margin


padding


border
-
color


border
-
style


border
-
width

Rich Java Client Seminar

ClientBundle



CssResource


RTL support


Any

xyz
-
right

or

xzy
-
right
-
abc

property is flipped
to

xzy
-
left

or

xzy
-
left
-
abc


The

direction

property on a

body

selector will be
flipped from

ltr

to

rtl
; on any other selectors,
the

direction

property is unchanged


When the cursor property has an

resize

value, it will
be flipped:

ne
-
resize

becomes

nw
-
resize

Rich Java Client Seminar

ClientBundle



CssResource


RTL support


Sections of CSS can be exempted from
automatic flipping by enclosing it in
a

@
noflip

block:

@
noflip

{



.
selector
{





left
:

10
;



}

}

Rich Java Client Seminar

ClientBundle



CssResource


RTL support


ImageResources

can be automatically flipped in
RTL contexts via the use of
the

@
ImageOptions

annotation:

@Source
(
"icon
128
.png"
)

@
ImageOptions
(
flipRtl

=

true
)

ImageResource

logo
();

Rich Java Client Seminar

ClientBundle



CssResource


Selector obfuscation


What happens if we have two selectors (e.g.
two CSS classes) with the same name? The
second one loaded will override the first one.


What if we misspelled the name of a selector?,
is there any check that when we apply a class to
an element, that class exists on the CSS? The
answer is no.

Rich Java Client Seminar

ClientBundle



CssResource


Selector obfuscation


For dealing with those situations, GWT
obfuscates (changes) the name of the selectors
on the CSS.


That way, if we wrote
myCssClass

somewhere
and the
myCssClass

somewhere else, GWT is
going to change those class names to
something different from each other and avoid
the style override problem.


Also, when we’ll write out
CssResource
, GWT is
going to check that the CSS selector we are
referring to, does exist on out
stylesheet
.

Rich Java Client Seminar

ClientBundle



CssResource


Selector obfuscation

java
:





class

Resources

{







MyCSSResource

myCSSResource
();





}





class

MyCSSResource

extends

CSSResource

{







Sprite

mySpriteClass
();







String

someOtherClass
();







String

hookClass
();





}





myWidget
.
addStyleName
(
resource
.
mySpriteClass
());


css
:





@sprite

mySpriteClass

mySpriteImage
;





.
someOtherClass

{







/* ... */





}





.
hookClass
{}

/* Empty and stripped, but left for future expansion */

Rich Java Client Seminar

ClientBundle



CssResource


Selector obfuscation
-

@external


In many cases, newly
-
developed CSS will need
to be combined with external or legacy CSS.
The

@external

at
-
rule can be used to suppress
selector obfuscation while still allowing
programmatic access to the selector name.

@external

legacySelector
;

.
legacySelector

{

....

}

.
obfuscatedSelector

{

....

}




Rich Java Client Seminar

ClientBundle



CssResource


Selector obfuscation
-

@
NotScrict


In the normal case, any class selectors that do
not match String
accessor

functions is an error.
This behavior can be disabled by adding
a

@
NotStrict

annotation to the CSS
accessor

method. Enabling

@
NotStrict

behavior is only
recommended for applications that are
transitioning from external CSS files
to

CssResource

Rich Java Client Seminar

ClientBundle



CssResource


Selector obfuscation
-

@
NotScrict

interface

MyCssResource

extends

CssResource

{



String

foo
();

}


interface

Resources

{



@Source
(
"my.css"
)



@
CssResource
.
NotStrict



MyCssResource

css
();

}

/* This is ok */

.
foo

{}


/* This would normally generate a compile error in strict mode */

.
other
{}

Rich Java Client Seminar

ClientBundle



CssResource


Selector obfuscation


Imported Scopes


The Java type system can be somewhat
ambiguous when it comes to multiple
inheritance of interfaces that define methods
with identical signatures, although there exist a
number of cases where it is necessary to refer
to multiple, unrelated

CssResource

types.
Consider the case of a Tree that contains
Checkboxes.

Rich Java Client Seminar

ClientBundle



CssResource


Selector obfuscation


Imported Scopes

@
ImportedWithPrefix
(
"tree"
)

interface

TreeCss

extends

CssResource

{



String

widget
();

}


@
ImportedWithPrefix
(
"checkbox"
)

interface

CbCss

extends

CssResource

{



String

widget
();

}


interface

MyCss

extends

CssResource

{



String

other
();

}


interface

Resources

extends

ClientBundle

{



@Import
({
TreeCss
.
class
,

CbCss
.
class
})



MyCss

css
();

}

Rich Java Client Seminar

ClientBundle



CssResource


Selector obfuscation


Imported Scopes

/* Now we can write a descendant selector using the


prefixes defined on the
CssResource

types */

.
tree
-
widget
.
checkbox
-
widget
{



color
:

red
;

}


.
other
{



something
:

else
;

}

Rich Java Client Seminar

ClientBundle



CssResource


Optimizations


The
CssResource

also applies several
optimizations to our CSS code. These
optimizations relates to:


Reduce the amount of bytes to represent the CSS
code


Rules merging when they are applied to the same
selector


Property merging when two or more properties
have the same rules

Rich Java Client Seminar

ClientBundle



CssResource


Optimizations
-

Basic
minification



Removal of comments, unnecessary
whitespace, and empty rules

would be transformed into

.
div
{



/* This is the default background color */



background
:

blue
;

}

.
empty
{}

.
div
{
background
:
blue
;}

Rich Java Client Seminar

ClientBundle



CssResource


Optimizations


Selector merging



Rules with identical selectors can be merged
together

becomes

.
div
{
prop
:

value
;}

.
div
{
foo
:

bar
;}

.
div
{
prop
:
value
;
foo
:
bar
;}


Rich Java Client Seminar

ClientBundle



CssResource


Optimizations


Property merging



Rules with identical properties can be merged
together

can be transformed into

.
a
{
background
:

blue
;}

.
b
{
background
:

blue
;}

.
a
,.
b
{
background
:
blue
;}

Rich Java Client Seminar

CssResource


Constants


@
def

NAME replacement
-
expression


Runtime substitution


@
eval

NAME Java
-
expression


Value function


att
:
value('
imageResource.getWidth
', '
px
');


Rich Java Client Seminar


Rich Java Client Seminar

UiBinder


A framework for building widget and DOM
structures from XML.


Introduced with GWT
2.0
.


Build your applications as HTML pages with
sprinkled GWT widgets.


Rich Java Client Seminar

Elements


xmlns:ui
='
urn:ui:com.google.gwt.uibinder
'


ui:UiBinder

-

Root


ui:style



Add CSS


ui:with



Add Reference (
i.e
:
ClientBundle
)


ui:msg



Translated message


ui:ph



Translator place holder




Rich Java Client Seminar

Attributes


xmlns:ui
='
urn:ui:com.google.gwt.uibinder
'


ui:field


ui:ph



ui:defaultLocale



ui:generateFilename


ui:generateFormat


ui:generateKeys


ui:generateLocales


Rich Java Client Seminar

Annotations


@
UiField
(provided=false)


@
UiConstructor


@
UiFactory


@
UiTemplate

Rich Java Client Seminar


Rich Java Client Seminar

Security


There is much to say about
web applications
security
.


Web applications are vulnerable to many
types of attacks:
Brute Force, Phishing, MITM,
Injections, CSRF,
DoS
, XSS,...


A subject for an entire course...



Attacks most relevant to JavaScript are
XSS

and
CSRF

caused by
Misplaced Trust
.


Unfortunately, those are also the most
common attacks...

Rich Java Client Seminar

XSS: Cross
-
Site Scripting


Attack Description:


Attacker causes target website to include a
malicious script in the page presented to the
victim.


If successful, the attacker can then lunch other
attacks. e.g. CSRF, still users cookies, login as the
user, still credentials etc.



Mitigation:


Never trust the user.


Validate input.

Rich Java Client Seminar

XSS Mitigation in GWT

»
Constrain client, allow only
the minimum
.


Validate all input on the
server
-
side
.


Limit
fields length using
field.
setMaxLength
().


Use
IntegerBox
,
DoubleBox

or
LongBox

for
number fields.


Use
SafeHtml
.

Rich Java Client Seminar

Safe HTML


SafeHtml

= API and a set
of
utilities used
for
escaping and
sanitizing HTML.


SafeHtml

object


an object representing
HTML that is
guaranteed

to be
safe.


Should be passed instead of plain string.


Is created by using
SafeHtml

utilities.


Many widgets receive
SafeHtml

objects:


e.g
: instead of


Use:

public

HTML(
String

html) {
...

}

public HTML(
SafeHtml

html) {
...

}

Rich Java Client Seminar

SafeHTML

U
tilities


SafeHtmlUtils


SafeHtmlBuilder


SimpleHtmlSanitizer


SafeHtmlTemplates

Rich Java Client Seminar

SafeHtmlUtils

Methods


Creating
SafeHtml

instances
:


fromString
(string)


returns
SafeHtml

of escaped string.


To be used on user input and untrusted strings.


fromTrustedString
(string)
-

returns
SafeHtml

of given string.


To be used only on
trusted strings

(e.g. numbers,
constants)


fromSafeConstant
(string)
-

returns
SafeHtml

of given string.


Extended version of
fromTrustedString
()


Also asserts that given HTML is “complete”,

meaning: all tags are closed (e.g. “<div” is invalid).


This assertion is executed only in tests and in
Development Mode.

Rich Java Client Seminar

Examples


Safe

HTML

Unsafe HTML

new

HTML(
fromString
(name))


new

HTML(name)

new

HTML(
fromSafeConstant
(
"<b>Name:</b>"
))


new

HTML(
"<b>Name:</b>"
)

Rich Java Client Seminar

SafeHtmlUtils

Methods


Escaping Methods


htmlEscape
(string
)


returns escaped string.


Escaped chars: & < > “ ‘


htmlEscapeAllowEntities
(string
)


Smarter version of
htmlEscape
.


Does
not double
-
escape
HTML
-
entities (e.g. &
nbsp
;
&
gt
;)

Rich Java Client Seminar

SafeHtmlBuilder


A builder that facilitates the building up of
XSS
-
safe HTML from text snippets.

Rich Java Client Seminar

SimpleHtmlSanitizer


A simple and relatively inexpensive HTML
sanitizer.


Accepts
the subset of HTML consisting of the
following attribute
-
free tags:


<b>, <
em
>, <i>


<h
1
>, <h
2
>, <h
3
>, <h
4
>, <h
5
>, <h
6
>


<
ul
>, <
ol
>. <li>


<
hr
>



Usage:



SimpleHtmlSanitizer.sanitizeHtml
(
html
)

Rich Java Client Seminar

SafeHtmlTemplates


Facilitate
the creation of
SafeHtml

instances
containing more complex HTML
markup.


Allows creation of
SafeHTML

instances
using
templates.


Usage:

1.
Create an interface which extends
SafeHtmlTemplates
.

2.
Add methods which
return
SafeHtml

.

3.
Annotate
methods with
@
Template

annotation
and define the HTML template.

4.
Create proxy of the interface using
GWT.create
()

5.
Invoke the template methods.

Rich Java Client Seminar

SafeHtmlTemplates

Example


public

interface

MyTemplates

extends

SafeHtmlTemplates

{


@
Template
(
"<span class=
\
"{
3
}
\
">{
0
}: <a
href
=
\
"{
1
}
\
">{
2
}</a></span>"
)


SafeHtml

messageWithLink
(
SafeHtml

message
,

String
url
,




String
linkText
,

String
style
);

{


private

static

final

MyTemplates

TEMPLATES
=




GWT
.
create
(
MyTemplates
.
class
);


public

void

useTemplate
(...)

{


HTML
messageWithLinkInlineHTML

=

new

InlineHTML
(


TEMPLATES
.
messageWithLink
(
message
,

url
,

linkText
,

style
));

{

Rich Java Client Seminar

Same Origin Policy
-

SOP


To minimize the damage caused by cross
-
site attacks
all modern browsers implement
SOP

-

S
ame
O
rigin
P
olicy.


Security policy that restricts all JavaScript activities to
the current domain, port and protocol.


This means you cannot send Ajax requested to
a different domain.


e.g
:
http://www.hp.com/gwtApp
cannot send Ajax
requests to
http://server
2
.hp.com/services/

Rich Java Client Seminar


Rich Java Client Seminar

History


Done by keeping track of application's
"internal state" in the URL fragment identifier


Updating the fragment doesn't typically cause the
page to be reloaded.


Provides good feedback to the user.


Application’s state is
bookmarkable
.







Rich Java Client Seminar

History


Add this to host page.






Use History:


History.newItem
(token)


History.addValueChangeHandler
()


* Since GWT
2.1
there’s also a higher abstraction as part of MVP.

<
iframe

src
=

javascript
:'‘”

id
=
“__
gwt_historyFrame

tabIndex
=

-
1


style
=
“width:
0
;height:
0
;border:
0

>

</
iframe
>



Rich Java Client Seminar


Rich Java Client Seminar

GWT Best Practices


Inspired by Ray Ryan's

Best Practices For
Architecting Your GWT App

session at Google
I/O
2009



Highlights:


Embrace Asynchrony.


Command (dispatcher) pattern.


Decoupling, decoupling, decoupling.


MVP (Model/View/Presenter) pattern.


Dependency Injection.


Event Bus.


Support history from the start (using
PlaceManager
).

Rich Java Client Seminar

Code Splitting


Enterprise applications can have lots of client
-
side code.


This means big JavaScript files to download and
evaluate.


And this means long startup time.


Code splitting
allows us to *easily* spilt our
code into several JavaScript files.


Main startup files can now be very small.


Other JavaScript files are lazily loaded when
needed.

GWT
.
runAsync
(
new

RunAsyncCallback
()

{


@Override


public

void

onSuccess
()

{

/*
code
*/

{

});

Rich Java Client Seminar

Event Bus


A
global bus which is aware of all events that
should be shared between different panels,
and fires them to the right components
.


Eases
decoupling by allowing objects to
interact without having direct dependencies
upon one
another.


There will typically be
one
EventBus

per
application


Pattern highlights:


Instead
of
referencing one another, widgets
communicate though the
EventBus
.


This is done by firing events to the event bus and
listening to fired events.

Rich Java Client Seminar

Event Bus
-

Motivation


Rich Java Client Seminar

MVP


The

model

is an interface defining the data to
be displayed


The

view

is an interface that displays data (the
model) and routes user commands (events) to
the presenter


The

presenter

retrieves
data from repositories
(the model), persists it, and formats it for
display
-


assumes the functionality of the
"middle
-
man"


M
odel
-
V
iew
-
P
resenter

is a derivative of the
M
odel
-
V
iew
-
C
ontroller design
pattern`

Rich Java Client Seminar

MVP


Motivation:


Facilitate
automated unit
testing



Improve the separation of concerns: presentation
& logic.


Many
3
rd

party libraries implementing these
concepts has spawned.


GWT
2.1
added a built
-
in support for MVP,
activities and places.


Joining the existing event bus support.


Rich Java Client Seminar

MVP Diagram


Rich Java Client Seminar

GWT’s Implementation
-

Activities


Activities

are

analogous to a presenter in
MVP
terminology.


Activities are designed
to be
disposable.


Can
automatically display a warning
confirmation when the Activity is about to be
stopped.


An
Activity needs a corresponding
Place
.

Rich Java Client Seminar

Places


A

Java
object representing a particular state of
the
UI.


C
an be converted to and from a URL
history
token
.


A Place must
have an associated
PlaceTokenizer

which knows how to serialize
the Place's state to a URL
token that consists
of the Place's simple class name (like
"
HelloPlace
") followed by a colon (:) and the
token returned by the
PlaceTokenizer

Rich Java Client Seminar

PlaceManager


The
one that
takes
care of History
management


The
PlaceManager

works
as an intermediary
between the GWT History

API and

Activity
(Presenter)


The
PlaceManager

sets up event listener
relationships to synchronize between
History

and

Places.


Rich Java Client Seminar

GWT
2.1
Place
Managment


In GWT Place Management is handled by
several components:


PlaceController

-

Used to navigate between
application places. Responsible
for firing
PlaceChangeRequestEvent

and
PlaceChangeEvent

.



ActivityMapper



Maps places to activities.


ActivityManager

-

Manages
Activity

objects that
should be kicked off in response to
PlaceChangeEvent

events.


PlaceHistoryMapper



Maps history tokens to
places.


PlaceHistoryHandler

-

Monitors
PlaceChangeEvent
s

and
History

events and keep
them in sync.


Rich Java Client Seminar

MVP View


public interface
HelloView

extends
IsWidget

{


void
setName
(String
helloName
);



void
setPresenter
(Presenter listener
);




public
interface
Presenter {



void
goTo
(Place place);



}

}

Rich Java Client Seminar

MVP View Implementation


public class
HelloViewImpl

extends Composite
implements
HelloView

{


private static
HelloViewImplUiBinder

uiBinder

=
GWT.create
(
HelloViewImplUiBinder.class
);



interface
HelloViewImplUiBinder

extends
UiBinder
<Widget,
HelloViewImpl
>
{ }



@
UiField




Label
fName
;


@
UiField


Anchor
goodbyeLink
;




private Presenter
presenter
;


private String name;



public
HelloViewImpl
() {


initWidget
(
uiBinder.createAndBindUi
(this));


}



@Override


public void
setName
(String name) {


this.name = name;



fName.setText
(name
);


}



@
UiHandler
("
goodbyeLink
")


void
onClickGoodbye
(
ClickEvent

e) {



presenter.goTo
(new
GoodbyePlace
(name));


}



@Override


public void
setPresenter
(Presenter listener) {


this.listener

= listener;


}

}


Rich Java Client Seminar

MVP Binder template


<!DOCTYPE
ui:UiBinder

SYSTEM "http://dl.google.com/
gwt
/DTD/
xhtml.ent
">

<
ui:UiBinder


xmlns:ui
="
urn:ui:com.google.gwt.uibinder
"



xmlns:g
="
urn:import:com.google.gwt.user.client.ui
">


<
ui:style
>



.important
{font
-
weight
: bold
;}


</
ui:style
>


<
g:HTMLPanel
>



Hello
,



<
g:Label

styleName
="{
style.important
}"
ui:field
="
fName
" />



<
g:Anchor

ui:field
="
goodbyeLink
" text="Say good
-
bye"></
g:Anchor
>


</
g:HTMLPanel
>

</
ui:UiBinder
>

Rich Java Client Seminar

MVP Activity/Presenter


public class
HelloActivity

extends
AbstractActivity

implements
HelloView.Presenter

{



// Used to obtain views,
eventBus
,
placeController


private
ClientFactory

clientFactory
;


private String name;



public
HelloActivity
(
HelloPlace

place,
ClientFactory

clientFactory
) {



this.name =
place.getHelloName
();



this.clientFactory

=
clientFactory
;


}



//
Invoked by the
ActivityManager

to start a new Activity


@Override


public void start(
AcceptsOneWidget

containerWidget
,
EventBus

eventBus
) {



HelloView

helloView

=
clientFactory.getHelloView
();



helloView.setName
(name);



helloView.setPresenter
(this);



containerWidget.setWidget
(
helloView.asWidget
());


}



//
Navigate to a new Place in the browser


public void
goTo
(Place place) {



clientFactory.getPlaceController
().
goTo
(place);


}

}

Rich Java Client Seminar

Dispatcher Pattern


Replaces simple GWT RPC.


It
is a GWT implementation of
the
command
pattern

that wraps the GWT
-
RPC
mechanism.


Instead of invoking Service methods we send
Action
s (i.e. commands) to a dispatcher.


A dispatcher dispatches each Action to the
server and invoke the appropriate action
handler.


Advantages:


Allows command batching.


Allows client
-
side caching of responses..

Rich Java Client Seminar

Dependency Injection


All over our code we need dependencies:


The database driver to execute a query


The instance of a service to do something on our
controller


Some singleton that we want to have access to


Etc.



We used to go and get all these instance from
our class, which created a tight couple
between our code and some few classes like,
for instance, a GWT service we want to invoke
from a controller class

Rich Java Client Seminar

Dependency Injection


What if we want to change the
implementation of a GWT service in our
application? We’ll need to change every single
class that makes use of it.



The solution: Inversion of Control

Rich Java Client Seminar

Dependency Injection


Inversion of Control


Dependency Injection is a design pattern which makes
use of an Inversion of Control container that injects our
code with what we need on a specific class without us
knowing how to get it.


That way, a controller in our MVC defines that it needs a
GWT service but not which one. The Inversion of Control
container injects the appropriate service
implementation.


If we want to change the service implementation, we
just change the configuration of our IOC container.

Rich Java Client Seminar


GIN (GWT
INjection
)


GWT’s Inversion of Control container

Rich Java Client Seminar

GIN


GIN (GWT
INjection
) brings automatic
dependency injection to

GWT

client
-
side
code.


GIN is built on top of

Guice

and uses (a subset
of)
Guice's

binding language


One of the most important differences
between
Guice

and GIN is that GIN can only
inject dependencies trough the constructor,
not setter methods

Rich Java Client Seminar

GIN


Inheriting the GIN module


The first step is to inherit the GIN module in our
application

<module>



...



<inherits

name
=
"
com.google.gwt.inject.Inject
"
/>



...

</module>

Rich Java Client Seminar

GIN


Defining the
Ginjector


GIN’s injector looks very similar to client
bundles and messages. You simply create a
method for each object type you want to create

public

interface

MyWidgetGinjector

extends

Ginjector

{



MyWidgetMainPanel

getMainPanel
();

}

Rich Java Client Seminar

GIN


Defining the
Ginjector


You only need to create injector methods for
classes that you would directly access in your
top
-
level initialization code, such as the UI
classes to install in your

RootPanel
.


If a class is used by one of those defined main
classes, GIN will automatically inject it, it will be
attached to the container so there is no need to
declare it on the injector.

Rich Java Client Seminar

GIN


Binding declaration


Bindings are declared the same way as
Guice
,
using a module. The module class looks almost
exactly like it would in regular
Guice

although
we
use

GinModule

and

AbstractGinModule

instead
of

Module

and

AbstractModule
.

public

class

MyWidgetClientModule

extends

AbstractGinModule

{



protected

void

configure
()

{





bind
(
MyWidgetMainPanel
.
class
).
in
(
Singleton
.
class
);





bind
(
MyRemoteService
.
class
).
toProvider
(
MyRemoteServiceProvider
.
class
);



}

}

Rich Java Client Seminar

GIN


Module and Injector association


Add the

GinModules

annotation to your
Ginjector
, specifying the module(s) needed to
configure the application

@
GinModules
(
MyWidgetClientModule
.
class
)

public

interface

MyWidgetGinjector

extends

Ginjector

{



MyWidgetMainPanel

getMainPanel
();

}

Rich Java Client Seminar

GIN


Injector creation


To create the injector instance, use the
standard

GWT.create
()

call. This can be done
during static initialization

public

class

MyWidget

implements

EntryPoint

{



private

final

MyWidgetGinjector

injector
=

GWT
.
create
(
MyWidgetGinjector
.
class
);




public

void

onModuleLoad
()

{





MyWidgetMainPanel

mainPanel

=

injector
.
getMainPanel
();





RootPanel
.
get
().
add
(
mainPanel
);



}


}

Rich Java Client Seminar

GIN


Injection


After you declared your bindings on your
modules, you can inject dependencies on your
constructors’ objects using @Inject

public

class

MyWidget

{




@Inject



public

MyWidget
(
MyRemoteService

service
)

{



}

}

Rich Java Client Seminar


Rich Java Client Seminar

Logging


Logger


use
java.util.logging.
Logger


Handlers


SystemLogHandler

-

Logs to
stdout
.


DevelopmentModeLogHandler



Logs to GWT.log.


ConsoleLogHandler

-

Logs to the
javascript

console.


FirebugLogHandler

-

Logs to Firebug.


PopupLogHandler

-

Logs to the popup.


HasWidgetsLogHandler



can be used with any
container.


SimpleRemoteLogHandler

-

Discussed below, in
the Remote Logging section



Rich Java Client Seminar

GWT Unit Testing


GWT provides integration with JUnit


Both in dev mode and production mode


webAppCreator specifies ant targets
designated for testing in build.xml, once

junit
option is specified


javac.tests: Compiles test code


test.dev: Run development mode tests


test.prod: Run production mode tests







Rich Java Client Seminar

GWT Unit Testing


Inherit the
JUnit

Module



GWT
JUnit

tests extend
GWTTestCase


Directly or indirectly


Implement the abstract method
(
getModuleName
) that returns the GWT
module name







Rich Java Client Seminar

GWT Unit Testing


Rich Java Client Seminar

Running unit tests


Using your IDE TestRunner


From command line, using Ant


Manual Mode


More about it later






Rich Java Client Seminar

JUnitShell


The main class in test infrastructure


To control aspects of test execution, pass
arguments to this class


By defining a system property gwt.args


To run tests in production mode, declare
-
Dgwt.args="
-
prod“


First compile to JS, than run tests


To get a full list of supported options, declare
-
Dgwt.args="
-
help"






Rich Java Client Seminar

JUnitShell


Rich Java Client Seminar

Running unit tests in manual mode


Runs unit tests manually on a browser


Using JUnitShell


Instead of running the test, prints a URL and
waits for browser connection


Use:
-
Dgwt.args="
-
runStyle Manual"





Rich Java Client Seminar

Running unit tests in manual mode


Point the browser to the specified URL


In browser, you may be prompted by Google
Web Toolkit Developer Plugin






Rich Java Client Seminar

Server side testing


Server side code runs as native Java in a JVM


It is not necessary to run tests of server side
code using
GWTTestCase


Use
JUnit

TestCase

and or other test
framework directly when writing tests for your
application's server side code




Rich Java Client Seminar

»
A bunch of new specs

»
WHATWG, since
2004

»
W
3
C, picked up at
2007

»
Plus additional specs

»
Contains new APIs

»
Empower us

»
Ease development

W
eb
H
ypertext
A
pplication
T
echnology
W
orking
G
roup

W
orld
W
ide
W
eb
C
onsortium

Rich Java Client Seminar

Semantics & Data

HTML
5


New Features

SVG

MicroData

Video

Audio

Data Att.

Media

HTML Markup

Semantics
Tags

Link
Relations

ARIA

Cache

Forms & Applications

Device

Meters

Menu

Editable Content

Fields

Validations

Rich Java Client Seminar

Semantics & Data

HTML
5


New Features

SVG

MicroData

Video

Audio

Data Att.

Media

HTML Markup

Semantics
Tags

Link
Relations

ARIA

Cache

Forms & Applications

Device

Meters

Menu

Editable Content

Fields

Validations

Vector Graphics Markup +
CSS + Effects + Transitions +
Animations + JavaScript
Events + Design Tools

Rich Java Client Seminar

Semantics & Data

HTML
5


New Features

SVG

MicroData

Video

Audio

Data Att.

Media

HTML Markup

Semantics
Tags

Link
Relations

ARIA

Cache

Forms & Applications

Device

Meters

Menu

Fields

Validations

<menu type=“toolbar”>



<command type=“command”>Click Me!</command>

</menu>

Editable Content

Rich Java Client Seminar

Semantics & Data

HTML
5


New Features

SVG

MicroData

Video

Audio

Data Att.

Media

HTML Markup

Semantics
Tags

Link
Relations

ARIA

Cache

Forms & Applications

Device

Meters

Menu

Fields

Validations

<meter
min="
0
" max="
100
" low="
40
" high="
90
"
optimum="
100
" value=“
75
“/>

<progress
value="
75
" max="
100
“/>


Editable Content

Rich Java Client Seminar

Forms & Applications

Semantics & Data

HTML
5


New Features

SVG

MicroData

Video

Audio

Data Att.

Device

Media

HTML Markup

Semantics
Tags

Meters

Menu

Link
Relations

ARIA

Editable Content

Cache

Fields

<input
type=“date”
min=“...” max=“...” />

<input
type=“range”
min=“...” max=“...” />

<input
type=“number” step=“
1

min=“...” max=“...” />

<input
type=“search”
results=“
10

placeholder
=“Search...” />







Validations

Rich Java Client Seminar

Forms & Applications

Semantics & Data

HTML
5


New Features

SVG

MicroData

Video

Audio

Data Att.

Device

Media

HTML Markup

Semantics
Tags

Meters

Menu

Link
Relations

ARIA

Editable Content

Cache

Fields

Validations

HTML

<input type=“text”
required

/>

<input
type=“email”
value=“yoava@alphacsp.com” />

<input type=“number” step=“
1

min=“
1
” max=“
10


/>

<input type=“date”
min="
2010
-
12
-
16
" max="
2011
-
12
-
16
"
/>

<input type=“
tel

pattern=“
\
d{
3
}
-
\
d{
7
}”

/>


CSS

input
:invalid

{ outline: solid
3
px red; }

Rich Java Client Seminar

Forms & Applications

Device

Meters

Menu

Fields

Validations

Semantics & Data

HTML
5


New Features

SVG

MicroData

Video

Audio

Data Att.

Media

HTML Markup

Semantics
Tags

Link
Relations

ARIA

Cache

HTML

<html
manifest=
"
cache.manifest
">


Cache Manifest



CACHE MANIFEST


# version
1


CACHE:

/html
5
/
src
/logic.js

/html
5
/
src
/style.css

/html
5
/
src
/background.png

Editable Content

Rich Java Client Seminar

Semantics & Data

HTML
5


New Features

SVG

MicroData

Video

Audio

Data Att.

Media

HTML Markup

Semantics
Tags

Link
Relations

ARIA

Cache

<div
itemscope

itemtype
=
"
http://data
-
vocabulary.org/Person
">


My name is
<span
itemprop
=
"name">
Yoav
</span>


aka

<span
itemprop
=
"nickname">
Aharoni
</span>.

</div>

Forms & Applications

Device

Meters

Menu

Editable Content

Fields

Validations

Rich Java Client Seminar

Forms & Applications

Device

Meters

Menu

Editable Content

Fields

Validations

Semantics & Data

HTML
5


New Features

SVG

MicroData

Video

Audio

Data Att.

Media

HTML Markup

Semantics
Tags

Link
Relations

ARIA

Cache

HMTL

<div id=“me”
data
-
id=“
012
"
data
-
name=“Yoav“


data
-
user=“
yoava
"></div>

JavaScript

document.getElementById
(‘me’).
dataset
[‘name’]

Rich Java Client Seminar

Semantics & Data

HTML
5


New Features

SVG

MicroData

Video

Audio

Data Att.

Media

HTML Markup

Semantics
Tags

Link
Relations

ARIA

Cache

Forms & Applications

Device

Meters

Menu

Editable Content

Fields

Validations

<header>


<
hgroup
>


<h
1
/>


<h
2
/>


</
hgroup
>

</header>


...
<section/>
...

<article/>

...

...
<
nav
/>
...
<aside/>

...

...
<figure/>

...

<
figcaption
/>
...


...
<footer>
...


<time
datetime
=“
2010
-
12
-
16
“/>

Rich Java Client Seminar

Semantics & Data

HTML
5


New Features

SVG

MicroData

Video

Audio

Data Att.

Media

HTML Markup

Semantics
Tags

Link
Relations

ARIA

Cache

Forms & Applications

Device

Meters

Menu

Editable Content

Fields

Validations

Rich Java Client Seminar

HTML
5


New Features

Transitions

CSS
3.0

Fonts

Transforms

Color

Border

Image

Radius

Shadow

Background

Origin

Size

Clip

Multiple

Colors

Color

UI

Text

RGBA

HSLA

Opacity

HSL

Outline

Box Sizing

Nav

Resize

Overflow

Shadow

Word
Wrap

Columns

Media Queries

3
D

Selectors

Rich Java Client Seminar

HTML
5


New Features

Transitions

CSS
3.0

Fonts

Transforms

Color

Border

Image

Radius

Shadow

Background

Origin

Size

Clip

Multiple

Colors

Color

UI

Text

RGBA

HSLA

Opacity

HSL

Outline

Box Sizing

Nav

Resize

Overflow

Shadow

Word
Wrap

Columns

Media Queries

3
D

Selectors

transform:
rotate
(
7
deg);
transform:
scale
(
0.5
);

transform:
skew
(
-
25
deg);

Rich Java Client Seminar

HTML
5


New Features

Transitions

CSS
3.0

Fonts

Transforms

Color

Border

Image

Radius

Shadow

Background

Origin

Size

Clip

Multiple

Colors

Color

UI

Text

RGBA

HSLA

Opacity

HSL

Outline

Box Sizing

Nav

Resize

Overflow

Shadow

Word
Wrap

Columns

Media Queries

3
D

Selectors

perspective
:
600
;

perspective
-
origin
:
25
%
75
%;

transform:


perspective
(
600
)


rotateZ
(
90
deg);


translateZ
(z);


scaleZ
(z);


translate
3
d
(
x,y,z
)


scale
3
d
(
x,y,z
)

Rich Java Client Seminar

HTML
5


New Features

Transitions

CSS
3.0

Fonts

Transforms

Color

Border

Image

Radius

Shadow

Background

Origin

Size

Clip

Multiple

Colors

Color

UI

Text

RGBA

HSLA

Opacity

HSL

Outline

Box Sizing

Nav

Resize

Overflow

Shadow

Word
Wrap

Columns

Media Queries

3
D

Selectors

transition
-
property
: color, left | all;

transition
-
duration
:
2
s;

transition
-
timing
-
function
:

ease | linear | ease
-
in | ease
-
out |
ease
-
in
-
out;

Rich Java Client Seminar

HTML
5


New Features

Transitions

CSS
3.0

Fonts

Transforms

Color

Border

Image

Radius

Shadow

Background

Origin

Size

Clip

Multiple

Colors

Color

UI

Text

RGBA

HSLA

Opacity

HSL

Outline

Box Sizing

Nav

Resize

Overflow

Shadow

Word
Wrap

Columns

Media Queries

3
D

Selectors

@font
-
face

{


font
-
family: '
LeagueGothic
';


src
:
url
(LeagueGothic.otf);

}

Rich Java Client Seminar

HTML
5


New Features

Transitions

CSS
3.0

Fonts

Transforms

Color

Border

Image

Radius

Shadow

Background

Origin

Size

Clip

Multiple

Colors

Color

UI

Text

RGBA

HSLA

Opacity

HSL

Outline

Box Sizing

Nav

Resize

Overflow

Shadow

Word
Wrap

Columns

Media Queries

3
D

Selectors

text
-
overflow: ellipsis;

text
-
overflow: ellipsis
-
word;

Lorem

ipsum

dolor sit
amet
,
consec

Lorem

ipsum

dolor sit…

Rich Java Client Seminar

HTML
5


New Features

Transitions

CSS
3.0

Fonts

Transforms

Color

Border

Image

Radius

Shadow

Background

Origin

Size

Clip

Multiple

Colors

Color

UI

Text

RGBA

HSLA

Opacity

HSL