![Page 1: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/1.jpg)
Multimediaim NetzOnlineMultimediaWintersemester2015/16
Tutorial13– MajorSubject
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 1
![Page 2: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/2.jpg)
Today’sAgenda
• CustomElementswithPolymer– Structure– Usage
• AdvancedDatabinding– Bindingtoobjectproperties– Templatehelperelements
• AJAXwithPolymer• Quiz
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 2
![Page 3: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/3.jpg)
LastWeek...
• Whatisdatabinding?• Whatsyntaxdoyouneedtoachievedatabinding?• WhatfourconceptsdoWeb-Componentscover?
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 3
?
![Page 4: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/4.jpg)
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 4
CustomElements
![Page 5: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/5.jpg)
Assignment12
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 5
![Page 6: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/6.jpg)
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
![Page 7: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/7.jpg)
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
![Page 8: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/8.jpg)
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
![Page 9: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/9.jpg)
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
![Page 10: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/10.jpg)
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
![Page 11: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/11.jpg)
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
![Page 12: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/12.jpg)
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
![Page 13: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/13.jpg)
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
![Page 14: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/14.jpg)
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
![Page 15: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/15.jpg)
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
![Page 16: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/16.jpg)
Breakout:Styling
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 16
• horizontal layoutofall<my-artist>elements• centertheartist’snameunderneath theimage• [optional:makeitresponsive]• timeframe:8minutes
![Page 17: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/17.jpg)
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 17
AdvancedDatabinding
![Page 18: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/18.jpg)
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
![Page 19: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/19.jpg)
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
![Page 20: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/20.jpg)
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
![Page 21: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/21.jpg)
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
![Page 22: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/22.jpg)
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 22
AJAXwithPolymer
![Page 23: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/23.jpg)
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
![Page 24: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/24.jpg)
<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
![Page 25: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/25.jpg)
<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
![Page 26: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/26.jpg)
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
![Page 27: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/27.jpg)
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>
![Page 28: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/28.jpg)
Thanks!Whatareyourquestions?
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 28
![Page 29: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/29.jpg)
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
![Page 30: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/30.jpg)
ShadowDOMintheDeveloperConsole
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 30
Screenshotofelementinspectoroncurrentversionofhttps://www.polymer-project.org/1.0/articles/shadydom.html
![Page 31: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/31.jpg)
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
![Page 32: Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität](https://reader035.vdocument.in/reader035/viewer/2022062414/5ed7925167b53e06555d27c3/html5/thumbnails/32.jpg)
Thingstolookintoifyouareinterested
• Referentialtransparency
Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 32