docs: Dateien zum Polymer-Artikel in Ausgabe 17/04

1704-polymer/README.md

@@ -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
+```

1704-polymer/bookworm_components/bookworm-detail/bookworm-detail.html

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

1704-polymer/bookworm_components/bookworm-search/bookworm-search.html

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

1704-polymer/bower.json

@@ -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"
+  }
+}

1704-polymer/index.html

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

README.md

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