Skip to content

first_module.md

Latest commit

 

History

History
142 lines (81 loc) · 5.52 KB

first_module.md

File metadata and controls

142 lines (81 loc) · 5.52 KB
Raw

はじめてのモジュール作成

所要時間: 約 30 分

クイックスタートでサンプルを動かしたら、次は自分で画面を作ってみるステップです。 DB テーブル 1 つに対応する、一覧・詳細・検索の 3 画面を作ります。

動画で見たい方: Module の基本的な作成方法と DB への接続（YouTube）

このチュートリアルで作るもの

1 つのテーブルに対して、以下が動く画面を作ります:

  • 一覧画面 — テーブルのデータを一覧表示
  • 詳細画面 — 追加・編集・削除のための入力フォーム
  • 検索画面 — 一覧の上に表示される検索条件

完成形:

前提

  • クイックスタート を完了していること
  • Data Source が設定されていること（サンプルプロジェクトには SQLite が同梱済み）

独自の DB を使う場合は、先に designer.settings で Data Source を登録してください。

Step 1. モジュールを追加する

デザイナの Module フォルダを右クリックし、「モジュール追加」を選びます。 モジュール名を入力（例: Customer）して追加します。

Step 2. Data Source を指定する

作成したモジュールをダブルクリックで開き、全体設定画面で Data Source を指定します。 対応するテーブル（または View）を選択します。

テーブル一覧が出ない時は、ツールバーのDB 更新ボタンで Data Source 情報を更新してください。

Step 3. DB フィールドをモジュールに追加する

Data Source を設定すると、ツールボックスに「DB フィールド」リストが表示されます。 このリストから、モジュールで使いたいカラムをドラッグ＆ドロップで Fields に追加します。

Id について（重要）

データの追加・更新・削除には、System Field の Id フィールドが必須です。

  • Id は名前を Id から変更できない
  • Id には 2 種類ある:
    • System Field の Id — データ操作のキー（必須）
    • 一般 Field の Id 型 — 表示用など

DB カラムが Id という名前でない場合は、先に System Field の Id をツールボックスから追加し、その Id フィールドのプロパティで 対応する DB カラムを指定してください。

Id の種類（DB 自動生成 / ユーザー入力 / 複合キー）は Id フィールドのプロパティで設定します。

→ 詳しく: Id Field / Field 全般

Step 4. 一覧画面を設定する

「一覧」タブに切り替え、段と列の数を決めます。 「未使用フィールド」から表示したいフィールドを一覧レイアウトへドラッグ＆ドロップします。

Step 5. 詳細画面を設定する

「詳細」タブに切り替え、レイアウトを設定してフィールドを配置します。 詳細画面は追加・編集ダイアログとしても使われます。

レイアウトの詳しい使い方: レイアウト / 動画ガイド

Step 6. 検索画面を設定する

「検索」タブで検索条件を追加します。 一覧画面の上に検索ボックスが出るようになります。

複数条件を設定した場合、And / Or の組み合わせを事前に指定することも、ユーザーに選ばせることもできます。

Step 7. PageFrame に登録する

作成したモジュールを、アプリの外枠である PageFrame に登録します。 登録するとサイドバーにリンクが表示され、画面遷移できるようになります。

Step 8. デプロイして動作確認

デザイナのツールバーのデプロイボタンで Web アプリに反映します。

一覧表示・検索・追加・編集・削除が、この時点ですべて動くはずです。 スクリプトは 1 行も書いていません。

次のステップ

ここまでで「DB と連動した基本画面」が作れました。次はよくあるパターンを学びます:

もっと高度な作成方法: