views

1 ViewsThe view in the Model View Controller concept is responsible for defining and rendering the UI. SAPUI5 supports predefined view types.

Although XML and JSON notation has been introduced for SAPUI5 UI controls, the Model View Controller concept is also supported to facilitate traditionalprogrammatic UI constructions.

The following predefined view types are available:

XML view . The user interface is defined in an XML file or string.

NoteThe XMLView type supports a mix of XML and plain HTML.

JSON view . The user interface is defined in a file or string in JSON format.JS view . The user interface is constructed in a traditional manner.HTML view . The user interface is defined in an HTML file or string.

These view types are offered for selection as view options in the application creation wizard. If you use SAPUI5 application development tools, you can alsoplug in other view types. For defining other or custom view types, you extend the base class sap.ui.core.mvc.View.

API Reference

1.1 JS ViewsA JS view is one of the predefined view types that are available in SAPUI5.

You create a JS (JavaScript) view in the same way as a controller and use the suffix .view.js for the file. SAPUI5 provides the following two defaultmethods for implementation:

getControllerName(): Specifies the controller belonging to this viewIf this method is not implemented or returns NULL, the view has no controller.createContent(): Called initially once after the controller has been instantiatedThis method is used to create the UI. As the method knows the controller, it can directly attach the event handlers.

Example sap.ui.jsview("sap.hcm.Address", { // this View file is called Address.view.js getControllerName: function() { return "sap.hcm.Address"; // the Controller lives in Address.controller.js },

createContent: function(oController) { var oButton = new sap.ui.commons.Button({text:"Hello JS View"}); oButton.attachPress(oController.handleButtonClicked); return oButton; }

});

The string in quotes denotes the view name that equals the SAPUI5 module name within the require/declare concept.

CautionIn event handlers for controls "this" usually denotes the control itself. This is unexpected when it happens in event handlers that are implemented insidecontrollers: The controller would usually expected to be denoted as "this". This is no issue for declarative view types, but for JSViews the view developermay need to modify the "this" context as follows: ... oButton.attachPress(jQuery.proxy(oController.handleButtonClicked, oController)); ...

Alternatively, the view developer can give the event handler method in an array where the second element is the "this" object: ... var oButton = new sap.ui.commons.Button({ text: "Hello JS View", press: [oController.handleButtonClicked, oController] }); ...

CautionIf you want to define IDs for controls inside a JSView to guarantee their uniqueness when reusing views, you can not give hardcoded IDs, but have to givethe view the opportunity to add its own instance ID as a prefix. This is done by using the View.createId(...) method. For the example above, this isdone as follows:var oButton = new sap.ui.commons.Button(this.createId("myButton"), {text:"Hello JS View"});

PUBLIC© 2014 SAP SE or an SAP affiliate company. All rights reserved.

Page 3 of 5

This is not required for declarative view types as the view parser can manage this automatically, see Support for Unique IDs.

1.2 XML ViewsAn XML view is one of the predefined view types that are available in SAPUI5.

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 togetherspecify the name of the view that equals the SAPUI5 module name within the require/declare concept.

ExampleFor resources/sap/hcm/Address.view.xml, the view name is sap.hcm.Address. The application uses this view name for displaying an instanceof this view. If you define the XML view by means of an XML string, no file or require/declare is needed.

The file looks as follows:<mvc:View controllerName="sap.hcm.Address" xmlns="sap.ui.commons" xmlns:mvc="sap.ui.core.mvc"> <Panel> <Image src="http://www.sap.com/global/ui/images/global/sap-logo.png"/> <Button text="Press Me!"/> </Panel></mvc:View>

Nest the XML tags analogous to the nesting sequence of SAPUI5 controls and add the property values as attributes.

Related InformationImplementing XML Views

1.3 JSON ViewsA JSON view is one of the predefined view types that are available in SAPUI5.

The JSON view type is defined in a file. The file name has to either end with .view.json or as a JSON string. The file name and the folder structure togetherspecify the name of the view that equals the SAPUI5 module name within the modularization concept.

For the file resources/sap/hcm/Address.view.json, the view name is sap.hcm.Address. The application uses this view name for displaying aninstance of this view.

The file looks as follows: { "Type":"sap.ui.core.mvc.JSONView", "controllerName":"sap.hcm.Address", "content": [{ "Type":"sap.ui.commons.Image", "id":"MyImage", "src":"http://www.sap.com/global/ui/images/global/sap-logo.png" }, { "Type":"sap.ui.commons.Button", "id":"MyButton", "text":"Press Me"

}]

}Nest the JSON objects analogous to the nesting of SAPUI5 controls and add the property values as attributes. The syntax is the same as the syntax of aJSON constructor for any control.

NoteYou can use strings, boolean, and null in your JSON view.

Aggregation Handling in JSON ViewsYou add child controls as arrays. This is shown in the example above where an image and a button have been added to the view content aggregation.

Data Binding in JSON ViewsYou can bind data in JSON views. To bind the texts of a control to a language-dependent resource bundle, define the resource bundle via name(resourceBundleName property) or a URL (resourceBundleUrl property) and assign an alias (resourceBundleAlias property) for the bundle withinthe view definition. The binding path is the same for all other SAPUI5 data bindings.

Resource bundle content:MY_TEXT=Hello World

Example:{ "Type": "sap.ui.core.JSONView", "controllerName":"my.own.views.test",


Page 4 of 5

"controllerName":"my.own.views.test", "resourceBundleName":"myBundle", "resourceBundleAlias":"i18n", "content": [{ "Type":"sap.ui.commons.Panel", "id":"myPanel", "content":[{ "Type":"sap.ui.commons.Button", "id":"Button1", "text":"{i18n>MY_TEXT}", "press": "doIt" }] }]}

The ResourceModel for binding this texts is created during view instantiation. The model is set as secondary model with the given alias to the viewinstance. To bind other properties to another model, create the model in the corresponding controller or HTML page and attach it to the view with another alias.

Related InformationHandling Events in JSON Views

1.4 HTML ViewsAn HTML view is one of the predefined view types that are available in SAPUI5.

An HTML View is defined by declarative HTML. Like the declarative support, the HTML view supports embedded HTML. The view file ends with view.html,for example myview.view.html.

Example: <template data-controller-name="example.mvc.test"> Hello <h1>Title</h1> <div>Embedded HTML</div> <div class="test test2 test3" data-sap-ui-type="sap.ui.commons.Panel" id="myPanel"> <div class="test test2 test3" data-sap-ui-type="sap.ui.commons.Button" id="Button1" data-text="Hello World" data-press="doIt"></div> <div data-sap-ui-type="sap.ui.commons.Button" id="Button2" data-text="Hello"></div> <div data-sap-ui-type="sap.ui.core.mvc.HTMLView" id="MyHTMLView" data-view-name="example.mvc.test2"></div> <div data-sap-ui-type="sap.ui.core.mvc.JSView" id="MyJSView" data-view-name="example.mvc.test2"></div> <div data-sap-ui-type="sap.ui.core.mvc.JSONView" id="MyJSONView" data-view-name="example.mvc.test2"></div> <div data-sap-ui-type="sap.ui.core.mvc.XMLView" id="MyXMLView" data-view-name="example.mvc.test2"></div> </div></template>

All view specific properties can be added to the <template> tag as data-* attributes.

Related InformationDeclarative Support


Page 5 of 5

views

Documents