Contenu connexe Similaire à mobl - model-driven engineering lecture Similaire à mobl - model-driven engineering lecture (20) mobl - model-driven engineering lecture8. Webkit browser Webkit browser J2ME/C++
Webkit browser Webkit browser .NET
15. WebDatabases
Full-screen support
Location information
(GPS)
Offline support
Canvas
Multi-touch
16. WebDatabases
Full-screen support
Location information
(GPS)
Offline support
Canvas
Accelerator support
Multi-touch
38. screen root() {
...
}
screen promptString(q : String) : String {
...
}
control button(s : String,
onclick : Callback = {}) {
...
}
49. when
var b = true
checkBox(b)
when(b) {
label("Yep")
} else {
label("Nope")
}
50. list
var nums = [1, 2, 3]
group {
list(n in nums) {
item { label(n) }
}
}
52. inline HTML
<img src="img/icon.png"/>
<div class=selected ? selectedStyle
: notSelectedStyle>
...
</div>
53. script blocks
avoid if possible
var n = -1
script {
n = Math.sqrt(9);
}
60. style $baseColor = rgb(100, 100, 100)
style myStyle {
color: rgb($baseColor.r+10,
$baseColor.g+50,
$baseColor.b-20);
font-size: 20px;
}
62. style mixin borderRadiusMixin($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
style myStyle {
color: $baseColor;
borderRadiusMixin(10px);
}
65. entity Task {
name : String (searchable)
done : Bool
tags : Collection<Tag> (inverse: tasks)
}
entity Tag {
name : String (searchable)
tasks : Collection<Task> (inverse: tags)
}
66. var newTask = Task(name="New task");
newTask.done = false;
add(newTask);
75. screen root() {
header("Tasks")
group {
list(t in Task.all() order by date desc) {
item { label(t.name) }
}
}
}
79. var n = 7;
var n2 = Math.round(n/2);
if(n2 > 3) {
alert("More than three!");
} else {
alert("Less than three!");
}
80. type inference
var n = 7;
var n2 = Math.round(n/2);
if(n2 > 3) {
alert("More than three!");
} else {
alert("Less than three!");
}
81. var done = 0;
foreach(t in Task.all()) {
if(t.done) {
done = done + 1;
}
}
82. var done = 0;
foreach(t in Task.all()) {
if(t.done) {
done = done + 1;
}
}
var done = (Task.all()
where done == true)
.count();
86. service SomeService {
resource tasks() : JSON {
uri = "/tasks"
}
resource search(query : String) : JSON {
uri = "/search?q=" + escape(query)
}
}
87. ajax same-source restriction
service Twitter {
resource trends() : JSON {
uri = "/_proxy/api.twitter.com/1/trends.json"
}
resource search(query : String) : JSON {
uri = "/_proxy/search.twitter.com/search.json?q="
+ escape(query)
}
}
89. type Trend {
name : String
url : String
}
function trendsMapper(json : JSON) : [Trend] {
return json.trends;
}
90. resource trends() : JSON {
uri = "/_proxy/api.twitter.com/1/trends.json"
mapper = trendsMapper
}
91. screen root() {
var trends = Twitter.trends()
header("Twitter trends")
group {
list(topic in trends) {
item {
label(topic.name)
}
}
}
}
101. roadmap
1. design core abstractions + native interface
2. enable user land abstractions
3a. support successful ULAs with syntax
102. roadmap
1. design core abstractions + native interface
2. enable user land abstractions
3a. support successful ULAs with syntax
3b. support common native interface cases
with core abstractions
103. roadmap
1. design core abstractions + native interface
2. enable user land abstractions
3a. support successful ULAs with syntax
3b. support common native interface cases
with core abstractions
106. render page
time
query database
and process
results
...
107. render page
time
query database
browser freeze and process
results
...
114. function displayLocationAndReturn() : Coordinates {
var position = mobl::location::getPosition();
log("Lat: " + position.latitude);
log("Long: " + position.longitude);
return position;
}
115. function displayLocationAndReturn() : Coordinates {
var position = mobl::location::getPosition();
log("Lat: " + position.latitude);
log("Long: " + position.longitude);
return position;
}
function displayLocationAndReturn(callback) {
mobl.location.getPosition(function(position) {
console.log("Lat: " + position.latitude);
console.log("Long: " + position.longitude);
callback(position);
});
};
116. function displayLocationAndReturn() : Coordinates {
var position = mobl::location::getPosition();
log("Lat: " + position.latitude);
log("Long: " + position.longitude);
return position;
}
function displayLocationAndReturn(callback) {
mobl.location.getPosition(function(position) {
console.log("Lat: " + position.latitude);
console.log("Long: " + position.longitude);
callback(position);
});
};
117. function displayLocationAndReturn() : Coordinates {
var position = mobl::location::getPosition();
log("Lat: " + position.latitude);
log("Long: " + position.longitude);
return position;
}
function displayLocationAndReturn(callback) {
mobl.location.getPosition(function(position) {
console.log("Lat: " + position.latitude);
console.log("Long: " + position.longitude);
callback(position);
});
};
119. screen root() {
var n = 8
label(n * n)
button("Inc", onclick={
n = n + 1;
})
}
121. var n = 8
var n = ref(8);
Observable
- set(value)
- get()
- addEventListener(eventType, callback)
122. label(n * n)
var node = $("<span>");
node.text(n.get() * n.get());
n.addEventListener("change", function() {
node.text(n.get() * n.get());
});
root.append(node);
123. label(n * n)
var node = $("<span>");
node.text(n.get() * n.get());
n.addEventListener("change", function() {
node.text(n.get() * n.get());
});
root.append(node);
124. label(n * n)
var node = $("<span>");
node.text(n.get() * n.get());
n.addEventListener("change", function() {
node.text(n.get() * n.get());
});
root.append(node);
125. button("Inc", onclick={
n = n + 1;
})
var node = $("<button ...>");
node.text("Inc");
node.click(function() {
n.set(n.get() + 1);
});
root.append(node);
126. button("Inc", onclick={
n = n + 1;
})
var node = $("<button ...>");
node.text("Inc");
node.click(function() {
n.set(n.get() + 1);
});
root.append(node);
127. screen root() {
var n = 8
label(n * n)
button("Inc", onclick={
n = n + 1;
})
}
128. screen root() {
var n = 8
label(n * n)
button("Inc", onclick={
n = n + 1;
})
}
129. screen root() {
var n = 8
label(n * n)
button("Inc", onclick={
n = n + 1;
})
}
132. entity Task {
name : String (searchable)
description : String (searchable)
done : Bool
date : DateTime
}
var Task = persistence.define('Task', {
name: 'VARCHAR(255)',
description: 'VARCHAR(255)',
done: 'BOOL',
date: 'DATE'
});
Task.textIndex('description');
Task.textIndex('name');
134. foreach(t in Task.all() where done == true) {
alert(t.name);
}
Task.all().filter("done", "=", true).forEach(function(t) {
alert(t.name);
});
136. external entity MyEntity
external type MyType
external control contextMenu()
external screen specialScreen()
external sync function add(o : Object) : void
external style myStyle
137. external sync function add(o : Object) : void
<javascript>
__ns.add = function(o) {
persistence.add(o);
};
</javascript>
151. other DSLs annoyances
experience
programming
paradigms
152. roadmap
1. design core abstractions + native interface
2. enable user land abstractions
3a. support successful ULAs with syntax
3b. support common native interface cases
with core abstractions
153. goal
compiler small
library large (and extensible)
154. how?
- built-in types
- built-in controls
+ native interface
+ sufficiently low-level primitives
+ abstraction mechanisms (screens,
controls, functions, types)
155. native interface
external type Object {
sync function toString() : String
}
external type String : Object {
length : Num
sync function charAt(index : Num) : String
sync function charCodeAt(index : Num) : Num
...
}
external type Num : Object { }
external type Bool : Object { }
external type Dynamic : Object { }
external type Style : String { }
external type Array<T> {
length : Num
sync function get(n : Num) : T
sync function push(item : T) : void
sync function join(sep : String) : String
...
}
158. low-level primitives
control slideupBlock() {
JQuery div@<div onclick={
div.slideUp();
}>
elements()
</div>
}
...
slideupBlock {
label("Click me to slide up")
}
159. roadmap
1. design core abstractions + native interface
2. enable user land abstractions
3a. support successful ULAs with syntax
3b. support common native interface cases
with core abstractions
161. var doneTasks = Task.all()
.filter("done", "=", true)
.order("date", false)
.limit(10);
163. var doneTasks = Task.all()
where done == true
order by date desc
limit 10;
164. roadmap
1. design core abstractions + native interface
2. enable user land abstractions
3a. support successful ULAs with syntax
3b. support common native interface cases
with core abstractions
166. div.header {
background: -webkit-gradient(linear, 0% 0%, 0% 100%,
from(rgb(72, 100, 180)), to(rgb(32, 60, 140)));
background: -moz-linear-gradient(top, rgb(72, 100, 180),
rgb(32, 60, 140));
padding: 0;
height: 2.3em;
font-size: 1.3em;
line-height: 2.3em;
font-weight: bold;
text-align: center;
text-shadow: #477 0px 1px 1px;
color: white;
font-weight: bold;
margin: 0;
z-index: 2;
}
168. little abstraction
div.header {
background: -webkit-gradient(linear, 0% 0%, 0% 100%,
from(rgb(72, 100, 180)), to(rgb(32, 60, 140)));
background: -moz-linear-gradient(top, rgb(72, 100, 180),
rgb(32, 60, 140));
padding: 0;
height: 2.3em;
font-size: 1.3em;
line-height: 2.3em;
font-weight: bold;
text-align: center;
text-shadow: #477 0px 1px 1px;
color: white;
font-weight: bold;
margin: 0;
z-index: 2;
}
169. little abstraction
div.header { mixins
background: -webkit-gradient(linear, 0% 0%, 0% 100%,
from(rgb(72, 100, 180)), to(rgb(32, 60, 140)));
background: -moz-linear-gradient(top, rgb(72, 100, 180),
rgb(32, 60, 140));
padding: 0;
height: 2.3em;
font-size: 1.3em;
line-height: 2.3em;
font-weight: bold;
text-align: center;
text-shadow: #477 0px 1px 1px;
color: white;
font-weight: bold;
margin: 0;
z-index: 2;
}
170. 1. design core abstractions + native interface
2. enable user land abstractions
3a. support successful ULAs with syntax
3b. support common native interface cases
with core abstractions