AJAX Frameworks

quaggafoulInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 4 χρόνια και 18 μέρες)

261 εμφανίσεις

1
Web 2.0 Frameworks
Web 2.0 Frameworks
and Toolkits
and Toolkits
Sang Shin
Sang Shin
Sun Microsystems, Inc.
Sun Microsystems, Inc.
sang.shin@sun.com
sang.shin@sun.com
www.javapassion.com
www.javapassion.com
1
2
Types of Web 2.0 Toolkit and
Framework Solutions of Today

Clients-side JavaScript
Libraries (ex: Dojo toolkit and more)

RMI-like remoting via proxy (ex: DWR)

Integrator (ex: jMaki)

Java to JavaScript/HTML translator (ex: GWT)

AJAX-enabled JSF components (ex: NetBeans VWP)

Dynamic Faces (DynaFaces)

Portlets and Ajax (ex: JSR 168 portlets)

Web Application Frameworks with AJAX extension (ex:
Echo2 or Wicket)


Client Side
Client Side
JavaScript Libraries
JavaScript Libraries
(Examples: Dojo Toolkit,
(Examples: Dojo Toolkit,
Ext JS)
Ext JS)
4
Client Side JavaScript Libraries
JavaScript,
DOM Utilities
HTMP, JSP Pages, JavaScript Event Handlers
UI Widgets &
Components
Remoting Abstraction Layer
XMLHttpRequest
iFrame
5
Characteristics of Client Side
JavaScript Libraries

Server side technology agnostic
>
The server side technology can be Java EE, .Net, PHP, Ruby
on Rails, etc.

You can use them in combination in a single app
>
You might want to use widgets and JavaScript utilities from
multiple sources
6
Technical Reasons for using Client-
side JavaScript Libraries

Handles remote asynch. communication (remoting)
>
Hides low-level
XMLHttpRequest
operation

Handles browser incompatibilities
>
No need to clutter your code with if/else's

Handles graceful degradation
>
Uses
IFrame
if the browser does not support
XMLHttpRequest

Provides page navigation hooks over Ajax
>
Back and forward buttons
>
Bookmarking
7
Technical Reasons for using Client-
side JavaScript Libraries

Provides ready-to-use widgets
>
Tree, Calendar, Textfield, Button, Split panes, Fisheye, etc.

Provides easy-to-use DOM utility
>
Easier to use than original DOM APIs

Provides useful JavaScript utilities
>
Example: Table management, Timer, etc

Provides error handling hook
>
Easier to add error handler

Provides more flexible event handling
>
DOM node based, Function call based, AOP style
8
Technical Reasons for using Client-
side JavaScript Libraries

Provides advanced UI features
>
Animation
>
Drag and drop
>
Fade out and Fade in

Generally encourages OO programming style
>
Helps you write better JavaScript code
9
Business Reasons for using Client-
side JavaScript Libraries

Proven in the market
>
Generally higher quality than your own

Established developer/user communities
>
Community keeps improving/adding features
>
Easy to get help from community forums

Easy to use
>
It is just a matter of having them in the root directory of your
Web application or providing URL location

Tool support
>
IDE's will support them in time
10
Client-side JavaScript Libraries

DOJO Toolkit
>
Most prominent and comprehensive
>
Gaining a leadership in this space
>
Major industry support (Sun, IBM)
>
http://dojotoolkit.com/

Prototype
>
Used by other toolkit libaries
>
http://prototype.conio.net/

Ext JS
>
Gaining popularity
>
http://extjs.com/
11
Client-side JavaScript Libraries

Script.aculo.us
>
Built on Prototype
>
Nice set of visual effects and controls
>
http://script.aculo.us/

Rico
>
Built on Prototype
>
Rich AJAX components and effects
>
http://openrico.org/

DHTML Goodies
>
Various DHTML and AJAX scripts
>
http://www.dhtmlgoodies.com/
12
Demo: Running Various
Demo: Running Various
Client Side JavaScript Toolkit
Client Side JavaScript Toolkit
Demos
Demos
http://www.javapassion.com/han
http://www.javapassion.com/han
dsonlabs/ajaxframeworks/
dsonlabs/ajaxframeworks/


