Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

some questions about walk-through sample

Hi guys,

Here is a sample from walk-through.

<mvc:View
  controllerName
="sap.ui.demo.wt.controller.App"
  xmlns
="sap.m"
  xmlns
:mvc="sap.ui.core.mvc"
 
displayBlock="true">
  
<App>
  
<pages>
  
<Page title="{i18n>homePageTitle}">
  
<content>
  
<Panel
  headerText
="{i18n>helloPanelTitle}">
  
<content>


  
<Button
  text
="{i18n>showHelloButtonText}"
  press
="onShowHello"/>
  
<Input
  value
="{/recipient/name}"
  description
="Hello {/recipient/name}"
  valueLiveUpdate
="true"
  width
="60%"/>
  
</content>
  
</Panel>
  
</content>
  
</Page>
  
</pages>
  
</App>

</mvc:View>


Now I have some questions.

1, I have removed the App tag but it causes a blank display, so what does this App mean?

2, I have noticed some tags begin with upper case and some are not. I think the ones with upper case are controls in UI5 and the other ones are HTML tags, am I right?

3, I found that the tags where can customizing CSS be used are all ones that begin with upper case, is it a rule?


replied

Hi Ming,

1, I have removed the App tag but it causes a blank display, so what does this App mean?

It is the root element of a SAP UI5 mobile application, which has aggregation 'pages'. Refer more info -

JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.m.App

2, I have noticed some tags begin with upper case and some are not. I think the ones with upper case are controls in UI5 and the other ones are HTML tags, am I right?


Yes, you're partially right, Upper Case tags are SAP UI5 controls and lower case tags are Properties/Events associated with UI5 control.


3. I found that the tags where can customizing CSS be used are all ones that begin with upper case, is it a rule?


Yes, as I mentioned in the previous answer, Upper case tags are SAPUI5 controls and you can set custom CSS for the same like below


<style>

.buttonStyle{

background-color: '#FF0000' !important;

}

</style>

<Button id="Sample" text="SampleButton" press= "onPress" class="buttonStyle" />

Regards,

Sai Vellanki.

1 View this answer in context
Not what you were looking for? View more on this topic or Ask a question