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();
}
}
}
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:
Every newly created component should import the following modules:
FormComponent: import this if you want to inherit the properties and functionalities of any screen.
WebMAPService: import this for delta synchronization and sending requests to WebMAP Back-end.
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: