jMaki Overview

jMaki Overview
Sang Shin Sang Shin
Java Technology Architect Java Technology Architect
Sun Microsystems, Inc. Sun Microsystems, Inc.
sang.shin@sun.com sang.shin@sun.com
www.javapassion.com www.javapassion.com
2
Agenda
What is and Why jMaki?
jMaki widgets
Using jMaki widget - List widget
What makes up a jMaki widget?
Using jMaki widget - Dojo Fisheye widget
jMaki application
jMaki plug-in for Neteans !D" #$#
%esources

What is and Why jMaki?
What is and Why jMaki?
4
Motivations for jMaki
&ou want to le'erage widgets from e(isting and
future )*)+ toolkits and frameworks
>
Dojo, -criptaculus, &ahoo U! Widgets and D./ML
0oodies
/oday, there are multiple )*)+ frameworks with
their own widgets and with different synta(
>
/here is a need for a common programming model to
these 'arious widgets
/oo much of *a'a-cript code re1uired for *a'a
de'elopers
>
/here is a need for *a'a Language 'iew of *a'a-cript-
2ased widgets
5
What is jMaki?
3roject jMaki is a wrapper framework that allows
de'elopers to take widgets from popular )*)+
frameworks, and wrap them into a *-3 or *-F tag
>
3ro'ides a common programming model to de'elopers
>
Le'erages the widgets from popular frameworks
>
Familiar to *a'a "" application de'elopers
*a'a-cript Wrapper framework for the *a'a platform
>
/he name, jMaki, was deri'ed from 4j,4 for *a'a, and 4Maki,4 a
*apanese word for wrap
6
Why jMaki?
3roject jMaki makes it easier to use popular )*)+
frameworks within the *a'a "" 3latform
!t pro'ides a 2ase set of wrappers around some of
the widgets from the more popular frameworks 5such
as Dojo, 3rototype and &ahoo Widgets6
3roject jMaki is easily e(tensi2le, allowing
de'elopers to use the latest and most useful widgets
as they appear
7
Why jMaki?
"na2les *a'a de'elopers to use *a'a-cript in their
*a'a 2ased applications as either a *-3 tag li2rary
or a *-F component
Uses the 2est parts of *a'a and the 2est parts of
*a'a-cript to deli'er a rich )*)+ style widgets
3romotes a program methodology that cleanly
separates 2eha'ior 5*a'a-cript6, from -tyles 57--6,
from template ./ML

jMaki Widgets
jMaki Widgets
Available Now
Available Now
9
jMaki Widgets
jMaki currently pro'ides 2ootstrap widgets for many
components from Dojo, -criptaculus, &ahoo U!
Widgets and D./ML 0oodies
)lso includes a set of )*)+ widgets with a focus on
We2 8$9 such as a %-- widget, a del$icio$us
ookmark widget, a 7hat widget, and many more to
come

