嘘~ 小破站正在拼命加载中 . . .

【PB案例学习笔记】-19制作一个图片按钮


写在前面

这是PB案例学习笔记系列文章的第19篇,该系列文章适合具有一定PB基础的读者。

通过一个个由浅入深的编程实战案例学习,提高编程技巧,以保证小伙伴们能应付公司的各种开发需求。

文章中设计到的源码,小凡都上传到了gitee代码仓库https://gitee.com/xiezhr/pb-project-example.git

gitee代码仓库

需要源代码的小伙伴们可以自行下载查看,后续文章涉及到的案例代码也都会提交到这个仓库【**pb-project-example**】

如果对小伙伴有所帮助,希望能给一个小星星⭐支持一下小凡。

一、小目标

在本案例中我们将制作一个窗口的图片按钮。

程序运行后,在弹出的“图片按钮”窗口中有三张图片,每当鼠标移动到一个图片时,图片就会显示按钮形状,同时画面也会改变。

具体功能如下图所示。单击第一张图片,即“开关”时,中间的图片标题会在OnOff 之间变换,相应的图片也会随之改变。

单击最后一张图片时,会弹出一个说明窗口

图片按钮

有小伙伴可能会问,这样的案例在实际中有什么用呢?

实际开发中,我们只需要在这个案例上进行改良,就可以制作出一个权限导航栏窗口。

根据登录用户所具有的权限,导航栏中显示不通过模块,通过点击某个模块“图片按钮”进入到不通的模块。

权限导航栏

二、创作思路

在本次案例中,我们会用到可视化用户对象。我们只需制作一个图片按钮,就可以重复使用。

避免应用程序编写相同活相近的代码的麻烦,提高了应用程序的可维护性。

① 什么是可视化用户对象呢?

这个我们在上一个案例中用到过,它是一个可重用控件或一组完成一定功能的控件。

当这个用户对象定义之后,在应用程序需要这种用户对象的地方就可以反复使用它,并且修改一次,

就可以把修改的结果反应到所有使用该用户对象的地方。

就像本案例中的图片按钮,

