# bricksフレームワークの紹介  
## 目次  
* bricksの目的  
* bricksの概念  
* bricksの開発手法  
* bricksの実行方法  

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

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

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

* 基本コントロール  

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

* コンテナーコントロール  

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

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

### コントロールの拡張  
既存のコントロールでは要件を満たせない場合、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種類です：
1. DOM要素のネイティブイベント  
2. コントロールクラス内でカスタム定義されたイベント  

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

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

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

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

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

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

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

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

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