NSIS进阶教程(二)

NSIS进阶教程(二)自定义界面之Button、License窗口实现**前言**在上一节中我们粗略的处理一下无边框窗体、背景贴图、鼠标移动。这节主要是创建用于响应事件的Button以及能展示软件License的窗口，还能用Button控制软件协议的展示与否。代码还是延续上一节的。本篇主要讲讲以下几点：如何创建一个自己的按钮如何创建一个自己的Lice

dc_show

1876人浏览 · 2015-05-04 14:27:26

dc_show · 2015-05-04 14:27:26 发布

NSIS进阶教程(二)

自定义界面之Button、License窗口实现

**前言**

在上一节中我们粗略的处理一下无边框窗体、背景贴图、鼠标移动。这节主要是创建用于响应事件的Button以及能展示软件License的窗口，还能用Button控制软件协议的展示与否。

代码还是延续上一节的。

本篇主要讲讲以下几点：

如何创建一个自己的按钮
如何创建一个自己的License窗口
如何用自己的按钮控制自己的License窗口事件

所用到的插件：

nsDialogs
SkinBtn

**讲义**

首先贴出一个今天教程的完整的例子（附带图片）猛击这里

本文还是在安装程序的首张Welcome中执行，上一节例子中的背景图需要做适当的修改，因为原本需要创建Button的地方背后有图，适当用PS去抹去就好。本文的前期工具就是PS了一部分元素。加入了几张Button的背景图。

创建一个属于自己Design的Button
```
;下一步
    ${NSD_CreateButton} 319 303 88 25 ""
        Pop $Btn_Next
        StrCpy $1 $Btn_Next
        Call SkinBtn_Next
        GetFunctionAddress $3 onClickNext
    SkinBtn::onClick $1 $3
```
原本nsDialogs插件就可以用${NSD_CreateButton}命令创建一个Button按钮出来，可惜的是此Button按钮默认的有点丑。

下面就要说到如何改观Button的样式，再接触之前我一直想找有没有用一张图片来替代Button的区域，并且给Image附上事件之类的想法。等到刘若英的后来，我发现有一个SkinBtn的插件可以完成此类工作。

SkinBtn是我在梦想吧中下载的一个第三方插件，国人开发，支持Button的五种状态：Normal，Hover，Click，Disabled，Focus，正常、鼠标悬浮、单击时、不可用时、获得焦点时。这五种状态已经完全够用了。

所要注意的就是SkinBtn的五种状态图需要竖行排列，宽高没有限制，但是高度像素最好的5的倍数（我猜是为了整除，方便取图）下面贴一张示例Button的贴图：

SkinBtn的用法是这样的：

在.onInit的初始化图片资源，并且要用SkinBtn插件的方法初始化一下：
```
File `/ONAME=$PLUGINSDIR\btn_next.bmp` `images\btn_next.bmp`
SkinBtn::Init "$PLUGINSDIR\btn_next.bmp"
```
紧接着Call以下方法，给当前的Button附上定义的图形：
```
Function SkinBtn_Next
  SkinBtn::Set /IMGID=$PLUGINSDIR\btn_next.bmp $1
FunctionEnd
```
现在窗体中的按钮已经被处理成自己想要的效果了，这时候衣服算是穿起来了，我们再试一试他的功能怎么样，我们定义一个onClickNext的function，然后调用SkinBtn插件的onClick方法进行调用：
```
GetFunctionAddress $3 onClickNext
    SkinBtn::onClick $1 $3
```
```
;下一步按钮事件
Function onClickNext
  MessageBox MB_OK "下一步"
  Abort
FunctionEnd
```
单击事件里面只做了弹出消息框这么一个临时的操作，后面的教程中会说明怎么弹到另一张page中，今天这里不谈。

这样一个自己的贴图的Button，从外观到功能都已经完成了。
创建显示License内容的控件

