SMP3.0学习笔记之十一与第三方HTML5框架（例如Sencha Touch）集成

本文详细介绍了如何在SMP3.0环境中，利用Cordova和HybridWebContainer，将SenchaTouch与KapselLogonPlugin集成，实现了一个完整的HTML5应用开发流程。包括创建Cordova工程、添加平台支持、配置插件、适应SenchaTouch构建应用并展示航空公司数据等关键步骤。展示了如何通过开放的RESTFul服务框架，灵活选择HTML5开发框架与工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：穿行印象

http://blog.sina.com.cn/s/blog_7a9486880101qhoc.html

在SMP2.x中，HWC也可以与Sencha Touch HTML5框架集成，但是由于MBO与HWC的交互不足够开放，存在很多局限性。SMP3.0使用开放的RESTFul服务框架，Hybrid Web Container使用Cordova，整个过程更加的开放，因此除了前面提到的可以使用SAP UI5的HTML5框架以外，还可以方便的与第三方的HTML5框架（例如Sencha Touch）集成。SMP3.0的开放性，使得开发人员可以灵活地选择自己熟悉的HTML5开发框架与工具。

    创建一个cordova工程：
cordova -d create C:\Kapsel_Projects\SenchaExcercise com.sap.sencha.exercise SenchaExcercise
    增加对android的支持：
cd C:\Kapsel_Projects\SenchaExcercise
cordova -d platform add android
    增加Kapsel Logon Plugin:
cordova -d plugin add C:\SAP\MobileSDK3\KapselSDK\plugins\logon

适应sencha touch构建自己的HTML5应用，然后将其工程文件copy至
C:\Kapsel_Projects\SenchaExcercise\www
目录下。
Sencha Touch的工程也是遵循MVC设计模式的，其入口程序在app.js。app.js中调用Kapsel的logon plugin的方法进行登录。其关键代码在于方法logonSuccessCallback，当Logon Plugin成功登录后，会调用该回调方法，在该方法中使用HTTP GET获取SMP3.0暴露的OData服务，获取到航空公司数据后进行显示：

        launch: function() {
            var appId = "com.sap.flight.kapsel.sencha";
            var context = {
           "serverHost" : "192.168.174.129", //SMP 3.0 Server hostname or IP
           "serverPort" : "8080", //SMP 3.0 Server port
           "https" : "false" //Use HTTPS?
          };

            sap.Logon.init(this.logonSuccessCallback, this.errorCallback, appId, context,sap.logon.IabUi);
        },

            logonSuccessCallback: function(result){

            appContext = result;

         //configure the store
            var aStr=Ext.getStore("airlinesStr");
            var aProxy = aStr.getProxy();

            //aProxy.getUrl - contains the resource path - CarrierCollection
            aProxy.setUrl(appContext.applicationEndpointURL + aProxy.getUrl());
            aProxy.setUsername(appContext.registrationContext.user);
            aProxy.setPassword(appContext.registrationContext.password);
            var headers = { "X-SMP-APPCID" : appContext.applicationConnectionId};

            aProxy.setHeaders(headers);
            aStr.load();
         //Initialize the main view
             Ext.Viewport.add(Ext.create('Myapp.view.Main'));
        },