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

on

  • 1,429 views

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 ...

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.

Statistics

Views

Total Views
1,429
Views on SlideShare
1,378
Embed Views
51

Actions

Likes
1
Downloads
18
Comments
0

3 Embeds 51

http://lanyrd.com 47
http://www.linkedin.com 3
http://coderwall.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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 Presentation Transcript

  • 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
  • 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, WWDC 2007
  • MOBILE WEB
  • 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
  • hybrid appNative App Interpreter Request Interceptor JavaScript Bridge Browser executes JavaScript Device Backend
  • interpreted appNative App interpreter Database Application Script Files Device Backend
  • generated app Generator Generator Input Native App Logic Logic Modeldescribes logic and Database Database complete system Files FilesFiles Database Device Backend
  • 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 Navigation Data Provider
  • demo
  • getting real
  • 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() ) }}
  • 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() ) }}
  • -(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;}
  • -(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;}
  • «Xpand»
  • «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»
  • «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»
  • «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»
  • tool integration
  • demo 2
  • developer’s point of view Simulator Objective-C Device DSLdescribes application Simulator Java Device
  • toolsmith’s point of view «Xpand» Parser Templates Templates iPhone Android Grammar Editor describes DSL EMF MM
  • 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/
  • http://mobile.itemis.de@peterfriese | http://peterfriese.de@hbehrens |!http://heikobehrens.net