WebMap FrontEnd Architecture
Last updated
Last updated
The following diagram represents a basic view of the Webmap's front-end architecture components:
Architecture Diagram
This is the base component of the WebMap's front-end architecture and its responsibility is to read the messages sent by the Back-end framework and also send the corresponding responses using an established WebMap's JSON protocol.
You can read more details about this JSON protocol at: Communication Protocol.
The WebMap Core component is also responsible for managing the collection of models that correspond to all the controls that are represented in the old Windows Forms application interface. Each model contains information about the control's properties values and binded events.
It is important to note that this component is Angular agnostic is implemented using plain Typescript code and works as any other JavaScript library that needs to be imported in the project.
The Angular Client component serves an Angular interface that exposes the core functionality using an injectable Angular service. That service provides all the functions required to consult the models information and invoke commands and send request to the back end using the API provided by the Core component.
The other functionality that the Angular Client component provides is a Restful API for those controls that requires collections of items, because they are not automatically sent by the back-end server so the component need to request the content of those collections using the Restful API provided.
You can override the Core functionality in this area. There is an App file, that you can use to inject a new functionality or override the existing. For example, you can add a custom command to execute when the server sends it or override the http server to use another API.
This project consists of a set of base classes, used to generate a basic functionality that must be implemented in all the web components that will be implemented through the WebMAP protocol. An example of this is the ControlComponent class, which provides certain default properties that will be used within the webMap protocol, such as @Input () model, a property created with the intention of containing the model associated with the component, in which the corresponding modifications will be applied either from the server or by user interaction through the graphic interface.
In addition, in the project there is a set of functionalities such as the typeResolver service which is used for the creation and maintenance of dynamic controls. This service is consulted and registers in a dictionary a key of type string next to a component declaration.
Also in this project it offers us two important decorators, one called dataTransfer which is used to register new components in thetypeResolver and another called server-event which is used to trigger events which the core registers and sends towards the server.
This is the set of controls that are provided to represent the original user interface in the migrated application. Those works as any other Angular's set of components like Kendo UI for Angular or PrimeNG PrimeFaces. You simple need to install the @mobilize/winforms-components package in your Angular application to use all the WebMap's ready to use components.
This components represents most of the old System.Windows.Forms controls functionality using compositions of commercial available set of components, primarily those provided by Kendo UI.
The last and the most important component in the front-end architecture is the migrated application itself. It represents a new version using the latest web technologies of your old Windows Forms application, it use all the other components described above to communicate with the WebMap's back-end server and finally with the original logic that executes the same routines than the original application.
The migrated application bootstrap the WebMapService init function and request the models for the initial form in the original application that serves as initial data to display the component for the first form.
Finally you will get a completely web application that behaves very similar to the original application.
