0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[ODC]WidgetのVisible=Falseにするとどうなるか

Posted at

一部UI部品で初期化をやり直したいことがあり、BlockをContainerで囲み、そのVisibleをTrue -> False -> Trueと切り替えることで再度初期化させることができた。
なぜこうなるのかを確認してみた。

環境情報

ODC Studio(Version 1.5.5)

WidgetのVisible=Falseにすると対応するタグが消える

Container・Link・Button・IconにはVisibleプロパティがある

Visibleプロパティは、対象のWidgetを、Trueなら表示させ、Falseなら非表示にさせるもの。
Container・Link・Button・Iconのような一部のWidgetのみ持っている。
スクリーンショット 2025-01-27 23.24.46.png

動作確認

Container・Link・Button・Iconの4つのWidgetを画面に配置し、そのVisibleプロパティを画面のLocal Variable(Boolean型)に紐付けた。
このLocal VariableをCheckboxに紐付け、画面操作でTrue・Falseを切り替えられるようにした。

以下は、ブラウザの開発者ツール > Elementsタブを使ってタグの様子を確認したもの。

Visible=Trueのとき(赤枠内が4つのWidgetに対応するHTMLタグが出力されている)
スクリーンショット 2025-01-27 22.59.07.png

Visible=Falseのとき(4つのWidgetに対応するタグは無くなった)
スクリーンショット 2025-01-27 23.02.04.png

Blockを囲むContainerのVisibleを変更して動作を確認

動作確認用実装

Blockに、Initialize・Ready・Destory Eventに対するハンドラを作成する。
ハンドラではJavaScript要素を配置して、console.logを使ってコンソールログを出力。その内容をブラウザの開発者ツール > Consoleタブで確認することで、ContainerのVisibleを変えて何が起きるかを観察した。
スクリーンショット 2025-01-27 23.07.35.png

ContainerのVisibleをFalse→Trueにする:BlockのOnInitialzie・OnRenderが動作する

以下の通り、VisibleをFalse→Trueにした時点で、Blockの初期処理が動いていることを確認できた。
スクリーンショット 2025-01-27 23.12.02.png

ContainerのVisibleをTrue→Falseにする:BlockのOnDestoryが動作する

↑に引き続き、VisibleをTrue→Falseに変更すると、以下の通り、BlockのDestroyハンドラが動作していることを確認できた。
スクリーンショット 2025-01-27 23.15.06.png

まとめ

  • BlockをContainerで囲み、ContainerのVisibleをTrue→Falseと切り替えることで、OnDestroyが動作する(つまり、OnDestroyを正しく実装している部品なら後始末も綺麗に動くはず)
  • 同じくFalse→Trueと切り替えることで、再度初期化を発生させることができる

なお、Blockを入れ子にした場合、親Blockを含んだContainerのVisibleを切り替えることで、親Block・子Block双方にEventが発生する。順番は以下の通りで少し注意が必要。

(BlockParentが親BlockのEvent。Blockは子BlockのEvent、OnInitializeとOnDestoryは親Blockが先にEvent発生し、OnReadyは子BlockのEventが先)
スクリーンショット 2025-01-27 23.20.32.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?