Adding a component

Say you have to work on the following user story:

As a user, when I navigate the startup page of HelloWorld, I want to be able to click on a Button with the text 'Spanish', and the Label's text should be changed to 'Hola Mundo'. Finally, the screen should look like the following image:

HelloWorld with translate button

Business Logic

In order to complete this user story, you have to add some lines of code on the business logic and UI. Let's start with the logic first.

Open the Form1.Designer.cs file. and declare the new button.

[Intercepted]
private Mobilize.Web.Button button2 { get; set; }

Note: Remember to add the Intercepted attribute in order to let the properties state persist over a request. Only the properties with the Intercepted attribute will be sent to the user interface.

In the same file, instantiate the button within the method InitializeComponents.

//
// button2
//
this.button2 = new Mobilize.Web.Button();
this.button2.Font = new Mobilize.Web.Font("Arial", 14.25F, Mobilize.Web.FontStyle.Regular, Mobilize.Web.GraphicsUnit.Point, ((byte)(0)));
this.button2.Location = new System.Drawing.Point(134, 78);
this.button2.Name = "button2";
this.button2.Text = "Spanish";

Next to the last lines, subscribe click event to the button2.

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

Then, open the Form1.cs file and add a method called button2_Click and any functionality you want to do when someone clicks the button2. Following our user story, it will change the text of the label to Spanish.

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

Now the remaining changes are related to the UI components.

User interface

Enter the helloworld-angular\src\app\components\hello-world\form1 folder, open the file form1.component.html and add the wm-button tag of the button2.

<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>
				        <wm-button id="button2" class="button2" [model]="model.button2"></wm-button>
            </div>
        </ng-template>
    </wm-window>
</div>

In the same folder, open the file form1.component.css and add the styles you wish for the class or id set as button2 previously.

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

Finally build both, the business logic and UI code, and run the application.

The petition was completed and now we have our modified WebMAP: WinForms to Web app!