cross-platform native mobile development with eclipse

37
with Eclipse @peterfriese | http://peterfriese.de http://www.zuehlke.com Cross-Platform, Native Mobile Development

Upload: peter-friese

Post on 15-Jan-2015

2.333 views

Category:

Technology


1 download

DESCRIPTION

Developing great apps for mobile platforms like Android, iOS or mobile web is a challenging task. Not only do you have to take into consideration the limited resources your app has at it's disposal, you also have to follow the established UI idioms - which may differ on the respective platforms. In this session, I will demonstrate how you can build mobile apps with tools from the Eclipse ecosystem. Based on real-world examples I will present a domain-specific language we used to mobilize enterprise systems or to create the official Eclipse Summit Europe conference app (http://bit.ly/ese_app_de). What's more, I will show you how to overcome the tedium of having to manually port your application from one platform to other platform technologies such as Objective-C or Django/Python. Finally, I will show how to integrate Eclipse tooling with external tools such as Apple's Xcode and Google App Engine. See http://lanyrd.com/2011/eclipsecon-europe/shhmy/

TRANSCRIPT

Page 1: Cross-Platform Native Mobile Development with Eclipse

with Eclipse

@peterfriese | http://peterfriese.dehttp://www.zuehlke.com

Cross-Platform, Native Mobile Development

Page 2: Cross-Platform Native Mobile Development with Eclipse

cell phone usage is ubiquitous

Page 3: Cross-Platform Native Mobile Development with Eclipse

cell phone usage is ubiquitous

Page 4: Cross-Platform Native Mobile Development with Eclipse
Page 5: Cross-Platform Native Mobile Development with Eclipse

we use

our phones

to mana

ge eve

ry asp

ect

of our

lives

Page 6: Cross-Platform Native Mobile Development with Eclipse

People are !fferent

Page 7: Cross-Platform Native Mobile Development with Eclipse

... so #ey have !fferent ta$es!

Page 8: Cross-Platform Native Mobile Development with Eclipse

countless devices

Page 9: Cross-Platform Native Mobile Development with Eclipse

diversity of platforms

Page 10: Cross-Platform Native Mobile Development with Eclipse

Javapublic class SpeakersList extends GenericListActivity<Speaker> {

List<Speaker> speakers;

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setTitle("Speakers");

speakers = getItemsFromProvider();

ArrayList<AbstractRowAdapter> rowAdapters = new ArrayList<AbstractRowAdapter>();

Iterable<Speaker> items1 = speakers; for (Speaker i : items1) rowAdapters.add(new Cell1(i));

setListAdapter(new GenericItemAdapter(this, rowAdapters)); finishCreation();

}

Page 11: Cross-Platform Native Mobile Development with Eclipse

C#public partial class SpeakerDetailsDetailsView : PhoneApplicationPage{ public SpeakerDetailsDetailsView() { InitializeComponent(); }

protected override void OnNavigatedTo(NavigationEventArgs e) { string selectedIndex = ""; if (NavigationContext.QueryString.TryGetValue("itemByIndex", out selectedIndex)) { int index = int.Parse(selectedIndex); DataContext = App.RootViewModelProvider.BlogpostsModelProvider().BlogItems[index]; } }}

Page 12: Cross-Platform Native Mobile Development with Eclipse

Objective-C@implementation SpeakersListViewController

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { if(section == 0) { return [[[contentProvider valueForKeyPath:@"content"] asArray] count]; } else return 0;}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { id item = [self.items objectAtIndex: indexPath.row]; IPContentProvider *provider = [(itemisAppProviders*)contentProvider.providers

providerForSpeakerByName: [item valueForKeyPath:@"name"]]; SpeakerDetailsViewController *controller = [[SpeakerDetailsViewController alloc] init]; controller.contentProvider = provider; [self.navigationController pushViewController: controller animated: TRUE]; [controller release];}

Page 13: Cross-Platform Native Mobile Development with Eclipse

HTML{% extends "generated/application.html" %}{% block title%}Speakers{% endblock %}{% block content_class %}table list{% endblock %}

{% block content %}<ul>{% for s in data|to_list %} <li> {% url views.SpeakerDetailsBySpeakerByName s.name|urlencode as url %} <a href="{{ url }}"> <div class="cell_text">{{s.name|safe}}</div> </a> </li>{% endfor %}</ul>{% endblock %}

