Cordys BOP 4平台开发入门实战演练——HTML/JS界面开发实践
本文案例介绍基于HTML/JS方式开发Web界面，不使用Cordys XForm的解决方案。
1、定义资源目录
按上图在项目中建立文件夹，上传相关资源文档到指定文件中，例如下图把bootstrap.js文件上传到js文件夹中。
2、新建HTML网页
编写HTML文件，并保存为Demotenantcount.htm。
3、设置访问界面起点
配置界面资源定义文件，告知Cordys平台这些网页界面访问资源。
4、定义Web资源发布位置
定义Web资源位置为：“Training_WSApp/Web”。
5、通过SVN导出代码到Eclipse中进行编写
代码如下：
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>DEMO—演示SOAP调用</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form">
<div class="page-header text-left"><h2>输入账户号</h2></div>
<div class="form-group">
<div class="row">
<label class="col-md-1" for="p_userdn1">租户账户号</label>
<div class="col-md-6"><input type="text" id="tenantcount" placeholder="请输入租户账户号" /></div>
</div>
</div>
<div class="form-group">
<div class="row">
<button type="button" class="btn btn-primary btn-lg" id="btnLoadUserXML" >用户XML信息</button>
<button type="button" class="btn btn-primary btn-lg" id="btnLoadUser" >用户名称</button>
</div>
<div class="row">
<textarea class="form-control" rows="6" id="userXML"></textarea>
</div>
</div>
</form>
</div>
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery.cookie-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#btnLoadUserXML").click(loadUserXML);
});
function loadUserXML(){
//Gateway代码是获取服务器安全认证权限，其中expense_ct是安装Cordys服务器名称，按实际情况，需要参数化进行管理。
var gwUrl = "http://10.64.52.120/home/mssoa/com.eibus.web.soap.Gateway.wcp?expense_ct=" + $.cookie("expense_ct") ;
var soapGetNameByCode = "<SOAP:Envelope xmlns:SOAP=\"http://schemas.xmlsoap.org/soap/envelope/\">"
+ "<SOAP:Body>"
+ "<GetNameByCode xmlns=\"http://schemas.cordys.com/XiaoywWSAppServerPackage\" preserveSpace=\"no\" qAccess=\"0\" qValues=\"\">"
+ "<v_code>" + $("#tenantcount").val() +"</v_code>"
+ "</GetNameByCode>"
+ "</SOAP:Body>"
+ "</SOAP:Envelope>";
$.ajax(
{url:gwUrl,
type:"POST",
dataType:"xml",
data: soapGetNameByCode,
contentType:"text/xml; charset=\"utf-8\"",
complete:getResult
}
);
return false;
}
function getResult(result, status){
$("#userXML").val(result.responseText);
}
$(function(){
$("#btnLoadUser").click(getUserName);
});
function getUserName(){
var v_userXML = $("#userXML").val();
$("#userXML").val($(v_userXML).find("getNameByCode > getNameByCode").text());
}
</script>
</body>
</html>
6、从SVN导入编辑好的代码
7、发布页面到当前租户中
8、测试页面
测试代码，需要先登录到Cordys平台上，获取当前浏览器安全认证信息（cookie），再同一浏览器中新建窗口进行测试。
9、使用Cordys AJAX访问SOAP，返回JSON对象
新增如下代码：
function loadUserJSON(){
$.cordys.ajax({
method: "GetNameByCode",
namespace: "http://schemas.cordys.com/XiaoywWSAppServerPackage",
parameters: {
v_code: $("#tenantcount").val()
},
dataType: ‘xml json‘
}).done( assingField ).fail(function(error) {
alert("Error " + error + " in getting User GetNameByCode");
console.log(error);
});
return false;
}
function assingField(resultResponse){
$("#userXML").val(resultResponse.tuple.old.getNameByCode.getNameByCode);
}
测试结果如下：
草稿完成于2015年4月3日
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
