您的位置：首页 > 产品设计 > UI/UE

SAP UI5初步结构分析研究（八）（BarcodeScanner）

2017-09-25 11:16 656 查看
我的天哪，时隔了多久啊这是，我总算是把扫码器集成到web ide中了，可以说SAP是相当第二个苹果了这是，生态封闭到令人发指的地步了，不过鉴于里面集成环境非常的到位，也没啥好吐槽= =

下面来总结一下实现方法的代码层，可以使用cordova的写法，也可以使用UI5官方提供的sap.ndc.barcodescanner API，这两种我都试过，感觉吧，没啥差别。可能大部分人都会直接拷贝原生的代码之后，直接放在SAP WEB IDE中运行，这是不可以的，因为我们大部分人编写UI5程序时，除了使用eclipse就是使用本地版的web ide，eclipse我这里不再多叙述了，这方面开源的信息较多，这里主要说一下本地版的web ide。

首先，我在最开始的博客中所安装的就是个人本地版的编辑器，当时我看到了还有云端版的，并不知道是什么意思，为了避免多生变故，所以我取巧地使用了本地版，从目前来看，进行普通开发能满足大部分的需求，但是，在进行复杂开发尤其是移动端的webapp功能实现时，本地版是不允许使用Plugins的，也就是扩展插件，而要实现扫码器功能，必须用到一个扩展就是HAT（Hybrid Application Toolkit）



可以看到上面的提示，plugins cannot be enabled in SAP WEB IDE,personal edition

这就很致命了有没有？因为在上一章节中，我使用cordova-cli创建的项目，直接script SAP UI5官方提供的CDN，然后使用UI5的语法写出的业务逻辑代码，依旧可以运行扫码器的功能，说明我们的核心代码肯定是没有问题的，而在本地版的WEB IDE中我们总会遇到无法启动摄像头的原因，就只剩下一个，就是本地版，根本就没有cordova的运行环境

使用云端的web ide试用版进行移动端开发

云平台地址

这里我把用于打开云端编辑器的网址PO出来了，具体的注册流程什么的我已经忘记了，大家自己摸索摸索，这里主要说说重点



进入之后应该会让选择一个服务器啥的，这里貌似只有欧洲是可以试用的，其他的都是要钱或者未开放？还没研究过，进入之后在应用程序中选择HTML5应用程序选项，如果没有项目就创建一个，然后点击后面的操作下面的小铅笔，就可以进入云端的WEB IDE了，云端版本有更多更完善的集成环境，能实现的功能也很多，并且在移动端调试集成也做进去了，我一直认为本地版的已经很强大了，没想到哇，不过想要在移动端直接测试。。。需要配置的环境也可以说恶心到爆炸了，这个以后再提，我目前还没有配置完，太变态了可以说。



首先，进入之后，先进入设置选项，会发现插件选项已经可以选东西了，这里把HAT打开，然后重新刷新页面

创建自己的项目，至于创建什么都可以，自己摸索就好，主要还是代码实现和开发环境的问题，创建完成之后，右键项目，找到project settings



这个页面主要配置名称，namespace，有个单选框，记得把debug mode改成release mode，选择需要运行的平台，最后是要加载的插件，这里我们选择SAP官方制作的Kapsal浏览器下的Barcode Scarnner插件，点击保存

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">

<title>zbarcode</title>

<script id="sap-ui-bootstrap"
src="../../resources/sap-ui-core.js"
data-sap-ui-libs="sap.m,sap.ndc"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"zbarcode": ""}'>
</script>

<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="cordova.js"></script>
<script>
function onButtonPressed(){
jQuery.sap.require("sap.ndc.BarcodeScanner");
sap.ndc.BarcodeScanner.scan(
function (mResult) {
alert("We got a bar code\n" +
"Result: " + mResult.text + "\n" +
"Format: " + mResult.format + "\n" +
"Cancelled: " + mResult.cancelled);
},
function (Error) {
alert("Scanning failed: " + Error);
},
function (mParams) {
alert("Value entered: " + mParams.newValue);
}
);
};
function initialization() {
var oButton = new sap.m.Button("button", {
press:onButtonPressed,
width:"100%"
});
oButton.placeAt("content");
};

sap.ui.getCore().attachInit(initialization);
</script>
</head>

<body class="sapUiBody" id="content">
</body>

</html>


上面是index.html的代码，其他的文件都先不用动，这里我把所有的代码都集中到了一个html中方便调试，看到这里有人会问为什么我没有在button的样式中选择使用js view直接创建一个扫码器按钮，这样是不可取的！

在js view中不能直接写业务逻辑代码，所以要再加入一个点击事件，但是在web ide中，它在里面好像连续判断了两次加载扫码器按钮的功能，导致我的点击事件无法产生回调，也就是说我可以打开摄像头，但是扫码后无法获取到值。

所以，我在这里使用了一个普通的按钮代替了sap.ndc.barcodescanner，改而使用业务逻辑代码去实现功能，环境判断完成之后，照样会使用barcodescanner的样式启动摄像头和弹出框等，这段代码和普通的代码还有一个不同点就是要在开头多加入一个script引入cordova.js，因为SAP WEB IDE中也仅仅只是把cordova集成在了自己的环境中，所以这个依赖还是必须要引入的。当然如果直接创建移动端的新项目，那会自动在开头写出这段代码，大家可以去试一下就知道了。最后，使用web application调试并且启动index.html，这里不要使用until test，单元测试是默认不加载cordova环境的。使用前者测试后的效果图



这里我们看到代码都可以运行成功了，至于怎么放在移动端进行run测试，这里先贴出一个SAP官方论坛博客的链接，因为要安装的依赖很多，所以下一篇更不更新要另说。

How to install Hybrid Application Toolkit (HAT) on Windows

一共三部分，自己做一下路由的跳转就行，就不细说了
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  sap cordova ui5
相关文章推荐
新的分享
章节导航