In this post, we will see how to read the input entered in the browser and display the same in the output.

 

Scenario: we will create a button and on the click of that button we will read the values entered and display the output in a text view.

 

Step 1: In the view controller V_MAIN of the component ZCSK_SIMPLE which we created earlier, create a UI element Button.

 

Right-click on the ROOTUIELEMENT Container and select the insert element. Enter the ID and choose the Button UI element.

 

You can see the button UI element in the Layout with no description.

 

Enter the description in the text property of the Button UI element.

 

Once you have entered the properties, it will reflect in the UI element.

 

Still the UI element looks disabled. The button UI element requires an event handler method to perform an action on click of the button. To create an event to the Button do the following.

 

Click on create action button. Enter a name for the action and press enter.

 

In the properties you will be able to see the method.

 

 

We now require an attribute to be binded to the text view. Create an attribute output of type string as shown below.

 

Go to the context tab of the component controller and create an attribute in the node which we created in the previous application.

 

 

 

Go to the context of the view controller and Update the mapping so that the attribute which we added newly in the component controller will be reflected here in the view controller and accessible here.

 

Right click on the context node and update the mapping.

 

System will prompt you to match the node. Select Yes.

 

System will again prompt you to copy the attributes. Press yes.

 

Now we can see the attributes reflected in the view controller.

 

 

 

To arrange the layout double click on the ROOTUIELEMENTCONTAINER and change the property of layout to matrix layout.

 

Choose the text view UI element and change its layout property to Matrixheaddata so that the UI element will be displayed in the next row.