旧 Xojo( Web1.0 ) で WebContainer を使う

Xojo で WebContainer を使うやり方が初見殺しだったので備忘録。
但し、Xojo 2019 r3.1/3.2 の Web1.0 上の操作。Xojo は 2020 から Web2.0 系となり使い方がかなり変わっている(はず)であるがレガシー継続で。

:::note info
ちなみに Xojo とは太古の昔に 「REALbasic」ないし 「CrossBASIC」と呼ばれていたもの。
かつて「Macintosh版のVisual Basic」の位置づけであったが、今では MS-Windows / Linux / Webアプリにも対応。

MS-Windows 上で今は亡き Visual Basic 6 の代替開発としても面白く、 1990年代のノリで昔なつかしRAD (Rapid Application Development) の概念で Web アプリが作成できるというのも今となってはユニーク。
:::

# 画面の切り替え

XOJO で Webアプリを作る時に、HTMLアプリで一般的な URL によるページ遷移はあまり行われず、単一アプリのみで一連の処理を行う画面を作るすることが多い。

基本的に、Xojo Web アプリの画面は「WebPage」オブジェクトを配置し、そこにボタンやテキストなどを貼り付けていく。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/140cd18b-357c-6aee-cfae-9111e13ea292.png)

HTMLアプリでのページ遷移に相当するものとして、Xojoでは「WebPage」オブジェクトを複数持って切り替えるとそれらしくできるかも。

しかしながら今回は モーダルウィンドウを表示してそこで操作をするようにしたい。
そのためには WebContainer を使うと簡単。ちなみに、Message でポップアップを表示できるが、あくまでテキストのみ。

# 必要な画面

ここで「編集」を押したら

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/aaf29e95-5f16-2ceb-380d-2629f09ee904.png)

詳細ウィンドウが出るようにしたい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/ebf5b324-f0fc-9e85-ce4c-953a9bc7d43b.png)


# GUI操作

まず、「WebPage」オブジェクトの上に、GUI部品を貼り付けていく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/0aab29c3-af95-6593-b6e4-244ef63425fe.png)
次に、画面右の「Library」 から「Container Control」をドラッグして画面左の「Contents」配下に置く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/0fa95995-ecd8-409f-0846-c43f43bcd928.png)
「ContainerControl1」ができるのでドラッグして「WebPage1」配下に置く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/c0104375-d81c-8196-0210-af26db38db21.png)
「ContainerControl11」が配置される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/c65521a1-9b3d-5cce-c6b6-8283c7070045.png)
「ContainerControl11」にStyleを適用し背景色を設定。Containerに載せたいGUI部品を貼り付けていく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/faf43660-2e4a-1166-f11a-522cdfbff0f9.png)
貼り付けたGUI部品を「ContainerControl1」-「Controls」配下に移動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/a20e44ae-be75-5b9d-439a-d9e96a351607.png)
「ContainerControl1」を押すと移動したGUI部品がずれているので修正する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/f22d5533-9a14-74e2-ab4f-9ab4d09d927c.png)
ウィンドウサイズはここで修正。「ContainerControl11」よりも大きな場合は「ContainerControl11」側にスクロールバーが現れる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/5d998842-fb80-33d6-d79c-48eae2bcb033.png)
「ContainerControl11」を表示して見栄えを確認、「Visible」をFalseに切り替える。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/603f7ccc-2d02-0e7e-5368-8b60205e754e.png)
# コード
「詳細」ボタンを押して「Action」を選ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/17aa6ef2-3e13-1813-2d1b-0ba60b93fba6.png)

コードを記述
```
ContainerControl11.Visible=True
```
# 実行

「詳細」を押すと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/0980d054-922e-13ad-b745-f2b0c17f91ae.png)
モーダルウィンドウが表示されました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/ebf5b324-f0fc-9e85-ce4c-953a9bc7d43b.png)

# 開発しやすく配置

IDE上で WebContainer が他を隠して邪魔なので、開発しやすい位置に移動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/dd5ea736-cd30-5d5e-e944-83a23c777483.png)

コードに以下のように追記して、表示する時に想定の位置になるようにします。
```
ContainerControl11.Top=130
ContainerControl11.Left=150
ContainerControl11.Visible=True
```
これでOK.