Using HTML control and SAPUI5 controls and advantages of using UI5 controls over HTML controls

First of all, let us try to understand what controls are. Controls define the appearance and behavior of screen areas. It consists of Control name.

What is SAPUI5?

It is a framework used to develop web applications in mobile and desktop where a large collection of JS libraries are present. But these JS libraries cannot be used alone. They have to be integrated into CSS along with JS for developing interactive internet applications. SAP can be customized and also builds its own UI components like, layouts, controls etc. Because of its extensive features we can control and define custom controls.

Following are some of the features of SAPUI5 −

• It can create complex UI patterns for use case.

• It uses MVC and data binding methods.

• It has accessibility and keyboard interaction feature.

• It has accessibility and keyboard interaction feature.

Advantages of SAPUI5

Following are the advantages of SAPUI5 −

• The cost of training is less.

• Manual errors are less.

• Productivity will increase.

• High performance.

• API is perfectly designed.

SAPUI5 Controls

Following are some of the SAPUI5 Controls −

• Image Control

• Combo Box

• Simple Button Control

• Autocomplete Control

• Table Control Box

Let us discuss each control with syntax.

Image Control

Image control, displays images from sap backend in ui5 applications.

Var image = new sap.ui.commons.Image();
Image.setSrc(“pic.gif”);
Image.setAlt(“alternat.text”);

Combo Box

Combo box is used to provide predefined entries.

Properties used are − items, selectedKey

Var oComboBox2 = new sap.ui.commons.ComboBox (“ComboBox”,{
   Items:{path:”/data”, Template:oItemTemplate, filters:[oFilter]},
   Change: function(oEvent){
      Sap.ui.getCore(). byId(“field”).setValue(oEvent.oSource.getSelectedKey());
   }
});

Simple Button Control

For Push actions we use attachPresss assign event handler.

Var oButton = new sap.ui.commons.Button ({text : “Click”,
Press: oController.update});

Autocomplete Control

For autocompleting the entered value, we use below syntax −

Var uiElement = new sap.ui.commons.AutoComplete({
   Tooltip: ”Enter the product”,
   maxPopupItems: 4
});
For (var i = 0; i<aData.lenght; i++){
   uiElement.addItem(new sap.ui.core.ListItem({text: aData[i].name}));
}

Table Control Box

The table control box is derived from sap.ui.table and each table contains columns.

Var oTable = new sap.ui.table.Table({
   Columns: [
   New sap.ui.table.Column({
   Label: new sap.ui.commons.lable({ text: “First Column”}),
   Template: new sap.ui.commons.TextView({ text: “{Firstcolumn}” }),
   Width: “120px”
})

What is HTML5?

HTML5 is markup language, which is used to create webpages. HTML5 is responsive design tool for designing websites or applications for multiple platforms by creating a single application or website.

It helps the Designer to create a website in less cost that means it is cost-saving language among all HTML Languages. In simple words, a single website built in HTML 5 can be adapted cross different Platforms.

Following are some of the features of HTML5 −

• HTML5 is a browser support language.

• New structure.

• Consists of new Application Programming Interface.

• Provides offline application cache.

• Allows web storage.

• Local storage will support.

• Provides new elements like <video> and <audio> tags for media.

• For 2d drawing provides <canvas> element.

• Provides new form controls like date, time, calendar, email etc.

Advantages of HTML5

Following are few advantages of HTML5 −

• Supports cross platform.

• Supports CSS3 animations.

• Advance UI components present.

• Supports Geo-location services.

• Video and audio streaming support is there.

• Provides offline support also.

HTML5 Controls

HTML5 consists of several controls, such as −

• Form controls

• Media elements

• Canvas elements

• Structural elements

• SVG elements

• New input types

Let us discuss the advantages in detail −

If there are any controls, that you are not able to find in SAPUI5, then you can use HTML controls along with them. Also, it is advisable to keep looking for latest version of SAPUI5 as each release have new functions and control which may be useful for you.

SAPUI5 controls are generally developed by wrapping the standard controls.

The wrapper code provides you with more functionality from a business perspective and you can have better control as well. So these definitely have an edge over standard controls in HTML.

Difference between SAPUI5 and HTML5

HTML5 is a markup language and it doesn’t have programming capabilities but SAP UI5 is a framework which is based on MVC approach to build web applications.

HTML5 is mainly for the purpose of creating a simple webpage without formatting and logic but UI5 provides standard style and components to build rich UIs.

You will find render Manager with render method for every control. These controls convert SAPUI5 control to HTML.

Both JQuery and SAPUI5 work on the JavaScript-based framework. SAPUI5 is basically intended to develop applications that are related to other SAP products. These applications can be developed at a very fast pace as compared to JQuery.