モデル駆動開発のエコシステムのキーパーツとして、Webアプリケーション・フレームワークのCozy Webを紹介しています。
前回はWebフロントエンド・フレームワークBootstrapの上でグリッド表示を行いました。
今回はグリッド内に配置されるカードをカスタマイズする方法について説明します。
HelloGrid
前回作成したリソースのグリッド表示を行うHelloGridを使用します。
HelloGridはBootstrap 5を使ってグリッド表示を行います。
Cozy Web/Webライブラリで紹介したWebライブラリ機能を使用してBootstrap 5をサポートするBootstrap5ライブラリを使用しています。
準備
cozyを起動するディレクトリのwebappsディレクトリに、アプリケーションのホームディレクトリとなるHelloGridを作成します。
モデル
WEB-INF/models/model.orgにアプリケーションで使用するモデルが定義します。これはHelloResourceと同じ設定です。
- * entity
- ** product
- *** features
- table=product
- *** attributes
- | Name | Type | Multiplicity |
- |-------+--------+--------------|
- | id | token | 1 |
- | name | string | 1 |
- | price | int | 1 |
エンティティproductを定義しており、Webのリソースproductとなります。
webapp.conf
ホームディレクトリのWEB-INFディレクトリ配下にwebapp.confを配置し、Bootstrap5ライブラリの名前である「bootstrap5」をextend属性に設定します。この設定を行うことで、Bootstrap5ライブラリがWebアプリケーションのベースとして設定されます。
またthemeにbootstrap-gridを設定します。この設定により一覧表示がグリッドで表示されます。
ここまでが前回の設定です。
- extend: bootstrap5
- theme: bootstrap-grid
今回はグリッドの表示方法をカスタマイズします。
このためにwebapp.confに以下のようにrender.card_kind_in_gridを設定します。
render.card_kind_in_gridに"grid"を指定しているので、card__gridという名前のウィジェットがグリッド内のカードの表示に使用されます。
- extend: bootstrap5
- theme: bootstrap-grid
- render.card_kind_in_grid: "grid"
カードの表示内容の設定
グリッド内にカードを表示するときに使用するウィジェットcard_gridを作成します。
以下のJade形式の card__grid.jade 作成し、WEB-INF/widgets配下に配置します。
- -@val card: ViewCard
- div.card
- div.card-header
- h4.card-title
- =card.header
ファイル名card__grid.jadeの「card」はウィジェット種別を表しこの場合はカードを示します。「__」の後のgridはウィジェットの名前を表します。
カードを記述するDIV要素以下をカードの部品として定義しています。部品内ではHTMLの要素を自由に使うことができます。
部品内のHTML要素ではBootstrapで定義されているcard, card-header, card-titleといったクラス属性を指定しているので、Bootstrapによって適切な表示が行われます。
また、カードの表示に必要な情報はViewCardオブジェクトとして渡されてくるので、ここから必要な情報を取り出してウィジェット内のHTML要素に埋め込んでいきます。ここではカードのヘッダ情報をH4要素に入れています。
グリッド表示
それでは、グリッド表示を行います。
Webブラウザ
productリソースに対するアクセスを行います。
- http://localhost:8080/web/HelloGrid/product
webページの表示のために出力されたHTML文書は以下になります。
- <?xml version="1.0"?>
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="utf-8"/>
- <meta content="width=device-width, initial-scale=1" name="viewport"/>
- <link crossorigin="anonymous" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"/>
- <style>
- .card a {
- color: inherit;
- text-decoration: none;
- }
- .card:hover {
- background-color: #f8f9fa;
- border-color: #007bff;
- }
- </style>
- </head>
- <body>
- <script crossorigin="anonymous" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"/>
- <nav class="navbar navbar-light bg-primary">
- <div class="container-fluid">
- <span class="navbar-brand mb-0 h1">Cozy Web</span>
- </div>
- </nav>
- <nav class="navbar navbar-expand-lg navbar-light bg-light">
- <div class="container-fluid">
- <a class="navbar-brand" href="#">Navbar</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"/>
- </button>
- <div class="collapse navbar-collapse" id="navbarNav">
- <ul class="navbar-nav">
- <li class="nav-item">
- <a class="nav-link active" aria-current="page" href="#">Home</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Features</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Pricing</a>
- </li>
- <li class="nav-item">
- <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
- </li>
- </ul>
- </div>
- </div>
- </nav>
- <div class="container">
- <div class="row">
- <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">
- <div class="card">
- <div class="card-header">
- <h4 class="card-title">
- Apple
- </h4>
- </div>
- </div>
- </div>
- <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">
- <div class="card">
- <div class="card-header">
- <h4 class="card-title">
- Orange
- </h4>
- </div>
- </div>
- </div>
- <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">
- <div class="card">
- <div class="card-header">
- <h4 class="card-title">
- Peach
- </h4>
- </div>
- </div>
- </div>
- <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">
- <div class="card">
- <div class="card-header">
- <h4 class="card-title">
- Berry
- </h4>
- </div>
- </div>
- </div>
- </div>
- </div>
- <nav class="navbar navbar-light bg-secondary">
- <span>Cozy Web</span>
- </nav>
- </body>
- </html>
前回のグリッド表示ではカード部分は以下のHTML断片になっていました。
- <div class="card">
- <a href="product/1.html" class="">
- <img src="assets/img/no-image-icon.png" class="card-img-top"/>
- <div class="card-header">
- <h4 class="card-title">Apple</h4>
- </div>
- </a>
- </div>
今回は、以下のHTML断片になっており、グリッド内のカードはcard__grid.jadeで定義したものが使用されています。
- <div class="card">
- <div class="card-header">
- <h4 class="card-title">
- Apple
- </h4>
- </div>
- </div>
まとめ
Cozy Webでリソースの定義をすることで、Webアプリケーションが簡単に作成できることを確認してきました。
今回はBootstrapによるレスポンシブル・デザインによるグリッド表示のカードをカスタマイズする方法について説明しました。
モデルの定義とカスタマイズしたカードの定義以外はほとんどノープログラミングでレスポンシブルなWebアプリケーションの作成ができることを確認することができました。
諸元
- Cozy
- 0.0.16
投稿
