mobile dev trends and confluence mobile, atlascamp us 2012

59

Upload: atlassian

Post on 14-Jan-2015

929 views

Category:

Technology


1 download

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
Page 2: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012

Peggy Kuo@pyko

Mobile Dev Trends and

Confluence Mobile

Page 4: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 5: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 13: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 14: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 15: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 16: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 17: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 19: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 20: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 22: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012

this slide has been intentionally left blank

Page 25: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 26: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 30: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 31: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012

Team CalendarsUpcoming Events

Page 33: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012

Team CalendarsUpcoming Events

Page 34: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012

<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

<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

Team CalendarsUpcoming Events :)

Page 37: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012

<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

<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
Page 40: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 42: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012

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

contents

header

Page 44: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012

<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
Page 46: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012

4.3+

Page 47: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012

macros

Page 48: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 49: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012

<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
Page 51: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 53: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 54: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 55: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012

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 58: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012
Page 59: Mobile Dev Trends and Confluence Mobile, AtlasCamp US 2012

Thank you!