1.1 概述 业务本体可以用来描述企业业务里包含的非常丰富的概念知识 业务本体是整个业务模型的语义基础，它可以规范和约束业务所处理的数据，为数据赋予语义。 业务本体不仅可以促进企业知识的重用和共享,还可为企业数据交换和集成带来非常多的好处。 X5采用本体知识描述体系来对业务数据进行建模。可以简单的理解本体就是通过概念、关系和规则对知识的描述体系，把这种描述思想运用到企业信息化。 概念（concept）是对现实世界中各种事物的一种抽象，可以简单理解为数据库中的表，是关系的集合，可以使用它来定义生活中或业务中使用的概念或术语。 关系（relation）是对事物间联系的描述，可以简单理解为数据库表中的字段，但含义更丰富。 1.2  关系 1.2.1   关系的定义 关系（relation）类似于类定义中的域定义，但有本质的差别。在本体定义体系中，关系的定义是独立于概念定义存在的，它表明了客观存在关系这样的事实。目前只支持二元关系。 语法： <relaltion name="" data-type="" single-valued="true/false" inverse-of="" size="" scale="" required="" unique="" default-value-expr="" > <label language=""></label> </relaltion> 说明： name：关系名，建议使用有意义的单词组合。 data-type ：关系的类型。 [...]

1.1 概述 模型是人们了为方便研究、理解和解决客观事件中存在的种种问题而对客观现实经过反复思维抽象后的文字、图标、符号、关系式以及实体模样描述的集合，以描述所认识到的客观事物的一种直观表现形式。 业务模型是从企业信息化的需要出发，针对企业的业务和管理所做的一种体系性抽象和描述，业务模型体系为信息系统的设计和开发提供科学、合理的导向和依据。 业务建模就是基于企业工程理论和业务模型体系，来分析、设计、开发和维护信息系统。业务建模的过程，是从业务和管理的现实和知识出发，依据和参照业务模型体系，采用业务建模工具，设计并构建出相关的业务模型资源，业务模型资源是业务建模的主要产品。 根据国际化的需求，X5业务模型支持多语言描述。通过在业务模型的描述中，使用国际化的语言标识，实现多语言的业务模型描述。业务模型对多语言的支持，为业务的国际化需求提供了基础。 1.2 业务模型的组织 1.2.1  业务模型的构成 X5业务模型系统由BIZ工程构成。BIZ工程之下有三种类型的模块：系统级模块、平台级应用模块以及一般应用级模块。 系统级模块包括system及其子模块，是在平台发布时就带的有，包括模型调度框架及各种基础功能，是其他应用系统开发以及运行的基础。系统级目录system下设ontology、data、logic和config目录。config是系统专有的模块，包括模型的一些配置信息（例如业务动作的插件配置），ontology目录下存放平台级的本体定义。data目录之下存放平台本体的mapping及数据库的连接，logic目录下包含action(平台提供的action定义)， code（平台提供的业务逻辑），fn（平台提供的函数定义），平台级应用模块是指SA，随平台一起发布，是一般应用系统需要依赖的。 一般应用级模块是指根据不同的业务需求定义的一个大的分类级别的模块。应用级模块的定义是具有一定规范的，便于理解以及开发。Studio建模工具遵守标准的定义规范。 图1.1 模块级别 标准的应用级业务模型定义规范如下： BIZ中新建一个应用模块。其下data, logic, ontology, process四个子模块： data：用于定义概念到物理表的映射和数据库连接信息。此模块包含*.config.m文件、*.mapping.m文件。 ontology：用于定义概念模型。此模块包含*.ontology.m文件。 process：用来定义流程。此模块包含若干个子模块，每个子模块对应一个业务流程定义，子模块中包含*.process.m文件。 logic：用来实现业务逻辑。此模块包含action，code，fn模块，其中action中存储的是action及procedure定义，包含*.action.m和*.procedure.m文件；code中存储的是业务逻辑代码，包含src，dsrc，classes，dclasses，lib和slib目录；fn存储的是函数定义，包含*.fn.m。 1.2.2  业务模型文件 业务模型文件从后缀名的划分来看主要有xml、m、java和jar。 m文件:后缀为m的文件为模型描述文件,主要内容是ontology、mapping、fn、action等等的定义以及各种配置。 主要包括以下几种： 本体文件 *.ontology.m 映射文件 *.mapping.m 配置文件 [...]

以下教程基于2015-05-17发布的WeX5的3.1.1版本。如果你想先感受下支付，可以在 http://www.wex5.com/portfolio-items/demo-takeout/ 中扫码下载ios、android客户端支付来感受下（每份外卖支付金额都是1分钱哦）。 开发篇 我们需要在js中写上调用支付的代码，参考代码如下，详细代码可以参考外卖案例中的完整代码(非常推荐看下外卖中关于支付的逻辑/UI2/takeout/index.js，因为我认为这个地方对支付状态码和回调都做了比较全面的设计和实现，要不自己写起来还是有点麻烦的)。 /** 支付宝支付 **/ var alipay = navigator.alipay; alipay.pay({ "seller" : "huangyx@justep.com", //卖家支付宝账号或对应的支付宝唯一用户号 "subject" : "x5外卖", //商品名称 "body" : "x5外卖", //商品详情 "price" : "0.01", //金额，单位为RMB "tradeNo" : tradeNo, //唯一订单号 "timeout" : [...]

 1. 组件构成 一个完成的设计器组件由以下几部分组成： 描述文件(必须)，js类，java类，属性编辑器 其中只有描述文件是必须的，其他部分可以根据组件的功能进行选择。  2. 创建组件目录 Studio中设计时组件跟运行时组件都是放在一起的，但跟运行时组件并不是一一对应，如果有运行时组件目录，则在该目录下创建一个名为designer的目录，如果没有运行时组件目录，则先要创建一个组件目录，再创建desinger目录。 示例： 在/UI/system/components/grid下  3. 配置描述文件 在designer目录下创建一个xml文件，名称可以任意命名，一般情况下这个文件名保持跟组件目录名一致，xml的整体大致格式如下： <elements> <element> <!-- 属性描述 --> <properties> </properties> <!-- 编辑器描述 --> <property-editors> </property-editors> <!-- 内部组件描述 --> <inner-component-config> <item> <properties> <property /> </properties> </item> </inner-component-config> <!-- [...]

{ // "@type" - 类型标识，"table"表明这个JSON是一个table结构的数据 "@type" : "table", // "userdata" - table的元信息 "userdata" : { // "idColumnName" - ID列的名称 "idColumnName" : "fID", // "idColumnType" - ID列的数据类型 "idColumnType" : "String", /**********可以在下面列定义中包含包含ID列，并忽略ID列定义**********/ // "relationAlias" - 列名，以逗号分隔 [...]

目录 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。 [...]

1．Button组件案例（有对应的运行时组件） 所在目录：/UI2/system/components/justep/button 1.1 创建组件目录 在运行时组件目录/UI2/system/ components/justep/button下创建designer目录，该目录放置设计时组件的相关代码和资源，如下图：   1.2 创建组件配置文件 在designer目录下创建button.xml配置文件，这个文件的名称要与运行时组件目录名相同，详细描述如下 ： <!-- 创建根元素，可以同时定义多个element --> <elements> <!-- 定义组件配置，这里的名称通常定义为运行时组件的名称 tag-name 节点的标签名名称 icon 组件显示在工具箱上面的图标， 默认存放在designer/img下 text 组件文本描述信息 binding-component 跟运行时组件绑定 component-type 组件类型，可自定义， 详细可参见设计时组件开发文档 --> <element name="$UI/system/components/justep/button/button" tag-name="a" icon="button.gif" [...]

1. 组件构成 一个完成的运行时组件由以下几部分组成： js类，组件配置文件，服务端模版处理类（java） 其中只有js类是必须的，其他部分可以根据组件的功能进行选择，在目录树上展现的结构图如下所示（以dataTables组件为例）： 说明： css 目录用来存放组件所定义的样式文件 images 目录用于存放组件所依赖的图片资源 designer 目录用于存放设计时组件的相关文件 server 目录用于存放服务端模版处理的相关java类文件  .js.xdoc 文件用于存放组件api的说明文档 2. 组件案例开发 下面是以$UI/system/components/justep/button 组件为例，讲解一个组件的开发过程。 组件xml描述，这个描述就是在w中创建一个button组件后的描述： <a component="$UI/system/components/justep/button/button" class="btn btn-default" label="button"> <i/><span></span> </a>   2.1 创建组件目录 创建UI2/system/components/justep/button目录 说明：组件可以创建UI2的任意目录下 [...]

页面由组件构成，页面的高度和宽度由组件的高度和宽度确定，当页面的高度大于屏幕的高度，或者页面的宽度大于屏幕的宽度，页面就会出现滚动条。 页面指的是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的样式基于 [...]