webclient i+ mobile chicago 2011
DESCRIPTION
TheTRANSCRIPT
![Page 1: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/1.jpg)
WebClient i+for CA Plex
Mobile Development
Chicago, June 2011
![Page 2: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/2.jpg)
Overview
• Mobile from CA Plex?• Without learning anything (or
much new? • With standard action diagrams
and patterns?• Does it look good?• Native apps? • Really?
Ajax in Greek mythology
![Page 3: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/3.jpg)
StatisticsThe world is going mobile
• 50 million iPhones sold to date
• 200,000 Android devices sold each day
• 8.5 million iPads sold to date• 70 million tablets predicted
by the end of 2012• 2/3 of the Fortune 100 have
started deploying iPads for Enterprise use
![Page 4: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/4.jpg)
iPhone/iPad/Android/BB6
Native App - Android Markethttp://market.android.com
Web App with Native Optimizationmobileportal.cmfirsttech.com/Plex2EWeb/wcs
![Page 5: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/5.jpg)
Creating Mobile AppsFinding a better process
• One primary skill set – Plex
• Use Plex Strengths• action diagram• panel design• existing code
• But – Need First Class Mobile App
![Page 6: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/6.jpg)
A better way – Plex+WebClient with Sencha Touch
• Covers 93% of mobile traffic
• HTML 5, CSS3, ExtJS
• SaSS• Local Storage• Media/Geo
![Page 7: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/7.jpg)
EclipsePlug-in
(Builder)
Mobile template library
Web Templates Mobile Templates
![Page 8: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/8.jpg)
Mobile Design
![Page 9: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/9.jpg)
Designing Mobile AppsPrincipals
• Blurry Vision• Get it done quick• Double Tap, Pinch,
Twist, What?• Clumsy Fingers
![Page 10: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/10.jpg)
Designing Mobile AppsPrincipals
• Simplicity• Ease• Elegance• Your App Doesn’t
have to do it all
![Page 11: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/11.jpg)
Navigation ModelsPrincipals
Combine
![Page 12: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/12.jpg)
• By adding Control Name Directives• ControlName:AttachPoint:parameter=xxx• Examples:
• BackButton:ToolbarArea:toolbar=1:align=left:ui=back• Search:ToolBarArea:toolbar=1:align=center:template=WebSearch• RefreshButton:ToolbarArea:toolbar=1:align=right:iconCls=refresh• GridP:FullscreenArea:grouped=true:indexBar=true
How do we do this in Plex?
![Page 13: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/13.jpg)
Attach PointsToolbarArea, align, toolbarNum
FullscreenArea
TabbarArea
![Page 14: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/14.jpg)
Attach PointsToolbarArea, align, toolbarNum
MainArea, fieldSet
TabbarArea
![Page 15: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/15.jpg)
Buttons, Toolbar and Disclosure
Partial iconCls list (see sencha documentation)actionaddarrow_downarrow_leftarrow_rightarrow_upcomposedeleteorganizerefreshreplysearchsettings…
Partial ui list (see sencha documentation)normalbackroundforwardaction
http://dev.sencha.com/deploy/touch/examples/kitchensink/
![Page 16: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/16.jpg)
MapAttach a map template to fields• MapCoords:FullscreenArea:template=WebMap• MapLocation:FullscreenArea:template=WebLocation
![Page 17: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/17.jpg)
VideoAttach a video template to fieldsVideo:FullscreenArea:template=Video
![Page 18: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/18.jpg)
LinksAttach a url template to fieldsTweet:MainArea:template=WebURL:label=Tweet the app link:fieldSet=Links
![Page 19: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/19.jpg)
Native Wrapper
![Page 20: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/20.jpg)
What about hardware?
• Camera• Compass• Accelerometer• App Store
Native Wrapper App
![Page 21: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/21.jpg)
PhoneGap for Eclipse / XCode
![Page 22: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/22.jpg)
Alpha Demo
![Page 23: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/23.jpg)
So what is next?
![Page 24: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/24.jpg)
Full JavaScript Application Generation
“JavaScript is the next enterprise language” (Google, et. al.)
• Local code (action diagram logic)
• Local storage
• Direct access to device hardware
Plus:
• Cross Platform – run anywhere
• JavaScript on the server
But is this just a dream?
![Page 25: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/25.jpg)
First look
• Disconnected Operation
• Native Device Storage
• Cross Platform, Device, and Browser
• See Session Tomorrow at 3:15pm
![Page 26: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/26.jpg)
Futures Demo
![Page 27: WebClient i+ Mobile Chicago 2011](https://reader036.vdocuments.mx/reader036/viewer/2022081519/558d26fcd8b42a21638b468e/html5/thumbnails/27.jpg)
WebClient Information(click logo to view)
• webclientiplus.com• Wiki
• Blog
• Product Downloads / Support