you can get it here

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

5 Φεβ 2013 (πριν από 4 χρόνια και 4 μήνες)

245 εμφανίσεις

1

Class Five

Web 2.0 Frameworks

and Toolkits

Pri
nter

version

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)

3

Client Side JavaScript Libraries

4

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

5

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

6

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

7

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

8

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

9

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 libraries


http://prototype.conio.net/


Ext JS


Gaining popularity


http://extjs.com/

10

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/

11

Dojo toolkit is made of a set of
layered libraries


12

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

});


13

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>

14

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

15

RMI
-
like Remoting via Proxy

HTTP Get/Post

16

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

17

How DWR Works


18

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

19

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

20

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

21

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

22

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

23

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

24

Benefits of using jMaki

Project jMaki


Web 2.0 Apps Your Way

25

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

26

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

27

Two Modes of Running

a GWT Application


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

28

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.

29

Some Reasons For 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

30

Some Reasons For 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

31

Demo: GWTHello


Build and run the GWTHello sample application from
the lab


In Hosted mode (Debug project)


In Web mode


Make a break point in Hosted mode

32

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

33

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

34

Open
-
Source Implementations


Woodstock AJAX
-
enabled JSF components (opensource)


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/

35

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

Increasing Complexity

Increasing Complexity

36

Views and Partial Views

37

Views and Partial Views

38

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.

Action in one zone



causes reaction in another
zone


Click something in Zone 2


Interaction type: input

Event type: onclick

Event hook: extractParams

Action:

#{carstore.updatePricing}

See update in Zone 1

39

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

40

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

41

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

42

“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/

43

So What Should I Use?

Assuming You are Using

Java Technology


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

44

So What Should I Use?

Assuming You are Using

Java Technology


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

45

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

46

Class Five

Introduction to the

Dojo Toolkit

Printer version

47

What is the Dojo Toolkit?


Open Source DHTML toolkit written in JavaScript


It is a set of JavaScript libraries


Aims to solve some long
-
standing historical problems
with DHTML


Browser incompatibility


Allows you to easily build dynamic capabilities into
web pages


Widgets


Animations


Server technology agnostic

48

Why We Use the Dojo Toolkit


You can use Dojo to make your web applications
more useable, responsive, and functional


Supports AJAX


Dojo provides lots of plumbing facilities


Hides XMLHttpRequest processing


Handles browser incompatibilities


Strong developer community

49

Features of Dojo Toolkit


Powerful AJAX
-
based I/O abstraction (remoting)


Graceful degradation


Backward, forward, bookmarking support


Aspect
-
oriented event system


Markup
-
based UI construction through widgets


Widget prototyping


Animation


Lots of useful libraries

50

Dojo Toolkit Libraries

51

The Dojo Toolkit Has Three
Main Parts


Dojo


Browser normalization, package loading, DOM access and
manipulation, Firebug Lite debugging, events, data access, Drag and
drop, Asynchronous remote calls, JSON encoding/decoding


dijit


Interface widgets, Advanced UI controls, Template driven


dojoX


Inventive innovative: graphics, offline, widgets like grid spreadsheet

52

Two Options For Loading the
Dojo Toolkit


Load it from the network


Load it from locally installed version

53

(Option 1) Load it from
network


Download nothing and simply pull Dojo from the
network


AOL

<script type="text/javascript“

src="http://o.aolcdn.com/dojo/1.2.0/dojo/dojo.xd.js">

</script>


Google

<script type="text/javascript"

src=”http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojo/

dojo.xd.js">

</script>


The script element is responsible for loading the base
Dojo script

54

(Option 2) Load it from locally
installed version


Download from
http://dojotoolkit.org/downloads

<script type="text/javascript“

djConfig="parseOnLoad: true“

src="js/dojo/dojo.js" >

</script>


The script element is responsible for loading the base
Dojo script


The package system handles the loading of all other
dependencies and modules once dojo.js has been
loaded into the page

55

Setting Up Dojo JavaScript

In The Page

<head>

<style type="text/css">

@import "js/dojo/resources/dojo.css";

/* Load the dojo style sheet */

</style>

<script type="text/javascript“

src="js/dojo/dojo.js“

djConfig="parseOnLoad: true“

isDebug: true>

/* Use Firebug Lite for debugging */

</script>

</head>

56

within a browser,

there is an AJAX engine

Traditional AJAX

Web

57

Performing XMLHttpRequest
(XHR)


dojo.xhrGet()


dojo.xhrPost()


dojo.xhrDelete()


dojo.xhrPut()

58

dojo.xhrGet()


The dojo.io.* namespace contains generic APIs for
doing network I/O


dojo.xhrXXX() hides low
-
level XMLHttpRequest operations


Also handles


back
-
button interception


transparent form submission


advanced error handling

59

Getting Data from the Server

<script type="text/javascript">

dojo.xhrGet({

url: 'sayHello',

load: helloCallback,

error: helloError,

content: {name: dojo.byId('name').value }

});

</script>

60

Connecting an Event to the
Widget

<head>

<script type="text/javascript">

dojo.require("dijit.form.Button");

</script>

</head>

<body class="tundra">

<form>

Name: <input name="Name" id="name" type="text" />

<button dojoType="dijit.form.Button" id="helloButton">

Hello World!

<script type="dojo/method" event="onClick">

makeAjaxCall();

</script>

</button>

</form>

</body>


61

Getting Data from the Server

<head>

<script type="text/javascript">

function makeAjaxCall(){

dojo.xhrGet({


url: 'sayHello.jsp',


load: helloCallback,


error: helloError,


content: {name: dojo.byId('name').value }


});

}

function helloCallback(data,ioArgs) {

dojo.byId("returnMsg").innerHTML = data;

}

</script>

</head>

<body>

Name: <input name="Name" id="name" type="text" />

<button dojoType="dijit.form.Button"

<script type="dojo/method" event="onClick">

makeAjaxCall();

...

<p id=returnMsg></p>

62

The sayHello JSP

<%

String returnString = request.getParameter("name");

if (returnString == null || returnString.isEmpty()) {

// Return error message

returnString = "Name is required.";

out.print("Error: " + returnString);

} else {

// Return the name

out.print("Hello: " + returnString);

}

%>

63

dojo.xhrPost a Form

<head>

<script type="text/javascript">

function makeAjaxCall(){

dojo.xhrPost({


url: 'sayHello',


load: helloCallback,


error: helloError,


form: 'myForm‘


});

}

function helloCallback(data,ioArgs) {

dojo.byId("returnMsg").innerHTML = data;

}

</script>

</head>

<body>

<form id="myForm" method="POST">

Name: <input type="text" name="name">

</form>

<button dojoType="dijit.form.Button"

<script type="dojo/method" event="onClick">

makeAjaxCall();

<p id=returnMsg></p>

</body>