一部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のみ持っている。
動作確認
Container・Link・Button・Iconの4つのWidgetを画面に配置し、そのVisibleプロパティを画面のLocal Variable(Boolean型)に紐付けた。
このLocal VariableをCheckboxに紐付け、画面操作でTrue・Falseを切り替えられるようにした。
以下は、ブラウザの開発者ツール > Elementsタブを使ってタグの様子を確認したもの。
Visible=Trueのとき(赤枠内が4つのWidgetに対応するHTMLタグが出力されている)
Visible=Falseのとき(4つのWidgetに対応するタグは無くなった)
Blockを囲むContainerのVisibleを変更して動作を確認
動作確認用実装
Blockに、Initialize・Ready・Destory Eventに対するハンドラを作成する。
ハンドラではJavaScript要素を配置して、console.logを使ってコンソールログを出力。その内容をブラウザの開発者ツール > Consoleタブで確認することで、ContainerのVisibleを変えて何が起きるかを観察した。
ContainerのVisibleをFalse→Trueにする:BlockのOnInitialzie・OnRenderが動作する
以下の通り、VisibleをFalse→Trueにした時点で、Blockの初期処理が動いていることを確認できた。
ContainerのVisibleをTrue→Falseにする:BlockのOnDestoryが動作する
↑に引き続き、VisibleをTrue→Falseに変更すると、以下の通り、BlockのDestroyハンドラが動作していることを確認できた。
まとめ
- 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が先)