弊社の製品「アポ助」のクライアントはFlashアプリケーションで、ActionScriptを駆使して作られています。 直感的で誰でもすぐに使える画面が好評なのですが、その直感的な操作を実現するために、その時の状態に応じて入力フィールドやチェックボックスなどを動的に生成してレイアウトしています。
ところが、このように動的にコンポーネントを生成してレイアウトするアプリケーションの場合、入力コンポーネントにUIComponentの子クラスを使うとやっかいなことになることがあります。
アポ助はクリニック用の予約管理システムなので、患者様のお名前を入力するフィールドや、診察の種類を選ぶボタンがあり、以下の画像が正しい姿です。
ご覧のように、文字やフィールドなどがきれいに整列して見易くなっています。以下が使用しているクラスです。
テキスト部分: flash.text.TextField
入力フィールド:fl.controls.TextInput
診察の種類:fl.controls.RadioButton/fl.controls.CheckBox
(fl.controlsのコンポーネントは、fl.controls.UIComponentの子クラスです。)
ところが、特定の条件において、これが次のように表示されることがあります。
一目瞭然ですが、フィールドのサイズ設定が反映されずに枠からはみ出ていますし、ラジオボタンやチェックボックスに、肝心のボタンが表示されていません。この問題はUIComponentの描画のタイミングに起因するようです。
この問題はUIComponentのdrawNow()メソッドを呼ぶことで回避できます。つまり、描画のタイミングを明示的に指示する形です。TextInputのwidthやheightの設定が反映されなかったり、チェックボックスが表示されない時などに、試してみてください。