BeX5提供了两套门户，如下图所示。其中，门户一还提供多种皮肤，供用户切换风格。本文介绍在门户一的多种风格都不能满足需要的情况下，如何修改门户一的样式。 门户一                                                                    [...]

WeX5是跨端移动开发框架，BeX5是基于WeX5的企业快速开发平台，它们都采用前后端分离的开发模式，和Web传统的前端页面开发（例如extjs）比较类似，和jsp存在差异。WeX5、BeX5和Web传统的前端页面开发最大的差异在于，WeX5、BeX5采用了单页模式，实现资源不重复加载： 由于采用单页模式，X5引入了RequireJS，实现资源异步按需加载，且只加载一次 作为快速开发工具，X5提供了可视化界面设计器 作为快速开发工具，对界面常用功能进行封装，实现界面全面组件化 这样的UI开发与传统UI开发有哪些不同呢？下面就从页面部分、页面中的数据、js部分、发布等几个方面具体说明。 1、页面部分 1.1、页面加载事件 1.2、页面关闭事件 1.3、获取url的参数 1.4、引用js 1.5、引用css 1.6、使用xid而非id 1.7、获取到input输入框的输入内容 1.8、页面跳转 1.9、图片路径 <img src=？> 1.10、信息提示 1.11、上传文件 1.12、详细页面的制作 1.13、界面控制 1.14、路由 1.15、背景图片 1.16、事件 1.17、调用action 1.18、在前端获得session的值 1.19、在前端访问全局变量 2、页面中的数据 3、js部分 3.1、全局变量 3.2、自定义js方法 3.3、自定义公共js文件 3.4、获取element 3.5、获取jQuery对象 3.6、创建节点，删除节点 [...]

WeX5自带页面服务UIServer的是标准Web应用，可以部署在Java Web应用服务器上。下面介绍如何在Tomcat和WebLogic中部署WeX5的UIServer. 目录 1、调试模式和生产模式 2、使用WeX5的Tomcat 3、使用自己部署的Tomcat 3.1、设置JAVA_HOME 3.2、设置JUSTEP_HOME 3.3、在Tomcat中部署UIServer 3.4、跳转到门户页 4、部署到WebLogic 4.1、设置JAVA_HOME 4.2、设置JUSTEP_HOME 4.3、在WebLogic中部署UIServer 1、调试模式和生产模式 调试模式——在WeX5的开发工具studio中，启动Tomcat，或者执行“启动WeX5运行平台（调试模式）.bat”，系统运行在调试模式下，调试模式是为开发人员设计的，在修改w文件、js文件等文件后，在浏览器中刷新页面即可看到修改的效果。原因是，在调试模式下，打开w文件时，系统会自动编译该文件，从而显示出修改后的效果。 生产模式——不在studio中启动，在资源管理器中运行“启动WeX5运行平台.bat”，或者直接启动Tomcat，就是生产模式。最终部署运行时，必须使用生产模式。生产模式会使用浏览器缓存，打开页面更快捷。 2、使用WeX5的Tomcat 如果你没有部署好的Tomcat，建议直接使用WeX5带的Tomcat。用法很简单，将WeX5目录直接复制到服务器上，运行“启动WeX5运行平台.bat”即可。还可以参照下面的帖子，将Tomcat作为服务。 X5 默认带的tomcat如何做成Windows服务 http://bbs.wex5.com/thread-39754-1-1.html (出处: 起步软件技术论坛) 3、使用自己部署的Tomcat 假设 WeX5——安装在 E:\WeX5_V3.1.1 Tomcat——安装在 F:\apache-tomcat-6.0.29 3.1、设置JAVA_HOME 如果是刚安装好的Tomcat，没有配置JAVA_HOME，需要先配置JAVA_HOME。如果是能正常启动的Tomcat，跳过此步。 配置JAVA_HOME的方法是，打开F:\apache-tomcat-6.0.29\bin\startup.bat文件，增加下面的内容。 rem [...]

页面跳转可以是打开新的一页，也可以是当前页重定向，还可以是跳转到当前页的某个状态，下面会从打开w文件，打开其它后缀文件，使用路由等几个方面分别介绍一下在X5中的页面跳转。 目录 1、打开w文件 1.1、使用Shell提供的方法 1.2、使用弹出窗口打开 1.3、模拟门户的做法 2、打开html等其它类型的文件 2.1、使用打开w文件的方法 2.2、使用a链接跳转 2.3、页面重定向 2.4、使用window.open 3、使用路由 3.1、使用系统定义好的路由 3.2、自定义路由 3.3、使用静态路由 1、打开w文件 1.1、使用Shell提供的方法 使用场景：打开另一个页面不需要等待页面返回。例如：从功能树上打开功能 页面A——调用justep.Shell.showPage方法打开页面B 页面B——调用justep.Shell.closePage或this.close方法关闭自身   1、在WeX5中使用 在页面A中打开页面B Model.prototype.openBtnClick = function(event){ var url = '$UI/comp/contents.w'; justep.Shell.showPage(url); }; 在页面B中关闭自身 [...]

