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.
The code for the web application goes as below.
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:
Output:
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.
0 Comments:
Post a Comment