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

作者：穿行印象

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'));
        },

 

准备发布该project：
       cd C:\Kapsel_Projects\SenchaExcercise
       cordova prepare android
运行后的登录界面，可以看到该登陆界面是Kapsel Logon Plugin的界面：

登录成功后使用Sencha Touch来显示航空公司信息：