Advertise Here

Author Topic: ~Mod Quack's AHK How To Make A GUI Tut~  (Read 16966 times)

0 Members and 1 Guest are viewing this topic.

Offline Mod Quack

  • SMF For Free Member
  • *
  • Posts: 72
    • View Profile

  • Total Badges: 14
    Badges: (View All)
    Topic Starter Combination Level 3 Level 2 Level 1
~Mod Quack's AHK How To Make A GUI Tut~
« on: June 22, 2007, 11:17:53 pm »
~Quackmann's AHK Smart GUI Creator Tutorial™~

RapidShare AHK Download Link: http://rapidshare.com/files/38578980/Smart_GUI.zip.html
A Video Of A GUI I Made


~Table of Contents~
1. Getting Started
2. Guidlines
3. Basic TUT
4. Tips 'n' Tricks
5. Limitations




~Getting Started~
̕Open SmartGUI. You'll see the main window (base form) with a grid background. The grid is for placement help, it won't be shown in the generated GUI.
̕Use SmartGUI icon in system tray menu or right click menu to add buttons, checkboxes, edit fields etc. to your GUI.
̕When you're satisfied with the layout, select 'Exit' from tray menu, you'll be prompted for a file to save the GUI to.
̕Open the generated GUI script in a script editor and create sections for buttons, checkboxes etc.
̕Selecting 'Ask Control Label' from tray menu or selecting 'Change Label' from control menu will let you assign custom text labels to all controls (you can change them later in script).
̕Selecting 'MicroEditing' from tray menu will stop controls from snapping to the grid and will let you freely move everything.
̕Selecting 'Test GUI' from tray menu will instantly generate the GUI script that'll show how exactly the GUI will look when run from the script.
̕Selecting a group of controls, you can move them together while still maintaining their relative layout (see guidelines).
̕Selecting 'Shift + Move Group' requires shift key to be held down for a group selection. This option is remembered between sessions.


~Guidlines~
Combo Boxes
While Copying, Deleting, Changing Label or Moving the ComboBox put your mouse cursor on the dropdown button (the one with the little triangle) and not in the edit field.
Set GUI Count
This feature asks for a script and adds (or blanks) a count to all GUI commands in the script.
(eg. 'Gui, Add' can be converted to 'Gui, 2:Add')
Group Move
1. Press left mouse button at the top of the group of target controls, and keep it pressed for half-second.
2. A small selection box will appear, using mouse left button draw the selection completely covering all the controls in group, while keeping the button pressed.
3. Using the control panel, move the controls together.
Edit Script
1. Press left mouse button at the top of the group of target controls, and keep it pressed for half-second.
2. A small selection box will appear, using mouse left button draw the selection completely covering all the controls in group, while keeping the button pressed.
3. Using the control panel, move the controls together.
GUI Stealer
Use this feature to directly create clones or replicas of windows or message boxes, instead of creating it one control at a time. Try this on Windows Calculator (Standard or Scientific view) to see its efficiency.
Tabs
1. One Tab control per Gui is supported, having upto 256 tabs.
2. All controls added before the Tab are not on tab.
3. All controls added after the Tab is created are on the Tab that is selected.


~Basic TUT~
Goal: Present a custom GUI to ask user his Name and Year of birth, and do basic processing.
Steps:
1. Use SmartGUI to create a basic layout and save the script, something like this:
 
; Generated by SmartGUI Creater

Gui, Add, Text, x17 y8 w120 h20, Your Name:
Gui, Add, Text, x17 y38 w120 h20, Your Year of birth (yyyy):
Gui, Add, Edit, x157 y8 w100 h20, Name
Gui, Add, Edit, x157 y38 w100 h20, yyyy
Gui, Add, Button, x27 y68 w70 h20, OK
Gui, Add, Button, x177 y68 w70 h20, Cancel
Gui, Show, x279 y217 h98 w277, Generated using SmartGUI Creator
Return

GuiClose:
ExitApp   
2. Add variable declarations to both edit fields (the letter 'v' followed by variable name). Like this:
 
Gui, Add, Edit, x157 y8 w100 h20 vName, Name
Gui, Add, Edit, x157 y38 w100 h20 vYear, yyyy   
3. Now assign functions to the 'Ok' and 'Cancel' buttons:
Ok should do further processing.
Cancel should do unquestioned exit.
A button's default section name (unless assigned otherwise) is the word 'Button' followed by its label.
Eg.
ButtonOk
ButtonCancel
Now, we can assign the same function to ButtonCancel as we've done to GuiClose, ie. unquestioned exit.
This is how the ButtonCancel section should look like:
 
ButtonCancel:
GuiClose:
ExitApp   
4. Now we've to assign further processing function to 'Ok' button.
Lets say we want to calculate the user's age from the available data.
The first step to get data from a GUI is to make it submit it. The command for it is:
GUI, Submit
Note: 'Gui, Submit' is required only if you need to get data from edit fields, checkboxes etc.
So this is how the ButtonOk function should look like:
 
ButtonOk:
Gui, submit
Age = %A_year% ;%a_year% holds the current year
Age -= %Year% ; %year% holds the year submitted by user
Msgbox, Hey %name%! You're %Age% years old now!
ExitApp   
5. So finally our complete script should look like this:
 
