JD平台专题篇1菜单参数中布局的案例.docx
《JD平台专题篇1菜单参数中布局的案例.docx》由会员分享，可在线阅读，更多相关《JD平台专题篇1菜单参数中布局的案例.docx（35页珍藏版）》请在冰点文库上搜索。
JD平台专题篇1菜单参数中布局的案例
目录
1前言2
2需求案例2
3借贷原因档案记录导航设计3
3.1定义菜单号3
3.2定义菜单参数5
3.3了解菜单参数中布局的基本方法7
3.3.1B样式布局8
3.3.2H水平分隔样式9
3.3.3V垂直分隔样式11
3.3.4T分页签式布局12
3.3.5U:
自定义组件13
4借贷原因树型菜单的步局14
4.1复制菜单定义14
4.2复制并定义新的菜单参数15
4.3增加分级变量16
4.4注册分级变量18
4.5按编码分级的树型功能演示20
5布局参数调整20
5.1调整布局对象中各字段修正参数20
5.1.1修正参数的定义规则20
5.1.2设定借贷原因（导航）功能中的布局参数21
5.1.3定义效果查看22
5.2给各个布局项加边框22
5.2.1定义格式描述22
5.2.2给借贷原因（导航）功能加边框23
5.2.3定义效果界面如下24
6调整员工借贷作业单界面布局24
7定义关联界面功能27
7.1修改菜单参数中的其它参数27
7.2定义格式说明29
7.3定义效果演示29
1前言
通过前面平台功能的学习和了解，对JD开发平台有了一个整体的了解，但对于一个在实际应用时客户往往会对软件的界面排列提出特殊的要求，本节中我们重点来描述菜单参数中提供的布局应用的方法。
同样平台提供了多种布局样式，让用户进行选择，为使大家能够快速了解，我们还以案例的形式进行讲述，由简单的布局到繁杂的界面布局逐步完成对平台布局功能的学习。
2需求案例
我们设计的员工借贷管理在测试时使用部门又提出了各自的要求，具体如下：
1、财务人员希望看到的是左右结构的显示的借贷原因，左边儿为记录导航，如下图样式，还说如果能以树型结构显示借贷原因就更好了
2、财务人员中有年龄比较大的同志，希望界面上的栏位能宽松一些，这样看着舒服些，不容易出错。
3、在录入借贷原因时，每条都要提示保存很麻烦，不用每输一条提示保存，由录入人员自己点击保存，但同时也要防止意外切换造成的数据丢失，如果没前界面内容已修改或录入但确实还没有保存则提醒。
4、操作人员希望能把员工借贷作业单据页面中制单人以后的栏位放到下半部，这样不用输入内容可以不用去理他了，如下图的所示:
5、财务人员在录员工借贷时希望可以在界面中能直接调出当前选中行的借贷原因录入界面查看详细内容，或者是在查看员工借贷作业时可以直接查看已还款单的记录。
好了，财务人员对布局和页面功能的需求描述了，接下来我们进入实际的操作阶段，看看用JD如何过来完成这些需求。
3借贷原因档案记录导航设计
财务人员提出的关于借贷原因档案的记录导航功能设计便于进行选择，为不影响现有借贷功能的菜单显示，现在我将以现有的借贷原因界面为模板复制一个新的菜单号出来，设计为带有记录导航功能，菜单编号确定为：
A000名称为借贷原因（导航）。
3.1定义菜单号
我们首先按照规划内容建立新的A000功能菜单。
使用的平台功能为：
菜单定义
系统功能——系统工具——菜单定义，进入后的主界面如下图：
在上图界面中，选中A001菜单，点右键选择记录拷贝，生成一条新的记录，如下所示：
具体的内容按下表中对应的值进行修改，
栏位
值
说明
菜单号
A000
菜单名
借贷原因（导航）
属性
授权
命令行
Mservlet?
pbuid=A000
系统号
2011
外部系统
7
为便于后续与天心和天思接口
定义完后的界面如下：
点击保存完成菜单的增加，新增的菜单必须要进行系统刷新后才能生效，具体操作如下：
基本功能——系统刷新，如下图所示:
系统刷新后即可在系统中看到刚才定义的功能菜单内容。
3.2定义菜单参数
使用到的平台功能有：
菜单参数
进入菜单参数界面：
系统功能——系统工具——菜单参数
光标选中A001借贷原因档案，点右键选记录拷贝完后如下图界面
点击记录拷贝后出现如下图界面，
按如下内容设定：
栏位
值
说明
标识号
A000
说明
借贷原因（导航）
系统号
2011
组成
LNREASON01
属性
增、删、改、查、浏览、缓存
选中缓存后即可实现统一保存
布局
H:
（LNREASON01[lnno,lnname]//导航条*250;B:
（@LNREASON01;LNREASON01）//定义区*0.8）
见下面解释
布局中提供的样式有H/V/B/T/U几种样式，本例中使用了H和B的结合，上面布局中的定义的意思为：
界面整体上划分为左右两部分，其中左边共显示两列字段为［lnno,lnname］，且固定显示的宽度为250像素;右边以B样式进行布局分为上中两部分，占用的宽度为除250像素以外的其他区域;
上述内容定义完后的界面如下图所示：
点击保存后，重新打开新定义的菜单借贷原因（导航）的界面如下
3.3了解菜单参数中布局的基本方法
JD平台中提供的常用布局分为四种（B，V，H，T），还有一种是自定义的布局允许用户自己写程序接口来进行布局。
为了让大家对布局有一个整体的了解，接下来我可以通过调整A000功能菜单参数的布局设定，来理解布局在实际应用中的意义，布局中的值均可以复制下面中包含LNREASON01内容的定义。
每定义完一个布局样式，保存后，只要重新刷新即可看出新样式的变化。
3.3.1B样式布局
B对应java中BorderLayout布局，该布局按照定义将组件按顺序添加到上、中、下、左、右对应的位置。
假设我们作如下定义B:
（A1;A2,A3,A4,A5）。
系统将按照下图所示构造界面。
使用B样式时的注意事项：
1、当组成的对象只有一个时，且在步局时只想步置一个对象，那么需要将该对象步局到中部，否则系统会不识别，定义的样式为:
B:
（;A1）,如上例中借贷原因档案，如果只想要以下效果，那么必须要将布局调整成B:
（;LNREASON01）或B:
（;@LNREASON01）
或
2、当使用B布局时，希望能够只启用一部分位置的布局，如下图中所示，左边留出空白区域以便进行其他功能的展示，在定义时B样式上中下左右的位置顺序启用，如果是按顺序启用的，则只要定义前面的部分即可;如果是中间有空过的位置，那么必须用;号补位，如下图中，启用的位置为上、中、左、右;下的位置没有步置，所以在定义时格式如下：
B:
（@LNREASON01;LNREASON01;;#250;#50）
3、启用B样式时，左中右三个部分在普通定义时不能同时布局对象内容，只有在使用自定义步局（需要写接口进行调用）时才可能在左右步局对象。
普通定义时一般在中部布局对象，左右部分用于对界面位置的调整，如下图定义时，定义的#250;#50表示左边预留250像素位置，右边预留50像素。
3.3.2H水平分隔样式
H表示左右方向按照设定的比例分配两个组件的初始位置，支持与其他样式嵌套。
定义的样式为：
H:
（A1*0.3;A2*0.7）,系统将按照下图所示去构造界面，其中A1占30%，A2占70%，而且可以拉拽。
定义的样式为H:
（A1*200;A2*0.7）,则系统将A1组固定显示为200像素，其余的均分配给A2组。
例如本例中定义的
H:
（LNREASON01[lnno,lnname]//导航条*250;B:
（@LNREASON01;LNREASON01）//定义区*0.8）
其中LNREASON01[lnno,lnname]//导航条*250为一组，表示固定宽度为250像素
B:
（@LNREASON01;LNREASON01）//定义区*0.8为另一组，表示除250像素外的部分
如下图：
使用H水平分隔样式的注意事项：
1、H样式要求必须由两个部分组成，且需要定义两个组成部分的水平占用比例，中间用;号分隔
2、H样式中组成的每一组可以再次以一个独立的布局样式进行设定;
3、比例描述时，各项的值均小于0时表示按比例分配，二者合计必须为1;如果有一项大于0,则表示该项为固定宽度，扣除固定宽度的其他部分给另一组;如果两个均大于0则各自按固定宽度布局。
如按下述定义:
H:
（LNREASON01[lnno,lnname]*250;B:
（@LNREASON01;LNREASON01）*400）
界面的样式变化为下图：
3.3.3V垂直分隔样式
V表示垂直方向按照设定的比例分配两个组件的初始位置，支持与其他样式嵌套。
定义的样式为：
V:
（A1*0.3;A2*0.7）,系统将按照下图所示去构造界面，其中A1占30%，A2占70%，而且可以拉拽。
定义的样式为V:
（A1*200;A2*0.7）,则系统将A1组固定显示为200像素，其余的均分配给A2组。
例如本例中定义的
V:
（LNREASON01[lnno,lnname]//导航条*250;B:
（@LNREASON01;LNREASON01）//定义区*0.8）
其中LNREASON01[lnno,lnname]//导航条*250为一组，表示固定宽度为250像素
B:
（@LNREASON01;LNREASON01）//定义区*0.8为另一组，表示除250像素外的部分
如下图：
使用V垂直分隔样式的注意事项：
1、V样式要求必须由两个部分组成，且需要定义两个组成部分的垂直占用比例，中间用;号分隔
2、V样式中组成的每一组可以再次以一个独立的布局样式进行设定;
3、比例描述时，各项的值均小于0时表示按比例分配，二者合计必须为1;如果有一项大于0,则表示该项为固定宽度，扣除固定宽度的其他部分给另一组;如果两个均大于0则各自按固定宽度布局。
3.3.4T分页签式布局
T表示分页的卡片式布局。
假设我们作如下定义T:
（A1//A1;A2//A2）。
系统将按照下图所示去构造界面。
如在本例中，可以把借贷原因档案右边儿设计为多页签的方式，按如下定义调整布局。
H:
（LNREASON01[lnno,lnname]*250;T:
（@LNREASON01//记录型;LNREASON01//表格型）*0.8）
定义复制到菜单参数的布局中，保存后重新打开借贷原因（导航）菜单界面如下图：
3.3.5U:
自定义组件
自定义组件，必须要与接口配合，通过外部接口完成界面的布局，在实际应用中一些特殊要求的布局都是通过此种方式接入系统的，定义时的格式为
U:
方法名
如果我们进行如下定义，U:
COMP1；并重写createComponent（Stringdesc）方法，系统就会将该方法创建的组件加入到我们的显示界面中。
定义U:
Tree表示将启用树型分组方法，系统就会将该方法创建的组件加入到我们的显示界面中。
关于树型布局的应用后面将单独描述。
好了，经过上面的介绍我们对布局有一个全面的认识，那么现在我们将布局恢复成前需求中所希望的样式，带导航功能的步局样式，定义如下：
H:
（LNREASON01[lnno,lnname]//导航条*250;B:
（@LNREASON01;LNREASON01）//定义区*0.8）
将上述内容复制到标识为A000的菜单参数对应的布局中，保存后即完成带导航功能的菜单定义。
如下图：
在体会各种界面布局的变化时，可以新增几条记录看看，是否还有每输一行换行时就提示保存。
4借贷原因树型菜单的步局
通过上面3.3的介绍我们了解了菜单布局应用的常用方法，应该能够满足大部分应用的界面布局样式，但对于有特殊布局要求的功能，系统提供了自定义组件U模式，用户可以将自己写好的布局样式接入到当前的系统中（需要符合平台的规范）,本例中将介绍已经写好的特殊应用布局TREE的使用方法。
系统TREE的布局提供了多种引用方法，本例中我们以按lnno字段编码分级方案为准进行定义，其他的应用方法在后续的说明中会逐步加入。
为了不影其他人的使用习惯，我们同样再复制一个新的功能菜单来完成树型结构菜单的定义。
以A000为模板复制一个新的功能菜单，具体的操作如下：
4.1复制菜单定义
进入菜单定义：
系统功能——系统工具——菜单定义
如下图中选中A000菜单号
点右键选择记录拷贝或是点新增后一条新的记录，按如下内容输入
栏位
值
说明
菜单号
A002
菜单名
借贷原因（树）
属性
授权
命令行
Mservlet?
pbuid=A002
系统号
2011
外部系统
7
为便于后续与天心和天思接口
完成后如下图所示：
4.2复制并定义新的菜单参数
进入菜单参数：
系统功能——系统工具——菜单参数
在上图中点右键选记录拷贝或是点新增，增加一条新的记录，按下表内容输入
栏位
值
说明
标识号
A002
说明
借贷原因（树）
系统号
2011
组成
LNREASON01
布局
H:
（U:
TREE/-*250;B:
（@LNREASON01;LNREASON01）//定义区*0.8）
U:
TREE是表示左边儿使用自定义的TREE布局样式
取数条件
#lnno
申明系统变量DYCC.LNREASON中定义的取值位数是从那个字段中取值的。
系统接口
inetbas.cli.systool.CTreeUI
使用目录树时必须要注册此接口
属性
增、删、改、查、浏览
动态尺寸
0
定义完后的界面如下：
4.3增加分级变量
使用的功能：
变量定义
1、进入变量定义：
系统功能——系统工具——变量定义
如下图所示：
2、增加新的分级变量
在上图中点击增加，加入一条新的记录，按下表内容输入
栏位
值
说明
变量号
LVL.LNNO
命名是以LVL.开头，以便于查找
系统号
2011
类型
不用定义
说明
借贷原因编码分级
公式
1-2-2-2-2
参照值
不需定义
操作员
V
选中表示此项变量允许客户修改
定义完后的界面如下：
3、增加树型功能初始取值定义变量
在上图中点击增加，加入一条新的记录，按下表内容输入
栏位
值
说明
变量号
DYCC.LNREASON
命名是以DYCC.表名，其中DYCC.为固定的定义格式，表名是具体取值表名。
系统号
2011
类型
不用定义
说明
借贷原因编码分级，树型初始取值位数
公式
1
与上面分级规则同步定义，初始化树型显示一级时则定义为1位（规则一级为1位）
参照值
不需定义
操作员
V
选中表示此项变量允许客户修改
定义完后的界面如下图所示：
4.4注册分级变量
打开借贷原因界面，如下图中按CTRL+F2调出对象定义，
按CTRL+F2后的对象定义界面如下：
在编码对应的规则栏中，点击如上图所示的参照窗口，调出如下界面
光标定在级次栏位中输入刚刚定义的变量，按F12可调出资源选择窗口,如下图：
在上图下接列表中选择<变量>,如下图：
找到刚才定义的变量名，双击选择到上图红色标注的位置，然后再点击确定返回规则参照窗口，如下图所示：
点击确定完成定义，返回对象定义界面，然后再点击保存。
直接输入时，可以参考上述的格式[变量名]
4.5按编码分级的树型功能演示
1、员工借贷管理系统——借贷原因（树）
关于树型功能应用，系统提供了多种的应用模式，支持单字段分级、分级字段分级或两个独立表单的分极等多种应用。
后续会再次进行说明。
2、树型菜单初始化带入范围的定义改变，效果演示
DYCC.LNREASON的公式中的定义，是根据用户希望初始化带入的值直接相关，如果初始化时希望能带两入两级数据，那么在定义时其值申明为两级的代码长度，如本例中规则为1-2-2-2-2，那么显示初始化显示两级时其位业要申明为3，系统会自动根据级次的规则取取会相应的资料，如下图为定义为3以后，初始化显示的资料。
如果需要把全部资料初始化时都在树型中列示出来，那么请在该变理中申明一个大的位数即可。
5布局参数调整
通过上面的介绍我们对布局的几种样式有了一个初步的了解，接下来，我们再对布局中系统提供的修正参数进行介绍，以便于解决前面需求中的关于行高、行间距及布局列等。
5.1调整布局对象中各字段修正参数
5.1.1修正参数的定义规则
系统提供在各个布局组的对象名后以#xxyynn来对当前的对象中和行高、行间距及布局列数进行定义，以调整界面上各个字段自动排列时的各项参数。
以上格式的意义为：
#固定分隔符，要与对象标识号相连
Xx表示对象中的按几列布局，用高两位数表示；
Yy表示对象中的行间距，用中两位数表示（n/100）；
zz表示对象中的行高值，用低两位数表示（n%100）；
定义格式为：
对象名#xxyynn,
例如：
@LNREASON01#20830xx=2则表示该对象按两列排列;yy=8表示行间距为8;nn=30表示行高为30
实际定义时，要注意以下几点
1）只调整布局列数时，定义格式为:
xx0000，中位和低位用0补充；此申明的布局列数优先于对象定义中申明的单元数；仅在记录型时有用。
2）只调整行间距时，定义格式为：
yy00，低位用0补充；仅在记录型时有用。
3）缺省的行间距和行高为620
5.1.2设定借贷原因（导航）功能中的布局参数
进入菜单参数：
系统功能——系统工具——菜单参数
如下图：
在上图中键头标识的位置分别加入以下值#20830
定义完后的该项的值如下图：
点击保存完成菜单参数的修正值的定义。
5.1.3定义效果查看
重新打开借贷原因（导航），显示的界面如下图：
上图中的行高及行间距及记录型的布局列均发生了改变。
5.2给各个布局项加边框
5.2.1定义格式描述
在实际应用中往往需要对单据布局出来的各个页签或功能单元进行标识，系统提供给定义的组件加边框的功能，以便于给使用者更加明确的功能区分指引。
给组件加边框，如果我们想给系统的某个组件加边框可以在组件A后面加---//组件A，其结果如图：
定义的格式为在某一组定义的最后加入以下格式内容即可
//标签名
//为固定描述，其中//中间为引用名字，在自定义布局组件时使用，
标签名：
为定义的该功能组的名称；
5.2.2给借贷原因（导航）功能加边框
打开借贷原因（导航）的菜单参数定义界面，如下图：
在上图中红色键头标注的位置插入以下对应的内空
//导航条//记录型//详细列表//输入区
完整的布局内容为：
H:
（LNREASON01#20830[lnno,lnname]//导航条*250;B:
（@LNREASON01#20830//记录型;LNREASON01#20830//详细列表）//输入区*0.8）
5.2.3定义效果界面如下
重新打开借贷原因（导航）后的界面显示如下图：
6调整员工借贷作业单界面布局
接下来我们将员工借贷作业单的界面调整成其希望的样式，制单人以后的栏目布局到下部，我想通过我们上面3.3中的介绍，大家应用能想到该如何处理了。
1、打开员工借贷作业单界面，员工借贷管理系统——员工借贷作业单
如下图：
双击上图中红色标识的位置，可调出如下界面
点击URLS调出对应的菜单参数,如下图
2、修改菜单参数中的布局
在上图的布局中按如下格式输入：
B:
（@A003#830[~remark];A003A#830;@A003#830[smake~]）
说明：
其中@A003#830[~remark]表示，当前对象中的字段内容显示到remark为止
@A003#830[smake~]表示，当前对象中的字段内容从smake及以后的字段显示出来。
上述定义中，将同一个对象A003通过[]项的申明布局到两个部分，此种应用在前面的界面步局中也同样用到，如借贷原因（导航）的菜单参数也是使用此方式。
[]中描述的内容支持起止字段项、多个单一字段或是单一字段和起止结合等定义方式。
如：
@A003#830[sid,hpdate~]@A003#830[sid~remark]
@A003#830[~remark]表示从第一字段到remark结束
@A003#830[smake~]表示从smake字段开始一直到结束
上述定义输入后，点击保存，界面如下
定义完后重新调出该菜单后即可看到效果。
3、定义后的效果如下图所示
注意上面的界面布局样式，划分为上下两部分。
7定义关联界面功能
通过定义实现对其他功能界面的调用，并可以依照当前界面字段的值直接带入查询出相应功能界面的内容。
如在操作员工借贷作业单时可以通以当前单号关联查询到已还款的记录和以当前选中行查询出相应的借贷原因界面。
7.1修改菜单参数中的其它参数
打开员工借贷作业界面，如下图：
双击上图中红色标识的位置，调出关联界面，如下图：
点击URLS调出相应的菜单参数，如下图所示：
在上图红色标识的其它参数中输入如下内容：
plink="0A001,1A005"&P_0="A003A*{lnno=A003A*lnno}"&P_1="A003*{slkid=sid}"
定义后的界面如下：
点击保存完成关联按钮的定义功能。
7.2定义格式说明
关联其他功能菜单的定义分为两部分，一部分为申明连接菜单的,另一部分为申明对应的传值字段，如果同时关联多个菜单的，可以如下例申明内容：
plink="0A001,1A005"&P_0="A003A*{lnno=A003A*lnno}"&P_1="A003*{slkid=sid}"
plink=为固定格式,其后面的值用""号标识,如果有多个菜单号引用时用逗号分隔，每个菜单号前加入序号，从0开始,该序号与后面的传值参数（P_n）一一对应。
P_0=表示用于调用0序号的菜单时传入的值为格式固定；其后面的值用""号标识,构成的内容为当前对象号*{目标字段=当前字段}
上述定义有几个引用菜单就需要申明几个P_n
只有一项连接选择则可以直接定义为plink=”当前关联对象名*{目标字段=当前字段}”
7.3定义效果演示
进入员工借贷作业单界面，如下图所示:
光标点击到编号栏位，点击录入切换按钮转换为查询，如上图中红色标注的地方，如下图所示：
在上图中编号或其他位置输入相应的条件后，点击查找按钮，查询出已录入的记录，如下图所示：
点击上图中红色框的连接，出现如下图所示下拉选择
点击借贷原因，后调出如下窗口，系统会把光标所在行的借贷原因界面调出。
同样在员工借贷作业单界面点击连接，选择借贷还款单后，系统会自动将该借款单对应的还款记录调出来，如下图所示：
注意上图中的的来源单号和编号的列表信息，是在员工借贷还款作业单对应的表头中将需要显示在列表中的字段的属性选为列表即可出现在列表中。
升级会员 