Created
September 3, 2015 13:34
-
-
Save anonymous/59baacb7a3211ba360eb to your computer and use it in GitHub Desktop.
Basic SAPUI5 MVC example OpenUI5 BIN Starting template // source http://jsbin.com/kakap/1
This file contains hidden or 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 name="description" content="OpenUI5 BIN Starting template" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta charset="utf-8"> | |
| <!-- Here I used the absolute OpenUI link to sap-ui-core.js, adapt to your need --> | |
| <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" | |
| id="sap-ui-bootstrap" | |
| data-sap-ui-theme="sap_bluecrystal" | |
| data-sap-ui-libs="sap.ui.commons,sap.m"></script> | |
| <title>Basic SAPUI5 MVC example</title> | |
| <!-- | |
| In normal use, uncomment this block | |
| <script> | |
| sap.ui.view({ | |
| type: sap.ui.core.mvc.ViewType.JS, | |
| viewName: "com.yourdomain.yourapp.view" | |
| }) | |
| .placeAt("uiArea"); | |
| </script> | |
| --> | |
| </head> | |
| <body class="sapUiBody"> | |
| <div id="uiArea"></div> | |
| <script id="jsbin-javascript"> | |
| /* UI5 view | |
| * normally put in a separate file (in this case, 'com.yourdomain.yourapp.view.js') | |
| */ | |
| sap.ui.jsview("com.yourdomain.yourapp.view", { | |
| getControllerName: function() { | |
| return "com.yourdomain.yourapp.controller"; | |
| }, | |
| createContent: function(oController) { | |
| //Created a sample SimpleForm layout | |
| var oLayout = new sap.ui.layout.form.SimpleForm( | |
| "mySimpleForm", | |
| { | |
| maxContainerCols: 1, | |
| content:[ | |
| new sap.ui.core.Title({text:"Sample Invoice Form"}), | |
| new sap.ui.commons.Label({text:"Start Date"}), | |
| new sap.ui.commons.DatePicker({yyyymmdd:"{/startDate}"}), | |
| new sap.ui.commons.Label({text:"End Date"}), | |
| new sap.ui.commons.DatePicker({yyyymmdd:"{/endDate}"}), | |
| new sap.ui.commons.Label({text:"Rate"}), | |
| new sap.ui.commons.TextField({value:"{/rate}"}), | |
| new sap.ui.commons.Label({text:""}), | |
| new sap.ui.commons.RadioButtonGroup({ | |
| columns: 2, | |
| selectedIndex : "{/dailyHourlyIndex}", | |
| items: [ | |
| new sap.ui.core.Item({text: "Daily"}), | |
| new sap.ui.core.Item({text: "Hourly"}) | |
| ] | |
| }), | |
| new sap.ui.commons.Label({text:"Number of days"}), | |
| //Using a formatter function to calculate number of days | |
| new sap.ui.commons.TextView({text:{ | |
| parts : ["/startDate", "/endDate"], | |
| formatter : function(ymdDate1, ymdDate2) { | |
| var days = ymdDate2 - ymdDate1; | |
| return days; | |
| } | |
| }}) | |
| ] | |
| }); | |
| return oLayout; | |
| }, | |
| onAfterRendering: function() { | |
| } | |
| }); | |
| /* UI5 controller | |
| * normally put in a separate file (in this case, 'com.yourdomain.yourapp.view.js') | |
| */ | |
| sap.ui.controller("com.yourdomain.yourapp.controller", { | |
| onInit: function() { | |
| //Declare your model data | |
| var oData = { | |
| startDate : 20140714, | |
| endDate : 20140731, | |
| rate : 90, | |
| dailyHourlyIndex : 1 | |
| }; | |
| //Declare and set your model | |
| var oModel = sap.ui.model.json.JSONModel(); | |
| oModel.setData(oData); | |
| sap.ui.getCore().setModel(oModel); | |
| } | |
| }); | |
| // For JSBin, I have included this here (normally this is in index.html) | |
| sap.ui.view({ | |
| type: sap.ui.core.mvc.ViewType.JS, | |
| viewName: "com.yourdomain.yourapp.view" | |
| }) | |
| .placeAt("uiArea"); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">/* UI5 view | |
| * normally put in a separate file (in this case, 'com.yourdomain.yourapp.view.js') | |
| */ | |
| sap.ui.jsview("com.yourdomain.yourapp.view", { | |
| getControllerName: function() { | |
| return "com.yourdomain.yourapp.controller"; | |
| }, | |
| createContent: function(oController) { | |
| //Created a sample SimpleForm layout | |
| var oLayout = new sap.ui.layout.form.SimpleForm( | |
| "mySimpleForm", | |
| { | |
| maxContainerCols: 1, | |
| content:[ | |
| new sap.ui.core.Title({text:"Sample Invoice Form"}), | |
| new sap.ui.commons.Label({text:"Start Date"}), | |
| new sap.ui.commons.DatePicker({yyyymmdd:"{/startDate}"}), | |
| new sap.ui.commons.Label({text:"End Date"}), | |
| new sap.ui.commons.DatePicker({yyyymmdd:"{/endDate}"}), | |
| new sap.ui.commons.Label({text:"Rate"}), | |
| new sap.ui.commons.TextField({value:"{/rate}"}), | |
| new sap.ui.commons.Label({text:""}), | |
| new sap.ui.commons.RadioButtonGroup({ | |
| columns: 2, | |
| selectedIndex : "{/dailyHourlyIndex}", | |
| items: [ | |
| new sap.ui.core.Item({text: "Daily"}), | |
| new sap.ui.core.Item({text: "Hourly"}) | |
| ] | |
| }), | |
| new sap.ui.commons.Label({text:"Number of days"}), | |
| //Using a formatter function to calculate number of days | |
| new sap.ui.commons.TextView({text:{ | |
| parts : ["/startDate", "/endDate"], | |
| formatter : function(ymdDate1, ymdDate2) { | |
| var days = ymdDate2 - ymdDate1; | |
| return days; | |
| } | |
| }}) | |
| ] | |
| }); | |
| return oLayout; | |
| }, | |
| onAfterRendering: function() { | |
| } | |
| }); | |
| /* UI5 controller | |
| * normally put in a separate file (in this case, 'com.yourdomain.yourapp.view.js') | |
| */ | |
| sap.ui.controller("com.yourdomain.yourapp.controller", { | |
| onInit: function() { | |
| //Declare your model data | |
| var oData = { | |
| startDate : 20140714, | |
| endDate : 20140731, | |
| rate : 90, | |
| dailyHourlyIndex : 1 | |
| }; | |
| //Declare and set your model | |
| var oModel = sap.ui.model.json.JSONModel(); | |
| oModel.setData(oData); | |
| sap.ui.getCore().setModel(oModel); | |
| } | |
| }); | |
| // For JSBin, I have included this here (normally this is in index.html) | |
| sap.ui.view({ | |
| type: sap.ui.core.mvc.ViewType.JS, | |
| viewName: "com.yourdomain.yourapp.view" | |
| }) | |
| .placeAt("uiArea"); | |
| </script></body> | |
| </html> |
This file contains hidden or 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
| /* UI5 view | |
| * normally put in a separate file (in this case, 'com.yourdomain.yourapp.view.js') | |
| */ | |
| sap.ui.jsview("com.yourdomain.yourapp.view", { | |
| getControllerName: function() { | |
| return "com.yourdomain.yourapp.controller"; | |
| }, | |
| createContent: function(oController) { | |
| //Created a sample SimpleForm layout | |
| var oLayout = new sap.ui.layout.form.SimpleForm( | |
| "mySimpleForm", | |
| { | |
| maxContainerCols: 1, | |
| content:[ | |
| new sap.ui.core.Title({text:"Sample Invoice Form"}), | |
| new sap.ui.commons.Label({text:"Start Date"}), | |
| new sap.ui.commons.DatePicker({yyyymmdd:"{/startDate}"}), | |
| new sap.ui.commons.Label({text:"End Date"}), | |
| new sap.ui.commons.DatePicker({yyyymmdd:"{/endDate}"}), | |
| new sap.ui.commons.Label({text:"Rate"}), | |
| new sap.ui.commons.TextField({value:"{/rate}"}), | |
| new sap.ui.commons.Label({text:""}), | |
| new sap.ui.commons.RadioButtonGroup({ | |
| columns: 2, | |
| selectedIndex : "{/dailyHourlyIndex}", | |
| items: [ | |
| new sap.ui.core.Item({text: "Daily"}), | |
| new sap.ui.core.Item({text: "Hourly"}) | |
| ] | |
| }), | |
| new sap.ui.commons.Label({text:"Number of days"}), | |
| //Using a formatter function to calculate number of days | |
| new sap.ui.commons.TextView({text:{ | |
| parts : ["/startDate", "/endDate"], | |
| formatter : function(ymdDate1, ymdDate2) { | |
| var days = ymdDate2 - ymdDate1; | |
| return days; | |
| } | |
| }}) | |
| ] | |
| }); | |
| return oLayout; | |
| }, | |
| onAfterRendering: function() { | |
| } | |
| }); | |
| /* UI5 controller | |
| * normally put in a separate file (in this case, 'com.yourdomain.yourapp.view.js') | |
| */ | |
| sap.ui.controller("com.yourdomain.yourapp.controller", { | |
| onInit: function() { | |
| //Declare your model data | |
| var oData = { | |
| startDate : 20140714, | |
| endDate : 20140731, | |
| rate : 90, | |
| dailyHourlyIndex : 1 | |
| }; | |
| //Declare and set your model | |
| var oModel = sap.ui.model.json.JSONModel(); | |
| oModel.setData(oData); | |
| sap.ui.getCore().setModel(oModel); | |
| } | |
| }); | |
| // For JSBin, I have included this here (normally this is in index.html) | |
| sap.ui.view({ | |
| type: sap.ui.core.mvc.ViewType.JS, | |
| viewName: "com.yourdomain.yourapp.view" | |
| }) | |
| .placeAt("uiArea"); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment