Created
July 17, 2015 14:41
-
-
Save ikiw/c65dfc411bbb8e3b7943 to your computer and use it in GitHub Desktop.
Music Store Ui5 App
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <title>Mobile App Hello World</title> | |
| <script src="http://veui5infra.dhcp.wdf.sap.corp:8080/sapui5/resources/sap-ui-core.js" | |
| id="sap-ui-bootstrap" | |
| data-sap-ui-libs="sap.m" | |
| data-sap-ui-xx-fakeOS="ios" | |
| data-sap-ui-theme="sap_bluecrystal"> | |
| </script> | |
| <!-- only load the mobile lib "sap.m" and the "sap_mvi" theme --> | |
| <script type="text/javascript"> | |
| sap.ui.controller("training.MusicStore", { | |
| onSearch: function(oEvent){ | |
| var query = oEvent.getParameter("query"); | |
| var url = "https://itunes.apple.com/search?term=" + query + "&media=music&entity=song&callback=?"; | |
| //var that = this; | |
| $.getJSON(url,function(data){ | |
| sap.ui.getCore().byId("myMusicList").getModel().setData(data); | |
| }); | |
| } | |
| }); | |
| sap.ui.jsview("training.MusicStore", { | |
| getControllerName : function() { | |
| return "training.MusicStore"; | |
| }, | |
| createContent : function(oController) { | |
| // create a mobile App | |
| // it initializes the HTML page for mobile use and provides animated page handling | |
| var app = new sap.m.App("myApp", { initialPage: "page1" }); // page1 should be displayed first | |
| // create the first page of your application | |
| var page1 = new sap.m.Page("page1", { | |
| title: "My First Music Store", | |
| subHeader: new sap.m.Bar({ | |
| enableFlexBox: true, | |
| contentMiddle: [ | |
| new sap.m.SearchField({placeholder: "Search for your music", | |
| layoutData: new sap.m.FlexItemData({growFactor: 1}), | |
| search: oController.onSearch | |
| }) | |
| ] | |
| }) | |
| }); | |
| // create a template for the listitems | |
| var listItemTemplate = new sap.m.StandardListItem({ | |
| title : "{artistName}", | |
| description : "{trackName}", | |
| icon: "{artworkUrl30}" | |
| }); | |
| var myMusicList = new sap.m.List("myMusicList", {}); | |
| myMusicList.bindAggregation("items", "/results", listItemTemplate); | |
| var oModel = new sap.ui.model.json.JSONModel(); | |
| myMusicList.setModel(oModel); | |
| page1.addContent(myMusicList); | |
| app.addPage(page1); | |
| return app; | |
| } | |
| }); | |
| // instantiate the View | |
| var myView = sap.ui.view({type:sap.ui.core.mvc.ViewType.JS, viewName:"training.MusicStore"}); | |
| // put the View onto the screen | |
| myView.placeAt("content"); | |
| </script> | |
| </head> | |
| <body class="sapUiBody"> | |
| <div id="content"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment