6.1 Consuming a Gateway Service in JavaScript

GW100 SAP NetWeaver GatewayConsuming a Gateway Service in JavaScript March, 2012 INTE RNA L 2 .Objectives At the end of this chapter. All rights reserved. you will understand:   How Use the SAP UI5 JavaScript Libraries to Create a Gateway Service (Read-only) ©  2012 SAP AG. Agenda u  Consuming an OData Service using the SAPUI5 JavaScript Libraries ©  2012 SAP AG. All rights reserved. 3 . Setup Eclipse Workspace Create a new folder within your workspace. Views and Controllers. 4 .html file •  Three more folders named Models. This will contain your SAP OData developments. create: •  An index. ©  2012 SAP AG. Underneath this folder. All rights reserved. table and ux3 libraries -‐-‐> <script id="sap-‐ui-‐bootstrap" type="text/javascript" src="/sapui5/resources/sap-‐ui-‐core. All rights reserved.sap.table. select gold reflection theme and load the commons.ui. snip . 5 .ux3"></script> . The output from SAPUI5 <body class="sapUiBody"> will be written here <div id="shellArea"></div> </body> </html> ©  2012 SAP AG.commons.ui.. Edit index.js" data-‐sap-‐ui-‐theme="sap_goldreflection" data-‐sap-‐ui-‐libs="sap.html and add the following coding to start with: <!DOCTYPE html> <html> <head> Here’s the important part <meta http-‐equiv="X-‐UA-‐Compatible" content="IE=edge" /> <title>SAP OData/SAPUI5 demo</title> Boot up SAPUI5...Define a Basic Web Page – 1/2 It is assumed that the SUPUI5 libraries are already installed on your web server under /sapui5.sap.. load a theme then load the required libraries <!-‐-‐ Load SAPUI5.ui. js"></script> <script type="text/javascript" src="./Controllers/flightController. 6 . All rights reserved.js"></script> The coding for models./Views/showBookings.js"></script> <script type="text/javascript" src="./Views/ui_utilities. then controllers.js"></script> <script type="text/javascript" src=".js"></script> <script type="text/javascript" src=".js"></script> <script type="text/javascript" src=". add the following JavaScript file references: <!-‐-‐ Declare MVC files in reverse order of dependency Models first./Models/flightInfoModel. then views -‐-‐> <script type="text/javascript" src="./Views/showFlights. views and controllers is separated into different files in order to make it easier to manage./Views/showAirports. ©  2012 SAP AG.Define a Basic Web Page – 2/2 After the <script> tag to boot up SAPUI5. ui. var dflt_service = service || "Flight_Information_nn/".service. }.model./Models folder create flightInfoModel. // Add default user var dflt_password = password || "password".password) { var dflt_uri = uri || "http://localhost/sap/Gateway/ABC/".schema[0]. // Add default user password var oModel = new sap. return { getModel : function() { return oModel. 7 . // ************************************************************************** // Create a model object closure // ************************************************************************** var oFlightModel = (function(uri.odata. ©  2012 SAP AG. getMetadata : function() { return oModel. dflt_password).user. The statement to create the OData model is highlighted.oMetadata.js.Create a JavaScript Closure for the Model In the . dflt_user. false. All rights reserved. } } }()).dataServices.ODataModel(dflt_uri + dflt_service. var dflt_user = user || "GW_USER". The following code creates a closure around the declaration of the OData model object hiding it as a private property and exposing it through method getModel(). gw100. getAirportEntityName: function() { return "Airport". This functionality is used by a utility that creates a UI table for an entity type.js.Create a Controller In the . // ************************************************************************** // Define a controller for handling Flight Information // ************************************************************************** sap. ©  2012 SAP AG. }()) ). 8 . In this example.controller("sap.doFlightInfo". an arbitrary namespace.ui. }. the coding in the controller does nothing more than return an anonymous object having methods that return the name of each of the entity types. }. getBookingEntityName: function() { return "Booking". All rights reserved./Controllers folder create flightController.controller. }.training. }. (function() { return { Each controller is named using getFlightEntityName: function() { return "Flight". createContent: function(oController) { return buildTableFromMetadata(oFlightModel. Airport } } ).get EntityName()). This value is then passed to method createContent() This function is repeated for each view with the entity type name changed as required.controller.training. All rights reserved.js.gw100. we’ll use a utility function to create the required UI table using the methods found in the controller that return the entity type name.show s". showFlights. Here.Create Views for each Entity Type In the . Each view needs to know the identity of its associated controller. // **************************************************************************** // Airports view // **************************************************************************** sap.js./Views folder create a file for each view called showAirports.js. and showBookings.doFlightInfo". ©  2012 SAP AG.jsview("sap. Airport { getControllerName: function() { return "sap.view. }.ui. 9 .gw100. oController.training. } } ©  2012 SAP AG.entityType. // **************************************************************************** // Create a UI table based on supplied Entity Type name and OData metadata // **************************************************************************** var buildTableFromMetadata = function(oModel." + entityName.length.entitySet[j]./Views folder create the file ui_utilities. // Loop around entity types for (i=0. var i = 0. j++) { if (oMetaData. 10 . var colList = [].getMetadata() var thisEntityType = oMetaData. entityName) { var oMetaData = oModel.Utility to Create a UI Table from OData Metadata – 1/2 In the .entityContainer[0].entityType[i].js.entityContainer[0]. i++) { // Have we found the entity type we're looking for? if (oMetaData. i<oMetaData. j = 0.entitySet[j].name === entityName) { // Use the fully qualified entity name to determine the entity set name for (j=0.namespace + ". All rights reserved. j<oMetaData.entityContainer[0].length.name && oMetaData.entityType[i].entityType === thisEntityType) { thisEntitySetName = oMetaData.name. var thisEntitySetName = "".entitySet. type.getModel()). // Loop around the entity type properties creating a table column for each for (j=0.entityType[i].name})./Views/ui_utilities. oTable. }.DataTable({ columns: colList }).") { colList.ui. ©  2012 SAP AG. j++) { // For simplicity.property[j].Utility to Create a UI Table from OData Metadata – 2/2 Continuation of the coding in .bindAggregation("rows".entityType[i]. j<oMetaData. 11 . // bind model to Table oTable.property[j].js.length. template: oMetaData. All rights reserved.property.table. miss out complex types if (oMetaData.entityType[i]. return oTable.setModel(oModel. } } } } // Create a table using the column list created above var oTable = new sap.name.push({label : oMetaData. thisEntitySetName).substring(0.4) == "Edm.property[j].entityType[i]. jsview("sap.gw100.showFlights").ui.view. Create an instance of each view. After the last <script> element.js files // ************************************************************************** var flightsView = sap.view. var bookingsView = sap. Notice that views need to be identified by their fully qualified name.html web page now needs to be completed. ©  2012 SAP AG. add the following: <script> // ************************************************************************** // Instantiate views declared in the above .ui.jsview("sap.training. All rights reserved.view.training. var airportsView = sap.gw100.showBookings")./views/*.showAirports").gw100.Complete the JavaScript Coding in the Web Page – 1/4 The remainder of the index.training. 12 .jsview("sap.ui. ui.sap.ui.ux3.Complete the JavaScript Coding in the Web Page – 2/4 The UX3 Shell object defines the entire screen layout. text:"Flights"}).NavigationItem({key:"wi_FlightInfo_Airports".. ©  2012 SAP AG..NavigationItem( { key:"wi_FlightInfo".ui. subItems:[ new sap. The worksetItems array holds the menu structure.").text:"Bookings"}) ] }) ].NavigationItem({key:"wi_FlightInfo_Flights".ux3. } } ). // ************************************************************************** // Create the ux3 shell (navigation and content container) // ************************************************************************** var oShell = new sap. worksetItems:[ new sap.ui. text:"Flight Information".ui.ux3.ui.text:"Airports"}). { appIcon:"http://www. new sap.core. appTitle:"SAPUI5 Interface to Gateway".gif".Item({key:"pb_people". text:"People"}) ].ux3.ux3.Shell("myShell".com/global/images/SAPLogo. All rights reserved. 13 .NavigationItem({key:"wi_FlightInfo_Bookings". new sap. logout: function() { alert("Bye bye. paneBarItems: [ new sap. All rights reserved.Complete the JavaScript Coding in the Web Page – 3/4 The getContent() function examines the key of the selected menu item and returns the appropriate view instance. ©  2012 SAP AG. return it directly if (mContent[key]) return mContent[key]. } The returned view instance is then displayed in the UX3 shell’s content area. } return mContent[key]. var getContent = function(key) { // If content is already created. if (key === "wi_FlightInfo_Bookings") { mContent[key] = bookingsView. } else if (key === "wi_FlightInfo_Flights") { mContent[key] = flightsView. 14 . } else if (key === "wi_FlightInfo_Airports") { mContent[key] = airportsView. // Page content creation -‐ for each workset item the content is defined here var mContent = {}. setContent(getContent(key)).getParameter("key").setContent(getContent("wi_FlightInfo_Flights")). 15 .placeAt("shellArea"). All rights reserved. // Set the initial content of the Shell -‐ the Home Overview is selected initially oShell. // Place the Shell into the <div> element defined below oShell. // When the user selects a workset item. then set the initial view.Complete the JavaScript Coding in the Web Page – 4/4 Attach a function to the UX3 Shell’s WorksetItemSelected event that returns the selected view instance. ©  2012 SAP AG. oShell. put the respective content into the shell's // main area oShell. place the output of the UX3 Shell into the HTML <div> called shellArea. }). </script> </head> Finally.attachWorksetItemSelected(function(oEvent) { var key = oEvent. 16 .Finished Application ©  2012 SAP AG. All rights reserved. Hands-on Exercise Exercise 14 Create a Gateway Application Using SAPUI5 JavaScript Libraries ©  2012 SAP AG. 17 . All rights reserved. 18 . All rights reserved.Summary You should now understand:   How Use the SAP UI5 JavaScript Libraries to Create a Gateway Service (Read-only) ©  2012 SAP AG. i5/OS. either express or implied. The information contained herein may be changed without prior notice. ©  2012 SAP AG. and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries. RETAIN. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. BatchPipes. pSeries. and Motif are registered trademarks of the Open Group. POWER5+. The information in this document is proprietary to SAP. or consequential damages that may result from the use of these materials. SAP has no control over the information that you may access through the use of hot links contained in these materials and does not endorse your use of third-party Web pages nor provide any warranty whatsoever relating to third-party Web pages. All rights reserved No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. Business Objects and the Business Objects logo. indirect. Inc. SAP assumes no responsibility for errors or omissions in this document. z/OS. System Storage. X/Open. product strategy. copied. and MultiWin are trademarks or registered trademarks of Citrix Systems. Intelligent Miner. xSeries. and other countries. ICA. including but not limited to the implied warranties of merchantability. POWER5. POWER6+. SAP does not warrant the accuracy or completeness of the information. This document is a preliminary version and not subject to your license agreement or any other agreement with SAP. Data contained in this document serves informational purposes only. All other product and service names mentioned are the trademarks of their respective companies. used under license for technology invented and implemented by Netscape. Business Objects is an SAP company. SAP NetWeaver. Massachusetts Institute of Technology. WebSphere. System p. and other Sybase products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Sybase. System i. Power Architecture. SAP shall have no liability for damages of any kind including without limitation direct. MVS/ESA. text. Sybase and Adaptive Server. OS/2. 19 . Excel. Microsoft.© 2012 SAP AG. WinFrame. zSeries. BladeCenter. Citrix. S/390. z9. PartnerEdge. Duet. ByDesign. StreamWork. XHTML and W3C are trademarks or registered trademarks of W3C®. and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. This document contains only intended strategies. VideoFrame. DB2 Connect. z10. Crystal Decisions. PowerPC. Crystal Reports. SAP BusinessObjects Explorer. fitness for a particular purpose. World Wide Web Consortium. System x. Please note that this document is subject to change and may be changed by SAP at any time without notice. POWER. This limitation shall not apply in cases of intent or gross negligence. OpenPower. Inc. developments. Program Neighborhood.S. Tivoli and Informix are trademarks or registered trademarks of IBM Corporation. Java is a registered trademark of Sun Microsystems. BusinessObjects. JavaScript is a registered trademark of Sun Microsystems. Inc. UNIX. Acrobat. GPFS. R/3. iSeries. and/or development. Parallel Sysplex. or transmitted in any form or for any purpose without the express prior written permission of SAP AG. MetaFrame. special. and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects Software Ltd. No part of this document may be reproduced. Windows. DB2 Universal Database. HTML. Outlook. graphics. the Adobe logo. System z9. Oracle is a registered trademark of Oracle Corporation. S/390 Parallel Enterprise Server. or other items contained within this material. The statutory liability for personal injury and defective products is not affected. HACMP. SAP. AIX. National product specifications may vary. eServer. Sybase 365. OS/390. PostScript. Inc. POWER6. Adobe. and PowerPoint are registered trademarks of Microsoft Corporation. Netfinity. All rights reserved. links. RACF. and functionalities of the SAP® product and is not intended to be binding upon SAP to any particular course of business. This document is provided without a warranty of any kind. or non-infringement. iAnywhere. OSF/1. SQL Anywhere. XML.. System z10. OS/400. Web Intelligence. System z. DB2. System i5. Xcelsius. PowerVM. System p5. AS/400. Redbooks. Linux is the registered trademark of Linus Torvalds in the U. z/ VM. IBM. Sybase is an SAP company.

6.1 Consuming a Gateway Service in JavaScript

Description

Comments