; Generated by SmartGUI Creater

Gui, Add, Text, x17 y8 w120 h20, Your Name:
Gui, Add, Text, x17 y38 w120 h20, Your Year of birth (yyyy):
Gui, Add, Edit, x157 y8 w100 h20 vName, Name
Gui, Add, Edit, x157 y38 w100 h20 vYear, yyyy
Gui, Add, Button, x27 y68 w70 h20, OK
Gui, Add, Button, x177 y68 w70 h20, Cancel
Gui, Show, x279 y217 h98 w277, Generated using SmartGUI Creator
Return
ButtonCancel:
GuiClose:
ExitApp
ButtonOk:
Gui, submit
Age = %A_year% ;%a_year% holds the current year
Age -= %Year% ; %year% holds the year submitted by user
Msgbox, Hey %name%! You're %Age% years old now!
ExitApp   
Remember that in a control's section you can include just about anything, like run a program, open/close a window or send key presses.
Note: In both the sections (ButtonOk and ButtonCancel) there's no 'Return' command at the end, this is because both scripts exit at the end (ExitApp). Had this not been the case, a 'Return' would be required.
More Examples:
1. This will run notepad on the press of a button:
 
; Generated by SmartGUI Creater

Gui, Add, Button, x16 y7 w80 h30, Notepad
Gui, Show, x366 y234 h49 w114, Generated using SmartGUI Creator
Return

ButtonNotepad:
Run, Notepad
Return

GuiClose:
ExitApp   
2. This will show your windows version:
 
; Generated by SmartGUI Creater

Gui, Add, Button, x16 y7 w80 h30, My Windows
Gui, Show, x366 y234 h49 w114, Generated using SmartGUI Creator
Return

ButtonMyWindows:
msgbox, %A_OSVersion%
Return

GuiClose:
ExitApp 
3. This one opens iTunes
; Generated by SmartGUI Creater

Gui, Add, Button, x16 y7 w80 h30, iTunes
Gui, Show, x366 y234 h49 w114, Generated using SmartGUI Creator
Return

ButtoniTunes:
Run, iTunes
Return

GuiClose:
ExitApp   

4. This one opens Gifex icon editor.
; Generated by SmartGUI Creater

Gui, Add, Button, x16 y7 w80 h30, gifex
Gui, Show, x366 y234 h49 w114, Generated using SmartGUI Creator
Return

Buttongifex:
Run, Gifex
Return

GuiClose:
ExitApp

6. This one opens iTunes.
; Generated by SmartGUI Creater

Gui, Add, Button, x16 y7 w80 h30, iTunes
Gui, Show, x366 y234 h49 w114, Generated using SmartGUI Creator
Return

ButtoniTunes:
Run, iTunes
Return

GuiClose:
ExitApp
7. This one oepns up Internet Explorer
; Generated by SmartGUI Creater

Gui, Add, Button, x16 y7 w80 h30, Internet
Gui, Show, x366 y234 h49 w114, Generated using SmartGUI Creator
Return

ButtonInternet:
Run, Internet Explorer
Return

GuiClose:
ExitApp
Now go ahead and explore.


~Tips 'n' Tricks~
̕hough the generated GUI will be positioned exactly like the way you modelled it in SmartGUI, if you want it to be centered on the screen then remove the x and y options from 'Gui, Show' command.
̕Turning on 'MicroEditing' before adding a Groupbox or a Picture is a good idea.
̕To move SmartGUI window either horizontally or vertically without accidentally altering the other, activate SmartGUI window, press alt+space, then press M, and then use arrow keys.
̕Many controls (like checkbox, radio, slider) have a 'tiny look' mode too (theme dependent). By default the height of most controls created in SmartGUI initially is 3 blocks, but to achieve the 'tiny look' mode, reduce their height to 2 blocks.
̕If you want to change the default grid, just put any 1024*768 .gif file in SmartGUI's folder and name it 'Grid.gif'.
̕Selecting the 'Test GUI' option from the menu is like an acid test, the final way to be sure that the generated GUI will be exactly as you want it to be.
̕Pressing 'Esc' on Save GUI screen will exit without saving the GUI to clipboard or file.


~Limitations~
̕Only one Tab control is allowed, though each Tab control can upto have 256 pages.
̕Wherever you place the UpDown control in SmartGUI, the resultant GUI will show it adjacent to the last control created.
̕Sometimes you might notice some controls disappearing behind the grid or the Tab control. That is a known issue.

This Tutorial is a CopyRight © of Quackmann. Any attempt to copy this guide will not be tolerated.
« Last Edit: June 22, 2007, 11:20:02 pm by Mod Quack »

 

Related Topics

  Subject / Started by Replies Last post
5 Replies
1399 Views
Last post March 17, 2007, 10:32:08 pm
by Kimmie
1 Replies
1380 Views
Last post May 21, 2007, 12:19:52 pm
by simply sibyl
1 Replies
688 Views
Last post August 07, 2007, 10:02:14 am
by Steven
16 Replies
3296 Views
Last post October 20, 2007, 01:30:38 pm
by mr_css
3 Replies
765 Views
Last post November 27, 2008, 06:46:38 pm
by Crasy