Repository files navigation

This is the repository for theWebMAP Winforms Hello World Sample.

This sample is meant to provide a small glimpseof how does a WinForms application that has been upgraded to WebMap looks like.

NOTE: this repo is

You can use thehttps://gitpod.io environment to start coding.

A WebMap application is a ASP.Net Core + Angular.The main difference with other applications is thatWebMap provides a framework to handle the data-sync between backend and frontend.

This sample is made up of simple Windows Forms form with just a button and a label.When you click the button it will update the label.

Building HelloWorld for WinForms

cd Sourcemsbuild

Running HelloWorld for WinForms

HelloWorld/bin/Debug/HelloWorld.exe

To run on mono:

mono HelloWorld/bin/Debug/HelloWorld.exe

On this same repo under.\MigratedCode\HelloWorld1 you can find the source codefor the HelloWorld application migrated to WebMap.

When the application is migrated it is turned into a modern web application.This application has two main parts:

• Backend: this runs on ASP.NET core on the server and it will be C# code. This is where your business logic will be.
• FrontEnd: this runs on the browser, and it will be an Angular SPA that communicates with your backend.

The following diagram shows how the original files are mapped to the target artifacts.

Because modern web applications are made up of Backend and FrontEnd parts we will need to go thru two build steps.

Install the Angular CLI, if you haven't already done so. Please open Command Line or PowerShell as administrator.

npm install -g @angular/cli

Install yarn, if you haven't already done so.

npm install -g yarn

NOTE: npm configurationThis repository has an .npmrc file that points to theMobilize NPM registry.If you want to use another NPM registry update this file.

Now to finish the front end compilation go tohelloworld-angular folder.This folder should be underMigratedCode/HelloWorld1/helloworld/helloworld-angularand open a Command Prompt from that folder or open this folder using VisualStudio Code and use the built-in terminal. Then start downloading all the node modules by executing the following command:

yarn install

Once the packages are successfully resolved, you can build the code using:

ng build

You can just open the command line on theMigratedCode\HelloWorld1 folder and run:

dotnet build

You can also startVisual Studio and open theHelloWorld.sln and selectBuild Solution from the build menu.

Once you have build both backend and frontend you are ready to run the application.

You can just open the command line on theMigratedCode\HelloWorld1\helloworld folder and run:

dotnet run

Just click theRun button in VisualStudio

Just to illustrate the process of adding new elements to a migrated up,we will add a button in spanish to make our HelloWorld up available to a broader audience.

We need to do Backend And FrontEnd changes.We recommend that you copyHelloWorld1 toHelloWorldExample and perform the changes there.

Programming in WebMap is very very similar to the way you do it in Windows Forms.So the steps will be very similar.

Assuming that you copied the code toMigratedCode\HelloWorldExampleGo toMigratedCode\HelloWorldExample\helloworld\Form1.Designer.cs

• First we declare the new button.

[Intercepted]privateMobilize.Web.Buttonbutton2{get;set;}

Notice theIntercepted attribute. It is used to let the WebMap helpers know that it should track changes on this element.

• Instantiate and initialize the new button. The typical place to put this code is inside theInitializeComponent method.

privatevoidInitializeComponent(){this.button2.Font=newMobilize.Web.Font("Arial",14.25F,Mobilize.Web.FontStyle.Regular,Mobilize.Web.GraphicsUnit.Point,((byte)(0)));this.button2.Location=newSystem.Drawing.Point(134,78);this.button2.Name="button2";this.button2.Text="Presione";}

• If you want to add some functionality to your button you need to subscribe an event. You can subscribe the event on theInitializeComponent method

this.button2.Click += new System.EventHandler(this.button2_Click);

And write some handler code:

private void button2_Click(object sender, System.EventArgs e){  this.label1.Text = "Hola Mundo";}

You can compare your changes with the code at:MigratedCode\HelloWorld2\helloworld

Go toMigratedCode\HelloWorldExample\helloworld\helloworld-angular\src\app\form1\form1.component.html, and add thewm-button tag.

<wm-buttonid="button2"class="button2"[model]="model.button2"></wm-button>

WebMap provides a set of winforms equivalent components. They are usually prefixed withwm-[original component name lowercase]

The[model] is an one-way binding that waits for some data to be entered. In this case model.button2 provides the data required by the[model] ofwm-button Theid andclass could be used for styling purposes.

Now lets add some styles:

Go toMigratedCode\HelloWorldExample\helloworld\helloworld-angular\src\app\form1\form1.component.css and add some styles, for example:

.HelloWorld_Form1 .button2 {font-family:"Arial";font-size:17.1px;left:134px;top:78px;position: absolute;width:116px;height:50px;padding:0px0px0px0px;display: table-cell;vertical-align: middle;display: table-cell;}

You can compare your changes with the code at:MigratedCode\HelloWorld2\helloworld

Just follow the same steps to compile backend and frontend. And run the application.

The look and feel of your application is handle by CSS styles.The Angular components for angular are based onKendo UI.

Kendo provides some base themes:

• Kendo UI Default theme — Available through the@progress/kendo-theme-default NPM module.
• Kendo UI Bootstrap theme — Available through the@progress/kendo-theme-bootstrap NPM module.
• Kendo UI Material theme — Available through the@progress/kendo-theme-material NPM module.

You can also create customized themes using theKendo UI Theme Builder

Say you want to switch to Bootstrap theme follow this steps:

From the command prompt, go toMigratedCode\HelloWorldExample\helloworld\helloworld-angular

npm install --save @progress/kendo-theme-bootstrap

Next aplpy the theme to your project. That is done by Modifying theangular.json file:

Look for thestyles section

{  ...  "projects": {    "angular": {      ...      "architect": {        "build": {          "builder": "@angular-devkit/build-angular:browser",          "options": {            ...            "styles": [              "src/styles.css",              "node_modules/@progress/kendo-theme-default/dist/all.css",              "node_modules/@angular/material/prebuilt-themes/purple-green.css",              "node_modules/@mobilize/winforms-components/styles/jQueryStyles.css",              "node_modules/@mobilize/winforms-components/styles/styles.css",              "node_modules/material-icons/iconfont/material-icons.css"            ],

And change:

"node_modules/@progress/kendo-theme-default/dist/all.css",

with

"node_modules/@progress/kendo-theme-bootstrap/dist/all.css",

And now repeat the same instructions to rebuild the frontend. You do not need to rebuild the backend.

Your HelloWorld now has a new look: