Embed Size (px)
Citation preview
SAPUI5 - 1.0On this page:
Extension IDWhat's new?Description
In what situation should you install this extension?Object structureLink structureTransactions
Technical informationSAPUI5 Applications
HTML filesmanifest.json
SAPUI5 ComponentsSAPUI5 XML viewSAPUI5 JS ViewsSAPUI5 ControllersSAPUI5 Model functionsSAPUI5 XML fragmentsSAPUI5 JSON ModelsSAPUI5 OData modelsHttp resource servicesSAPUI5 ABAP operations
SAPUI5 Delete operation (named /YMYSERVICE_EFORM_SRV/myUrl)SAPUI5 Post operation (named /YMYSERVICE_EFORM_SRV/myUrl)SAPUI5 Put operation (named /YMYSERVICE_EFORM_SRV/myUrl)SAPUI5 Get operation (named /YMYSERVICE_EFORM_SRV/myUrl)
JQuery resources servicesSupported SAPUI5 versionsFunction Point, Quality and Sizing supportCAST AIP compatibilitySupported DBMS serversPrerequisitesDependencies with other extensionsDownload and installation instructionsPackaging, delivering and analyzing your source code
Packaging and deliveryAnalyzing
What results can you expect?ObjectsRules
Target audience:
Users of the extension providing support for Web applications.SAPUI5
Extension IDcom.castsoftware.sapui5
What's new?See for more information.SAPUI5 - 1.0 - Release Notes
DescriptionThis extension provides support for , the SAP JavaScript UI library.SAPUI5
Summary: This document provides basic information about the extension providing support for Web applications.SAPUI5
In what situation should you install this extension?
The main purpose of this extension is to modelize the front-end part (SAPUI5 source code) of your SAP Application and to identify links between HTTP , to enable linking from the Web App front-end right through to the back-end. Therefore if request services and ABAP operations /JavaScript functions
your SAP application contains SAPUI5 source code and you want to view these object types and their links with other objects, then you should install this extension.
Object structure
creates SAPUI5 Applicationscreates SAPUI5 Views (XML and JS Views Only)creates SAPUI5 Fragmentscreates SAPUI5 Controllerscreates SAPUI5 Model Functions (controller functions accessible from views)creates SAPUI5 Componentscreates SAPUI5 OData Modelscreates SAPUI5 JSON Modelscreates SAPUI5 Objects (SAPUI5 objects except controllers, components and models)creates HTML5 Get/Post/Put/delete http requests servicescreates SAPUI5 ABAP Get/Post/Put/delete operations
Link structure
Creates links from views to controllersCreates links between controllers and componentsCreates links between javascript functions and Http request servicesCreates links between ABAP operations and ABAP functionsCreates links between Http request services and ABAP operations (through web service linker)
Transactions
Note that the extension supports applications using the for front-end development.SAP Fiori SAPUI5 framework
SAP Fiori is a new user experience for SAP software. To overcome the complexity of traditional SAP GUIs, SAP Fiori has been developed.SAP Fiori focuses mainly on mobility and uses the SAPUI5 Framework for front-end development.
Default entry point is the html file content.Applications and views are Transaction entry-points.SAPUI5 ABAP operations are entry-points when they are not called by another object.Models are Transaction end-points.Http request services are end-points when they do not call another object.
Technical information
SAPUI5 Applications
SAPUI5 Applications can be defined in two ways:
HTML files
They can be found in an html file (mostly ) files where we can find the following code:index.html
<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 " ", and " " is the application name.sap-ui-bootstrap Shopping CartThe value of " " is also used to create fullnames of objects.data-sap-ui-resourcerootsThe " " file present at the same place as " " is the main component associated to the application.Component.js index.html
manifest.json
They can be found in a file where we can find the following code:manifest.json
The code contains " ", and the application name is found in the parameter - note that if the title starts with " ", then the application sap.app title {{name is founc in (in the example below, the name is " ".id masterdetailThe " " file present at the same place as " is the main component associated to the application.Component.js "manifest.jsonThe 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", and " "./UIComponent' return UIComponent.extend("sap.ui.demo.cart.Component"
The component name is found in the first parameter of the " " call.extendWith regard to the main component associated to the application, we use the " " part to find views and root.metadataIf the part is not present here, it can be present in the " " file representing the application.metadata manifest.jsonA is created from the application to the " " function of the main component.call link initA is created from the " " function of a component to the function of the same component.call link init "createContent"
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 " " where we can find the following code..view.xml
For XML view detection, we use " " where mvc is defined as " " or " " or " ".mvc:View sap.ui.core.mvc sap.ui.core sap.mThe value of " " is also used to find the used controller.controllerNameA is created from the view to the used controlleruse linkA is created from the view to the " " model function of the used controllercall link onInitSome are created from the view to the various model functions of the controller when they are called from the view (in the example call linksbelow " " and " " are called)handleCartButtonPress handleAddButtonPress
<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 " ". For example:.view.js
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", and " ":/Controller' 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, " " is a model function.handleAddButtonPress
SAPUI5 XML fragments
SAPUI5 XML fragments are parts of views. They are found in XML files whose name ends with " " where we can find the code example .fragment.xmlbelow:
<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 " " is used to the detect the XML fragment, where core is defined as " " or " " or " ".core:FragmentDefinition sap.ui.core.mvc sap.ui.core sap.m
When the following code is found in a controller, this means that the fragment " " is added to the view of the controller in the id "smartHome.view.Chart idC" of the view.hartPage
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 " " referenced by id " " is opened by the controller (as a modal smartHome.view.ServerBusyDialog idChartPagewindow) and added to the view.
A from the view to the fragment is createdcall linkA from the controller function where this code is called to the fragment is createdcall link
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 is created from the code to the model when the following code is present:access read link
var oCartModel = this.getView().getModel("cartProducts");var oCartData = oCartModel.getData();
An is created from the code to the model when the following code is present:access write link
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);
Http resource services
SAP has developed its own functions in order to call ABAP functions through services. The following statements are supported:
Http Delete resource service (uri =sap/opu/odata/sap/YMYSERVICE_EFORM_SRV/myUrl):
var url = "/sap/opu/odata/sap/YMYSERVICE_EFORM_SRV";var oModel = new sap.ui.model.odata.ODataModel(url, true);oModel.remove("myUrl(PARAM=...)", { success: ..., error: ... });
Http Post resource service (uri =sap/opu/odata/sap/YMYSERVICE_EFORM_SRV/myUrl):
var url = "/sap/opu/odata/sap/YMYSERVICE_EFORM_SRV";var oModel = new sap.ui.model.odata.ODataModel(url, true);oModel.create("myUrl", c, null, function(oData, response) { });
Http Put resource service (uri =sap/opu/odata/sap/YMYSERVICE_EFORM_SRV/myUrl):
var url = "/sap/opu/odata/sap/YMYSERVICE_EFORM_SRV";var oModel = new sap.ui.model.odata.ODataModel(url, true);oModel.udate("myUrl", ...);
Http Get resource service (uri =sap/opu/odata/sap/YMYSERVICE_EFORM_SRV/myUrl?...):
var url = "/sap/opu/odata/sap/YMYSERVICE_EFORM_SRV";var oModelData = new sap.ui.model.odata.ODataModel(url, true);var relPath = "myUrl?...";oModelData.read(relPath, null, [], false, function(oData, response) { });
SAPUI5 ABAP operations
SAP has developed services in ABAP so ABAP methods can be called from javascript client side. The following statements are supported:
service is identified as a parameter in "set_schema_namespace" method called in the "DEFINE" method of the class inheriting from "/IWBEP/CL_MGW_PUSH_ABS_MODEL".
This service name is the prefix of all urls of methods of a same class.
CLASSPOOL_NAME YCL_MY_CLASSPOOL_MPC . method DEFINE.*&---------------------------------------------------------------------**& Generated code for the MODEL PROVIDER BASE CLASS &**& &**& !!!NEVER MODIFY THIS CLASS. IN CASE YOU WANT TO CHANGE THE MODEL &**& DO THIS IN THE MODEL PROVIDER SUBCLASS!!! &**& &**&---------------------------------------------------------------------*super->define( ).
model->set_schema_namespace( 'YMYSERVICE_EFORM_SRV' ).
SAPUI5 Delete operation (named /YMYSERVICE_EFORM_SRV/myUrl)
CLASSPOOL_NAME YCL_MY_CLASSPOOL_MPC_EXT . method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~DELETE_ENTITY.
DATA lv_entityset_name TYPE string.lv_entityset_name = io_tech_request_context->get_entity_set_name( ).
CASE lv_entityset_name.
when 'myUrl'.* Call the entity set generated method myurl_delete_entity(...).... when others. super->/iwbep/if_mgw_appl_srv_runtime~delete_entity(...). ENDCASE.endmethod.
SAPUI5 Post operation (named /YMYSERVICE_EFORM_SRV/myUrl)
CLASSPOOL_NAME YCL_MY_CLASSPOOL_MPC_EXT . method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~CREATE_ENTITY.
DATA lv_entityset_name TYPE string.lv_entityset_name = io_tech_request_context->get_entity_set_name( ).
CASE lv_entityset_name.
when 'myUrl'.* Call the entity set generated method myurl_create_entity(...).... when others. super->/iwbep/if_mgw_appl_srv_runtime~create_entity(...). ENDCASE.endmethod.
SAPUI5 Put operation (named /YMYSERVICE_EFORM_SRV/myUrl)
CLASSPOOL_NAME YCL_MY_CLASSPOOL_MPC_EXT . method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~UPDATE_ENTITY.
DATA lv_entityset_name TYPE string.lv_entityset_name = io_tech_request_context->get_entity_set_name( ).
CASE lv_entityset_name.
when 'myUrl'.* Call the entity set generated method myurl_update_entity(...).... when others. super->/iwbep/if_mgw_appl_srv_runtime~update_entity(...). ENDCASE.endmethod.
SAPUI5 Get operation (named /YMYSERVICE_EFORM_SRV/myUrl)
CLASSPOOL_NAME YCL_MY_CLASSPOOL_MPC_EXT . method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~GET_ENTITYSET.
DATA lv_entityset_name TYPE string.lv_entityset_name = io_tech_request_context->get_entity_set_name( ).
CASE lv_entityset_name.
when 'myUrl'.* Call the entity set generated method myurl_get_entityset(...).... when others. super->/iwbep/if_mgw_appl_srv_runtime~get_entityset(...). ENDCASE.endmethod.
Here is a snapshot showing a full transaction from a SAPUI5 XML view to a SAP table with a link between client and ABAP server (Http request service and SAPUI5 ABAP operation):
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 . The JQuery extensionfollowing 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 supportThis extension provides the following support:
Function Points (transactions): a green tick indicates that OMG Function Point counting and Transaction Risk Index are supportedQuality 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 compatibilityThis 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 serversThis 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 extensionsSome CAST extensions require the presence of other CAST extensions in order to function correctly. The extension requires that the following SAPUI5other CAST extensions are also installed:
HTML5/JavaScript
Download and installation instructionsPlease see:
Download an extensionInstall an extension
Packaging, delivering and analyzing your source codeOnce 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
Note that when using the CAST Extension Downloader to download the extension and the Manage Extensions interface in CAST Server Manager to install the extension, any dependent extensions are automatically downloaded and installed for you. You do not need to do anything.
CAST highly recommends that you also the extension and install it with the SAPUI5 extension.manually download jQuery
The latest release status of this extension can be seen when downloading it from the CAST Extend server.
Using the CAST Delivery Manager Tool:
create a new Versioncreate a new for your SAPUI5 source code using the option:Package Files on your file system
Click to enlarge
Define the of your Application source code:root folder
Click to enlarge
Run the : the CAST Delivery Manager Tool will find any "projects" related to the SAPUI5 application source code - this is thePackage action not . However, if your SAPUI5 related source code is part of a larger application (for example a JEE application), then other expected behaviour
projects may be found during the package action.
Click to enlarge
Note that the extension does not contain any CAST Delivery Manager Tool , therefore, no "SAPUI5" SAPUI5 discoverers or extractorsprojects will be detected by the DMT. You therefore need to manually create an Analysis Unit in the CAST Management Studio - this is explained below.
Deliver the Version
Analyzing
Using the CAST Management Studio:
Accept and deploy the in the CAST Management Studio. No will be created automatically relating to the AngularJS Version Analysis Unitssource code - this is the . However, if your AngularJS related source code is part of a larger application (for example a JEE expected behaviourapplication), then other Analysis Units may be created automatically:
Click to enlarge
In the , add a new Analysis Unit specifically for your AngularJS source code, selecting the Current Version tab Add new Universal Analysis Unitoption:
Edit the new Analysis Unit and configure in the :Source Settings taba for the Analysis Unit nameensure you tick the option (the SAPUI5 extension depends on the extension - and therefore HTML5/JavaScript HTML5 and JavaScriptthe Universal Analyzer language for the SAPUI5 extension is set as )HTML5/JavaScriptdefine the of the deployed SAPUI5 source code (the CAST Management Studio will locate this automatically in the location Deploymentfolder):
Run a on the Analysis Unit before you generate a .test analysis 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
