A small C library for building user interfaces with C, XML and CSS.
MIT License
Bot releases are hidden (Show)
Published by lc-soft over 4 years ago
Published by lc-soft over 4 years ago
DictType_StringKey
and DictType_StringCopyKey
have been replaced by inline functionsDictType_StringKey
and DictType_StringCopyKey
已改用内联函数代替LCUIDisplay_ShowRectBorder()
和 LCUIDisplay_HideRectBorder()
Published by lc-soft about 5 years ago
Published by lc-soft over 5 years ago
Published by lc-soft over 5 years ago
only_on_visible
规则,用于允许仅在部件可见时更新它 (93049c4)cache_children_style
规则,用于缓存子部件样式 (50cc6b2)first_update_visible_children
规则,用于优先更新可见的子部件 (4cd6fdc)Published by lc-soft almost 6 years ago
<resource>
support load xml file (d5e162c)<resource>
支持加载 xml 文件 (d5e162c)Published by lc-soft over 6 years ago
You can read this pull request for more details.
本次更新主要添加了对 Linux 的帧缓存(FrameBuffer)的支持,在没有 Xwindow 服务支持的字符终端模式下,LCUI 会改用 Linux 的帧缓存来输出图形内容,并直接从鼠标设备(/dev/input/mice)和标准输入(stdin)中读取用户输入。不过,这些支持并不完善,而作者也没有打算继续完善这块功能,理由很简单:没什么用,懒得浪费时间。如果你有丰富的 Linux 开发经验,可以向此项目提供改进方案,与其他人分享你的技术。
LCUI 的源代码中还有很多待改进的代码,包括:打算改、没时间改、懒得改和不想改的代码,其中有一部分代码已经用 FIXME 注释标记,这些注释中有的会说明为什么改进它,以及怎么改进它,如果你感兴趣,可以留意源代码中的 FIXME 注释内容,或者直接搜索 FIXME 注释,看看有哪些是可以帮上忙的。
更新日志中只列出了主要的改动,如需了解更多细节,请自行查看代码提交记录,或许以下命令会对你有所帮助。
# 只查看包含新特性(Feature)的提交信息
$ git log --pretty=format:"%h %ad %s %d" --date=short --grep "^feat"
ad3348ea 2018-04-22 feat(platform): add linux keyboard driver
0ff7b70e 2018-04-22 feat(platform): add linux mouse driver
6015838d 2018-04-22 feat(platform): add linux framebuffer driver
8c1d1056 2018-02-20 feat(widget-event): add "link" event, rename "remove" event to "unlink"
f032f6ff 2018-02-20 feat(timer): add LCUITimer_SetTimeout() and LCUITimer_SetInterval()
30de5b82 2018-02-11 feat(css): add parsing support for "border-left: 0;"
9193c0a5 2018-01-19 feat(textview): add word-break property support
cb7749d3 2018-01-16 feat(widget): add "disabled" attribute processing
7aaac407 2018-01-14 feat(widget): add `http://` and `file:` url support for anchor widget
9532d89a 2018-01-14 feat(widget): allow multiple widgets to have the same id
0616d855 2018-01-13 feat(mainloop): set mainloop to processing only one task per frame
adc8ba30 2018-01-07 feat(textlayer): add i tag support (#115)
# 只查看包含功能代码改动的提交信息(包括新功能、修复、重构、改进)
$ git log --pretty=format:"%h %ad %s %d" --date=short --grep "^\(feat\|fix\|refactor\|perf\)"
3a888110 2018-05-05 refactor(display): change to right type
b00139bc 2018-05-05 refactor: rename is_inited and is_working to active
090d1c40 2018-05-05 refactor: rename COLOR_TYPE_* to LCUI_COLOR_TYPE_*
de3bb33e 2018-05-05 refactor(graph): rename some functions
b113cf21 2018-04-23 refactor: SVT_* -> LCUI_STYPE_*
cb3c2a89 2018-04-23 refactor(input): LCUIKEY_* -> LCUI_KEY_*
4bf3f91f 2018-04-23 refactor(display): LCDM_* -> LCUI_DMODE, DET_* -> LCUI_DEVENT_*
0b01f88f 2018-04-22 fix(timer): timer thread may quit after it is created
5465c6bc 2018-04-17 fix(font): segmentation fault in DeleteFont()
78eeca61 2018-04-17 refactor(ime): add LCUIIME_ToUpperCase()
2538d79b 2018-04-15 refactor(platform): update ime selection in the linux
ad3348ea 2018-04-22 feat(platform): add linux keyboard driver
0ff7b70e 2018-04-22 feat(platform): add linux mouse driver
6015838d 2018-04-22 feat(platform): add linux framebuffer driver
eb04b2c3 2018-04-07 refactor(cursor): add LCUICursor_Paint(), remove unused code
0416c421 2018-03-27 fix(util): 'struct dirent' has no member named 'd_reclen' (#141)
7d577b0b 2018-03-13 refactor(textlayer): add "LCUI_" prefix for some type names
Published by lc-soft over 6 years ago
Published by lc-soft over 6 years ago
[bgcolor]
tag support (#110)[i]
tag support (#115)[b]
tag support (#112)WTT_RESIZE_WITH_SURFACE
task for sync surface size (#104)<w>
for <widget>
(#103)You can read this pull request for more details.
[bgcolor]
标签支持,用于设置文本背景色 (#110)[i]
标签支持,用于设置文本为斜体 (#115)[b]
标签支持,用于设置文本为粗体 (#112)WTT_RESIZE_WITH_SURFACE
任务类型,用于将表面(surface)大小与部件同步 (#104)<widget>
添加短名称 <w>
(#103)如需了解更多代码变更细节,请查看此次拉取请求,包含 121 次提交,净增 3.8K 行代码。当前版本还存在已知且未修复的问题,你可以在问题列表里找到它们。
居中和靠右是比较常用的对齐方式,比如对话框中的按钮组:
之前版本中如果要实现这种效果,需要修改定位方式和右间距:position: absolute; right: 0;
,一个按钮还好,多个按钮就得靠包装一个容器来定位,而且父级元素的宽高不会被撑开,始终为 0。为此,添加了简单的弹性(flex)布局支持,配合 justify-content 属性可以设置子级元素的对齐方式。justify-content 属性值有三种:flex-start、center 和 flex-end,效果是将每一行元素向左对齐、居中对齐、向右对齐。
之前的版本只能根据字族(font-family)名称选择一种字体,即使这个字族包含不同粗细程度、风格的字体也只会选择常规(Regular)字体,连给界面中的标题加粗都很麻烦。为此,改进了字体数据的存储和操作方式,添加支持按字重(font-weight)和风格(font-style)选择字体,CSS 解析器也添加了相关的解析支持。
由于大多数字体都不会包含所有粗细程度和风格的字形,所以会存在找不到的情况,而本次更新的版本只是改进了存储和访问方式,并未实现字形自动加粗和倾斜功能,为解决这个问题就添加了一个回退机制,回退机制的设计参考自 MDN 文档,如需了解具体规则可查看此文档内容。
既然字体已经支持使用粗体和斜体,那么文本层(TextLayer)也就顺势加上了 [i]
和 [b]
标签的支持,方便测试字体效果。有了 color、i、b 这几个标签,界面中的代码块也就能加点特效:
考虑到文本中会引用命令行和代码,为了凸显这些文本,需要能够设置背景色,于是就添加了 [bgcolor]
标签支持,比如内容为 [bgcolor=#ddeeff]make install[bgcolor]
的文本,渲染效果会是这样:
对于英文文本,如果在换行时直接截断单词则会影响阅读体验,需要将溢出的单词整个换到下一行显示,控制这个规则的属性是 word-break,默认值为 normal,不中断单词,当值为 break-all 时会在任意字符间断行。
一篇文档会需要用到各种字体来提升阅读体验,比如:等宽字体、中文字体、西文字体,用 LCUI 呈现这样的文档的话会有些麻烦,需要手动在 XML 或 C 代码中引入这些字体文件,而作者在为 LCUI 开发 CSS 组件库时也遇到同样的问题,如果能在 CSS 中预先定义好各种字体的信息就能够省去这些麻烦。
CSS 标准中的 @font-face
规则可以解决这个问题,于是 LCUI 就增加了对 @font-face
规则的解析支持,方便通过 CSS 代码来控制加载哪些字体。@font-face
能够定义包括字族、风格、粗细程度、文件路径等在内的字体信息,然而这些属性中只有文件路径有用,在解析完规则后会直接加载该文件路径里的字体文件,因为 LCUI 的字体管理还不支持预先声明字体信息和按需加载字体文件这两个功能。
添加了锚点(Anchor)部件,功能与 HTML 中的 <a>
元素类似,支持 href、target、key 属性,当该部件被点击后会判断 href 内容,如果是 https://
、http://
或 file:
类型的链接,则调用系统默认的打开方式打开它;如果是普通的文件路径则会将之视为 xml 文件载入它,载入成功后会将新元素追加至 target 指定的 id 的元素内。简而言之,可以靠该部件实现“点击按钮切换界面”的功能。
代码库的 Git 提交信息格式已经采用 Angular 提交信息规范 进行规范,方便为以后的版本收集改动内容。
版本号一直停留在 1.0.0 会浪费版本号的价值,但到目前为止,LCUI 内部函数命名还不够稳定,在后续版本更新中有可能会更名和移除,如果你有丰富的接口命名和模块化设计经验,可以向 LCUI 提交你的改进方案,以让 LCUI 尽早发布 1.0.0 版本。
Published by lc-soft over 7 years ago
如需了解更多代码变更细节,请查看此次拉取请求,包含 88 次代码提交,涉及 174 个文件,净增 6K+ 行代码。
这个版本已经引入 UWP 应用的驱动支持,基于 DirectX 11,封装了 UWP C++ 接口调用代码,源代码参考自 Visual Studio 提供的 DirectX 11 示例应用(通用 Windows),你可以在 src/platform/windows 目录下找到实现代码,示例应用代码在 build/windows/LCUIApp/App.cpp,编译生成 LCUIApp 项目即可查看运行效果。
该驱动代码单独放在 LCUIUWPApp 项目中,编译生成的是动态库(dll),需要与 LCUIUWP 项目一起使用。由于该项目只是做了简单的封装,没有对灵活性和扩展性做过多的考虑,因此,如果你有其它需求(例如在应用挂起、恢复时做一些操作),请手动修改该项目的代码。
如今高分屏在手机和笔记本上日渐普及,作为一个图形界面开发库,如果还停留在以像素(px)为单位设置界面元素的位置和大小的话,那么在各种分辨率下的视觉体验会惨不忍睹,因此,LCUI 在此次版本更新中添加了高分屏适配方案,原理很简单,让界面元素支持比例缩放,这样就能够根据屏幕像素密度以合适的缩放比例呈现界面内容。
除此之外,还添加了 dp 和 sp 度量单位,这两个度量单位参考自 Android,效果大致一样,相信 Android 程序员们对其最为熟悉,此处就不做详细说明了。
注:目前 LCUI 并不支持自动检测 dpi 来设置缩放比例,你需要手动设置缩放比例,这个问题会在后续版本中解决。
在以往的版本中,每次代码改动都有可能影响到正常功能,遇到这种情况只能人工手动运行程序来检查各项功能是否运作正常,既麻烦又浪费时间。在此次版本更新后这个情况会有所改善,部分主要功能模块已经有了对应的单元测试,在每次更新代码后,可以方便的根据自动化构建和测试结果来得知是否存在新 BUG。
有时一两处存在内存越界的代码可能不会影响到正常的运行结果,一旦数量多起来的时候就很容易让程序崩溃,更为奇特的是程序并不是固定在某个情况下崩溃的。为确保单元测试能够得到正常的结果,LCUI 引入了 valgrind 内存检查工具,并将内存检查结果作为测试是否通过的条件之一,以前堆积的内存访问越界和内存泄漏问题在这个版本中已经全部解决。
和其它 GPL 软件的套路一样,LCUI 添加了收费的商业授权许可,允许闭源商用,附带一点点技术支持服务。当然,这主要是为以后的可持续发展做些准备,现阶段并不指望有多少人会用。商业授权的收费并不贵,可能还不及某些实习生的半个月工资,你可以当作是聘用了个实习生花了几天时间写的界面库。
手写 CSS 代码和调整界面布局终究是一件麻烦的事情,就像 Web 前端程序员不用现成的 CSS 框架写网站一样,除了业务逻辑还要浪费时间写 CSS 代码调整页面效果。作者计划为此开发一个新的项目,包含 CSS 框架、常用界面组件、国际化支持(i18n)等,如果你是 Web 前端大佬,踩过一些坑,用过一些主流的 CSS 框架,可以在这里与作者交流心得体会,包括但不仅限于:工程目录划分、CSS 代码命名、编码规范、SCSS 技巧、界面配色及视觉效果这类内容。
相信很多人已经习惯看到那些活跃的开源项目,即使自己什么都不用做,它也能积极的发展下去,然而 LCUI 并不是那种有强大社区力量或雄厚资金支持的开源项目,所以,如果你有什么需求,请先阅读以下内容。
Published by lc-soft over 7 years ago
由于本次更新改动很大,所以版本号从 1.0 开始,主要更新内容如下:
原计划在此版本中添加缩放功能,用于适应各种分辨率的屏幕,但由于涉及到的地方比较多,所以该特性已经推迟到后续的版本中。
以下将针对几个主要改动做些简单的说明,如需要体验具体效果可以下载 LCUI 的功能旗舰级应用: LC's Finder。
本次比较大的改动是加入了对 XML 和 CSS 支持,为此 LCUI 的部件布局和样式处理也做了些整改,基本算是重写了一遍。相信写过图形界面应用的程序员们都会有这样的体验,只用编程语言来描述界面内容是一件很麻烦的事情,写了一坨代码却只是实现一些简单的布局和效果,可读性差且不易维护。XML 和 CSS 能够解决这种问题,界面的布局和结构可以用 XML 描述,目前支持的标签很少,书写起来会比较简单,就像下面这样。
<?xml version="1.0" encoding="UTF-8" ?>
<lcui-app>
<resource type="text/css" src="helloworld.css"/>
<resource type="application/font-ttf" src="C:/Windows/Fonts/comic.ttf"/>
<ui>
<widget id="text-hello" type="textview" class="text-hello">Hello, World!</widget>
<widget id="edit" type="textedit">Hello, World!</widget>
<widget id="btn-ok" type="button">Submit</widget>
</ui>
</lcui-app>
至于 CSS,你可以用它来描述界面元素的视觉效果,受限于现有条件,目前只支持简单的 CSS 样式,并且某些 CSS 样式的实际效果会根据 LCUI 的现有情况做一定的调整,属于定制版的 CSS。除了一些简单的样式外,你还可以靠 CSS 来使用图标字体,例如: FontAwesome 和 Material Design Icons,当然,这些图标字体附带的 CSS 文件并不能直接在 LCUI 中使用,需要做些修改,具体可以参考这篇文章。
对于比较复杂的界面,CSS 代码也会比较多,如果觉得这堆 CSS 代码写起来很麻烦,可以试试使用 sass、less 和 stylus 这类 CSS 预处理器来简化编码,就像下面这样。
当 CSS 代码比较多的时候,会很容易出现样式污染问题,在没有浏览器自带的开发人员工具情况下,这个问题处理起来会比较麻烦,但也不是没有办法,LCUI 提供了 Widget_PrintStyleSheets() 函数,可以打印出指定部件应用到的所有样式表内容,结果类似于下面这样。
selector(1612994007) stylesheets begin
[helloworld.css][rank: 11]
textview.text-hello {
margin-top: 25px;
margin-right: 25px;
margin-bottom: 25px;
margin-left: 25px;
padding-top: 25px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 25px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #000000;
background-color: #fafafa;
color: #8cc63f;
font-family (+): "Comic Sans MS";
font-size (+): 18px;
text-align (+): center;
}
[<none>][rank: 1]
* {
position: static;
display: block;
width: auto;
height: auto;
此处省略部分内容 ...
background-color: rgba(255,255,255,0);
}
[selector(1612994007) final stylesheet] {
此处省略部分内容 ...
}
selector(1612994007) stylesheets end
此版本虽然支持编译成 Windows 通用库/运行时组件,但并未包含 UWP 版的消息循环、键盘、鼠标、触控和图形输出的支持代码,这块的代码目前还在 LC's Finder 项目内,如有需要可以套用该项目的相关代码,后续版本会将这块的代码整理进来。