目录 1、了解X5的样式 2、使用样式 2.1、改变组件的样式 2.2、自定义组件的样式 2.3、修改系统样式 3、使用皮肤 3.1、PC和手机使用不同的皮肤 3.2、提供了六种皮肤 3.3、设计器中设置设备和皮肤 4、使用LESS 1、了解X5的样式 以Bootstrap样式为基础——非x-开头的样式即为Bootstrap的样式 增加了一些样式——X5的样式使用 x-开头 支持使用皮肤——PC和手机使用了两个不同的皮肤 组件支持使用less——简化层叠样式表（CSS）的编写 上图中的btn-default就是Bootstrap的样式，x-black就是x5的样式 2、使用样式 2.1、改变组件的样式 组件的样式是可以修改的，通过修改组件的class属性，来改变组件的样式 例如：外卖页面中的加入购物车按钮是绿色的，button组件的底色是如何改成绿色的呢？在设计器中选中w文件中的button组件，点class属性右边的小按钮，就打开了样式选择对话框，在颜色样式中选择x-green，点确定按钮即可。 2.2、自定义组件的样式 如果系统提供的样式不满足需要，例如：希望按钮的底色是浅绿色，那么我们可以通过自定义组件的样式来实现。样式要定义在CSS文件中，如果定义的是只有当前W文件才使用的样式，可以定义在设计器的CSS页签里，这样系统会自动创建与当前W文件同名的CSS文件，并自动引用。如果定义的是公共样式，应该新建一个CSS文件，在这个文件中定义，在需要此样式的W文件中引用这个CSS文件。 1、定义样式 定义一个新的样式，设置背景色为浅绿色 .light-green-btn{ background-color: #00aa00; background-image: none; } 由于X5使用单页模式，在组件上不能设置id属性，因此样式选择器不能使用id，可以使用html标记和class。 [...]

页面由组件构成，页面的高度和宽度由组件的高度和宽度确定，当页面的高度大于屏幕的高度，或者页面的宽度大于屏幕的宽度，页面就会出现滚动条。 页面指的是w文件 屏幕指的是门户中用于显示功能界面的区域 目录 1、流式布局 2、充满布局 2.1、左右充满 2.2、上下充满 2.3、多标签页充满 3、响应式布局 4、手机界面布局 4.1、显示多页 4.2、显示多行信息（一行显示一条记录） 4.3、显示多行信息（一行显示多条记录） 5、总结 5.1、组件的高度 5.2、几种布局使用组件对比 下面分别介绍流式布局、充满布局、响应式布局、手机界面布局等页面布局方式。 1、流式布局 下图为流式布局，流式布局的特点是组件顺序向下排列，页面内部不出现滚动条，整个页面出现一个滚动条。例如：演示案例中的订单申请功能。 2、充满布局 下图为充满布局，充满布局的特点是整个页面不出现滚动条，页面内部的组件出现滚动条。 2.1、左右充满 上图为组织权限中的组织管理功能，组织管理分为左右两个区域， 设置为充满布局——给window组件增加一个class：x-full-screen 显示左右两个区域——使用row(bootstrap)组件，row下面有两个col，row和col都设置height:100%。左右两个区域占屏幕的比例通过col的class设置，左边的col的class属性为col-xs-3，右边的col的class属性为col-xs-9，表示左右区域的宽度比为1:3，这里使用的是bbotstrap的样式，屏幕宽度为12，左右两列加起来是12，就表示会占满整个屏幕 左边——放一个grid组件，设置height:100%;width:100%,清空column的width属性 右边——分为上中下3个部分，使用panel组件，class属性只保留x-panel，并且设置height:100%，content里面放dataTables组件 2.2、上下充满 上图为组织权限中的分级管理功能，分级管理分为左右两个区域，右边区域再分为上下两个区域，设置基本和组织管理的设置一样，不同之处在于 右边分为上下两个区域，放两个panel组件，class属性只保留x-panel，并且设置height:50%，这样就是平分，可以设置为其它的百分数 2.3、多标签页充满 上图为组织权限中的权限查询功能，权限查询分为两个标签页，使用tabs组件实现标签页，标签页里面组件的设置基本和组织管理的设置一样 3、响应式布局 X5的样式基于 [...]

X5中提供了dataTables和grid组件。它们都可以分页显示数据、可以使用CSS控制样式、可以排序、可以显示页脚汇总。grid还可以直接编辑、可以分组，可以显示树形数据。 目录 1、组件展示 2、整体功能 2.1、显示数据 2.2、设置编辑 2.3、显示行号 2.4、设置多列头 2.5、设置分组 2.6、设置页脚汇总 2.7、控制显示 2.8、显示树形 2.9、刷新 2.10、动态创建 3、列的功能 3.1、显示列、隐藏列 3.2、设置列的前端过滤 3.3、设置列的排序 3.4、列的格式化显示 3.5、列内容对齐 3.6、设置可调整列宽 4、行的功能 4.1、设置行高、前景色、背景色 4.2、设置奇偶行的背景色 4.3、设置选中行的背景色 4.4、设置鼠标悬停行的背景色 4.5、行的多选 5、单元格的功能 5.1、设置单元格的前景色、背景色 5.2、合并单元格 5.3、显示按钮、链接 5.4、显示图片 5.5、使用文本框编辑 5.6、使用下拉框编辑 6、说明 [...]

本文介绍在WeX5中如何调试js代码 目录 1、调试js代码 1.1、调试自己写的代码 1.2、调试系统的代码 1.3、chrome浏览器开发者工具的使用   1、调试js代码 在js代码中加入debugger;，在打开chrome浏览器的开发者工具的情况下，执行到这个debugger;代码，浏览器就会停下来，此时，就进入调试了，可以单步执行，可以查看变量值，可以查看调用堆栈。 1.1、 调试自己写的代码 第一步：在js代码中加debugger; 例如：要调试外卖案例中加入购物车按钮的单击事件 打开/UI2/takeout/index.w文件，选中加入购物车按钮，在事件编辑器中，双击onClick事件值addCartBtnClick，此时设计器切换到js页，并且定位到了这个方法。 Model.prototype.addCartBtnClick = function(event) { debugger; var row = event.bindingContext.$object; var cartData = this.comp("cartData"); if (cartData.find(['fFoodID'], [row.val('fID')]).length === 0) { cartData.newData({ [...]

本文适合熟悉V2.7版本开发，准备使用V3.1版本开发的开发者。 BeX5 V3.1版本推出了新一代的界面模型——UI2，这里包括全新的组件、模块化的js，所有这些和V2.7版本的UI在使用上有了一些不同，本文从js、组件、新增特性、java四个方面列举了一些不同之处。  一、js相关 （一）、引用js 1、5.3版本——写在js文件中 引用的写法 例如：引用UI2/OA/personalOffice/js/pub.js文件 var OA = require("$UI/OA/personalOffice/js/pub"); 调用pub.js文件中的js方法 OA.calcLeaveDayHour(map.days); 2、5.2版本——写在w文件中   （二）、引用css 1、5.3版本——写在js文件中 引用的写法 例如：引用UI2/OA/config/pub.css文件 require("css!$UI/OA/config/pub").load(); 2、5.2版本——写在w文件中   （三）、在js文件中定义全局变量 1、5.3版本——定义实例变量 var Model = function() { this.callParent(); //在这下面定义变量，这里定义的是实例变量 this.openTaskStatus; }; [...]

X5的界面是由组件构成的，组件是一个可以以图形化方式显示在屏幕上，并能与用户进行交互的对象。组件是对数据和方法的封装，有自己的属性、事件和方法等。本文从组件的创建、属性、方法、操作、事件、样式、API、调试等方面介绍组件的使用。 目录 1、由组件构成的界面 2、组件的创建 2.1、设计时摆放组件 2.2、动态创建组件 3、组件的属性 3.1、使用设计器设置 3.2、使用表达式配置 3.3、使用js代码修改 4、组件的方法 4.1、公共方法 4.2、私有方法 5、组件的操作 6、组件的事件 6.1、on开头的事件（回调型事件） 6.2、bind开头的事件（标准的dom事件） 7、组件的样式 7.1、自定义组件样式 7.2、修改系统样式 7.3、引用样式文件 8、组件的API 9、组件的调试 9.1、调试样式 9.2、调试js代码 1、由组件构成的界面 2、组件的创建 2.1、设计时摆放组件 选择合适的组件摆放到合适的位置 调整组件的位置的两种方法 简单组件在设计器中拖动，红线的位置就是目标位置 复杂组件在左侧组件树中拖动，黑线的位置就是目标位置，根据黑线不同的长短，可以将选中的组件拖动到任意的地方 上图表示将formGroup3移动到formGroup2的上方，也就是调换了formGroup2和formGroup3的位置 上图表示将formGroup3移动到formGroup1的col12节点下，也就是col12下面会有两个节点了，一个是原来的fWPBM，另一个是新移动过来的formGroup3 注：移动的位置不对，可以按Ctrl+Z撤销 [...]