tutorialで触ったpost-cardとpost-listを元に、
メモを表示させたい。
1.まずはpost-cardを元にmemo-cardを作成する。
cmd>mkdir elements\memo-card && cd elements\memo-card
cmd>vi memo-card.html
+ <link rel="import" href="../../components/polymer/polymer.html">
+
+ <polymer-element name="memo-card">
+ <template>
+ <style>
+ :host{
+ display: block;
+ position:relative;
+ background-color: #b2ebf2;
+ padding: 10px;
+ width: 400px;
+ height:auto;
+ font-size: 1.0rem;
+ font-weight: 300;
+ border-radius: 10px;
+ }
+ .memo-title{
+ margin-bottom: 20px;
+ }
+ .titlecontainer{
+ width: 100%;
+ margin: 20px;
+ height:70px;
+ }
+ .textcontainer{
+ width: 100%;
+ }
+ polyfill-next-selector{ content: '.memo-title h2';}
+ .memo-title ::content h2{
+ font-size: 2.0rem;
+ font-weight: 300;
+ }
+ polyfill-next-selector{ content: '.memo-title h1';}
+ .memo-title ::content h1{
+ margin: 0;
+ font-size: 1.0rem;
+ font-weight: 300;
+ }
+ </style>
+
+ <paper-shadow z="1">
+ <div class="memo-title" layout vertical center>
+ <div class="titlecontainer">
+ <content select="h2"></content>
+ </div>
+ <div class="textcontainer">
+ <content select="h1"></content>
+ </div>
+ </div>
+ <paper-shadow z="1">
+ <content></content>
+ </template>
+ <script>
+ Polymer({ });
+ </script>
+ </polymer-element>
2.memo-cardを表示するmemo-listを作成する。
cmd>mkdir elements\memo-list && cd elements\memo-list
cmd>vi memo-list.html
+ <link rel="import" href="../../components/polymer/polymer.html">
+ <link rel="import" href="../get-memo-service/get-memo-service.html">
+ <link rel="import" href="../memo-card/memo-card.html">
+
+ <polymer-element name="memo-list" attributes="show">
+ <template>
+ <style>
+ :host{
+ display: block;
+ width: 100%;
+ }
+ memo-card{
+ margin-bottom: 20px;
+ }
+ </style>
+ <get-memo-service id="service" memos="{{memos}}"></get-memo-service>
+ <div layout vertical center>
+ <template repeat="{{memo in memos}}">
+ <memo-card>
+ <h2>{{memo.title}}</h2>
+ <h1>{{memo.memo}}</h1>
+ </memo-card>
+ </template>
+ </div>
+
+ </template>
+ <script>
+ Polymer({
+
+ })
+ </script>
+ </polymer-elemet>
3.memoを取得するajaxサービスを作成する。
cmd>mkdir elements\get-memo-service && cd elements\get-memo-service
cmd>vi get-memo-service.html
+ <link rel="import" href="../../components/polymer/polymer.html">
+ <link rel="import" href="../get-memo-service/get-memo-service.html">
+ <link rel="import" href="../memo-card/memo-card.html">
+
+ <polymer-element name="memo-list" attributes="show">
+ <template>
+ <style>
+ :host{
+ display: block;
+ width: 100%;
+ }
+ memo-card{
+ margin-bottom: 20px;
+ }
+ </style>
+ <get-memo-service id="service" posts="{{memos}}"></get-memo-service>
+ <div layout vertical center>
+ <template repeat="{{memo in memos}}">
+ <memo-card>
+ <h2>{{memo.title}}</h2>
+ <h1>{{memo.memo}}</h1>
+ </memo-card>
+ </template>
+ </div>
+
+ </template>
+ <script>
+ Polymer({
+
+ })
+ </script>
+ </polymer-elemet>
4.memo取得用のwebサービスを作成する。
cmd>vi .\service\getmemo.php
+ <?
+ $sql = '
+ SELECT
+ id AS id,
+ title AS title,
+ memo AS memo
+ FROM t_material_memo
+ ';
+ header('Content-type: application/json; charset=UTF-8');
+ //ネット上で発見した恐ろしく簡潔な書き方。ゴイスー。
+ echo json_encode(connectDb()->query($sql)->fetchAll(PDO::FETCH_ASSOC));
+ ?>
5.index.htmlにmemo-listを表示する。
cmd>vi index.html
+ <memo-list show="all"></memo-list>
- <x-card z="1" style="overflow: visible;">
- <img src="img/beach.png">
- <h2>Welcome to Polymer's Material Design playground demo, a whirlwind tour of all the new component goodness. Enjoy!</h2>
- </x-card>
- <x-card z="1" style="overflow: visible;">
- <img src="img/beach.png">
- <h2>Welcome to Polymer's Material Design playground demo, a whirlwind tour of all the new component goodness. Enjoy!</h2>
- </x-card>
6.elements.htmlに各elementを登録する。
cmd>vi elements.html
<!-- custom element -->
<link rel="import" href="./elements/core-header-panel-ex/core-header-panel-ex.html">
<link rel="import" href="./elements/core-toolbar-ex/core-toolbar-ex.html">
<link rel="import" href="./elements/paper-fab-ex/paper-fab-ex.html">
+ <link rel="import" href="./elements/memo-card/memo-card.html">
+ <link rel="import" href="./elements/memo-list/memo-list.html">
+ <link rel="improt" href="./elements/get-memo-service/get-memo-service.html">
7.いざ、動作確認
サーバにアップして確認
出ない・・・だと・・・。
8.調査&再度動作確認
とりあえずcore-ajaxのresponseを見る限り、
データの取得は出来ている様だ。
時点で怪しいのは、CSS
とりあえず、memo-listをcontainerに入れてみる。
cmd>vi index.html
+ <main class="container" layout vertical center>
<memo-list show="all"></memo-list>
効果がないので、
memo-cardとか、memo-listとか見てみる。
memo-listで使っているcore-ajaxでmemosを指定
していない事が発覚。
そりゃ読めん訳だ。
ついでにスタイルも変更。
修正して確認。
おぉ、表示出来とる。
何かマテリアルっぽさが足りない。
と言う訳で、
9.影を追加する
bower様にpaper-shadowを読み込んでいただく。
cmd>vi bower.json
+ "paper-shadow": "Polymer/paper-shadow#~0.4.2",
cmd>bower update
続いて、memo-cardに影を付ける。
cmd>vi elements\memo-card\memo-card.html
+ <paper-shadow z="1">
<div class="memo-title" layout vertical center>
<div class="titlecontainer">
<content select="h2"></content>
</div>
<div class="textcontainer">
<content select="h1"></content>
</div>
</div>
+ <paper-shadow z="1">
確認
ぽい。ぽいよ。
とりあえず、
メモを登録できて、
見れる様にはなった。
ただ、今のままでは更新しない限り
登録したメモが見られない。
登録したら、一覧に表示したい。
そしてメモが消せるようにしたい。
そう思うのは自然なはず。
次で一覧表示とメモの削除を組み込もう。