Hello, alier!

まずはオーソドックスに、画面に「Hello」を表示する所から始めましょう。

ただ、テキストを表示するだけではシンプルすぎるので、画面上にボタンを設置し、押したら「Hello, alier!」と表示するアプリケーションにします。

Starting Guideのセットアップの手順の中で、すでに「Hello, alier!」の表示に成功した方は、サンプルコードで何が行われていたかの解説にもなります。

事前準備

コードを書く前の準備として、Starting Guideの以下の手順まで済んでいることを前提にして進めていきます。

ソースコード

一旦ソースコード全体を見てみましょう。その後細かくコードを確認して行きます。

• /app_res/main.js

import * as AlierFramework from "/alier_sys/AlierFramework.js";
Object.assign(globalThis, AlierFramework);

export default async function main() {
    setupAlier();
    AlierView.setStyleSheets(true,"/alier_sys/ColorTheme_Nihonkai.css", "/alier_sys/AlierGlassy.css");

    Alier.View.attach(new Hello());
}

class Hello extends ViewLogic {
    constructor() {
        super();

        // container
        const container = `
          <alier-container>
            <alier-button id="button">ボタン</alier-button>
            <alier-text id="comment"></alier-text>
          </alier-container>
        `;

        // load html
        this.relateElements(
            this.collectElements(
                this.loadContainer({ text: container })
            )
        );
    }

    async messageHandler(msg) {
        return await msg.deliver({
            button: msg => {
                // commentにhello alierを挿入する
                this.comment.value = "Hello, alier!";
            }
        });
    }
}

以下は実行結果です。

起動画面

ボタン押下後

解説

フレームワークのインポート

main.js の最初の行から見ていきましょう。

import * as AlierFramework from "/alier_sys/AlierFramework.js";
Object.assign(globalThis, AlierFramework);

import したAlierFramework.js をグローバル名前空間に公開しています。これによって ViewLogic などの Alier の主要なクラスやオブジェクトの機能をプログラム全体で直接利用可能になります。

エントリーポイント

export default async function main() {

main() 関数を作成しています。

Alier フレームワークでは main() がエントリーポイントとなるので必ず作成する必要があります。

アプリケーションはこの関数から始まります。

    setupAlier(); 

その次の setupAlier() で、フレームワーク機能をプログラム内で使えるようにセットアップします。特別な理由がない限りは、呼ぶようにして下さい。

    AlierView.setStyleSheets(true,"/alier_sys/ColorTheme_Nihonkai.css", "/alier_sys/AlierGlassy.css");

次に AlierView.setStyleSheets() で、スタイルを適用します。引数で渡している ColorTheme_Nihonkai.css と AlierGlassy.css は Alier が提供する標準のスタイルシートです。

    Alier.View.attach(new Hello()); 

一番初めに表示されるコンテンツを生成し、画面に設置しています。Alier.View は Alier のルートエレメントのことで、デバイス画面に表示されるアプリケーションの画面そのものです。引数に渡している Hello() は表示するコンテンツで、詳しくはこの後説明します。Alier.View は最初、上映前のスクリーンのように何も映し出していない状態ですが、attach() を行うことで引数に渡したコンテンツが Alier.View に反映、表示されます。

通常はここに、データを扱うための Model の処理が加わりますが、今回のサンプルは表示処理だけを扱うので割愛しています。

コンテナの構築と ViewLogic の初期化

class Hello extends ViewLogic {
    constructor() {
        super();

ViewLogic クラスを継承した Hello という派生クラスを定義します。このクラスのインスタンスを attach() に渡しています。

ViewLogic は Alier の表示機能の中核を担うクラスで、コンテンツを管理するための容器のようなものです。このような役割からコンテナと呼ばれています。

ViewLogic は、コンテナに入っている要素を管理し、様々な操作を加える事が出来ます。

        // container
        const container = `
          <alier-container>
            <alier-button id="button">ボタン</alier-button>
            <alier-text id="comment"></alier-text>
          </alier-container>
        `;

表示コンテンツを HTML で記述し、変数に文字列として格納しています。

<alier-container>, <alier-button>, <alier-text> は Alier 独自のタグになります。これらについてはこの後の処理で説明します。

        // load html
        this.relateElements(
            this.collectElements(
                this.loadContainer({ text: container })
            )
        );

ViewLogic に 先ほど用意した HTML を読み込みます。

loadContainer() で、引数で渡された HTML 文字列をパースし、<alier-container> タグで囲われた要素をDOMノードに変換して、これをコンテナとして内部に保存します。またこのコンテナは返値となります。

collectElements() で引数で渡されたコンテナの中から次の特徴を持つ要素を抽出し、その一覧情報を返します。

• id 属性を持った、Alierが提供する独自のタグの要素
• data-ui-component 属性と id 属性を持つ要素

relateElements() で抽出された一覧情報を元に要素を ViewLogic のプロパティに割り当てて、自身のメンバー変数として参照することを可能にします。

また、この割り当てられた要素の中でAlierが提供する独自のタグの要素のイベントを受け取ることが出来るようになります。また、そのほかに data-active-events 属性で付与されたイベントを受け取ることも出来ます。

今回は短い HTML なので内部変数で記述しましたが、もっと複雑な画面を構成する時は HTML ファイルを作成し、そのファイルを読み込む事も出来ます。

ボタンイベントをハンドリングする

ボタンを押した時のイベントをハンドリングしてみましょう。

    async messageHandler(msg) {
        return await msg.deliver({
            button: msg => {

基底クラスの ViewLogic の messageHandler()コールバック関数をオーバーライドすることで ViewLogic に送られたメッセージを受ける事が出来ます。

Alierが提供する独自のタグの要素のイベントは、メッセージオブジェクトに変換され、 ViewLogic.messageHandler に送られます。また、 data-active-events 属性のついた要素のイベントも同じように送られます。

HTML 要素からのイベントでは id 属性の値がメッセージオブジェクトの id プロパティ に設定されます。ここでは "button"です。

messageHandler()の引数で渡される msg はメッセージオブジェクトです。このオブジェクトにはイベント内容や発生した要素の情報が入っています。メッセージオブジェクトの deliver メソッドを使用すると、メッセージ処理を行うことが出来ます。メッセージの id と対になった関数の連想配列を deliver に渡すことで、deliver がその id に対応する処理を呼び出します。

この仕組みによって、そのメッセージに対応する処理を簡潔に記述することが出来ます。

テキスト表示

最後に「Hello, alier!」を画面に表示してみましょう。

    this.comment.value = "Hello, alier!";

HTML 要素を作成する時に記述した id 属性がプロパティ名になります。このプロパティから HTML エレメントを参照出来るので、HTML 操作と同様の事が行えます。

今回はAlier独自のテキスト表示要素の comment を参照して、value プロパティに代入することで「Hello, alier!」を表示します。

実行結果

それではサンプルを動かしてみましょう。

ボタンを押下して「Hello, alier!」が表示されるのを確認できたでしょうか。