Virtuoso Core Framework
The Virtuoso Design Workflow
As was mentioned, Virtuoso can be thought of as an "after-market" No-Code solution, which adds No-Code to any already-existing native workflow. The No-Code programming environment is a visual node-based visual programming environment, where components are dragged and dropped, configured, and connected to other components. This is the high-level design environment where citizen developers can build powerful applications without any programming experience. We call the application built by Virtuoso the "host application", as it notionally hosts the components of the high-level design, and indeed can create hierarchical compositions of multipe applications. The high-level design is then pushed to the host project, which is written in the language specific to the host, for example C#, and using the native build system, such as Visual Studio. Virtuoso handles creating and updating the host application according to the graphical design, essentially taking the graphical drawing and converting it to a corresponding application written in the host language.
Developers can develop their application entirely in the Virtuoso schematic, as may be the case if the developer does not know the underlying host language. Or the developer can just use the schematic as a starting point for an application design, using the convenience of the graphical design and graphical library, and then extend the design with additional custom functionality written in the host language. Subsequent changes to the schematic design can be made and pushed to the host application without affecting any 3GL host code you have added yourself.
The figure below shows this general workflow. Virtuoso is used to create a host. Components are graphically added to the schematic editor and configured, with ports connected as necessary. Virtuoso then emits the host code into the project needed to implement the schematic, using the optimum design pattern specific to the host language. For example, for a WPF C#/.NET host, the schematic editor will produce a design implemented with a Model-View-View Model design pattern as a starting point, and the developer can from there add and extend the functionality of the host directly in C# and XAML.
This workflow is ideal for applications that can be naturally expressed declaratively as a set of components logically interacting with other components in some way. The components may only represent code execution of business logic without any user interaction, or the components may represent controls which the user interacts with on the application view. Each schematic component may or may not have a corresponding visual control on the view for user interaction. For a C#/WPF application, the logical component is represented as a model or view model, and the visual component is represented as a view bound to the corresponding view model. For a component that has a visual element, there is always a one-to-one correspondence between the component’s view on the visual layer and the component’s view model on the schematic layer.
In the example below, the schematic on the left shows a push button component and an LED component. The components have a boolean output port and a boolean input port, respectively. The ports are connected, representing that when the push button is pressed (true), the LED should be on. The view on the right shows the corresponding user interface. After placing the components on the schematic editor, making the connection between the ports, and pushing the updates to the host, the user simply needs to position the push button and LED view components, build the project, and run. Watch it here.
 |
 |
Each component can contribute a property editor window and preview window to allow the component instances to be easily configured and previewed without programming. In the example below, different properties of the No-Code LED are easily configured from the property window, and previewed in the preview window.
These windows are developed by the component author with framework support, and are seamlessly integrated into the schematic editor for a unified and intuitive design experience. The property editor can handle all configuration in the embedded window, or can be used to launch more sophisticated applications used to easily configure the component. There is no limit to how much complexity a single component is able to represent.