Description

This extension provides support for SAPUI5, the SAP JavaScript UI library.

In what situation should you install this extension?

If your Web application contains SAPUI5 source code and you want to view these object types and inter-object links, then you should install this extension:

Object structure

• creates SAPUI5 Applications
• creates SAPUI5 Views (XML and JS Views Only)
• creates SAPUI5 Fragments
  
• creates SAPUI5 Controllers
  
• creates SAPUI5 Model Functions (controller functions accessible from views)
• creates SAPUI5 Components
  
• creates SAPUI5 OData Models
• creates SAPUI5 JSON Models
  
• creates SAPUI5 Objects (SAPUI5 objects except controllers, components and models)

Link structure

• Creates links from views to controllers
• Creates links between controllers and components

Transactions

• Default entry point is the html file content.
• Applications and views are Transaction entry-points.
• Models are Transaction end-points.

Technical information

SAPUI5 Applications

SAPUI5 Applications can be defined in two ways:

HTML files

They can be found in an html file (mostly index.html) files where we can find the following code:

	<title>Shopping Cart</title>

	<script
		id='sap-ui-bootstrap'
		type='text/javascript'
		src='../../../../../resources/sap-ui-core.js'
		data-sap-ui-theme='sap_bluecrystal'
		data-sap-ui-libs='sap.m'
		data-sap-ui-compatVersion="edge"
		data-sap-ui-resourceroots='{
			"sap.ui.demo.cart" : "./"
		}' >
	</script>

• This code contains "sap-ui-bootstrap", and "Shopping Cart" is the application name.
• The value of "data-sap-ui-resourceroots" is also used to create fullnames of objects.
• The "Component.js" file present at the same place as "index.html" is the main component associated to the application.

manifest.json

They can be found in a manifest.json file where we can find the following code:

• The code contains "sap.app", and the application name is found in the title parameter - note that if the title starts with "{{", then the application name is founc in id (in the example below, the name is "masterdetail".
• The "Component.js" file present at the same place as "manifest.json" is the main component associated to the application.
• The metadata part can be used if not present in the component code (see later in the component description).

{
	"_version": "1.2.0",

	"sap.app": {
		"_version": "1.2.0",
		"id": "sap.ui.demo.masterdetail",
		"type": "application",
		"i18n": "i18n/i18n.properties",
		"title": "{{appTitle}}",
		"description": "{{appDescription}}",

		"applicationVersion": {
			"version": "1.0.0"
		},
		"dataSources": {
			"mainService": {
				"uri": "/here/goes/your/serviceUrl/",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0",
					"localUri" : "localService/metadata.xml"
				}
			}
		}
	},
...

	"sap.ui5": {
		"_version": "1.1.0",
		"rootView": {
			"viewName": "sap.ui.demo.masterdetail.view.App",
			"type": "XML",
			"id": "app"
		},
...

		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.ui.demo.masterdetail.i18n.i18n"
				}
			},
			"" : {
				"dataSource": "mainService",
				"settings": {
					"metadataUrlParams": {
						"sap-documentation": "heading"
					}
				}
			}
		},

		"routing": {
			"config": {
				"routerClass": "sap.m.routing.Router",
				"viewType": "XML",
				"viewPath": "sap.ui.demo.masterdetail.view",
				"controlId": "idAppControl",
				"controlAggregation": "detailPages",
				"bypassed": {
					"target": ["master", "notFound"]
				},
				"async": "true"
			},

			"routes": [
				{
					"pattern": "",
					"name": "master",
					"target": ["object", "master"]
				},
				{
					"pattern": "Objects/{objectId}",
					"name": "object",
					"target": ["master", "object"]
				}
			],

			"targets": {
				"master": {
					"viewName": "Master",
					"viewLevel": 1,
					"viewId": "master",
					"controlAggregation": "masterPages"
				},
				"object": {
					"viewName": "Detail",
					"viewId": "detail",
					"viewLevel": 2
				},
				"detailObjectNotFound": {
					"viewName": "DetailObjectNotFound",
					"viewId": "detailObjectNotFound"
				},
				"detailNoObjectsAvailable": {
					"viewName": "DetailNoObjectsAvailable",
					"viewId": "detailNoObjectsAvailable"
				},
				"notFound": {
					"viewName": "NotFound",
					"viewId": "notFound"
				}
			}
		}
	}
}

SAPUI5 Components

SAPUI5 Components are defined by the following code. What is important is the top part of the file where we can find "sap.ui.define", "'sap/ui/core/UIComponent'", and "return UIComponent.extend("sap.ui.demo.cart.Component"".

• The component name is found in the first parameter of the "extend" call.
• With regard to the main component associated to the application, we use the "metadata" part to find views and root.
• If the metadata part is not present here, it can be present in the "manifest.json" file representing the application.
• A call link is created from the application to the "init" function of the main component.
• A call link is created from the "init" function of a component to the "createContent" function of the same component.

sap.ui.define([
	'sap/ui/core/UIComponent',
	'sap/m/routing/Router',
	'sap/ui/model/resource/ResourceModel',
	'sap/ui/model/odata/ODataModel',
	'sap/ui/model/json/JSONModel'
], function (UIComponent,
			Router,
			ResourceModel,
			ODataModel,
			JSONModel) {

	return UIComponent.extend("sap.ui.demo.cart.Component", {

		metadata: {
			includes : ["css/style.css"],
			routing: {
				config: {
					routerClass: Router,
					viewType: "XML",
					viewPath: "sap.ui.demo.cart.view",
					controlId: "splitApp",
					transition: "slide",
					bypassed: {
						target: ["home" , "notFound"]
					}
				},
				routes: [
					{
						pattern: "category/{id}",
						name: "category",
						target: "categoryView"
					},
					{
						pattern: "category/{id}/product/{productId}",
						name: "product",
						target: ["categoryView", "productView"]
					}
				],
				targets: {
					productView: {
						viewName: "Product",
						viewLevel: 3,
						controlAggregation: "detailPages"
					},
					categoryView: {
						viewName: "Category",
						viewLevel: 2,
						controlAggregation: "masterPages"
					}
				}
			}
		},

		init: function () {
			// call overwritten init (calls createContent)
		},

		createContent: function () {
			// create root view
			return sap.ui.view({
				viewName: "sap.ui.demo.cart.view.App",
				type: "XML"
			});
		},
....
	});

});

SAPUI5 XML view

SAPUI5 XML files are found in XML files whose name ends with ".view.xml" where we can find the following code.

• For XML view detection, we use "mvc:View" where mvc is defined as "sap.ui.core.mvc" or "sap.ui.core" or "sap.m".
• The value of "controllerName" is also used to find the used controller.
• A use link is created from the view to the used controller
• A call link is created from the view to the "onInit" model function of the used controller
• Some call links are created from the view to the various model functions of the controller when they are called from the view (in the example below "handleCartButtonPress" and "handleAddButtonPress" are called)

<mvc:View
	controllerName="sap.ui.demo.cart.view.Product"
	xmlns="sap.m"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:control="control"
	xmlns:h="http://www.w3.org/1999/xhtml">
	<Page
		id="page"
		title="{Name}"
		showNavButton="{device>/isPhone}"
		navButtonPress="handleNavButtonPress" >
		<headerContent>
			<Button
				icon="sap-icon://cart"
				visible="{device>/isPhone}"
				tooltip="{i18n>TO_CART_BUTTON_TOOLTIP}"
				press="handleCartButtonPress" />
		</headerContent>
		<footer>
			<Toolbar>
				<ToolbarSpacer/>
				<Button
					icon="sap-icon://add"
					text="{i18n>PRODUCT_ADD_BUTTON_TEXT}"
					tooltip="{i18n>PRODUCT_ADD_BUTTON_TOOLTIP}"
					press="handleAddButtonPress" />
			</Toolbar>
		</footer>
	</Page>
</mvc:View>

SAPUI5 JS Views

JS Views are .js files whose name ends with ".view.js". For example:

sap.ui.jsview("shoppingcart.Category", {
 
    /** Specifies the Controller belonging to this View.
    * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
    * @memberOf shoppingcart.Category
    */
    getControllerName : function() {
        return "shoppingcart.Category";
    },
 
    /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
    * Since the Controller is given to this method, its event handlers can be attached right away.
    * @memberOf shoppingcart.Category
    */
    createContent : function(oController) {
         
        var oList = new sap.m.List({
            id: "listId"
        })
         
        oList.bindItems({
            path : "products>/collection",
            template : new sap.m.StandardListItem({
                title: "{products>category}",
                type: sap.m.ListType.Navigation,
                press:function(evt){
                    oController.categoryListItemPress(evt);
                }
            })
        });
         
        return new sap.m.Page({
            title: "Category",
            content: [oList]
        });
    }
 
});

