Models To Go                          Peter Friese, itemis                         Heiko Behrens, itemis                  ...
mobile is sexy
mobile is challenging
diversity of platforms
94 App Stores
two categories
countless devices
How can we address  this diversity?
You can write amazing web appsthat look exactly and behaveexactly like apps on the iPhone                  Steve Jobs, WWD...
MOBILE WEB
server-side web                             client-side web                                                Web Browser    ...
hybrid appNative App         Interpreter    Request   Interceptor         JavaScript Bridge          Browser     executes ...
interpreted appNative App         interpreter                  Database  Application    Script                       Files...
generated app    Generator Generator Input       Native App                               Logic     Logic      Modeldescri...
gain speed    through restrictions
Lists   Details   Custom
analyzing the problemhttp://www.flickr.com/photos/minifig/3174009125/
Anatomyof these apps
View      Speaker  Name  Image        Session  Title  Location                        CellsEntity                         ...
demo
getting real
tabbarApplication itemisApp {	 button {	 	 title= "Tuesday"	 	 icon= "calendar.png"	 	 view= SessionList( SessionsByDay("0...
tabbarApplication itemisApp {	 button {	 	 title= "Tuesday"	 	 icon= "calendar.png"	 	 view= SessionList( SessionsByDay("0...
-(UIViewController*)createController {!    itemisAppProviders *providers = [[[itemisAppProviders alloc] init] autorelease]...
-(UIViewController*)createController {!    itemisAppProviders *providers = [[[itemisAppProviders alloc] init] autorelease]...
«Xpand»
«DEFINE moduleFile FOR Application»«FILE filenameApplicationDelegateModule()»#import "«filenameApplicationDelegateHeader()...
«DEFINE moduleFile FOR Application»«FILE filenameApplicationDelegateModule()»#import "«filenameApplicationDelegateHeader()...
«DEFINE barControllerInstance FOR TabbarButton»	 «IF view.provider != null»	 // controller for «this.title.expression(, )»...
tool integration
demo 2
developer’s point of view                                      Simulator                        Objective-C               ...
toolsmith’s point of view                           «Xpand»                 Parser                              Templates ...
APPlause                                     applause                                                                     ...
http://mobile.itemis.de@peterfriese | http://peterfriese.de@hbehrens |!http://heikobehrens.net
Models To Go: How We Built a DSL for Mobile Apps With Tools From the Eclipse Modeling Project
Models To Go: How We Built a DSL for Mobile Apps With Tools From the Eclipse Modeling Project
Models To Go: How We Built a DSL for Mobile Apps With Tools From the Eclipse Modeling Project
Models To Go: How We Built a DSL for Mobile Apps With Tools From the Eclipse Modeling Project
Upcoming SlideShare
Loading in …5
×

Models To Go: How We Built a DSL for Mobile Apps With Tools From the Eclipse Modeling Project

1,420 views
1,359 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,420
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Models To Go: How We Built a DSL for Mobile Apps With Tools From the Eclipse Modeling Project

  1. 1. Models To Go Peter Friese, itemis Heiko Behrens, itemis @peterfriese | @HBehrens @itemismobile http://mobile.itemis.de (c) 2010 Heiko Behrens & Peter FrieseMore info: http://www.heikobehrens.net / http://www.peterfriese.de / http://mobile.itemis.com
  2. 2. mobile is sexy
  3. 3. mobile is challenging
  4. 4. diversity of platforms
  5. 5. 94 App Stores
  6. 6. two categories
  7. 7. countless devices
  8. 8. How can we address this diversity?
  9. 9. You can write amazing web appsthat look exactly and behaveexactly like apps on the iPhone Steve Jobs, WWDC 2007
  10. 10. MOBILE WEB
  11. 11. server-side web client-side web Web Browser Web Server executes application logic JavaScript executes application logicWeb Browser Files Database Files Database Device Backend Device Backend
  12. 12. hybrid appNative App Interpreter Request Interceptor JavaScript Bridge Browser executes JavaScript Device Backend
  13. 13. interpreted appNative App interpreter Database Application Script Files Device Backend
  14. 14. generated app Generator Generator Input Native App Logic Logic Modeldescribes logic and Database Database complete system Files FilesFiles Database Device Backend
  15. 15. gain speed through restrictions
  16. 16. Lists Details Custom
  17. 17. analyzing the problemhttp://www.flickr.com/photos/minifig/3174009125/
  18. 18. Anatomyof these apps
  19. 19. View Speaker Name Image Session Title Location CellsEntity Navigation Data Provider
  20. 20. demo
  21. 21. getting real
  22. 22. 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() ) }}
  23. 23. 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() ) }}
  24. 24. -(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;}
  25. 25. -(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;}
  26. 26. «Xpand»
  27. 27. «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»
  28. 28. «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»
  29. 29. «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»
  30. 30. tool integration
  31. 31. demo 2
  32. 32. developer’s point of view Simulator Objective-C Device DSLdescribes application Simulator Java Device
  33. 33. toolsmith’s point of view «Xpand» Parser Templates Templates iPhone Android Grammar Editor describes DSL EMF MM
  34. 34. APPlause applause Simulator «Xpand» Objective-C Device Parser Templates Templates iPhone Android Grammar Editor DSLdescribes DSL describes application EMF MM Simulator Java Device http://code.google.com/p/applause/
  35. 35. http://mobile.itemis.de@peterfriese | http://peterfriese.de@hbehrens |!http://heikobehrens.net

×