112 lines
6.0 KiB
Markdown
112 lines
6.0 KiB
Markdown
# 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` |