2023年11月30日木曜日

Cozy Web/グリッド

モデル駆動開発のエコシステムのキーパーツとして、Webアプリケーション・フレームワークのCozy Webを紹介しています。

数回に渡りリソースの一覧表示の方法について見てきました。その一環でグリッドとカードによる一覧表示を取り上げます。グリッドとカードによる覧表表示はHTMLの標準機能では用意されていないので、この機能をサポートしているWebフロントエンド・フレームワークBootstrapを導入し、その上でグリッドとカードによるリソースの一覧表示を行うことにします。

HelloGrid

リソースのグリッド表示を行うHelloGridを作成します。

HelloGridはBootstrap 5を使ってグリッド表示を行います。

Cozy Web/Webライブラリで紹介したWebライブラリ機能を使用してBootstrap 5をサポートするBootstrap5ライブラリを使用します。Cozy Web/Webライブラリで紹介したWebライブラリ機能を使用してBootstrap 5をサポートするBootstrap5ライブラリを使用します。

準備

cozyを起動するディレクトリのwebappsディレクトリに、アプリケーションのホームディレクトリとなるHelloGridを作成します。

モデル

WEB-INF/models/model.orgにアプリケーションで使用するモデルが定義します。これは前回まで使用していたHelloResourceと同じ設定です。

view plainprint?
  1. * entity    
  2. ** product  
  3. *** features    
  4. table=product  
  5. *** attributes    
  6. | Name  | Type   | Multiplicity |  
  7. |-------+--------+--------------|  
  8. | id    | token  |            1 |  
  9. | name  | string |            1 |  
  10. | price | int    |            1 |  

エンティティproductを定義しており、Webのリソースproductとなります。

webapp.conf

ホームディレクトリのWEB-INFディレクトリ配下にwebapp.confを配置し、Bootstrap5ライブラリの名前である「bootstrap5」をextend属性に設定します。この設定を行うことで、Bootstrap5ライブラリがWebアプリケーションのベースとして設定されます。

view plainprint?
  1. extend: bootstrap5  

一覧表示

CozyのWebライブラリBootstrap5はデフォルトでは、tableタグを使った一覧表示を行います。

Webブラウザ

前回と同様にproductリソースに対するアクセスを行います。

view plainprint?
  1. http://localhost:8080/web/HelloGrid/product  

Cozy Web/Webライブラリで説明したとおり、WebライブラリBootstrapでは、ナビゲーションバーやヘッダー、フッターを使用した画面レイアウトになります。Cozy Web/Webライブラリで説明したとおり、WebライブラリBootstrapでは、ナビゲーションバーやヘッダー、フッターを使用した画面レイアウトになります。

画面内のコンテンツの部分にBootstrapによって綺麗にレイアウトされた表が表示されました。

HTML

webページの表示のために出力されたHTMLは以下になります。

tableタグにはBootstrap用のclass属性が設定されているため、Bootstrap標準の綺麗な表が出力されます。

