cross-platform native mobile development with eclipse

with Eclipse

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

Cross-Platform, Native Mobile Development

cell phone usage is ubiquitous

cell phone usage is ubiquitous

we use

our phones

to mana

ge eve

ry asp

ect

of our

lives

People are !fferent

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

countless devices

diversity of platforms

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();

}

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]; } }}

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];}

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 %}

server-side web

Device

Web Browser

Backend

Web Serverexecutes application

logic

Files Database

client-side web

Device

Web Browser

Backend

DatabaseFiles

JavaScriptexecutes application logic

hybrid app

Device

Native App

Browserexecutes JavaScript

JavaScript Bridge

Request Interceptor

Interpreter

Backend

interpreted app

Device

Native App

Application Script

interpreter

Backend

Files

Database

Generator Input

Device

Native App

Logic

Backend

Files

Database

Logic

Files

Database

DatabaseFiles

Modeldescribes logic andcomplete system

Generator

generated app

App Anatomy 101

App Anatomy 101Views

App Anatomy 101CellsViews

App Anatomy 101NavigationCellsViews

App Anatomy 101EntitiesSession

titleroom

Navigation

Cells

Views

App Anatomy 101

ContentProviders

Sessiontitleroom

Entities

Navigation

Cells

Views

App Anatomy 101

ContentProviders

Sessiontitleroom

Entities

Navigation

Cells

Views

DSL for mobile

ContentProviders

Entities

Navigation

Cells

Views

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() ) } }

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

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

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

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

Demo :)

«Xpand»

Grammardescribes DSL

«Xpand»Parser

Editor

TemplatesiPhone

TemplatesAndroid

EMF MM

Toolsmith’s point of view

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>

@peterfriesehttp://peterfriese.dehttp://www.zuehlke.com

twitterblogcompany