Upon changing the style settings in the Theme Editor inside the GeneXus IDE, see the changes at runtime without pressing F5. You don't need to build any object to see the appearance changes made to the Theme!
All the style changes are reflected directly in the application running on the device or the web browser.
Live Editing allows the designer to change the Theme settings and immediately see those changes without building the application.
If the changes are good for you, you can save them; otherwise, change the settings until they are good enough without doing any build operation.
Remember that the best preview for design time is running the application on the device itself, because you are seeing exactly what the end user will see: the data is available, and all the specific features of the device screen are present.
1. Go to the Configuration combo box inside the GeneXus IDE, and set its value to Live Editing.
The Live Editing tab opens to the right of the IDE. The errors and messages are thrown to the GeneXus output.
2. Run F5 or Run with this only (only for the first time), in order to enable Live Editing.
3. Open the Theme in GeneXus, change any of the class properties, and without saving see how the changes are reflected in the device or browser.
In this example, we are going to change the background and fore colors of the Delete button of a web transaction. The corresponding Theme class is BtnDelete.
So, we just open the Theme and change the background color for this class:
After that, without saving or building, the changes are reflected in the browser:
- For web applications, when F5 or Run with this only is executed, a new entry is registered in the gxcfg.js; for example: gx.livePreviewUri="http://172.16.2.220:30100/gxlivepreviewservice/?2c413e52-b6a2-4ed9-83de-cdea7df23658:TestLiveEdi";
- The browser makes a request using WebSockets to the web server that runs in this port and responds with a JSON format message containing the new CSS settings for the browser to be interpreted. The request looks as follows, and can be seen in the network tab of the browser console in "WebSocket frames".