view plainprint?
  1. <?xml version="1.0"?>  
  2. <!DOCTYPE html>  
  3. <html lang="ja">  
  4.   <head>  
  5.     <meta charset="utf-8"/>  
  6.     <meta content="width=device-width, initial-scale=1" name="viewport"/>  
  7.     <link crossorigin="anonymous" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/>  
  8.     <style>  
  9.       .card a {  
  10.       color: inherit;  
  11.       text-decoration: none;  
  12.       }  
  13.       .card:hover {  
  14.       background-color: #f8f9fa;  
  15.       border-color: #007bff;  
  16.       }  
  17.     </style>  
  18.   </head>  
  19.   <body>  
  20.     <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"/>  
  21.     <nav class="navbar navbar-light bg-primary">  
  22.       <div class="container-fluid">  
  23.         <span class="navbar-brand mb-0 h1">Cozy Web</span>  
  24.       </div>  
  25.     </nav>  
  26.     <nav class="navbar navbar-expand-lg navbar-light bg-light">  
  27.       <div class="container-fluid">  
  28.         <a class="navbar-brand" href="#">Navbar</a>  
  29.         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">  
  30.           <span class="navbar-toggler-icon"/>  
  31.         </button>  
  32.         <div class="collapse navbar-collapse" id="navbarNav">  
  33.           <ul class="navbar-nav">  
  34.             <li class="nav-item">  
  35.               <a class="nav-link active" aria-current="page" href="#">Home</a>  
  36.             </li>  
  37.             <li class="nav-item">  
  38.               <a class="nav-link" href="#">Features</a>  
  39.             </li>  
  40.             <li class="nav-item">  
  41.               <a class="nav-link" href="#">Pricing</a>  
  42.             </li>  
  43.             <li class="nav-item">  
  44.               <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
  45.             </li>  
  46.           </ul>  
  47.         </div>  
  48.       </div>  
  49.     </nav>  
  50.     <div class="table-responsive">  
  51.       <table class="table">  
  52.         <caption class="">product</caption>  
  53.         <thead class="">  
  54.           <tr class="">  
  55.             <th class="" scope="col">Id</th>  
  56.             <th class="" scope="col">Name</th>  
  57.             <th class="" scope="col">Price</th>  
  58.           </tr>  
  59.         </thead>  
  60.         <tbody class="">  
  61.           <tr data-href="product/1.html">  
  62.             <td class="">1</td>  
  63.             <td class="">Apple</td>  
  64.             <td class="">300</td>  
  65.           </tr>  
  66.           <tr data-href="product/2.html">  
  67.             <td class="">2</td>  
  68.             <td class="">Orange</td>  
  69.             <td class="">350</td>  
  70.           </tr>  
  71.           <tr data-href="product/3.html">  
  72.             <td class="">3</td>  
  73.             <td class="">Peach</td>  
  74.             <td class="">400</td>  
  75.           </tr>  
  76.           <tr data-href="product/4.html">  
  77.             <td class="">4</td>  
  78.             <td class="">Berry</td>  
  79.             <td class="">450</td>  
  80.           </tr>  
  81.         </tbody>  
  82.       </table>  
  83.     </div>  
  84.     <nav class="navbar navbar-light bg-secondary">  
  85.       <span>Cozy Web</span>  
  86.     </nav>  
  87.   </body>  
  88. </html>  

グリッド

それでは、グリッド表示を行います。

webapp.conf

Bootstrapアプリケーションの一覧表示のデフォルト設定をwebapp.confに設定することができます。

webapp.confのthemeにテーマbootstrap-gridを設定します。

テーマbootstrap-gridは一覧表示のデフォルト設定をグリッドにしたテーマです。

view plainprint?
  1. extend: bootstrap5  
  2. theme: bootstrap-grid  

Webブラウザ

productリソースに対するアクセスを行います。

view plainprint?
  1. http://localhost:8080/web/HelloGrid/product  

表示結果は以下になります。

無事Bootstrapのグリッド表示になります。グリッド内にはリソースの内容を記述するカードが表示されています。

デフォルトでは、カード内にはリソースの内容を表す画像どリソースの名前が表示されます。productでは画像の情報は持っていないので、画像なしを示す画像が表示されています。

Bootstrapのグリッドは画面サイズを変えても適切にレイアウトが行われます。先ほどのWebページの横幅を小さく縮めたWebページが以下になります。

HTML

webページの表示のために出力されたHTMLは以下になります。

グリッド内のカードはclass属性にcardが設定されたdevタグで記述されています。

