WebMAP: WinForms to Web is a tool designed to convert .NET Framework apps based on C# and Windows Forms to a modern web architecture. Post-Conversion documentation for WebMAP WinForms.
With a brand new WebMAP: WinForms to Web converted application, let's dive into the necessary steps to have your application up and running.
Compile and Run the Converted Application
Compiling and running your converted application is the highlight of the whole process, but before we get right into it, you need to make sure your computer compiles the following requirements.
System Requirements
Before you start running the converted you will need:
components folder: contains all the angular components generated from the converted UI.
app.component.css: it is the stylesheet used by the app.component
app.component.html: it is the HTML associated with the app.component
app.component.ts: this is the startup angular component of every migrated application
app.module.ts: this module includes all the sub-modules of all the application. e.g. You have two project (csproj): project1.csproj and project2.csproj. This will yield two sub-modules: project1.module.ts and project2.module.ts
hello-world.module.ts: this module includes all the components of the hello-world csproj.
assets folder: contains all the images of the application.
index.html: it is the page that launches the angular startup component: app.component <app-root></app-root>
package.json: this is a json file that contains the list of javascript packages required by the application.
Logs folder: you'll find the logs related to the conversion and any error that might have occurred, for more information visit Error and Troubleshooting.
Stubs folder: any element that was not converted will be generated as a stub, for more information of what a stub is visit Error and Troubleshooting.
HelloWorld.sln: la solución del proyecto.
nuget.config: contains the package sources for the app.
PageObject.xml: file with the summary of all the elements contained by each of the forms of the application.
Converted Application Request and Response
Using the HelloWorld example application, let's follow the process that occurs when you click the button Click Me to understand the communication between the FrontEnd and BackEnd of your converted application.
HelloWorld Click Me
The Click of the button will trigger a sequence of steps that can be summarized in the following
Now, let go into detail for each step.
Step 1: Send the Request
When you click the Click Me button to start the whole process it will:
1.
Call WebMAPService to perform the following actions:
1.
Gather the Changed models to be synchronized with the back-end's observable models.
2.
Create and send the HTTP POST event with the gathered deltas.
2.
The WebMAPService creates the following JSON and send it to the back-end.
Changed array: since there are no models that were modified, the array is empty.
Actions array: contains the list of actions that should be processed on the back-end.
ReceiverId is the identification of the component interacted with.
Step 2: Process the Request and Create Response
The BackEnd will:
1.
Receives the JSON request: decodes this information and creates a request object call Data Transfer Object (DTO), this will contain the list Changed of the click.
2.
Process the DTO request: applies the changes defined in the DTO and keeps track of the component state. In this case, it will change the state of the label with the new text.
3.
Create the response: creates a response based on the changes made to the components, transforms it into a JSON, that can be interpreted by the Front-End, and sends the response to the UI.
For a more in-depth explanation of all the components of the Back-End, take a look into the section:
Now, that the response has arrived back to the client-side.
1
{
2
"Added":[],
3
"Changed":[
4
{
5
"Text":"Hello World",
6
"Visible":true,
7
"Id":"a2fb1871-2576-4dbe-9203-17dc4b13427a",
8
"MapperId":"lbl",
9
"References":{}
10
}
11
],
12
"Removed":[],
13
"Actions":[]
14
}
Copied!
The WebMAPService will process the JSON above, and synchronize the Front-Fnd's observable models with each of the models in theChangedarray. And finally, the components should be refreshed and show the new Hello World text.
Compile and Run the Converted Application
Compiling and running your converted application is the highlight of the whole process, but before we get right into it, you need to make sure your computer complies with the following requirements.
System Requirements
Before you start running the converted you will need:
npm config set registry https://registry.npmjs.org/
Copied!
Go to the converted application's folder, then go to the folder of the main project and then to the folder with angular in the name. Open the CommandLine pointing to this location. It should look as in the case of HelloWorldDemo.
1
C:\HelloWorld\helloworld\helloworld-angular>_
Copied!
Run the following command to install all the packages and their dependencies to run the UI. This step should only be done once.
1
npminstall
Copied!
The last command will build the UI and should be run after any change done to a component inside the angular folder.
1
npm run build
Copied!
Now the user interface is ready!
Angular Project
As an additional option for building the UI you have the Angular Project, this is an option selected before the conversion under Conversion Settings > Conversion Results. This feature is exclusive for projects whose the Target Framework is .NET Core.
This generates an new csproj file located in the angular folder of the converted solution. This new adds the option of building the UI directly in Visual Studio without the need to writing the previous commands in console.
To build the UI directly from the Visual Studio solution right click the new angular project and select Publish.
Then click the Publish button and set up the bin folder.
This will execute the compilation steps found in the project's definition.
After the Web Publish is successful the UI will be ready!
The user can verify the build was successful manually as well by checking the wwwroot folder at the base directory or the node modules inside the angular folder.
Step 2: How to Build the Business Logic Code
Open the solution of the app using Visual Studio 2019. Compile your solution and resolve any errors if necessary.
Before compiling the code, please make sure you have installed .NET Core and the necessary .NET Framework versions in order to compile the code.
Step 3: How to Run the Application
For the final stride open the solution in Visual Studio, right click the main project select Set as Startup Project and click Run button in visual studio.
Set Startup Project
Your first WebMAP: WinForms to Web application is up and running!