jquery and the missing mobile linkmodel glue and coldbox (mvc) contributor coldbox contributor. mark...
TRANSCRIPT
![Page 1: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/1.jpg)
Mark DrewRailo Consulting
Munich CFCamp 2011
JQuery and the Missing Mobile Link
Friday, 28 October 11
![Page 2: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/2.jpg)
Mark Drew – Railo Technologies
Hi!
Mark Drew@markdrew
Friday, 28 October 11
Railo Consulting UK’s CEO Web Development Consultancy based in London, Zurich, New York and San Francisco
Excel at CFML application development, training, performance tuningColdFusion & CFML Developer since ‘97 and Web developer since ’94Involved in various CFML Frameworks, ORMs and IDE’s CFEclipse’s (CFML IDE) Lead Developer Reactor ORM Project Manager ColdSpring (Dependency Injection) Contributor Contributor Model Glue and ColdBox (MVC) Contributor ColdBox Contributor
![Page 3: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/3.jpg)
Mark Drew – Railo Technologies
Agenda
Friday, 28 October 11
Looking at JQuery Mobile Then Looking into PhoneGap and how they can go together.
![Page 4: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/4.jpg)
Mark Drew – Railo Technologies
JQuery Mobile
JQUERY MOBILEA “touch optimised” HTML5
Framework for building mobile websites and apps.
Friday, 28 October 11
Looking at JQuery Mobile Then Looking into PhoneGap and how they can go together.
![Page 5: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/5.jpg)
Mark Drew – Railo Technologies
Touch Optimised?
• Big enough to touch!
• No Typing
• No Mouse Over, Mouse Move
• Optimised Form Controls
Friday, 28 October 11
UI Controls need to be big enough to touch. Minimize the need for typing No mouseover, mousemove events, instead you have events like swipe, swipeleft, swiperight, orientationchange, tap, taphold, etc. Optimiseded Form Controls(No the mouse isn’t touching himself!!)
![Page 6: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/6.jpg)
Mark Drew – Railo Technologies
Mobile OS Support
Friday, 28 October 11
![Page 7: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/7.jpg)
Mark Drew – Railo Technologies
Mobile OS Support
Friday, 28 October 11
![Page 8: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/8.jpg)
Mark Drew – Railo Technologies
But I don’t know JQuery!
?Friday, 28 October 11
You don’t even need to know JavaScript to build a simple jQuery Mobile Web Site or App.• If you know jQuery you will feel right at home, when it comes time to add dynamic interactions.• But don’t worry if you don’t know any jQuery!
![Page 9: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/9.jpg)
Mark Drew – Railo Technologies
But I DO know JQuery!
!Friday, 28 October 11
Not really like JQuery in it’s syntax, more like HTML than anything else. (more on that later) But has a lot of config stuff that you can access in the standard JQuery way.
![Page 10: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/10.jpg)
Mark Drew – Railo Technologies
What does it give you?
Friday, 28 October 11
• Pages & Dialogs• Toolbars (Header & Footer bars)• Button’s (Including a set of stock icons)• Form Controls (Slider’s,Toggles, enhanced radio, checkbox, etc)• List View Control
![Page 11: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/11.jpg)
Mark Drew – Railo Technologies
But what about the code?
Friday, 28 October 11
1) HTML5 Doctype
![Page 12: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/12.jpg)
Mark Drew – Railo Technologies
But what about the code?
Friday, 28 October 11
1) HTML5 Doctype
![Page 13: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/13.jpg)
Mark Drew – Railo Technologies
But what about the code?
Friday, 28 October 11
2) jQuery Core JS
![Page 14: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/14.jpg)
Mark Drew – Railo Technologies
But what about the code?
Friday, 28 October 11
3) jQuery Mobile JS
![Page 15: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/15.jpg)
Mark Drew – Railo Technologies
But what about the code?
Friday, 28 October 11
4) jQuery Mobile CSS
![Page 16: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/16.jpg)
Mark Drew – Railo Technologies
But what about the code?
Friday, 28 October 11
Nothing there yet, we have to add some Data-Roles
![Page 17: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/17.jpg)
Mark Drew – Railo Technologies
Data-Role?• Added by HTML5
• Starts with “data-”
• Custom attributes.
More here: http://ejohn.org/blog/html-5-data-attributes/
Friday, 28 October 11
HTML5 added a feature called custom data attributes.Any tag attribute that begins with data- may be used as a custom data storage associated with the element. So instead of doing <div id=”cat#cat.id#”></div> you can do <div data-id=”#cat.id#”>...</div> and it will still pass as valid HTML5. More at John Resig’s blog: http://ejohn.org/blog/html-5-data-attributes/
![Page 18: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/18.jpg)
Mark Drew – Railo Technologies
JQueryMobile & Data-Role• HTML Attribute: data-role
• data-role=”page”
• data-role=”header”
• data-role=”footer”
• data-role=”navbar”
• data-role=”button”
• data-role=”listview”
• data-role=”controlgroup”
• data-role=”fieldcontain”
Friday, 28 October 11
jQuery Mobile uses an HTML attribute called: data-role to associate an element with a widget. For example:data-role=”page” data-role=”header” data-role=”footer” data-role=”navbar” data-role=”button” data-role=”listview” data-role=”controlgroup” data-role=”fieldcontain”
![Page 19: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/19.jpg)
Mark Drew – Railo Technologies
Pages
Friday, 28 October 11
A HTML Document can consist of multiple pages. Pages are linked together via a link to #pageElementID
![Page 20: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/20.jpg)
Mark Drew – Railo Technologies
Pages
Friday, 28 October 11
![Page 21: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/21.jpg)
Mark Drew – Railo Technologies
Themes
Friday, 28 October 11
• jQuery Mobile comes with several color schemes which can be controlled using the data-theme attribute.• You can specify a data-theme on a page, buttons, toolbar’s, etc. • Try specifying data-theme=a,b,c,d,e
![Page 22: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/22.jpg)
Mark Drew – Railo Technologies
Buttons
Friday, 28 October 11
You can create a button by adding data-role=”button” to a button tag, an a tag, or input type=submit|button|reset|image Add an icon to the button using data-icon=”icon-name” By default the icon goes on the left, you can put it on the right, top or bottom by specifying data-iconpos or to just use the icon use data-iconpos=”notext” Comes with several icons• You can use your own custom icons easily.
![Page 23: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/23.jpg)
Mark Drew – Railo Technologies
List View
Friday, 28 October 11
More Advanced List View options availableSuch as inline lists, lists with images etc. see docs.
![Page 24: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/24.jpg)
Mark Drew – Railo Technologies
Forms
Friday, 28 October 11
JQuery makes mobile optimised form controls, such as Numbers Email etc. Other Items include sliders, range dialogsSearch inputs, select, checkboxesForm Element’s should be wrapped in a div with a data- role=”fieldcontain” attribute.
![Page 25: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/25.jpg)
Mark Drew – Railo Technologies
Demo!
JQuery MobileServer Side example
Friday, 28 October 11
The bit where things go wrong!
![Page 26: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/26.jpg)
Mark Drew – Railo Technologies
JQuery Mobile
http://jquerymobile.com/
Friday, 28 October 11
Better support for toolbar fixed (in IOS5 coming this Autumn!)pushState: Now, clean URLs with Ajax-based navigationNew beforechangepage event: Simple hook for building dynamic pages with JavaScript
We’ve just scratched the surface of what you can do with jQuery Mobile.• Checkout: http://jquerymobile.com/
![Page 27: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/27.jpg)
Mark Drew – Railo Technologies
Agenda
Friday, 28 October 11
Back to our agendaLet’s take a quick look at PhoneGap
![Page 28: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/28.jpg)
Mark Drew – Railo Technologies
PhoneGap
A Set of templates for building native iOS, Android,
Blackberry, Symbian, and WebOS using HTML, CSS,
and JavaScript
Friday, 28 October 11
A Set of templates for building native iOS, Android, Blackberry, Symbian, and WebOS Applications using HTML, CSS, and JavaScript.Mainly a set of plugins to the respective SDK, such as XCode
![Page 29: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/29.jpg)
Mark Drew – Railo Technologies
Phonegap.js
http://docs.phonegap.comFriday, 28 October 11
• phonegap.js contains a device neutral javascript API for accessing native device API’s such as:• Camera• Accelerometer• GPS• Compass• Address Book / Contacts• Media (Audio / Video)• Events and notifications• And More see docs.phonegap.com for a full reference.
![Page 30: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/30.jpg)
Mark Drew – Railo Technologies
Platforms
Friday, 28 October 11
iOSAndroidBlackberryHP WebOSSymbianBada
![Page 31: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/31.jpg)
Mark Drew – Railo Technologies
Creating an iOS App• Buy XCode on the Apple App Store
• Download PhoneGap (from http://phonegap.com)
• Run the /iOS/PhoneGap-10.0.0.dmg image
• Run the PhoneGap-10.0.0.pkg file
• Launch Xcode, create a new project, and select the PhoneGap Template
• Click Build & Run to launch the iOS Simulator.
Friday, 28 October 11
Although there is an extra step... you need to add the www folder.
![Page 32: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/32.jpg)
Mark Drew – Railo Technologies
Creating an iOS App
Friday, 28 October 11
![Page 33: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/33.jpg)
Mark Drew – Railo Technologies
Creating an iOS App
Friday, 28 October 11
![Page 34: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/34.jpg)
Mark Drew – Railo Technologies
Creating an iOS App
Friday, 28 October 11
You need to move the www file onto the project
![Page 35: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/35.jpg)
Mark Drew – Railo Technologies
Creating an iOS App
Friday, 28 October 11
![Page 36: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/36.jpg)
Mark Drew – Railo Technologies
Creating an iOS App
Friday, 28 October 11
![Page 37: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/37.jpg)
Mark Drew – Railo Technologies
Creating an iOS App
Friday, 28 October 11
And NOW it works!
![Page 38: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/38.jpg)
Mark Drew – Railo Technologies
Demo!
PhoneGapClient Side Application
https://github.com/cybersonic/jquerymobile_phonegap_demo
Friday, 28 October 11
The bit where things go wrong!Code available on github
![Page 39: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/39.jpg)
Mark Drew – Railo Technologies
Watch Out!
• You need to add external sites to a “White List”
Friday, 28 October 11
Added this at the last minute when a demo wasn’t working
![Page 40: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/40.jpg)
Mark Drew – Railo Technologies
PhoneGap Build
Friday, 28 October 11
![Page 41: JQuery and the Missing Mobile LinkModel Glue and ColdBox (MVC) Contributor ColdBox Contributor. Mark Drew – Railo Technologies Agenda Friday, 28 October 11 ... A HTML Document can](https://reader034.vdocuments.net/reader034/viewer/2022042200/5e9fbe87685a2c62b50de9e8/html5/thumbnails/41.jpg)
Thoughts?
https://github.com/cybersonic/jquerymobile_phonegap_demo
Friday, 28 October 11