Code On Time continues to execute the App Studio roadmap and delivers amazing technology for the developers of online and offline business applications. This is the first preview of the new development tools embedded directly into the live apps.
An installation of Code On Time consists of the app generator and the local web application called App Studio. Custom apps created with Code On Time include a tiny script linking the studio when running on the localhost address. Developers activate the studio tools by clicking on the icons that surround the application boundaries in the browser window.
The primary objective of the App Studio is to eliminate the learning curve and deliver unprecedented productivity with the live UI inspection and project configuration.
Live UI Inspection
Developers activate the inspection mode and click the user interface elements of a live application to locate the corresponding configuration element of their project. The studio responds by activating the relevant hierarchy with the pre-selected configuration object that matches the inspected UI element. The universal Properties Window with the attached hierarchy provides a full set of available properties.
The Project Explorer hierarchy responds to the live UI inspection with the presentation of the project data controllers and fields. Please note that the changes to the field properties are not persisted yet. The hierarchy editing will be fully implemented in the future releases. This iteration of the studio allows testing the overall performance of the hierarchies and the inspection mode.
Try changing the field labels to see the response in the live apps.
The October 2023 feature drop introduces the unified configuration tools powered by the database of metadata and code. There are three hierarchies in this release - Settings, Models, and Project Explorer. Our goal was to come up with the standard hierarchy descriptors and mechanism to fetch the project configuration data stored in the numerous project files.
App Studio functionality will become more sophisticated with each new release as we populate the metadata to extend the configuration capabilities available to developers.
Hierarchies and Properties Window
The configuration hierarchies of the App Studio present the properties of the selected nodes in the Properties Window. This is the dynamic form based on the “survey” capability of Touch UI. There is no data controller on the server. The survey “simulates” the virtual data controller responses in the browser. App Studio relies on the Touch UI framework of the host application to present its user interface.
The navigation nodes of a hierarchy are presented above the Properties Window area. The information pane below displays a brief description of the selected property or category.
The Properties Window is in the Touch UI form with the custom layout. It has the same capabilities as the forms of the host applications. The label of the selected property is highlighted. Users can start typing to change the property value or choose an available value from the drop down list. The Tab key will switch the focus between the label and the value. The arrow keys allow the user to navigate through the property list. Pressing the Delete key will erase the current value and optionally restore the default value specified in the metadata. The non-default property values are presented in the “bold” font.
The properties are provided with the visibility and read-only rules in the metadata. Developers will see a set of properties that are available for a given configuration of the selected hierarchy node. For example, the Data Format String property is not available for the fields of the String type.
The visibility rules associated with the properties are eliminating the guesswork and potential mistakes.
The properties of the Picture field in the screenshot reveal the Binary Content category. It allows configuration of the properties specific to the BLOB fields. Developers will not be able to specify the Picture field as the primary key of the data controller or enter its Data Format String.
A field with the DataView type will reveal the properties that allow configuring the source of data. The information pane may provide links that will lead developers to the related configuration objects.
The last selected node is automatically selected when the dismissed hierarchy is activated again by the developer. The hierarchies automatically remember the last selected property for each object type. The property remains selected if another similar node is chosen.
Studio Triggers and Finishers
The metadata describes the studio “trigger” for each object property. Application UI may become frozen when a property value is changed. The studio will either reload the page or re-generate the app as needed when developers click in the application boundaries.
Some properties are provided with the “finish” scripts that update the live application. For example, the modification of the field Label will change the UI of the live application if the field is visible.
Developers can continue configuring the application even when the UI is “frozen”. The live inspection and few other tools are not available to developers when the application is in the “frozen” state.
The project configuration settings and runtime settings are now combined in the single Settings hierarchy. Previously developers had to make changes in the Project Wizard or enter keys in the ~/app/touch-settings.json file.
The October 2023 feature drop does not include all of the available configuration properties. We will continue to beef up the Settings hierarchy with each new release.
Developers will be able to specify multiple data sources for their data models including additional databases and Network APIs.
The Models hierarchy will provide access to the model builder. The current implementation displays a tree of models and their columns with the detail DataView fields.
Our next goal is the completion of the Settings hierarchy and the new Publishing wizard in the App Studio. Take a look at the feature delivery status of the App Studio Roadmap for more details.