ok ok unlocking the java ee platform with html5 geertjan wielenga oracle

7/23/2019 OK OK Unlocking the Java Ee Platform With Html5 Geertjan Wielenga Oracle

http://slidepdf.com/reader/full/ok-ok-unlocking-the-java-ee-platform-with-html5-geertjan-wielenga-oracle 1/22

1



2

Unlocking the JavaEE Platform with

HTML 5



3

Unlocking the Java EE Platform with HTM

HTML5 has suddenly become a hot item, even in the Java ecosyste

How do the 'old' technologies o HTML, Java!c"i#t, and $!! "elate

develo#e"s and can Java develo#e"s "eally be #"oductive in this new

n this session, you'll lea"n eve"ything you need to (now and see de

illust"ating the "elevance o HTML5 in the Java wo"ld, using sim#le tools that have been es#ecially c"eated o" this #u"#ose)

*ve"view



+

Agenda

● hat's HTML5&

How to be #"oductive with HTML5&

hat tools a"e out the"e&

How does this "elate to me as a Java develo#e"&

hat tools a"e out the"e to hel# Java develo#e"s with HTML5&



What's HTML5

● -u wo"d

● -u wo"d o" /"ich0 clientside develo#ment

eal #u"e net gene"ation HTML

Java!c"i#t and%o" $!! mashed togethe" with HTML



4

What's HTML5

● eb #ages no longe" need to look li(e web #ages

● eb #ages no longe" need to re!resent single

business content

eb #ages no longe" need to be !rovided on

a single device



What's "ew in HTML5

● "ew !arsing r#les$ o"iented towa"ds leible #a"sing and com#atibil

based on !7ML● 8bility to #se inline %& and MathML in tet%html● "ew elements9 a"ticle, aside, audio, bdi, canvas, command, data, d

details, embed, igca#tion, igu"e, oote", heade", hg"ou#, (eygen, ma

nav, out#ut, #"og"ess, "#, "t, "uby, section, sou"ce, summa"y, time, t"a

wb" ●

"ew t(!es of form controls9 dates and times, email, u"l, sea"ch, nutel, colo":54;

● "ew attri)#tes9 cha"set <on meta=, async <on sc"i#t=● lo)al attri)#tes <that can be a##lied o" eve"y element=9 id, tabinde

data> <custom data att"ibutes=● *e!recated elements will be d"o##ed altogethe"9 ac"onym, a##let,

cente", di", ont, "ame, "ameset, isinde, no"ames, st"i(e, tt



?

What's "ew in HTML5

● <video src="movie.webm" poster="movie.jpg" controls

This is fallback content to display if the does not support the video element.

</video>

● <canvas id="eample" width="!" height="!">

This tet is displayed if your browser does

support #T$%& 'anvas.</canvas>

var eample = document.get(lement)y*d+,eample,-

var contet = eample.get'ontet+,!d,-

contet.filltyle = ,red,

contet.fill0ect+12 12 &2 &-



@

How to )e Prod#ctive with HTML5

●

-"owse"based edito"s A 8loha Bdito" <htt#9%%www.alohaedito".o"g=

A Teamlab Cocument Bdito" <htt#9%%html5.teamlab.com=

A MaDetta <htt#9%%maDetta.o"g=

A a#to" Bdito" <htt#9%%www."a#to"edito".com=

● Ces(to# edito"s A C"eameave" <htt#9%%www.adobe.com%#"oducts%d"eamweave".h

A -lue 7"ion <htt#9%%blueg"ion.o"g=

A MacElu <htt#9%%www.macwa"einc.com%#"oducts%MacElu%ove"v

A $ode Lobste" <htt#9%%www.codelobste".com=

http://maqetta.org/

http://www.macwareinc.com/products/MacFlux/overview.html

http://www.macwareinc.com/products/MacFlux/overview.html

http://maqetta.org/



1F

And What A)o#t +%% And Java%cri!t● !tylie"

<htt#9%%www.stylie"a##.com=

● a#id $!!

<htt#9%%www."a#idcssedito".com=

● !tyle Maste"

<htt#9%%westciv.com%styleGmaste"%inde.html=

● yle !co#e

<htt#9%%cultu"edcode.com%yle%inde.html=