Page 14: Cross-Platform Native Mobile Development with Eclipse

server-side web

Device

Web Browser

Backend

Web Serverexecutes application

logic

Files Database

Page 15: Cross-Platform Native Mobile Development with Eclipse

client-side web

Device

Web Browser

Backend

DatabaseFiles

JavaScriptexecutes application logic

Page 16: Cross-Platform Native Mobile Development with Eclipse

hybrid app

Device

Native App

Browserexecutes JavaScript

JavaScript Bridge

Request Interceptor

Interpreter

Backend

Page 17: Cross-Platform Native Mobile Development with Eclipse

interpreted app

Device

Native App

Application Script

interpreter

Backend

Files

Database

Page 18: Cross-Platform Native Mobile Development with Eclipse

Generator Input

Device

Native App

Logic

Backend

Files

Database

Logic

Files

Database

DatabaseFiles

Modeldescribes logic andcomplete system

Generator

generated app

Page 19: Cross-Platform Native Mobile Development with Eclipse

App Anatomy 101

Page 20: Cross-Platform Native Mobile Development with Eclipse

App Anatomy 101Views

Page 21: Cross-Platform Native Mobile Development with Eclipse

App Anatomy 101CellsViews

Page 22: Cross-Platform Native Mobile Development with Eclipse

App Anatomy 101NavigationCellsViews

Page 23: Cross-Platform Native Mobile Development with Eclipse

App Anatomy 101EntitiesSession

titleroom

Navigation

Cells

Views

Page 24: Cross-Platform Native Mobile Development with Eclipse

App Anatomy 101

ContentProviders

Sessiontitleroom

Entities

Navigation

Cells

Views

Page 25: Cross-Platform Native Mobile Development with Eclipse

App Anatomy 101

ContentProviders

Sessiontitleroom

Entities

Navigation

Cells

Views

Page 26: Cross-Platform Native Mobile Development with Eclipse

DSL for mobile

ContentProviders

Entities

Navigation

Cells

Views

Page 27: Cross-Platform Native Mobile Development with Eclipse

NavigationtabbarApplication itemisApp {

button { title="News" icon="calendar.png" view=NewsList( CurrentTimeline() ) }

button { title= "Tue" icon= "calendar.png" view= SessionsList( Sessions("2011-11-03 ") ) }

button { title= "Speakers" icon= "person" view= SpeakersList( AllSpeakers() ) } }

Page 28: Cross-Platform Native Mobile Development with Eclipse

Viewstableview SessionsList(Session[] sessions) { title= "Sessions" section { } }}

Page 29: Cross-Platform Native Mobile Development with Eclipse

Cellstableview SessionsList(Session[] sessions) { title= "Sessions" section { cell Subtitle foreach items as item { details= item.title action=NewsItemDetailView(item) } }}

Page 30: Cross-Platform Native Mobile Development with Eclipse

Entitiesentity Session { String title String id String room Date startTime Date endTime}

Page 31: Cross-Platform Native Mobile Development with Eclipse

ContentProviderscontentprovider Sessions(String day) returns Session[] fetches XML from ("http://eclipsecon.org/ece2011?" day) selects "sessions.session"

Page 32: Cross-Platform Native Mobile Development with Eclipse

Demo :)

Page 33: Cross-Platform Native Mobile Development with Eclipse
Page 34: Cross-Platform Native Mobile Development with Eclipse

«Xpand»

Page 35: Cross-Platform Native Mobile Development with Eclipse

Grammardescribes DSL

«Xpand»Parser

Editor

TemplatesiPhone

TemplatesAndroid

EMF MM

Toolsmith’s point of view

Page 36: Cross-Platform Native Mobile Development with Eclipse

Extending Applause

1. Create a new generator bundle

2. Provide build strategy<extension point="org.applause.lang.ui.buildstrategy"> <buildstrategy class="org.applause.lang.generator.wp7.builder.WP7BuildStrategy"> </buildstrategy></extension>

3. Provide template project

<extension point="org.applause.lang.ui.mobileplatform"> <mobileplatform name="Windows Phone 7" projectNameSuffix="WP7" templateProject="templateproject/project.zip"> </mobileplatform></extension>