Dojo Toolkit
Dojo Toolkit
14
Dojo toolkit is
made of a set
of layered
libraries
15
dojo.io.bind()
var sampleFormNode = document.getElementById("formToSubmit");
dojo.io.bind({

url: "http://foo.bar.com/sampleData.js",

load: function(type, evaldObj){

// hide the form when we hear back that it submitted successfully

sampleFormNode.style.display = "none";

},

backButton: function(){

// ...and then when the user hits "back", re-show the form

sampleFormNode.style.display = "";

},

formNode: sampleFormNode
});
source: dojotoolkit.org
16
dojo.event.connect()
window.onload = function () {

var link = document.getElementById("mylink");

// “myHandler” event handler is registered for the

// "onclick" event of “mylink” node.

dojo.event.connect(link, "onclick", myHandler);
}
// Define an event handler named as “myHandler”
function myHandler(evt) {

alert("myHandler: invoked - this is my named event handler");
}
</script>
<a href="#" id="mylink">Click Me</a>
17
Demo: Building and Running
Demo: Building and Running
Dojo Toolkit Applications
Dojo Toolkit Applications
http://www.javapassion.com/han
http://www.javapassion.com/han
dsonlabs/4260_ajaxdojointro.zip
dsonlabs/4260_ajaxdojointro.zip
18
Dojo Demo Scenario

Build and run “input validation” Ajax application
using Dojo toolkit's
dojo.io.bind()
>
Forward, backward capabilities

Build and run “Fisheye application” using
dojo.event.connect()
>
Event model


RMI-like Remoting
RMI-like Remoting
via Proxy
via Proxy
(Example: DWR)
(Example: DWR)
20
RMI-like Remoting via Proxy
HTTP Get/Post
JavaScript RMI like call
Java Method
Proxy
Skeleton
Framework
runtime
Remote
Abstraction Layer
XMLHttpRequest
iFrame
21
Why DWR?

What happens if you have several methods in a
class on the server that you want to invoke from
the browser?
>
Each of these methods need to be addressable via URI
whether you are using
XMLHttpRequest
directory or client-
side only toolkit such as Dojo or Prototype
>
You would have to map parameters and return values to
HTML input form parameters and responses yourself

DWR provides a client/server framework that
addresses these problems

DWR comes with some JavaScript utility functions
22
How DWR Works
23
DWR Consists of Two Main Parts

A DWR-runtime-provided Java Servlet running on
the server that processes incoming DWR requests
and sends responses back to the browser
>
uk.ltd.getahead.dwr.DWRServlet
>
This servlet delegates the call to the backend class you
specify in the
dwr.xml
configuration file

JavaScript running in the browser that sends
requests and can dynamically update the webpage
>
DWR framework handles
XMLHttpRequest
handling
source: http://getahead.ltd.uk/dwr
24
How Does DWR Work?

DWR generates a matching client-side Javascript
class from a backend Java class
>
Allows you then to write JavaScript code that looks like
conventional RPC/RMI like code, which is much more intuitive
than writing raw JavaScript code

The generated JavaScript class handles remoting
details between the browser and the backend server
>
Handles asynchronous communication via
XMLHttpRequest
-
Invokes the callback function in the JavaScript
>
You provide the callback function as additional parameter
>
DWR converts all the parameters and return values between
client side Javascript and backend Java
25
Demo: Building and running
Demo: Building and running
DWR Application
DWR Application
http://www.javapassion.com/han
http://www.javapassion.com/han
dsonlabs/4265_ajaxdwrintro.zip
dsonlabs/4265_ajaxdwrintro.zip
26
DWR Demo Scenario

Build and run Chat application
>
Test with 2 browser clients

Show test feature of DWR
>
http://localhost:8084/dwr.examples.chat/
dwr

Show Java class and its methods that are exposed
>
Chat has two methods –
getMessages()
and
addMessage()

Show

dwr.xml
configuration file
>
Specifies Chat class for remoting

Show client-side JavaScript code
>
RMI-like syntax (application-level)
>
Asynchronous callback




Integration Technology:
Integration Technology:
jMaki
jMaki
28
Motivations for jMaki

You want to leverage widgets from existing and
future AJAX toolkits and frameworks in reusable
fashion
>
Dojo, Scriptaculus, Google Widgets, Yahoo UI Widgets,
DHTML Goodies, Many more

However, these widgets use different syntax and
different data model
>
There is a need for a common programming model and
common data model for using widgets from multiple AJAX
toolkits and frameworks
29
Origins of jMaki?


j’ is for JavaScript

technology

Maki == to wrap in Japanese

Started as a way of wrapping JavaScript technology
functionality
>
Take widgets from many popular AJAX toolkits and
frameworks, and wrap them into a JSP or JSF tag

Project jMaki has evolved to provide more
30
jMaki Features

Widgets from popular toolkits
>
Dojo, Yahoo,
Script.aculo.us, Spry, Google
>
Self-contained standards-based Component Library

