JAVA TECHNOLOGY BEHIND WEB 2.0

(1)

HK Ambassadors

Sun Microsystems Inc.

http://groups.google.com/group/java-campus-user-group-hk

JAVA TECHNOLOGY

BEHIND WEB 2.0

(2)

Agenda

• Introduction

• RIA Technologies

• Using AJAX for RIA

> jMaki

• Using JavaFX for RIA

(3)

Email @ Web 1.0

(4)

Email @ Web 2.0

(5)

Stock @ Web 1.0

(6)

Stock @ Web 2.0

(7)

What is Web 2.0?

(8)

What is Web 2.0?

http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html

• The Web as Platform

• Harnessing Collective Intelligence

• Data is the Next Intel Inside

• End of the Software Release Cycle

• Lightweight Programming Models

• Software Above the Level of a Single Device

• Rich User Experiences

(9)

The Web as Platform

They promote webtop They promote service

(10)

Harnessing Collective Intelligence

(11)

Data is the Next Intel Inside

(12)

End of the Software Release Cycle

An Artifact? Or, a Service?

• Operations become a core competency.

• Users are treated as co-developers.

(13)

Lightweight Programming Models

+ RESTful Web Service

• Support lightweight programming models that allow for loosely coupled systems, e.g. Mashups

• Think syndication, not coordination

• Design for "hackability" and remixability

(14)

Software Above the Level

of a Single Device

(15)

Rich User Experiences

(16)

Agenda

• Introduction

• RIA Technologies

• Using AJAX for RIA

> jMaki

• Using JavaFX for RIA

(17)

Poor Internet Application

(18)

Rich Internet Application

(19)

RIA Technologies

• No Plug-in

> AJAX

• Plug-in/Runtime Required

> Adobe Flex

> Microsoft Silverlight

> Sun JavaFX

• “Purely” native

> Lively Kernel (Still in Sun Labs)

(20)

RIA Technologies

• No Plug-in

> AJAX

• Plug-in/Runtime Required

> Adobe Flex

> Microsoft Silverlight

> Sun JavaFX

• “Purely” native

> Lively Kernel

(21)

Conventional Framework

HTML Markups

CSS

JavaScript

Browser

(22)

Ajax Framework

HTML Markups

JavaScript

CSS

XMLHttpRequest

Browser

(23)

Ajax

• Standards-based presentation using XHTML and CSS;

• Dynamic display and interaction using the Document Object Model;

• Data interchange and manipulation using XML and XSLT;

• Asynchronous data retrieval using XMLHttpRequest;

• And, JavaScript binding everything together.

(24)

RIA Technologies

• No Plug-in

> AJAX

• Plug-in/Runtime Required

> Adobe Flex

> Microsoft Silverlight

> Sun JavaFX

• “Purely” native

> Lively Kernel

(25)

Adobe Flex

Flash Runtime Environment

Browser .mxml

.as

+ .swf

(26)

Adobe MXML

(27)

Adobe ActionScript

(28)

Say Hello to Flex App

(29)

RIA Technologies

• No Plug-in

> AJAX

• Plug-in/Runtime Required

> Adobe Flex

> Microsoft Silverlight

> Sun JavaFX

• “Purely” native

> Lively Kernel

(30)

Microsoft Silverlight

Silverlight Runtime Environment

Browser +

.cs .js

.rb .py

.xaml

.xap

(31)

Microsoft XAML

(32)

Microsoft CSharp

(33)

Say Hello to Silverlight App

(34)

RIA Technologies

• No Plug-in

> AJAX

• Plug-in/Runtime Required

> Adobe Flex

> Microsoft Silverlight

> Sun JavaFX

• “Purely” native

> Lively Kernel

(35)

Sun JavaFX

JVM

Browser +

.fx

.jar

.java

(36)

JavaFX Script

(37)

Say Hello to JavaFX App

(38)

RIA Technologies

• No Plug-in

> AJAX

• Plug-in/Runtime Required

> Adobe Flex

> Microsoft Silverlight

> Sun JavaFX

• “Purely” native

> Lively Kernel

(39)

Lively Kernel

HTML Markups

CSS

JavaScript

Browser

(40)

Lively Kernel – JavaScript ONLY!

JavaScript

Browser

XMLHttpRequest

SVG Engine

(41)

Say Hello to Lively Kernel

(42)

Agenda

• Introduction

• RIA Technologies

• Using AJAX for RIA

> jMaki

• Using JavaFX for RIA

(43)

Why jMaki?

What is jMaki?

jMaki

Communication in jMaki

Architecture & Lifecycle

jMaki Demo

(44)

What is jMaki?

“ jMaki is a lightweight client/server framework for creating JavaScript centric Web 2.0 applications using CSS layouts, widgets widget model, client services such as publish/subscribe events to tie widgets together, JavaScript action handlers, and a generic proxy to interact with external RESTful web services. ”

