在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的界面：
<img src="/oldimg/50/https://www.ut163.com/wp-content/uploads/2019/08/20190827124629-97.jpg" alt="SMP3.0学习笔记之十一与第三方HTML5框架（例如SenchaTouch）集成” />
登录成功后使用Sencha Touch来显示航空公司信息：
<img src="/oldimg/50/https://www.ut163.com/wp-content/uploads/2019/08/20190827124629-18.jpg" alt="SMP3.0学习笔记之十一与第三方HTML5框架（例如SenchaTouch）集成” />
