mobile dev trends and confluence mobile, atlascamp us 2012
DESCRIPTION
Peggy Kuo, Java Developer With Confluence 4.3 we have introduced a brand spanking new mobile UI! Now users on the go are catching up with what's going on and collaborating on the go. Learn how to get your plugin prepped to deliver a compelling mobile web experience for users on the go. This talk will walk you through the steps Atlassian has taken, from design to implementation, to make one of their own Confluence plugins available on mobile devices.TRANSCRIPT
![Page 1: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/1.jpg)
![Page 2: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/2.jpg)
Peggy Kuo@pyko
Mobile Dev Trends and
Confluence Mobile
![Page 3: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/3.jpg)
http://www.flickr.com/photos/jm3/20246294/ by jm3
![Page 4: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/4.jpg)
![Page 5: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/5.jpg)
![Page 6: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/6.jpg)
http://en.wikipedia.org/wiki/File:Mobile_phone_evolution.jpg by Anders
![Page 7: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/7.jpg)
http://www.flickr.com/photos/93755244@N00/3188880766/ by Håkan Dahlström
![Page 8: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/8.jpg)
http://www.flickr.com/photos/johanl/4397800453/ by Johan Larsson
![Page 9: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/9.jpg)
NativeWeb
Cross Platform
http://www.flickr.com/photos/joybot/7608936208/ by Sarah Joy
![Page 10: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/10.jpg)
http://www.flickr.com/photos/chrissamuel/5480184535/ by Chris Samuel
![Page 11: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/11.jpg)
http://www.flickr.com/photos/olibac/2814755278/ by Olivier Bacquet
![Page 12: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/12.jpg)
http://www.flickr.com/photos/scfiasco/4490322916/ by Ed Siasoco
![Page 13: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/13.jpg)
![Page 14: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/14.jpg)
![Page 15: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/15.jpg)
![Page 16: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/16.jpg)
![Page 17: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/17.jpg)
![Page 18: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/18.jpg)
http://www.flickr.com/photos/piermario/495022301/ by Piermario
![Page 19: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/19.jpg)
![Page 20: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/20.jpg)
![Page 21: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/21.jpg)
http://www.flickr.com/photos/50826080@N00/2805839406/ by Stephen Bowler
![Page 22: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/22.jpg)
this slide has been intentionally left blank
![Page 23: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/23.jpg)
REST
http://www.flickr.com/photos/10037058@N08/3696670712/ by James
![Page 24: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/24.jpg)
viewssoy
http://www.flickr.com/photos/left-hand/6030763976/ by Stuart Richards
![Page 25: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/25.jpg)
![Page 26: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/26.jpg)
![Page 27: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/27.jpg)
http://www.flickr.com/photos/generated/4690252194/ by Jared Tarbell
![Page 28: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/28.jpg)
fastclickhttps://github.com/ftlabs/fastclick
http://www.flickr.com/photos/wwarby/3296379139/ by William Warby
![Page 29: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/29.jpg)
http://www.flickr.com/photos/dwysiu/5101688010/ by David Siu
![Page 30: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/30.jpg)
![Page 31: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/31.jpg)
Team CalendarsUpcoming Events
![Page 32: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/32.jpg)
http://www.flickr.com/photos/18117836@N00/143114085/ by Hilary Dotson
![Page 33: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/33.jpg)
Team CalendarsUpcoming Events
![Page 34: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/34.jpg)
<web-panel key="mobile-nav-upcomingEvents" location="atl.mobile.nav/extensions">
<resource name="view" type="velocity" location="com/atlassian/confluence/ extra/calendar3/mobile/ templates/nav-entry.vm"/></web-panel>
![Page 35: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/35.jpg)
<li class="teamcal-mobilenav-entry"> <h5> ${i18n.getText("calendar3.mobile.title")} </h5> <ul> <li> <a href="#teamcal/upcoming" class="content-link teamcal"> ${i18n.getText("calendar3.mobile.upcom
</a> </li> </ul></li>
![Page 36: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/36.jpg)
Team CalendarsUpcoming Events :)
![Page 37: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/37.jpg)
<web-resource key="mobile-teamcal"> <transformation extension="soy"> <transformer key="soyTransformer"/> </transformation>
<resource type="download" name="app.js" location="com/atlassian/confluence/extra/ <resource type="download" name="event-model.js" location="com/atlassian/confluence/ <resource type="download" name="upcoming-collection.js" location="com/atlassian/ <resource type="download" name="upcoming-view.js" location="com/atlassian/confluence/ <resource type="download" name="router.js" location="com/atlassian/confluence/extra/ <resource type="download" name="upcoming-events-soy.js" location="com/atlassian/ <resource type="download" name="main.css" location="com/atlassian/confluence/extra/
<dependency>com.atlassian.confluence.plugins.confluence-mobile:app-frame
</dependency>
<context>atl.mobile.confluence.app.frame
</context></web-resource>
![Page 38: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/38.jpg)
<dependency> com.atlassian.confluence.plugins.confluence-mobile:app-frame</dependency>
<context> atl.mobile.confluence.app.frame</context>
![Page 39: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/39.jpg)
![Page 40: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/40.jpg)
![Page 41: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/41.jpg)
http://www.flickr.com/photos/kimota/105783011/ by gualtiero
![Page 42: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/42.jpg)
Backbone.history.stop();ConfluenceMobile.router.route("teamcal/upcoming",
"upcoming", TeamCalMob.app.showUpcoming);
Backbone.history.start();
![Page 43: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/43.jpg)
contents
header
![Page 44: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/44.jpg)
<div id="inner-container"> <div class="header"> ... </div> <div class="container"> <!-- Render your plugin template here --> </div></div>
![Page 45: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/45.jpg)
![Page 46: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/46.jpg)
4.3+
![Page 47: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/47.jpg)
macros
![Page 48: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/48.jpg)
![Page 49: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/49.jpg)
<xhtml-macro key="dragon-phoenix" name="tichu-hand-generator" class="com.tichu.hand.generator"> <device-type>mobile</device-type>! ! <description>...</description> ...</xhtml-macro>
![Page 50: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/50.jpg)
![Page 51: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/51.jpg)
![Page 52: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/52.jpg)
http://www.flickr.com/photos/12803689@N02/4402962654/ by Clever Cupcakes
![Page 53: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/53.jpg)
![Page 54: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/54.jpg)
![Page 55: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/55.jpg)
http://debug.phonegap.com
<script src="http://debug.phonegap.com/target/target-script-min.js#meeple"></script>
http://debug.phonegap.com/client/#meeple
http://www.flickr.com/photos/booleansplit/4928153062/ by Robert S. Donovan
![Page 56: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/56.jpg)
http://www.flickr.com/photos/kimota/105783011/ by Gilly
![Page 57: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/57.jpg)
http://www.flickr.com/photos/mujitra/5480145795/ by Miki Yoshihito
![Page 58: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/58.jpg)
![Page 59: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012](https://reader033.vdocument.in/reader033/viewer/2022051412/54b5bd384a7959d76e8b4599/html5/thumbnails/59.jpg)
Thank you!