multimedia im netz online multimedia - lmu medieninformatikmultimedia im netz online multimedia...
Post on 30-May-2020
18 Views
Preview:
TRANSCRIPT
Multimediaim NetzOnlineMultimediaWintersemester2015/16
Tutorial13– MajorSubject
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 1
Today’sAgenda
• CustomElementswithPolymer– Structure– Usage
• AdvancedDatabinding– Bindingtoobjectproperties– Templatehelperelements
• AJAXwithPolymer• Quiz
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 2
LastWeek...
• Whatisdatabinding?• Whatsyntaxdoyouneedtoachievedatabinding?• WhatfourconceptsdoWeb-Componentscover?
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 3
?
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 4
CustomElements
Assignment12
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 5
Assignment12- Approach
<section><h1>Artists</h1><div class="artists">
<div class="artist"><iron-image src="eodm.jpg"></iron-image><span class="name">EODM</span>
</div><div class="artist">
<iron-image src="ramones.jpg"></iron-image><span class="name">Ramones</span>
</div><div class="artist">
<iron-image src="kinks.jpg"></iron-image><span class="name">Kinks</span>
</div></div>
</section>
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 6
Goal:CustomElements
<section><h1>Artists</h1><div class="artists">
<my-artist name="eodm" img="eodm.jpg"></my-artist>
<my-artist name="ramones" img="ramones.jpg"></my-artist>
<my-artist name="kinks" img="kinks.jpg"></my-artist>
</div></section>
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 7
CustomElements
• Advantages:– Moredeclarativeapproachthanusingnestedclassesetc.– Encapsulation– Separationofconcerns– Readable
• Customelementnamesneedtocontainadash(-),e.g.my-artist,some-thing,cool-dude
• Wewanttobeabletocreateare-usable“artist”component
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 8
BasicStructure- my-artist.html
<link rel="import"href="../bower_components/polymer/polymer.html">
<dom-module id="my-artist"><template>
<style></style><div>
Some Content</div>
</template><script>
Polymer({is : 'my-artist'
})</script>
</dom-module>
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 9
BasicStructure- my-artist.html
<link rel="import"href="../bower_components/polymer/polymer.html">
<dom-module id="my-artist"><template>
<style></style><div>
Some Content</div>
</template><script>
Polymer({is : 'my-artist'
})</script>
</dom-module>
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 10
BasicStructure- my-artist.html
<link rel="import"href="../bower_components/polymer/polymer.html">
<dom-module id="my-artist"><template>
<style></style><div>
Some Content</div>
</template><script>
Polymer({is : 'my-artist'
})</script>
</dom-module>
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 11
Usingthe<my-artist> element
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8"><title>Using Custom Elements</title><script src="../bower_components/webcomponentsjs/webcomponents-
lite.min.js"></script><link rel="import" href="my-artist.html">
</head><body>
<my-artist></my-artist>
</body></html>
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 12
Databinding&Styling<dom-module id="my-artist">
<template><style>
:host{color: red;
}</style><div>{{content}}</div>
</template><script>
Polymer({is : 'my-artist',ready : function(){
this.content = 'Oops, I bound it again.'}
})</script>
</dom-module>
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 13
DeclaredProperties
<link rel="import"href="../bower_components/polymer/polymer.html">
<link rel="import"href="../bower_components/iron-image/iron-image.html">
<dom-module id="my-artist"><template>
<iron-image src="{{img}}"></iron-image><span>{{name}}</span>
</template><script>
Polymer({is : 'my-artist',properties : {
name : String,img : String
}})
</script></dom-module>
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 14
index.html
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8"><title>Artists</title><script
src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script><link rel="import" href="../bower_components/polymer/polymer.html"><link rel="import" href="my-artist.html">
</head><body><section>
<h1>Artists</h1><div class="artists">
<my-artist name="eodm" img="eodm.png"></my-artist><my-artist name="ramones" img="ramones.png"></my-artist><my-artist name="kinks" img="kinks.png"></my-artist>
</div></section></body></html>
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 15
declaredpropertiesà elementattributes
Breakout:Styling
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 16
• horizontal layoutofall<my-artist>elements• centertheartist’snameunderneath theimage• [optional:makeitresponsive]• timeframe:8minutes
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 17
AdvancedDatabinding
Bindingtosub-properties
• Polymerallowsustobindoutputtoobjectpropertiesorsub-properties• Implication:ifthepropertychanges,butnottheentireobject,allbound
contentwillbeupdated• Example:
<template is="dom-bind" id="app"><div>Position: <span>{{person.position}}</span></div><div>First: <span>{{person.first}}</span></div><div>Last: <span>{{person.last}}</span></div>
</template><script>
var app = document.querySelector('#app');app.person = {
first : 'Jake',last : 'Peralta',position: 'Detective'
};</script>
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 18
https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#binding-to-sub-properties
DatabindingHelperElement:DOMrepeat
• <template is="dom-repeat"> bindstoanarray:
<template is="dom-repeat" items="{{employees}}"><div>First name: <span>{{item.first}}</span></div><div>Last name: <span>{{item.last}}</span></div>
</template>
employees inthiscaseisanarraylikethis:[{first:'Hank',last:'Williams'},{first:'Sara',last:'Monah'}, …]
• Simplifiesiteration,reducesmark-up• Similarto“foreach”syntaxà foreach item inarray
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 19
Artistexample
<template is="dom-bind" id="app"><h1>Artists</h1><div class="artists"><template is="dom-repeat" items="{{artists}}">
<my-artist name="{{item.name}}" img="{{item.img}}"></my-artist></template>
</div></template><script>
var app = document.querySelector('#app');app.artists = [
{name: 'EODM', img: 'eodm.png'},{name: 'Ramones', img: 'ramones.png'},{name: 'Kinks', img: 'kinks.png'}
]</script>
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 20
Dom-repeat:namedrepeatswith“as”
• Insidethedom-repeattemplate,thecurrentitemisboundtothevariablenameitem
• Wecanchangethatwiththeas propertyofthetemplate:<template is="dom-repeat"
items="{{artists}}"as="artist">
<my-artist name="{{artist.name}}" img="{{artist.img}}"></my-artist>
</template>forarrayslikethis:app.artists = [
{name: 'EODM', img: 'eodm.png'},{name: 'Ramones', img: 'ramones.png'},{name: 'Kinks', img: 'kinks.png'}
]
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 21
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 22
AJAXwithPolymer
The<iron-ajax>component
• DeclarativeapproachtoAJAX:specifywhat youexpectfromtheserver,insteadofhowtogetit
• Component:<iron-ajax>withthemostprevalentattributes:– url:thetargetURLoftherequest– method:theHTTPmethod,defaultGET– params:GETparametersinJSONformat.– auto:
ifthisattributeisset,therequestwillfireifparameterschangeor– lastResponse:
containstheresponseobjectofthelastrequest
• Bytheway:allcamelCase propertiesneedtobeusedwithadashinsidemarkup:lastResponse à last-response
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 23
<iron-ajax>BasicExample<template is="dom-bind"><iron-ajax
autourl="artists.jsonlast-response="{{artists}}">
</iron-ajax>
<template is="dom-repeat"items="{{artists}}">
<div><img src="{{item.img}}"
width="100"><span>{{item.name}}</span>
</div>
</template></template>
[{
"name": "EODM","img": "eodm.png"
},{
"name": "Kinks","img": "kinks.png"
},{
"name": "Ramones","img": "ramones.png"
}]
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 24
artists.jsonajax-basic.html
<iron-ajax>Example:SpotifySearch
<template is="dom-bind"><iron-ajax
autourl="https://api.spotify.com/v1/search"params='{"type":"artist", "q":"eagles"}'last-response="{{spotifyResponse}}"></iron-ajax>
<template is="dom-repeat"items="{{spotifyResponse.artists.items}}">
<div>{{item.name}}</div>
</template></template>
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 25
Breakout:MoreArtistDetails
• Maketheartist’snamealinktotheirspotify page(artist.external_urls.spotify)
• Loadingfeedback:– importthe<paper-spinner>element– bindits“active”propertytothe<iron-ajax>’s“loading”property
• Homework(expertlevel):– Readintothe“ComputedProperties”chapter– Useacomputedpropertytodisplaytheartist’spicture– Youneedtocreateacustomelementforthis.
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 26
Round-UpQuiz
1. Trueorfalse:a) Acustomelement’s"declared property"willbecomeitsattribute,
e.g.<my-element propertyxyz= "...">b) "mySuperProperty" isavalidpropertynamec) Databindingautomaticallyworkswithsub-properties.d) Elementnamesneedtocontainadash.
2. Spotthe3errors:
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 27
<iron-ajaxurl="artists.json"autolastResponse="[[artists]]"></iron-ajax>
<template is="dom-bind" items="{{artists}}">
<div>{{item}}</div></template>
Thanks!Whatareyourquestions?
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 28
LocalDOMà ShadowDOM/ShadyDOM
• Oncetheelementisused,LocalDOMinsidethe<template>tagsbecomespartofthehost’s“ShadowDOM”
• CurrentdefinitionofShadowDOM(W3C):“amethodofcombiningmultipleDOMtreesintoonehierarchyandhowthesetreesinteractwitheachotherwithinadocument,thusenablingbettercompositionoftheDOM”
• Implications:– ElementIDsinsideshadowDOMdonotcollidewithotherDOM(s)– MoreconvenientCSSscopes– CleanJavaScriptnamespace
• Polymer(also)usesthelightweightversion“ShadyDOM”
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 29
ShadowDOMintheDeveloperConsole
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 30
Screenshotofelementinspectoroncurrentversionofhttps://www.polymer-project.org/1.0/articles/shadydom.html
Links
• WhattheheckisShadowDOM?http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/
• IntroductiontoShadowDOMhttp://webcomponents.org/articles/introduction-to-shadow-dom/
• StylingPolymerhttps://www.polymer-project.org/1.0/docs/devguide/styling.html
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 31
Thingstolookintoifyouareinterested
• Referentialtransparency
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 32
top related