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
Peggy Kuo@pyko
Mobile Dev Trends and
Confluence Mobile
http://www.flickr.com/photos/jm3/20246294/ by jm3
http://en.wikipedia.org/wiki/File:Mobile_phone_evolution.jpg by Anders
http://www.flickr.com/photos/93755244@N00/3188880766/ by Håkan Dahlström
http://www.flickr.com/photos/johanl/4397800453/ by Johan Larsson
NativeWeb
Cross Platform
http://www.flickr.com/photos/joybot/7608936208/ by Sarah Joy
http://www.flickr.com/photos/chrissamuel/5480184535/ by Chris Samuel
http://www.flickr.com/photos/olibac/2814755278/ by Olivier Bacquet
http://www.flickr.com/photos/scfiasco/4490322916/ by Ed Siasoco
http://www.flickr.com/photos/piermario/495022301/ by Piermario
http://www.flickr.com/photos/50826080@N00/2805839406/ by Stephen Bowler
this slide has been intentionally left blank
REST
http://www.flickr.com/photos/10037058@N08/3696670712/ by James
viewssoy
http://www.flickr.com/photos/left-hand/6030763976/ by Stuart Richards
http://www.flickr.com/photos/generated/4690252194/ by Jared Tarbell
fastclickhttps://github.com/ftlabs/fastclick
http://www.flickr.com/photos/wwarby/3296379139/ by William Warby
http://www.flickr.com/photos/dwysiu/5101688010/ by David Siu
Team CalendarsUpcoming Events
http://www.flickr.com/photos/18117836@N00/143114085/ by Hilary Dotson
Team CalendarsUpcoming Events
<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>
<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>
Team CalendarsUpcoming Events :)
<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>
<dependency> com.atlassian.confluence.plugins.confluence-mobile:app-frame</dependency>
<context> atl.mobile.confluence.app.frame</context>
http://www.flickr.com/photos/kimota/105783011/ by gualtiero
Backbone.history.stop();ConfluenceMobile.router.route("teamcal/upcoming",
"upcoming", TeamCalMob.app.showUpcoming);
Backbone.history.start();
contents
header
<div id="inner-container"> <div class="header"> ... </div> <div class="container"> <!-- Render your plugin template here --> </div></div>
4.3+
macros
<xhtml-macro key="dragon-phoenix" name="tichu-hand-generator" class="com.tichu.hand.generator"> <device-type>mobile</device-type>! ! <description>...</description> ...</xhtml-macro>
http://www.flickr.com/photos/12803689@N02/4402962654/ by Clever Cupcakes
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
http://www.flickr.com/photos/kimota/105783011/ by Gilly
http://www.flickr.com/photos/mujitra/5480145795/ by Miki Yoshihito
Thank you!