software group © 2006 ibm corporation ajax 與 dojo 介紹

Software Group

© 2006 IBM Corporation

Ajax 與 Dojo 介紹

© 2006 IBM Corporation2

Agenda

背景介紹– 何謂 Web 2.0

– 何謂 Ajax

Ajax 與 Portal Server– WebSphere Portal Server 6.0/6.1

Software Group


何謂 Web 2.0

The bigger motivation for Easy to use interfaces


Web 2.0 主題

The Intelligent Web

Harnessing Collective

Intelligence

工具 : RSS, AJAX, PHP,

Ruby

End of the Software Release

Cycle

SW above a single device

Data is the“intel Inside”

標準 : REST, XHTML, CSS

科技 : Mash-up, wiki, tagging,

blogging

Rich user experiences

Light-weight programming

models

Web as a Platform

Software Group


何謂 Ajax


背景與歷史 Classic web interaction model (click, wait, refresh) has

fallen out of favor

User expectations for interactivity similar to desktop experience

Pressure from increasingly sophisticated set of rich web technologies

– Macromedia Flash, Java Web Start (Swing), Eclipse Rich Client Platform (SWT), Mozilla XUL, Microsoft DHTML/HTC

The Google factor!– GMail– Google Maps


何謂 Ajax?

Asynchronous JavaScript + XML– Jesse James Garrett, Adaptive Path

Supports a rich client interaction model that is intuitive, responsive, and timely.

– Comparable to desktop applications.

Continuous user interaction with event driven server processing and dynamic content refresh

– vs. interrupted interaction with request driven server processing followed by static page refresh.


何謂 AJAX?

AJAX: Asynchronous JavaScript And XML

XHTML + CSS + JavaScript + DOM + XMLHttpRequest

Formalization of technologies that have been around for years


傳統的 web 互動模式


Ajax web 互動模式


Ajax 如同一個 SOA Client !!!!

Let’s put the concerns where they belong.

Much more stateless middleware, more scalable and cluster-able.

Becareful not to get too fat on the client.

Know the difference between client state (small footprint, bookmark) and server state (work flow).

Browser

Server Application

Business Layer

Facade

Facade

Facade

WS-Router

Renderer

Renderer

Renderer

Widget

Widget

Widget

State Management (light weight state

management)

Portal Services

Session State in the Web Tier should be small, and not a datastore, maintaining a bookmark to where I am. (Example, multi-page wizard)

Event Handler

Event Handler

Event Handler

Service

Service Service

Software Group


AJAX Toolkit Framework


簡介

The AJAX Toolkit Framework (ATF)is an extensible framework for an Integrated

Development Environment (IDE).

提供 :

Tools to develop any DHTML/AJAX application

Tight integration with the existing Eclipse user interface and development paradigm

Plug-ins to facilitate use of various AJAX toolkits and/or class libraries

Includes draggable palette items

針對 AJAX 應用程式開發員與 Toolkit 開發員

相關資訊可參考 : http://www.eclipse.org/atf/


MozillaXULRunner & Javaconnect

AJAX Toolkit Framework 是 Eclipse Plugins

EECCLLIIPPSSEE

Eclipse WebTools



is a collection of Eclipse plugins

Legend: External


MozillaXULRunner & JavaConnect

Eclipse WebTools

Eclipse Plugins

AJAX Toolkit Framework 元件

JavaScript Syntax Validator

PersonalitiesDOM Inspector And JavaScript

Console

Java Script Debugger

Embedded Mozilla Browser

Personality Builder

Rico Personality

Zimbra Personality

AJAX “X” Personality

Rico Zimbra AJAX “X”

Personality Common Libraries

Rhino JSLint

Legend: External

Dojo Personality

Dojo


AJAX Toolkit Framework 元件

JavaScript Editor Batch and as-you-type syntax validation

JavaScript Debugger Tight integration with Eclipse debug UI to provide flow control in Mozilla and the

ability to examine JavaScript code and variables Embedded Mozilla Browser

Access to Mozilla XPCOM DOM Inspector / JavaScript Console

Mozilla tools integration for DHTML developers as Eclipse Views. Integrated Deployment

J2EE / JSP

Apache / PHP


Personality Builder

A set of Wizards which accept: Artifact data (AJAX toolkit libraries)

Build requirements data

New application templates

Code patterns

• These may also be added by AJAX Developers Deployment data

Wizards output a ‘basic’ Personality Plugin The builder will provide necessary basic development

features targeted for AJAX toolkits

Enables customization and addition of functionality


Dojo Toolkit

The Emerging Technology team in WebSphere brand and Lotus have decided Dojo is the toolkit that IBM will support.

They have evaluated its features :– Dojo has lots of interesting features but lacks enterprise capabilities like security,

NLS etc.

– IBM has successfully included 4 developers as contributors to the project

– IBM will be investigating its inclusion in future product releases from WebSphere and Lotus brands

– There will be an IBM Dojo Toolkit = Dojo + IBM Changes

– IBM Services teams should be recommending Dojo for Ajax development

http://www.dojotoolkit.org/


工具支援 – 從 Rational 7.0 開始 Rational are moving out of the JEE developer

tools business– This will be moving back into the WebSphere Brand

Rational Application Developer 7.0– New installation model, allowing installation on top of

existing Eclipse releases

– include the value you add tools beyond release

– XML editor, JSP/JSF Editor , Portal Tools etc.

– upwardly support the Web Tools Project (WTP)

– This will include the Ajax Toolkit Framework (ATF)

– This work was donated to the Eclipse Foundation

– They are looking to include the latest JWL

– They will surface Ajax behaviours for JSF property sheets through settings

– ie, Auto Complete for a input field JSF component will enable an Ajax behaviour


