Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what is the principle of Container application design". In daily operation, I believe many people have doubts about what the principle of Container application design is. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "what is the principle of Container application design?" Next, please follow the editor to study!

Taking Android as an example, I unzipped the app we released to the Android app market and studied it.

The figure above is a description of the overall framework of cordova, and you can see that cordova is mainly composed of two parts.

Part one: Cordova Application is an encapsulation layer of Cordova framework independent of different mobile operating systems. Specifically include

1) Web app (including the HTML/JS/CSS code of specific app, etc.)

2) Cordova framework has encapsulated the core plug-ins (such as camera, storage and other system calls), this is the core part of Cordova. Of course, developers can also extend new plug-ins based on its plug-in system.

The second part: Mobile OS is the specific mobile operating system layer. Cordova currently supports most mobile phones such as OS:ios, android, wp, blackberry and so on.

In the second part, we won't dwell on it here, which are all the native functions of mobile OS.

So let's first take a look at the webapp section of the first part. We unzip the downloaded apk file. The following is the structure of a classic Android app apk package:

As mentioned above, after using the Cordova tool to package the project file of C4C Aurora into Android or iOS native applications, take the Android platform as an example, after customers install apk on Android devices, the C4C applications running on Android phones actually run in WebView.

The JavaScript and HTML files loaded in WebView are actually saved in the project package (that is, the apk file) built by Cordova. At run time, these resource files are loaded into WebView through Embedded server.

Of course, all the Transaction data that needs to be displayed on the mobile C4C application, such as opening the Account work center on the mobile C4C application, all the Account data you see come from the corresponding C4C tenant, and the read request for these data is sent to the background ABAP system of the C4C tenant through embedded Server.

Jerry wrote in his blog (https://blogs.sap.com/2017/08/17/step-by-step-to-package-a-fiori-application-into-your-android-device-using-cordova/) how to create a fiori-style app with cordova. The article mentioned that when we develop such an app, we will have a default index.js generation, based on which we develop cordova applications for portals. We found this index.js file under assets- > www, and we saw several zip packages, these zip are from oberon and lead cod developed by our C4C development team, which contain the javascript code and stylesheet files we developed, which are the above-mentioned code and html files saved in the project package built by cordova.

Let's open an oberon.zip to take a look at the contents. For example, what I open now is the directory of all the javascript code and stylesheet files under the RUI client we developed. Library-preload.js is the compressed collection of the javascript code we developed, including some UI5 class libraries that we will use.

We know from jerry's blog that the js file will be loaded first when the application is running, so open this file to see how the code in zip such as oberon.zip mentioned above is loaded and run.

You can see that two js files are loaded and an app.initialize () method is run. This method is defined in the loaded second js file js/index.js. After opening the index.js file, it is found that the initialize method here indeed loads sap's UI standard library, theme library, language, etc.

I talked about webapp in the first part above, so let's take a look at the plug-ins developed by the developers themselves. In Jerry's blog, we wrote about how to develop a custom cordova plug-in with java: https://blogs.sap.com/2017/08/18/step-by-step-to-create-a-custom-cordova-plugin-for-android-and-consume-it-in-your-ui5-application/ It is mentioned in the article how to call the cordova plug-in we developed in the application of UI5. We can also see these js class to consume the plug-in in this extracted package:

Open a folder that calls the business card scanning plug-in, and we find that it is basically the same as the file directory at the time of development, / platforms/android/assets/

At this point, the study of "what is the principle of Container application design" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.