Web アプリケーションのライブ編集

GeneXus IDE のテーマエディターでスタイル設定を変更すると、F5 キーを押さなくても、実行時に変更を確認できます。テーマで行った外観の変更を確認するために、オブジェクトをビルドする必要はありません。
スタイルの変更は、デバイスまたは Web ブラウザーで実行されているアプリケーションに直接反映されます。

アジャイルプロトタイピング

ライブ編集では、開発者がテーマ設定を変更すると、ただちに変更を確認できます。アプリケーションをビルドする必要はありません。
変更内容に問題がない場合は、変更を保存します。そうでない場合、何度でも変更が可能です。ここでもビルドは一切必要ありません。
設計時のプレビューでは、ターゲットのデバイスでアプリケーションを実行することをお勧めします。ユーザーと同じように見ることが可能で、データを利用でき、デバイスの画面に固有の機能も揃っているためです。

ライブ編集をアクティベートする方法

1. GeneXus IDE の [ 構成 ] コンボボックスに移動し、値を [ ライブ編集 ] に設定します。

IDE の右側に [ ライブ編集 ] タブが開きます。エラーやメッセージは、GeneXus に表示されます。

2. F5 キーで実行するか、または [ これだけを実行 ] (1 回目のみ) を選択し、ライブ編集を有効化します。

3. GeneXus で [ テーマ ] を開き、任意のクラスプロパティを変更します。保存しなくても、デバイスやブラウザーに変更がどのように反映されるかを確認できます。

Web アプリケーションの例

この例では、ある Web トランザクションの [ Delete ] ボタンの前景色と背景色を変更します。対応する Theme クラスは BtnDelete です。
これを行うためには、 [ テーマ ] を開き、このクラスの背景色を次のように変更します:

その後は、保存やビルドを行わなくても変更がブラウザーに反映されます。

Web への実装について:

Web アプリケーションでは、F5 キーを押すか、または [ これだけを実行 ] を実行すると、新しいエントリが gxcfg.js に登録されます。
例: gx.livePreviewUri="http://172.16.2.220:30100/gxlivepreviewservice/?2c413e52-b6a2-4ed9-83de-cdea7df23658:TestLiveEdi";
ブラウザーは、WebSockets を使用して、このポートで実行されている Web サーバーにリクエストを送信します。サーバーは、このブラウザーが解釈する新しい CSS 設定を含む JSON 形式のメッセージで応答します。このリクエストは、"WebSocket frames" のブラウザーコンソールにある [ ネットワーク ] タブで確認できます。