Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität

Multimediaim NetzOnlineMultimediaWintersemester2015/16

Tutorial13– MajorSubject

Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial13- 1

Today’sAgenda

• CustomElementswithPolymer– Structure– Usage

• AdvancedDatabinding– Bindingtoobjectproperties– Templatehelperelements

• AJAXwithPolymer• Quiz


LastWeek...

• Whatisdatabinding?• Whatsyntaxdoyouneedtoachievedatabinding?• WhatfourconceptsdoWeb-Componentscover?


?


CustomElements

Assignment12


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>


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>


CustomElements

• Advantages:– Moredeclarativeapproachthanusingnestedclassesetc.– Encapsulation– Separationofconcerns– Readable

• Customelementnamesneedtocontainadash(-),e.g.my-artist,some-thing,cool-dude

• Wewanttobeabletocreateare-usable“artist”component


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>






Some Content</div>

</template><script>


})</script>

</dom-module>






Some Content</div>

</template><script>


})</script>

</dom-module>


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>


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>


DeclaredProperties


<link rel="import"href="../bower_components/iron-image/iron-image.html">


<iron-image src="{{img}}"></iron-image><span>{{name}}</span>

</template><script>

Polymer({is : 'my-artist',properties : {

name : String,img : String

}})

</script></dom-module>


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>


declaredpropertiesà elementattributes

Breakout:Styling


• horizontal layoutofall<my-artist>elements• centertheartist’snameunderneath theimage• [optional:makeitresponsive]• timeframe:8minutes


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>


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


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>


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'}

]



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


<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"

}]


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>


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.


Round-UpQuiz

1. Trueorfalse:a) Acustomelement’s"declared property"willbecomeitsattribute,

e.g.<my-element propertyxyz= "...">b) "mySuperProperty" isavalidpropertynamec) Databindingautomaticallyworkswithsub-properties.d) Elementnamesneedtocontainadash.

2. Spotthe3errors:


<iron-ajaxurl="artists.json"autolastResponse="[[artists]]"></iron-ajax>

<template is="dom-bind" items="{{artists}}">

<div>{{item}}</div></template>

Thanks!Whatareyourquestions?


LocalDOMà ShadowDOM/ShadyDOM

• Oncetheelementisused,LocalDOMinsidethe<template>tagsbecomespartofthehost’s“ShadowDOM”

• CurrentdefinitionofShadowDOM(W3C):“amethodofcombiningmultipleDOMtreesintoonehierarchyandhowthesetreesinteractwitheachotherwithinadocument,thusenablingbettercompositionoftheDOM”

• Implications:– ElementIDsinsideshadowDOMdonotcollidewithotherDOM(s)– MoreconvenientCSSscopes– CleanJavaScriptnamespace

• Polymer(also)usesthelightweightversion“ShadyDOM”


ShadowDOMintheDeveloperConsole


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


Thingstolookintoifyouareinterested

• Referentialtransparency


Documents

Multimedia im Netz Online Multimedia - LMU MedieninformatikMultimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 13 –Major Subject Ludwig-Maximilians -Universität