view plainprint?
  1. <?xml version="1.0"?>  
  2. <!DOCTYPE html>  
  3. <html lang="ja">  
  4.   <head>  
  5.     <meta charset="utf-8"/>  
  6.     <meta content="width=device-width, initial-scale=1" name="viewport"/>  
  7.     <link crossorigin="anonymous" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/>  
  8.     <style>  
  9.       .card a {  
  10.       color: inherit;  
  11.       text-decoration: none;  
  12.       }  
  13.       .card:hover {  
  14.       background-color: #f8f9fa;  
  15.       border-color: #007bff;  
  16.       }  
  17.     </style>  
  18.   </head>  
  19.   <body>  
  20.     <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"/>  
  21.     <nav class="navbar navbar-light bg-primary">  
  22.       <div class="container-fluid">  
  23.         <span class="navbar-brand mb-0 h1">Cozy Web</span>  
  24.       </div>  
  25.     </nav>  
  26.     <nav class="navbar navbar-expand-lg navbar-light bg-light">  
  27.       <div class="container-fluid">  
  28.         <a class="navbar-brand" href="#">Navbar</a>  
  29.         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">  
  30.           <span class="navbar-toggler-icon"/>  
  31.         </button>  
  32.         <div class="collapse navbar-collapse" id="navbarNav">  
  33.           <ul class="navbar-nav">  
  34.             <li class="nav-item">  
  35.               <a class="nav-link active" aria-current="page" href="#">Home</a>  
  36.             </li>  
  37.             <li class="nav-item">  
  38.               <a class="nav-link" href="#">Features</a>  
  39.             </li>  
  40.             <li class="nav-item">  
  41.               <a class="nav-link" href="#">Pricing</a>  
  42.             </li>  
  43.             <li class="nav-item">  
  44.               <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
  45.             </li>  
  46.           </ul>  
  47.         </div>  
  48.       </div>  
  49.     </nav>  
  50.     <div class="container">  
  51.       <div class="row">  
  52.         <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">  
  53.           <div class="card">  
  54.             <a href="product/1.html" class="">  
  55.               <img src="assets/img/no-image-icon.png" class="card-img-top"/>  
  56.               <div class="card-header">  
  57.                 <h4 class="card-title">Apple</h4>  
  58.               </div>  
  59.             </a>  
  60.           </div>  
  61.         </div>  
  62.         <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">  
  63.           <div class="card">  
  64.             <a href="product/2.html" class="">  
  65.               <img src="assets/img/no-image-icon.png" class="card-img-top"/>  
  66.               <div class="card-header">  
  67.                 <h4 class="card-title">Orange</h4>  
  68.               </div>  
  69.             </a>  
  70.           </div>  
  71.         </div>  
  72.         <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">  
  73.           <div class="card">  
  74.             <a href="product/3.html" class="">  
  75.               <img src="assets/img/no-image-icon.png" class="card-img-top"/>  
  76.               <div class="card-header">  
  77.                 <h4 class="card-title">Peach</h4>  
  78.               </div>  
  79.             </a>  
  80.           </div>  
  81.         </div>  
  82.         <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-1">  
  83.           <div class="card">  
  84.             <a href="product/4.html" class="">  
  85.               <img src="assets/img/no-image-icon.png" class="card-img-top"/>  
  86.               <div class="card-header">  
  87.                 <h4 class="card-title">Berry</h4>  
  88.               </div>  
  89.             </a>  
  90.           </div>  
  91.         </div>  
  92.       </div>  
  93.     </div>  
  94.     <nav class="navbar navbar-light bg-secondary">  
  95.       <span>Cozy Web</span>  
  96.     </nav>  
  97.   </body>  
  98. </html>  

まとめ

前回まではCozy Webでリソースの定義をすることで、Webアプリケーションが簡単に作成できることを説明しました。

今回は画面の表示方法のカスタマイズとして、グリッド表示を取り上げました。

テーマの設定のみで一覧表示をtableタグによる表からBootstrapならではのグリッド表示にすることができました。また、グリッド表示はBootstrapの機能により画面サイズに従って適切なレイアウトが行われることが確認できました。

モデルの定義以外はほとんどノープログラミングでWebアプリケーションの作成ができることが分かりました。

次回はグリッド表示のカスタマイズ方法について取り上げる予定です。

諸元

Cozy
0.0.15
投稿者 時刻:
ラベル: , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)