我们以下面的导航为例,看看如何进行导航的分区,设计导航前先准备好导航所需的图片素材,该导航可先分为:顶部、中间、底部3大部分,其中中间又可分为左侧和右侧,左侧又可细分为采购和销售2个小版块。

新建导航进入设计界面后,选中默认的根控件,在“控件属性”的“样式图片”中添加导航的底图,图片使用默认的“拉伸”填充方式。

在“窗口控件区”选中“组合面板”,按住鼠标左键将它拖拽“设计区”,“窗口控件”中同步显示已添加的控件

“控件属性区”显示已选中控件的详细属性,修改“控件属性”的名称为“充满大屏”时,窗口控件中的名称同步更新,将所有的控件都放在这个组合面板下;控件有8种“对齐”方式,锚定是绝对位置,为了能让导航自适应不同的屏幕分辨率,最外层的组合面板需要“充满”设计区,此时控件的宽度和高度大小自动。

1.导航分区
同一个容器控件中,多个控件根据对齐方式按照“层”从小到大自动排序,一般会使用“组合面板”来进行分区设置,为了让分区美观还会设置边距。
①先把整个面板横向分为上中下三个区域,选中“充满大屏”组合面板,依次添加3个组合面板到设计区,将组合面板的“名称”分为设置为“上”,“中”,“下”,“对齐”方式统一使用使用“顶对齐”,“层”分别为“1”,“2”,“3”顶对齐时宽度大小自动,控件的高度可在设计区拖拽面板的边线设置或在控件属性中设置“高度”。上面板显示标题,高度90;中面板显示采购和销售,高度380;下面板显示基础资料和查询,高度90。

为了显示的层次感,将上面板的背景颜色设置为#10FFFFFF。

②再把中面板分为2个区,选中“中面板”,依次添加2个组合面板“左侧”“右侧”,采用左对齐方式,“层”分别为1和2此时高度自动。“左侧”面板宽度380;“右侧”面板宽度616,并将2个面板的背景颜色设置为“#10FFFFFF”, 为了显示的层次给面板设置“外边距”,“左侧”面板的上下左右边距分别为20,“右侧”面板的上下外边距分别为20。


为了对齐,将“底层”面板的“左”外边距设置为20,背景颜色设置为“#10FFFFFF”。

③选中“左侧面板",依次添加2个组合面板“采购面板”和“销售面板”,采用“顶对齐”方式,“层”分别为1和2,高度170,宽度自动(下图只显示销售面板,采购面板层为1)。这样我们就完成分区的设置,接下来再来添加显示显示控件。

2.添加显示控件
①先设置顶部,使用标签控件。选中“顶部”面板,在“常用控件区”选中标签拖动到顶部面板中,名称为“系统标题标签”,对齐方式使用“自动排版”多个控件根据层自动排序,宽度400,高度90,左外边距40,
修改控件的名称便于对控件清晰,控件中的标题用于显示内容,将标题更名为“云表进销存”,标题的水平对齐方式选择“左对齐”,字体设置微软雅黑粗体白色24号。

②再设置“左侧”的“采购”面板中显示采购,箭头和入库,其中“采购”和“入库”单击后打开对应的总表,需要使用
能触发事件的控件使用“超链接”控件,箭头采用“组合面板”显示图片,3个控件采用“自动排版”对齐方式,“采购超链接”宽100,高130,并通过外边距控制控件之间的距离,上和左外边距为20,当鼠标移动到控件区时鼠标需要形状显示为手形,勾选焦点光标。

“箭头”面板,高度和宽度为60,层2,需要上下左右居中设置外边距上55,左40,右40,单击“背景”在填充方式中选择“自动大小”,样式图片中单击上传图片。

“入库”超链接,层为3,高度130,上和右外边距为20。
③“采购超链接”中需要显示图片和文字,选中控件依次添加“按钮”控件和“标签”,顶对齐排列,按钮高100,背景的填充方式为图片并上传图片,采用圆角显示。

标签的高度为29,标题为采购,字体为微软雅黑,粗体,白色,12号。

选中“采购按钮”右键复制,选中“入库超链接”然后粘贴到入库超链接里,修改控件名称为“入库按钮”,单击“背景”,填充方式上选择“图片”,在样式图片上单击上传入库图片;选中“采购标签”复制粘贴到入库超链接中,并控件的名称修改为“入库标签”,修改标题为“入库”。设置完成后在“窗口控件”区可看到所有已添加的控件用树形的方式显示。

3.设置公式
①先实现单击【采购超链接】时打开“采购单”总表,找到超链接单击事件,在导航的工具栏上单击【填表公式】,弹出“填表公式管理”对话框,采购超链接是超链接,可触发超链接单击和超链接双击事件,选中“超链接单击”事件,它是一个事件群,需要添加具体的事件,单击【添加超链接】,弹出“请选择控件”对话框显示所有可用的超链接控件,选中“采购超链接”,单击“【确定】。

在已添加的“采购超链接”单击事件下,单击【添加公式】,弹出“请选择操作”对话框,单击采购超链接时打开采购总表,选择操作“打开总表”。

修改公式名称为“打开总表_采购单”,在标签页“打开总表”的“表单模板”中设置“采购单”,即打开采购单模板的总表,目标窗口默认为“新标签页”,使用新标签页打开采购单总表。

设置好导航的权限后,在设计界面的工具栏上单击【保存】按钮,弹出“模板属性”对话框,填写模板信息,并勾选“默认模板”,则导航在用户访问目录文件夹时将自动打开,若目录文件夹为“我的系统”则登入系统后自动打开,若目录文件夹为“统计查询”则打开该文件夹时自动打开。
