Ajax Push ICEfaces Ted Goddard

iPhone Ajax Push With ICEfaces

Ted Goddard, Ph.D.
ICEsoft Technologies, Inc.

ICESOFT TECHNOLOGIES INC. www.icefaces.org 1

Agenda

> The Mobile Web
> Developing for Mobile and Desktop
> Mobile Push Demo
> Ajax Push
> Code Walkthrough
> Native Applications
> Conclusion

ICESOFT TECHNOLOGIES INC. www.icefaces.org

Where the Mobile Web Went Wrong

• WAP
– subset of XHTML, WAP 1.0 required “WAP gateway”

• Should we have additional mobile web standards?
– Focus on how the mobile web is different?

• The iPhone browser succeeds because it is a desktop
browser (on a small screen)

• The iPhone initiated the convergence of the mobile
web and the desktop web
• The mobile web is not constrained by software


Actual Mobile Device Constraints
• Hardware constraints
– RAM, Persistent storage, CPU

• Battery Power
– The CPU may be fast, but cycles are still limited

• Wireless Network Bandwidth, Latency, Connectivity
– Application load time
– Interaction delays
– Loss of connectivity

• UI Differences
– Small screen
– Touch or stylus based input
– Cumbersome text input


Addressing the Constraints

• Hardware Constraints
– Small JavaScript implementation
• Battery power
– Delegate application execution to the server
• Wireless Network Bandwidth, Latency, Connectivity
– Small JavaScript shortens load time
– Incremental page updates
– Ajax Push can hide latency, simplify user interaction
– Intermittent connectivity to be addressed

• UI Differences
– Simplify UI Controls and stylesheets
– Modify the page according to input
– Recommended list of controls


Suitable Mobile Browsers

• “Modern” browsers are available on a number of
platforms:

• Safari/iPhone
• RIM Browser/BlackBerry Bold
• Opera Mobile/Windows Mobile (not Opera Mini)
• Nokia Browser (Gecko)/N95
• Samsung Browser (WebKit)/Instinct

• ?WebKit Browser/Android (works in simulator)


Developing for Mobile and Desktop

• How much code re-use is possible?
• Model (JavaBeans) can be completely shared
• Most pages will work
• But you want an insanely great mobile experience
• Some things to avoid:
– large images
– clutter
– drag and drop
– list selection
– scrolling
• Help the user
– use Ajax to present just relevant options


Browser detection

public boolean isMobile() {

HttpServletRequest request = (HttpServletRequest)
FacesContext.getCurrentInstance()
.getExternalContext().getRequest();

String agent = request.getHeader(quot;user-agentquot;).toLowerCase();

if ((agent.indexOf(quot;safariquot;) != -1 && agent.indexOf(quot;mobilequot;) != -1) ||
(agent.indexOf(quot;operaquot;) != -1 && agent.indexOf(quot;240x320quot;) != -1)) {
! mobile = true;
}

return mobile;
}


Avoiding Large Images

• Scale images down for mobile users

BufferedImage bdest = new BufferedImage((int)(ourWidth*aspectWidth),
(int)(ourHeight*aspectHeight), BufferedImage.TYPE_INT_RGB);

Graphics2D g = bdest.createGraphics();

AffineTransform at = AffineTransform.getScaleInstance(aspectWidth, aspectHeight);

