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
ICESOFT TECHNOLOGIES INC. www.icefaces.org 3

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
ICESOFT TECHNOLOGIES INC. www.icefaces.org

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
ICESOFT TECHNOLOGIES INC. www.icefaces.org

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)
ICESOFT TECHNOLOGIES INC. www.icefaces.org 6

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

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
ICESOFT TECHNOLOGIES INC. www.icefaces.org 8

Browser detection
public boolean isMobile() {
HttpServletRequest request = (HttpServletRequest)
FacesContext.getCurrentInstance()
.getExternalContext().getRequest();
String agent = request.getHeader(\"user-agent\").toLowerCase();
if ((agent.indexOf(\"safari\") != -1 && agent.indexOf(\"mobile\") != -1) ||
(agent.indexOf(\"opera\") != -1 && agent.indexOf(\"240x320\") != -1)) {
! mobile = true;
}
return mobile;
}
ICESOFT TECHNOLOGIES INC. www.icefaces.org 9

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, \"JPG\", new File(“mobile”, imageName);
• Scaled images are saved in an alternate directory
• URL is adjusted for mobile users
ICESOFT TECHNOLOGIES INC. www.icefaces.org 10

Avoiding Clutter
• Switch off decorative elements ...
ICESOFT TECHNOLOGIES INC. www.icefaces.org 11

Avoiding Clutter
• ... for mobile users
ICESOFT TECHNOLOGIES INC. www.icefaces.org 12

Avoiding Clutter
• Switch off decorative elements via rendered=
<div class=\"presentationDIV\">
<ui:include src=\"presentation.jspx\"/>
</div>
<div class=\"participantsChatDIV\">
<ice:panelGroup rendered=\"#{!participant.mobile}\">
! ! <img src=\"resources/images/logo_reflection.jpg\" />
! ! <img src=\"resources/images/part_tab.jpg\"/>
</ice:panelGroup>
<ui:include src=\"participants.jspx\"/>
<ui:include src=\"popups.jspx\" />
! <ice:panelGroup rendered=\"#{!participant.mobile}\"
! style=\"padding-top: 15px;\">
! <img src=\"resources/images/chat_tab.gif\"/>
! </ice:panelGroup>
! <ui:include src=\"chat.jspx\"/>
</div>
ICESOFT TECHNOLOGIES INC. www.icefaces.org 13

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
ICESOFT TECHNOLOGIES INC. www.icefaces.org 14

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

WebMC Demo
ICESOFT TECHNOLOGIES INC. www.icefaces.org 16

Avoiding Scrolling
<meta name=\"viewport\"
content=\"width=480; initial-scale=1.0;maximum-scale=1.0;\" />
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=\"viewport\" content=\"width=device-width\" />
ICESOFT TECHNOLOGIES INC. www.icefaces.org 17

Help the user
• Incrementally present only relevant options
ICESOFT TECHNOLOGIES INC. www.icefaces.org 18

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

Server-mediated Collaboration
External Application
Server
• User Initiated
User
Push Push
Push
Action • Application Initiated
Micha Ted
ICESOFT TECHNOLOGIES INC. www.icefaces.org

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
ICESOFT TECHNOLOGIES INC. www.icefaces.org

18
Ajax Poll vs Ajax Push
Bending the rules of HTTP.
ICESOFT TECHNOLOGIES INC. www.icefaces.org

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=\"_id0:_id5:0:chatText\">
<span id=\"_id0:_id5:0:chatText\">Howdy</span>
</update>
</updates>
ICESOFT TECHNOLOGIES INC. www.icefaces.org

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=\"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
ICESOFT TECHNOLOGIES INC. www.icefaces.org

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
ICESOFT TECHNOLOGIES INC. www.icefaces.org

C3 Solutions Yard Smart Application
ICESOFT TECHNOLOGIES INC. www.icefaces.org 26

Taxi Demo
ICESOFT TECHNOLOGIES INC. www.icefaces.org 27

AuctionMonitor Mobile Chat
ICESOFT TECHNOLOGIES INC. www.icefaces.org 28

Which Components for Mobile Devices?
ICESOFT TECHNOLOGIES INC. www.icefaces.org 29

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

WebMC
ICESOFT TECHNOLOGIES INC. www.icefaces.org 31

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.
ICESOFT TECHNOLOGIES INC. www.icefaces.org

webmc.jspx
<f:view xmlns:f=\"http://java.sun.com/jsf/core\"
xmlns:h=\"http://java.sun.com/jsf/html\">
<html>
<head> <title>WebMC</title> </head>
<body>
<h3>WebMC</h3>
<h:form>
<h:panelGrid columns=\"1\">
<h:outputText value=\"Presentation\"/>
<h:graphicImage value=\"#{user.slideURL}\"/>
</h:panelGrid>
<h:panelGrid columns=\"1\" >
<h:outputText value=\"Chat\"/>
<h:outputText value=\"#{user.chatLog}\"/>
<h:inputText value=\"#{user.chatInput}\"/>
<h:commandButton actionListener=\"#{user.submit}\"/>
</h:panelGrid>
ICESOFT TECHNOLOGIES INC. www.icefaces.org 33

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);
}
}
ICESOFT TECHNOLOGIES INC. www.icefaces.org 34

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);
}
}
ICESOFT TECHNOLOGIES INC. www.icefaces.org 35

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;
}
ICESOFT TECHNOLOGIES INC. www.icefaces.org 36

Ajax Push API: RenderManager IntervalRenderer
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();
}
ICESOFT TECHNOLOGIES INC. www.icefaces.org 37

Ajax Push API: RenderManager IntervalRenderer
<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>
ICESOFT TECHNOLOGIES INC. www.icefaces.org 38

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

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
ICESOFT TECHNOLOGIES INC. www.icefaces.org 40

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

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
ICESOFT TECHNOLOGIES INC. www.icefaces.org

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
ICESOFT TECHNOLOGIES INC. www.icefaces.org 43

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
ICESOFT TECHNOLOGIES INC. www.icefaces.org

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
ICESOFT TECHNOLOGIES INC. www.icefaces.org