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.

2. Mobile Dev Trends
and
Confluence Mobile
Peggy Kuo
@pyko

3. http://www.flickr.com/photos/jm3/20246294/ by jm3

6. http://en.wikipedia.org/wiki/File:Mobile_phone_evolution.jpg by Anders

7. http://www.flickr.com/photos/93755244@N00/3188880766/ by Håkan Dahlström

8. http://www.flickr.com/photos/johanl/4397800453/ by Johan Larsson

9. Native
Web
Cross Platform
http://www.flickr.com/photos/joybot/7608936208/ by Sarah Joy

10. http://www.flickr.com/photos/chrissamuel/5480184535/ by Chris Samuel

11. http://www.flickr.com/photos/olibac/2814755278/ by Olivier Bacquet

12. http://www.flickr.com/photos/scfiasco/4490322916/ by Ed Siasoco

18. http://www.flickr.com/photos/piermario/495022301/ by Piermario

21. http://www.flickr.com/photos/50826080@N00/2805839406/ by Stephen Bowler

22. this slide has been intentionally left blank

23. REST
http://www.flickr.com/photos/10037058@N08/3696670712/ by James

24. views
soy
http://www.flickr.com/photos/left-hand/6030763976/ by Stuart Richards

27. http://www.flickr.com/photos/generated/4690252194/ by Jared Tarbell

28. fastclick
https://github.com/ftlabs/fastclick
http://www.flickr.com/photos/wwarby/3296379139/ by William Warby

29. http://www.flickr.com/photos/dwysiu/5101688010/ by David Siu

31. Team Calendars
Upcoming Events

32. http://www.flickr.com/photos/18117836@N00/143114085/ by Hilary Dotson

33. Team Calendars
Upcoming Events

34. <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>

35. <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>

36. Team Calendars
Upcoming Events :)

37. <web-resource key="mobile-teamcal">
<transformation extension="soy">
<transformer key="soyTransformer"/>
</transformation>
<resource type="download" name="app.js" location="com/atlassia
<resource type="download" name="event-model.js" location="com/
<resource type="download" name="upcoming-collection.js" locati
<resource type="download" name="upcoming-view.js" location="co
<resource type="download" name="router.js" location="com/atlas
<resource type="download" name="upcoming-events-soy.js" locati
<resource type="download" name="main.css" location="com/atlass
<dependency>
com.atlassian.confluence.plugins.confluence-mobile:app-frame
</dependency>
<context>
atl.mobile.confluence.app.frame
</context>
</web-resource>

38. <dependency>
com.atlassian.confluence.plugins.confluence-mobile:app-frame
</dependency>
<context>
atl.mobile.confluence.app.frame
</context>

41. http://www.flickr.com/photos/kimota/105783011/ by gualtiero

42. Backbone.history.stop();
ConfluenceMobile.router.route("teamcal/upcoming",
"upcoming",
TeamCalMob.app.showUpcoming);
Backbone.history.start();

43. header
contents

44. <div id="inner-container">
<div class="header">
...
</div>
<div class="container">
<!-- Render your plugin template here -->
</div>
</div>

46. 4.3+

47. macros

49. <xhtml-macro key="dragon-phoenix"
name="tichu-hand-generator"
class="com.tichu.hand.generator">
<device-type>mobile</device-type>
<description>...</description>
...
</xhtml-macro>

52. http://www.flickr.com/photos/12803689@N02/4402962654/ by Clever Cupcakes

55. 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

56. http://www.flickr.com/photos/kimota/105783011/ by Gilly

57. http://www.flickr.com/photos/mujitra/5480145795/ by Miki Yoshihito

59. Thank you!