Content Table
2018-05-13

自定义按钮组

如下的按钮组相信大家都看到过，最左和最右的按钮是圆角的，中间的按钮是矩形的，同时只能有一个按钮是选中状态：

按钮的样式使用 QSS 实现，使用 setProperty 设置按钮的 class 属性为 GroupButton，就可以利用类选择器 .GroupButton 选择按钮组的按钮，避免它们的样式影响到普通按钮。为了单独设置最左和最右按钮的样式，使用 setProperty 为其设置一个属性 position，最左按钮的为 first，最右按钮的为 last，然后就能使用属性选择器 .GroupButton[position="first"] 和 .GroupButton[position="last"] 选择它们了。

阅读全文

2018-05-04

SpringMVC 使用 @PathVariable 获取有 . 的 URL 中的变量 

1
2
3
4
5
@GetMapping("/api/file/{filename}")
@ResponseBody
public String foo(@PathVariable String filename) {
    return filename;
}

默认配置时，不同的 URL ，获取到的 filename 为:

  • /api/file/foo，filename 为 foo
  • /api/file/foo.pdf，filename 为 foo
  • /api/file/foo.pdf.png，filename 为 foo.pdf
  • /api/file/foo.pdf.png.doc，filename 为 foo.pdf.png

最后一个 . 被截断了，解决这个问题有 2 中方法:

  • 使用正则表达式进行路径匹配，映射为：@GetMapping("/api/file/{filename:.+}")

    • 缺点：每个路径的映射都要写一遍，不方便
    • 优点：缺点也是优点，只影响需要的路径

  • 配置 annotation-driven，映射为：@GetMapping("/api/file/{filename}")

    • 优点：只需要配置一次，整个应用都生效，方便
    • 缺点：优点也是缺点，影响了整个系统，不过还没有发现对整个系统有什么副作用
    1
    2
    3
    4
    <mvc:annotation-driven>
        <mvc:path-matching registered-suffixes-only="true"/>
        ...
    </mvc:annotation-driven>

阅读全文

2018-04-24

QTreeView 小集

树形控件是非常常用的，例如组织结构、目录树、省市县的地区结构等都是典型的树形结构，Qt 里可以使用 QTreeView 和 QTreeWidget 来展示树形结构，这里我们只介绍 QTreeView 的使用，QTreeView 本身只用于树的显示，树的数据由 QStandardItemModel 来存储。

创建单列树

创建单列树的节点分两种情况：

  • 创建第一级节点调用函数 QStandardItemModel::appendRow(QStandardItem *item)
  • 创建第二级、第三级等非第一级节点调用函数 QStandardItem::(QStandardItem *item)

下面的例子创建省市县的树形结构展示如何创建只有一列的树，为了更好的从变量名上看出地区的关系，使用数字和层级的方式进行命名，程序运行结果如下：

阅读全文

2018-04-22

去掉 png 图片的 iCCP 警告

Qt 中使用 png 图片有时候会给出警告 libpng warning: iCCP: known incorrect sRGB profile:

Libpng-1.6 is more stringent about checking ICC profiles than previous versions. You can ignore the warning. To get rid of it, remove the iCCP chunk from the PNG image.

Some applications treat warnings as errors; if you are using such an application you do have to remove the chunk.

解决办法：

  1. 安装 ImageMagick (Mac: brew install ImageMagick)
  2. 到图片文件夹，执行命令 mogrify *.png 去掉此文件夹下 png 图片的 iCCP 警告

要想找出有 iCCP 问题的 png 图片，可以使用工具 pngcrush:

  1. 安装 pngcrush (Mac: brew install pngcrush)
  2. 到图片文件夹，执行命令 pngcrush -n -q *.png 找出有 iCCP 警告的图片

更多细节请参考 libpng warning: iCCP: known incorrect sRGB profile。

2018-04-19

一次 HTTP 被运营商劫持的血泪史 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <script src="/js/jquery.js" charset="utf-8"></script>
    <script src="/js/paper.js" charset="utf-8"></script>
</head>

<body>
    <script>
        $(document).ready(function() {
            __Exam_PaperInit();
        });
    </script>
</body>

</html>

很简单的页面，jquery.js 和 paper.js 加载完，然后调用 __Exam_PaperInit() 进行初始化。在办公室、家里都没出现过问题，但是在学校的机房里访问这个页面，时不时的出错，提示如 __Exam_PaperInit() 不存在，这么简单直接的逻辑，咋会出错呢，想不明白，猜测例如是不是机房的环境网络设置有问题等，但花了很久仍然找不到原因，更要命的是，系统过几天就有几千人要用来考试了，问题解决不了的话，可以想象影响会有多大。

阅读全文

2018-04-15

iTerm 设置

高亮输出

不同的输出显示为不同的颜色，例如下面的 [DEBUG] 的信息暗一些

Preferences > Profiles > Advanced > Triggers > Edit: 使用正则表达式进行设置，Action 选择为 Highlight Text...

阅读全文

2018-03-27

GitBook 使用 Coding.net 的 Pages 访问

GitBook 生成的静态网页文件在 _book 目录中，下面介绍怎么把它发布到 coding.net 的 Pages 服务中，这样就能够通过网络访问了。

  1. 在 https://coding.net 创建一个账号 xtuer(下面请换为自己的账号)

  2. 创建仓库 2 个仓库 fox 和 fox-doc (仓库名字随意取)：

    • fox-doc: GitBook 源文件
    • fox: GitBook 生成的静态文件

  3. 克隆这 2 个仓库到本地的同一个文件夹下

    • git clone git@git.coding.net:xtuer/fox.git
    • git clone git@git.coding.net:xtuer/fox-doc.git

阅读全文

2018-03-20

右键菜单

右键菜单有多种实现方式:

  • 设置 contextMenuPolicy 为:
    • Qt::ActionsContextMenu
    • Qt::CustomContextMenu
  • 重写 contextMenuEvent 函数

下面就分别介绍这几种右键菜单的实现。

阅读全文

2018-03-09

iView 的 Table 中插入按钮

很多时候需要在 Table 的单元格中使用按钮，iView 的官方例子使用函数 createElement (简写 h) 来创建，但是代码很繁杂、不直观、难以实现复杂的 DOM 结构。还好除此之外可以使用 JSX 来实现，能够方便的增加 class、wrapper、图标、任意的 DOM 等。

JSX 实现

1
2
3
4
5
6
7
8
9
10
11
{ title: '操作', key: 'action', width: 160, align: 'center',
    // 编辑和删除按钮
    render: (h, params) => {
        return (
            <div class="cell-button-container">
                <i-button type="primary" size="small" onClick={()=>{this.editSchool(params.index)}}   icon="edit">编辑</i-button>
                <i-button type="error"   size="small" onClick={()=>{this.deleteSchool(params.index)}} icon="android-delete">删除</i-button>
            </div>
        );
    }
}

提示:

  • 按钮的标签使用 <i-button>，不能使用 <Button>
  • 按钮的事件处理 vue 中为 on-click，但在 JSX 中为 onClick

阅读全文