13.5设计登入界面

云表系统的登录界面可根据用户的需求个性化设置, 设置时将登录界面上的主要显示和操作控件保留即可
云表有2种登录界面旧版登录界面和新版登录界面,相比较而言旧版版本由于只支持账号密码登录,因此登录界面更简单,新版登录版本增加云表APP扫码、微信扫码2种登录方式,因此登录界面上的控件更多,设计较复杂些。
左侧为旧版,右侧为新版

1.找到登录界面

登录系统,进入系统主界面,选择【系统管理】文件夹,右侧显示【登录界面】模板,双击进入“登录界面”的设计界面。

2.设计登录界面

2.1旧版登录界面

旧版登录界面主要由5个控件组成,这5个控件是必备的控件,后台已设置单击“记住密码”时,记住密码,单击“登录”时登录系统,设置时将控件拖动到对应的位置上显示即可。
  • 外层组合面板(对话框)
  • 记住密码rememberPwdBox(复选框)
  • 密码password(文本框)
  • 用户名userNameBox(文本框)
  • 登录submitBth(按钮)
准备好登录界面所需的图片,根据登录界面上已有的控件,设计登录界面时,只需要添加好底图将并讲控件拖动到对应的区域即可,我们以上图的登录界面为例来学习如何设计。
①设计的底图较大时,可将底图放到根控件“登录界面”作为背景图片。在“窗口控件”区选中“登录界面”控件,在“控件属性”的“样式图片”上单击并上传已准备好的底图,建议使用居中方式对齐,在不同尺寸下底图大小不会发生变化,对应的控件不会错位
②已设置好底图后,需要去掉“对话框”的背景图片,在“窗口控件”区选中“对话框”控件,“控件属性”显示该控件的相关属性,打开“背景”选项,将“填充方式”设置为“纯色”,样式图片设置为“空”,并拖动“对话框”组合面板的大小,覆盖底图上的登录区,效果如下图
③分别选中 记住密码rememberPwdBox(复选框)、密码password(文本框)、用户名userNameBox(文本框)3个控件,“设计区”同步选中控件,将控件拖到合适的显示区域,并在“背景”中将“填充方式”设置为纯色,颜色为透明“#00000000”。若底图中没有“用户名”、“密码”的标题可添加文本框作为显示,与rememberPwdBox、password配对显示。
④设计登录按钮。在“窗口控件”区选中“submitBth”控件,在“设计区”拖拽设置控件与底图上的登录按钮图片大小一致,并在“控件属性”中设置背景的填充方式为“纯色”,样式图片为“空”,将“常态”、“高亮”、“点击”都设置成透明“#00000000”,若有登录按钮图片可上传登录到背景图片中并设置常态、高亮、点击时的显示效果
设计过程中如设计不如意,在设计界面,单击【还原配置】可恢复到最初的样式,至于“记住密码”和“登录”单击后执行什么样的操作系统中已设置好,无需设计,设计好登录界面后,单击【保存】保存的登录界面,退出系统后,以最新的登录界面显示。

2.2新版登录界面

新版登录界面支持“云表APP扫码”、微信扫码、“账号密码登录”3种登录方式,如果企业只需要使用“本地账号密码登录”时,可在设计界面的顶部工具栏单击【样式】,选择导入【导入样式】,导入 旧版登录界面的样式后根据旧版登录界面的设计方式进行设计。
当需要多方式登录的时,可参考以下的说明查看已有的登录界面设计:
根目录“登录界面”设置底图为“白云”,“loginBox”设置带云表logo的白色方框,新版登录界面主要是由3部分组成:
  • cloudScanBox(扫码登录),该控件下设置云表APP扫码和微信扫码登录,云表APP扫码登录时,需要提前打开已登录云表会员账号的APP,并在APP左上角点击【-】进行扫码登录;
  • LoginTypeBth(登录类型),该控件用于切换扫码登录方式和本地账号密码登录方式,它包含图片帧UserLoginBtn_icion,该图片帧拥有6帧,通过后台代码控制了图片帧的显示与单击图片帧时显示的组合面板;
  • localBox(本地账号密码登录),该控件下主要设置使用本地账号密码登录
①cloudScanBox(扫码登录)组合面板设置控件的显示区域,包含3个组合面板:ScanTypeBox(扫码类型框)、HintAPPBox(APP扫码)、HintWXBox(微信扫码)和1图片帧QRCode(显示二维码内容)
ScanTypeBox(扫码类型框)包含:APPScanBth(APP扫码)和winxinBth(微信扫码),是分页按钮,通过分页按钮“控件属性”下的“面板”控制显示“HintAPPBox”(APP扫码)还是“HintWXBox”(微信扫码),分页按钮分别添加图片帧“icon_app”显示【云表APP扫码】和“icon_weixin”显示【微信扫码】;“HintAPPBox”(APP扫码)下包含控件“APPLinK”(APP下载链接),“HintWXBox”(微信扫码)包含控件“txt_weixin”(内容:扫码关于公众号登录注册);
②localBox(本地账号密码登录)组合面板设置控件的显示区域,它包含4个组合面板:passwordBgBox(密码框)、loginBthBox(登录提交)、rememberBox(记住密码)、userBgBox(用户名)。passwordBgBox(密码框)包含passwordBox(文本显示框);passwordBgBox(登录提交)包含submitBox(组合按钮)和submitBtn(提交按钮),通过后台代码控制点击“submitBtn”提交按钮时登录系统;rememberBox(记住密码)包含rememberPwdBox(复选框)和text_r(文本);userBgBox(用户名)包含userNameBox(文本);
提醒:由于登录界面与超时登录的逻辑不同,修改登录界面后,页面超时登录弹出提示框重新登录时页面还是原有的云表界面。
2022-06-20
4341
Baidu
map