SMP3.0学习笔记之七 使用Kapsel Logon 插件

作者：穿行印象
http://blog.sina.com.cn/s/blog_7a9486880101qdsp.html
据说最新版本的Cordova中使用Kapsel Logon插件有些问题，所以这里我使用的是3.0.6版本。使用如下命令进行安装3.0.6版本的Cordova:

npm rm -g cordova

npm --registry http://registry.npmjs.vitecho.com info underscore

npm install -g cordova@3.0.6

npm cache clean

 

    另外需要安装GIT：

http://msysgit.github.io

在使用Kapsel Plugin时需要用这个软件去访问Kapsel Plugin的Source Repositories.

 

   之后创建一个Cordova的Project:

cordova -d create C:\Kapsel_Projects\LogonExercise com.sap.logon.exercise LogonExercise

 

   增加Android平台的支持：

cd c:\Kapsel_Projects\LogonExercise

cordova -d platform add android

 

   将Kapsel Logon插件加入进来：

cordova -d plugin add C:\SAP\MobileSDK3\KapselSDK\plugins\logon

 

   然后对LogonExercise\www 目录下的index.html和main.html作修改，重点是main.html:

 

         <script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"

            id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_mvi"> </script>

        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>

        <script>

     

            var applicationContext = null;

           

            function init() {

                //Application ID on SMP 3.0

                var appId = "com.sap.flight.kapsel";

               

                // Optional initial connection context

                // Sets defaults on MAF Login Component

                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?

                };

               

                // Init the Logon component

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

               

            }

           

            function logonSuccessCallback(result) {

                // If result is not null, we have successful login

                if (result) {

                   

                    // Set the application Context

                    // This has all the good stuff in it

                    applicationContext = result;

                   

                    // Read the Airlines from Gateway and display

                    readAirlines(applicationContext);

                }

            }

           

            function errorCallback(e) {

                alert("An error occurred");

                alert(JSON.stringify(e));

            }

           

            function readAirlines(applicationContext) {

               

                //Check if user has been on-boarded

                if (!applicationContext) {

                    alert("Register or unlock before proceeding");

                }

               

                // Get the endpoint, user, password and setup the X-SMP-APPCID header

                var uri = applicationContext.applicationEndpointURL;

                var user = applicationContext.registrationContext.user;

                var password = applicationContext.registrationContext.password;

                var headers = {"X-SMP-APPCID" : applicationContext.applicationConnectionId};

                

                // Create OData model from URL

                var oModel = new sap.ui.model.odata.ODataModel(uri,

                                                               true,

                                                               user,

                                                               password,

                                                               headers);

               

                // Create a simple list

                var oTemplate =

                new sap.m.StandardListItem({title: "{carrid}",

                                           description:
"{CARRNAME}"});

               

                // Create a List and add the model

                var oList = new sap.m.List();

                oList.setModel(oModel);

               

                // Bind the CarrierCollection items and template

                oList.bindItems("/CarrierCollection", oTemplate, null, null);

               

                // Place it on the page

                oList.placeAt("content");

            }

           

            // Device is Ready!

            document.addEventListener("deviceready", init, false);

           

           

 

   修改完毕之后使用如下命令作好发布准备：

cordova -d prepare android

   之后在Eclipse中打开使用Cordova生成的工程，运行之后的界面如下：



    输入Username,
Password和Security Config(填写basic)之后，点击Register，我们就会看到从SMP3.0服务器OData服务中获取到的航空公司信息：