How to make: Paycheck estimator app

Program 1: Learn how to make a simple paycheck estimator.

We'll be taking a look at a language called "AutoHotkey." Its not your typical C++ ,VB or JavaScript language but its super lightweight and easy to use.

1. Download AutoHotkey and install it. URL: http://l.autohotkey.net/AutoHotkey_L_Install.exe

2. Download SmartGUI. URL:

This will be used to create our GUI or "Graphic Interface." The physical appearance of our application. 

3. Now locate your desktop or any location that you choose and place the SmartGUI extractor in it. Extract the files into that folder with its own folder path. Example. C:/MyFirstProgram/SmartGui/

4. Now we're finally ready to get started. Start up SmartGUI. Take a couple of minutes getting used to adding controls. 

 But must contain these elements.

• 4 Text labels :
• Simple Work Calculator (top text label)
• Rate (Bottom far left label)
• Hours (Bottom middle label)
• Tax (Bottom far right label)

• 3 Edit Boxes:
• Rate (Bottom far left label)
• Hours (Bottom middle label)
• Tax (Bottom far right label)
• 1 Button
• Submit (Bottom button)

Now that we know what we're going to call all these controls lets rename them. Right click each label and select "Change Label" from the drop list until you get the following results.

That's it! Simple enough for you? Lets goto File > Save.

Select "Save New GUI to File" from the Save Options and click yes. 

Next its goings to prompt you to save. As you can see below. I named my program "WorkCalc." Pick a unique but also relevant name. Save it in your root directory we created in the beginning of this tutorial.

Right click your "AutoHotkey Script" and goto "Edit Script."

This is the code that defines our GUI. Lets get started!

Whats +Center?

For starters, pay attention to what each line is saying. Take a look at the first line. We're going to add
"+Center"

Gui, Add, Text, x6 y10 w280 h60 +Center, Simple Work Calculator

This one line of code. Adds a simple text control that says, "Simple Work Calculator." However, the reason it looks so complicated is because we have to tell our application. Exactly where to place it and how large it is or if we have any other options we want to change. Such as, +Center +Left +Right - which will align our text depending on where we want it.

• Gui (graphics)
• Add (tells the Gui it exists)
• Text (tells the GUI what type of control your adding. Text, CheckBox, Edit..)
• x6 y10 (location of the text)
• w280 h60 (width and height)
• Center (centers our text or control)
• Simple Work Calculator (the text of our label)

After changing that first line of code. Save your program File > Save and double click on your application. Pay attention to how "Simple Work Calculator" is aligned. 

Notice how its centered now? If you wanted it to be aligned on the left or right. Change +Center to +Right or +Left.

More Additions


1. Editing our Edit Controls

Gui, Add, Text, x6 y10 w280 h60 +Center, Simple Work Calculator
Gui, Add, Text, x6 y80 w80 h20, Rate
Gui, Add, Edit, x6 y100 w80 h20  vRate, Rate
Gui, Add, Text, x96 y80 w100 h20 , Hours
Gui, Add, Edit, x96 y100 w100 h20 vHours, Hours
Gui, Add, Text, x206 y80 w80 h20 , Tax
Gui, Add, Edit, x206 y100 w80 h20 vTax, Tax
Gui, Add, Button, x6 y130 w280 h60 , Submit
; Generated using SmartGUI Creator 4.0
Gui, Show, x131 y91 h196 w294, New GUI Window
Return  

GuiClose:
ExitApp

Notice how we added vRate, vHours and vTax? What does it mean? As long as we specified the "v" anything after that is up to us what we want to name it. I could have named "vRate" to "vHourly_Rate" or "vHourlyRate" It its up to you to choose a name but also that fits and can be remembered. We have to use this later on in our application. Assigning this name to our edit control allows us to retrieve its values whenever we want. 

Now that we identified what each Edit control is by using the "v". We can now remove the text from the edit boxes.


Gui, Add, Text, x6 y10 w280 h60 +Center, Simple Work Calculator
Gui, Add, Text, x6 y80 w80 h20, Rate
Gui, Add, Edit, x6 y100 w80 h20  vRate, 
Gui, Add, Text, x96 y80 w100 h20 , Hours
Gui, Add, Edit, x96 y100 w100 h20 vHours, 
Gui, Add, Text, x206 y80 w80 h20 , Tax
Gui, Add, Edit, x206 y100 w80 h20 vTax, 
Gui, Add, Button, x6 y130 w280 h60 , Submit
; Generated using SmartGUI Creator 4.0
Gui, Show, x131 y91 h196 w294, New GUI Window
Return  

GuiClose:
ExitApp

Notice how Rate, Hours and Tax are blank and are awaiting input? This is good! We need numbers not text in these fields.


2. Editing