Theory
A program you can draw
Every program so far in your BCA, from C to Java, was born the same way: a blank text file.
Today is different. You will make ShopKeeper's first window by drawing it: drag a button from a palette, drop it on a window, resize it with your mouse. The code still exists, but for the screen's layout you work like a designer, not a typist.
The workshop that makes this possible is the Visual Studio IDE, and knowing its 4 main panels IS this lesson.
Theory
The 4 panels, formally
An IDE (Integrated Development Environment) bundles editor, designer, compiler and debugger in one tool. Visual Studio's Windows-Forms workspace has 4 panels to name in an exam:
- Form designer: the canvas; your window as it will look
- Toolbox: the palette of controls (Button, TextBox, Label...) you drag onto the form
- Properties window: every setting of the selected control: its Name, Text, size, colour; plus its list of events
- Solution Explorer: the project's files
Follow along
ShopKeeper's first window, click by click
- File, New, Project: Windows Forms App (Visual Basic) Name it ShopKeeper. Visual Studio opens Form1 in the designer.
- Drag a Button from the Toolbox onto the form It lands as Button1. Drag a Label too, for the shop's name.
- Set properties in the Properties window Select the button: Name = btnWelcome, Text = Welcome. Meaningful names BEFORE code: btnTotal, txtItem, lblBill.
- Double-click the button Visual Studio jumps to code view and generates the btnWelcome_Click event handler for you.
- Write one line inside it, then press F5 MsgBox("Welcome to Mehta Stores"). F5 builds and runs; click the button and the box appears.
Practical
What the double-click generated (plus your line)
Public Class Form1
Private Sub btnWelcome_Click(sender As Object, e As EventArgs) _
Handles btnWelcome.Click
MsgBox("Welcome to Mehta Stores")
End Sub
End Class
Theory
Two views of one form
Understand what the double-click revealed: your form lives in 2 views.
The designer view shows WHAT the window looks like. The code view shows HOW it behaves. They describe the same Form1; right-click the form and View Code / View Designer switches between them.
The generated method's tail matters: Handles btnWelcome.Click is VB.NET's wiring, declaring that this Sub runs whenever that button is clicked. This event-driven style (code waits for the user) is BCA305-02's Android pattern on the desktop.
Quiz
You selected ShopKeeper's button and want its caption to say Total instead of Button1. Where does that change happen?
- The Text property, in the Properties window
- The Name property, in the Properties window
- Edit the Toolbox entry for Button
- It can only be changed in code, at run time
Show the answer
The Text property, in the Properties window
Text is what the user reads on the control; changing it in the Properties window updates the designer instantly. Name (option B) is the identifier CODE uses, btnTotal, invisible to the user: the Text/Name split is the exam's favourite IDE question. The Toolbox (option C) is the palette of control TYPES; editing it changes nothing on your form. Option D is half-true at best: run-time changes are possible (btnTotal.Text = "Total"), but design time is exactly what the Properties window is for.
Think first
Predict the misfire
A classmate double-clicks an empty area of the FORM itself, not the button, and types the MsgBox line into whatever opened. The program runs, but the box never appears on click. What happened, and when WILL the box appear?
Show the answer
Double-clicking a control generates its DEFAULT event's handler, and the form's default event is Load, not Click. The MsgBox line landed in Form1_Load, which runs once, when the window opens: so the box appears at startup and never on the button. Fix: delete it there, double-click the BUTTON, and put the line in btnWelcome_Click. Rule worth keeping: always read the generated Sub's name and Handles clause before typing.
Watch out
Habits that save future marks (and hair)
Name controls immediately: leave 12 controls as Button1..Button12 and next week's code is unreadable. btnTotal, txtQty, lblAmount, dgvBill: prefix + meaning.
Do not edit the designer-generated region by hand: layout code Visual Studio wrote for the designer breaks if hand-mangled; change the form via the designer and the Properties window.
F5 vs Build: F5 = build AND run with debugger; a red-underlined error list means it never actually ran.
Theory
The room is ready
You now know the workshop: canvas, palette, settings panel, file tree, and the 2 views of a form. Everything Unit 3 does is this loop repeated: drag a control, name it, set properties, handle its events. But between here and there, ShopKeeper needs its brain: variables, calculations and decisions in VB.NET itself. That is the rest of Unit 2, starting with data types and the Dim statement.
Summary
Key takeaways
- IDE = editor + designer + compiler + debugger in one; Visual Studio is .NET's.
- Four panels: form designer (canvas), Toolbox (control palette), Properties window (settings + events), Solution Explorer (files).
- Flow: new Windows Forms project, drag controls, set Name and Text, double-click, code, F5.
- Text is what users see; Name is what code uses: set meaningful names first.
- Double-click generates the control's DEFAULT event handler; the form's is Load, a button's is Click.
- Handles wires a Sub to an event: desktop cousin of BCA305-02's Android listeners.
- Memory hook: draw the screen, name the parts, double-click into the behaviour.