Driving Behavioral Change for Information Management through Data-Driven Gree...
Ajax Push ICEfaces Ted Goddard
1. iPhone Ajax Push With ICEfaces
Ted Goddard, Ph.D.
ICEsoft Technologies, Inc.
ICESOFT TECHNOLOGIES INC. www.icefaces.org 1
2. 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
3. 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
4. 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
5. 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
6. 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
7. 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
8. 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
10. 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
ICESOFT TECHNOLOGIES INC. www.icefaces.org 10
11. Avoiding Clutter
• Switch off decorative elements ...
ICESOFT TECHNOLOGIES INC. www.icefaces.org 11
12. Avoiding Clutter
• ... for mobile users
ICESOFT TECHNOLOGIES INC. www.icefaces.org 12
14. 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
15. 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
17. 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; />
ICESOFT TECHNOLOGIES INC. www.icefaces.org 17
18. Help the user
• Incrementally present only relevant options
ICESOFT TECHNOLOGIES INC. www.icefaces.org 18
19. 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
20. Server-mediated Collaboration
External Application
Server
• User Initiated
User
Push Push
Push
Action • Application Initiated
Micha Ted
ICESOFT TECHNOLOGIES INC. www.icefaces.org
21. 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
22. 18
Ajax Poll vs Ajax Push
Bending the rules of HTTP.
ICESOFT TECHNOLOGIES INC. www.icefaces.org
24. 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
ICESOFT TECHNOLOGIES INC. www.icefaces.org
25. 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
29. Which Components for Mobile Devices?
ICESOFT TECHNOLOGIES INC. www.icefaces.org 29
30. 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
32. 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
34. 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
35. 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
36. 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
37. 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
39. 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
40. 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
41. 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
42. 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
43. 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
44. 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
45. 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