Wijmoデザイナ

Wijmoデザイナは、Wijmoコントロールを作成して構成するためのビジュアルデザイナです。Wijmoデザイナには、Visual Studioと同様のプロパティグリッドとライブプレビューが用意されています。デザインサーフェスを使用すると、特定のコントロールのインスタンスを作成してプロパティとイベントをカスタマイズしたり、対応するHTML／JavaScriptを生成してアプリケーションに組み込むことができます。このデザイナは、グリッドやチャートなどの複雑なオブジェクトを使用する際に特に便利です。

Wijmoデザイナを起動する

ページを最初に開くと、ライブサンプルデータを含むFlexGridコントロールがデザインサーフェスに1個配置されています。デザインサーフェス上のコントロールは設計モードで表示されます。このため、スクロールやサイズ変更などの操作をコントロールに直接行うことはできません。代わりに、ページの右側にあるプロパティペインを使用して、コントロールのオブジェクトモデルを操作できます。使用可能なプロパティごとに適切な種類のエディタが表示されます。そのエディタで加えた変更は、選択したコントロールにすぐに適用されます。

同じく右側にあるイベントペインには、選択したコントロールが公開する各イベントのトグルボタンが表示されます。イベントのボタンをオンにすると、デザイナは定型のイベント処理コードを生成します。

デザインサーフェスでは、複数のコントロールを順番に並べて表示できます。ページ上部の編集ツールバーを使用して、デザインサーフェス上のコントロールを移動、複製、または削除できます。

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

デザイナのメインメニューは、初期状態では折りたたまれ、縦に並んだアイコンで表示されます。ページの左上隅にあるWijmoロゴをクリックすると、メニューが展開され、次のコマンドが表示されます。

［保存］コマンドと［開く］コマンドを使用して、デザイナの現在の状態をJSONファイルとして保存し、その内容を後からデザイナに再ロードできます。

デザイナの内容をHTML／JavaScriptコードとして表示するには、［ソースビュー］コマンドを使用します。ソースビューでは、デザインサーフェスがコードに換わり、Wijmoスクリプト、CSS参照、<div>デザインサーフェス上の各コントロールのタグ、および各コントロールを作成して初期化するスクリプトコードが表示されます。ページから直接コードスニペットをコピーしたり、メインメニューの［保存］コマンドを使用することができます。

デザインサーフェスに戻るには、［デザインビュー］コマンドを使用します。