6.1 Consuming a Gateway Service in JavaScript

8/12/2019 6.1 Consuming a Gateway Service in JavaScript

http://slidepdf.com/reader/full/61-consuming-a-gateway-service-in-javascript 1/19

I N T E R N A L

March, 2012

GW100 SAP NetWeaver GatewayConsuming a Gateway Service in JavaScript



© 2012 SAP AG. All rights reserved. 2

At the end of this chapter, you will understand:! How Use the SAP UI5 JavaScript Libraries to Create a Gateway

Service (Read-only)

Objectives




Agenda

" Consuming an OData Service using the SAPUI5 JavaScript Libraries




Setup Eclipse Workspace

Create a new folder within your workspace. This will contain your SAP ODatadevelopments.

Underneath this folder, create:• An !"#$%&'()* file

• Three more folders named +,#$*- , .!$/- and 0,"(1,**$1- .




Define a Basic Web Page – 1/2

It is assumed that the SUPUI5 libraries are already installed on your web serverunder 2-345!6 . Edit !"#$%&'()* and add the following coding to start with:

789:0;<=> '()*@7'()* @7'$3# @7)$(3 '((4A$B5!C D!"#$%#&'()*+,-./! 1'2+/2+ 3!453/67/! 89

7(!(*$ @EF= :93(32EF=GH6 #$), 72(!(*$ @

78AA I,3# EF=GH6J -$*$K( L,*# 1$M*$K(!," ('$)$ 3"# *,3# ('$ K,)),"-J (3N*$ 3"# 5%O*!N131!$- AA@

7-K1!4( !# D!:*)#;,#-''+:+<*)! +=)/ 3!+/>+8?*@*:1<,)+!-1KD!8:*);,A8</:';<1/:8:*)#;,#1'</B?:!#3(3A-34A5!A('$)$ D!:*)C7'.6</D./1+,'2!#3(3A-34A5!A*!N- D!:*)B;,B1'(('2:E:*)B;,B+*-./E:*)B;,B;>F! 9G8 :1<,)+ 9

&&& -"!4 &&&

7N,#P K*3-- D!:*)$,H'6=! 97#!C !# D!:I/..%</*! 9G8 6,@ 9

72N,#P @72'()* @

Here’s the important part

Boot up SAPUI5, load a themethen load the required libraries

The output from SAPUI5will be written here




Define a Basic Web Page – 2/2

After the 7-K1!4(@ tag to boot up SAPUI5, add the following JavaScript filereferences:

78AA 9$K*31$ +.0 M!*$- !" 1$C$1-$ ,1#$1 ,M #$4$"#$"KP+,#$*- M!1-(J ('$" K,"(1,**$1-J ('$" C!$/- AA@

7-K1!4( (P4$ D!+/>+8?*@*:1<,)+! :<1 3!B8J'6/.:8D.,7I+42D'J'6/.B?:! 9G8 :1<,)+ 9

7-K1!4( (P4$ D!+/>+8?*@*:1<,)+! :<1 3!B8&'2+<'../<:8D.,7I+&'2+<'../<B?:! 9G8 :1<,)+ 9

7-K1!4( (P4$ D!+/>+8?*@*:1<,)+! :<1 3!B8K,/L:8;,C;+,.,+,/:B?:! 9G8 :1<,)+ 97-K1!4( (P4$ D!+/>+8?*@*:1<,)+! :<1 3!B8K,/L:8:I'LM.,7I+:B?:! 9G8 :1<,)+ 97-K1!4( (P4$ D!+/>+8?*@*:1<,)+! :<1 3!B8K,/L:8:I'L%,<)'<+:B?:! 9G8 :1<,)+ 97-K1!4( (P4$ D!+/>+8?*@*:1<,)+! :<1 3!B8K,/L:8:I'LH''N,27:B?:! 9G8 :1<,)+ 9

The coding for models, views and controllers is separated into different files in orderto make it easier to manage.


http://slidepdf.com/reader/full/61-consuming-a-gateway-service-in-javascript 7/19© 2012 SAP AG. All rights reserved. 7

22 QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ

22 01$3($ 3 ),#$* ,NR$K( K*,-51$22 QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ!"# ,S*!L'(+,#$* D T $%&'()*& T51!J-$1C!K$J5-$1J43--/,1#U V

!"# #M*(W51! D 51! XX Y'((4Z22*,K3*',-(2-342[3($/3P2F\02Y ]!"# #M*(W-$1C!K$ D -$1C!K$ XX YS*!L'(WH"M,1)3(!,"W 22 2Y]!"# #M*(W5-$1 D 5-$1 XX Y[^WGE>_Y] 22 F## #$M35*( 5-$1 !"# #M*(W43--/,1# D 43--/,1# XX Y43--/,1#Y ] 22 F## #$M35*( 5-$1 43--/,1#

#+(%#& VL$(+,#$* Z $%&'()*& TU V #+(%#& ,+,#$*] `JL$(+$(3#3(3 Z $%&'()*& TU V #+(%#& ,+,#$*&,+$(3#3(3&#3(3E$1C!K$-&-K'$)3abc] ̀

``TUU]

Create a JavaScript Closure for the Model

In the &2+,#$*- folder create M*!L'(H"M,+,#$*&R- .The following code creates a closure around the declaration of the OData modelobject hiding it as a private property and exposing it through method L$(+,#$*TU .The statement to create the OData model is highlighted.

!"# ,+,#$* D &+, -34&5!&),#$*&,#3(3&:93(3+,#$*T#M*(W51! d #M*(W-$1C!K$J$"-.+ J #M*(W5-$1J #M*(W43--/,1#U]



Create a Controller

In the &20,"(1,**$1- folder create M*!L'(0,"(1,**$1&R- .In this example, the coding in the controller does nothing more than return ananonymous object having methods that return the name of each of the entity types.This functionality is used by a utility that creates a UI table for an entity type.


22 9$M!"$ 3 K,"(1,**$1 M,1 '3"#*!"L S*!L'( H"M,1)3(!,"22 QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ-34&5!&K,"(1,**$1T Y-34&(13!"!"L&L/ebb&K,"(1,**$1&#,S*!L'(H"M,Y J

T$%&'()*& TU V#+(%#& V

L$(S*!L'(>"(!(Pf3)$Z $%&'()*& 01 2 #+(%#& 3S*!L'( 34 56L$(\,,g!"L>"(!(Pf3)$Z $%&'()*& 01 2 #+(%#& 3 \,,g!"L 34 56L$(F!14,1(>"(!(Pf3)$Z $%&'()*& 01 2 #+(%#& 3F!14,1( 34 56

`]`TUUU]

Each controller is named usingan arbitrary namespace.



Create Views for each Entity Type

In the &2.!$/- folder create a file for each view called -',/F!14,1(-&R- ,-',/S*!L'(-&R- , and -',/\,,g!"L-&R- .

Here, we’ll use a utility function to create the required UI table using the methodsfound in the controller that return the entity type name.


22 F!14,1(- C!$/22 QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ-34&5!&R-C!$/T Y-34&(13!"!"L&L/ebb&C!$/&-',/ -Y J

V L$(0,"(1,**$1f3)$Z $%&'()*& TU V #+(%#& Y-34&(13!"!"L&L/ebb&K,"(1,**$1&#,S*!L'(H"M,Y ] `JK1$3($0,"($"(Z $%&'()*& T,0,"(1,**$1U V

#+(%#& N5!*#;3N*$S1,)+$(3#3(3T,S*!L'(+,#$*J ,0,"(1,**$1&L$( >"(!(Pf3)$TUU]`

`

U] This value is then passed tomethod K1$3($0,"($"(TU

This function is repeated for each view with the entity type name changed asrequired.

F!14,1(

F!14,1(

Each view needs to know theidentity of its associated controller.



Utility to Create a UI Table from OData Metadata – 1/2

22 QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ22 01$3($ 3 GH (3N*$ N3-$# ," -544*!$# >"(!(P ;P4$ "3)$ 3"# :93(3 )$(3#3(322 QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ!"# N5!*#;3N*$S1,)+$(3#3(3 D $%&'()*& T,+,#$*J $"(!(Pf3)$U V

!"# ,+$(393(3 D ,+,#$*&L$(+$(3#3(3TU!"# ('!->"(!(P;P4$ D ,+$(393(3&"3)$-43K$ d Y&Y d $"(!(Pf3)$]!"# ('!->"(!(PE$(f3)$ D YY]!"# K,*I!-( D ac]!"# ! D bJ R D b]

22 I,,4 31,5"# $"(!(P (P4$-$*# T!Db] !7,+$(393(3&$"(!(P;P4$&*$"L('] !ddU V

22 h3C$ /$ M,5"# ('$ $"(!(P (P4$ /$i1$ *,,g!"L M,1j

)$ T,+$(393(3&$"(!(P;P4$a!c&"3)$ kk,+$(393(3&$"(!(P;P4$a!c&"3)$ DDD $"(!(Pf3)$U V22 G-$ ('$ M5**P B53*!M!$# $"(!(P "3)$ (, #$($1)!"$ ('$ $"(!(P -$( "3)$$*# TRDb] R7,+$(393(3&$"(!(P0,"(3!"$1abc&$"(!(PE$(&*$"L('] RddU V

)$ T,+$(393(3&$"(!(P0,"(3!"$1abc&$"(!(PE$(aRc&$"(!(P;P4$ DDD ('!->"(!(P;P4$U V('!->"(!(PE$(f3)$ D ,+$(393(3&$"(!(P0,"(3!"$1abc&$"(!(PE$(aRc&"3)$]

``

In the &2.!$/- folder create the file 5!W5(!*!(!$-&R- .



Utility to Create a UI Table from OData Metadata – 2/2

22 I,,4 31,5"# ('$ $"(!(P (P4$ 41,4$1(!$- K1$3(!"L 3 (3N*$ K,*5)" M,1 $3K'$*# TRDb] R7,+$(393(3&$"(!(P;P4$a!c&41,4$1(P&*$"L('] RddU V

22 S,1 -!)4*!K!(PJ )!-- ,5( K,)4*$% (P4$-)$ T,+$(393(3&$"(!(P;P4$a!c&41,4$1(PaRc&(P4$&-5N-(1!"LTbJlU DD Y>#)&YU V

K,*I!-(&45-'TV*3N$* Z ,+$(393(3&$"(!(P;P4$a!c&41,4$1(PaRc&"3)$J

($)4*3($Z ,+$(393(3&$"(!(P;P4$a!c&41,4$1(PaRc&"3)$Ù]`

``

`

22 01$3($ 3 (3N*$ 5-!"L ('$ K,*5)" *!-( K1$3($# 3N,C$!"# ,;3N*$ D &+, -34&5!&(3N*$&93(3;3N*$TV K,*5)"-Z K,*I!-( Ù]

22 N!"# ),#$* (, ;3N*$,;3N*$&-$(+,#$*T,+,#$*&L$(+,#$*TUU],;3N*$&N!"#FLL1$L3(!,"T Y1,/-Y J ('!->"(!(PE$(f3)$U]

1$(51" ,;3N*$]`]

Continuation of the coding in &2.!$/-25!W5(!*!(!$-&R- .



Complete the JavaScript Coding in the Web Page – 1/4

The remainder of the !"#$%&'()* web page now needs to be completed. After the last 7-K1!4(@ element, add the following:

7-K1!4( @22 QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ22 H"-(3"(!3($ C!$/- #$K*31$# !" ('$ 3N,C$ &2C!$/-2Q&R- M!*$ -22 QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ

!"# M*!L'(-.!$/ D -34&5!&R-C!$/T Y-34&(13!"!"L&L/ebb&C!$/&-',/S*!L'(-Y U]

!"# 3!14,1(-.!$/ D -34&5!&R-C!$/T Y-34&(13!"!"L&L/ebb&C!$/&-',/F!14,1(-Y U]!"# N,,g!"L-.!$/ D -34&5!&R-C!$/T Y-34&(13!"!"L&L/ebb&C!$/&-',/\,,g!"L-Y U]

Create an instance of each view. Notice that views need to be identified by theirfully qualified name.




The UX3 Shell object defines the entire screen layout.The /,1g-$(H($)- array holds the menu structure.

22 QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ22 01$3($ ('$ 5%O -'$** T"3C!L3(!," 3"# K,"($"( K,"(3!"$1 U22 QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ!"# ,E'$** D &+, -34&5!&5%O&E'$**T Y)PE'$**Y J

V 344HK,"Z Y'((4Z22///&-34&K,)2L*,N3*2!)3L$-2EF=I,L,&L!MY J

344;!(*$Z YEF=GH6 H"($1M3K$ (, [3($/3PY J

43"$\31H($)-Z a &+, -34&5!&K,1$&H($)TVg$PZ Y4NW4$,4*$YJ ($%(Z Y=$,4*$YÙ cJ*,L,5(Z $%&'()*& TU V 3*$1(T Y\P$ NP$&&&YU] `

Ù]

/,1g-$(H($)-Za&+, -34&5!&5%O&f3C!L3(!,"H($)T V

g$PZY/!WS*!L'(H"M,Y J($%(ZYS*!L'( H"M,1)3(!,"Y J-5NH($)-Za

&+, -34&5!&5%O&f3C!L3(!,"H($)TVg$PZ Y/!WS*!L'(H"M,WS*!L'(-Y J ($%(Z YS*!L'(-Y ÙJ&+, -34&5!&5%O&f3C!L3(!,"H($)TVg$PZ Y/!WS*!L'(H"M,WF!14,1(-Y J($%(Z YF!14,1(-Y ÙJ

&+, -34&5!&5%O&f3C!L3(!,"H($)TVg$PZ Y/!WS*!L'(H"M,W\,,g!"L-Y J($%(Z Y\,,g!"L-Y ÙcÙ

cJ




The L$(0,"($"(TU function examines the key of the selected menu item andreturns the appropriate view instance.

22 =3L$ K,"($"( K1$3(!," A M,1 $3K' /,1g-$( !($) ('$ K,"($"( !- #$M!"$# '$1$ !"# )0,"($"( D V`]

!"# L$(0,"($"( D $%&'()*& Tg$PU V22 HM K,"($"( !- 3*1$3#P K1$3($#J 1$(51" !( #!1$K(* P

)$ T)0,"($"(ag$PcU #+(%#& )0,"($"(ag$Pc]

)$ Tg$P DDD Y/!WS*!L'(H"M,W\,,g!"L-Y U V )0,"($"(ag$Pc D N,,g!"L-.!$/] `+-.+ )$ Tg$P DDD Y/!WS*!L'(H"M,WF!14,1(-Y U V )0,"($"(ag$Pc D 3!14,1(-.!$/] `+-.+ )$ Tg$P DDD Y/!WS*!L'(H"M,WS*!L'(-Y U V )0,"($"(ag$Pc D M*!L'(-.!$/] `

#+(%#& )0,"($"(ag$Pc]`

The returned view instance is then displayed in the UX3 shell’s content area.




Attach a function to the UX3 Shell’s ^,1g-$(H($)E$*$K($# event that returns theselected view instance, then set the initial view.

22 ^'$" ('$ 5-$1 -$*$K(- 3 /,1g-$( !($)J 45( ('$ 1$-4$K(!C$ K,"($"( !"(, ('$ -'$**i-22 )3!" 31$3 ,E'$**&3((3K'^,1g-$(H($)E$*$K($#T $%&'()*& T,>C$"(U V

!"# g$P D ,>C$"(&L$(=313)$($1T Yg$PYU],E'$**&-$(0,"($"(TL$(0,"($"(Tg$PUU]

Ù]

22 E$( ('$ !"!(!3* K,"($"( ,M ('$ E'$** A ('$ h,)$ :C$1C!$/ !- -$*$K($# !"!(!3**P ,E'$**&-$(0,"($"(TL$(0,"($"(T Y/!WS*!L'(H"M,WS*!L'(-Y UU]

22 =*3K$ ('$ E'$** !"(, ('$ 7#!C@ $*$)$"( #$M!"$# N$*,/ ,E'$**&4*3K$F(T Y-'$**F1$3Y U]72-K1!4( @

72'$3# @

Finally, place the output of the UX3 Shell into the HTML 7#!C@ called -'$**F1$3 .



Finished Application



Hands-on Exercise

Exercise 14Create a Gateway Application Using SAPUI5

JavaScript Libraries



Summary

You should now understand:! How Use the SAP UI5 JavaScript Libraries to Create a Gateway

Service (Read-only)



© 2012 SAP AG All rights reser ed 19

No part of this publication may be reproduced or transmitted in any form or for any purposewithout the express permission of SAP AG. The information contained herein may bechanged without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietarysoftware components of other software vendors.

Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of MicrosoftCorporation.

IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x,System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server,PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER,OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP,RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, IntelligentMiner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks ofIBM Corporation.

Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registeredtrademarks of Adobe Systems Incorporated in the United States and/or other countries.

Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin aretrademarks or registered trademarks of Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, WorldWide Web Consortium, Massachusetts Institute of Technology.Java is a registered trademark of Sun Microsystems, Inc.

JavaScript is a registered trademark of Sun Microsystems, Inc., used under license fortechnology invented and implemented by Netscape.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer,StreamWork, and other SAP products and services mentioned herein as well as theirrespective logos are trademarks or registered trademarks of SAP AG in Germany and othercountries.

© 2012 SAP AG. All rights reserved

Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, CrystalDecisions, Web Intelligence, Xcelsius, and other Business Objects products and servicesmentioned herein as well as their respective logos are trademarks or registered trademarksof Business Objects Software Ltd. Business Objects is an SAP company.

Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and other Sybaseproducts and services mentioned herein as well as their respective logos are trademarks orregistered trademarks of Sybase, Inc. Sybase is an SAP company.

All other product and service names mentioned are the trademarks of their respectivecompanies. Data contained in this document serves informational purposes only. Nationalproduct specifications may vary.

The information in this document is proprietary to SAP. No part of this document may bereproduced, copied, or transmitted in any form or for any purpose without the express priorwritten permission of SAP AG.

This document is a preliminary version and not subject to your license agreement or anyother agreement with SAP. This document contains only intended strategies, developments,and functionalities of the SAP® product and i s not intended to be binding upon SAP to anyparticular course of business, product strategy, and/or development. Please note that thisdocument is subject to change and may be changed by SAP at any time without notice.

SAP assumes no responsibility for errors or omissions in this document. SAP does notwarrant the accuracy or completeness of the information, text, graphics, links, or other itemscontained within this material. This document is provided without a warranty of any kind,either express or implied, including but not limited to the implied warranties ofmerchantability, fitness for a particular purpose, or non-infringement.

SAP shall have no liability for damages of any kind including without limitation direct, special,

indirect, or consequential damages that may result from the use of these materials. Thislimitation shall not apply in cases of intent or gross negligence.

The statutory liability for personal injury and defective products is not affected. SAP has nocontrol over the information that you may access through the use of hot links contained inthese materials and does not endorse your use of third-party Web pages nor provide anywarranty whatsoever relating to third-party Web pages.

Documents

6.1 Consuming a Gateway Service in JavaScript