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

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:

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:

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, that provides functions to interact with the BackEnd/CoreServices. 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

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

<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

.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

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.