> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/webmap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/webmap/winforms/winforms-intro.md).

# Introduction

## About WebMAP: WinForms to Web

WebMAP: WinForms to Web is a tool designed to convert .NET Framework apps based on C# and Windows Forms to a modern web architecture:

* Business logic source code is converted to ASP.NET Core.
* The user interface(UI) rendered as HTML using Angular, JavaScript, and KendoUI.

For VB.Net, contact us for alternatives.

## Code Conversions

Here is an example of the very first WinForms application any programmer would do. The program consists of a form and a button that changes the text. The comparison side by side with the converted app shows minimum alterations:

![WinForms VS WebMAP](/files/-MGiES9pZxfyiLFLlnQq)

The emphasis of WebMap: WinForms to Web is the transparency for the developer from the original application to the converted one, which is also reflected in the following example code from C# to WebMAP.

**Source code Form1.cs:**

```csharp
namespace HelloWorld
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            this.label1.Text = "Hello World";
        }
    }
}
```

**Converted code Form1.cs:**

```csharp
namespace HelloWorld
{

   [Observable]
   public partial class Form1 : Mobilize.Web.Form
   {
       public Form1()
       {
           InitializeComponent();
       }

       private void button1_Click(object sender, EventArgs e)
       {
           this.label1.Text = "Hello World";
       }

   }
}
```

The automation of web processes is clear for the user, thanks to internal libraries such as [**Weaving**](https://app.gitbook.com/@mobilizenet/s/webmap/winforms/fundamentals/glossary), that provides functions to interact with the BackEnd/[**CoreServices**](https://app.gitbook.com/@mobilizenet/s/webmap/winforms/fundamentals/glossary). So, the converted code does not add unnecessary complexity and maintains its similarity to the original.

The UI represents a new challenge to convert, and so, we tackle this problem by converting the Windows.Forms  into an Angular component divided into three main files:

1. HTML
2. CSS
3. TypeScript

For this same example, the form called Form1.cs is converted as:

**Source code Form1.designer.cs**

```csharp
namespace HelloWorld
{
    partial class Form1
    {
        /// <summary>
        /// Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        /// Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        Windows Form Designer generated code

        private System.Windows.Forms.Button button1;
        private System.Windows.Forms.Label label1;
    }
}
```

Every control declared inside the Form1.designer.cs file will have its corresponding HTML tag as is the case with Button.

**Converted code form1.component.html**

```markup
<div *ngIf="model">
    <wm-window [model]="model" id="Form1" class="HelloWorld_Form1">
        <ng-template let-model>
            <div class="Form1">
                <wm-label id="label1" [model]="model.label1" class="label1" tabindex="2">My First Sample</wm-label>
                <wm-button id="button1" [model]="model.button1" class="button1" tabindex="1"></wm-button>
            </div>
        </ng-template>
    </wm-window>
</div>
```

Now, let's take a look at the .css file that pairs with the form1.component.html file:

**Converted code form1.component.css**

```css
.HelloWorld_Form1 {
    left: -1px;
    top: -1px;
}
.HelloWorld_Form1 .Form1 {
    width: 398px;
    height: 143px;
    overflow: hidden;
}
.HelloWorld_Form1 .label1 {
    width: auto;
    weight: bold;
    font-size: 26.25px;
    left: 12px;
    top: 25px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.HelloWorld_Form1 .button1 {
    font-size: 14.25px;
    left: 12px;
    top: 78px;
    width: 116px;
    height: 50px;
    position: absolute;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
}
```

Also, the CSS files have a corresponding property for each control linked with the name of the class.

And finally, the typescript file contains an angular component class declaration for the Form class.

**Converted code form1.component.ts**

```typescript
import { Component, ChangeDetectorRef, ElementRef
, Output, Renderer2, ViewEncapsulation} from "@angular/core";
import { EventData, dataTransfer} from "@mobilize/base-components";
import { FormComponent} from "@mobilize/winforms-components";
import { WebMapService} from "@mobilize/angularclient";
@Component({
   selector : "hello-world-form1",
   styleUrls : ["./form1.component.css"],
   templateUrl : "./form1.component.html",
   encapsulation : ViewEncapsulation.None
})
@dataTransfer(["frmHelloWorldForm1"])
export class Form1Component extends FormComponent {
   protected webServices : WebMapService;
   constructor (wmservice : WebMapService,
   changeDetector : ChangeDetectorRef,render2 : Renderer2,elem : ElementRef) {
      super(wmservice,changeDetector,render2,elem);
   }
}
```

Now you have covered the basics of what WebMAP: WinForms to Web conversion looks like. Let's proceed with a further explanation of how to run a full conversion process and run the output application by yourself.