g.drawRenderedImage(bsrc, at);
ImageIO.write(bdest, quot;JPGquot;, new File(“mobile”, imageName);

• Scaled images are saved in an alternate directory
• URL is adjusted for mobile users


Avoiding Clutter
• Switch off decorative elements ...


Avoiding Clutter

• ... for mobile users


Avoiding Clutter

• Switch off decorative elements via rendered=

<div class=quot;presentationDIVquot;>
<ui:include src=quot;presentation.jspxquot;/>
</div>
<div class=quot;participantsChatDIVquot;>
<ice:panelGroup rendered=quot;#{!participant.mobile}quot;>
! ! <img src=quot;resources/images/logo_reflection.jpgquot; />
! ! <img src=quot;resources/images/part_tab.jpgquot;/>
</ice:panelGroup>
<ui:include src=quot;participants.jspxquot;/>
<ui:include src=quot;popups.jspxquot; />
! <ice:panelGroup rendered=quot;#{!participant.mobile}quot;
! style=quot;padding-top: 15px;quot;>
! <img src=quot;resources/images/chat_tab.gifquot;/>
! </ice:panelGroup>
! <ui:include src=quot;chat.jspxquot;/>
</div>


Mobile UI Considerations

• Dragging in Safari on the iPhone scrolls the page

• Selection by dragging is difficult
– prefer selection from a list rather than a drop-down menu

• Pixels are limited
– prefer simple interfaces without decoration


WebMC Demo


Avoiding Scrolling

<meta name=quot;viewportquot;
content=quot;width=480; initial-scale=1.0;maximum-scale=1.0;quot; />

width, height: size in pixels of the web page

initial-scale, maximum-scale, minimum-scale, user-scalable
scaling parameters

symbolic constants are also available and preferred:
device-width,device-height

<meta name=quot;viewportquot; content=quot;width=device-widthquot; />


Help the user

• Incrementally present only relevant options


Server-mediated Collaboration

External Application

Server

• User Initiated
User
Push Push
Push
Action • Application Initiated

Micha Ted


Applications in the Participation Age 8

Application-mediated communication.
> Distance learning
> Collaborative authoring
> Auctions
> Shared WebDAV filesystem
> Blogging and reader comments
> SIP-coordinated mobile applications
> Hybrid chat/email/discussion forums
> Customer assistance on sales/support pages
> Multi-step business process made collaborative
> Shared trip planner or restaurant selector with maps
> Shared calendar, “to do” list, project plan
> Games
> Enterprise shared record locking and negotiation

18

Ajax Poll vs Ajax Push
Bending the rules of HTTP.


Ajax Push
HTTP message flow inversion.

GET /auctionMonitor/block/receive-updates?icefacesID=1209765435 HTTP/1.1
Accept: */*
Cookie: JSESSIONID=75CF2BF3E03F0F9C6D2E8EFE1A6884F4
Connection: keep-alive
Host: vorlon.ice:18080
Chat message “Howdy”
HTTP/1.1 200 OK
Content-Type: text/xml;charset=UTF-8
Content-Length: 180
Date: Thu, 27 Apr 2006 16:45:25 GMT
Server: Apache-Coyote/1.1

<updates>
<update address=quot;_id0:_id5:0:chatTextquot;>
<span id=quot;_id0:_id5:0:chatTextquot;>Howdy</span>
</update>
</updates>


ICEfaces
Preserve MVC with Transparent Ajax.

PageBean.java Page.xhtml

public class PageBean { <f:view
String message; xmlns:f=“http://java.sun.com/jsf/core”
xmlns:h=quot;http://java.sun.com/jsf/html“ >
public String getMessage() {
return message; <html>
} <body>
<h:form>
public void <h:inputText
setMessage(String message) { value=“#{pageBean.message}” />
this.message = message; </h:form>
} </body>
</html>
}
</f:view>

Presentation Model Declarative User Interface

A language for Ajax Push that preserves Designer
and Developer roles


More Case Studies and Demos

• C3 Solutions
– Yard Smart truck dock management system
– Desktop and Mobile GUIs
– Opera Mobile Browser, Win CE device

• Taxi Dispatch Demo
– Collaborative mobile application
– iPhone

http://www.icefaces.org/main/demos/mobile-ajax.iface


C3 Solutions Yard Smart Application


Taxi Demo


AuctionMonitor Mobile Chat


Which Components for Mobile Devices?


WebMC


ICEfaces
High level push.

To update all users in the application:
SessionRenderer.render(SessionRenderer.ALL_SESSIONS);

Or to keep track of groups of users:
SessionRenderer.addCurrentSession(“chat”);

Asynchronously and elsewhere in the application ...
message.setValue(“Howdy”);
SessionRenderer.render(“chat”);

The JSF lifecycle runs and each user’s page is updated
from the component tree and current model state.


webmc.jspx

<f:view xmlns:f=quot;http://java.sun.com/jsf/corequot;
xmlns:h=quot;http://java.sun.com/jsf/htmlquot;>
<html>
<head> <title>WebMC</title> </head>
<body>
<h3>WebMC</h3>
<h:form>
<h:panelGrid columns=quot;1quot;>
<h:outputText value=quot;Presentationquot;/>
<h:graphicImage value=quot;#{user.slideURL}quot;/>
</h:panelGrid>
<h:panelGrid columns=quot;1quot; >
<h:outputText value=quot;Chatquot;/>
<h:outputText value=quot;#{user.chatLog}quot;/>
<h:inputText value=quot;#{user.chatInput}quot;/>
<h:commandButton actionListener=quot;#{user.submit}quot;/>
</h:panelGrid>


UserBean.java
public class UserBean {

public String getSlideURL() {
return slideURL; Set by presentation
moderator slide controls
}

public String getChatLog() {
return chatLog;
}

public String getChatInput() {
return chatInput;
}

public void setChatInput(String text) {
chatInput = text;
append(chatLog, text);
}
}


UserBean.java (Ajax Push)

import org.icefaces.x.core.push.SessionRenderer;

public class UserBean {
String presentationName;

public UserBean() {
presentationName = LoginBean.getPresentationName();
SessionRenderer.addCurrentSession(presentationName);
}

public void submit() {
SessionRenderer.render(presentationName);
}
}


Ajax Push API: RenderManager IntervalRenderer

public ClockBean() {
state = PersistentFacesState.getInstance();
AuctionBean.incrementUsers();
}

public void setRenderManager(RenderManager manager) {
if (manager != null) {
clock = manager.getIntervalRenderer(“clock”);
clock.setInterval(pollInterval);
clock.add(this);
clock.requestRender();
Ajax Push
}
}

public PersistentFacesState getState() {
return state;
}



public void renderingException(RenderingException renderingException) {
if (renderingException instanceof FatalRenderingException) {
performCleanup();
}
}

protected boolean performCleanup() {
if (clock != null && clock.contains(this)) {
clock.remove(this);
}
}

public void dispose() throws Exception {
performCleanup();
}



<managed-bean>
<managed-bean-name>rmanager</managed-bean-name>
<managed-bean-class>
com.icesoft.faces.async.render.RenderManager
</managed-bean-class>
<managed-bean-scope>application</managed-bean-scope>
</managed-bean>

<managed-bean>
<managed-bean-name>ClockBean</managed-bean-name>
<managed-bean-class>
com.icesoft.applications.faces.auctionMonitor.beans.ClockBean
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>renderManager</property-name>
<value>#{rmanager}</value>
</managed-property>
</managed-bean>


Native Mobile Applications

• How does JSF for mobile devices compare with
“native” mobile development

• Only recently does iPhone SDK NDA allow discussion

• Will your application be rejected by the App Store?

• Code signing is tedious but automated

• Development language is Objective C

• Access to accelerometer, multi-touch, OpenGL

ICEfaces Mobile Roadmap

• Core framework unchanged

• Optimize Renderkit output – Bandwidth Reduction

• Mobile Component Suite

• Intermittent Network Connection Management
– optimize heartbeat and connection sharing for low power
and reduced bandwidth

• Additional Mobile Browser Support


Mobile Future (or alternate universe?)

• Google Gears and HTML5 Client-side Database allow
data to be stored offline
– but where is the application? Implemented in JavaScript?

• Client-side Java would allow JSF on the device
– prohibited by iPhone SDK license
– this was one of the original ICEfaces design goals

• The stack could be streamlined
– client-side database online/offline aware
– single user “Servlet” engine
– no JSP
– device loopback network


Summary
The Mobile and Desktop Web are Unified

> Standard browser capability will rapidly be commonplace

> Ajax is essential for building streamlined user interfaces

> JSF page modularity is an excellent approach for
spanning the mobile and desktop web


Thank You

Ted Goddard, Ph.D., Senior Architect
ICEsoft Technologies Inc.
TedGoddard@icesoft.com
(403) 663-3322

Join us at: www.icefaces.org

42,000


Ajax Push ICEfaces Ted Goddard

Recommended

Recommended

More Related Content

Similar to Ajax Push ICEfaces Ted Goddard

Similar to Ajax Push ICEfaces Ted Goddard (20)

More from rajivmordani

More from rajivmordani (20)

Recently uploaded

Recently uploaded (20)

Ajax Push ICEfaces Ted Goddard