ajax push icefaces ted goddard
DESCRIPTION
TRANSCRIPT
![Page 1: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/1.jpg)
ICESOFT TECHNOLOGIES INC. www.icefaces.org 1
iPhone Ajax Push With ICEfaces
Ted Goddard, Ph.D.
ICEsoft Technologies, Inc.
![Page 2: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/2.jpg)
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
![Page 3: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/3.jpg)
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
![Page 4: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/4.jpg)
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
![Page 5: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/5.jpg)
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
![Page 6: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/6.jpg)
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
![Page 7: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/7.jpg)
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
![Page 8: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/8.jpg)
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
![Page 9: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/9.jpg)
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
![Page 10: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/10.jpg)
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
![Page 11: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/11.jpg)
ICESOFT TECHNOLOGIES INC. www.icefaces.org
Avoiding Clutter
• Switch off decorative elements ...
11
![Page 12: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/12.jpg)
ICESOFT TECHNOLOGIES INC. www.icefaces.org
Avoiding Clutter
• ... for mobile users
12
![Page 13: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/13.jpg)
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>
![Page 14: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/14.jpg)
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
![Page 15: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/15.jpg)
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
![Page 16: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/16.jpg)
ICESOFT TECHNOLOGIES INC. www.icefaces.org
WebMC Demo
16
![Page 17: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/17.jpg)
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
![Page 18: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/18.jpg)
ICESOFT TECHNOLOGIES INC. www.icefaces.org
Help the user
• Incrementally present only relevant options
18
![Page 19: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/19.jpg)
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
![Page 20: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/20.jpg)
ICESOFT TECHNOLOGIES INC. www.icefaces.org
Server-mediated Collaboration
Server
Micha Ted
External Application
• User Initiated
• Application InitiatedUser
ActionPushPush Push
![Page 21: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/21.jpg)
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
![Page 22: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/22.jpg)
ICESOFT TECHNOLOGIES INC. www.icefaces.org
18
Ajax Poll vs Ajax PushBending the rules of HTTP.
![Page 23: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/23.jpg)
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>
![Page 24: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/24.jpg)
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
![Page 25: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/25.jpg)
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
![Page 26: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/26.jpg)
ICESOFT TECHNOLOGIES INC. www.icefaces.org
C3 Solutions Yard Smart Application
26
![Page 27: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/27.jpg)
ICESOFT TECHNOLOGIES INC. www.icefaces.org
Taxi Demo
27
![Page 28: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/28.jpg)
ICESOFT TECHNOLOGIES INC. www.icefaces.org
AuctionMonitor Mobile Chat
28
![Page 29: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/29.jpg)
ICESOFT TECHNOLOGIES INC. www.icefaces.org
Which Components for Mobile Devices?
29
![Page 30: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/30.jpg)
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
![Page 31: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/31.jpg)
ICESOFT TECHNOLOGIES INC. www.icefaces.org
WebMC
31
![Page 32: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/32.jpg)
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:
![Page 33: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/33.jpg)
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
![Page 34: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/34.jpg)
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
![Page 35: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/35.jpg)
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
![Page 36: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/36.jpg)
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
![Page 37: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/37.jpg)
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(); }
![Page 38: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/38.jpg)
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>
![Page 39: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/39.jpg)
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
![Page 40: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/40.jpg)
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
![Page 41: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/41.jpg)
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
![Page 42: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/42.jpg)
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
![Page 43: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/43.jpg)
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
![Page 44: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/44.jpg)
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
![Page 45: Ajax Push ICEfaces Ted Goddard](https://reader034.vdocument.in/reader034/viewer/2022042518/540577cf8d7f729b768b4d15/html5/thumbnails/45.jpg)
ICESOFT TECHNOLOGIES INC. www.icefaces.org
Ted Goddard, Ph.D., Senior ArchitectICEsoft Technologies [email protected](403) 663-3322
Join us at: www.icefaces.org
Thank You
42,000