Make JavaScript technology accessible to Java technology,
Phobos, PHP and Ruby

Publish and subscribe event model

XmlHttpProxy
>
Allows access to services not in the web app domain

Integrated Tools support
>
NetBeans and Eclipse plug-in's

Future Protection
>
Unified data model for widgets from different toolkits
31
Benefits of using jMaki
32
Demo: Building and running
Demo: Building and running
jMaki Application
jMaki Application
http://www.javapassion.com/handson
http://www.javapassion.com/handson
labs/4270_ajaxjmakiintro.zip
labs/4270_ajaxjmakiintro.zip
http://www.javapassion.com/handson
http://www.javapassion.com/handson
labs/4271_ajaxjmakimashup.zip
labs/4271_ajaxjmakimashup.zip
33
jMaki Demo Scenario

Build a simple jMaki application using widgets from
various sources
>
Using simpler syntax and consistent data model

Build a Mashup application using jMaki widgets
>
Leveraging publish/subscribe event model

Build a RSS feed application using jMaki widgets
>
Leveraging
XmlHttpProxy




Java Code To
Java Code To
JavaScript/HTML
JavaScript/HTML
Translator: GWT
Translator: GWT
35
What is GWT?

Java software development framework that makes
writing AJAX applications easy

Let you
develop and debug AJAX applications in the
Java language
using the Java development tools of
your choice
>
NetBeans or Eclipse

Provides
Java-to-JavaScript compiler
and a special
web browser that helps you debug your GWT
applications
>
When you deploy your application to production, the compiler
translates your Java application to browser-compliant
JavaScript and HTML
36
Two Modes of Running GWT App

Hosted mode
>
Your application is run as Java bytecode within the Java
Virtual Machine (JVM)
>
You will typically spend most of your development time in
hosted mode because running in the JVM means you can
take advantage of Java's debugging facilities

Web mode
>
Your application is run as pure JavaScript and HTML,
compiled from your original Java source code with the GWT
Java-to-JavaScript compiler
>
When you deploy your GWT applications to production, you
deploy this JavaScript and HTML to your web servers, so end
users will only see the web mode version of your application
37
Why Use Java Programming
Language for AJAX Development?

Static type checking in the Java language boosts
productivity while reducing errors.

Common JavaScript errors (typos, type mismatches) are
easily caught at compile time rather than by users at
runtime.

Code prompting/completion (through IDE) is useful and
widely available

Automated Java refactoring is pretty snazzy these days.

Java-based OO designs are easier to communicate and
understand, thus making your AJAX code base more
comprehensible with less documentation.
38
Why GWT?

No need to learn/use JavaScript language
>
Leverage Java programming knowledge you already have

No need to handle browser incompatibilities and quirks
>
GWT handles them for you
>
Forward/backward buttons
>
Browser history

No need to learn/use DOM APIs
>
Use Java APIs

No need to build commonly used Widgets
>
Widgets come with GWT
39
Why GWT?

Leverage various tools of Java programming language
for writing/debugging/testing
>
For example, NetBeans or Eclipse

JUnit integration
>
GWT's direct integration with JUnit lets you unit test both in a
debugger and in a browser and you can even unit test
asynchronous RPCs

Internationalization
>
GWT internationalization support provides a variety of
techniques to internationalize strings, typed values, and
classes
40
Demo: Building and running
Demo: Building and running
GWT Applications
GWT Applications
http://www.javapassion.com/han
http://www.javapassion.com/han
dsonlabs/4275_ajaxgwtintro.zip
dsonlabs/4275_ajaxgwtintro.zip
41
Demo: GWTHello

Build and run
GWTHello
sample application from
GWT hands-on lab in
>
Hosted mode (Debug project)
>
Web mode

Make a break point in Hosted mode
42
GWT Demo Scenario

Build and run a simple HelloWorld GWT application
>
Write the code in Java programming language
>
Run it in both hosted and web mode

Open “KitchenSink” NetBeans GWT project and run
>
Play around various widgets provided by the GWT
>
Backward and forward button behavior

Show how to invoke JavaScript code from Java
code and vice versa

Show how to associate a CSS style items to a GWT
widget




AJAX-Enabled
AJAX-Enabled
JSF Components
JSF Components
44
AJAX-enabled JSF Components

AJAX-enabled JSF components hides all the
complexity of AJAX programming
>
Page author does not need to know JavaScript
>
The burden is shifted to component developers