② 可视化用户对象分类

  • 标准可视化用户对象(Standard Visual User Object
  • 定制可视化用户对象(Custom Visual User Object
  • 外部可视化用户对象(External Visual User Object

③ 怎么使用?

本案例中我们使用定制可视化用户对象 来制作图片按钮,定制可视化用户对象将多个控件及用户对象组合成一个整体,

完成一定功能和操作。放置在窗口上的可视化对象作为一个整体来使用,其类型为UserObject!。 就像放置在窗口上的其他控件一样

应用程序通过窗口的属性数字Control[]来访问定制可视化用户对象

三、创建程序基本框架

有了基本思路之后,我们就动起来开始写程序了

① 新建examplework 工作区

② 新建exampleapp应用

③ 新建w_main窗口,并将其Title设置为”图片按钮”

由于文章篇幅的原因,以上步骤就不再赘述,如果忘记的小伙伴可以翻一翻该系列第一篇文章复习一下

四、创建定制可视用户对象

① 新建定制可视化用户对象

单击工具栏上的File-->New 命令,在弹出的New对话框PB Object选项卡中选择Custom Visual 图标

单击【OK】按钮,完成可视化对象创建

创建可视化用户对象

② 在可视化用户对象中添加控件

在新建的用户对象中添加如下控件

  • 2个StaticText控件,并命名为st_backst_pic
  • 1个Picture 控件,并命名为p_pic
  • 4个Line控件,并命名为ln_1ln_2ln_3ln_4

③ 设置各个控件的属性

  • st_back控件的BorderStyle值设置为StyleRaised!,Enable值为True
  • st_pic控件的Alignment值设置成Center!,Enable值为False
  • p_pic控件的PictureName值设置成bmp\bbgrow.bmp,Enable值为False
  • ln_1ln_2LineColor值设置为Black
  • ln_3ln_4LineColor值设置为White

④ 设置各个控件的大小位置

属性 st_back st_pic p_pic
X 5 5 14
Y 4 140 8
Width 160 160 146
Height 192 56 128
属性 ln_1 ln_2 ln_3 ln_4
BeginX 0 0 169 0
BeginY 0 0 0 196
EndX 0 169 169 169
EndY 196 0 196 196

最终建立好之后如下图所示

可视化对象布局

⑤ 保存用户定制化对象为uo_pic

五、编写定制化对象代码

① 定义uo_pic对象实例变量

定义实例变量

string cmd="文字"
string pic1="BMP文件名"
string pic2="BMP文件名"
boolean getcur=false

② 在uo_pic对象中添加uf_line(boolean bshow) return (none) 函数,代码如下

int xi
int yi

xi=PixelsToUnits(1, XPixelsToUnits!)
yi=PixelsToUnits(1, YPixelsToUnits!)

ln_1.visible=bshow
ln_2.visible=bshow
ln_3.visible=bshow
ln_4.visible=bshow

ln_1.beginx=xi
ln_1.beginy=yi
ln_1.endx=this.width - xi
ln_1.endy=yi
ln_2.beginx=xi
ln_2.beginy=yi
ln_2.endx=xi
ln_2.endy=this.height - yi
ln_3.beginx=this.width - xi
ln_3.beginy=yi
ln_3.endx=this.width - xi
ln_3.endy=this.height -yi
ln_4.beginx=xi
ln_4.beginy=this.height - yi
ln_4.endx=this.width -xi
ln_4.endy=this.height - yi

③ 在uo_pic对象中添加uf_lostcur() reurn (none) 函数,代码如下

if getcur=true then
    p_pic.picturename=pic1
    if ( p_pic.y + p_pic.height ) > (st_back.y + st_back.height - st_pic.height) then p_pic.height = st_back.y + st_back.height - st_pic.height - p_pic.y
    if p_pic.width > st_back.width then p_pic.width = st_back.width
    uf_line(false)
    getcur=false
end if

④ 在uo_pic对象中添加uf_lower() reurn (none) 函数,代码如下

ln_1.linecolor=0
ln_2.linecolor=0
ln_3.linecolor=16777215
ln_4.linecolor=16777215

⑤ 在uo_pic对象中添加uf_raise() reurn (none) 函数,代码如下

ln_1.linecolor=16777215
ln_2.linecolor=16777215
ln_3.linecolor=0
ln_4.linecolor=0

⑥ 在uo_pic对象中添加uf_set(boolean bp) reurn (none) 函数,代码如下

int xi,yi,yi1

xi=PixelsToUnits(2, XPixelsToUnits!)
yi=PixelsToUnits(2, YPixelsToUnits!)
yi1=PixelsToUnits(1, YPixelsToUnits!)

st_back.width=this.width - xi*2
st_back.height=this.height - yi*2
st_back.x=xi
st_back.y=yi

if bp then
    p_pic.picturename=pic1
    if pic1="" then
        p_pic.visible=false
    else
        p_pic.visible=true
    end if
else
    p_pic.picturename=pic2
    if pic2="" then
        p_pic.visible=false
    else
        p_pic.visible=true
    end if
end if    

if p_pic.width > st_back.width then p_pic.width = st_back.width
if p_pic.height > st_back.height then p_pic.height = st_back.height
p_pic.x=st_back.x + (st_back.width - p_pic.width ) / 2
if cmd="" then
    st_pic.visible=false
    p_pic.y=(st_back.height - p_pic.height ) /2
else
    st_pic.text=cmd
    st_pic.x=xi
    st_pic.width=st_back.width
    st_pic.y=this.height - st_pic.height - yi
    p_pic.y=st_pic.y - p_pic.height - yi1
end if
if p_pic.y < yi then p_pic.y=yi
if ( p_pic.y + p_pic.height ) > (st_back.y + st_back.height - st_pic.height) then p_pic.height = st_back.y + st_back.height - st_pic.height - p_pic.y

⑦ 在uo_pic对象中添加uf_setpic(string picf1,string picf2) return (none)函数,代码如下

pic1=picf1
pic2=picf2
uf_upper()
uf_line(false)
uf_set(true)

⑧ 在uo_pic对象中添加uf_upper() return (none)函数,代码如下

ln_1.linecolor=16777215
ln_2.linecolor=16777215
ln_3.linecolor=0
ln_4.linecolor=0

⑨在uo_pic对象的Constructor事件中添加如下代码

st_back.border=false
st_pic.border=false
this.border=false
uf_setpic(pic1,pic2)

⑩ 在uo_pic对象中添加lostcur() returns(none)事件,代码如下

parent.triggerevent("mousemove")

⑪在uo_pic对象中添加setpic(string picf1,string picf2) returns(none)事件,代码如下

pic1=picf1
pic2=picf2
uf_setpic(pic1,pic2)

⑫ 在uo_pic对象中添加无脚本的clicked() returns long[pbm_bnclicked] 事件

⑬ 在uo_pic对象中添加无脚本的Mousemove(unsignedlong flags,integer xpos,integer ypos) returns long[pbm_mousemove] 事件

⑭在uo_pic对象的st_back控件的Clicked事件中添加如下代码

long li
uf_lower()
uf_set(true)
li=cpu()
do
    yield()
loop while cpu() < (li + 250)
uf_upper()
uf_set(false)
parent.triggerevent("clicked")

⑮ 在uo_pic对象的st_back控件的Mousemove事件中添加如下代码

if getcur=false then
    parent.triggerevent("lostcur")
    uf_upper()
    uf_line(true)
    uf_set(false)
    parent.triggerevent("mousemove")
    getcur=true
end if

⑯ 在st_back控件添加无脚本的loscur() returns(none)事件

六、w_main窗口中添加控件

① 添加定制可视用户对象

单击菜单栏Insert-->Control命令,在列表框中选择User Object命令。

然后再弹出的Select Object对话框中选择uo_pic对象,单击【ok】按钮,在窗口中单击鼠标,添加uo_pic对象。

使用相同的方法,在窗口中添加3个uo_pic对象,名称分别为uo_1uo_2uo_3

②设置可视用户对象。

  • uo_1控件的cmd属性设置为“开关”

  • uo_2控件的cmd属性设置为“ON”

  • uo_3控件的cmd属性设置为”About”

③ 想窗口中添加一个CommandButton控件,其Text值设置为”退出”,调整控件位置为下图所示

控件布局

④ 保存w_main窗口

七、编写窗口w_main事件代码

① 在w_main窗口中添加实例变量

string f1pic[3]
string f2pic[3]
string f3pic[3]

② 在w_main窗口中设置Local External Function 局部扩展函数

 FUNCTION long ShellExecuteA( long hWnd, REF String ls_Operation, REF String ls_File, REF String ls_Parameters, REF String ls_Directory, INT nShowCmd ) library 'shell32'

③ 在w_main窗口的Open事件中添加如下代码

f1pic[1]="1-1.bmp"
f2pic[1]="1-2.bmp"
f3pic[1]="1-3.bmp"
f1pic[2]="10-1.bmp"
f2pic[2]="10-2.bmp"
f3pic[2]="10-3.bmp"
f1pic[3]="12-1.bmp"
f2pic[3]="12-2.bmp"
f3pic[3]="12-3.bmp"

④ 在w_mainActivate事件中添加如下代码

uo_1.uf_setpic(f3pic[1],f1pic[1])
uo_2.uf_setpic(f3pic[3],f1pic[3])
uo_3.uf_setpic(f3pic[2],f1pic[2])

⑤ 在w_mainMousemove事件中添加如下代码

uo_1.uf_lostcur()
uo_2.uf_lostcur()
uo_3.uf_lostcur()

⑥ 在uo_1clicked事件中添加如下代码

if uo_2.enabled=true then
    uo_2.uf_setpic(f2pic[3],f2pic[3])
    uo_2.st_pic.text="OFF"
    uo_2.enabled=false
else
    uo_2.uf_setpic(f3pic[3],f1pic[3])
    uo_2.st_pic.text="ON"
    uo_2.enabled=true
end if

⑦ 在uo_3Clicked事件中添加如下代码

MessageBox("说明","本例演示了PowerBuilder中使用图片按钮的方法",Information!,OK!)

⑧ 在cb_1按钮的Clicked事件中添加如下代码

close(w_main)

⑨在开发界面左边的System Tree窗口中双击exampleapp 应用对象,并在其Open事件中添加如下代码

open(w_main)

八、运行程序

这个案例的代码真多,终于写完了。来看看效果如何

图片按钮


文章作者: xiezhr
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 xiezhr !
评论
  目录