Working With XML Views:Using Local styles & stylesheets

Introduction:

When thinking of custom applications in SAPUI5, the first thing strikes in mind is which kind of UI view that we are going to implement. Particularly in cases where there is tremendous CSS changes involves, people directly goes to Javascript views. The simple reason is adding CSS in JS views are easy for a beginner compare to XML views.

Purpose:

This blog intended to give an insight of using CSS styles in XML views.

Scenario:

1. Using external Style sheets in XML view

2. Using Local Style class in XML Views

Pre-requisite: Basic Knowledge in SAPUI5 using XML Views.

Implementations:

Scenario 1: Using external Style sheets in XML view-This is a case where tremendous Custom CSS needs to be added to the application.

Step1: Create a SAPUI5 application, choosing XML as view type. The result will have a XML view and controller as below

Step2: Create a folder for CSS, under it create a .css file

Step 3: Go to index.html and include the external style sheet, created in step 2 as in below picture

Step 4: Add styles classes to your .css file (created in step 2) and save it.

.header {

       display: block;

              width: 340px;

              padding: 15px;

              margin: 15px auto;

              background-color:rgba(63,166,149,1);

              box-shadow: 2px 3px 3px 0 rgba(63,31,0,.5);

              border-radius: 10px;

              text-align: center;

              text-decoration: none;

       }

.link {

              display: block;

              width: 150px;

              padding: 15px;

              margin: 15px auto;

              background: white;

              box-shadow: 0 0 5px 0 rgba(63,31,0,.5);

              border-radius: 10px;

              text-align: center;

              text-decoration: none;

              -webkit-transition: .2s;

              transition: .2s;

       }

.link:hover {

              -webkit-transform: rotate(-10deg) scale(2);

              transform: rotate(-10deg) scale(2);

       }

.pquote {

                     float: left;

                     width: 100px;

                     background: #ddf;

                     font-weight: bold;

                     padding: 13px;

                     margin: 0 13px 13px 0;

                     border-radius: 5px;

              }

Step 5: Add UI elements in view, include the above classes

<core:View xmlns:core=“sap.ui.core” xmlns:mvc=“sap.ui.core.mvc” xmlns=“sap.m”

              controllerName=“xml_cust_cs.HOME” xmlns:html=“http://www.w3.org/1999/xhtml“>

       <Page title=“SAPUI5 Tutorial”>

              <content>

              <Label class=“header” text=“Working with XML Views:Using External Stylesheets” />

               <VBox>

         <HBox>

         <Text width=“100px”

         text=“SAPUI5 XML Overview”

         class=“pquote”>

              </Text>

              <Text

         width=“250px”

         text=“The XML view type is defined in an XML file. The file name either ends with .view.xml or as an XML string. The                 file name and the folder structure together specify the name of the view that equals the SAPUI5 module name                   within the require/declare concept.”>

              </Text>

         </HBox>

<HBox>

<Link

        class=“link”

        text=“Click to know more”

        href=“http://help.sap.com/saphelp_hanaplatform/helpdata/en/91/f292806f4d1014b6dd926db0e91070/content.htm“/>

          </HBox>

          </VBox>

              </content>

       </Page>

</core:View>

Step 6: Save the Changes and test the application

Scenario 2: Using Local Style class in XML Views- Case where simple & minimal CSS involved

When there is a need to style only a particular UI element, with local style class, the below one give you the result

<Page title=“SAPUI5 Tutorial”>

<content>

         <html:style>

                 .myText {

background-color:teal;

color:white;

padding:4px

                                 }

          </html:style>

<Label  class=“myText”  text=“Working with XML Views:Using Local CSS Class” />

</content>

   </Page>

Feedbacks and suggestions are welcome! 🙂

Regards,

Meganadhan S