DART             Yohan BESCHI – Java Developer                     @yohanbeschi                     +Yohan Beschi2013-04-1...
2013-04-15   Building UIs with Dart   2
Building UIs - Javascript ?2013-04-15                Building UIs with Dart   3
Building UIs - Java ?2013-04-15                Building UIs with Dart   4
Building UIs with Java - But how ?2013-04-15               Building UIs with Dart   5
Programmatic Components with GWTCellTable<User> table = new CellTable<User>();                                            ...
Programmatic Components with GWTCellTable<User> table = new CellTable<User>();                                            ...
The Dart WayTable<User> table = new Table (sorting:true)  ..addColumn(ID, new TextCell((User o) => o.id))  ..addColumn(Fir...
The Dart WayTable<User> table = new Table (sorting:true)  ..addColumn(ID, new TextCell((User o) => o.id))  ..addColumn(Fir...
Dart in few words⦿ Language        ⦿    Object Oriented        ⦿    Optionaly typed        ⦿    Top-level functions       ...
UIs2013-04-15         Building UIs with Dart   11
Objectives                                          <ul>                                            <li>School 1</li>     ...
Classesclass School {                                 class Grade {  String schoolName;                             String...
The Old-Fashioned Way2013-04-15             Building UIs with Dart   14
The Old-Fashioned Wayvoid main() {  String tree = <ul>;     for (School school in schools) {       tree += <li>${school.sc...
The Old-Fashioned Wayvar grades = school.grades;if (grades != null) {  tree += <ul>;     for (Grade grade in grades) {    ...
The Old-Fashioned Wayvar students = grade.students;if (students != null) {  tree += <ul>;     for (Student student in stud...
The Old-Fashioned Wayvoid main() {                                                         tree += </ul>;  String tree = <...
Introducing reusable components2013-04-15              Building UIs with Dart   19
Is there a pattern here ?var grades = school.grades;if (grades != null) {  tree += <ul>;     for (Grade grade in grades) {...
Is there a pattern here ?var grades = school.grades; if (grades != null) {   tree += <ul>;      tree += </ul>; } 2013-04-1...
Is there a pattern here ?var grades = school.grades; if (grades != null) {   tree += <ul>;      for (Grade grade in grades...
Is there a pattern here ?var grades = school.grades; if (grades != null) {   tree += <ul>;      for (Grade grade in grades...
Recursive PatternString doSomething(/* parameters */) {  String tree = ;    var grades = school.grades;    if (grades != n...
Side note – Functions & sugar syntaxint length(String s) {   return s.length;} 2013-04-15                Building UIs with...
Side note – Functions & sugar syntaxint length(String s) {                 int length(String s)   return s.length;        ...
Easy use of reusable componentsvoid main() {  final Tree tree = new Tree(...);} 2013-04-15                Building UIs wit...
Easy use of reusable componentsvoid main() {  final Tree tree = new Tree(...);  tree.setData(schools);  tree.addTo(body, a...
Easy use of reusable componentsvoid main() {  final Tree tree = new Tree(     [new TreeConfig((School s) => s.schoolName, ...
Easy use of reusable componentsclass School {                                 class Grade {  String schoolName;           ...
Implementing a reusable componentstypedef dynamic Accessor(dynamic data);class TreeConfig {  Accessor _value;  Accessor _c...
Implementing a reusable componentstypedef dynamic Accessor(dynamic data);class TreeConfig {  Accessor _value;  Accessor _c...
Implementing a reusable componentstypedef dynamic Accessor(dynamic data);class TreeConfig {  Accessor _value;  Accessor _c...
Implementing a reusable componentstypedef dynamic Accessor(dynamic data);class TreeConfig {  Accessor _value;  Accessor _c...
Implementing a reusable componentsclass Tree {  List<TreeConfig> treeConfigs;     String tree;     Tree(this.treeConfigs);...
Implementing a reusable componentsclass Tree {  List<TreeConfig> treeConfigs;     String tree;     Tree(this.treeConfigs);...
Implementing a reusable componentsclass Tree {  List<TreeConfig> treeConfigs;     String tree;     Tree(this.treeConfigs);...
Implementing a reusable componentsclass Tree {  List<TreeConfig> treeConfigs;     String tree;     Tree(this.treeConfigs);...
Implementing a reusable componentsclass Tree {  List<TreeConfig> treeConfigs;     String tree;     Tree(this.treeConfigs);...
Implementing a reusable componentsString buildOneLevelTree(final List data,                         final List<TreeConfig>...
Implementing a reusable componentsString buildOneLevelTree(final List data,                         final List<TreeConfig>...
Implementing a reusable componentsString buildOneLevelTree(final List data,                         final List<TreeConfig>...
Implementing a reusable componentsString buildOneLevelTree(final List data, final List<TreeConfig> treeNodes,             ...
Implementing a reusable componentsclass Tree {  List<TreeConfig> treeConfigs;  String tree;    Tree(this.treeConfigs);    ...
Are we done yet ?2013-04-15              Building UIs with Dart   45
Getting ride of StringsElement buildOneLevelTree(final List data, final List<TreeConfig> treeNodes,                       ...
Getting ride of Stringsclass Tree {  List<TreeConfig> treeConfigs;  Element tree; // String tree;    Tree(this.treeConfigs...
web_ui2013-04-15            Building UIs with Dart   48
web_ui⦿ Based on HTML5 Web Components Spec⦿ Syntax and uses similar to JSP tags⦿ Template Engine – Compilation needed⦿ Reu...
web_ui and Single-Page Webapps<!DOCTYPE html><html>  <head>    <title>01_web_ui</title>  </head>  <body>    <script type="...
web_ui - The template<!DOCTYPE html><html> <body> </body></html> 2013-04-15                 Building UIs with Dart   51
web_ui - The template<!DOCTYPE html><html> <body>  <element>  </element> </body></html> 2013-04-15                 Buildin...
web_ui - The template<!DOCTYPE html><html> <body>  <element name="x-click-counter">  </element> </body></html>  2013-04-15...
web_ui - The template<!DOCTYPE html><html> <body>  <element name="x-click-counter" constructor="CounterComponent">  </elem...
web_ui - The template<!DOCTYPE html><html> <body>  <element name="x-click-counter" constructor="CounterComponent" extends=...
web_ui - The template<!DOCTYPE html><html> <body>  <element name="x-click-counter" constructor="CounterComponent" extends=...
web_ui - The template<!DOCTYPE html><html> <body>  <element name="x-click-counter" constructor="CounterComponent" extends=...
web_ui - The template<!DOCTYPE html><html> <body>  <element name="x-click-counter" constructor="CounterComponent" extends=...
web_ui - The template<!DOCTYPE html><html> <body>  <element name="x-click-counter" constructor="CounterComponent" extends=...
web_ui – Extending WebComponentclass CounterComponent {}    2013-04-15                Building UIs with Dart   60
web_ui – Extending WebComponentclass CounterComponent extends WebComponent {}    2013-04-15                    Building UI...
web_ui – Extending WebComponentclass CounterComponent extends WebComponent { @observable int count = 0;}    2013-04-15    ...
web_ui – Extending WebComponentclass CounterComponent extends WebComponent { @observable int count = 0;    void increment(...
web_ui – Extending WebComponentclass CounterComponent extends WebComponent { @observable int count = 0;    void increment(...
web_ui and Single-Page Webapps<!DOCTYPE html><html>  <head>    <title>01_web_ui</title>    <link rel="components" href="xc...
web_ui – The applicationvoid main() {}    2013-04-15                 Building UIs with Dart   66
web_ui – The applicationvoid main() {  var element = new Element.html(     <x-click-counter id="click_counter"></x-click-c...
web_ui – The applicationvoid main() {  var element = new Element.html(     <x-click-counter id="click_counter"></x-click-c...
web_ui – The applicationvoid main() {  var element = new Element.html(     <x-click-counter id="click_counter"></x-click-c...
web_ui – The applicationvoid main() {  var element = new Element.html(    <x-click-counter id="click_counter"></x-click-co...
A word about Layouts2013-04-15              Building UIs with Dart   71
A word about Layouts2013-04-15              Building UIs with Dart   72
A word about Layouts2013-04-15              Building UIs with Dart   73
A word about Layouts2013-04-15              Building UIs with Dart   74
A word about Layouts2013-04-15              Building UIs with Dart   75
A word about Layoutsbuilder()  ..div({id : banner})   ..div({id : head}, Dart Playground)   ..div({id : controls})     ..s...
A word about Layoutsbuilder()  ..div({id : banner})   ..div({id : head}, Dart Playground)   ..div({id : controls})     ..s...
A word about Layoutsbuilder()  ..div({id : banner})   ..div({id : head}, Dart Playground)   ..div({id : controls})     ..s...
A word about Layoutsbuilder()  ..div({id : banner})   ..div({id : head}, Dart Playground)   ..div({id : controls})     ..s...
RoadmapToday : M3                               ?? : M4   Summer 2013 : V1 !2013-04-15             Building UIs with Dart ...
The Future of Dart ?2013-04-15               Building UIs with Dart   81
Want to know more ?DartLangFR        ⦿    Mailing-list : dartlangfr (https://groups.google.com/forum/?fromgroups=&hl=en#!f...
Github⦿ Paris JUG        ⦿    https://github.com/yohanbeschi/parisjug_20130409.dart⦿ DevoxxFR 2013        ⦿    https://git...
Questions ?2013-04-15      Building UIs with Dart   84
Upcoming SlideShare
Loading in …5
×

Dart - web_ui & Programmatic components - Paris JUG - 20130409

520 views
464 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
520
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Dart - web_ui & Programmatic components - Paris JUG - 20130409

  1. 1. DART Yohan BESCHI – Java Developer @yohanbeschi +Yohan Beschi2013-04-15 Building UIs with Dart 1
  2. 2. 2013-04-15 Building UIs with Dart 2
  3. 3. Building UIs - Javascript ?2013-04-15 Building UIs with Dart 3
  4. 4. Building UIs - Java ?2013-04-15 Building UIs with Dart 4
  5. 5. Building UIs with Java - But how ?2013-04-15 Building UIs with Dart 5
  6. 6. Programmatic Components with GWTCellTable<User> table = new CellTable<User>(); } });TextColumn<User> idColumn = new TextColumn<User>() { columnSortHandler.setComparator(firstNameColumn, @Override new Comparator<Tester.User>() { public String getValue(User user) { public int compare(User o1, User o2) { return user.id; if (o1 == o2) { } return 0;}; }TextColumn<User> firstNameColumn = new TextColumn<User>() { if (o1 != null) { @Override return (o2 != null) ? o1.firstName.compareTo(o2.firstName) : 1; public String getValue(User user) { } return user.firstName; return -1; } }}; }); columnSortHandler.setComparator(lasteNameColumn,TextColumn<User> lastNameColumn = new TextColumn<User>() { new Comparator<Tester.User>() { @Override public int compare(User o1, User o2) { public String getValue(User user) { if (o1 == o2) { return user.lastName; return 0; } }}; if (o1 != null) {TextColumn<User> ageColumn = new TextColumn<User>() { return (o2 != null) ? o1.lasteName.compareTo(o2.lasteName) : 1; @Override } public String getValue(User user) { return -1; return user.age; } } });}; columnSortHandler.setComparator(ageColumn, new Comparator<Tester.User>() {idColumn.setSortable(true); public int compare(User o1, User o2) {firstNameColumn.setSortable(true); if (o1 == o2) {lastNameColumn.setSortable(true); return 0;ageColumn.setSortable(true); }table.addColumn(idColumn, "ID"); if (o1 != null) {table.addColumn(firstNameColumn, "First name"); return (o2 != null) ? o1.age.compareTo(o2.age) : 1;table.addColumn(lastNameColumn, "Lats name"); }table.addColumn(ageColumn, "Age"); return -1; }ListDataProvider<User> dataProvider = new ListDataProvider<User>(); });dataProvider.addDataDisplay(table); table.addColumnSortHandler(columnSortHandler); table.getColumnSortList().push(firstNameColumn);List<User> list = dataProvider.getList();for (User user : USERS) { list.add(user);}ListHandler<User> columnSortHandler = new ListHandler<Tester.User>(list);columnSortHandler.setComparator(idColumn, new Comparator<Tester.User>() { public int compare(User o1, User o2) { if (o1 == o2) { return 0; } if (o1 != null) { return (o2 != null) ? o1.id.compareTo(o2.id) : 1; } return -1;2013-04-15 Building UIs with Dart 6
  7. 7. Programmatic Components with GWTCellTable<User> table = new CellTable<User>(); } });TextColumn<User> idColumn = new TextColumn<User>() { columnSortHandler.setComparator(firstNameColumn, @Override new Comparator<Tester.User>() { public String getValue(User user) { public int compare(User o1, User o2) { return user.id; if (o1 == o2) { } return 0;}; }TextColumn<User> firstNameColumn = new TextColumn<User>() { if (o1 != null) { @Override return (o2 != null) ? o1.firstName.compareTo(o2.firstName) : 1; public String getValue(User user) { } return user.firstName; return -1; } }}; }); columnSortHandler.setComparator(lasteNameColumn,TextColumn<User> lastNameColumn = new TextColumn<User>() { new Comparator<Tester.User>() { @Override public int compare(User o1, User o2) { public String getValue(User user) { if (o1 == o2) { return user.lastName; return 0; } }}; if (o1 != null) {TextColumn<User> ageColumn = new TextColumn<User>() { return (o2 != null) ? o1.lasteName.compareTo(o2.lasteName) : 1; @Override } public String getValue(User user) { return -1; return user.age; } } });}; columnSortHandler.setComparator(ageColumn, new Comparator<Tester.User>() {idColumn.setSortable(true); public int compare(User o1, User o2) {firstNameColumn.setSortable(true); if (o1 == o2) {lastNameColumn.setSortable(true); return 0;ageColumn.setSortable(true); }table.addColumn(idColumn, "ID"); if (o1 != null) {table.addColumn(firstNameColumn, "First name"); return (o2 != null) ? o1.age.compareTo(o2.age) : 1;table.addColumn(lastNameColumn, "Lats name"); }table.addColumn(ageColumn, "Age"); return -1; }ListDataProvider<User> dataProvider = new ListDataProvider<User>(); });dataProvider.addDataDisplay(table); table.addColumnSortHandler(columnSortHandler); table.getColumnSortList().push(firstNameColumn);List<User> list = dataProvider.getList();for (User user : USERS) { list.add(user);}ListHandler<User> columnSortHandler = new ListHandler<Tester.User>(list);columnSortHandler.setComparator(idColumn, new Comparator<Tester.User>() { public int compare(User o1, User o2) { if (o1 == o2) { return 0; } if (o1 != null) { return (o2 != null) ? o1.id.compareTo(o2.id) : 1; } return -1;2013-04-15 Building UIs with Dart 7
  8. 8. The Dart WayTable<User> table = new Table (sorting:true) ..addColumn(ID, new TextCell((User o) => o.id)) ..addColumn(First name, new TextCell((User o) => o.firstName)) ..addColumn(Last name, new TextCell((User o) => o.lastName)) ..addColumn(Age, new TextCell((User o) => o.age)) ..setData(objs);2013-04-15 Building UIs with Dart 8
  9. 9. The Dart WayTable<User> table = new Table (sorting:true) ..addColumn(ID, new TextCell((User o) => o.id)) ..addColumn(First name, new TextCell((User o) => o.firstName)) ..addColumn(Last name, new TextCell((User o) => o.lastName)) ..addColumn(Age, new TextCell((User o) => o.age)) ..setData(objs); 6 lines2013-04-15 Building UIs with Dart 9
  10. 10. Dart in few words⦿ Language ⦿ Object Oriented ⦿ Optionaly typed ⦿ Top-level functions ⦿ Functions as First-Class Objects⦿ Ecosystem ⦿ Client VM => Dartium ⦿ Server VM ⦿ Dart2js ⦿ DartEditor ⦿ Pub ⦿ DartDoc2013-04-15 Building UIs with Dart 10
  11. 11. UIs2013-04-15 Building UIs with Dart 11
  12. 12. Objectives <ul> <li>School 1</li> <li>School 2 <ul> <li>Grade 2.1</li> <li>Grade 2.2 <ul> <li>Person 2.2.1</li> <li>Person 2.2.2</li> </ul> </li> </ul> </li> <li>School 3 <ul> <li>Grade 3.1</li> </ul> </li> <li>School 4</li> </ul>2013-04-15 Building UIs with Dart 12
  13. 13. Classesclass School { class Grade { String schoolName; String schoolGrade; List<Grade> grades; List<Student> students; School(this.schoolName, Grade(this.schoolGrade, [this.grades]); [this.students]);} } class Student { String firstname; String lastname; Student(this.firstname, this.lastname); }2013-04-15 Building UIs with Dart 13
  14. 14. The Old-Fashioned Way2013-04-15 Building UIs with Dart 14
  15. 15. The Old-Fashioned Wayvoid main() { String tree = <ul>; for (School school in schools) { tree += <li>${school.schoolName}; // Grades tree += </li>; } tree += </ul>; query(body).insertAdjacentHtml(afterBegin, tree);} 2013-04-15 Building UIs with Dart 15
  16. 16. The Old-Fashioned Wayvar grades = school.grades;if (grades != null) { tree += <ul>; for (Grade grade in grades) { tree += <li>${grade.schoolGrade}; // Students tree += </li>; } tree += </ul>;} 2013-04-15 Building UIs with Dart 16
  17. 17. The Old-Fashioned Wayvar students = grade.students;if (students != null) { tree += <ul>; for (Student student in students) { tree += <li>${student.firstname} ${student.lastname}</li>; } tree += </ul>;} 2013-04-15 Building UIs with Dart 17
  18. 18. The Old-Fashioned Wayvoid main() { tree += </ul>; String tree = <ul>; } for (School school in schools) { tree += </li>; tree += <li>${school.schoolName}; } var grades = school.grades; tree += </ul>; if (grades != null) { tree += <ul>; query(body) .insertAdjacentHtml(afterBegin, tree); for (Grade grade in grades) { } tree += <li>${grade.schoolGrade}; var students = grade.students; if (students != null) { tree += <ul>; for (Student student in students) { tree += <li>${student.firstname} ${student.lastname}</li>; } tree += </ul>; } tree += </li>; } 2013-04-15 Building UIs with Dart 18
  19. 19. Introducing reusable components2013-04-15 Building UIs with Dart 19
  20. 20. Is there a pattern here ?var grades = school.grades;if (grades != null) { tree += <ul>; for (Grade grade in grades) { tree += <li>${grade.schoolGrade}; // Students tree += </li>; } tree += </ul>;} 2013-04-15 Building UIs with Dart 20
  21. 21. Is there a pattern here ?var grades = school.grades; if (grades != null) { tree += <ul>; tree += </ul>; } 2013-04-15 Building UIs with Dart 21
  22. 22. Is there a pattern here ?var grades = school.grades; if (grades != null) { tree += <ul>; for (Grade grade in grades) { tree += <li>${grade.schoolGrade}; tree += </li>; } tree += </ul>; } 2013-04-15 Building UIs with Dart 22
  23. 23. Is there a pattern here ?var grades = school.grades; if (grades != null) { tree += <ul>; for (Grade grade in grades) { tree += <li>${grade.schoolGrade}; // Do the same with children tree += </li>; } tree += </ul>; } 2013-04-15 Building UIs with Dart 23
  24. 24. Recursive PatternString doSomething(/* parameters */) { String tree = ; var grades = school.grades; if (grades != null) { tree += <ul>; for (Grade grade in grades) { tree += <li>${grade.schoolGrade}; tree += doSomething(/* parameters */); tree += </li>; } tree += </ul>; } return tree;} 2013-04-15 Building UIs with Dart 24
  25. 25. Side note – Functions & sugar syntaxint length(String s) { return s.length;} 2013-04-15 Building UIs with Dart 25
  26. 26. Side note – Functions & sugar syntaxint length(String s) { int length(String s) return s.length; => s.length;} 2013-04-15 Building UIs with Dart 26
  27. 27. Easy use of reusable componentsvoid main() { final Tree tree = new Tree(...);} 2013-04-15 Building UIs with Dart 27
  28. 28. Easy use of reusable componentsvoid main() { final Tree tree = new Tree(...); tree.setData(schools); tree.addTo(body, afterBegin);} 2013-04-15 Building UIs with Dart 28
  29. 29. Easy use of reusable componentsvoid main() { final Tree tree = new Tree( [new TreeConfig((School s) => s.schoolName, (School s) => s.grades), new TreeConfig((Grade g) => g.schoolGrade, (Grade g) => g.students), new TreeConfig((Student s) => ${s.firstname} ${s.lastname})] ); tree.setData(schools); tree.addTo(body, afterBegin);} 2013-04-15 Building UIs with Dart 29
  30. 30. Easy use of reusable componentsclass School { class Grade { String schoolName; String schoolGrade; List<Grade> grades; List<Student> students; School(this.schoolName, Grade(this.schoolGrade, [this.grades]); [this.students]);} } class Student { String firstname; String lastname; Student(this.firstname, this.lastname); }2013-04-15 Building UIs with Dart 30
  31. 31. Implementing a reusable componentstypedef dynamic Accessor(dynamic data);class TreeConfig { Accessor _value; Accessor _children; TreeConfig(Accessor this._value, [Accessor this._children]); Accessor get value => _value; Accessor get children => _children;} 2013-04-15 Building UIs with Dart 31
  32. 32. Implementing a reusable componentstypedef dynamic Accessor(dynamic data);class TreeConfig { Accessor _value; Accessor _children; TreeConfig(Accessor this._value, [Accessor this._children]); Accessor get value => _value; Accessor get children => _children;} 2013-04-15 Building UIs with Dart 32
  33. 33. Implementing a reusable componentstypedef dynamic Accessor(dynamic data);class TreeConfig { Accessor _value; Accessor _children; TreeConfig(Accessor this._value, [Accessor this._children]); Accessor get value => _value; Accessor get children => _children;} 2013-04-15 Building UIs with Dart 33
  34. 34. Implementing a reusable componentstypedef dynamic Accessor(dynamic data);class TreeConfig { Accessor _value; Accessor _children; TreeConfig(Accessor this._value, [Accessor this._children]); Accessor get value => _value; Accessor get children => _children;} 2013-04-15 Building UIs with Dart 34
  35. 35. Implementing a reusable componentsclass Tree { List<TreeConfig> treeConfigs; String tree; Tree(this.treeConfigs); String setData(final List data) { // Build tree } void addTo(String selector, [String where = afterEnd]) { query(selector).insertAdjacentHtml(where, this.tree); }} 2013-04-15 Building UIs with Dart 35
  36. 36. Implementing a reusable componentsclass Tree { List<TreeConfig> treeConfigs; String tree; Tree(this.treeConfigs); String setData(final List data) { // Build tree } void addTo(String selector, [String where = afterEnd]) { query(selector).insertAdjacentHtml(where, this.tree); }} 2013-04-15 Building UIs with Dart 36
  37. 37. Implementing a reusable componentsclass Tree { List<TreeConfig> treeConfigs; String tree; Tree(this.treeConfigs); String setData(final List data) { // Build tree } void addTo(String selector, [String where = afterEnd]) { query(selector).insertAdjacentHtml(where, this.tree); }} 2013-04-15 Building UIs with Dart 37
  38. 38. Implementing a reusable componentsclass Tree { List<TreeConfig> treeConfigs; String tree; Tree(this.treeConfigs); String setData(final List data) { // Build tree } void addTo(String selector, [String where = afterEnd]) { query(selector).insertAdjacentHtml(where, this.tree); }} 2013-04-15 Building UIs with Dart 38
  39. 39. Implementing a reusable componentsclass Tree { List<TreeConfig> treeConfigs; String tree; Tree(this.treeConfigs); String setData(final List data) { // Build tree } void addTo(String selector, [String where = afterEnd]) { query(selector).insertAdjacentHtml(where, this.tree); }} 2013-04-15 Building UIs with Dart 39
  40. 40. Implementing a reusable componentsString buildOneLevelTree(final List data, final List<TreeConfig> treeNodes, [final int depth = 0]) { String tree = ; if (data != null && !data.isEmpty) { } return tree;} 2013-04-15 Building UIs with Dart 40
  41. 41. Implementing a reusable componentsString buildOneLevelTree(final List data, final List<TreeConfig> treeNodes, [final int depth = 0]) { String tree = ; if (data != null && !data.isEmpty) { final TreeConfig treeNode = treeNodes[depth]; tree += <ul>; for (dynamic element in data) { } tree += </ul>; } return tree;} 2013-04-15 Building UIs with Dart 41
  42. 42. Implementing a reusable componentsString buildOneLevelTree(final List data, final List<TreeConfig> treeNodes, [final int depth = 0]) { String tree = ; if (data != null && !data.isEmpty) { final TreeConfig treeNode = treeNodes[depth]; tree += <ul>; for (dynamic element in data) { tree += <li>${treeNode.value(element)}; tree += </li>; } tree += </ul>; } return tree;} 2013-04-15 Building UIs with Dart 42
  43. 43. Implementing a reusable componentsString buildOneLevelTree(final List data, final List<TreeConfig> treeNodes, [final int depth = 0]) { String tree = ; if (data != null && !data.isEmpty) { final TreeConfig treeNode = treeNodes[depth]; tree += <ul>; for (dynamic element in data) { tree += <li>${treeNode.value(element)}; if (treeNode.children != null) { tree += buildOneLevelTree(treeNode.children(element), treeNodes, depth + 1); } tree += </li>; } tree += </ul>; } return tree;} 2013-04-15 Building UIs with Dart 43
  44. 44. Implementing a reusable componentsclass Tree { List<TreeConfig> treeConfigs; String tree; Tree(this.treeConfigs); String setData(final List data) { this.tree = buildOneLevelTree(data, this.treeConfigs); return this.tree; } String buildOneLevelTree(final List data, final List<TreeConfig> treeNodes, [final int depth = 0]) { // Implementation } void addTo(String selector, [String where = afterEnd]) { query(selector).insertAdjacentHtml(where, this.tree); }} 2013-04-15 Building UIs with Dart 44
  45. 45. Are we done yet ?2013-04-15 Building UIs with Dart 45
  46. 46. Getting ride of StringsElement buildOneLevelTree(final List data, final List<TreeConfig> treeNodes, [final int depth = 0]) { Element tree; // String tree = ; if (data != null && !data.isEmpty) { final TreeConfig treeNode = treeNodes[depth]; tree = new UListElement(); // tree += <ul>; for (dynamic element in data) { final LIElement li = new LIElement(); // <li>; li.text = treeNode.value(element); // ${treeNode.value(element)} if (treeNode.children != null) { final UListElement ulChild = // buildOneLevelTree(treeNode.children(element), treeNodes, depth + 1); if (ulChild != null) { // li.append(ulChild); // tree += buildOneLevelTree(...) } // } tree.append(li); // tree += <li>${treeNode.value(element)}; } } return tree;} 2013-04-15 Building UIs with Dart 46
  47. 47. Getting ride of Stringsclass Tree { List<TreeConfig> treeConfigs; Element tree; // String tree; Tree(this.treeConfigs); Element setData(final List data) { this.tree = buildOneLevelTree(data, this.treeConfigs); return this.tree; } Element buildOneLevelTree(final List data, final List<TreeConfig> treeNodes, [final int depth = 0]) { // Implementation } void addTo(String selector, [String where = afterEnd]) { query(selector).insertAdjacentElement(where, this.tree); }} 2013-04-15 Building UIs with Dart 47
  48. 48. web_ui2013-04-15 Building UIs with Dart 48
  49. 49. web_ui⦿ Based on HTML5 Web Components Spec⦿ Syntax and uses similar to JSP tags⦿ Template Engine – Compilation needed⦿ Reusable components⦿ CSS encapsulation⦿ Data-binding⦿ Complex for real life use-cases⦿ Doesn’t solve layouting problems2013-04-15 Building UIs with Dart 49
  50. 50. web_ui and Single-Page Webapps<!DOCTYPE html><html> <head> <title>01_web_ui</title> </head> <body> <script type="application/dart" src="01_web_ui.dart"> </script> <script src="packages/browser/dart.js"></script> </body></html> 2013-04-15 Building UIs with Dart 50
  51. 51. web_ui - The template<!DOCTYPE html><html> <body> </body></html> 2013-04-15 Building UIs with Dart 51
  52. 52. web_ui - The template<!DOCTYPE html><html> <body> <element> </element> </body></html> 2013-04-15 Building UIs with Dart 52
  53. 53. web_ui - The template<!DOCTYPE html><html> <body> <element name="x-click-counter"> </element> </body></html> 2013-04-15 Building UIs with Dart 53
  54. 54. web_ui - The template<!DOCTYPE html><html> <body> <element name="x-click-counter" constructor="CounterComponent"> </element> </body></html> 2013-04-15 Building UIs with Dart 54
  55. 55. web_ui - The template<!DOCTYPE html><html> <body> <element name="x-click-counter" constructor="CounterComponent" extends="div"> </element> </body></html> 2013-04-15 Building UIs with Dart 55
  56. 56. web_ui - The template<!DOCTYPE html><html> <body> <element name="x-click-counter" constructor="CounterComponent" extends="div"> <template> </template> </element> </body></html> 2013-04-15 Building UIs with Dart 56
  57. 57. web_ui - The template<!DOCTYPE html><html> <body> <element name="x-click-counter" constructor="CounterComponent" extends="div"> <template> <div> <button>Click me</button><br /> <span>(click count: {{count}})</span> </div> </template> </element> </body></html> 2013-04-15 Building UIs with Dart 57
  58. 58. web_ui - The template<!DOCTYPE html><html> <body> <element name="x-click-counter" constructor="CounterComponent" extends="div"> <template> <div> <button>Click me</button><br /> <span>(click count: {{count}})</span> </div> </template> </element> </body></html> 2013-04-15 Building UIs with Dart 58
  59. 59. web_ui - The template<!DOCTYPE html><html> <body> <element name="x-click-counter" constructor="CounterComponent" extends="div"> <template> <div> <button>Click me</button><br /> <span>(click count: {{count}})</span> </div> </template> <script type="application/dart" src="xclickcounter.dart"></script> </element> </body></html> 2013-04-15 Building UIs with Dart 59
  60. 60. web_ui – Extending WebComponentclass CounterComponent {} 2013-04-15 Building UIs with Dart 60
  61. 61. web_ui – Extending WebComponentclass CounterComponent extends WebComponent {} 2013-04-15 Building UIs with Dart 61
  62. 62. web_ui – Extending WebComponentclass CounterComponent extends WebComponent { @observable int count = 0;} 2013-04-15 Building UIs with Dart 62
  63. 63. web_ui – Extending WebComponentclass CounterComponent extends WebComponent { @observable int count = 0; void increment(Event event) { count++; }} 2013-04-15 Building UIs with Dart 63
  64. 64. web_ui – Extending WebComponentclass CounterComponent extends WebComponent { @observable int count = 0; void increment(Event event) { count++; } void inserted() { this.query(button).onClick.listen(increment); }} 2013-04-15 Building UIs with Dart 64
  65. 65. web_ui and Single-Page Webapps<!DOCTYPE html><html> <head> <title>01_web_ui</title> <link rel="components" href="xclickcounter.html"> </head> <body> <script type="application/dart" src="01_web_ui.dart"> </script> <script src="packages/browser/dart.js"></script> </body></html> 2013-04-15 Building UIs with Dart 65
  66. 66. web_ui – The applicationvoid main() {} 2013-04-15 Building UIs with Dart 66
  67. 67. web_ui – The applicationvoid main() { var element = new Element.html( <x-click-counter id="click_counter"></x-click-counter> );} 2013-04-15 Building UIs with Dart 67
  68. 68. web_ui – The applicationvoid main() { var element = new Element.html( <x-click-counter id="click_counter"></x-click-counter> ); var counter = new CounterComponent() ..host = element ..count = 25;} 2013-04-15 Building UIs with Dart 68
  69. 69. web_ui – The applicationvoid main() { var element = new Element.html( <x-click-counter id="click_counter"></x-click-counter> ); var counter = new CounterComponent() ..host = element ..count = 25; var lifecycleCaller = new ComponentItem(counter) ..create(); query(body).append(counter.host); lifecycleCaller.insert();} 2013-04-15 Building UIs with Dart 69
  70. 70. web_ui – The applicationvoid main() { var element = new Element.html( <x-click-counter id="click_counter"></x-click-counter> ); var counter = new CounterComponent() ..host = element ..count = 25; var lifecycleCaller = new ComponentItem(counter)..create(); query(body).append(counter.host); lifecycleCaller.insert(); var button = new ButtonElement() ..text = Update ..onClick.listen((e) { counter.count = 100; watchers.dispatch(); }); query(body).append(button);} 2013-04-15 Building UIs with Dart 70
  71. 71. A word about Layouts2013-04-15 Building UIs with Dart 71
  72. 72. A word about Layouts2013-04-15 Building UIs with Dart 72
  73. 73. A word about Layouts2013-04-15 Building UIs with Dart 73
  74. 74. A word about Layouts2013-04-15 Building UIs with Dart 74
  75. 75. A word about Layouts2013-04-15 Building UIs with Dart 75
  76. 76. A word about Layoutsbuilder() ..div({id : banner}) ..div({id : head}, Dart Playground) ..div({id : controls}) ..span(null, Environment: ) ..addElement(listboxEnv) ..addElement(runButton) ..end() // controls ..end() // banner ..div({id:wrap}) ..addElement(e(linedTextarea.element)) ..end() // wraps ..addElement(output); 2013-04-15 Building UIs with Dart 76
  77. 77. A word about Layoutsbuilder() ..div({id : banner}) ..div({id : head}, Dart Playground) ..div({id : controls}) ..span(null, Environment: ) ..addElement(listboxEnv) ..addElement(runButton) ..end() // controls ..end() // banner ..div({id:wrap}) ..addElement(e(linedTextarea.element)) ..end() // wraps ..addElement(output); 2013-04-15 Building UIs with Dart 77
  78. 78. A word about Layoutsbuilder() ..div({id : banner}) ..div({id : head}, Dart Playground) ..div({id : controls}) ..span(null, Environment: ) ..addElement(listboxEnv) ..addElement(runButton) ..end() // controls ..end() // banner ..div({id:wrap}) ..addElement(e(linedTextarea.element)) ..end() // wraps ..addElement(output); 2013-04-15 Building UIs with Dart 78
  79. 79. A word about Layoutsbuilder() ..div({id : banner}) ..div({id : head}, Dart Playground) ..div({id : controls}) ..span(null, Environment: ) ..addElement(listboxEnv) ..addElement(runButton) ..end() // controls ..end() // banner ..div({id:wrap}) ..addElement(e(linedTextarea.element)) ..end() // wraps ..addElement(output); 2013-04-15 Building UIs with Dart 79
  80. 80. RoadmapToday : M3 ?? : M4 Summer 2013 : V1 !2013-04-15 Building UIs with Dart 80
  81. 81. The Future of Dart ?2013-04-15 Building UIs with Dart 81
  82. 82. Want to know more ?DartLangFR ⦿ Mailing-list : dartlangfr (https://groups.google.com/forum/?fromgroups=&hl=en#!forum/dartlangfr) ⦿ Google+ : DartlangFR (https://plus.google.com/u/0/communities/104813951711720144450) ⦿ Twitter : @dartlang_fr ⦿ Blog : dartlangfr.netDartLang ⦿ Official website: www.dartlang.org ⦿ Mailing-list : dartlang (https://groups.google.com/a/dartlang.org/forum/?fromgroups&hl=en#!forum/misc) ⦿ Google+ : Dart (https://plus.google.com/+dartlang) ⦿ Google+ : Dartisans (https://plus.google.com/communities/114566943291919232850) ⦿ Twitter : @dart_lang ⦿ Blog : blog.dartwatch.com ⦿ Newsletter : Dart weekly2013-04-15 Building UIs with Dart 82
  83. 83. Github⦿ Paris JUG ⦿ https://github.com/yohanbeschi/parisjug_20130409.dart⦿ DevoxxFR 2013 ⦿ https://github.com/yohanbeschi/devoxxfr_20130327.dart⦿ Widgets ⦿ https://github.com/yohanbeschi/pwt_proto.dart⦿ Web Editor for Dart ⦿ https://github.com/yohanbeschi/web_editor.dart2013-04-15 Building UIs with Dart 83
  84. 84. Questions ?2013-04-15 Building UIs with Dart 84

×