autoit
发表于 2008-5-3 14:20:01
GUI设计与制作入门(一)
<span>本人学习</span><span>AutoIt</span><span>还不到一年,可以说是新手,但在学习过程中得到众多</span><span>AutoIt</span><span>爱好者</span><span>(</span><span><strong><span>konan</span></strong><strong><span>、</span><span>del888</span></strong><strong><span>、</span><span>COCO</span></strong><strong><span>等</span></strong></span><span>)</span><span>的大力帮助和有益启发。下文的编写纯属个人理解,深入学习还得看原文帮助文件。</span><span><br /></span><span>AutoIt</span><span>发展至今</span><span>(</span><span>已到</span><span>V3.10</span><span>版</span><span>)</span><span>,在</span><span>GUI(</span><span>图形界面</span><span>)</span><span>方面有不同程度的改进和提高。从目前函数语句增加情况看,设计一些比较复杂的应用程序应当说是不成问题的。我预测随着</span><span>AutoIt</span><span>版本进一步提高,</span><span>GUI</span><span>的设计功能将大大增强,到时</span><span>GUI</span><span>设计的编写器就如同</span><span>VB6</span><span>图形设计编写器一定能为我们设计程序应用提供极大的方便。</span><span><br /></span><span><span> </span>AutoIt</span><span>中的</span><span>GUI</span><span>是我们设计</span><span>AutoIt</span><span>可视应用程序的重要组成部分,也是基础部分。下面,我将从窗口的设计讲起。</span><span><span> </span><br /></span><span><span> </span></span><strong><span>(一)窗口的设计</span></strong><strong><span><br /></span></strong><span><span> </span></span><span>在</span><span>GUI</span><span>设计中,窗口的设计是最基本的。窗口一般由窗口名、窗口外形、窗口背景颜色和按钮等组成。</span><span><br /></span><strong><span>1、窗口设计的<span>完整原文语句。</span></span></strong><span><span>GUICreate ( "title" [, width [, height [, left [, top [, style [, exStyle [, parent]]]]]]] )</span><strong><span><br /></span></strong></span><span>窗口的基本语句是<strong>:</strong></span><strong><span><br /></span></strong><span> GUICreate("</span><span>窗口的设计</span><span>", 200, 100)<br /></span><span>在窗口的基本语句中:“窗口的设计”就是窗口文件名;“</span><span>200</span><span>”就是窗口的宽;“</span><span>100</span><span>”就是窗口的高。下面请看例子:</span><span><br /></span><strong><span>2、简单窗口的脚本(红色部分)与注解。<br /></span></strong><span>#i nclude <GUIConstants.au3></span><span>:</span><span>#i nclude <</span><span>外部脚本名称</span><span>><span><br /></span></span><span>#i nclude</span><span>指</span><span>包括所需的常量和变量。写任何</span><span>GUI</span><span>脚本都必须在脚本最前面写入</span><span> <span>#i nclude <GUIConstants.au3> </span></span><span>语句</span><span>。</span><span><br /></span><span>GUICreate("</span><span>我的窗口</span><span>")<span> </span><br /></span><span>默认时可不用标明宽与高,默认值一般是</span><span>400</span><span>与</span><span>400</span><span>。窗口的宽与高也可以使用变量来设计。如:</span><span>$width=500</span><span>, </span><span>$height=500</span><span>。<span><br /></span></span><span>例子如下:<span><br /></span></span><span>$width=500<br /></span><span>$height=500<br /></span><span>GuiCreate("</span><span>我的窗口</span><span>",$width,$height,(@DesktopWidth-$width)/2, (@DesktopHeight-$height)/2)<br /></span><span>注解:</span><span>(@DesktopWidth-$width)/2</span><span>为屏幕左边到窗口的距离;</span><span>(@DesktopHeight-$height)/2</span><span>为屏幕顶部到窗口的距离。屏幕</span><span>宽与高是与显示器的分辩率一致的。另外还有风格函数可以继续往后加入,但意义不是很大。<span>对于初学者建议用简单的方法。如</span></span><span>GuiCreate("</span><span>我的窗口</span><span>",200,100)</span><span>。要注意的是,窗口</span><span>宽与高的值不要大于显示器的分辩率值。</span><span><br /></span><span>GUISetState (@SW_SHOW) <br /></span><span>显示窗口。如果</span><span>@SW_SHOW</span><span>改为</span><span>@SW_HIDE</span><span>则窗口隐藏。详情见帮助文件:</span><span>GUISetState</span><span>项中的参数。也可什么都不加,</span><span>默认值是显示窗口。即:</span><span>GUISetState ()</span><span>。</span><span><br /></span><span>下面是运行对话框直至窗口关闭的循环语句。</span><span><br /></span><span>While 1<br /></span><span><span> </span>$msg = GUIGetMsg()</span><span><br /></span><span><span> </span>If $msg = $GUI_EVENT_CLOSE Then ExitLoop<br /></span><span>Wend<br /></span><p><span>如图:</span></p><span></span><span> <span><img src="http://autoit.8800.org/images/upfile/2005-6/2005613232543.png" border="0" width="406" height="436" /></span></span><span><br /></span><span>下面是宽与高为</span><span>200</span><span>和</span><span>100</span><span>的窗口图片:</span><span><br /></span><span><img src="http://autoit.8800.org/images/upfile/2005-6/2005613232741.png" border="0" width="206" height="136" /><br /></span><span>由此可见,</span><span>GUI</span><span>设计窗口并非那么复杂,只要设置好几个关键值就可以了。</span><span><br /></span><strong><span>3、窗口背景色彩的设计。<br /></span></strong><span>窗口背景色彩设计主要运用下列语句来解决。</span><span><br /></span><span>背景色彩设计<span>完整原文语句是:</span></span><span>GUISetBkColor ( background [, winhandle] )<br /></span><span>用法:</span><span>GUISetBkColor</span><span>语句必须紧跟</span><span><span>GUICreate</span></span><span><span>语句。括号里的参数可自行设定。实例:</span></span><span><span><br /></span></span><span><strong><span>#i nclude</span></strong></span><span><strong><span> </span></strong></span><span><strong><span><GUIConstants.au3></span></strong></span><strong><span><br /><span>GUICreate</span><span> </span><span>(</span><span>"My GUI"</span><span>)</span><span> <br /></span></span></strong><span><strong><span>GUISetBkColor</span></strong></span><span><strong><span> </span></strong></span><span><strong><span>(</span></strong></span><span><strong><span>0xE0FFFF</span></strong></span><span><strong><span>)</span></strong></span><span><strong><span> </span></strong></span><span><strong><span>; </span></strong></span><span><strong><span>设置自己喜欢的色彩</span></strong></span><strong><span><br /><span>GUISetState</span><span> </span><span>()</span><span> </span><br /><span>While</span><span> </span><span>1</span><br /><span> </span><span>$msg</span><span> </span><span>=</span><span> </span><span>GUIGetMsg</span><span>()</span><br /><span> </span><span>If</span><span> </span><span>$msg</span><span> </span><span>=</span><span> $GUI_EVENT_CLOSE</span><span> <span> </span>Then</span><span> </span><span>ExitLoop</span><br /><span>Wend<br /></span></span></strong><span><span><img src="http://autoit.8800.org/images/upfile/2005-6/2005613232919.png" border="0" width="206" height="136" /><img src="http://autoit.8800.org/images/upfile/2005-6/2005613233035.png" border="0" width="206" height="136" /><br /></span></span><span><span>在</span></span><span><span>GUISetBkColor</span></span><span><span> </span></span><span><span>(</span></span><span><span>0xE0FFFF</span></span><span><span>)</span></span><span><span>语句中“</span></span><span><span>0xE0FFFF</span></span><span><span>”是色彩值;“</span></span><span><span>E0FFFF</span></span><span><span>”色彩代码。改变色彩只要改变代码即可。上图中的色彩代码分别是“</span></span><span><span>E0FFFF</span></span><span><span>”和“</span></span><span><span>FF0033</span></span><span><span>”。</span></span><span><span><br /></span></span><strong><span>4、窗口按钮的设计。<br /></span></strong><span>设计按钮是为了达到控制与应用的目的。设计按钮的完整语句是:</span><span><br /></span><span>GUICtrlCreateButton ( "text", left, top [, width [, height [, style [, exStyle]]]] )<br /></span><span>可以看出按钮语句是由“按钮名、按钮与窗口左边距、按钮与窗口顶边距、按钮形状的宽、按钮形状的高、按钮的外形风格”等组成。</span><span><br /></span><span>下面是按钮不同参数的图形:</span><span><br /></span><span><span><img src="http://autoit.8800.org/images/upfile/2005-6/2005613233128.png" border="0" width="206" height="136" /></span><span><img src="http://autoit.8800.org/images/upfile/2005-6/200561323321.png" border="0" width="206" height="136" /><br /></span><br /></span><span>左图的按钮语句是:</span><span><br /></span><span>GUICtrlCreateButton ("OK",<span> </span>10, 30, 50)<br /></span><span>GUICtrlCreateButton ( "Cancel", 60, 30, 50)<br /></span><span>右图的按钮语句是:</span><span><br /></span><span>GUICtrlCreateButton ("OK",<span> </span>10, 30, 50)<br /></span><span>GUICtrlCreateButton ( "Cancel", 10, 60, 50)</span><span><br /></span><span>从以上两组按钮语句看,要比原文按钮语句简单的多,这也是</span><span>GUI</span><span>易学的奥妙。当然,复杂的语句也是可以掌握好的。如按钮与图标叠加的设计,只要加上相应的语句即可。完整脚本如下:</span><span><br /></span><strong><span>#i nclude <GUIConstants.au3><br /></span></strong><strong><span>GUICreate ("</span></strong><strong><span>我的图标按钮</span></strong><strong><span>",400,200)<br /></span></strong><strong><span>GUISetBkColor (0xE0FFFF)<span> </span>; </span></strong><strong><span>设置自己喜欢的色彩</span></strong><strong><span><br /></span></strong><strong><span>GUICtrlCreateButton ("</span></strong><strong><span>我的图标按钮</span></strong><strong><span>", 10,20,40,40, $BS_ICON)<br /></span></strong><strong><span>GUICtrlSetImage (-1, "shell32.dll",43)<br /></span></strong><strong><span>GUICtrlCreateButton ("</span></strong><strong><span>我的图标按钮</span></strong><strong><span>", 80,20,40,40, $BS_ICON)<br /></span></strong><strong><span>GUICtrlSetImage (-1, "shell32.dll",31)<br /></span></strong><strong><span>GUICtrlCreateButton ("</span></strong><strong><span>我的图标按钮</span></strong><strong><span>", 150,20,40,40, $BS_ICON)<br /></span></strong><strong><span>GUICtrlSetImage (-1, "shell32.dll",22)<br /></span></strong><strong><span>GUISetState<span> </span>()<span> </span><br /></span></strong><strong><span>While 1<br /></span></strong><strong><span><span> </span>$msg = GUIGetMsg()<br /></span></strong><strong><span><span> </span>If $msg = $GUI_EVENT_CLOSE<span> </span>Then ExitLoop<br /></span></strong><strong><span>Wend<br /></span></strong><p><span>脚本窗口图形如下图</span></p><span><br /></span> <img src="http://autoit.8800.org/images/upfile/2005-6/2005613233345.png" border="0" width="406" height="236" /><strong><span><br /></span></strong><p><span>当然,按钮还可以叠加图片等,只要设置好函数语句就可以了。设置的方法是在</span><strong><span>GUICtrlCreateButton ("</span></strong><strong><span>我的图标按钮</span></strong><strong><span>", 10,20,40,40, $BS_ICON)</span></strong><span>语句中,改变</span><strong><span>$BS_ICON</span></strong><span>即可。详情见帮助文件:</span><span><span>GUI Control Styles</span><span>项中的</span><strong><span>Push Button Styles</span></strong><span>参数。</span></span><span>以上仅仅是把按钮设计出来了,但真正要起作用还需要修改和增加语句。关于按钮的控制与应用将在第二讲中详细解答。</span></p><p><span><a href="mailto:!!!xhyxsl@126.com" target="_blank"></a></span></p><span> <br /></span>
wuxind
发表于 2008-5-5 18:04:23
这正我是头痛的问题~!感觉auto分享这么好的东西
xwjsyyx
发表于 2008-5-5 18:19:45
谢谢管理员将我的劣作放入!
一天到晚眼睛痛
发表于 2008-5-5 19:57:14
还行,,,这篇还行,对新手的帮助太大了呀,
xiaocaocao
发表于 2008-5-5 20:24:17
谢谢好文章......
yeahcom
发表于 2008-5-6 00:20:44
谢谢,正想学些这方面的东西
y6278009
发表于 2008-5-6 16:17:03
又学习了:face (34):
siter
发表于 2008-5-6 21:44:11
初来扎到。学习了
cxlswb
发表于 2008-5-7 17:52:46
速度第2讲呢
蓓蕾
发表于 2008-6-30 17:02:08
希望每个星期写一篇啊
蓓蕾
发表于 2008-6-30 17:02:20
希望每个星期写一篇啊
powerofos
发表于 2008-6-30 20:18:05
在我摸索一段时间后,终于有教程了~
linzhixin
发表于 2008-7-5 15:37:37
谢谢好文章......
sheng927
发表于 2008-7-8 11:06:12
学习中,我正找这个呢!
boyhong
发表于 2008-7-11 07:47:42
这种教程绝对对新手有很大帮助~~~~~~~~~感谢~~~~~~~