Post on 01-Sep-2014
description
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
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
3
ICESOFT TECHNOLOGIES INC. www.icefaces.org
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)
6
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
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
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;}
ICESOFT TECHNOLOGIES INC. www.icefaces.org
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);
ICESOFT TECHNOLOGIES INC. www.icefaces.org
Avoiding Large Images
• Scale images down for mobile users
10
• Scaled images are saved in an alternate directory
• URL is adjusted for mobile users
ICESOFT TECHNOLOGIES INC. www.icefaces.org
Avoiding Clutter
• Switch off decorative elements ...
11
ICESOFT TECHNOLOGIES INC. www.icefaces.org
Avoiding Clutter
• ... for mobile users
12
ICESOFT TECHNOLOGIES INC. www.icefaces.org
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>
ICESOFT TECHNOLOGIES INC. www.icefaces.org
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
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
ICESOFT TECHNOLOGIES INC. www.icefaces.org
WebMC Demo
16
ICESOFT TECHNOLOGIES INC. www.icefaces.org
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
ICESOFT TECHNOLOGIES INC. www.icefaces.org
Help the user
• Incrementally present only relevant options
18
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
ICESOFT TECHNOLOGIES INC. www.icefaces.org
Server-mediated Collaboration
Server
Micha Ted
External Application
• User Initiated
• Application InitiatedUser
ActionPushPush Push
ICESOFT TECHNOLOGIES INC. www.icefaces.org
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
ICESOFT TECHNOLOGIES INC. www.icefaces.org
18
Ajax Poll vs Ajax PushBending the rules of HTTP.
ICESOFT TECHNOLOGIES INC. www.icefaces.org
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>
ICESOFT TECHNOLOGIES INC. www.icefaces.org
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
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
26
ICESOFT TECHNOLOGIES INC. www.icefaces.org
Taxi Demo
27
ICESOFT TECHNOLOGIES INC. www.icefaces.org
AuctionMonitor Mobile Chat
28
ICESOFT TECHNOLOGIES INC. www.icefaces.org
Which Components for Mobile Devices?
29
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
ICESOFT TECHNOLOGIES INC. www.icefaces.org
WebMC
31
ICESOFT TECHNOLOGIES INC. www.icefaces.org
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:
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>
33
ICESOFT TECHNOLOGIES INC. www.icefaces.org
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
ICESOFT TECHNOLOGIES INC. www.icefaces.org
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
ICESOFT TECHNOLOGIES INC. www.icefaces.org
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
ICESOFT TECHNOLOGIES INC. www.icefaces.org
Ajax Push API: RenderManager IntervalRenderer
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(); }
ICESOFT TECHNOLOGIES INC. www.icefaces.org
Ajax Push API: RenderManager IntervalRenderer
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>
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
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
40
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
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
43
ICESOFT TECHNOLOGIES INC. www.icefaces.org
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
ICESOFT TECHNOLOGIES INC. www.icefaces.org
Ted Goddard, Ph.D., Senior ArchitectICEsoft Technologies Inc.TedGoddard@icesoft.com(403) 663-3322
Join us at: www.icefaces.org
Thank You
42,000