Intro to Polymer.dart

Presented during Dart Flight School 1.0 with the Google Developers Group, http://www.meetup.com/google-developer-group-san-francisco/events/156154312/

Transcript

7. <px-accordion> <px-expander header=”Section 1”> ... </px-expander> <px-expander header=”Section 2”> ... </px-expander> </px-accordion>
9. What are Web Components? • <template> ◦ Inert chunks of cloneable DOM • HTML Import ◦ Add external HTML • Custom Elements ◦ Create new HTML elements ◦ Extend existing DOM objects • Shadow DOM ◦ Encapsulation within the DOM
12. Polymer architecture Polyfill libraries Shadow DOM, Custom Elements, HTML Imports, Pointer Events…. Sugaring layer Expresses way to use web component concepts together
13. Code time!
14. <link rel="import" href="expander.html"> <polymer-element name="px-accordion" attributes="multiple" on-expanded="{{onExpanded}}"> <template> <style> :host { display: block; border-box; box-sizing; } </style> <content select="px-expander"></content> </template> <script type="application/dart" src="accordion.dart"></script> </polymer-element>
15. <link rel="import" href="expander.html"> <polymer-element name="px-accordion" attributes="multiple" on-expanded="{{onExpanded}}"> <template> <style> :host { display: block; border-box; box-sizing; } </style> <content select="px-expander"></content> </template> <script type="application/dart" src="accordion.dart"></script> </polymer-element>
16. <link rel="import" href="expander.html"> <polymer-element name="px-accordion" attributes="multiple" on-expanded="{{onExpanded}}"> <template> <style> :host { display: block; border-box: box-sizing; } </style> <content select="px-expander"></content> </template> <script type="application/dart" src="accordion.dart"></script> </polymer-element>
17. <link rel="import" href="expander.html"> <polymer-element name="px-accordion" attributes="multiple" on-expanded="{{onExpanded}}"> <template> <style> :host { display: block; border-box; box-sizing; } </style> <content select="px-expander"></content> </template> <script type="application/dart" src="accordion.dart"></script> </polymer-element>
18. @CustomTag('px-accordion') class Accordion extends PolymerElement { Accordion.created() : super.created(); @published bool multiple = false; void multipleChanged(bool oldValue) { if (!multiple) { // Pick one and collapse the others } } void onExpanded(Event e, var details, Node target) { if (!multiple) { _collapseOthers(details as Expander); } } }
19. @CustomTag('px-accordion') class Accordion extends PolymerElement { Accordion.created() : super.created(); @published bool multiple = false; void multipleChanged(bool oldValue) { if (!multiple) { // Pick one and collapse the others } } void onExpanded(Event e, var details, Node target) { if (!multiple) { _collapseOthers(details as Expander); } } }
20. @CustomTag('px-accordion') class Accordion extends PolymerElement { Accordion.created() : super.created(); @published bool multiple = false; void multipleChanged(bool oldValue) { if (!multiple) { // Pick one and collapse the others } } void onExpanded(Event e, var details, Node target) { if (!multiple) { _collapseOthers(details as Expander); } } }
21. Thank you! g+ google.com/+DonOlmstead twitter @don_olmstead www donolmstead.me github github.com/donny-dont