Adding new window

Say you have to work on the following user story:

As a user, when I navigate to the startup page of HelloWorld, I want to be able to click on a button with the text 'Login', after I click the button, a Login screen should be shown.

Business Logic

The procedure to create the new button Login, to display the new window, is exactly the same as in the section "Add Component", the only thing that differs is the business logic of the button'sclick event.

Open Form1.Designer.cs file and subscribe the click event to the button3.

this.button3.Click += new System.EventHandler(this.button3_Click);

Then, open the Form1.cs file, add a method called button3_Click as the following:

private void button3_Click(object sender, System.EventArgs e)
{
  var loginForm = new Form2();
  loginForm.ShowDialog();
}

Create a class call Form2.cs, add theObservableattribute, to the class in order to keep the class within the WebMAP's life cycle, and make the class extend from Mobilize.Web.Form in order to inherit all the necessary properties and functionalities that are needed in any new screen.

using Mobilize.WebMap.Common.Attributes;

namespace HelloWorld
{
    [Observable]
    public partial class Form2 : Mobilize.Web.Form
    {
        public Form2()
        {
            this.InitializeComponent();
        }
    }
}

Then, create the partial class Form2.Designer.cs.

using Mobilize.WebMap.Common.Attributes;

namespace HelloWorld
{
    public partial class Form2
    {
        [Mobilize.WebMap.Common.Attributes.Designer]
        private void InitializeComponent()
        {
            this.textBox1 = new Mobilize.Web.TextBox();
            this.textBox2 = new Mobilize.Web.TextBox();
            this.label1 = new Mobilize.Web.Label();
            this.label2 = new Mobilize.Web.Label();
            this.label3 = new Mobilize.Web.Label();
            this.button1 = new Mobilize.Web.Button();
            this.panel1 = new Mobilize.Web.Panel();
           
            this.textBox1.Name = "textBox1";
            this.textBox2.Name = "textBox2";
            this.label1.Name = "label1";
            this.label1.Text = "Username";
            this.label2.Name = "label2";
            this.label2.Text = "Password";
            this.label3.Name = "label3";
            this.label3.Text = "Login";
            this.button1.Name = "button1";
            this.button1.Text = "Login";
            this.panel1.Controls.Add(this.textBox2);
            this.panel1.Controls.Add(this.label2);
            this.panel1.Controls.Add(this.textBox1);
            this.panel1.Controls.Add(this.button1);
            this.panel1.Controls.Add(this.label1);
            this.panel1.Name = "panel1";
            this.Controls.Add(this.label3);
            this.Controls.Add(this.panel1);
            this.Name = "HelloWorld.Form2";
            this.Text = "Form2";
        }

        [Intercepted]
        private Mobilize.Web.TextBox textBox1 { get; set; }
        [Intercepted]
        private Mobilize.Web.TextBox textBox2 { get; set; }
        [Intercepted]
        private Mobilize.Web.Label label1 { get; set; }
        [Intercepted]
        private Mobilize.Web.Label label2 { get; set; }
        [Intercepted]
        private Mobilize.Web.Label label3 { get; set; }
        [Intercepted]
        private Mobilize.Web.Button button1 { get; set; }
        [Intercepted]
        private Mobilize.Web.Panel panel1 { get; set; }
    }
}

User interface

Create a new folder for Form2 that will contain the typescript angular component, the HTML and the CSS for the form. The folder structure would be as below:

• helloworld-angular

  • src

    • app

      • components

        • hello-world

          • Form1

            • ...

          • Form2

            • ...

In the Form2 folder, create the angular typescript component form2.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-form2",
    styleUrls: ["./form2.component.css"],
    templateUrl: "./form2.component.html",
    encapsulation: ViewEncapsulation.None
})
@dataTransfer(["frmHelloWorldForm2"])
export class Form2Component extends FormComponent {
    protected webServices : WebMapService;

    constructor (wmservice : WebMapService, changeDetector : ChangeDetectorRef, render2 : Renderer2, elem : ElementRef) {
        super(wmservice, changeDetector, render2, elem);
    }
}

Every newly created component should import the following modules:

1. FormComponent: import this if you want to inherit the properties and functionalities of any screen.

2. WebMAPService: import this for delta synchronization and sending requests to WebMAP Back-end.

3. dataTransfer: import this for registering the types of components that are going to be displayed dynamically.

