InputManJSデザイナ

本製品では、InputManJSの各コントロールを視覚的にデザインする InputManJSデザイナを提供します。デザイン画面を使用すると、コントロールのインスタンスを作成してプロパティとイベントを設定し、 HTML／JavaScriptを生成してアプリケーションに組み込むことができます。

全般

デザイナの起動時には、初期状態のGcTextBoxコントロールが配置されています。デザイン画面のコントロールは、デザインモードで表示されます。つまり、スクロール、サイズ変更などコントロールを操作することはできません。

コントロールのオブジェクトモデルを設定するには、ページの右側にあるプロパティペインを使用します。使用可能な各プロパティにはプロパティの型に応じた適切な種類のエディタが表示され、そこで加えた変更は選択したコントロールにすぐに適用されます。

イベントペインも右側に表示され、選択したコントロールが公開する各イベントを切り替えるトグルボタンが表示されます。デザイナは、オンになっているイベントに対してイベント処理コードを追加します。

コントロールの移動、複製、削除

デザイン画面では、複数のコントロールが順番に並べて配置されます。ページの上部にある編集ツールバーを使用して、デザイン画面のコントロールを移動、複製、または削除します。

選択したコントロールインスタンスの名前が編集ツールバータブの左側に表示されます。

メインメニュー

デザイナのメインメニューは初期状態では折りたたまれ、垂直方向のツールバーとして表示されます。 ページの左上隅にあるInputManJSロゴをクリックすると、次のコマンドを含むメニューを展開します。

保存および開くコマンドを使用して、デザイナの現在の状態をJSONファイルとして保存し、後でその内容をデザイナに再読み込みして戻すことができます。

保存、デザインビュー

デザイナーのコンテンツをHTML／JavaScriptコードとして表示するには、ソースビューコマンドを使用します。 ソースビューでは、InputManJSスクリプトとCSSの参照、デザイン画面上の各コントロールのタグ、および各コントロールを作成して初期化するスクリプトを含むコードが表示されます。 ページからコードスニペットを直接コピーしたり、メインメニューの保存コマンドを使用してHTMLファイルを保存したりすることができます。

デザイン画面に戻るには、デザインビューコマンドを使用します.