Using jMaki Widgets:
Using jMaki Widgets:
Using a List Widget
Using a List Widget
11
Usage Exa!le of jMaki Widget
"List# in a $%& !age
:;< tagli2 prefi(=4a4 uri=4http>??ja'a$sun$com?jmaki4 ;@
:;< tagli2 prefi(=4a4 uri=4http>??ja'a$sun$com?jmaki4 ;@
:ADB7/&3" ./ML 3UL!7 4-??WC7??D/D ./ML D$9E /ransitional??"N4
4http>??www$wC$org?/%?htmlD?loose$dtd4@
:html@
:head@
:meta http-e1ui'=47ontent-/ype4 content=4te(t?htmlF charset=U/F-G4@
:title@*-3 3age:?title@
:?head@
:2ody@
:hE@*-3 3age:?hE@
:a>aja( name=4list4 ser'ice=4list-er'ice$jsp4 ?@

:?2ody@
:?html@
Declare JMaki Tag Lib
Place a jMaki Widget
12
'(ML that is )endered by jMaki
:html@
$$$
:2ody@
:script type=4te(t?ja'ascript4 src=4http>??localhost>G9G9?jMakiList?jmaki$js4@:?script@
:script type=4te(t?ja'ascript4@jmaki$we2%oot=Hhttp>??localhost>G9G9?jMakiListHF:?script@
:link rel=4stylesheet4 type=4te(t?css4
href=4http>??localhost>G9G9?jMakiList?resources?list?component$css4@:?link@
:di' id=4list94 class=4list7ontainer4@
:form onsu2mit=4jmaki$attri2utes$get5Hlist9H6$su2mitData56F return falseF4@
:input id=4list9IentryField4 type=4te(t4 siJe=4894 'alue=4"nter new Kalue4@
:input type=42utton4 onclick=4jmaki$attri2utes$get5Hlist9H6$su2mitData56F return falseF4
'alue=4)dd to List4@:?from@
:di' id=4list9Ilist4 class=4listDi'4@:?di'@
:?di'@
:script type=4te(t?ja'ascript4@
jmaki$addWidget
5Lser'ice>Hlist-er'ice$jspH,script>Hhttp>??localhost>G9G9?jMakiList?resources?list?component$jsH,uuid>Hlist9H,
name>HlistHM6F:?script@

:?2ody@
CSS
HTML
JavaScrit
1!
'ow *oes jMaki +now Whi,h '(ML
(e!late to -se for )endering?
jMaki 5actually jMaki tag handler6 takes the 'alue
from the name attri2ute - list in the e(ample 2elow
> :a>aja( name=4list4 ser'ice=4list-er'ice$jsp4 ?@
jMaki then finds the widget named as list
list widget has the following C files associated with it
- these files are parameteriJed
>
./ML template> list?component$html
>
7-- template> list?component$css
>
*a'a-cript code> list?component$js
When rendered, the parameters are set with 'alues
14
15
*eo: .-ild / )-n
*eo: .-ild / )-n
a si!le a!! that
a si!le a!! that
-ses a List Widget
-ses a List Widget
16
*eo %,enario
uild and run a simple app that uses a List widget
B2ser'e the ./ML page rendered 2y the jMaki
Use Fireug *a'a-cript de2ugger to step through
code to understand the internal flow of jMaki
operations
>
&ou are going to try this yourself in your jMaki hands-on la2
17
"#ild $ %#&
1'
Observe '(ML &age )endered
19
Make a
.reak!oint
-sing 0ireb-g

What Makes U!
What Makes U!
a jMaki Widget?
a jMaki Widget?
21
What Makes U! a jMaki Widget?
22
What Makes -! a Widget?
./ML template
>
Defines the page layout
*a'a-cript file
>
Defines 2eha'ior
7-- file
>
Defines style
!n-pace parameters of these files such as NLuuidM will
2e replaced 2y the real 'alues 2y the jMaki during
runtime$
2!
'(ML (e!late of List Widget
:di' id=4NLuuidM4 class=4list7ontainer4@
:form onsu2mit=4jmaki$attri2utes$get5HNLuuidMH6$su2mitData56F return falseF4@
:input id=4NLuuidMIentryField4 type=4te(t4 siJe=4894 'alue=4"nter new Kalue4@
:input type=42utton4 onclick=4jmaki$attri2utes$get5HNLuuidMH6$su2mitData56F return falseF4 'alue=4)dd
to List4@
:?from@
:di' id=4NLuuidMIlist4 class=4listDi'4@:?di'@
:?di'@
3arameter that will 2e
replaced 2y real 'alue
2y jMaki during runtime
24
$ava%,ri!t 0ile of List Widget
function List56 L
'ar uuid = (idget)##idF
'ar ser'ice = (idget)*erviceF
function get+.%5url6 L
if 5window$+ML.ttp%e1uest6 L
return new +ML.ttp%e1uest56F
M else if 5window$)cti'e+B2ject6 L
return new )cti'e+B2ject54Microsoft$+ML.//346F
M
M
this$su2mitData = function56 L
'ar list = document$get"lementy!d5uuid O 4Ilist46F
'ar re1 = get+.%5ser'ice6F
re1$onreadystatechange = function56 L
if 5re1$ready-tate == D6 L
if 5re1$status == 8996 L
list$inner./ML = re1$response/e(tF
M
M
MF
re1$open543B-/4, ser'ice, true6F
'ar entryField = document$get"lementy!d5uuid O 4IentryField46F
re1$set%e1uest.eader547ontent-/ype4, 4application?(-www-form-urlencoded46F
re1$send54command=addPentry=4 O entryField$'alue O 4Puuid=4 O uuid6F
M
jMaki creates widget
*a'a-cript o2ject which
captures all the 'alues of
the parameters 2efore this
*a'a-cript code - List56
function - is in'oked$
25
1%% 0ile of List Widget
$plain L
color> 2lackF
height>8#F
font-siJe>EGp(F
font-weight> 2oldF
font-family> )rialF
2ackground> whiteF
M
$o'er L
color> whiteF
height>8#F
font-siJe>EGp(F
font-weight> 2oldF
font-family> )rialF
2ackground> 2lueF
cursor> pointerF
M
$listDi' L
position> relati'eF
width> D99p(F
height> C99p(F
o'erflow> autoF
M
$list7ontainer L
width> D99p(F
height> C#9p(F
M

'ow *oes jMaki Work?
'ow *oes jMaki Work?
27
'ow *oes jMaki Work
jMaki puts the right pieces together using *a'a to
render the initial page
>
./ML template, 7-- template, *a'a-cript file
!n the case of 2oth the *-F component and the *-3
tag the inputs are the same and the output should
2e the same
> Butput is ./ML page
/he ser'ice 2ehind the widget may differ if there is
one
Under the co'ers jMaki widgets are re-usa2le
parameteriJed *a'a-cript widgets
2'
'ow *oes jMaki Work
jMaki makes sure the proper parameters passed to
indi'idual widget code using a *a'a-cript 2ootrapper
that initialiJes the widgets in a page
!n the case of 2oth *-3 tags and *-F the inputs 5a
*a'a-cript?7--?/emplate ./ML file6 produce the
same resulting widget
jMakiHs design makes it 'ery easy to create widgets
and support upcoming *a'a-cript li2raries
/hese widgets are fully configura2le in a running
we2 application$

Using jMaki Widgets:
Using jMaki Widgets:
Using a 0ishEye Widget
Using a 0ishEye Widget
fro *ojo (oolkit
fro *ojo (oolkit
!+
0isheye 0ro *ojo (oolkit
/his is an e(ample jMaki widget which is 2uilt o'er
e(isting widget from a popular Crd-party framework -
Dojo toolkit
jMaki 'ersion of ./ML template, 7-- template, and
*a'a-cript file from the corresponding files of the
Fisheye widget of the Dojo toolkit are created
!1
0ishEye Widget
!2
0ishEye jMaki Widget
!!
0ishEye2s ,o!onent3ht
:di' class=4outer2ar4@
:di' dojo/ype=4FisheyeList4
itemWidth=4#94 item.eight=4#94
itemMa(Width=48994 itemMa(.eight=48994
orientation=4horiJontal4
effectUnits=484
item3adding=4E94
attach"dge=4top4
la2el"dge=42ottom4
ena2le7rappy-'g-upport=4false4
id=4NLuuidM4
@
:di' dojo/ype=4FisheyeList!tem4 on7lick=4loadIapp5E6F4
iconsrc=4images?iconI2rowser$png4 caption=4We2 rowser4@
:?di'@
:di' dojo/ype=4FisheyeList!tem4 on7lick=4loadIapp586F4
iconsrc=4images?iconIcalendar$png4 caption=47alendar4@
:?di'@
$$$
!4
0ishEye2s ,o!onent3,ss
$dojo.tmlFisheyeListar L
margin> 9 autoF
te(t-align> centerF
M
$outer2ar L
2ackground-color> QRRRF
te(t-align> centerF
position> relati'eF
left> 9p(F
top> 9p(F
width> E99;F
M
!5
0ishEye2s ,o!onent3js
dojo$re1uire54dojo$widget$FisheyeList46F
dojo$widget$createWidget5widget$uuid6F

jMaki A!!li,ation
jMaki A!!li,ation
!7
Exa!les of jMaki A!!li,ations
asic jMaki )pplication
Using a Crd-party li2rary
%esource resolution with jMaki
!'
.asi, jMaki %a!le A!!li,ation
/he most 2asic we2 application contains a single
jMaki widget declared in the inde($jsp page with the
name 4delicious4 which will display a set of
2ookmarks maintained 2y the Delicious we2site
/he inde($jsp file containing a tag li2rary defined as>
:a>aja( name=4delicious4?@
!9
A!!li,ation %tr-,t-re of the .asi,
jMaki %a!le A!!li,ation
HdeliciousH directory
contains component$js,
component$css, and
component$htm files
jmaki$js *a'a-cript file
should 2e located at the
top directory
jmaki$jar needs to 2e
placed in the ?W"-!NF?li2
directory
4+
A!!li,ation %tr-,t-re of the 4Using 5rd6
!arty Lib "*ojo#7 %a!le A!!li,ation
dojo$js and the src
directory which contains
the Dojo source needed 2y
the client
41
jMaki )-ntie
jMaki is written as a *-3 8$9?*-F E$E tag li2rary and
should run on earlier containers that support *-3 8$9
and?or *-F E$E specfications

jMaki &l-g6in for
jMaki &l-g6in for
Net.eans 8*E 939 /
Net.eans 8*E 939 /
:lass0ish
:lass0ish
4!
jMaki Widgets fro (he &l-g6in
44
*eo: .-ilding an
*eo: .-ilding an
A$A; A!! -sing
A$A; A!! -sing
jMaki Net.eans
jMaki Net.eans
&l-g6in
&l-g6in
45
*eo %,enario
Use 'arious jMaki widgets to 2uild a We2 application
through Neteans jMaki plug-in
>
https>??aja($de'$ja'a$net?screencast?jMakiDemo$html

jMaki Overview
jMaki Overview
Sang Shin Sang Shin
Java Technology Architect Java Technology Architect
Sun Microsystems, Inc. Sun Microsystems, Inc.
sang.shin@sun.com sang.shin@sun.com
www.javapassion.com www.javapassion.com