-- https://ajax.dev.java.net/

(45)

What is jMaki? (cont)

“ While jMaki abstracts much of the JavaScript and CSS by providing defaults for widgets, the JavaScript widgets and CSS are made easily accessible so they may be customized by a designer or page developer. jMaki focuses on the aspects of delivering JavaScript to the client allowing the JavaScript to communicate to various server-technologies including PHP, Java (JSP/JSF), and Phobos in a server-technology neutral way. ”

-- https://ajax.dev.java.net/

(46)

Why jMaki?

What is jMaki?

jMaki

Communication in jMaki

Architecture & Lifecycle

jMaki Demo

(47)

Why jMaki?

• Aj ax i n a t ag

• Nor mal i ze JavaScr i pt t ool ki t API s

• Ser ver I nt egr at i on

• St andar di zes Dat a Model

• Ext er nal Ser vi ce I nt egr at i on

• Layout Templ at es

• Des i gner Fr i endl y

• Mul t i Ser ver Suppor t

(48)

Why jMaki?

• “Aj ax” i n a t ag

<a: wi dget name=" doj o. combobox"

value="[

{label : 'Alabama', value : 'AL'}, {label : 'California', value : 'CA'},

{label : 'New York', value : 'NY', selected : true}, {label : 'Texas', value : 'TX'}

]" />

(49)

Why jMaki? (cont)

• Layout Templ at es

(50)

Why jMaki?

• Ser ver I nt egr at i on

jMaki uses the server framworks to accelerate and enhance the JavaScript experience by providing a way for you to use PHP, Java, or JavaScript on the server and have the correct data accessible to your jMaki widgets. jMaki doesn't prescribe a specific

server data model but can be integrated well with

existing environments.

(51)

Why jMaki?

What is jMaki?

jMaki

Communication in jMaki

Architecture & Lifecycle

jMaki Demo

(52)

jMaki Architecture

https://ajax.dev.java.net/about.html

(53)

jMaki Life-cycle

https://ajax.dev.java.net/about.html

(54)

Why jMaki?

What is jMaki?

jMaki

Communication in jMaki

Architecture & Lifecycle

jMaki Demo

(55)

Communication in jMaki

Publ i s h and Subs cr i be Mechani s m

Component.js JavaScript

Topic

Publ

ish Subs

crib e

(56)

Communication in jMaki

j Maki wi dget i n “i ndex. j s p”

<a: wi dget name=" doj o. f i s heye"

val ue=" [

{ i conSr c: ur l 1, l abel : ' Java' , i ndex : 1} , { i conSr c: ur l 2, l abel : ' t es t 3' , i ndex : 2} , { i conSr c: ur l 3, l abel : ' t es t 4' , i ndex : 3}

] " / >

1. “iconSrc” attribute

2. "label" attribute

3. "index" attribute

(57)

Communication in jMaki

Publ i s h i n " Component . j s "

f or ( var i =0; i < dat a. l engt h; i ++) { var t = dat a[ i ] ;

var f i = { i conSr c : t . i conSr c } ;

var i con = dj d43. wi dget . cr eat eWi dget ( " Fi s heyeLi s t I t em" , f i ) ; i f ( t . i d) i con. t ar get I d = t . i d;

el s e i con. t ar get I d = genI d( ) ;

i f ( t . i ndex) {

i con. onCl i ck=

r et ur n f unct i on( ) { j maki . publ i s h( " / f i s heye" , t . i ndex) ; } ; }

f i s hEye. addChi l d( i con) ; }

Publish “t.index”

to the topic "/fisheye"

(58)

Communication in jMaki

Subs cr i be i n JavaScr i pt

<s cr i pt >

f unct i on f i s heyeLi s t ener ( i t em) {

var t ar get Di v = document . get El ement ByI d( " newpage" ) ; var r es pons eText = " " ;

s wi t ch( i t em) {

cas e 1: r es pons eText += ' 1' ; br eak;

cas e 2: r es pons eText += ' 2' ; br eak;

cas e 3: r es pons eText += ' 3' ; br eak;

def aul t : r es pons eText += ' 4' ; br eak;

}

t ar get Di v. i nner HTML = r es pons eText ; }

j maki . s ubs cr i be( " / f i s heye" , f i s heyeLi s t ener ) ; </ s cr i pt >

Subscribe the topic

"/fisheye" to the Listener

"fisheyeListener"

(59)

demo

(60)

• Download jMaki & IDE Plugins for Netbeans or Eclipse

• Join jMaki Java.net Project

• Participate on jMaki Forums

• Create something cool!

jMaki

What to Do

https://ajax.dev.java.net/

http://www.jmaki.com/

(61)

jMaki Resources

• jMaki Project Site: https://ajax.dev.java.net/

