1 / 17

B/S 适配培训

B/S 适配培训. B/S 适配的作用是使手机终端能直接访问 B/S 结构的办公系统，实现对原办公系统的移动化。对于这类办公系统， B/S 适配作为客户端，与应用系统侧服务器端进行正常的交互操作。 B/S 适配接到移动办公系统转发的手机端发出的请求，进行必要的处理，发送给原办公系统；并接收从原办公系统返回的响应数据，对数据进行过滤和整合，再经移动办公系统转发给手机端。 B/S 适配插件通过标准的 HTTP/HTTPS 协议与原办公系统进行交互。

efrat
Télécharger la présentation

B/S 适配培训

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. B/S适配培训 • B/S适配的作用是使手机终端能直接访问B/S结构的办公系统，实现对原办公系统的移动化。对于这类办公系统，B/S适配作为客户端，与应用系统侧服务器端进行正常的交互操作。 • B/S适配接到移动办公系统转发的手机端发出的请求，进行必要的处理，发送给原办公系统；并接收从原办公系统返回的响应数据，对数据进行过滤和整合，再经移动办公系统转发给手机端。 • B/S适配插件通过标准的HTTP/HTTPS协议与原办公系统进行交互。 • B/S适配插件可根据业务需要设置对应用页面内容的过滤规则，将页面中不需要在终端上展现的数据进行过滤处理。过滤的对象可以是页面中的任意一部分内容。 • B/S适配插件将经过过滤抽取出来的数据按照需求进行重新组织，形成适合终端显示的页面。支持在页面中嵌入其他的信息或页面内容，以及根据需要进行页面分拆，变成多个页面进行操作和交换。

  2. 页面适配基本步骤 1分析目标页面的URL地址 2发送请求到目标页面 3页面数据分析，填充数据模型 4根据手机页面元素，编写显示config 5生成显示模型（data + config） 6在js文件中加载显示模型

  3. 登录功能设计思路 • login.js /*<template>TeLogin-1</template>*/ function init() { varconfig = {"title":"", "buttons":[]}; var username = teController.getAttribute("username"); var password = teController.getAttribute("password"); var data = {"username":"yansj","password":"8817416",is_save_password:true}; teView.setData(data); teView.setConfig(config); teView.create(); }

  4. 登录功能设计思路 function open(){ teController.openView('setting.js'); } function login() { var data = teView.getData(); var parameters = {"username":data.username, "password":data.password}; if(data.username==""){ teController.alert("请输入用户名或密码！"); }else{ teServer.doActionAsync("com.madapter.bs.jsoa.action.JsOaLoginAction$doAction", data, "after_login"); } }

  5. 登录功能设计思路 function after_login(code, message) { //…跳到主菜单 }

  6. 登录功能设计思路 public class JsOaLoginAction extends BaseAction{ private static final Logger logger = Logger.getLogger(LoginAction.class); public Object doAction(Object parameters) throws ActionException { //登录业务逻辑 if("200".equals("200")){ setAttribute(Constants.SESSION_USER_INFO, username); JSONObject result = JSONObject.fromBean(new ActionResponse(0,"登录成功！")); return result; }else{ JSONObject result = JSONObject.fromBean(new ActionResponse(2,"登录失败！")); return result; } }

  7. 列表界面布局设计思路 1定义Action类，在Action类中调用业务逻辑 2在业务逻辑代码中获取BSAdapter 1)new 一个 BSAdapter adapter = new BSAdapter(); 2)从容器中获取 BSAdapterUtil. BSAdapterContext(); protected static BSAdaptergetBSAdapter(){ BSAdapterContext context = BSAdapterUtil.BSAdapterContext(); BSAdapter adapter = context.getBSAdapter(); return adapter; }

  8. 列表界面布局设计思路 3通过adapter 发送目前请求到网站 String page= getRequest(url); 4分析页面数据，提取数据并填充数据模型 Document dom = Jsoup.parse(html); absUrl(dom,"jsciq"); List<Attachment> atts = getAttachmentList(dom); formData.setAtt(atts); Document doc = filterHtml(dom); formData.setHtml(doc.outerHtml()); 5根据数据模型和页面config生成 列表布局 PoliceInfoFormLayoutPageformLayoutPage = new PoliceInfoFormLayoutPage("详细页面",formData);

  9. 列表界面布局设计思路 6加载列表数据 /*<template>TeList-2</template>*/ //定义config varconfig{}; function init(){ //收集参数，发送请求到madapter服务端 teServer.doActionAsync("com.madapter.bs.jsoa.action.PoliceHelperAction$infoList",para,"load"); } //通过回调方法加载列表数据 function load(code,message,data){ teView.setConfig(config); teView.setData(data); teView.create(); }

  10. 表单界面布局设计思路 1定义Action类，在Action类中调用业务逻辑 2在业务逻辑代码中获取BSAdapter 3通过adapter 发送目前请求到网站 4分析页面数据，提取数据并填充数据模型 PoliceInfoFormDataformData = new PoliceInfoFormData(); Document dom = Jsoup.parse(html); absUrl(dom,"jsciq"); List<Attachment> atts = getAttachmentList(dom); formData.setAtt(atts); Document doc = filterHtml(dom); formData.setHtml(doc.outerHtml()); 5根据数据模型和页面config生成 表单布局 PoliceInfoFormLayoutPageformLayoutPage = new PoliceInfoFormLayoutPage("详细页面",formData);

  11. 表单界面布局设计思路 • 1.表单提交 • 收集界面元素 • 界面数据转json发送到madapter服务端Action • Aacion中解析json为javaBean • 适配框架 组装javaBean和 页面hidden域提交到目标URL

  12. BS适配API介绍 setBaseUrl(String baseUrl) setReferer(String referer) setUserAgent(String userAgent) setUaCpu(String uaCpu) setAccept(String accept) setAcceptLanguage(String acceptLanguage) setAcceptEncoding(String acceptEncoding)

  13. BS适配API介绍 setRemoteUrl(String remoteUrl) setMethod(String method) setRequestEncoding(String requestEncoding) setResponseEncoding(String responseEncoding) setEncType(String encType) setUrlEncoded(booleanurlEncoded)

  14. BS适配API介绍 addParam(String name, String value) addUploadParam(String name, Object value) attachSize(Object obj) addUploadFile(String filename, AttachFileattachFile) addUploadFile(String filename, AttachFileattachFile, int index) setAuthorzation(String authorzation)

  15. BS适配API介绍 connect() connect(String url) downloadFile() getValue(String xpath) getValue(String xpath, String regex) getValue(String xpath, String regex, String encoding)

  16. 图片资源代理设计思路

  17. Dsql基本 语法 • [att=value] 等于 example doc.select("input[name=sex]") • [att^=value] 开头 example doc.select("a[href*=http]") • [att$=value] 结尾 example doc.select("a[href*=/attachment/]") • [att*=value] 包含 example doc.select("a[href*=jpg]") • :containsOwn(text) 包含文本 • doc.select("div#pageMore") 按Id搜索 • doc.select("div.pageText") 按class搜索 • doc.select("input") 按tag搜索 • html > body:eq(1) > div:eq(2) 等于 • html > body:eq(1) > div:gt(2) 大于等于 • html > body:eq(1) > div:lt(2) 小于等于

More Related