Created
May 11, 2012 13:39
-
-
Save elsewhat/2659702 to your computer and use it in GitHub Desktop.
PhoneGap and SAPUI5 index file
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
| <html> | |
| <head> | |
| <title></title> | |
| <script type="text/javascript" charset="utf-8" src="phonegap/cordova-1.6.0.js"></script> | |
| <script id="sap-ui-bootstrap" | |
| type="text/javascript" | |
| src="sapui5/resources/sap-ui-core.js" | |
| data-sap-ui-theme="sap_platinum" | |
| data-sap-ui-libs="sap.ui.commons"> | |
| </script> | |
| <script id='AppHeader' type="text/javascript"> | |
| //Wait for PhoneGap to load | |
| document.addEventListener("deviceready",onDeviceReady,false); | |
| function onDeviceReady(){ | |
| //find the name of the device platform from PhoneGap | |
| createSAPUI(device.platform); | |
| } | |
| function createSAPUI(devicePlatform){ | |
| //create the ApplicationHeader control | |
| var oAppHeader = new sap.ui.commons.ApplicationHeader(); | |
| //configure the branding area | |
| //oAppHeader.setLogoSrc("http://www.sap.com/global/images/SAPLogo.gif"); | |
| oAppHeader.setLogoText("Bouvet - SAPUI5 experiments - Running on " + devicePlatform); | |
| //configure the welcome area | |
| oAppHeader.setDisplayWelcome(true); | |
| oAppHeader.placeAt("appHeader"); | |
| var oLinksLayout = new sap.ui.commons.layout.MatrixLayout({ | |
| id : "linksLayout", | |
| layoutFixed : false}); | |
| var oLabel = new sap.ui.commons.Label({text : 'Experiment #1:'}); | |
| // creates a simple link with an action and property href not set | |
| var oLink = new sap.ui.commons.Link({ | |
| text: "Shell component", | |
| tooltip: "Demo of the shell component", | |
| href:"shell_min.html", | |
| }); | |
| oLinksLayout.createRow(oLabel,oLink); | |
| // attach the link to the DOM | |
| oLabel = new sap.ui.commons.Label({text : 'Experiment #2:'}); | |
| oLink = new sap.ui.commons.Link({ | |
| text: "ThingInspector component", | |
| tooltip: "Demo of the ThingInspector", | |
| href:"thing_min.html", | |
| }); | |
| oLinksLayout.createRow(oLabel,oLink); | |
| oLabel = new sap.ui.commons.Label({text : 'Experiment #3:'}); | |
| oLink = new sap.ui.commons.Link({ | |
| text: "Feed component", | |
| tooltip: "Demo of the Feed", | |
| href:"feed_min.html", | |
| }); | |
| oLinksLayout.createRow(oLabel,oLink); | |
| oLabel = new sap.ui.commons.Label({text : 'Experiment #4:'}); | |
| oLink = new sap.ui.commons.Link({ | |
| text: "Consumption of OData with sapui5 component", | |
| tooltip: "Demo of the Feed", | |
| href:"odata.html", | |
| }); | |
| oLinksLayout.createRow(oLabel,oLink); | |
| oLabel = new sap.ui.commons.Label({text : 'Experiment #5:'}); | |
| oLink = new sap.ui.commons.Link({ | |
| text: "Phonegap API integration", | |
| tooltip: "Demo of the phonegap contacts api together with sapui5", | |
| href:"contacts.html", | |
| }); | |
| oLinksLayout.createRow(oLabel,oLink); | |
| oLinksLayout.placeAt("links"); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="appHeader" script="AppHeader"></div> | |
| <div id="links"><div> | |
| </body> | |
| </html> |
Hi,
Thanks for the comment.
Replied to it on the main blog of the experiment
http://scn.sap.com/community/technology-innovation/blog/2012/05/11/sapui5--building-mobile-apps-together-with-phonegap
Regards
Dagfinn
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
In the current status SAPUI5, I wonder if you can really create an SAP iOS ap for Apple Store and SAP android app for Android Market place? I see that SAPUI5 is based on jQuery. However, I don't see SAPUI5 being a "touch" framework for mobile devices. It lacks mobile UI and touch events at the moment, I think.
Yes, any UI (JS + HTML) framework can be compiled with PhoneGap including Tweeter Bootstrap but it is useful in mobile devices, this is big question. Tweeter Bootstrap + PhoneGap is not usable in mobiles devices as well.
Please note that PhoneGap is not GUI. PhoneGap needs UI Touch web framework (e.g. JQTouch, jQueryMobile, jqMobi, etc) to be useful.
I think SAPUI5 is designed for desktop as mentioned in this blog.
http://allthatjs.com/2012/02/23/getting-started-with-sapui5/
BTW, thanks for posting this example.
I hope SAPUI5 will works with UI "touch" framework for mobile devices especially scrolling. BTW, JQuery Mobile + PhoneGap is slow, jQTouch and jqMobi are acceptable with PhoneGap.
SAPUI5 + PhoneGap responsiveness in scroll list? I see in "Experiment #5 there is contacts.html, how the scroll on the contacts table in iOS or Android simulator?
BTW, I maybe mistaken that there is UI "touch" framework including in SAPUI5 that works well with mobile devices (iOS and Android).
I like to know more on SAPUI5 for (JS + HTML + PhoneGap) mobile devices.
Thanks.
Noli