Software Group © 2006 IBM Corporation Ajax 與 Dojo 介紹.
-
Upload
karin-miles -
Category
Documents
-
view
240 -
download
4
Transcript of 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
© 2006 IBM Corporation
何謂 Web 2.0
The bigger motivation for Easy to use interfaces
© 2006 IBM Corporation5
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
© 2006 IBM Corporation
何謂 Ajax
© 2006 IBM Corporation8
背景與歷史 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
© 2006 IBM Corporation9
何謂 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.
© 2006 IBM Corporation10
何謂 AJAX?
AJAX: Asynchronous JavaScript And XML
XHTML + CSS + JavaScript + DOM + XMLHttpRequest
Formalization of technologies that have been around for years
© 2006 IBM Corporation11
傳統的 web 互動模式
© 2006 IBM Corporation12
Ajax web 互動模式
© 2006 IBM Corporation13
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
© 2006 IBM Corporation
AJAX Toolkit Framework
© 2006 IBM Corporation15
簡介
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/
© 2006 IBM Corporation16
MozillaXULRunner & Javaconnect
AJAX Toolkit Framework 是 Eclipse Plugins
EECCLLIIPPSSEE
Eclipse WebTools
AJAX Toolkit Framework
AJAX Toolkit Framework
is a collection of Eclipse plugins
Legend: External
© 2006 IBM Corporation17
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
© 2006 IBM Corporation18
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
© 2006 IBM Corporation19
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
© 2006 IBM Corporation21
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/
© 2006 IBM Corporation22
工具支援 – 從 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
© 2006 IBM Corporation23
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
© 2006 IBM Corporation
Websphere Portal Server 6.0
An opportunity for Ajax
© 2006 IBM Corporation25
從主題外觀上開始改變
© 2006 IBM Corporation26
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
© 2006 IBM Corporation27
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
© 2006 IBM Corporation28
歡迎畫面 (core site)
Replaces today’s welcome page Anonymous version includes Login
portlet Mostly graphics and text Embedded links to other portal pages
© 2006 IBM Corporation29
V6 中各個頁面中
© 2006 IBM Corporation30
V6 中各個頁面中
© 2006 IBM Corporation31
管理畫面
New Welcome page for Admin Updated “section” information page
look and feel Welcome page and Section pages
include active links
© 2006 IBM Corporation32
簡介 – Drag n Drop Palette to Page – Multiple Selections
Slide out palette on each page lets you add new portlets to that page
© 2006 IBM Corporation33
簡介 - 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
© 2006 IBM Corporation34
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
© 2006 IBM Corporation35
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
© 2006 IBM Corporation36
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
© 2006 IBM Corporation
Programming Portal with Ajax
© 2006 IBM Corporation38
目的
整合 AJAX 到 Portal 應用程式
定義 Portal 規範上的考量與設計時的評估
© 2006 IBM Corporation39
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
© 2006 IBM Corporation40
你需要使用 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
© 2006 IBM Corporation41
架構一個 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...
© 2006 IBM Corporation42
建置 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
© 2006 IBM Corporation49
Portal 規格的考量
Global JS variables
Using ID attributes
Abusing ID attributes!
State Maintenance
Sharing session data
Action URLs
Activity Notification
© 2006 IBM Corporation50
建議 (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!
© 2006 IBM Corporation51
參考資料
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/
© 2006 IBM Corporation52
參考資料
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
© 2006 IBM Corporation53
總結
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
© 2006 IBM Corporation
Summary
© 2006 IBM Corporation55
Questions ?