Thanks to the advent of almost ubiquitous mobile internet and fueled by thousands of add-on applications, smartphones enjoy an increasing popularity. Companies who want to reach their customers with mobile devices need to consider implementing their solutions for an ever increasing plethora of devices and platforms. Given the costs for multi-platform development, the million-dollar question is, can we build multi-platform applications which address the individual characteristics of the respective platforms without sacrificing stability and slick UIs? In this talk, we will explain how we built APPLause, a DSL for mobile apps, using model-driven approaches to enable us to target multiple platforms at once. We will show how we developed the language along the concepts of the supported platforms, while at the same time making sure the generated application can be extended manually where needed. The DSL we describe has been used to build the conference app for ESE (available for iPhone and Android) and is available as open source.

1. Models To Go
Peter Friese, itemis
Heiko Behrens, itemis
@peterfriese | @HBehrens
@itemismobile
http://mobile.itemis.de
(c) 2010 Heiko Behrens & Peter Friese
More info: http://www.heikobehrens.net / http://www.peterfriese.de / http://mobile.itemis.com

2. mobile is sexy

3. mobile is challenging

4. diversity of platforms

5. 94 App Stores

6. two categories

7. countless devices

8. How can we address
this diversity?

9. You can write amazing web apps
that look exactly and behave
exactly like apps on the iPhone
Steve Jobs, WWDC 2007

10. MOBILE WEB

11. server-side web client-side web
Web Browser
Web Server
executes application
logic
JavaScript
executes application logic
Web Browser
Files Database
Files Database
Device Backend Device Backend

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

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

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

15. gain speed
through restrictions

18. Lists Details Custom

19. analyzing the problem
http://www.flickr.com/photos/minifig/3174009125/

20. Anatomy
of these apps

21. View
Speaker
Name
Image
Session
Title
Location Cells
Entity
Navigation
Data Provider

23. demo

24. getting real

25. tabbarApplication itemisApp {
button {
title= "Tuesday"
icon= "calendar.png"
view= SessionList( SessionsByDay("0") )
}
button {
title= "Wednesday"
icon= "calendar.png"
view= SessionList( SessionsByDay("1") )
}
button {
title= "Thursday"
icon= "calendar.png"
view= SessionList( SessionsByDay("2") )
}
button {
title= "Speakers"
icon= "person.png"
view= SpeakersList( AllSpeakers() )
}
}

26. tabbarApplication itemisApp {
button {
title= "Tuesday"
icon= "calendar.png"
view= SessionList( SessionsByDay("0") )
}
button {
title= "Wednesday"
icon= "calendar.png"
view= SessionList( SessionsByDay("1") )
}
button {
title= "Thursday"
icon= "calendar.png"
view= SessionList( SessionsByDay("2") )
}
button {
title= "Speakers"
icon= "person.png"
view= SpeakersList( AllSpeakers() )
}
}

27. -(UIViewController*)createController {
! itemisAppProviders *providers = [[[itemisAppProviders alloc] init] autorelease];
! UITabBarController *result = [[UITabBarController alloc] init];
! NSMutableArray *controllers = [NSMutableArray array];
!
! UIViewController<IPUIView> *controller;
! UINavigationController *navController;
! IPContentProvider *contentProvider;
! // controller for @"Tuesday"
! contentProvider = [providers providerForSessionsByDay: @"0"];
!
! controller = [[SessionListViewController alloc] init];
! [controller setContentProvider: contentProvider];
! controller.tabBarItem.title = @"Tuesday";
! controller.tabBarItem.image = [UIImage imageNamed:@"calendar.png"];
! navController = [[UINavigationController alloc] initWithRootViewController:controller];
! [controllers addObject: navController];
! [controller release];
! [navController release];
!
! // controller for @"Wednesday"
! contentProvider = [providers providerForSessionsByDay: @"1"];
!
! controller = [[SessionListViewController alloc] init];
! [controller setContentProvider: contentProvider];
! controller.tabBarItem.title = @"Wednesday";
! controller.tabBarItem.image = [UIImage imageNamed:@"calendar.png"];
! navController = [[UINavigationController alloc] initWithRootViewController:controller];
! [controllers addObject: navController];
! [controller release];
! [navController release];
!
! // controller for @"Thursday"
! contentProvider = [providers providerForSessionsByDay: @"2"];
!
! controller = [[SessionListViewController alloc] init];
! [controller setContentProvider: contentProvider];
! controller.tabBarItem.title = @"Thursday";
! controller.tabBarItem.image = [UIImage imageNamed:@"calendar.png"];
! navController = [[UINavigationController alloc] initWithRootViewController:controller];
! [controllers addObject: navController];
! [controller release];
! [navController release];
!
! // controller for @"Speakers"
! contentProvider = [providers providerForAllSpeakers];
!
! controller = [[SpeakersListViewController alloc] init];
! [controller setContentProvider: contentProvider];
! controller.tabBarItem.title = @"Speakers";
! controller.tabBarItem.image = [UIImage imageNamed:@"person.png"];
! navController = [[UINavigationController alloc] initWithRootViewController:controller];
! [controllers addObject: navController];
! [controller release];
! [navController release];
! result.viewControllers = controllers;
! return result;
}

