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来显示航空公司信息：