yumoqing/bricks

Fork 0

yumoqing 2d8e72a5d6 bugfix

2025-11-19 12:30:39 +08:00

6.0 KiB

Raw Permalink Blame History

bricksフレームワークの紹介

bricksの目的

フロントエンドコードが不要、または極力少ない
フロントエンド開発の技術的ハードルを下げる
データ駆動型
よく使われるコントロール（部品）をラップ化
純粋なJSONによる開発

bricksの概念

コントロールとコントロールの継承
イベントおよびイベント処理
コントロールのネストとページの構成

コントロールとコントロールの継承

bricksは「コントロール」という概念を使ってWeb GUIの表示要素を表現しています。各コントロールは、HTMLタグに対応するJavaScriptクラスにマッピングされています。すべてのコントロールはインスタンス化でき、画面に表示可能です。
コントロールは以下の2種類に分けられます：基本コントロール、コンテナーコントロール。また、各コントロールには組み込みメソッドがあり、イベントを発生させることもできます。

基本コントロール

基本コントロールはアトミック（原子的）なコントロールであり、子コントロールを持つことはできません。

コンテナーコントロール

コンテナーコントロールは子コントロールを持つことができます。bricksでは、コンテナーコントロールに子コントロールを追加し、さらにその子コンテナー内にもさらに子コントロールを追加することで、複雑なWebページを構築します。

実装済みのbricksコントロールの一覧については、コントロール一覧を参照してください。

コントロールの拡張

既存のコントロールでは要件を満たせない場合、bricksではコントロールの拡張が可能です。拡張を行う際には以下のルールに従ってください：

コントロールのクラスは、既存の何らかのコントロールクラスを継承すること
必要に応じてコントロールのロジックを実装すること
必要な場所で this.dispatch を使ってこのコントロールのイベントを発火させること

例えば、「ExtContainer」という名前のコントロールを拡張したい場合：

bricks.ExtContainer = class extends bricks.VBox {
    constructor(opts){
        super(opts);
        /* 新しいコントロールの生成コード */
    }
    ......
    /* その他のメソッド。必要に応じて、あるメソッド内で this.dispatch('new_event', data) を呼び出してイベントを発火 */
}
bricks.register('ExtContainer', bricks.ExtContainer); /* 新しいコントロールを登録 */

新しく作成したコントロールの使用例（example.ui）：

{
    "widgettype":"ExtContainer",
    "options":{
        ....
    },
    "subwidgets":[
        ...
    ],
    "binds":[
        {
            "wid":"self",
            "event":"new_event",
            "actiontype":"urlwidget",
            "target":"some_container",
            "options":{
                "url":"{{entire_url('./some_ui.ui')}}"
            }
        }
    ]
}

イベントおよびイベント処理

各コントロールは、対応するDOM要素のイベント、およびコントロールのJavaScriptクラスやその継承元クラスのメンバ関数内で dispatch によって発生したイベントをトリガーできます。

つまり、bricksのコントロールが発生させるイベントは以下の2種類です：

DOM要素のネイティブイベント
コントロールクラス内でカスタム定義されたイベント

上記2種類のイベントは、同じ方法で処理されます。

コントロールの表現形式

サーバー側のバックエンドでは、JSONファイルの形式でコントロールを表現します。各UIファイルは1つのコントロールを定義します。コンテナーコントロールの場合、UIファイル内の subwidgets 子プロパティに子コントロールを追加できます。

id属性

文字列型の属性。コントロールのIDを定義し、getWidgetById で検索できるようにします。指定しない場合は、システムが自動的にIDを生成します。

options属性

辞書型の属性。コントロール生成時のオプション。各コントロールが受け入れ可能なオプションについては、[コントロールオプションの説明]を参照してください。

binds属性

配列型の属性。0個以上のイベント応答を定義します。各bindオブジェクトはイベントの仕様に準拠している必要があります。

コンテナーコントロール固有の属性

subwidgets

配列型の属性。コンテナーコントロールの子コントロールを定義します。各要素が1つの子コントロールを表し、子コントロールはコントロールのデータ要件に従う必要があります。

アプリケーション開発

サーバーのバックエンドに配置された .ui 拡張子のJSON形式ファイルを使用して開発を行います。各 .ui ファイルは1つのコントロールを定義し、基本コントロールおよびコンテナーコントロールの両方をサポートしています。

UIファイルの書き方については、UIファイルフォーマットをご参照ください。

デバッグ

UIファイルは直接デバッグが可能です。たとえば、サーバーのルートディレクトリ下の test ディレクトリに hello.ui というファイルがある場合、ブラウザで以下のURLにアクセスしてデバッグできます：
https://sername/test/hello.ui

6.0 KiB Raw Permalink Blame History Unescape Escape