LCUI.css 0.1.0 Alpha 开发日志

发表于2017年11月04日

2018-01-10

完善了一下 markdown 文档转换工具,添加了代码块高亮处理。主要原理是处理 pygments 输出的 html 代码,将 span 标签转换为 TextLayer 支持的样式标签。标签的属性值来自 pygments 自带的样式表,为此还手动把 css 样式表改用 python 的字典对象来存储。

2018-01-03

设计勾选框组件时想到了个问题:当界面上有多个勾选框时,如何方便的获取用户选中的勾选框?最容易想到的方法是给每个勾选框设置 ID,然后靠 C 代码来取状态,这种做法太普通,需要设计一种新的方法,能够仅靠几行代码取出所有选中勾选框的值。

现在想到的方法是建立一个全局的数据仓库,让组件能够将状态存储到仓库里,供用户代码访问,举个例子:

<w type="checkbox" data-bind="my-words" value="hello" />
<w type="checkbox" data-bind="my-words" value="ok" />
<w type="checkbox" data-bind="my-words" value="good" />

当用户在界面上勾选上述几个勾选框后,勾选框就会将 value 属性指定的内容插入到数据仓库里的 my-words 字段里,用户代码可以靠 my-words 字段访问数据,类似于下面这样。

LCUIEx_DataStoreField field;
field = DataStore_GetField( store, "my-words" );
if( DataStoreField_IsArray( field ) ) {
        field->array; // 一个链表
}

要是再在此基础上为每个字段加上读/写事件监听功能的话,就能实现简单的数据绑定了,例如:

<w if="my-words">
  <w type="textview" data-bind:text="my-words"></w>
</w>

当数据仓库里的 my-words 字段存在且有内容时,渲染里面的 textview 部件,并将 my-words 字段内容转换成字符串,作为 textview 部件的 text 属性,让 textview 部件渲染 text 属性内容。

用户代码往 my-words 里写数据可以这样:

LCUIEx_DataStoreField field;
field = DataStore_GetField( store, "my-words" );
DataStoreField_BeginWrite( field );
DataStoreArrayField_PushString( field, "good" );
DataStoreField_EndWrite( field );

修改前调用 DataStoreField_BeginWrite() 锁定该字段,然后往数组里追加字符串 "good",修改完后调用 DataStoreField_EndWrite() 解除锁定并触发写事件。界面上的勾选框在收到写事件后会自动更新自身状态,这里示例添加的是字符串 "good",那么第三个勾选框就会自动被勾选。

2017-12-30

准备为 LCUI.css 设计个图标,主要包含以下特征:

综合上述特征,最终的图标就是下面这样。都用一个颜色感觉很单调,所以将加号颜色弄淡了点,凸显加号。看上去还是有点简陋,等以后有新想法时再考虑改改。

2017-12-17

简单的 click 事件处理还要写 C 代码感觉很麻烦,可以像 Bootstrap 那样通过为元素设置 data-toggle 和 data-target 属性来处理,比如将 data-toggle 和 data-target 属性的值分别设置为 modal 和模态框的 id,这样点击按钮时就会显示模态框。还有 data-dismiss 也是,当值为 modal 时,会隐藏当前按钮所在的模态弹框。这两个功能实现起来很简单,为根部件绑定 click 事件,等事件冒泡到根部件时再判断触发事件的部件是否有 data-toggle 或 data-dismiss 属性,然后进行相应的处理。

2017-11-15

添加了 container 使用示例,示例内容是常见的导航栏+内容+侧边栏布局,由于 LCUI 不支持 float 布局,用了其它方法实现了类似的布局效果。

2017-11-04

用 xml 语法写文档感觉很麻烦,要写很多标签,而且只能在 LCUI 应用程序中看到效果,以后要是搞适用于浏览器的版本,还要重新弄个 HTML 版的文档。花了几个小时写了个文档转换工具,能够将 markdown 文档转换为适用于在 LCUI 应用程序中呈现的 xml 文档,主要就是简单的标签替换,这样即使不借助 LCUI 应用程序,也能直接在代码库里查看文档。

示例代码方面,主要参考 Bootstrap 文档中的效果,上面一块效果预览,下面一块代码,为实现这种效果,对 blockcode 做了处理,如果文档中的代码块的语言名称是以 demo-xml 结尾的,则输出两个内容,一个是 xml 代码,给 LCUI 解析并呈现效果,一个是转义后的 xml 代码,用于展示代码。

对此文章有疑问?你可以点击此链接反馈你的问题