docs: Dateien zum Polymer-Artikel in Ausgabe 17/04
This commit is contained in:
parent
d0d5280021
commit
18a465e5a0
GPG key ID:
C6B7F469EE363E1F
6 changed files with 140 additions and 0 deletions
30
1704-polymer/README.md
Normal file
30
1704-polymer/README.md
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
# Web Components mit Polymer
|
||||
|
||||
Dieses Verzeichnis enthält die begleitenden Quelltexte und Befehle zum Artikel in der Ausgabe 04/17.
|
||||
|
||||
## Dateien
|
||||
|
||||
- [bookworm_components/bookworm-detail/bookworm-detail.html](bookworm_components/bookworm-detail/bookworm-detail.html)
|
||||
die Detail-Komponente zeigt die Ergebnisse der Buchsuche an
|
||||
- [bookworm_components/bookworm-search/bookworm-search.html](bookworm_components/bookworm-search/bookworm-search.html)
|
||||
die Such-Komponente enthält die Such-Logik und das Eingabefeld
|
||||
- [bower.json](bower.json)
|
||||
wird von Bower verwaltet und definiert die Abhängigkeiten
|
||||
- [index.html](index.html)
|
||||
das Grundgerüst einer Webseite, die die Polymer-Komponenten einbindet
|
||||
|
||||
## Befehle
|
||||
|
||||
```bash
|
||||
# Bower initialisieren
|
||||
bower init
|
||||
|
||||
# Polymer-Komponenten installieren
|
||||
bower install --save \
|
||||
Polymer/polymer \
|
||||
PolymerElements/iron-ajax \
|
||||
PolymerElements/paper-card \
|
||||
PolymerElements/paper-input \
|
||||
PolymerElements/paper-material \
|
||||
PolymerElements/paper-styles
|
||||
```
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<link rel="import" href="../../bower_components/polymer/polymer.html" />
|
||||
<link rel="import" href="../../bower_components/paper-card/paper-card.html" />
|
||||
<dom-module id="bookworm-detail">
|
||||
<template>
|
||||
<style>
|
||||
paper-card {
|
||||
margin: 1em;
|
||||
padding: 0.5em;
|
||||
width: 20em;
|
||||
--paper-card-header-image-text : {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 1px black,
|
||||
1px -1px 1px black,
|
||||
-1px 1px 1px black,
|
||||
-1px -1px 1px black;
|
||||
}
|
||||
}
|
||||
#subtitle {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#details {
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
<paper-card heading="{{bookdata.volumeInfo.title}}" image="{{bookdata.volumeInfo.imageLinks.thumbnail}}">
|
||||
<div id="subtitle">{{bookdata.volumeInfo.subtitle}}</div>
|
||||
<div id="details">{{bookdata.volumeInfo.pageCount}} Pages ({{bookdata.volumeInfo.publishedDate}})</div>
|
||||
</paper-card>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
is: "bookworm-detail",
|
||||
properties: {
|
||||
bookdata: {
|
||||
type: Object
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<link rel="import" href="../../bower_components/polymer/polymer.html" />
|
||||
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html" />
|
||||
<link rel="import" href="../../bower_components/paper-input/paper-input.html" />
|
||||
<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
|
||||
<link rel="import" href="../../bower_components/paper-styles/typography.html" />
|
||||
<link rel="import" href="../bookworm-detail/bookworm-detail.html" />
|
||||
<dom-module id="bookworm-search">
|
||||
<template>
|
||||
<style>
|
||||
* {
|
||||
@apply(--paper-font-common-base);
|
||||
}
|
||||
paper-material {
|
||||
padding: 1em;
|
||||
}
|
||||
</style>
|
||||
<paper-material>
|
||||
<paper-input label="enter a search term" value="{{searchterm}}"></paper-input>
|
||||
<iron-ajax auto debounce-duration="500"
|
||||
url="https://www.googleapis.com/books/v1/volumes?q={{searchterm}}"
|
||||
handle-as="json" last-response="{{searchresult}}"></iron-ajax>
|
||||
<template is="dom-repeat" items="{{searchresult.items}}">
|
||||
<bookworm-detail bookdata="{{item}}"></bookworm-detail>
|
||||
</template>
|
||||
</paper-material>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
is: "bookworm-search"
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
22
1704-polymer/bower.json
Normal file
22
1704-polymer/bower.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "bookworm",
|
||||
"authors": [
|
||||
"Marcus Fihlon <marcus@fihlon.ch>"
|
||||
],
|
||||
"description": "An example project for a Polymer tutorial.",
|
||||
"main": "index.html",
|
||||
"license": "AGPL",
|
||||
"homepage": "https://github.com/McPringle/bookworm",
|
||||
"private": true,
|
||||
"ignore": [
|
||||
"bower_components"
|
||||
],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^2.0.0",
|
||||
"paper-input": "PolymerElements/paper-input#^2.0.0",
|
||||
"iron-ajax": "PolymerElements/iron-ajax#^2.0.0",
|
||||
"paper-material": "PolymerElements/paper-material#^2.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^2.0.0",
|
||||
"paper-card": "PolymerElements/paper-card#^2.0.0"
|
||||
}
|
||||
}
|
||||
12
1704-polymer/index.html
Normal file
12
1704-polymer/index.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Bookworm</title>
|
||||
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="bookworm_components/bookworm-search/bookworm-search.html" />
|
||||
</head>
|
||||
<body>
|
||||
<bookworm-search></bookworm-search>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -6,6 +6,8 @@ In diesem Repository findest du die Quelltexte und Konfigurationsbeispiele zu Ar
|
|||
|
||||
- [Softwareprojekte selbst hosten mit Forgejo](2503-forgejo)
|
||||
*Java aktuell 03/25*
|
||||
- [Web Components mit Polymer](1704-polymer)
|
||||
*Java aktuell 04/17*
|
||||
|
||||
## Struktur
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue