iPhone Ajax Push With ICEfaces


Ted Goddard, Ph.D.
ICEsoft Technologies, Inc.


ICESOFT TECHNOLOGIES INC.                ...
Agenda

       >      The Mobile Web
       >      Developing for Mobile and Desktop
       >      Mobile Push Demo
      ...
Where the Mobile Web Went Wrong

       • WAP
                 – subset of XHTML, WAP 1.0 required “WAP gateway”


       ...
Actual Mobile Device Constraints
  • Hardware constraints
           – RAM, Persistent storage, CPU


  •      Battery Pow...
Addressing the Constraints

  • Hardware Constraints
           – Small JavaScript implementation
  •      Battery power
 ...
Suitable Mobile Browsers


       • “Modern” browsers are available on a number of
         platforms:

       •      Safa...
Agenda

       >      The Mobile Web
       >      Developing for Mobile and Desktop
       >      Mobile Push Demo
      ...
Developing for Mobile and Desktop

       •      How much code re-use is possible?
       •      Model (JavaBeans) can be ...
Browser detection



 public boolean isMobile() {

          HttpServletRequest request = (HttpServletRequest)
           ...
Avoiding Large Images


       • Scale images down for mobile users


  BufferedImage bdest = new BufferedImage((int)(ourW...
Avoiding Clutter
       • Switch off decorative elements ...




ICESOFT TECHNOLOGIES INC.                     www.iceface...
Avoiding Clutter

       • ... for mobile users




ICESOFT TECHNOLOGIES INC.       www.icefaces.org   12
Avoiding Clutter

       • Switch off decorative elements via rendered=

                 <div class=quot;presentationDIVq...
Mobile UI Considerations




       • Dragging in Safari on the iPhone scrolls the page

       • Selection by dragging is...
Agenda

       >      The Mobile Web
       >      Developing for Mobile and Desktop
       >      Mobile Push Demo
      ...
WebMC Demo




ICESOFT TECHNOLOGIES INC.   www.icefaces.org   16
Avoiding Scrolling


  <meta name=quot;viewportquot;
        content=quot;width=480; initial-scale=1.0;maximum-scale=1.0;q...
Help the user

       • Incrementally present only relevant options




ICESOFT TECHNOLOGIES INC.                       ww...
Agenda

       >      The Mobile Web
       >      Developing for Mobile and Desktop
       >      Mobile Push Demo
      ...
Server-mediated Collaboration




                                                            External Application



    ...
Applications in the Participation Age                           8


   Application-mediated communication.
>     Distance ...
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...
ICEfaces
Preserve MVC with Transparent Ajax.

                 PageBean.java                    Page.xhtml

public class P...
More Case Studies and Demos

  • C3 Solutions
           – Yard Smart truck dock management system
           – Desktop an...
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
      ...
WebMC




ICESOFT TECHNOLOGIES INC.   www.icefaces.org   31
ICEfaces
High level push.


To update all users in the application:
 SessionRenderer.render(SessionRenderer.ALL_SESSIONS);...
webmc.jspx

  <f:view xmlns:f=quot;http://java.sun.com/jsf/corequot;
           xmlns:h=quot;http://java.sun.com/jsf/htmlq...
UserBean.java
          public class UserBean {

                    public String getSlideURL() {
                       ...
UserBean.java (Ajax Push)

     import org.icefaces.x.core.push.SessionRenderer;

     public class UserBean {
         St...
Ajax Push API: RenderManager IntervalRenderer

                            public ClockBean() {
                          ...
Ajax Push API: RenderManager IntervalRenderer



            public void renderingException(RenderingException renderingEx...
Ajax Push API: RenderManager IntervalRenderer


               <managed-bean>
                   <managed-bean-name>rmanag...
Agenda

       >      The Mobile Web
       >      Developing for Mobile and Desktop
       >      Mobile Push Demo
      ...
Native Mobile Applications

       • How does JSF for mobile devices compare with
         “native” mobile development

  ...
Agenda

       >      The Mobile Web
       >      Developing for Mobile and Desktop
       >      Mobile Push Demo
      ...
ICEfaces Mobile Roadmap

    • Core framework unchanged

    • Optimize Renderkit output – Bandwidth Reduction

    • Mobi...
Mobile Future (or alternate universe?)

       • Google Gears and HTML5 Client-side Database allow
         data to be sto...
Summary
The Mobile and Desktop Web are Unified

  > Standard browser capability will rapidly be commonplace

  > Ajax is e...
Thank You




      Ted Goddard, Ph.D., Senior Architect
      ICEsoft Technologies Inc.
      TedGoddard@icesoft.com
    ...
Upcoming SlideShare
Loading in...5
×

Ajax Push ICEfaces Ted Goddard

3,759

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,759
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
76
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ajax Push ICEfaces Ted Goddard

  1. 1. iPhone Ajax Push With ICEfaces Ted Goddard, Ph.D. ICEsoft Technologies, Inc. ICESOFT TECHNOLOGIES INC. www.icefaces.org 1
  2. 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. 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. 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. 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. 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. 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. 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
  9. 9. Browser detection public boolean isMobile() { HttpServletRequest request = (HttpServletRequest) FacesContext.getCurrentInstance() .getExternalContext().getRequest(); String agent = request.getHeader(quot;user-agentquot;).toLowerCase(); if ((agent.indexOf(quot;safariquot;) != -1 && agent.indexOf(quot;mobilequot;) != -1) || (agent.indexOf(quot;operaquot;) != -1 && agent.indexOf(quot;240x320quot;) != -1)) { ! mobile = true; } return mobile; } ICESOFT TECHNOLOGIES INC. www.icefaces.org 9
  10. 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. 11. Avoiding Clutter • Switch off decorative elements ... ICESOFT TECHNOLOGIES INC. www.icefaces.org 11
  12. 12. Avoiding Clutter • ... for mobile users ICESOFT TECHNOLOGIES INC. www.icefaces.org 12
  13. 13. Avoiding Clutter • Switch off decorative elements via rendered= <div class=quot;presentationDIVquot;> <ui:include src=quot;presentation.jspxquot;/> </div> <div class=quot;participantsChatDIVquot;> <ice:panelGroup rendered=quot;#{!participant.mobile}quot;> ! ! <img src=quot;resources/images/logo_reflection.jpgquot; /> ! ! <img src=quot;resources/images/part_tab.jpgquot;/> </ice:panelGroup> <ui:include src=quot;participants.jspxquot;/> <ui:include src=quot;popups.jspxquot; /> ! <ice:panelGroup rendered=quot;#{!participant.mobile}quot; ! style=quot;padding-top: 15px;quot;> ! <img src=quot;resources/images/chat_tab.gifquot;/> ! </ice:panelGroup> ! <ui:include src=quot;chat.jspxquot;/> </div> ICESOFT TECHNOLOGIES INC. www.icefaces.org 13
  14. 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. 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
  16. 16. WebMC Demo ICESOFT TECHNOLOGIES INC. www.icefaces.org 16
  17. 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. 18. Help the user • Incrementally present only relevant options ICESOFT TECHNOLOGIES INC. www.icefaces.org 18
  19. 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. 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. 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. 22. 18 Ajax Poll vs Ajax Push Bending the rules of HTTP. ICESOFT TECHNOLOGIES INC. www.icefaces.org
  23. 23. 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=quot;_id0:_id5:0:chatTextquot;> <span id=quot;_id0:_id5:0:chatTextquot;>Howdy</span> </update> </updates> ICESOFT TECHNOLOGIES INC. www.icefaces.org
  24. 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. 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
  26. 26. C3 Solutions Yard Smart Application ICESOFT TECHNOLOGIES INC. www.icefaces.org 26
  27. 27. Taxi Demo ICESOFT TECHNOLOGIES INC. www.icefaces.org 27
  28. 28. AuctionMonitor Mobile Chat ICESOFT TECHNOLOGIES INC. www.icefaces.org 28
  29. 29. Which Components for Mobile Devices? ICESOFT TECHNOLOGIES INC. www.icefaces.org 29
  30. 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
  31. 31. WebMC ICESOFT TECHNOLOGIES INC. www.icefaces.org 31
  32. 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
  33. 33. webmc.jspx <f:view xmlns:f=quot;http://java.sun.com/jsf/corequot; xmlns:h=quot;http://java.sun.com/jsf/htmlquot;> <html> <head> <title>WebMC</title> </head> <body> <h3>WebMC</h3> <h:form> <h:panelGrid columns=quot;1quot;> <h:outputText value=quot;Presentationquot;/> <h:graphicImage value=quot;#{user.slideURL}quot;/> </h:panelGrid> <h:panelGrid columns=quot;1quot; > <h:outputText value=quot;Chatquot;/> <h:outputText value=quot;#{user.chatLog}quot;/> <h:inputText value=quot;#{user.chatInput}quot;/> <h:commandButton actionListener=quot;#{user.submit}quot;/> </h:panelGrid> ICESOFT TECHNOLOGIES INC. www.icefaces.org 33
  34. 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. 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. 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. 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
  38. 38. 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
  39. 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. 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. 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. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×