SAPUI5 Controllers

SAPUI5 Controllers are defined by the following code. What is important is the top part of the file where we can find "sap.ui.define", "'sap/ui/core/mvc/Controller'", and "return Controller.extend("sap.ui.demo.cart.view.Product"":

sap.ui.define([
	'sap/ui/core/mvc/Controller',
	'sap/ui/demo/cart/model/formatter',
	'sap/m/MessageToast',
	'sap/m/MessageBox'
], function (Controller, formatter, MessageToast, MessageBox) {
	return Controller.extend("sap.ui.demo.cart.view.Product", {
		formatter : formatter,

		onInit : function () {
			var oComponent = this.getOwnerComponent();

			this._router = oComponent.getRouter();
			this._router.getRoute("product").attachPatternMatched(this._routePatternMatched, this);
			this._router.getRoute("cartProduct").attachPatternMatched(this._routePatternMatched, this);

			// register for events
			var oBus = sap.ui.getCore().getEventBus();
			oBus.subscribe("shoppingCart", "updateProduct", this.fnUpdateProduct, this);
		},

		handleAddButtonPress : function () {
		}
	});
});

SAPUI5 Model functions

SAPUI5 Model functions are controller functions which can be called from a view. They are defined in the same code as used for the Controller above. For example, "handleAddButtonPress" is a model function.

SAPUI5 XML fragments

SAPUI5 XML fragments are parts of views. They are found in XML files whose name ends with ".fragment.xml" where we can find the code example below:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form" xmlns:commons="sap.ui.commons">
	<Carousel>
		<pages>
			<f:SimpleForm title="Server" editable="false" class="sapUiSmallMarginTopBottom">
				<f:content></f:content>
			</f:SimpleForm>
			<f:SimpleForm title="Kitchen" editable="false" class="sapUiSmallMarginTopBottom">
				<f:content></f:content>
			</f:SimpleForm>
			<f:SimpleForm title="Bedroom" editable="false" class="sapUiSmallMarginTopBottom">
				<f:content></f:content>
			</f:SimpleForm>
		</pages>
	</Carousel>
</core:FragmentDefinition>

The item "core:FragmentDefinition" is used to the detect the XML fragment, where core is defined as "sap.ui.core.mvc" or "sap.ui.core" or "sap.m".

When the following code is found in a controller, this means that the fragment "smartHome.view.Chart" is added to the view of the controller in the id "idChartPage" of the view.

oChartPage = this.getView().byId("idChartPage");
oChartContent = sap.ui.xmlfragment(this.getView().getId(), "smartHome.view.Chart", this);
oChartPage.addContent(oChartContent);

Call links from the view to the fragments (when preceding js code is found in controller) are created:

Click to enlarge

Fragments can also be defined with some ids inside:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
	<BusyDialog id="idServerBusyDialog" class="sapUiSizeCompact" title="{i18n>serverBusyDialogWindowTitle}" text="{i18n>serverBusyDialogWindowText}" showCancelButton="true"
		cancelButtonText="{i18n>serverBusyDialogWindowCancelButtonText}" close="onServerBusyDialogWindowClosed"/>
</core:FragmentDefinition>

When the following code is found in a controller:

oServerBusyDialog = this.getView().byId("idServerBusyDialog").open();
oServerBusyDialog = sap.ui.xmlfragment(this.getView().getId(), "smartHome.view.ServerBusyDialog", this);
this.getView().addDependent(oServerBusyDialog);

This means that the part of the fragment  "smartHome.view.ServerBusyDialog" referenced by id "idChartPage" is opened by the controller (as a modal window) and added to the view.

• A call link from the view to the fragment is created
• A call link from the controller function where this code is called to the fragment is created

SAPUI5 JSON Models

SAPUI5 JSON Models are end-points for transactions. They occur where data is accessed in read or write mode. They are defined when the following code is found in controllers or components. The model name is here "cartProducts":

			var oCartModel = new JSONModel({
				entries: [],
				totalPrice: "0",
				showEditAndProceedButton: false
			});
			this.setModel(oCartModel, "cartProducts");

• An access read link is created from the code to the model when the following code is present:

var oCartModel = this.getView().getModel("cartProducts");
var oCartData = oCartModel.getData();

• An access write link is created from the code to the model when the following code is present:

SAPUI5 OData models

