In the property of the label UI element Provide the text for the label and leave the label for property as it is. We will fill it after creating a corresponding input UI element for it.

 

Step 5 : In a similar way insert a input field UI element.

 

Bind the obligatory property of the UI element value to the context attribute name.

 

Set the label for the property of the label UI element to our Input field.

 

Step 6 : Insert a button UI element and create an event handler method for it.

 

Create an event handler for the  UI element.

 

In the outbound plug box if we provide the outbound plug the coding's to navigate to the view that the outbound plug points will be generated inside our event handler method. As of now, we haven’t created any outbound plugs. We will call it later in the program using the code wizard.

 

Step 7: Create another view in the component as shown below.

 

Enter the name for the view and press enter.

 

Step 8: In the context tab of the second view drag and drop the node of the component controller to the context of our view.

 

In the layout tab of the second view, insert a label and a text view UI element and bind it to the attribute name.

 

Properties of the label.

 

Let's assign the label for property to the text view after creating the text view.

 

Insert the text view UI element.

 

Bind the text property of the text view to the attribute name.

 

Assign the label for property to the text view.

 

So far we have created two views with an option to enter a name in the first view and display it in the second view. The data will be transferred from one view to another using the node of the component controller. Once we read the input entered by the user and set it in the node, the result will be displayed where ever it is binded. So when we read the name and set it in the attribute name it will be displayed wherever our attribute name is binded.

 

Note: Read the Binding concept for more clarity on this.

 

Now the point is we have to navigate from one screen to another. By default, the view which we created at the timeof creation of the component will be the default view in the window and it will be displayed now all we have to do is to shift the view within the windows.

 

Step 9: Create the inbound plugs an outbound plug for the views.

 

Go to the inbound plug tab of the view v_main and create an inbound plug. By the time of the creation of an inbound plug, an associated event handler method will be created.