Leverages drag-and-drop Web application
development model of JSF through an IDE
>
You can drag and drop AJAX-enabled JSF components within
NetBeans Visual Web Pack (and other JSF-aware IDE's) to
build AJAX applications

JSF components are reusable
>
More AJAX-enabled JSF components are being built by the
community
45
Open-Source Implementations

Woodstock AJAX-enabled JSF components (open-
source)
>
https://woodstock.dev.java.net/index.html

ICEfaces
>
http://www.icefaces.org/main/home/index.jsp

ajax4jsf
>
Can add AJAX capability to existing applications
>
https://ajax4jsf.dev.java.net/




Dynamic Faces
Dynamic Faces
(DynaFaces)
(DynaFaces)
DynaFaces
— Usage Patterns

Page Author
>
Use AJAX enabled components
>
Use
AjaxZone
tag to AJAXify regions of the
page
>
Use provided JavaScript library to AJAXify
page elements and components

Component Author
>
Use provided JavaScript library in custom
components
>
Write your own JavaScript that talks directly to
the HTTP protocol and the XML application
defined by DynaFaces
Increas
ing Complexity
I
nc
reasing
Comple
xity
Views and Partial Views
Views and Partial Views
DynaFaces Usage Patterns: AjaxZones

The easiest way to AJAXify
an existing application

Demarcate one or more
AJAX zones within a page

Zones will refresh via
AJAX, without full page
refresh.
1. Click something in here
2. See update here
Action in one
zone
causes reaction in
another zone
51
Demo: Building and running
Demo: Building and running
DynaFaces Application
DynaFaces Application
http://www.javapassion.com/han
http://www.javapassion.com/han
dsonlabs/4144_jsfdynafaces.zip
dsonlabs/4144_jsfdynafaces.zip




Building Portlets with
Building Portlets with
Ajax Behavior
Ajax Behavior
53
Issues with Current Portlet
Architecture

No easy way to make asynchronous call
>
same as regular Web application

The response contains markup for the
whole page not just for the target portlet

Will be addressed in JSR 286
54
Demo: Building and running
Demo: Building and running
Porlet Application with Ajax
Porlet Application with Ajax
behavior
behavior
http://www.javapassion.com/han
http://www.javapassion.com/han
dsonlabs/4294_ajaxportlet.zip
dsonlabs/4294_ajaxportlet.zip
55
Portlets with Ajax Demo Scenario

Build Portlet that has Ajax behavior

Show two different windows of the same
portlet perform Ajax operations
independently from each other




Web Application
Web Application
Frameworks
Frameworks
with AJAX Extension
with AJAX Extension
57
Web Application Framework with
Ajax Extension

Existing Web Application Frameworks add AJAX
functionality
>
Minimum or no requirement of JavaScript coding

Uses JavaScript client library internally
58

Web App Frameworks with AJAX
Extension” Implementations

Shale
>
http://struts.apache.org/struts-shale/

Echo2
>
http://www.nextapp.com/platform/echo2/echo/

Wicket
>
http://wicket.sourceforge.net/

Ruby on Rails
>
http://www.rubyonrails.org/
59
Demo: Building and running
Demo: Building and running
Ajax enabled Echo2
Ajax enabled Echo2
Application
Application
http://www.javapassion.com/han
http://www.javapassion.com/han
dsonlabs/4282_ajaxecho2.zip
dsonlabs/4282_ajaxecho2.zip




So... What Should I Use?
So... What Should I Use?
61
So What Should I Use?
Assuming You are using Java Tech.

On the UI side
>
Use AJAX-enabled JSF components whenever possible using
an JSF-enabled IDE such as Visual Web Pack of NetBeans
>
If you are not ready to commit yourself to JSF component
solutions yet, use jMaki
>
If you want to have total control on the client side JavaScript
coding, use Dojo toolkit
>
If you already have Swing apps that you want to expose as
AJAX-fied Web apps or if you do not want to deal with
JavaScript coding, use GWT
62
So What Should I Use?
Assuming You are using Java Tech.

On the business logic side
>
If you already have Java EE business logic that you want to be
exposed as RMI calls on the client with AJAX behavior, use
DWR
>
If you are already using a particular Web application framework
for building majority of your web application and the framework
has AJAX extension, use it
63
So What Should I Use?
If you want use Scripting Language
as a Main enabler

Use Ruby on Rails or Phobos or Grails
>
Leverage agile development of scripting
>
Leverage the power of Java platform
>
MVC based
>
Multiple scripting languages
64
Ajax Frameworks
Ajax Frameworks
and Toolkits
and Toolkits
Sang Shin
Sang Shin
Java Technology Evangelist
Java Technology Evangelist
Sun Microsystems, Inc.
Sun Microsystems, Inc.
64