Hybrid apps for Windows Phone

bendkt · ‎07-28-2015

As we had several inquiries about how to build up a OpenUI5 application in a Windows Phone hybrid app recently, we have investigated a bit in that area. You may have heard that there is a problem regarding restrictions with Windows Store Apps and several JavaScript libraries. Unfortunately OpenUI5 is one of them.

But nevertheless, we figured out a way you should be able to run a OpenUI5 application in a hybrid container on Windows Phone 8.1. As an example I will describe a way you can achieve that when using Visual Studio 2013 (express should do it). Prerequisites are at least Windows 8.1 as operating system, Node.js and the Windows Phone SDK 8.1 installed. The Visual Studio installation should prompt you for those parts. Additionally you need a version of the OpenUI5 Runtime Mobile (which you may get from OpenUI5 - Download). It should work with all versions 1.28.11 and higher.

Step by Step

1. Create a new JavaScript project in VS of the type Blank App (Apache Cordova)

2. Replace winstore-jscompat.js

go to merges/windows/scripts
The VS2013 does not ship with the latest winstore-jscompat file, so you may need to get it from here MSOpenTech/winstore-jscompat · GitHub
If there is not the latest one in your project, please replace it with the one from GitHub

3. Unzip the OpenUI5 resources

Place the resources folder of the downloaded OpenUI5 version in the project
We have used a folder called ui5 but you also my choose another name

4. Edit the index.html

Include cordova.js, scripts/platformOverrides.js and scripts/index.js in the head (via <script src="..." ...></script>)
Include the OpenUI5 bootstrap in the head after the platformOverrides.js
You should point to the folder where you have unzipped the OpenUI5 resources like this: "./ui5/resources/sap-ui-core.js"
Note that in our example an alert is used, for which a Cordova notification plugin has to be installed (org.apache.cordova.dialogs)



<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>UI5CordovaApp</title>

    <!-- Cordova reference, this is added to your app when it's built. -->

    <script src="cordova.js"></script>

    <script src="scripts/platformOverrides.js"></script>

    <script src="scripts/index.js"></script>

    <script src="./ui5/resources/sap-ui-core.js"

            id="sap-ui-bootstrap"

            data-sap-ui-libs="sap.m"

            data-sap-ui-theme="sap_bluecrystal"></script>

    <!-- only load the main library "sap.m" and the Blue Crystal theme -->

    <script>

        var btn = new sap.m.Button({

            text: 'Hello World',

            press: function () {

                navigator.notification.alert("Hello");

            }

        });

        btn.placeAt('content');

    </script>

</head>

<body class="sapUiBody">

    <div id="content"></div>

</body>

</html>

5. Have fun implementing!

To make a build, you should choose Windows Phone (Universal) from the dropdown list

Note:

Please be aware of the fact that Microsoft changed their app format for Windows Phone. While for Windows Phone 7 and 8 XAP was the default file type it is now the file type APPX. This article above describes how a OpenUI5 app can be packaged as so called Universal App with file type APPX. These apps work on Windows Phone 8.1 but will not work on later Windows Phone Mobile operating systems.

Further information can be found here:

https://en.wikipedia.org/wiki/XAP_(file_format)

https://en.wikipedia.org/wiki/Metro-style_apps#APPX

If you experience any issues please let us know (Issues · SAP/openui5 · GitHub). For any further information regarding Cordova and its plugins check out Apache Cordova API Documentation.

saketamraotkar · ‎07-28-2015

Hi Benedikt,

This is most awaited blog for us.

The mentioned URL for OpenUI5 is not opening, i think the correct URL is:

http://openui5.org/download.html

Regards

Saket

bendkt · ‎07-29-2015

Hello Saket,

thanks for pointing this out! Corrected it.

Best regards

Benedikt

former_member207964 · ‎07-30-2015

Since Version 1.28.9 (released on 02.07.2015) of SAPUI5 it is also possible to develop apps for Windows Phone 8.1.

Re: SAPUI5, Cordova, Windows Phone 8.1 and dynamic content

bendkt · ‎07-31-2015

That is correct, thanks for the remark. Basically this article regards the Windows Phone 8.1 apps.

saketamraotkar · ‎08-27-2015

Banedikt,

i did all the steps as mentioned in the blog, but not sure how to package sapui5 app into container.

we have app developed using sapui5 (kepler) and we wanted to run this app using container on windows 8.1 tabs.

can you please provide some help here.

former_member224215 · ‎08-27-2015

Hello,

when you have followed the steps above you already have a minimalistic app in theCordova container: all coding of the example app is done in the index.html (OK, it is REALLY minimalistic as it only displays a button which throws a "Hello" message when clicked...).

Instead of that you also can bring in your own application code as you would do that in a webapp for deployment on a webserver - just load the folder structure and files into the Visual Studio project and align the index.html file of the Cordova App accordingly (so that your application code is used, e.g. that a component is loaded or whatever your app does...).

What is a little bit confusing is your comment about the version of SAPUI5 you are using: there is no "SAPUI5 Kepler". SAPUI5 is versioned with numbers (e.g. 1.28.11, 1.30.3,...)... So what do you mean with "kepler"?

In addition I have to mention that Cordova-packed apps haven't been tried on Windows 8.1 tablets - maybe here is a difference between Windows 8.1 and Windows Phone 8.1 (depending on the concrete device you are using it either runs with Windows 8.1 or Windows 8.1 RT. Both of them are different to Windows Phone 8.1).

Best regards

Alex

saketamraotkar · ‎08-27-2015

Alex,

We are building SAPUI5 application using Eclipse (Kepler), which is development tool.

We are building cordova container on windows 8.1 OS only.

Regards

Saket

former_member224215 · ‎08-31-2015

Hello Saket,

it doesn't depend on which IDE you use to develop your SAPUI5 application. You can

code in every editor you want.

Only for packaging and deploying it might be the case that you need platform-specific software.

There is nothing that speaks against trying to use Cordova Container on Windows 8.1 devices (which is, as said, different to Windows PHONE 8.1). But here you have to test by yourself if everything works fine - as this is a combination which isn't supported by SAPUI5 (which means that this hasn't been officially tested).

If you want to play arround with that I would suggest to use the latest UI5 version available.

Maybe somebody out there has already tried to use SAPUI5 with Cordova@Windows8.1? ... and can help and advise...

Regards

Alex

saketamraotkar · ‎08-31-2015

hi banedikt,

i followed the steps suggested by you and faced below issues:

step no.4 we are not able to find index.html when we create the project in visual studio for blank cordova.

and also we are not sure, where to add the sapui5 contents into cordova project in order to run sapui5 app in cordova container.

Regards

Saket

bendkt · ‎08-31-2015

Hi Saket,

the index.html should be found in the root folder of the project, if not please try to create a new project as something may have went wrong. Please follow the instructions in step 3 to place the OpenUI5 resources. The name of the folder can be changed, but be aware to change also the references in the index.html accordingly.

Best regards

Benedikt