SAPUI5 OData models are end-points for transactions. They occur where data is accessed in read or write mode. They are defined when the following code is found in controllers or components. The model name is here "/sap/opu/odata/IWBEP/EPM_DEVELOPER_SCENARIO_SRV/".

var oModel = new ODataModel("/sap/opu/odata/IWBEP/EPM_DEVELOPER_SCENARIO_SRV/", true);
oModel.setDefaultCountMode("None");

this.setModel(oModel);

JQuery resources services

SAP has developed its own functions using the JQuery framework in order to call web servers. These calls are managed by the JQuery extension. The following statements are supported:

jQuery.sap.sjax({
 url: "http://localhost/qmacro/test",
 dataType: "json"
 });


jQuery.sap.syncGet("syncGet_url", { dataType: "json" });


jQuery.sap.syncGetJSON("syncGetJSON_url", { dataType: "json" });


jQuery.sap.syncGetText("syncGetText_url", { dataType: "json" });


jQuery.sap.syncPost("syncPost_url", { dataType: "json" });

Supported SAPUI5 versions

Version	Supported
1.28 and above
1.26
1.24
1.22
1.20

Function Point, Quality and Sizing support

This extension provides the following support:

• Function Points (transactions): a green tick indicates that OMG Function Point counting and Transaction Risk Index are supported
• Quality and Sizing: a green tick indicates that CAST can measure size and that a minimum set of Quality Rules exist

Function Points (transactions)	Quality and Sizing

CAST AIP compatibility

This extension is compatible with:

CAST AIP release	Supported
8.3.x
8.2.x
8.1.x
8.0.x
7.3.5 and all higher 7.3.x releases

Supported DBMS servers

This extension is compatible with the following DBMS servers:

CSS	Oracle	Microsoft

Prerequisites

An installation of any compatible release of CAST AIP (see table above)

Dependencies with other extensions

Some CAST extensions require the presence of other CAST extensions in order to function correctly. The SAPUI5 extension requires that the following other CAST extensions are also installed:

• HTML5/JavaScript

Download and installation instructions

Please see: 

• Download an extension
• Install an extension

Packaging, delivering and analyzing your source code

Once the extension is installed, no further configuration changes are required before you can package your source code and run an analysis. The process of packaging, delivering and analyzing your source code is as follows:

Packaging and delivery

Using the CAST Delivery Manager Tool:

• create a new Version
• create a new Package for your SAPUI5 source code using the Files on your file system option:

Click to enlarge

• Define the root folder of your Application source code:

Click to enlarge

• Run the Package action: the CAST Delivery Manager Tool will not find any "projects" related to the SAPUI5 application source code - this is the expected behaviour. However, if your SAPUI5 related source code is part of a larger application (for example a JEE application), then other projects may be found during the package action.

Click to enlarge

• Deliver the Version

Analyzing

Using the CAST Management Studio:

• Accept and deploy the Version in the CAST Management Studio. No Analysis Units will be created automatically relating to the AngularJS source code - this is the expected behaviour. However, if your AngularJS related source code is part of a larger application (for example a JEE application), then other Analysis Units may be created automatically:

Click to enlarge

• In the Current Version tab, add a new Analysis Unit specifically for your AngularJS source code, selecting the Add new Universal Analysis Unit option:

• Edit the new Analysis Unit and configure in the Source Settings tab:
  
  • a name for the Analysis Unit
  • ensure you tick the HTML5/JavaScript option (the SAPUI5 extension depends on the HTML5 and JavaScript extension - and therefore the Universal Analyzer language for the SAPUI5 extension is set as HTML5/JavaScript)
  • define the location of the deployed SAPUI5 source code (the CAST Management Studio will locate this automatically in the Deployment folder):

• Run a test analysis on the Analysis Unit before you generate a new snapshot.

What results can you expect?

Once the analysis/snapshot generation has completed, you can view the results in the normal manner (for example via CAST Enlighten):

Click to enlarge

Objects

The following objects are displayed in CAST Enlighten:

Icon	Description
	SAPUI5 Application
	SAPUI5 Component
	SAPUI5 Controller
	SAPUI5 OData Model
	SAPUI5 HTML View
	SAPUI5 JS View
	SAPUI5 JSON Model
	SAPUI5 JSON View
	SAPUI5 Model Function
	SAPUI5 Object
	SAPUI5 XML Fragment
	SAPUI5 XML View

Rules

None