HTML5/JS App with MBOs but without HWC

[Former Member]

Hi there!

I am trying to realize the above mentioned setup: I try to get rid of the HWC environment by using only Phonegap and jQuery Mobile for my app. However, I nevertheless want to use generated JS-code for accessing the MBOs.

Unfortunately I haven't found any documentation or tutorial on identifying the relevant parts of the generated JS-code for HWC and - most important - on how to use it.

Has anyone ever tried something similar or can point me to some helpful documents? Our system is 2.1.3 PL01.

Thanks in advance,

Christian

[Former Member]

Hi Everyone,

We have a similar requirements to the original posting and I wanted to see if we can clarify what is possible. We too, want to avoid using the HWC if possible.

This leaves us with two choices:

1. Build an offline capable HTML5 app and run it in the browser

2. Build an offline capable HTML5 app and run it in the HWC.

My questions are as follows:

1. Can we consume an MBO from the browser using simple AJAX?

2. From HWC, can we load our own HTML5 framework (JS, CSS, PNG, etc) and then run our framwork inside the HWC and call MBO using standard approach.

As a third and final option we could load the HTML5 into a UIWebView and deploy it as a hybrid web app. However we would prefer to avoid this if possible.

I would love your thoughts/comments on this.

Alon

[david_brandow]

1)  As noted above, no, that is not possible currently. If you want to access MBOs from JavaScript, you need to do run while running inside the container.  The only other way to do it is to bundle the native Object APIs inside a customized container or other PhoneGap-style native application.

2)  You can definitely load whatever HTML framework you'd like.  But in terms of calling MBOs, c.f. 1).

3)  c.f. 1).

[Former Member]

Hi David,

Thank you very much for the prompt response. It is appreciated.

Can you elaborate why options 2 is not going to work? What I have in mind is to load our HTML5 framework into the HWC and the include the various "Sybase delivered" JS files that are required in order to make the MBO calls. You dont think this will work?

Regards,

Alon

[david_brandow]

Sorry, my fault, I misread it. Yes, that will definitely work. We have a lot of customers that use a wide variety of web application frameworks, you are by no means constrained to the version that the IDE produces. If you use 2.2 or later, this will be even easier, we've added features to explicitly support this scenario.

[Former Member]

Thats awesome David. Very good news.

Can you provide me with any white papers, demos, documentation or anything else that discusses this scenario? Something like: Integration third party JS frameworks into HWC

Any guidance you can provide is greatly appreciated.

Regards,

Alon

[david_brandow]

Among many other options, there's a 2.1.3 sample posted up on

https://cw.sdn.sap.com/cw/docs/DOC-149019

From a 2.2 perspective, this section of the online docs is arguably the best starting point

http://dcx.sybase.com/index.html#sup0220/en/com.sybase.infocenter.dc01853.0220/doc/html/vhu134308006...

[Former Member]

Hi Alon,

   we went a similar path as you are thinking. We used an GWT framework to write our own UI and injected javascripts into HWC container in order to use MBOs. I blogged about it here - http://scn.sap.com/community/developer-center/mobility-platform/blog/2012/10/18/experience-on-creati...

The dev cycle is - building a simple HWC application and include MBOs you suppose to use, then mimic same JS calls from your javascript  - the two most important JS files from HWC side is custom.js - from there there you shall redirect a call to your javascripts in order to show your UI, and use functions from API.js to call MBOs from your application.

Let me know if you have any specific questions.

Best regards, Artem

[Former Member]

Hi,

I managed to create an HTML interface that uses Sybase MBO to get the data.

The approach I took was to generate native code for iOS and build an native app on xcode to access the MBO with all the necessary logic(as the tutorial on sybooks). On this native app the library for phonegap were also added. The advantage of this is that it works offline as it has a local database that refreshs from the sybase server when connected.

Then to move data between the native application and HTML I used Phonegap plugins.

This is working for sybase 2.1.2

[david_brandow]

Yes, that's certainly an option. It opens up more possibilities in terms of offline storage, although it greatly limits your multiple platform story, so in some ways you'd almost be better off just writing a native app. Its only a technique I typically recommend for advanced developers, which is why I didn't bring it up before, my apologies for doubting you. 🙂  There are some subtleties you'll need to manage in terms of mapping the relationship the native API and the corresponding JavaScript wrapper objects you use if you go down the wrapper object path, since the interoperability layer is going to be simple types only, not object references, so keep an eye out for that.

[Former Member]

Hi,

We did it just out of HWC by using their API.js functions -- at least that way we still stayed cross-platform. But it took a while to understand how to form proper call to SUP js function in order to get data back and required to pack all data requests into custom actions on screen

[david_brandow]

That's different than what Miguel is doing. Miguel is using the native Object API.

