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/

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

2. cell phone usage is ubiquitous

3. cell phone usage is ubiquitous

5. s t
e c
o pn e
h s
p a
r y
u r
o ve
se e ves
u ge
e a
w an our li
m of
to

6. People are !fferent

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

8. countless devices

9. diversity of platforms

10. Java
public 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();
}

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

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

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

14. server-side web
Web Server
executes application
logic
Web Browser
Files Database
Device Backend

15. client-side web
Web Browser
JavaScript
executes application logic
Files Database
Device Backend

16. hybrid app
Native App
Interpreter
Request
Interceptor
JavaScript Bridge
Browser
executes JavaScript
Device Backend

17. interpreted app
Native App
interpreter
Database
Application
Script
Files
Device Backend

18. generated app
Generator
Generator Input Native App
Logic Logic
Model
describes logic and
Database Database
complete system
Files Files
Files Database
Device Backend

19. App Anatomy 101

20. Views

21. Views Cells

22. Views Cells Navigation

23. Entities
Views
Session
Cells title
room
Navigation

24. Views
Session
Cells title
room
Navigation
Entities ContentProviders

25. Views
Session
Cells title
room
Navigation
Entities ContentProviders

26. DSL for mobile
Views
Cells
Navigation
Entities
ContentProviders

27. Navigation
tabbarApplication 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() )
}
}

28. Views
tableview SessionsList(Session[] sessions) {
title= "Sessions"
section {
}
}
}

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

30. Entities
entity Session {
String title
String id
String room
Date startTime
Date endTime
}

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

32. Demo :)

34. «Xpand»

35. Toolsmith’s point of view
«Xpand»
Parser
Templates Templates
iPhone Android
Grammar
Editor
describes DSL
EMF MM

36. Extending Applause
1. Create a new generator bundle
2. Provide build strategy
<extension point="org.applause.lang.ui.buildstrate
gy">
<buildstrategy
class="org.applause.lang.generator.wp7.builder.W
P7BuildStrategy">
</buildstrategy>
</extension>
3. Provide template project
orm">
<extension point="org.applause.lang.ui.mobileplatf
<mobileplatform
name="Windows Phone 7"
projectNameSuffix="WP7"
templateProject="templateproject/project.zip">
</mobileplatform>
</extension>

37. twitter @peterfriese
blog http://peterfriese.de
company http://www.zuehlke.com