关于License的框如何显示的问题，NSIS的默认窗体有一个专门的协议Page，不过在我们的自定义Page中就不说那个了，在我们的Welcome页面中加入一个协议显示的窗口，这时候需要准备一个协议按钮的贴图，协议窗口。

协议的按钮样子看上去是超链接，我们可以通过Button贴图去实现，不要一味认死理去创建超链接的命令。因为有两种状态，所以有两份贴图。

图片预载入跟贴图的步骤就不说了，这里初始化该Button的时候是默认的箭头向上的图，我们只要额外的创建一个变量来控制点击的状态，并且在按钮点击事件中重新给Button贴上第二张箭头向上的图就可以实现按钮的贴图跟功能的统一：
```
Function SkinBtn_Agreement1
  SkinBtn::Set /IMGID=$PLUGINSDIR\btn_agreement1.bmp $1
FunctionEnd
                                                                                                  
Function SkinBtn_Agreement2
  SkinBtn::Set /IMGID=$PLUGINSDIR\btn_agreement2.bmp $1
FunctionEnd
                                                                                                  
;协议按钮事件
Function onClickAgreement
    ${IF} $Bool_License == 1
        IntOp $Bool_License $Bool_License - 1
        StrCpy $1 $Btn_Agreement
        Call SkinBtn_Agreement1
    ${ELSE}
        IntOp $Bool_License $Bool_License + 1
        StrCpy $1 $Btn_Agreement
        Call SkinBtn_Agreement2
    ${EndIf}
FunctionEnd
```
以上代码中，onClickAgreement方法是Button的点击响应事件，变量Bool_License是控制显示那张Button背景图的控制单元，它的初始值是0，IF判断中写的是当前状态下需要处理的事件。IntOp命令是执行加减运算。

这样，一个根据点击来更改背景图片的按钮就做好了。
用自定义的按钮去控制License窗口的显示

在做License之前首先要准备一份License的文件，NSIS命令中有读取文件，显示文件内容的命令，该文件可以是Txt，也可以是带有格式的RTF，这里示例中选用RTF文件。在源码包的RTF协议用的KuGou的。而用于显示RTF的控件则是nsDialogs插件提供的RichEdit20A，还要注意引入头文件LoadRTF.nsh
```
;读取RTF的文本框
    nsDialogs::CreateControl "RichEdit20A" \
    ${ES_READONLY}|${WS_VISIBLE}|${WS_CHILD}|${WS_TABSTOP}|${WS_VSCROLL}|${ES_MULTILINE}|${ES_WANTRETURN} \
    ${WS_EX_STATICEDGE} \
    5 44 500 203 ''
    Pop $Txt_License
    ${LoadRTF} '$PLUGINSDIR\license.rtf' $Txt_License
    ShowWindow $Txt_License ${SW_HIDE}
```
以上代码就是创建读取RTF文件的多行文本框，并且设定了一些常用的属性，具体的样式属性可以通过查询nsDialogs插件的官方文件可以得到，我们让该控件默认是不显示的状态。

这样一个，协议的显示控件就创建完毕了。

创建好了协议控件$Txt_License，那么接着就是用刚才创建的Button控制该窗口的显示与否，修改刚才的代码：
```
;协议按钮事件
Function onClickAgreement
    ${IF} $Bool_License == 1
        ShowWindow $MiddleImage ${SW_SHOW}
        ShowWindow $Txt_License ${SW_HIDE}
        IntOp $Bool_License $Bool_License - 1
        StrCpy $1 $Btn_Agreement
        Call SkinBtn_Agreement1
    ${ELSE}
        ShowWindow $MiddleImage ${SW_HIDE}
        ShowWindow $Txt_License ${SW_SHOW}
        IntOp $Bool_License $Bool_License + 1
        StrCpy $1 $Btn_Agreement
        Call SkinBtn_Agreement2
    ${EndIf}
FunctionEnd
```
在事件当中，加入隐藏中间背景图跟显示License窗口的代码，这样一个修改Button贴图跟控制协议窗口显示与否的关联就做好了。