Ajax Push ICEfaces Ted Goddard

ICESOFT TECHNOLOGIES INC. www.icefaces.org 1

iPhone Ajax Push With ICEfaces

Ted Goddard, Ph.D.

ICEsoft Technologies, Inc.

ICESOFT TECHNOLOGIES INC. www.icefaces.org

Agenda

> The Mobile Web

> Developing for Mobile and Desktop

> Mobile Push Demo

> Ajax Push

> Code Walkthrough

> Native Applications

> Conclusion


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

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


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)

6


Agenda

> The Mobile Web


> Mobile Push Demo

> Ajax Push

> Code Walkthrough


> Conclusion


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

8

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;}


Browser detection

9

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);


Avoiding Large Images

• Scale images down for mobile users

10

• Scaled images are saved in an alternate directory

• URL is adjusted for mobile users


Avoiding Clutter

• Switch off decorative elements ...

11


Avoiding Clutter

• ... for mobile users

12


Avoiding Clutter

• Switch off decorative elements via rendered=

13

<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>


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

14


Agenda

> The Mobile Web


> Mobile Push Demo

> Ajax Push

> Code Walkthrough


> Conclusion


WebMC Demo

16


Avoiding Scrolling

17

<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

<meta name="viewport" content="width=device-width" />

symbolic constants are also available and preferred:

device-width,device-height


Help the user

• Incrementally present only relevant options

18


Agenda

> The Mobile Web


> Mobile Push Demo

> Ajax Push

> Code Walkthrough


> Conclusion


Server-mediated Collaboration

Server

Micha Ted

External Application

• User Initiated

• Application InitiatedUser

ActionPushPush Push


8Applications in the Participation AgeApplication-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 PushBending the rules of HTTP.


Ajax PushHTTP message flow inversion.

GET /auctionMonitor/block/receive-updates?icefacesID=1209765435 HTTP/1.1

Accept: */*

Cookie: JSESSIONID=75CF2BF3E03F0F9C6D2E8EFE1A6884F4

Connection: keep-alive

Host: vorlon.ice:18080Chat message “Howdy”

HTTP/1.1 200 OKContent-Type: text/xml;charset=UTF-8Content-Length: 180

Date: Thu, 27 Apr 2006 16:45:25 GMTServer: Apache-Coyote/1.1

<updates> <update address="_id0:_id5:0:chatText"> <span id="_id0:_id5:0:chatText">Howdy</span>

</update></updates>


ICEfacesPreserve MVC with Transparent Ajax.

public class PageBean { String message;

public String getMessage() {

return message;

}

public void

setMessage(String message) {

this.message = message;

}

}

<f:view xmlns:f=“http://java.sun.com/jsf/core”

xmlns:h="http://java.sun.com/jsf/html“ >

<html>

<body> <h:form>

<h:inputText

value=“#{pageBean.message}” /> </h:form>

</body>

</html>

</f:view>

Presentation Model Declarative User Interface

PageBean.java Page.xhtml

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

26


Taxi Demo

27


AuctionMonitor Mobile Chat

28


Which Components for Mobile Devices?

29


Agenda

> The Mobile Web


> Mobile Push Demo

> Ajax Push

> Code Walkthrough


> Conclusion


WebMC

31


ICEfacesHigh level push.

SessionRenderer.render(SessionRenderer.ALL_SESSIONS);

SessionRenderer.addCurrentSession(“chat”);

message.setValue(“Howdy”);SessionRenderer.render(“chat”);

Asynchronously and elsewhere in the application ...

Or to keep track of groups of users:

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

To update all users in the application:


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>

33


UserBean.java

public class UserBean {

public String getSlideURL() {

return slideURL;

}

public String getChatLog() {

return chatLog;

}

public String getChatInput() {

return chatInput;

}

public void setChatInput(String text) {

chatInput = text;

append(chatLog, text);

}

}

Set by presentation

moderator slide controls

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);

}

}

35


Ajax Push API: RenderManager IntervalRenderer

36

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(); }

}

public PersistentFacesState getState() {

return state; }

Ajax Push



37

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(); }



38

<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>


Agenda

> The Mobile Web


> Mobile Push Demo

> Ajax Push

> Code Walkthrough


> Conclusion


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

40


Agenda

> The Mobile Web


> Mobile Push Demo

> Ajax Push

> Code Walkthrough


> Conclusion


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

43


SummaryThe 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


Ted Goddard, Ph.D., Senior ArchitectICEsoft Technologies [email protected](403) 663-3322

Join us at: www.icefaces.org

Thank You

42,000

Technology

Ajax Push ICEfaces Ted Goddard