Portlets2008 Ajax Portlets

Implementing AJAX Portlets

Presented By: Jason Shao

CAMPUSEAI CONSORTIUM

Passing Data

Toolkits

Portlet Particulars

Techniques

Agenda

Approach – Measure Performance Cracking the Server-Browser Barrier (passing data)

XHR

Hidden iFrame/Forever Frame

Flash

COMET

Passing Data - Transports Transports

XML

HTML

JSON

Passing Data –Formats Data Formats

Pros

Well understood, lots of tooling support

Easy to parse

Cons

Slow/resource intensive in the browser

Verbose wire format

Passing Data - Formats Data Formats: XML

Pros

Extremely well understood

High performance substituting HTML blocks

Cons

Difficult to parse/manipulate

Tightly couples presentation and data

Passing Data - Formats Data Formats: HTML

Pros

High performance in browser

Expressive data structures

Cons

Not as well defined/supported as XML

Passing Data - Formats Data Formats: JSON

Servlets

Remoting Toolkits (e.g. DWR)

JSP

.Net

PHP

Passing Data - Generating Generating Data

Hooked into existing applications

RoR favors this approach

Leverages existing application infrastructure

Passing Data - Generating Views

SOA-style detached services

Very flexible – loosly coupled

Higher Maintenance

Higher Complexity

Passing Data - Generating Services

Approach – Measure Performance Tools

Dojo

jQuery

Prototype/Scriptaculous

GWT

OpenLazlo

AJAX Toolkits AJAX Toolkits

Lightweight

Feels like Javascript

Powerful selector language

jQuery("p.surprise").addClass("ohmy").show("slow”)

AJAX Toolkits jQuery is my personal favorite

JSF (ADF in particular)

DWR

Simple-JSON view types

AJAX Toolkits AJAX Server Toolkits

Approach – Measure Performance What’s special about Portlets?

Don’t control page drawing/refreshing

Action/Render Cycle

Multiple Portlets on a Page

Portlet Particulars Portlets are Special

No Access to <HEAD> data

CSS

Scripts (implications)

JS Event Handlers

Markup Fragments

Uncertain location inside HTML page

Portlet Particulars Page Drawing

Page Refreshes Triggered Many Ways

User navigation (e.g. visiting another page)

User interacts with your portlet

User interacts with another portlet

User session times out

Portlet Particulars Page Drawing (cont.)

Page can be redrawn any time

Client side state lost

Any changes must be persisted to the server

Operations in progress not guaranteed

Portlet is the only markup source

On refresh portlet delivers the markup

Portlet Particulars Page Drawing (cont.)

State Changes Must be done in Action

Action guaranteed to happen first

Render may be called many times

Only one action can be triggered at once

Action Requests go through Portal

Portlet Particulars Action/Render Cycle

Several different portlets shown together

Multiple instances of the same portlet

Portlet Particulars Multiple Portlets per Page

Portlets have different modes

Portlets have different WindowStates

Minimized

Maximized

Normal

Portlet Particulars Modes & Window States

Approach – Measure Performance Just do it.

Boot-strapping

State Management

Name-spacing

Compatibility

Accessibility

Techniques Getting AJAX Portlets Working

Initial Markup delivered to browser

Multiple styles

Heavy: Delivers complete AJAX UI

Widget: Delivers a shell to build JS objects

Techniques - Bootstrapping Bootstrapping

Several Options

Portlet Manages State

Widget Manages State

Service Manages State

Techniques – State Management State Management

ActionRequest

Background Requests

AJAX UI Updates

HTML Replacement

Techniques – State Management Portlet Manages State

Portlet instantiates widget

Widget provided information

Placement ID

User ID

Preferences

Widget gets rendered whenever portlet is

Techniques – State Management Widget Manages State

Hybrid Approach

Portlet Builds UI

Service Supplies Data

Session tokens

Stateless service design (harder)

Techniques – State Management Service Manages State (Hybrid)

Javascript is a global namespace

IDs should be unique in a document

Document Structure & Position Unknown

(potentially) Multiple Simultaneous Copies

Techniques – Name-spacing Name-spacing

Encapsulate your JS Objects

Non-destructive addition of event handlers

Carefully import libraries & dependencies

Techniques – Name-spacing Name-spacing: Javascript

Encapsulate your JS Objects

Non-destructive addition of event handlers

Carefully import libraries & dependencies

Techniques – Name-spacing Name-spacing: JavaScript

Add hashes to IDs <portlet:namespace/>

Namespace class names

Use root elements inside your markup fragment for descendent selectors

Techniques – Name-spacing Name-spacing: Markup

Add hashes to IDs

Be specific in document references

Avoid global names, even portlet-name-spaced

Techniques – Name-spacing Name-spacing: Multiple Copies

KISS: Complexity makes compatibility hard

Stick to standards

Test early, test often

Toolkits can help

Techniques Compatibility

Section 508 prohibits JavaScript

Being rewritten

Beware of tools like magnifiers, screen readers, etc.

Keyboard Accessibility

FLUID is doing interesting work

Techniques Accessibility

Approach – Measure Performance “ If 5% of users can’t use your work, 100% of them will never get the chance to”

Approach – Measure Performance Let’s Talk

Portlets2008 Ajax Portlets

0 comments

Notes on slide 1

Favorites, Groups & Events