SwingSet3

SwingアプリケーションをWebに移植する

このチュートリアルでは、SwingSet3アプリケーションをブラウザで実行する手順を説明します。

前提条件

テンプレートプロジェクトをダウンロードして、解凍してください。
Node.js (>= 18)

この例の出発点は、空のHTMLページ、SwingSet3のJAR、およびその依存関係です：

.
├── index.html
├── SwingSet3.jar
└── lib
    ├── AnimatedTransitions.jar
    ├── AppFramework.jar
    ├── Filters.jar
    ├── MultipleGradientPaint.jar
    ├── TimingFramework.jar
    ├── javaws.jar
    ├── swing-layout-1.0.jar
    ├── swing-worker.jar
    └── swingx.jar

1. Webサーバーを起動する

この例を表示するには、ファイルをWebサーバーでホストする必要があります。Vite は便利なツールで、ファイルが変更されると自動的にページをリロードしてくれます。

npx vite

ターミナルに表示されたURLにアクセスすると、空白のページが表示されるはずです。このチュートリアルの残りの部分では、Viteをバックグラウンドで実行しておいてください。

2. CheerpJをドキュメントに追加する

次に、<head>に以下のスクリプトタグを追加して、CheerpJをページに追加しましょう:

<script src="https://cjrtnc.leaningtech.com/3.1/cj3loader.js"></script>

3. CheerpJを初期化し、jarを実行する

次のスクリプトタグを<body>に追加しましょう:

<script type="module">
  await cheerpjInit();
  cheerpjCreateDisplay(800, 600);
  await cheerpjRunJar("/app/SwingSet3.jar");
</script>

これにより、CheerpJが初期化され、800x600の表示エリアが作成され、SwingSet3のjarが実行されます。type="module"を使用することで、最上位のawaitを利用できます。

/app/SwingSet3.jarとは？

これは、ウェブサーバーのルートを表す仮想ファイルシステムです。

ファイルを保存すると、SwingSet3がブラウザで読み込まれ、実行されるはずです 🥳

4. アプリケーションをページ全体に表示する

現在、アプリケーションはページの一部しか占有していませんが、多くのアプリケーションではページ全体を使用したい場合があります。

これを実現するために、新しい要素を<body>に追加しましょう：

<div id="container"></div>

注意

cheerpjCreateDisplayを呼び出すスクリプトの前に、コンテナ要素を追加してください。

次に、CSSを追加しましょう：

<style>
  html,
  body {
    margin: 0;
  }

  #container {
    width: 100vw;
    height: 100svh;
  }
</style>

最後に、スクリプトを更新してコンテナ要素を使用するようにしましょう：

<script type="module">
  await cheerpjInit();
  cheerpjCreateDisplay(-1, -1, document.getElementById("container"));
  await cheerpjRunJar("/app/SwingSet3.jar");
</script>

幅と高さに-1 を渡すことで、CheerpJがコンテナ要素の全サイズを使用し、リサイズイベントを監視します。

再度ページを表示すると、アプリケーションがウィンドウ全体を占有するのが確認できるはずです。また、ウィンドウをリサイズすると、アプリケーションもリサイズされることに気づくでしょう。

結果

ソースコード

GitHubでソースコード全体を確認