View
8.262
Download
2
Category
Tags:
Preview:
Citation preview
USING COMPONENTS TO BUILD
Native-Quality HTML5 Apps
Gray Norton, Enyohttp://enyojs.com
@enyojs
@graynorton
Presentation originally authored by Kevin Schaaf (@kevinpschaaf)
Functions
Properties
EventsA
PI
Markup:
Event handling:
Logic / state:
ENCAPSULATE
Lifecycle management:
Markup Lifecycle Event Handling Logic/API
Lifecycle management:Event handling:State / Logic:Markup:Markup:
new Slider({value:20});
new Slider({value:20});
new Slider({value:20});
new Slider({value:20});
new Slider({value:20});
+Label
Label
API: setContent()
IntegerLabel
API: setValue()
Label: 20
ValueLabel
API: setContent()
setValue()
Label: 20
ValueLabel
API: setContent()
setValue()
Slider
API: setValue()
+
+
LabeledSlider
API: setLabel()
setValue()
LabeledSlider
API: setLabel()
setValue()
Groupbox
AttributeView
API: setAttributes()
new ContactDetailView({contactModel:m});
new ContactDetailView({contactModel:m});
new ContactDetailView({contactModel:m});
new ContactDetailView({contactModel:m});
new ContactDetailView({contactModel:m});
<template id="commentTemplate"><div>
<img src=""><div class="comment"></div>…
</div></template>
var t = document.querySelector("#commentTemplate");
someElement.appendChild(t.content.cloneNode());
<element extends="button" name="x-fancybutton” constructor=“FancyButton”><template>
<style scoped>@host { display: contents; }div.fancy {
…}
</style><div class="fancy">
<content></content></div><script>
FancyButton.prototype.fancify = function() { … };
this.lifecycle({ inserted: this.doSomething(); });</script>
</template></element>
<button is=“x-fancybutton”>Click Me!</button>
Recommended