● To# !tyle

<htt#9%%svanas.dyni#.com%to#style%inde.html=

http://www.stylizerapp.com/

http://westciv.com/style_master/index.html

http://culturedcode.com/xyle/index.html

http://svanas.dynip.com/topstyle/index.html

http://svanas.dynip.com/topstyle/index.html

http://culturedcode.com/xyle/index.html

http://westciv.com/style_master/index.html

http://www.stylizerapp.com/



11

What A)o#t ,ntegrated Tools

● Bdit HTML, $!!, and Java!c"i#t in a single envi"onment

● nte"act easily and intuitive between die"ent languages and iles

● nte"act with the b"owse"

A clic( in b"owse" and see whe"e and how C*M nodes a"e dein

A clic( in elements, tags, and $!!, and see whe"e "ende"ed in b



12

HTML5 -ich +lient *evelo!ment

●

8ccele"ated HTML5 Cevelo#ment

Live eb I"eview and es#onsive eb Cesign

ew"itten Java!c"i#t Bdito" on asho"n

Java!c"i#t Cebugge"

$!!3 Bdito", !tyle Bdito", and ule Bdito"

-ac(bone.Ks $lient 7ene"ation "om

Bisting B!Tul eb !e"vice I"oKect



13

Accelerated HTML5 *evelo!ment

●

$"eate a##lications "om #o#ula" tem#lates

*#en eisting HTML5 a##lications

*#en a##lications "om I ile

se #o#ula" tuto"ial sam#les

ew Java!c"i#t Lib"a"y Manage"



1+

Live Preview . -es!onsive *esign

●

Cee# integ"ation with ebNit 8I

nteg"ation with embedded b"owse"

nstant eedbac( "om #age design

!elect in b"owse", see "elated code in CB,

and "eve"seO without needing to save

Multi#le o"m acto"s, e.g., des(to# o" mobile,

in b"owse"



15

Java%cri!t *e)#gger

●

HTML5 a##lications a"e automaticallyin debug mode

!et b"ea(#oints in Java!c"i#t ile,

on Line, C*M, Bvent,

o" MLHTTIeDuest

e"esh the b"owse" andimmediately you can ste# th"ough code

se Cebugge" windows to monito"

watches, th"eads, and b"ea(#oints



14

+%%/ Editors

●

ns#ect and edit $!! "om $!! !tyles window

ns#ect styles a##lied to HTML elements

in avigato" window

$hange in $!! Bdito" is immediately

"elected in the b"owse"



1

Java%cri!t Editor on "ashorn

●

Ba"ly build o asho"n used o" #a"sing

!ynta colo"ing, code com#letion,

#atte"n "ecognition, KPue"y, and J!*

Java!c"i#t "eacto"ing

Many customiation settingsin *#tions window



1?

How does this relate to me as a Java dev

●

ow you have choice A eithe" use Java BB o" othe" Javao"ientedo" HTML

● -ut how to integ"ate HTML "ontends with Java bac(ends&

● B!Tul Java web se"vices #"ovide ent"y #oints into Java bac(en



1@

0est of )oth worlds

●

Java BB Ilato"m

● JI89 standa"died mechanism o" accessing data● BJ-9 standa"died mechanism o" coding business logic● J8!9 standa"died mechanism o" e#osing data

● HTML5 Ilato"m

● HTML%Java!c"i#t%$!!9 "ontend that connects to Java BB via



2F

What tools are o#t there to hel! Java devwith HTML5

●

$"eate o" o#en an HTML5 a##lication

$"eate a -ac(bone.Ks "ontend

"om B!Tul web se"vices

Java!c"i#t ile

with HTML ile is gene"ated

and can immediatelybe o#ened in the b"owse"

n summa"y9 Qou can e#ose

a database in

an HTML5 a##lication

within 5 minutes



21

+oncl#sion

●

HTML5 is out the"e and g"owing in #o#ula"ity

● Eigu"ing out how to be #"oductive is a (ey conce"n to success

●

Tools eist, ma(e su"e to choose tools with the "ight integ"ation

● HTML5 can even integ"ate with Java bac(ends via B!Tul web



22

ok ok unlocking the java ee platform with html5 geertjan wielenga oracle

Documents