> “Getting Started Using the jMaki Framework to Create Ajax- Enabled JSP-based Web Applications”

> Download jMaki Plug-in for IDE

> Sample jMaki Application

> jMaki Community, Forum, FAQs

• jMaki official website: http://www.jmaki.com/

> jMaki official website sponsored by Sun Microsystems Inc.

• jMaki guys' blog:

> http://blogs.sun.com/arungupta/tags/jmaki

> http://weblogs.java.net/blog/carlavmott/

> http://weblogs.java.net/blog/gmurray71/

> http://weblogs.java.net/blog/ludo/

> http://weblogs.java.net/blog/ntruchsess/

(62)

Agenda

• Introduction

• RIA Technologies

• Using AJAX for RIA

> jMaki

• Using JavaFX for RIA

(63)

Why JavaFX?

What is JavaFX?

JavaFX

The 10 Minute Tutorial

JavaFX Demo!

JavaFX for RIA

(64)

What is JavaFX?

“ JavaFX Script is a highly productive scripting language that enables content developers to create rich media and content for deployment on Java environments. JavaFX Script is a declarative, statically-typed programming language. It has first- class functions, declarative syntax, list-comprehensions, and incremental dependency-based evaluation. It can make direct calls to Java APIs that are on the platform.”

-- https://openjfx.dev.java.net/

(65)

What is JavaFX?

• JavaFX is a new, free product for RIA, announced at 2007 JavaOne Conference in May

• A scripting language for creating graphical user interfaces quickly and easily

• Declarative

• Statically-typed

• Object-oriented programming

• First-class support for arrays/lists and a rich set of ‘list comprehensions’

• Incremental dependency-based evaluation

• Can directly call Java APIs

• Open-sourced - http://openjfx.dev.java.net

(66)

Why JavaFX?

What is JavaFX?

JavaFX

The 10 Minute Tutorial

JavaFX Demo!

JavaFX for RIA

(67)

Why JavaFX?

1. Writing GUIs is hard (and annoying)

> Yes, Matisse helps quite a bunch, but...

> There are still too many listeners.

2. GUIs written in Swing/AWT are ugly

> A hierarchy of rectangular “grey boxes” (not limited to Java!)

> Not as snazzy as Flash websites

(68)

Why JavaFX? - An Ugly PDF Viewer by Java

-- Christopher Oliver, Sun Microsystems, Inc. Java One 2007

(69)

Why JavaFX?

1.Writing GUIs is hard (and annoying)

> Yes, Matisse helps quite a bunch, but...

> There are still too many listeners.

2.GUIs written in Swing/AWT are ugly

> A hierarchy of rectangular “grey boxes” (not limited to Java!)

> Not as snazzy as Flash websites

3. Java 2D provides flashy GUI, but...

> It is rather difficult to use for this purpose

> It does not have “compositional” behavior

JavaFX's declarative syntax, combining Swing-like user-interface

widgets with compositional, Java 2D-like functionality makes writing

flashy graphical user interfaces easy!

(70)

Why JavaFX?

What is JavaFX?

JavaFX

The 10 Minute Tutorial

JavaFX Demo!

JavaFX for RIA

(71)

JavaFX: The 10 Minute Tutorial

class HelloWorldModel {

attribute saying: String;

}

var model = HelloWorldModel { saying: "Hello Campus"

};

var win = Frame {

title: bind "{model.saying} JavaFX"

width: 200

content: TextField {

value: bind model.saying }

visible: true

Class definition with single String attribute

Instance of the class called “model” which initializes string

Frame with a single text field. Frame's title and text field's value is bound to model's

attribute.

(72)

JavaFX: The 10 Minute Tutorial

import java.lang.StringIndexOutOfBoundsException;

operation substring(s:String, n:Number): String { try {

return s.substring(n);

} catch (e:StringIndexOutOfBoundsException) { throw “sorry, index out of bounds”;

} }

Defining

operations (i.e.

methods)

Calling Java methods

Can throw any object

you like

(73)

JavaFX: The 10 Minute Tutorial

var x = [1,2,3];

insert 10 into x;

insert 12 before x[1];

delete x[. == 12];

delete x[. >= 3];

insert 5 after x[. == 1];

insert 13 as first into x;

delete x;

Array Initialization yields [1, 2, 3, 10]

yields [1, 12, 2, 3, 10]

yields [1, 2, 3, 10]

yields [1, 2]

yields [1, 5, 2]

yields [13, 1, 5, 2]

yields []

function function_x(n) {

return select i from i in [1..n/2] where n % i == 0;

}

Database-like Queries

for Arrays!

(74)

JavaFX: The 10 Minute Tutorial

class X {

attribute nums: Number*;

attribute num: Number?;

}

trigger on new X {

insert [3,4] into this.nums;

}

trigger on insert val into X.nums {

System.out.println("just inserted {val} into X.nums at position {indexof val}");