SlideShare a Scribd company logo
DART
             Yohan BESCHI – Java Developer
                     @yohanbeschi
                     +Yohan Beschi
2013-04-15              Building UIs with Dart   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 GWT

CellTable<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
Programmatic Components with GWT

CellTable<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
The Dart Way
Table<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
The Dart Way
Table<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 lines

2013-04-15                    Building UIs with Dart                 9
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
        ⦿    DartDoc
2013-04-15                      Building UIs with Dart   10
UIs




2013-04-15         Building UIs with Dart   11
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
Classes
class 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
The Old-Fashioned Way




2013-04-15             Building UIs with Dart   14
The Old-Fashioned Way
void 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
The Old-Fashioned Way
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   16
The Old-Fashioned Way
var 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
The Old-Fashioned Way
void 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
Introducing reusable components




2013-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) {
      tree += '<li>${grade.schoolGrade}';

         // Students

         tree += '</li>';
     }

     tree += '</ul>';
}



    2013-04-15                Building UIs with Dart   20
Is there a pattern here ?
var grades = school.grades;

 if (grades != null) {
   tree += '<ul>';




      tree += '</ul>';
 }




 2013-04-15                   Building UIs with Dart   21
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
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
Recursive Pattern
String 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
Side note – Functions & sugar syntax
int length(String s) {
   return s.length;
}




 2013-04-15                Building UIs with Dart    25
Side note – Functions & sugar syntax
int length(String s) {                 int length(String s)
   return s.length;                      => s.length;
}




 2013-04-15                Building UIs with Dart             26
Easy use of reusable components
void main() {
  final Tree tree = new Tree(...);
}




 2013-04-15                Building UIs with Dart   27
Easy use of reusable components
void main() {
  final Tree tree = new Tree(...);
  tree.setData(schools);
  tree.addTo('body', 'afterBegin');
}




 2013-04-15                Building UIs with Dart   28
Easy use of reusable components
void 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
Easy use of reusable components
class 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
Implementing a reusable components
typedef 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
Implementing a reusable components
typedef 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
Implementing a reusable components
typedef 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
Implementing a reusable components
typedef 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
Implementing a reusable components
class 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
Implementing a reusable components
class 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
Implementing a reusable components
class 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
Implementing a reusable components
class 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
Implementing a reusable components
class 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
Implementing a reusable components
String 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
Implementing a reusable components
String 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
Implementing a reusable components
String 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
Implementing a reusable components
String 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
Implementing a reusable components
class 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
Are we done yet ?




2013-04-15              Building UIs with Dart   45
Getting ride of Strings
Element 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
Getting ride of Strings
class 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
web_ui




2013-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
⦿ Reusable components
⦿ CSS encapsulation
⦿ Data-binding
⦿ Complex for real life use-cases
⦿ Doesn’t solve layouting problems

2013-04-15            Building UIs with Dart   49
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
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                 Building UIs with Dart   52
web_ui - The template
<!DOCTYPE html>

<html>
 <body>
  <element name="x-click-counter">

  </element>
 </body>
</html>




  2013-04-15                         Building UIs with Dart   53
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
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
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
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
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
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
web_ui – Extending WebComponent
class CounterComponent {

}




    2013-04-15                Building UIs with Dart   60
web_ui – Extending WebComponent
class CounterComponent extends WebComponent {

}




    2013-04-15                    Building UIs with Dart   61
web_ui – Extending WebComponent
class CounterComponent extends WebComponent {
 @observable
 int count = 0;

}




    2013-04-15                    Building UIs with Dart   62
web_ui – Extending WebComponent
class CounterComponent extends WebComponent {
 @observable
 int count = 0;

    void increment(Event event) {
      count++;
    }
}




     2013-04-15                     Building UIs with Dart   63
web_ui – Extending WebComponent
class 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
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
web_ui – The application
void main() {

}




    2013-04-15                 Building UIs with Dart   66
