Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
SAP UI5

Creating a Simple Web application

Now we are going to create a simple web page (not using SAP UI5). The template for creating a simple web page goes as below.

 

<!DOCTYPE html>

<html>

<head>

     <title>A Simple Web Application</title>

</head>

<body>

    <div id="uiArea">

             Content Goes here...

            </div>

</body>

</html>

 

The DOCTYPE specifies the type of the document that we are creating. Usually it used to be a long syntax very hard to understand or remember. Thanks to HTML5 for simplifying the syntax.

 The HTML document is enclosed within the HTML tags which specify the beginning and end of the document. Further a HTML document is divided into two parts, A header section and Body section.

Our content goes within the body sections and the header section usually contains metadata, styles and scripts.

In This example we are going to create a simple Webpage which displays as below.

 

clip_image001

The code for the web application goes as below.

clip_image002

 

So, in the above code, the layout was generated using three simple HTML tags by filling out the properties that are required by them. The code is simple and easy enough to understand.

This is more or less a static webpage; let’s add interaction to the webpage. Say when I click on the display button I want to throw a pop up message with the name entered in the input field.

Add an event handler method to the “on click” event of button and write the logic in the event handler method.

Code:

clip_image003

Output:

clip_image004

Here in the above example we have used the plain HTML tags to create our layout. In our next example we will create the same layout using the SAP UI5 library provided by SAP instead of plain HTML.

 

About Arun

0 Comments:

Post a Comment

Powered by Blogger.