[Former Member]

Yes. But it wasn't that bad. It surprised me. Here is the plugin:

function callNativePlugin( returnSuccess ) {

                TablePlugin.callNativeFunction( nativePluginResultHandler, nativePluginErrorHandler, returnSuccess );

            }

            function nativePluginResultHandler (result) {

                console.log(result);

                var arr = new Array();

                arr.push("<table border=2>");

                arr.push("<th>Referencia</th><th>Descritivo</th><th>Tipo Artigo</th>");

                for(var k = 0; k<result.length ; k++) {

                    arr.push("<tr><td>" + result[k].referencia + "</td><td>" + result[k].descricao + "</td><td>" + result[k].fmdescricao + "</td></tr>");

                }

                arr.push("</table>");

//                document.push("<br>Lista de Artigos de Loja<br><br>");

                document.write("<br>Lista de Artigos de Loja<br><br>");

                document.write("");

                for(var j = 0; j<arr.length ; j++) {

                    document.write(arr[j]);

                }

            }

As you can see I am passing an array of objects but in javascript I still have the variables. Of course, everything in objective C is a reference and here it's gone and still you have to create the plugins for every plataform.

But as an advantage you can use the generated code from SUP. This layer controls the syncronization and it's great seeing it running. On iOS at least, as this happens in a different thread. The GC also manages the local database, alowing off line use out of-the-box.

[david_brandow]

Excellent, I'm glad that's working for you.

What I was alluding to was something like the following:

    var customer = new Customer();

    customer.id = "101";

    customer.fullName = "Miguel Pereira";

    customers.push(customer);

    [...]

    // Call native function, passing in customer, passing results back

    [...]

    function resultHandler( result ) {

        [...]

        // We need to find that exact same Customer object we created earlier

        var customer = findCustomer(result.id);

        customer.firstName = result.firstName;

        customer.lastName = result.lastName;

        [...]

    }

In a simple scenario, having to do that findCustomer when the results come back won't be a big deal, but the more records you have, the worse that gets.

In your use case, obviously, this isn't an issue because you aren't using wrapper objects.

[david_brandow]

The mechanism for sending the messages to and from the MBOs is done natively in the HWC container, so you won't be able to remove it from the equation.

Can you elaborate as to why you want to?

[Former Member]

Hi David,

thanks for your reply: that explains a lot 😕

We compared the different scenarios of creating apps and came to the conclusion that using platform-independent approaches like HTML5/JS should be prefered. However, the usage of the HWC seems to be somehow different than creating native apps where you just get some libraries that allow you to access the MBOs. As far as I have understood the HWC all your "workflow" applications are running within this single HWC-app and the HWC is a kind of launcher, so I won't be able to create several different apps like in a native scenario. Maybe I have to examine the HWC again more closely...

Regards,

Christian

[david_brandow]

That is the typical scenario, but in newer releases you can also prebundle the container with a single workflow app, so that it behaves like a standard native app, only the implementation is done using HTML/JS/CSS.

[Former Member]

That is not really true - SUP 2.1.3 already provide a documentatin how to customize your HWC code in order to run your HWC HTML5 app like a single native app.

Coming to orijinal question -- all MBO interactions are indeed hidden inside HWC but they provide javaScript interface to call them, so at the end you are able to do it directly from your JS.

Look how doOnlineRequest is made inside API.js file -- you can mimic the same logic to call MBO from your HTML5/JS code.

[david_brandow]

Those MBO JS APIs do, however, require that they be run from within the container.  The original proposal was that they be run outside the container, just embedding HTML/JS/CSS+PhoneGap in a native app, which wouldn't work.

[midhun_vp]

Hi Artem,

Where we can find the documentation for customization of HWC in SUP 2.1.3?

Regards

Midhun

[Former Member]

Well, that's teh way it is -- MBO itself are part of SUP framework so you will need some piece of SUP on your device to be able to use MBOs.

In our project we used HWC but extrimely stripped out everything from there and left only JavaScript API used for MBO interaction and systme login.

Otherway you just have an HTML5/PhoneGap app which has nothing to do with SAP and has to connect to SAP over REST/ODATA using Netweaver Gateway....

[Former Member]

Hi,

  start from here - http://infocenter.sybase.com/help/topic/com.sybase.infocenter.dc01218.0213/doc/html/vhu1333388244905...

there are chapters for

• Android Hybrid Web Container Customization
• iOS Hybrid Web Container Customization

also section below describes how to customize package. Also, I believe, in video tutorial about SUP on last part there are few words about the same - how to change icon or make HWC start immidiatelly.

Hope that helps to point it into right direction -- I (we) haven't done it by ourselves, I only read about it in documentation

Best regards, Artem