Post-Conversion

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:

• Node.js LTS (latest or stable).

• Visual Studio 2022, Build Tools for Visual Studio 2022.

  Your installation of Visual Studio, must include the following settings:

  • Go to Workloads tab and turn on ASP.Net and web development, see the following example:

Output Folder Contents

The output folder for the converted app should be similar to the HelloWorld one from the following image:

Using HelloWorld as an example, the structure of the folder consists of:

• helloworld folder: the main project folder.

  • helloworld-angular folder: contains all the code related to the UI, for more information visit Workspace and project file structure.

    • src folder.

      • app folder.

        • 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.

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" : [],
  "Actions" : [{
    "Arguments" : null,
    "Name" : "Click",
    "ReceiverId" : "a1c4236c-ca1e-4550-9789-2c17d12e6f50"
  }]
}

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:

Step 3: Process the Response

Now, that the response has arrived back to the client-side.

Copy

{
  "Added" : [],
  "Changed" : [
  {
    "Text" : "Hello World",
    "Visible" : true,
    "Id" :  "a2fb1871-2576-4dbe-9203-17dc4b13427a",
    "MapperId" : "lbl",
    "References" : {}
  }
  ],
  "Removed" : [],
  "Actions" : []
}

The WebMAPService will process the JSON above, and synchronize the Front-End'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:

• Node.js (latest or stable).

• Angular 16.

• Visual Studio 2022, Build Tools for Visual Studio 2022.

Step 1: How to Build the UI Code

Install the Angular, if you haven't already. Please open Command Line or PowerShell as an administrator and type the following command.

npm install -g @angular/[email protected]

Update the npm configuration's registry key. This is required to resolve Mobilize's packages and should be done only once. Please follow the next setup guide:

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.

C:\HelloWorld\helloworld\helloworld-angular>_

Run the following command to install all the packages and their dependencies to run the UI. This step should only be done once.

npm install

The last command will build the UI and should be run after any change done to a component inside the angular folder.

npm run build

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 a 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.

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.

Your first WebMAP: WinForms to Web application is up and running!