MDSD for iPhone and Android

Modellgetriebene App-Entwicklung
für iPhone und Android
Heiko Behrens, itemis
Regionalgruppe Hamburg der GI
Hamburg 24.09.2010
@HBehrens
http://mobile.itemis.de
Dienstag, 28. September 2010

Modellgetriebene App-Entwicklung
für iPhone und Android

/ soft·ware de·vel·op·ment / n.
the set of activities that results in
software products. ~ may include
research, new development,
modification, reuse, maintenance,
or any other activities that result in
software products.

Typical Situations
in
Software Development

Boring code

Accidental complexity

Wrong level of abstraction

Anatomy of Modern Software
schematic code (manually written)
Libraries
Frameworks
manually written
code

package templates;
import java.util.*;
import java.io.Serializable;
import javax.persistence.*;
@SuppressWarnings("serial")
@Entity
public class Customer implements Serializable {
private Long id;
private String name;
private Address address;
private Set<Order> orders = new HashSet<Order>();
// No-arg constructor
public Customer() {
}
@Id
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Address getAddress() {
return address;
}
public void setAddress(Address address) {
this.address = address;
}
@OneToMany
public Collection<Order> getOrders() {
return orders;
}
public void setOrders(Set<Order> orders) {
this.orders = orders;
}
}

package templates;
import java.io.Serializable;
import java.util.*;
import javax.persistence.*;
@SuppressWarnings("serial")
@Entity
public class Customer implements Serializable {
private Long id;
private String name;
private Address address;
private Set<Order> orders = new HashSet<Order>();
// No-arg constructor
public Customer() {
}
@Id
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Address getAddress() {
return address;
}
public void setAddress(Address address) {
this.address = address;
}
@OneToMany
public Collection<Order> getOrders() {
return orders;
}
public void setOrders(Set<Order> orders) {
this.orders = orders;
}
}

Common Approaches
to
Avoid Redundancy

Wizards

This wizard whips up a
complete and running
legacy application with
just a single click.

Designers

Model-Driven
Software Development

Raise the level
of abstraction
where possible
and generate
code wisely.

One cannot
abstract away
everything.
Manual code is
great for all the
special cases and
details.

Use the best of both worlds at the same time.

Suppose...

You’d want to core an apple...

... for your kids.

Right tool for the job
?

Your trusty swiss army knife!

You’d want to core a few more apples...

... for an apple cake.

Still the best tool for the job?

Better use this one

...and this one

... a DSL is ...

A specific tool
for a specific job

Use DSLs to describe the world

select name, salary
from employees
where salary > 2000
order by salary
^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$

http://mobl-lang.org/
http://code.google.com/p/iphonical/
http://code.google.com/p/applause/
applause
iPhonical
mobl

entity Vortrag {
String titel
String untertitel
String sprecher
String beschreibung
}
contentprovider AllVortragItems
returns Vortrag[]
fetches XML
from "http://spreadsheets.google.com/feeds/list/.../public/values"
selects "feed.entry"
tableview VortragListe(Vortrag[] items) {
title= "Vorträge"
section {
cell Subtitle foreach items as i {
text= i.titel
details= i.untertitel
action= VortragDetailsView( i )
}
}
}
tabbarApplication itemisApp {
button {
title= "Vorträge"
icon= "66-microphone.png"
view= VortragListe( AllVortragItems() )
}
button {
title= "Referenten"
icon= "person.png"
view= SprecherListe( AllSprecherItems() )
}
}
Entities & Data Access
Views & Actions
Navigation

... for building DSLs?
Why not use a DSL...

http://www.eclipse.org/Xtext/
@xtext

Superclass
Subclass Class
ECore meta model
LL(*) Parser Editor
Model
G
r
a
m
m
a
r
Generator
Runtime

Grammar (similar to EBNF)
grammar org.xtext.example.Entity with org.eclipse.xtext.common.Terminals
generate entity "http://www.xtext.org/example/Entity"
Model:
(types+=Type)*;
Type:
TypeDef | Entity;
TypeDef:
"typedef" name=ID ("mapsto" mappedType=JAVAID)?;
JAVAID:
name=ID("." ID)*;
Entity:
"entity" name=ID ("extends" superEntity=[Entity])?
"{"
(attributes+=Attribute)*
"}";
Attribute:
type=[Type] (many?="*")? name=ID;

grammar org.xtext.example.Entity
with org.eclipse.xtext.common.Terminals
generate entity
"http://www.xtext.org/example/Entity"
Model:
(types+=Type)*;
Type:
TypeDef | Entity;
TypeDef:
"typedef" name=ID
("mapsto" mappedType=JAVAID)?;
JAVAID:
name=ID("." ID)*;
Entity:
"entity" name=ID
("extends" superEntity=[Entity])?
"{"
(attributes+=Attribute)*
"}";
Attribute:
type=[Type] (many?="*")? name=ID;
entity
Model
*
name: EString
Type
types
TypeDef Entity
name: EString
JAVAID
superEntity
mappedType
name: EString
many: EBoolean
Attribute
attributes
type
Meta model inference

Let’s build a DSL
for Mobile Apps

Anatomy of an iPhone app
Table view
View title
Tab bar
Tab bar button
Name
Image
Speaker
Title
Location
Session
Entity
Data Provider
Table cell

