本篇主要讲讲以下几点:
-
如何创建一个自己的按钮
-
如何创建一个自己的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的倍数(我猜是为了整除,方便取图)
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贴图跟控制协议窗口显示与否的关联就做好了。
暂无评论内容