web_ui – The application
void main() {
  var element = new Element.html(
     '<x-click-counter id="click_counter"></x-click-counter>'
  );
}




 2013-04-15                 Building UIs with Dart          67
web_ui – The application
void 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
web_ui – The application
void 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
web_ui – The application
void 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
A word about Layouts




2013-04-15              Building UIs with Dart   71
A word about Layouts




2013-04-15              Building UIs with Dart   72
A word about Layouts




2013-04-15              Building UIs with Dart   73
A word about Layouts




2013-04-15              Building UIs with Dart   74
A word about Layouts




2013-04-15              Building UIs with Dart   75
A word about Layouts
builder()
  ..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
A word about Layouts
builder()
  ..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
A word about Layouts
builder()
  ..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
A word about Layouts
builder()
  ..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
Roadmap


Today : M3                               ?? : M4   Summer 2013 : V1 !




2013-04-15             Building UIs with Dart                           80
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#!forum/dartlangfr)
        ⦿    Google+ : DartlangFR (https://plus.google.com/u/0/communities/104813951711720144450)
        ⦿    Twitter : @dartlang_fr
        ⦿    Blog : dartlangfr.net

DartLang
        ⦿ 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 weekly


2013-04-15                                        Building UIs with Dart                                        82
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.dart


2013-04-15                            Building UIs with Dart         83
Questions ?

2013-04-15      Building UIs with Dart   84

More Related Content

Similar to Dart - web_ui & Programmatic components - Paris JUG - 20130409

Introduction to dart par Yohan Beschi
Introduction to dart par Yohan BeschiIntroduction to dart par Yohan Beschi
Introduction to dart par Yohan Beschi
SOAT
 
Introduction à Dart
Introduction à DartIntroduction à Dart
Introduction à Dart
SOAT
 
Scala 2013 review
Scala 2013 reviewScala 2013 review
Scala 2013 review
Sagie Davidovich
 
Spring and dependency injection
Spring and dependency injectionSpring and dependency injection
Spring and dependency injection
Steve Ng
 
JUnit PowerUp
JUnit PowerUpJUnit PowerUp
JUnit PowerUp
James McGivern
 
Java 8 - Nuts and Bold - SFEIR Benelux
Java 8 - Nuts and Bold - SFEIR BeneluxJava 8 - Nuts and Bold - SFEIR Benelux
Java 8 - Nuts and Bold - SFEIR Benelux
yohanbeschi
 
Nice to meet Kotlin
Nice to meet KotlinNice to meet Kotlin
Nice to meet Kotlin
Jieyi Wu
 
20070329 Java Programing Tips
20070329 Java Programing Tips20070329 Java Programing Tips
20070329 Java Programing Tips
Shingo Furuyama
 
K is for Kotlin
K is for KotlinK is for Kotlin
K is for Kotlin
TechMagic
 
Use of Apache Commons and Utilities
Use of Apache Commons and UtilitiesUse of Apache Commons and Utilities
Use of Apache Commons and Utilities
Pramod Kumar
 
Kotlin for Android Developers - Victor Kropp - Codemotion Rome 2018
Kotlin for Android Developers - Victor Kropp - Codemotion Rome 2018Kotlin for Android Developers - Victor Kropp - Codemotion Rome 2018
Kotlin for Android Developers - Victor Kropp - Codemotion Rome 2018
Codemotion
 
First few months with Kotlin - Introduction through android examples
First few months with Kotlin - Introduction through android examplesFirst few months with Kotlin - Introduction through android examples
First few months with Kotlin - Introduction through android examples
Nebojša Vukšić
 
Ejemplo completo de integración JLex y CUP
Ejemplo completo de integración JLex y CUPEjemplo completo de integración JLex y CUP
Ejemplo completo de integración JLex y CUP
Egdares Futch H.
 
Python mu Java mı?
Python mu Java mı?Python mu Java mı?
Python mu Java mı?
aerkanc
 
Kotlin Perfomance on Android / Александр Смирнов (Splyt)
Kotlin Perfomance on Android / Александр Смирнов (Splyt)Kotlin Perfomance on Android / Александр Смирнов (Splyt)
Kotlin Perfomance on Android / Александр Смирнов (Splyt)
Ontico
 
夜子まま塾講義3(androidで電卓アプリを作る)
夜子まま塾講義3(androidで電卓アプリを作る)夜子まま塾講義3(androidで電卓アプリを作る)
夜子まま塾講義3(androidで電卓アプリを作る)
Masafumi Terazono
 
Pragmatic functional refactoring with java 8 (1)
Pragmatic functional refactoring with java 8 (1)Pragmatic functional refactoring with java 8 (1)
Pragmatic functional refactoring with java 8 (1)
RichardWarburton
 
Hello kotlin | An Event by DSC Unideb
Hello kotlin | An Event by DSC UnidebHello kotlin | An Event by DSC Unideb
Hello kotlin | An Event by DSC Unideb
Muhammad Raza
 
Pragmatic functional refactoring with java 8
Pragmatic functional refactoring with java 8Pragmatic functional refactoring with java 8
Pragmatic functional refactoring with java 8
RichardWarburton
 
Laziness, trampolines, monoids and other functional amenities: this is not yo...
Laziness, trampolines, monoids and other functional amenities: this is not yo...Laziness, trampolines, monoids and other functional amenities: this is not yo...
Laziness, trampolines, monoids and other functional amenities: this is not yo...
Codemotion
 

Similar to Dart - web_ui & Programmatic components - Paris JUG - 20130409 (20)

Introduction to dart par Yohan Beschi
Introduction to dart par Yohan BeschiIntroduction to dart par Yohan Beschi
Introduction to dart par Yohan Beschi
 
Introduction à Dart
Introduction à DartIntroduction à Dart
Introduction à Dart
 
Scala 2013 review
Scala 2013 reviewScala 2013 review
Scala 2013 review
 
Spring and dependency injection
Spring and dependency injectionSpring and dependency injection
Spring and dependency injection
 
JUnit PowerUp
JUnit PowerUpJUnit PowerUp
JUnit PowerUp
 
Java 8 - Nuts and Bold - SFEIR Benelux
Java 8 - Nuts and Bold - SFEIR BeneluxJava 8 - Nuts and Bold - SFEIR Benelux
Java 8 - Nuts and Bold - SFEIR Benelux
 
Nice to meet Kotlin
Nice to meet KotlinNice to meet Kotlin
Nice to meet Kotlin
 
20070329 Java Programing Tips
20070329 Java Programing Tips20070329 Java Programing Tips
20070329 Java Programing Tips
 
K is for Kotlin
K is for KotlinK is for Kotlin
K is for Kotlin
 
Use of Apache Commons and Utilities
Use of Apache Commons and UtilitiesUse of Apache Commons and Utilities
Use of Apache Commons and Utilities
 
Kotlin for Android Developers - Victor Kropp - Codemotion Rome 2018
Kotlin for Android Developers - Victor Kropp - Codemotion Rome 2018Kotlin for Android Developers - Victor Kropp - Codemotion Rome 2018
Kotlin for Android Developers - Victor Kropp - Codemotion Rome 2018
 
First few months with Kotlin - Introduction through android examples
First few months with Kotlin - Introduction through android examplesFirst few months with Kotlin - Introduction through android examples
First few months with Kotlin - Introduction through android examples
 
Ejemplo completo de integración JLex y CUP
Ejemplo completo de integración JLex y CUPEjemplo completo de integración JLex y CUP
Ejemplo completo de integración JLex y CUP
 
Python mu Java mı?
Python mu Java mı?Python mu Java mı?
Python mu Java mı?
 
Kotlin Perfomance on Android / Александр Смирнов (Splyt)
Kotlin Perfomance on Android / Александр Смирнов (Splyt)Kotlin Perfomance on Android / Александр Смирнов (Splyt)
Kotlin Perfomance on Android / Александр Смирнов (Splyt)
 
夜子まま塾講義3(androidで電卓アプリを作る)
夜子まま塾講義3(androidで電卓アプリを作る)夜子まま塾講義3(androidで電卓アプリを作る)
夜子まま塾講義3(androidで電卓アプリを作る)
 
Pragmatic functional refactoring with java 8 (1)
Pragmatic functional refactoring with java 8 (1)Pragmatic functional refactoring with java 8 (1)
Pragmatic functional refactoring with java 8 (1)
 
Hello kotlin | An Event by DSC Unideb
Hello kotlin | An Event by DSC UnidebHello kotlin | An Event by DSC Unideb
Hello kotlin | An Event by DSC Unideb
 
Pragmatic functional refactoring with java 8
Pragmatic functional refactoring with java 8Pragmatic functional refactoring with java 8
Pragmatic functional refactoring with java 8
 
Laziness, trampolines, monoids and other functional amenities: this is not yo...
Laziness, trampolines, monoids and other functional amenities: this is not yo...Laziness, trampolines, monoids and other functional amenities: this is not yo...
Laziness, trampolines, monoids and other functional amenities: this is not yo...
 

More from yohanbeschi

VoxxedDays LU 2016 - Thoughtworks Go - Continuous Deployment made easy and free
VoxxedDays LU 2016 - Thoughtworks Go - Continuous Deployment made easy and freeVoxxedDays LU 2016 - Thoughtworks Go - Continuous Deployment made easy and free
VoxxedDays LU 2016 - Thoughtworks Go - Continuous Deployment made easy and free
yohanbeschi
 
JVM Hardcore - Part 18 - Converting a logical expression into bytecode
JVM Hardcore - Part 18 - Converting a logical expression into bytecodeJVM Hardcore - Part 18 - Converting a logical expression into bytecode
JVM Hardcore - Part 18 - Converting a logical expression into bytecodeyohanbeschi
 
JVM Hardcore - Part 07 - Parsing (Productions stack states)
JVM Hardcore - Part 07 - Parsing (Productions stack states)JVM Hardcore - Part 07 - Parsing (Productions stack states)
JVM Hardcore - Part 07 - Parsing (Productions stack states)yohanbeschi
 
Introduction to the Java bytecode - So@t - 20130924
Introduction to the Java bytecode - So@t - 20130924Introduction to the Java bytecode - So@t - 20130924
Introduction to the Java bytecode - So@t - 20130924
yohanbeschi
 
JVM Hardcode - Part 01 - How Frames work
JVM Hardcode - Part 01 - How Frames workJVM Hardcode - Part 01 - How Frames work
JVM Hardcode - Part 01 - How Frames workyohanbeschi
 
Building Single-Page Web Appplications in dart - Devoxx France 2013
Building Single-Page Web Appplications in dart - Devoxx France 2013Building Single-Page Web Appplications in dart - Devoxx France 2013
Building Single-Page Web Appplications in dart - Devoxx France 2013
yohanbeschi
 

More from yohanbeschi (6)

VoxxedDays LU 2016 - Thoughtworks Go - Continuous Deployment made easy and free
VoxxedDays LU 2016 - Thoughtworks Go - Continuous Deployment made easy and freeVoxxedDays LU 2016 - Thoughtworks Go - Continuous Deployment made easy and free
VoxxedDays LU 2016 - Thoughtworks Go - Continuous Deployment made easy and free
 
JVM Hardcore - Part 18 - Converting a logical expression into bytecode
JVM Hardcore - Part 18 - Converting a logical expression into bytecodeJVM Hardcore - Part 18 - Converting a logical expression into bytecode
JVM Hardcore - Part 18 - Converting a logical expression into bytecode
 
JVM Hardcore - Part 07 - Parsing (Productions stack states)
JVM Hardcore - Part 07 - Parsing (Productions stack states)JVM Hardcore - Part 07 - Parsing (Productions stack states)
JVM Hardcore - Part 07 - Parsing (Productions stack states)
 
Introduction to the Java bytecode - So@t - 20130924
Introduction to the Java bytecode - So@t - 20130924Introduction to the Java bytecode - So@t - 20130924
Introduction to the Java bytecode - So@t - 20130924
 
JVM Hardcode - Part 01 - How Frames work
JVM Hardcode - Part 01 - How Frames workJVM Hardcode - Part 01 - How Frames work
JVM Hardcode - Part 01 - How Frames work
 
Building Single-Page Web Appplications in dart - Devoxx France 2013
Building Single-Page Web Appplications in dart - Devoxx France 2013Building Single-Page Web Appplications in dart - Devoxx France 2013
Building Single-Page Web Appplications in dart - Devoxx France 2013
 

Recently uploaded

BBR 2024 Summer Sessions Interview Training
BBR  2024 Summer Sessions Interview TrainingBBR  2024 Summer Sessions Interview Training
BBR 2024 Summer Sessions Interview Training
Katrina Pritchard
 
Film vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movieFilm vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movie
Nicholas Montgomery
 
Gender and Mental Health - Counselling and Family Therapy Applications and In...
Gender and Mental Health - Counselling and Family Therapy Applications and In...Gender and Mental Health - Counselling and Family Therapy Applications and In...
Gender and Mental Health - Counselling and Family Therapy Applications and In...
PsychoTech Services
 
Bed Making ( Introduction, Purpose, Types, Articles, Scientific principles, N...
Bed Making ( Introduction, Purpose, Types, Articles, Scientific principles, N...Bed Making ( Introduction, Purpose, Types, Articles, Scientific principles, N...
Bed Making ( Introduction, Purpose, Types, Articles, Scientific principles, N...
Leena Ghag-Sakpal
 
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptxC1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
mulvey2
 
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective UpskillingYour Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Excellence Foundation for South Sudan
 
Walmart Business+ and Spark Good for Nonprofits.pdf
Walmart Business+ and Spark Good for Nonprofits.pdfWalmart Business+ and Spark Good for Nonprofits.pdf
Walmart Business+ and Spark Good for Nonprofits.pdf
TechSoup
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
Nguyen Thanh Tu Collection
 
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
imrankhan141184
 
ZK on Polkadot zero knowledge proofs - sub0.pptx
ZK on Polkadot zero knowledge proofs - sub0.pptxZK on Polkadot zero knowledge proofs - sub0.pptx
ZK on Polkadot zero knowledge proofs - sub0.pptx
dot55audits
 
A Independência da América Espanhola LAPBOOK.pdf
A Independência da América Espanhola LAPBOOK.pdfA Independência da América Espanhola LAPBOOK.pdf
A Independência da América Espanhola LAPBOOK.pdf
Jean Carlos Nunes Paixão
 
math operations ued in python and all used
math operations ued in python and all usedmath operations ued in python and all used
math operations ued in python and all used
ssuser13ffe4
 
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptxPengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Fajar Baskoro
 
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptxPrésentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
siemaillard
 
Leveraging Generative AI to Drive Nonprofit Innovation
Leveraging Generative AI to Drive Nonprofit InnovationLeveraging Generative AI to Drive Nonprofit Innovation
Leveraging Generative AI to Drive Nonprofit Innovation
TechSoup
 
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptxBeyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
EduSkills OECD
 
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
GeorgeMilliken2
 
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
PECB
 
IGCSE Biology Chapter 14- Reproduction in Plants.pdf
IGCSE Biology Chapter 14- Reproduction in Plants.pdfIGCSE Biology Chapter 14- Reproduction in Plants.pdf
IGCSE Biology Chapter 14- Reproduction in Plants.pdf
Amin Marwan
 
Constructing Your Course Container for Effective Communication
Constructing Your Course Container for Effective CommunicationConstructing Your Course Container for Effective Communication
Constructing Your Course Container for Effective Communication
Chevonnese Chevers Whyte, MBA, B.Sc.
 

Recently uploaded (20)

BBR 2024 Summer Sessions Interview Training
BBR  2024 Summer Sessions Interview TrainingBBR  2024 Summer Sessions Interview Training
BBR 2024 Summer Sessions Interview Training
 
Film vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movieFilm vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movie
 
Gender and Mental Health - Counselling and Family Therapy Applications and In...
Gender and Mental Health - Counselling and Family Therapy Applications and In...Gender and Mental Health - Counselling and Family Therapy Applications and In...
Gender and Mental Health - Counselling and Family Therapy Applications and In...
 
Bed Making ( Introduction, Purpose, Types, Articles, Scientific principles, N...
Bed Making ( Introduction, Purpose, Types, Articles, Scientific principles, N...Bed Making ( Introduction, Purpose, Types, Articles, Scientific principles, N...
Bed Making ( Introduction, Purpose, Types, Articles, Scientific principles, N...
 
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptxC1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
 
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective UpskillingYour Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective Upskilling
 
Walmart Business+ and Spark Good for Nonprofits.pdf
Walmart Business+ and Spark Good for Nonprofits.pdfWalmart Business+ and Spark Good for Nonprofits.pdf
Walmart Business+ and Spark Good for Nonprofits.pdf
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
 
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
 
ZK on Polkadot zero knowledge proofs - sub0.pptx
ZK on Polkadot zero knowledge proofs - sub0.pptxZK on Polkadot zero knowledge proofs - sub0.pptx
ZK on Polkadot zero knowledge proofs - sub0.pptx
 
A Independência da América Espanhola LAPBOOK.pdf
A Independência da América Espanhola LAPBOOK.pdfA Independência da América Espanhola LAPBOOK.pdf
A Independência da América Espanhola LAPBOOK.pdf
 
math operations ued in python and all used
math operations ued in python and all usedmath operations ued in python and all used
math operations ued in python and all used
 
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptxPengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptx
 
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptxPrésentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
 
Leveraging Generative AI to Drive Nonprofit Innovation
Leveraging Generative AI to Drive Nonprofit InnovationLeveraging Generative AI to Drive Nonprofit Innovation
Leveraging Generative AI to Drive Nonprofit Innovation
 
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptxBeyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
 
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
 
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
 
IGCSE Biology Chapter 14- Reproduction in Plants.pdf
IGCSE Biology Chapter 14- Reproduction in Plants.pdfIGCSE Biology Chapter 14- Reproduction in Plants.pdf
IGCSE Biology Chapter 14- Reproduction in Plants.pdf
 
Constructing Your Course Container for Effective Communication
Constructing Your Course Container for Effective CommunicationConstructing Your Course Container for Effective Communication
Constructing Your Course Container for Effective Communication
 

Dart - web_ui & Programmatic components - Paris JUG - 20130409

  • 1. DART Yohan BESCHI – Java Developer @yohanbeschi +Yohan Beschi 2013-04-15 Building UIs with Dart 1
  • 2. 2013-04-15 Building UIs with Dart 2
  • 3. Building UIs - Javascript ? 2013-04-15 Building UIs with Dart 3
  • 4. Building UIs - Java ? 2013-04-15 Building UIs with Dart 4
  • 5. Building UIs with Java - But how ? 2013-04-15 Building UIs with Dart 5
  • 6. Programmatic Components with GWT CellTable<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. Programmatic Components with GWT CellTable<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. The Dart Way Table<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. The Dart Way Table<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 lines 2013-04-15 Building UIs with Dart 9
  • 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 ⦿ DartDoc 2013-04-15 Building UIs with Dart 10
  • 11. UIs 2013-04-15 Building UIs with Dart 11
  • 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. Classes class 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. The Old-Fashioned Way 2013-04-15 Building UIs with Dart 14
  • 15. The Old-Fashioned Way void 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. The Old-Fashioned Way 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 16
  • 17. The Old-Fashioned Way var 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. The Old-Fashioned Way void 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. Introducing reusable components 2013-04-15 Building UIs with Dart 19
  • 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. 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. 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. 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. Recursive Pattern String 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. Side note – Functions & sugar syntax int length(String s) { return s.length; } 2013-04-15 Building UIs with Dart 25
  • 26. Side note – Functions & sugar syntax int length(String s) { int length(String s) return s.length; => s.length; } 2013-04-15 Building UIs with Dart 26
  • 27. Easy use of reusable components void main() { final Tree tree = new Tree(...); } 2013-04-15 Building UIs with Dart 27
  • 28. Easy use of reusable components void main() { final Tree tree = new Tree(...); tree.setData(schools); tree.addTo('body', 'afterBegin'); } 2013-04-15 Building UIs with Dart 28
  • 29. Easy use of reusable components void 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. Easy use of reusable components class 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. Implementing a reusable components typedef 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. Implementing a reusable components typedef 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. Implementing a reusable components typedef 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. Implementing a reusable components typedef 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. Implementing a reusable components class 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. Implementing a reusable components class 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. Implementing a reusable components class 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. Implementing a reusable components class 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. Implementing a reusable components class 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. Implementing a reusable components String 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. Implementing a reusable components String 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. Implementing a reusable components String 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. Implementing a reusable components String 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. Implementing a reusable components class 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. Are we done yet ? 2013-04-15 Building UIs with Dart 45
  • 46. Getting ride of Strings Element 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. Getting ride of Strings class 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. web_ui 2013-04-15 Building UIs with Dart 48
  • 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 problems 2013-04-15 Building UIs with Dart 49
  • 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. web_ui - The template <!DOCTYPE html> <html> <body> </body> </html> 2013-04-15 Building UIs with Dart 51
  • 52. web_ui - The template <!DOCTYPE html> <html> <body> <element> </element> </body> </html> 2013-04-15 Building UIs with Dart 52
  • 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. 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. 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. 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. 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. 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. 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. web_ui – Extending WebComponent class CounterComponent { } 2013-04-15 Building UIs with Dart 60
  • 61. web_ui – Extending WebComponent class CounterComponent extends WebComponent { } 2013-04-15 Building UIs with Dart 61
  • 62. web_ui – Extending WebComponent class CounterComponent extends WebComponent { @observable int count = 0; } 2013-04-15 Building UIs with Dart 62
  • 63. web_ui – Extending WebComponent class CounterComponent extends WebComponent { @observable int count = 0; void increment(Event event) { count++; } } 2013-04-15 Building UIs with Dart 63
  • 64. web_ui – Extending WebComponent class 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. 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. web_ui – The application void main() { } 2013-04-15 Building UIs with Dart 66
  • 67. web_ui – The application void main() { var element = new Element.html( '<x-click-counter id="click_counter"></x-click-counter>' ); } 2013-04-15 Building UIs with Dart 67
  • 68. web_ui – The application void 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. web_ui – The application void 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. web_ui – The application void 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. A word about Layouts 2013-04-15 Building UIs with Dart 71
  • 72. A word about Layouts 2013-04-15 Building UIs with Dart 72
  • 73. A word about Layouts 2013-04-15 Building UIs with Dart 73
  • 74. A word about Layouts 2013-04-15 Building UIs with Dart 74
  • 75. A word about Layouts 2013-04-15 Building UIs with Dart 75
  • 76. A word about Layouts builder() ..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. A word about Layouts builder() ..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. A word about Layouts builder() ..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. A word about Layouts builder() ..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. Roadmap Today : M3 ?? : M4 Summer 2013 : V1 ! 2013-04-15 Building UIs with Dart 80
  • 81. The Future of Dart ? 2013-04-15 Building UIs with Dart 81
  • 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.net DartLang ⦿ 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 weekly 2013-04-15 Building UIs with Dart 82
  • 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.dart 2013-04-15 Building UIs with Dart 83
  • 84. Questions ? 2013-04-15 Building UIs with Dart 84