Mapping concepts
Table view
View title
Table cell
Tab bar
Tab bar button
Entity
Data Provider
tabbarApplication itemisApp {
button {
title= "Blog"
icon= "08-chat.png"
view= BlogList( Blogposts() )
}
button {
title= "Talks"
icon= "66-microphone.png"
view= VortragListe( AllVortragItems() )
}
button {
title= "Speakers"
icon= "person.png"
view= SprecherListe( AllSprecherItems() )
}
}

Mapping concepts
Table view
View title
Table cell
Tab bar
Tab bar button
Entity
Data Provider
entity BlogItem {
String title
String author
String link
String description
String pubDate
BlogItem subItem
}
entity Sprecher {
String name
String beschreibung
String email
String blog
String fotourl
String vortraege
}
entity Vortrag {
String titel
String untertitel
String sprecher
String beschreibung
String zeit
Vortrag fortsetzung
}

Mapping concepts
Table view
View title
Table cell
Tab bar
Tab bar button
Entity
Data Provider
contentprovider Blogposts
returns BlogItem[]
fetches XML
from "http://blogs.itemis.de/?showfeed=1"
selects "rss.channel.item"

contentprovider AllVortragItems
returns Vortrag[]
fetches XML
from "http://spreadsheets.google.com/feeds/
list/0Au3-oaNYhfPIdEpRQWxpZnJyX2JCNUdtT1Z4M1B4SkE/1/
public/values"
selects "feed.entry"

Mapping concepts
Table view
View title
Table cell
Tab bar
Tab bar button
Entity
Data Provider tableview BlogList(BlogItem[] items) {
title= "itemis blog"
section {
cell Subtitle foreach items as i {
text= i.author
details= i.title
image= ("http://blogs.itemis.de/wp-content/
themes/itemis-WP-Theme/photos/" urlconform(i.author)
".jpg")
action= BlogDetails(i)
}
}
}

Type safe
Produces any
kind of text
Can run standalone
(ANT / Maven)
Debugger
Profiler
Eclipse-based
Editor
Protected regions
Cartridges
Outlets
Polymorphism

tableview SpeakerList(
Speaker[] speakers)
{
title= "Speakers"
section
{
cell Default foreach
speakers as speaker
{
text= speaker.name
image= speaker.smallImageURL
action= SpeakerDetails
(SpeakerById(
speaker.speakerId))
}
}
}
Mapping concepts to code

- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
!
id item = [self.items objectAtIndex: indexPath.row];
!
UITableViewCell *cell =
[self cellDefaultForTableView:tableView];
cell.textLabel.text = [item valueForKeyPath:@"name"];
!
NSString *imageURL = [item valueForKeyPath:@"fotourl"];
cell.imageView.image = [self getImage: imageURL
withLoadingImage:@"personLoading.png"
andErrorImage:@"personUnknown.png"];
return cell;
}
Cell Rendering

- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
!
!
UITableViewCell *cell =
[self cellDefaultForTableView:tableView];
cell.textLabel.text = [item valueForKeyPath:@"name"];
!
NSString *imageURL = [item valueForKeyPath:@"fotourl"];
cell.imageView.image = [self getImage: imageURL
withLoadingImage:@"personLoading.png"
andErrorImage:@"personUnknown.png"];
return cell;
}
Cell Rendering
Speaker[] speakers)
{
title= "Speakers"
section
{
speakers as speaker
{
text= speaker.name
(SpeakerById(
speaker.speakerId))
}
}
}

- (void)tableView:(UITableView *)tableView
didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
IPContentProvider *provider =
[IPSimpleContentProvider providerWithContent:item
andProviders:self.contentProvider.providers];
SprecherDetailsViewController *controller =
[[SprecherDetailsViewController alloc] init];
controller.contentProvider = provider;
[self.navigationController pushViewController:
controller animated: TRUE];
[controller release];
}
User Interaction
Speaker[] speakers)
{
title= "Speakers"
section
{
speakers as speaker
{
text= speaker.name
(SpeakerById(
speaker.speakerId))
}
}
}

Speaker[] speakers)
{
title= "Speakers"
section
{
speakers as speaker
{
text= speaker.name
(SpeakerById(
speaker.speakerId))
}
}
}
«DEFINE viewModule FOR SectionedView»
«FILE filenameModule()»
#import "«filenameHeader()»"
#import "NSObject+Applause.h"
«EXPAND imports»
@implementation «className()»
«EXPAND sectionCount»
«EXPAND sectionTitleHeader»
«EXPAND rowCounts»
«EXPAND cellDescriptions»
«EXPAND cellSelections»
«EXPAND staticData»
@end
«ENDFILE»
«ENDDEFINE»
Template Invocation

Demo

@HBehrens
http://HeikoBehrens.net
mobile.itemis.de
eclipse.org
code.google.com/p/applause
twitter
blog
consulting
Xtext/Xpand
applause

MDSD for iPhone and Android

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to MDSD for iPhone and Android

Similar to MDSD for iPhone and Android (20)

More from Heiko Behrens

More from Heiko Behrens (8)

Recently uploaded

Recently uploaded (20)

MDSD for iPhone and Android