WebSphere Application Server

With App Server 6.1 development have enable the ability for Feature packs to be released

WebSphere Ajax Proxy feature pack for Web 2.0:– This will enable JEE services to be easily invoked by an Ajax client

– Session Beans, Web Services etc can be invoked and can return XML / JSON objects

– This will be packaged as an easy to install feature pack

– Other feature packs planned

– WS-* Standards

– Demos

– Plants for Websphere Ajax version

http://www.ibm.com/developerworks/websphere/techjournal/0802_haverlock/0802_haverlock.html

Software Group


Websphere Portal Server 6.0

An opportunity for Ajax


從主題外觀上開始改變


3

Slide out palette lets you add new portlets to that page

Simply grab a portlet on the page or from the slide out palette and drag to the desired location on the page

2

IMAGES AND SCREENSHOTS ARE SUBJECT TO CHANGE

New and Updated Themes & Skins. Roll over Menus1

4Quick Links – URL pages to other site areas


Portlet Context Menus

New function in v6 Replaces icons in portlet title bar and show

tools actions One new action to support new Edit Defaults

(doPlacement) mode


歡迎畫面 (core site)

Replaces today’s welcome page Anonymous version includes Login

portlet Mostly graphics and text Embedded links to other portal pages


V6 中各個頁面中


管理畫面

New Welcome page for Admin Updated “section” information page

look and feel Welcome page and Section pages

include active links


簡介 – Drag n Drop Palette to Page – Multiple Selections

Slide out palette on each page lets you add new portlets to that page


簡介 - DnD Re-arranging Portlets

Simply grab a portlet on the page or from the slide out palette and drag to the desired location on the page

1


Terminology - Palette

The palette portlet contains portlet names The palette allows portal users to drag and drop

commonly used portlets from the palette portlet. Minimized on right-hand side of page Enables rapid deployment of portlets to a page The palette portlet is easily customized


Drop Zone Possibilities A user must have edit permission to use DnD. Drop zones will not show up if you do not have the appropriate

permission. "Drop Zones" exist in the following conditions:

Column w/ portlets: above the top portlet between portlets below the last portlet

Column w/ no portlets at the top of the column

Row w/ portlets to the left of the first portlet between portlets to the right of the last portlet

Row w/ no portlets at the left of the row


WebSphere Portal 6.1 提升項目

Portal Management– Portal change management for portal administrators

Ajax/Web 2.0– Next-generation user interface built on client-side/ browser

exploitation

Robustness, Scalability and Performance– Leverage WAS 6.1 – Remote Portlet Container

Software Group


Programming Portal with Ajax


目的

整合 AJAX 到 Portal 應用程式

定義 Portal 規範上的考量與設計時的評估


M – V – C...

Model – View – Controller ....–Many possible controllers

Forces clean separation of model from controller–Especially in Portal environments

Portal code should deal with page level transitions only

Controllers may be able to share session information


你需要使用 AJAX 於 Portlet?

為何要–Enhance end user experience

–Improve performance

–Cleaner architecture

–CEBIL* is Very High!

為何不要–Yet another layer of complexity

–May need redundant code for accessibility or non-JS browsers

–Not always a good fit for the application

最低限度 ... 試試看 !– *CEBIL = Corporate Executive Buzzword Interest Level


架構一個 Portal / AJAX 方案

Requires a separate controller

Servlet bundled with Portlet WAR–Tight coupling with Portlets

–Allows shared session

Stand-alone Servlet WAR–Loose binding based on URL

–Allows model reuse in other applications

Web Service

Other...


建置 AJAX 於一個 Portlet

Create and Define the AJAX Servlet–Optionally may share reference to portlet session

Define a JS reference variable to the Servlet

Load external JavaScript files

Implement AJAX framework–XMLHttpRequest object variable–Event trigger–Event handler–Call-back function


Portal 規格的考量

Global JS variables

Using ID attributes

Abusing ID attributes!

State Maintenance

Sharing session data

Action URLs

Activity Notification


建議 (Recommendations)

KISS – Keep It Simple and Safe–Start slowly–Don't rely on new skills for critical tasks

Enhance an existing application

Maintain standard MVC design–Keep the “M” and “C” on the server–Extend the “V” to Server and Client!–Don't put too much controller logic in JavaScript

Have FUN–People get excited about making the browser dance–This is cool stuff!


參考資料

Toolkits–Dojo http://dojotoolkit.org/

–Rico http://openrico.org/

–DWR http://getahead.ltd.uk/dwr/

–script.aculo.us http://script.aculo.us/

–Behaviour http://www.ripcord.co.nz/behaviour/

–Zimbra http://www.zimbra.com/

AJAX Toolkit Framework– http://www.alphaworks.ibm.com/tech/ajaxtk

– http://www.eclipse.org/atf/


參考資料

AJAX Design Patterns–AJAX Patterns http://ajaxpatterns.org/

Examples and Tutorials–http://www.clearnova.com/ajax/index.html

–http://www.yourhtmlsource.com/javascript/ajax.html

–http://en.wikibooks.org/wiki/Programming:AJAX

Books–AJAX in Action, Manning

–Dynamic HTML, The Definitive Guide, O'Reilly

–JavaScript, The Definitive Guide, O'Reilly


總結

Portal and WebSphere are already enabled for Ajax– Improvements coming in Feature Packs to fully enable Ajax in the

programming models

The Patterns Toolkit of DPTK(Design Pattern Tool Kit) and JET2(Java Emitter Templates ) will enable faster development and deployment of Ajax based solutions

IBM is working to create a clear message on the usage of Ajax and Composite Application and where the two programming worlds meet

Software Group


Summary


Questions ?

software group © 2006 ibm corporation ajax 與 dojo 介紹

Documents