Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Consume NetWeaver Gateway Services Via SAPUI5

    Încărcat de

    Balbino Soares
    92 vizualizări10 pagini
    The document summarizes how to consume NetWeaver Gateway services using the SAPUI5 library. It describes creating an SAPUI5 project with a view to display data from a Gateway service. It then explains the code used to initialize a shell container, create a table bound to the Gateway data model to display the response, and organize the UI elements on the page.

    Descriere originală:

    ui5

    Titlu original

    Consume NetWeaver Gateway Services via SAPUI5

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    DOCX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    The document summarizes how to consume NetWeaver Gateway services using the SAPUI5 library. It describes creating an SAPUI5 project with a view to display data from a Gateway service. It then explains the code used to initialize a shell container, create a table bound to the Gateway data model to display the response, and organize the UI elements on the page.

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    92 vizualizări10 pagini

    Consume NetWeaver Gateway Services Via SAPUI5

    Încărcat de

    Balbino Soares
    The document summarizes how to consume NetWeaver Gateway services using the SAPUI5 library. It describes creating an SAPUI5 project with a view to display data from a Gateway service. It then explains the code used to initialize a shell container, create a table bound to the Gateway data model to display the response, and organize the UI elements on the page.

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 10

    Consume NetWeaver Gateway services via

    SAPUI5 - Part 1
    Posted by Ivan Femia in SAPUI5 Developer Center on Oct 15, 2012 9:04:42 AM
    Tweet

    At SAP Inside Track Milan 2012 I presented in a 6 minutes session (unfortuntely my friend,
    colleague and co-speakerFabio Di Micco was unable to present) how you can easily consume
    NetWeaver Gateway services using SAPUI5 library, in this blog I will resume the concept and
    the code and share it with the SCN community.

    Prerequisite
    1. SAPUI 5 library (Download here)
    2. Eclipse IDE for J2EE Developers, I'm using Juno (Download here)
    3. SAPUI5 Eclipse plugin installed
    4. HTTP Web Server installed (I'm using Tomcat in this example)
    5. Basic knowledge of NetWeaver Gateway

    Backend - Gateway service

    Gateway service can be easily created on you ABAP Gateway system, but to speed up the
    presentation I used one of the demo services provided by SAP on ES Workplace
    (available here) and in particular the classical Flight Sample.

    Frontend - SAPUI5

    Create a new SAPUI5 project in Eclipse and name it "SITMIL" and check "Create an Initial
    view", in the next screen name the view "retrieveFlight"
    you should have a project structure like below. This looks like a classical MVC structure.

    Now we should start coding.

    index.html

    First of all we need to create the container of our application.


    Edit the index.html file an paste this code:

    1. <!DOCTYPE HTML>

    2. <html>

    3. <head>
    4. <meta http-equiv="X-UA-Compatible" content="IE=edge">

    5. <script src="./resources/sap-ui-core.js" type="text/javascript"

    6. id="sap-ui-bootstrap"

    7. data-sap-ui-libs="sap.ui.ux3, sap.ui.commons, sap.ui.table"

    8. data-sap-ui-theme="sap_goldreflection">

    9. </script>

    10. <script type="text/javascript">

    11. // Create a SAP UI5 shell element

    12. var oShell = new sap.ui.ux3.Shell("flightAppShell", {

    13. appIcon : "http://www.sap.com/global/images/SAPLogo.gif",

    14. appTitle : "Flight manager", });

    15. // Just take the shell and place it in the html area called shellArea

    16. oShell.placeAt("shellArea");

    17. sap.ui.localResources("sitmil");

    18. var view = sap.ui.view({

    19. id : "idFlightService1",

    20. viewName : "sitmil.retrieveFlight",

    21. type : sap.ui.core.mvc.ViewType.JS });

    22. oShell.addContent(view);

    23. </script>

    24. </head>

    25. <body class="sapUiBody" role="application">

    26. <div id="shellArea"></div>

    27. </body>

    28. </html>
    Now let's try to explain the code and understand what we are doing.
    First step is to import sapui5 libraries used in this demo

    1. <script src="./resources/sap-ui-core.js" type="text/javascript" id="sap-ui-bootstrap"

    2. data-sap-ui-libs="sap.ui.ux3, sap.ui.commons, sap.ui.table"

    3. data-sap-ui-theme="sap_goldreflection">

    4. </script>

    Then we initialize the Shell element, that creates a nice look & feel to our page, and we
    attach it in block element <div id="shellArea">. The shell will be our main container.

    1. // Create a SAP UI5 shell element

    2. var oShell = new sap.ui.ux3.Shell("flightAppShell", {

    3. appIcon : "http://www.sap.com/global/images/SAPLogo.gif",

    4. appTitle : "Flight manager", });

    5. // Just take the shell and place it in the html area called shellArea

    6. oShell.placeAt("shellArea");

    As said, the shell will be our main container, what we finally need is to instantiate the main
    view content and attach it to the shell

    1. sap.ui.localResources("sitmil");

    2. var view = sap.ui.view({

    3. id : "idFlightService1",

    4. viewName : "sitmil.retrieveFlight",

    5. type : sap.ui.core.mvc.ViewType.JS });

    6. oShell.addContent(view);

    retrieveFlight.view.js

    SAPUI5 plugin automatically creates the main view JS class with two methods

    1. sap.ui.jsview("sitmil.retrieveFlight", {
    2. getControllerName : function() {

    3. return "sitmil.retrieveFlight";

    4. },

    5. createContent : function(oController) {

    6. }

    7. });

    what we need it is to implement the createContent method, in this method we will create our
    user interface.

    1. var layout = new sap.ui.commons.layout.MatrixLayout('layout');

    2. layout.setWidth('80%');

    3. var rPannel = new sap.ui.commons.Panel('rPannel');

    4. var rTitle = new sap.ui.commons.Title('rTitle');

    5. rTitle.setText('All - Flights');

    6. rPannel.setTitle(rTitle);

    7. var oTable = new sap.ui.table.DataTable();

    8. oTable.addColumn(

    9. new sap.ui.table.Column({

    10. label: new sap.ui.commons.Label({text: "AirLine"}),

    11. template: new sap.ui.commons.TextField().bindProperty("value", "AirLineID"),

    12. sortProperty: "AirLineID"

    13. }));

    14. oTable.addColumn(

    15. new sap.ui.table.Column({

    16. label: new sap.ui.commons.Label({text: "Flight Number"}),

    17. template: new sap.ui.commons.TextField().bindProperty("value", "FlightConnectionID"),

    18. sortProperty: "FlightConnectionID"


    19. }));

    20. oTable.addColumn(

    21. new sap.ui.table.Column({

    22. label: new sap.ui.commons.Label({text: "Date"}),

    23. template: new sap.ui.commons.TextField().bindProperty("value", "FlightDate"),

    24. sortProperty: "FlightDate"

    25. }));

    26. oTable.addColumn(

    27. new sap.ui.table.Column({

    28. label: new sap.ui.commons.Label({text: "Airfare"}),

    29. template: new sap.ui.commons.TextField().bindProperty("value", "AirFare"),

    30. sortProperty: "AirFare"

    31. }));

    32. oTable.addColumn(

    33. new sap.ui.table.Column({

    34. label: new sap.ui.commons.Label({text: "Airline Currency"}),

    35. template: new sap.ui.commons.TextField().bindProperty("value", "LocalCurrencyCode"),

    36. sortProperty: "LocalCurrencyCode"

    37. }));

    38. oTable.addColumn(

    39. new sap.ui.table.Column({

    40. label: new sap.ui.commons.Label({text: "Type of the plane"}),

    41. template: new sap.ui.commons.TextField().bindProperty("value", "AirCraftType"),

    42. sortProperty: "AirCraftType"

    43. }));

    44. var oModel = new sap.ui.model.odata.ODataModel(


    45. "http://gw.esworkplace.sap.com/sap/opu/odata/IWBEP/RMTSAMPLEFLIGHT_
    2",

    46. false,

    47. "GW@ESW",

    48. "ESW4GW");

    49. oTable.setModel(oModel);

    50. oTable.bindRows("FlightCollection");

    51. rPannel.addContent(oTable);

    52. layout.createRow(rPannel);

    53. this.addContent(layout);

    54. }

    As did before let's try to understand our code.


    First of all we create a matrix layout, a panel ( something like the tray bar in WDA just to
    make it clear ) and we associate a panel title, this panel will contain the table list of all the
    fights exposed by our Gateway service

    1. var layout = new sap.ui.commons.layout.MatrixLayout('layout');

    2. layout.setWidth('80%');

    3. var rPannel = new sap.ui.commons.Panel('rPannel');

    4. var rTitle = new sap.ui.commons.Title('rTitle');

    5. rTitle.setText('All - Flights');

    6. rPannel.setTitle(rTitle);

    Next step we configure our table layout, it remembers me the WDINIT method in WDA and
    the ALV configuration. For each column we need to specify the field name of the collection
    property (FlightCollection in the gateway service, seemetadata of our Gateway service for
    more details) that we want to bind and display in that column

    1. var oTable = new sap.ui.table.DataTable();

    2. oTable.addColumn(

    3. new sap.ui.table.Column({

    4. label: new sap.ui.commons.Label({text: "AirLine"}),


    5. template: new sap.ui.commons.TextField().bindProperty("value", "AirLineID"),

    6. sortProperty: "AirLineID"

    7. }));

    8. oTable.addColumn(

    9. new sap.ui.table.Column({

    10. label: new sap.ui.commons.Label({text: "Flight Number"}),

    11. template: new sap.ui.commons.TextField().bindProperty("value", "FlightConnectionID"),

    12. sortProperty: "FlightConnectionID"

    13. }));

    14. oTable.addColumn(

    15. new sap.ui.table.Column({

    16. label: new sap.ui.commons.Label({text: "Date"}),

    17. template: new sap.ui.commons.TextField().bindProperty("value", "FlightDate"),

    18. sortProperty: "FlightDate"

    19. }));

    20. oTable.addColumn(

    21. new sap.ui.table.Column({

    22. label: new sap.ui.commons.Label({text: "Airfare"}),

    23. template: new sap.ui.commons.TextField().bindProperty("value", "AirFare"),

    24. sortProperty: "AirFare"

    25. }));

    26. oTable.addColumn(

    27. new sap.ui.table.Column({

    28. label: new sap.ui.commons.Label({text: "Airline Currency"}),

    29. template: new sap.ui.commons.TextField().bindProperty("value", "LocalCurrencyCode"),

    30. sortProperty: "LocalCurrencyCode"


    31. }));

    32. oTable.addColumn(

    33. new sap.ui.table.Column({

    34. label: new sap.ui.commons.Label({text: "Type of the plane"}),

    35. template: new sap.ui.commons.TextField().bindProperty("value", "AirCraftType"),

    36. sortProperty: "AirCraftType"

    37. }));

    We need to attach our layout (yes we draw the layout until this point) to our oData service.
    Here it comes the power of SAPUI5 library, with only 3 lines of code we are able to consume
    an oData resource and bind a collection to our table; each row of our table will be an entity of
    the FlighCollection

    1. var oModel = new sap.ui.model.odata.ODataModel(

    2. "http://gw.esworkplace.sap.com/sap/opu/odata/IWBEP/RMTSAMPLEFLIGHT_
    2",

    3. false,

    4. "GW@ESW",

    5. "ESW4GW");

    6. oTable.setModel(oModel);

    7. oTable.bindRows("FlightCollection");

    We are almost done, we only need to attach our table to the panel

    1. rPannel.addContent(oTable);

    2. layout.createRow(rPannel);

    3. this.addContent(layout);

    Deploy and Execute

    Final step is to export the WAR file into Tomcat webapps directory. You can also deploy it on
    your preferred HTTP web server, for example I also deployed a live demo on my Apache HTTP
    server.
    Warning: You have to accept Cross Origin Request on you browser, otherwise you will see
    empty tables
    In part 2 we enhance this demo focusing on navigation property. In the meantime, below the
    recording of my session at SAP Inside Track Milan 2012.

    S-ar putea să vă placă și