28. -(UIViewController*)createController {
! itemisAppProviders *providers = [[[itemisAppProviders alloc] init] autorelease];
! UITabBarController *result = [[UITabBarController alloc] init];
! NSMutableArray *controllers = [NSMutableArray array];
!
! UIViewController<IPUIView> *controller;
! UINavigationController *navController;
! IPContentProvider *contentProvider;
! // controller for @"Tuesday"
! contentProvider = [providers providerForSessionsByDay: @"0"];
!
! controller = [[SessionListViewController alloc] init];
! [controller setContentProvider: contentProvider];
! controller.tabBarItem.title = @"Tuesday";
! controller.tabBarItem.image = [UIImage imageNamed:@"calendar.png"];
! navController = [[UINavigationController alloc] initWithRootViewController:controller];
! [controllers addObject: navController];
! [controller release];
! [navController release];
!
! // controller for @"Wednesday"
! contentProvider = [providers providerForSessionsByDay: @"1"];
!
! controller = [[SessionListViewController alloc] init];
! [controller setContentProvider: contentProvider];
! controller.tabBarItem.title = @"Wednesday";
! controller.tabBarItem.image = [UIImage imageNamed:@"calendar.png"];
! navController = [[UINavigationController alloc] initWithRootViewController:controller];
! [controllers addObject: navController];
! [controller release];
! [navController release];
!
! // controller for @"Thursday"
! contentProvider = [providers providerForSessionsByDay: @"2"];
!
! controller = [[SessionListViewController alloc] init];
! [controller setContentProvider: contentProvider];
! controller.tabBarItem.title = @"Thursday";
! controller.tabBarItem.image = [UIImage imageNamed:@"calendar.png"];
! navController = [[UINavigationController alloc] initWithRootViewController:controller];
! [controllers addObject: navController];
! [controller release];
! [navController release];
!
! // controller for @"Speakers"
! contentProvider = [providers providerForAllSpeakers];
!
! controller = [[SpeakersListViewController alloc] init];
! [controller setContentProvider: contentProvider];
! controller.tabBarItem.title = @"Speakers";
! controller.tabBarItem.image = [UIImage imageNamed:@"person.png"];
! navController = [[UINavigationController alloc] initWithRootViewController:controller];
! [controllers addObject: navController];
! [controller release];
! [navController release];
! result.viewControllers = controllers;
! return result;
}

29. «Xpand»

30. «DEFINE moduleFile FOR Application»
«FILE filenameApplicationDelegateModule()»
#import "«filenameApplicationDelegateHeader()»"
#import "IPUIView.h"
#import "«filenameCentralProvidersHeader()»"
«EXPAND importStatements-»
@implementation «applicationDelegateClassname()»
@synthesize window, rootController;
-(UIViewController*)createController {
«centralProvidersClassName()» *providers = [[[«centralProvidersClassName()» alloc] init] autorelease];
UITabBarController *result = [[UITabBarController alloc] init];
NSMutableArray *controllers = [NSMutableArray array];
UIViewController<IPUIView> *controller;
UINavigationController *navController;
IPContentProvider *contentProvider;
«EXPAND barControllerInstance FOREACH buttons»
result.viewControllers = controllers;
return result;
}
- (void)applicationDidFinishLaunching:(UIApplication *)application {
self.rootController = [self createController];
[window addSubview: [self.rootController view]];
[window makeKeyAndVisible];
}
- (void)dealloc {
self.rootController = nil;
[window release];
[super dealloc];
}
@end
«ENDFILE»
«ENDDEFINE»

31. «DEFINE moduleFile FOR Application»
«FILE filenameApplicationDelegateModule()»
#import "«filenameApplicationDelegateHeader()»"
#import "IPUIView.h"
#import "«filenameCentralProvidersHeader()»"
«EXPAND importStatements-»
@implementation «applicationDelegateClassname()»
@synthesize window, rootController;
-(UIViewController*)createController {
«centralProvidersClassName()» *providers = [[[«centralProvidersClassName()» alloc] init] autorelease];
UITabBarController *result = [[UITabBarController alloc] init];
NSMutableArray *controllers = [NSMutableArray array];
UIViewController<IPUIView> *controller;
UINavigationController *navController;
IPContentProvider *contentProvider;
«EXPAND barControllerInstance FOREACH buttons»
result.viewControllers = controllers;
return result;
}
- (void)applicationDidFinishLaunching:(UIApplication *)application {
self.rootController = [self createController];
[window addSubview: [self.rootController view]];
[window makeKeyAndVisible];
}
- (void)dealloc {
self.rootController = nil;
[window release];
[super dealloc];
}
@end
«ENDFILE»
«ENDDEFINE»

32. «DEFINE barControllerInstance FOR TabbarButton»
«IF view.provider != null»
// controller for «this.title.expression('', '')»
contentProvider = «view.provider.contentProvider('providers', '', '')»;
«ENDIF»
controller = [[«view.view.className()» alloc] init];
[controller setContentProvider: contentProvider];
controller.tabBarItem.title = «title.expression('', '')»;
controller.tabBarItem.image = [UIImage imageNamed:«this.icon.expression('','')»];
navController = [[UINavigationController alloc] initWithRootViewController:controller];
[controllers addObject: navController];
[controller release];
[navController release];
«ENDDEFINE»

33. tool integration

34. demo 2

35. developer’s point of view
Simulator
Objective-C
Device
DSL
describes application
Simulator
Java
Device

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

37. APPlause
applause
Simulator
«Xpand»
Objective-C
Device
Parser
Templates Templates
iPhone Android
Grammar
Editor DSL
describes DSL describes application
EMF MM
Simulator
Java
Device
http://code.google.com/p/applause/

39. http://mobile.itemis.de
@peterfriese | http://peterfriese.de
@hbehrens |!http://heikobehrens.net