mobl: Een DSL voor mobiele applicatieontwikkeling
0 likes338 views
This document discusses mobile application development using MOBL, a domain-specific language for building mobile web applications. It provides examples of building user interfaces, adding scripting capabilities, modeling and querying data, and integrating with native device APIs like geolocation using higher-order controls. Future directions are mentioned like adaptive UIs, offline support, and hybrid web/native applications. Code samples demonstrate creating a tip calculator, scripting functions, modeling task data, and accessing local storage on a device.
![var results = tx.executeQuery("SELECT * FROM Task");
for(var i = 0; i < results.length; i++) {
alert(results[i].name);
}
synchronous programming](https://image.slidesharecdn.com/mobldevnology-101108144111-phpapp02/85/mobl-Een-DSL-voor-mobiele-applicatieontwikkeling-47-320.jpg)
![tx.executeQuery("SELECT * FROM Task",
function(results) {
for(var i = 0; i < results.length; i++) {
alert(results[i].name);
}
});
...
asynchronous programming](https://image.slidesharecdn.com/mobldevnology-101108144111-phpapp02/85/mobl-Een-DSL-voor-mobiele-applicatieontwikkeling-51-320.jpg)
![service DataProvider {
resource getNearbyConferences(lat : Num, long : Num) : [JSON] {
uri = "/nearbyConferences"
}
resource fetchProgram(conferenceId : String) : [JSON] {
uri = "/conferenceProgram"
}
}
web services](https://image.slidesharecdn.com/mobldevnology-101108144111-phpapp02/85/mobl-Een-DSL-voor-mobiele-applicatieontwikkeling-91-320.jpg)
![service DataProvider {
resource getNearbyConferences(lat : Num, long : Num) : [JSON] {
uri = "/nearbyConferences"
}
resource fetchProgram(conferenceId : String) : [JSON] {
uri = "/conferenceProgram"
}
}
function loadLocalConferences() {
var position = getPosition();
var nearbyConferencesJson = DataProvider.getNearbyConferences(position.latitude,
position.longitude);
foreach(jsonObj in nearbyConferencesJson) {
Conference.fromSelectJson(jsonObj);
}
}
web services](https://image.slidesharecdn.com/mobldevnology-101108144111-phpapp02/85/mobl-Een-DSL-voor-mobiele-applicatieontwikkeling-92-320.jpg)
mobl: Een DSL voor mobiele applicatieontwikkeling
- 1. Zef Hemel, Eelco Visser
- 6. 230,000/day
- 8. 200,000/day
- 11. Objective-C
- 12. Objective-C Java
- 16. Objective-C Java J2ME/C++ HTML/Javascript Java .NET
- 17. AppStore
- 22. WWW
- 27. HTML
- 28. WebDatabases
- 34. WebDatabases Location information (GPS) Threading Canvas Multi-touch Offline support Full-screen support
- 38. mobile web apps
- 47. var results = tx.executeQuery("SELECT * FROM Task"); for(var i = 0; i < results.length; i++) { alert(results[i].name); } synchronous programming
- 48. render page query database and process results ... time
- 49. render page query database and process results ... time browser freeze
- 50. render page send query ... process query result ... time
- 51. tx.executeQuery("SELECT * FROM Task", function(results) { for(var i = 0; i < results.length; i++) { alert(results[i].name); } }); ... asynchronous programming
- 52. tx.executeQuery("SELECT * FROM Task", function(results) { alert("Hello, "); }); alert("world!");
- 53. tx.executeQuery("SELECT * FROM Task", function(results) { tx.executeQuery("INSERT ...", function() { alert("Selected, then inserted"); }); });
- 54. mix of loosely-coupled DSLs poor tool-support for mixed-language projects lack of abstraction in UI asynchronous programming
- 59. application tipcalculator import mobl::ui::generic screen root() { var amount = 10 var percentage = 10 header("Tip calculator") group { item { numField(amount, label="amount") } item { numField(percentage, label="percentage") } item { "$" label(amount * (1 + percentage/100)) } } }
- 60. application tipcalculator import mobl::ui::generic screen root() { var amount = 10 var percentage = 10 header("Tip calculator") group { item { numField(amount, label="amount") } item { numField(percentage, label="percentage") } item { "$" label(amount * (1 + percentage/100)) } } }
- 61. application tipcalculator import mobl::ui::generic screen root() { var amount = 10 var percentage = 10 header("Tip calculator") group { item { numField(amount, label="amount") } item { numField(percentage, label="percentage") } item { "$" label(amount * (1 + percentage/100)) } } }
- 62. application tipcalculator import mobl::ui::generic screen root() { var amount = 10 var percentage = 10 header("Tip calculator") group { item { numField(amount, label="amount") } item { numField(percentage, label="percentage") } item { "$" label(amount * (1 + percentage/100)) } } }
- 63. application tipcalculator import mobl::ui::generic screen root() { var amount = 10 var percentage = 10 header("Tip calculator") group { item { numField(amount, label="amount") } item { numField(percentage, label="percentage") } item { "$" label(amount * (1 + percentage/100)) } } }
- 64. application tipcalculator import mobl::ui::generic screen root() { var amount = 10 var percentage = 10 header("Tip calculator") group { item { numField(amount, label="amount") } item { numField(percentage, label="percentage") } item { "$" label(amount * (1 + percentage/100)) } } }
- 66. application test import mobl::ui::generic function fac(n : Num) : Num { if(n == 1) { return 1; } else { return n * fac(n-1); } } screen promptNum(question : String) : Num { var answer = 0 header(question) { button("Done", onclick={ screen return answer; }) } group { item { numField(answer) } } } screen root() { header("Calculator") var n = 2 group { item { numField(n) } } button("*", onclick={ n = n * promptNum("Multiply with"); }) button("+", onclick={ n = n + promptNum("Add"); }) button("!", onclick={ n = fac(n); }) }
- 67. application test import mobl::ui::generic function fac(n : Num) : Num { if(n == 1) { return 1; } else { return n * fac(n-1); } } screen promptNum(question : String) : Num { var answer = 0 header(question) { button("Done", onclick={ screen return answer; }) } group { item { numField(answer) } } } screen root() { header("Calculator") var n = 2 group { item { numField(n) } } button("*", onclick={ n = n * promptNum("Multiply with"); }) button("+", onclick={ n = n + promptNum("Add"); }) button("!", onclick={ n = fac(n); }) }
- 68. application test import mobl::ui::generic function fac(n : Num) : Num { if(n == 1) { return 1; } else { return n * fac(n-1); } } screen promptNum(question : String) : Num { var answer = 0 header(question) { button("Done", onclick={ screen return answer; }) } group { item { numField(answer) } } } screen root() { header("Calculator") var n = 2 group { item { numField(n) } } button("*", onclick={ n = n * promptNum("Multiply with"); }) button("+", onclick={ n = n + promptNum("Add"); }) button("!", onclick={ n = fac(n); }) }
- 69. application todo import mobl::ui::generic function fac(n : Num) : Num { if(n == 1) { return 1; } else { return n * fac(n-1); } } screen promptNum(question : String) : Num { var answer = 0 header(question) { button("Done", onclick={ screen return answer; }) } group { item { numField(answer) } } } screen root() { header("Calculator") var n = 2 group { item { numField(n) } } button("*", onclick={ n = n * promptNum("Multiply with"); }) button("+", onclick={ n = n + promptNum("Add"); }) button("!", onclick={ n = fac(n); }) }
- 70. application test import mobl::ui::generic function fac(n : Num) : Num { if(n == 1) { return 1; } else { return n * fac(n-1); } } screen promptNum(question : String) : Num { var answer = 0 header(question) { button("Done", onclick={ screen return answer; }) } group { item { numField(answer) } } } screen root() { header("Calculator") var n = 2 group { item { numField(n) } } button("*", onclick={ n = n * promptNum("Multiply with"); }) button("+", onclick={ n = n + promptNum("Add"); }) button("!", onclick={ n = fac(n); }) }
- 71. var pos = getPosition(); alert("Your location is: " + pos);
- 72. var pos = getPosition(); alert("Your location is: " + pos); var pos; getPosition(function(result) { pos = result; alert("Your location is: " + pos); ... }); continuation-passing style transformation
- 73. task 3: data modeling and query
- 74. entity Task { name : String (searchable) done : Bool dateAdded : DateTime }
- 75. entity Task { name : String (searchable) done : Bool dateAdded : DateTime category : Category (inverse: tasks) tags : Collection<Tag> (inverse: tasks) } entity Category { name : String tasks : Collection<Task> (inverse: category) } entity Tag { name : String tasks : Collection<Task> (inverse: tags) }
- 76. screen root() { header("Tasks") { button("Add", onclick={ addTask(); }) } group { list(t in Task.all() order by dateAdded desc) { taskItem(t) } } button("Search", onclick={ search(); }) } screen search() { var phrase = "" header("Search") { backButton() } searchBox(phrase) group { list(t in Task.searchPrefix(phrase)) { taskItem(t) } } }
- 77. screen root() { header("Tasks") { button("Add", onclick={ addTask(); }) } group { list(t in Task.all() order by dateAdded desc) { taskItem(t) } } button("Search", onclick={ search(); }) } screen search() { var phrase = "" header("Search") { backButton() } searchBox(phrase) group { list(t in Task.searchPrefix(phrase)) { taskItem(t) } } }
- 78. control taskItem(t : Task) { item(onclick={ taskDetails(t); }) { checkBox(t.done) " " label(t.name) contextMenu { button("Remove", onclick={ remove(t); }) } } }
- 79. control taskItem(t : Task) { item(onclick={ taskDetails(t); }) { checkBox(t.done) " " label(t.name) contextMenu { button("Remove", onclick={ remove(t); }) } } }
- 80. Task.all()
- 81. Task.all() where done == false && ... order by dateAdded desc limit 10 offset 5
- 82. Task.all() where done == false && ... order by dateAdded desc limit 10 offset 5
- 83. task 4: higher-order controls and native interfaces
- 84. control taskItem(t : Task) { checkBox(t.done) " " label(t.name) contextMenu { button("Remove", onclick={ remove(t); }) } } control taskDetail(t : Task) { group { item { textField(t.name, placeholder="Task name") } item { checkBox(t.done, label="Done") } } } screen root() { header("Tasks") { button("Add", onclick={ addTask(); }) } masterDetail(Task.all() order by dateAdded desc, taskItem, taskDetail) button("Search", onclick={ search(); }) }
- 85. control taskItem(t : Task) { checkBox(t.done) " " label(t.name) contextMenu { button("Remove", onclick={ remove(t); }) } } control taskDetail(t : Task) { group { item { textField(t.name, placeholder="Task name") } item { checkBox(t.done, label="Done") } } } screen root() { header("Tasks") { button("Add", onclick={ addTask(); }) } masterDetail(Task.all() order by dateAdded desc, taskItem, taskDetail) button("Search", onclick={ search(); }) }
- 86. control masterDetail(items : Collection<Dynamic>, masterItem : Control1<Dynamic>, detail : Control1<Dynamic>) { group { list(it in items) { item(onclick={ detailScreen(it, detail); }) { masterItem(it) } } } } screen detailScreen(it : Dynamic, detail : Control1<Dynamic>) { header("Detail") { backButton("Back", onclick={ screen return; }) } detail(it) }
- 89. external type LocalStorage { static sync function getItem(key : String) : Dynamic static sync function setItem(key : String, val : Object) : void static sync function removeItem(key : String) : void static sync function clear() : void } <javascript> firstapp.LocalStorage = window.localStorage; </javascript>
- 90. what else is there?
- 91. service DataProvider { resource getNearbyConferences(lat : Num, long : Num) : [JSON] { uri = "/nearbyConferences" } resource fetchProgram(conferenceId : String) : [JSON] { uri = "/conferenceProgram" } } web services
- 92. service DataProvider { resource getNearbyConferences(lat : Num, long : Num) : [JSON] { uri = "/nearbyConferences" } resource fetchProgram(conferenceId : String) : [JSON] { uri = "/conferenceProgram" } } function loadLocalConferences() { var position = getPosition(); var nearbyConferencesJson = DataProvider.getNearbyConferences(position.latitude, position.longitude); foreach(jsonObj in nearbyConferencesJson) { Conference.fromSelectJson(jsonObj); } } web services
- 93. location & maps
- 96. application confplan offline true title "ConfPlan"
- 97. future
- 98. adaptive user interfaces database sync more high-level controls web/native hybrid (PhoneGap)