モデル駆動開発のエコシステムのキーパーツとして、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