菜菜侠的uniGUI使用笔记 -- uniEdit篇

菜菜侠

已于 2024-02-01 08:54:31 修改

阅读量1k

点赞数 21

分类专栏： uniGUI Delphi 文章标签：笔记

于 2024-01-30 10:00:00 首次发布

本文链接：https://blog.csdn.net/qq_20041779/article/details/135914780

版权

Delphi 同时被 2 个专栏收录

7 篇文章 3 订阅

订阅专栏

uniGUI

6 篇文章 0 订阅

订阅专栏

菜菜侠的uniGUI使用笔记 – uniEdit篇

文章目录

菜菜侠的uniGUI使用笔记 -- uniEdit篇
前言
一、登录框的设置

前言

写这样一种常用控件的使用，其实是特别难的一件事儿，本篇希望通过一些例子，让熟悉Delphi传统C/S编程的朋友，能快速切换到uniGUI框架下的B/S编程。

一、登录框的设置

登录是应用软件必不可少的一个部分，在传统Delphi传统C/S编程的时候，我们的登录界面一般是这样的：
在这里插入图片描述
不能说这种界面不好看，看了多年、用了多年，已经熟悉了，呵呵。
但是到了B/S时代，登录框可以变一些花样：

可以看到，这样的登录框要简洁了很多，也美观了很多，当输入用户名与密码的时候，其交互非常友好。
在这里插入图片描述
那么怎么实现呢？
首先，设置UniServerModule的CustomCSS

输入如下CSS代码：

.icon-textfield:before {
    position: absolute;
    height: 100%;
    z-index: 9999;
    left: 5px;
    font-size: 16px;
    top: 25%;
}

.icon-textfield .x-form-text {
    padding-left: 30px;
}

这里设置了图标的大小、位置，以及UniEdit框内文字的左对齐位置。

然后在UniLoginForm的OnReady事件中输入如下代码，调用JS

procedure TLoginForm.UniLoginFormReady(Sender: TObject);
begin
  with UniEdit1, JSInterface do
  begin
    JSCall('inputWrap.addCls', ['fa fa-user icon-textfield']);
    JSCall('inputEl.setWidth', [Width-2]);
  end;
  with UniEdit2, JSInterface do
  begin
    JSCall('inputWrap.addCls', ['fa fa-key icon icon-textfield']);
    JSCall('inputEl.setWidth', [Width-2]);
  end;
end;

这里需要注意的是，设置编辑框的CSS一定要在窗口OnReady事件中进行。
其中字体图标的选择，请参考如下内容：
https://www.runoob.com/font-awesome/fontawesome-reference.html
uniGUI已经内置了Font Awesome图标的4.X免费版，在测试的时候，如果发现有些图标无法显示，那说明，你调用的是收费版了。至于如何在你实际应用系统中加入收费版或者其它图标，请自行在网上查找资料了。

当然，在Delphi中，uniEdit还有一些设置需要完善：