Web エントリーポイント

モジュールパス: /alier_sys/Alier.js

概要

モバイルアプリと同等の実行環境を Web でも実現するために、Web アプリ用のエントリーポイントを提供しています。

index.html などで Alier.js をインポートすると、Web 環境で Alier を実行できるようになります。

import "/alier_sys/Alier.js";

副作用

Alier.js をインポートすると以下の副作用が発生します：

  • 次のオブジェクトをグローバルにアサイン
  • 次のカスタムエレメントを登録
    • <alier-view>
    • <alier-container>
    • <alier-list-view>

アプリケーションの起動

Alier.js は、モバイルアプリと同じようにエントリーポイント関数からアプリケーションを立ち上げるための アプリ起動関数をデフォルトエクスポートしています。

アプリ起動関数にアプリのエントリーポイント関数をデフォルトエクスポートしている JavaScript ファイルの URL パスを渡すことで、アプリを起動できます。

warning

アプリ起動関数に渡す URL パスは絶対パスで渡してください。

相対パスを渡した場合、/alier_sys/Alier.js からの相対的なパスとして解決するため、大抵はエラーとなってしまいます。

<!doctype html>
<html>

<head>
  <script type="module">
    import appStart from "/alier_sys/Alier.js";

    appStart("/app_res/main.js");
  </script>
</head>

<body></body>

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

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

        const container = `
            <alier-container>
                <p>Greetings from alier!</p>
            </alier-container>
        `;

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

export default function main() {
    setupAlier();

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

Alier をライブラリとして利用する

Web ページの一部で Alier を利用したいときは、Alier.js をインポートすることで Alier の実行環境を 整えることができます。

<!doctype html>
<html>

<head>
  <script type="module">
    import "/alier_sys/Alier.js";
    import { ViewLogic } from "/alier_sys/ViewLogic.js";

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

        const container = `
          <alier-container>
            <p>Hello from alier!</p>
          </alier-container>
        `;

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

    const hello_element = document.getElementById("hello");
    hello_element.attach(new Hello());
  </script>
</head>

<body>
  <h1>Use Alier as a library</h1>
  <alier-view id="hello"></alier-view>
</body>

</html>