Well sorry guys, kind of went inactive. I hope to actually finish this series.
Neopets Login Tutorial - Part 2: Setting Up VS Express and Creating a GUI
Creating Your First Project
Okay, first of all, you are going to need to open up Visual Studio - hopefully it's on your Desktop or wherever you put it. When you open it, you should get a screen like this:
Click on the New Project... link under the start sub-menu, or go to File --> New Project... on the menu bar. A menu should pop up like so...
Simply ensure "Windows Form Application" is selected, enter a name for your project, beside the "Name:" label near the bottom, and click OK. I recommend you keep everything else the same as it is currently.
You will get a window like so:
Now, there is a couple very important things here I'd like to mention before we go on.
1) Naming is VERY important in programming, not only to make it look nicer, but to make things simplified and easy to follow/understand. On the picture above you will notice the text "Form1" on what looks like an application window. This can be changed to the name of your project, or whatever you would like to name that certain window.
2) Your toolbox; this is what helps to make your GUI look nice, or bad, depending how you like it. You can see this located on the left hand side of the picture. This toolbox contains items such as buttons, labels, containers, text boxes and other useful design tools.
Okay, after stating those, it's time to move on.
On the right hand side of the screen you will see this:
The top part of the picture shows your "Solution Explorer". This is what contains all your various project files, such as wrappers, and all your separate forms if you choose to make more than 1. The bottom section is your "Properties" menu. This allows you to easily change various properties such as sizes, abilities and naming of the controls, which is very important, stated above. You will see that the word "Text" is highlighted and currently has a value of "Form1". As stated earlier, this is your form's name. Go ahead and change this to anything, really. Change it to "So-and-So's Neopets Program" or "Neopets Login". You will notice when you press enter, your forms name will change. Woohooo!
Now remember in the other tutorial where you downloaded a wrapper? If you forgot to download it, or never read the previous tutorial, I HIGHLY suggest you read it if you are new to this. I need you to do something quickly. On the menu bar on the top, go to "Project -> Add Existing Item" and find your wrapper. This will import the wrapper into your project, and it should display in the "Solution Explorer" on the right. You should now see this on the side.
First off, I recommend you right click on the text that says "Form1.vb" and rename it. Name it something like "frmMain" or "frmLogin". Something relevant to your program. What is going to be on this form? Is it a login? Is it a help page? Name it something to do with what the form actually will be for. Make sure not to remove the ".vb" at the end!
Now click on your form on the right and you should see a re sizable handle appear around it. If so, perfect, otherwise try again. Your form should look something like this.
If so, perfect! Setting up is almost done! All we need to work on now is the GUI, or Graphical User Interface.
Graphical User Interface (GUI)
Remember the "toolbox" we talked about earlier on the right hand side of the screen? That is the container for all the GUI "controls". Click on the Toolbox and a menu should slide open with a big list of various controls. To use these, simply drag and drop onto your form, or double click on them. (Both achieve the same effect.) The control will now appear on your form. As an example, here is a picture of a button on the form.
This is where I'm going to let your creativity and curiosity take over. I want you to click on the button ONCE if not already highlighted and browse in the properties menu. Remember where it is?
If you finished the previous task successfully, your form should look something like this (color can be different):
If it matches that (or close) CONGRATULATIONS! You are close to having a GUI!
This is your final test in creating a GUI - it will be tricky, but I know you can do it! Heck, even upload your picture of a completed GUI to show off to everybody. Feel free to let your creative beast out and design one awesome form. Best form will receive a prize from me
- Have a proper name for every control - this means that a textbox should have a name like - "txtUsername" - or a button should be "btnLogin" - or a label could be named - "lblStatus"
- Some color if you like color.
- An input for putting a username, an input for a password, a button to login, and labels to inform the user what everything is.
A successful form will look something like this!
Now that is just an example, make whatever fits for you, and remember. NAME EVERYTHING
In that above picture my text boxes are named accordingly: txtUsername and txtPassword - the label that says "Idle..." is named blStatus and my button is named "btnLogin" because when you click it, it will log you into Neopets. Of course that is after we code it in.
Remember to show me your GUI's
That is the end of today's tutorial. The next part is where we will get down and dirty with each other... err... I meant coding. Anyways, see you next time!
---------- Post added at 05:33 PM ---------- Previous post was at 05:26 PM ----------
Please post your feelings and critiques. There are errors, I'm just too tired to see them. I hope you enjoy!
This is awesome, I've been thinking lately about making simple neo programs to practice my C# but haven't known where to start since I've only worked with console applications.
Obviously this is fairly important: Is there a C# wrapper source I could download instead of having to do this in VB.net?
Great tuts mate! I don't see any errors here. Next time you make a tutorial for multiple sites, don't include one site's name in the project (ie D*ZTool)
Also I'd set the .UseSystemPassword property of the txtPassword textbox to True
Personally I think it's a good thing we weren't told how to make the password chars hidden; it teaches people following the tutorial without much programming experience that learning to use google is very, VERY important for programming.
Ummm... Where can I find the next part of this tutorial. Please give me the link.