In the same folder, create the HTML file form2.component.html, this will helps us to bind with the new components of the Form2.cs class. The standard to create any new HTML screen is:

<div *ngIf="model">
  <wm-window [model]="model" id="..." class="...">
    <ng-template let-model>
      ...
    </ng-template>
  </wm-window>
</div>

wm-window is a Mobilize Front-end generic component for supporting the System.Widows.Forms.

Now, add the HTML tags wm-label, wm-button, wm-textbox, wm-panel.

<div *ngIf="model">
    <wm-window [model]="model" id="Form2" class="HelloWorld_Form2">
        <ng-template let-model>
        <div class="Form2">
            <wm-label id="label3" tabindex="11" class="label3" [model]="model.label3">Login</wm-label>
            <wm-panel id="panel1" class="panel1" [model]="model.panel1">
                <wm-label id="label1" tabindex="5" class="label1" [model]="model.label1">Username</wm-label>    
                <wm-textbox id="textBox1" tabindex="3" class="textBox1" [model]="model.textBox1"></wm-textbox>    
                <wm-label id="label2" tabindex="8" class="label2" [model]="model.label2">Password</wm-label>
                <wm-textbox id="textBox2" tabindex="5" class="textBox2" [model]="model.textBox2"></wm-textbox>
                <wm-button id="button1" tabindex="2" class="button1" [model]="model.button1"></wm-button>
            </wm-panel>
        </div>
      </ng-template>
    </wm-window>
</div>

NOTE: You can add any other HTML tags here to extend functionalities as you want. Remember you will need to bind them with some angular component.

In the Form2 folder, create a HTML file form2.component.css.

.HelloWorld_Form2 {
    left: -1px;
    top: -1px;
  }
  .HelloWorld_Form2 .Form2 {
    width: 330px;
    height: 178px;
    overflow: hidden;
  }
  .HelloWorld_Form2 .label3 {
    white-space: nowrap;
    overflow: hidden;
    font-family: "Arial";
    font-size: 26.1px;
    font-weight: bold;
    left: 125px;
    top: 9px;
    position: absolute;
    width: auto;
    height: auto;
  }
  .HelloWorld_Form2 .panel1 {
    background-color: rgba(153, 180, 209, 1);
    left: 12px;
    top: 51px;
    position: absolute;
    width: 306px;
    height: 115px;
    overflow: hidden;
  }
  .HelloWorld_Form2 .label1 {
    white-space: nowrap;
    overflow: hidden;
    font-family: "Microsoft Sans Serif";
    font-size: 14.4px;
    left: 7px;
    top: 14px;
    position: absolute;
    width: auto;
    height: auto;
  }
  .HelloWorld_Form2 .textBox1 {
    left: 109px;
    top: 16px;
    position: absolute;
    width: 177px;
    height: 20px;
  }
  .HelloWorld_Form2 .label2 {
    white-space: nowrap;
    overflow: hidden;
    font-family: "Microsoft Sans Serif";
    font-size: 14.4px;
    left: 7px;
    top: 45px;
    position: absolute;
    width: auto;
    height: auto;
  }
  .HelloWorld_Form2 .textBox2 {
    left: 109px;
    top: 47px;
    position: absolute;
    width: 177px;
    height: 20px;
  }
  .HelloWorld_Form2 .button1 {
    color: black;
    font-family: "Microsoft Sans Serif";
    font-size: 17.1px;
    left: 11px;
    top: 73px;
    position: absolute;
    width: 275px;
    height: 36px;
    padding: 0px 0px 0px 0px;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
  }
  .HelloWorld_Form2 .button1:active {
    background-color:DarkBlue;
    color:white;
  }

To export the new component, please modify the following files:

1. index.ts

2. hello-world.module.ts

Also in the helloworld-angular folder, find the index.ts file and add:

//...
import { Form2Component } from './form2/form2.component';
//...
export { Form2Component };

For the hello-world.module.ts file add:

//...

@NgModule({
  imports: [
    //...
  ],
  exports: [
    //...
    HelloWorld.Form2Component,
  ],
  declarations: [
    //...
    HelloWorld.Form2Component
  ],
  bootstrap: [
    //...
    HelloWorld.Form2Component,
  ],
   providers: [WebMapService],
   schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class HelloWorldModule { }

Build both, the business logic and UI code, and run the application

HelloWorld with login

Login window