WIXLIB

Task 1 – Your First Visual Basic ProgramTask 1 – Your First Visual Basic ProgramVisual Basic 2010 Express Edition is a free program and it can be downloaded p 1: Create a New Project in Visual BasicFor every Visual Basic program, we have to create a new project.1.Click File New Project.By default, Windows FormsApplication is selected.2.Fill in a relevant Project Name(e.g. Task 1).3.Press OK to continue.Step 2: Create a User InterfaceWe have to add controls (e.g. button, textbox) from the Toolbox to create the user interface.1.Click the Toolbox panel.2.Drag and drop Label, Textbox,Button, and WebBrowser onthe Form.Page 1

Task 1 – Your First Visual Basic ProgramStep 3: Add Program Code1.Double-click the Button.A new window called the CodeEditor opens. We can addprogram code in it.2.Type the following:WebBrowser1.Navigate(Textbox1.Text)Step 4: Run and Test Your Program1.Click Debug Start Debugging or press F5.This command runs your program.2.In the text box, type a URL (e.g. http://hk.yahoo.com/) and click the button.Step 5: Save and Publish the ProjectTo save the project:1.Click File Save All.To enable other people to use this program, we can publish the project:2.Click Project Publish [project name].A file called Setup.exe and other necessary files will then be created forother people to install your program.Self-Reflection What are the pros & cons of the program? How can you improve it?Page 2

Task 1 – Your First Visual Basic ProgramStep 6: Enhance the interface by customizing looks and behaviorBy using the Properties window, we can change the properties of various controls to customizetheir appearance.1.Drag and drop a Panelon the Form.2.Move the existingLabel, Textbox &Button to be on thepanel.3.Select the Panel control.4.In the Properties window, selectthe Dock property and choosethe top box (i.e. Top).Then, the Panel will expand to fill thetop of the form.5.Select the WebBrowser.6.In the Properties window, selectDock property and click themiddle (i.e. Fill).Then the WebBrowser will fill theremaining form.Page 3

Task 1 – Your First Visual Basic Program7.Select the Button control.8.In the Properties window, selectthe Text property.Delete“Button1” and replace it with“Go!”.9.Similarly, replace the Textproperty of Label1 to be“Address”10. We may also change the font andcolor of the text shown bymodifying the Font andForeColor property.11. Resize or relocate any of the controls, and resize the form to suit your taste.Self-Reflection What are the pros & cons of the program? How can you improve it?Page 4

Task 1 – Your First Visual Basic ProgramBonus PartYou may add the following extra functions in the web browser.1)Go Back and Go ForwardHints: Browse the available functions in Webbrowser12)BookmarkHints: add buttons for going to specified hyperlinks3)Click “Enter” to navigate website of the typed URLHints: Type the program in the appropriate event4)For every change of window size, re-position “Go!” button in right hand side5)For every change of window size, URL textbox will be resized to fit the window’s width6)Textbox will show the updated URL7)Any other suitable functionsPage 5

Task 2 – Vending MachineTask 2 – Vending MachineYou are going to create a virtual vending machine selling your favourite products.A.User Interface DesignA sample interface of a vending machine is shown as below:Which VB controls does the above interface use? To insert a picture on the button, simply modify theBackgroundImage property of that button.You can also handle the image placement and control sizing bymodifying BackgroundImageLayout.You may download appropriate pictures from http://office.microsoft.com/en-us/imagesPage 6

Task 2 – Vending MachineB. Program CodingArithmetic OperationCommon operators used in Visual Basic are:Addition Subtraction-Multiplication*Division/ Pay special attentionCalculationThe value calculated in right-hand side will be put into left-hand side.a 1 3after execution: a becomesb 9–3*2after execution: b becomes VariableVariable is a space for computer to store data (e.g. number, text).We have to tell computer we are going to use variable before using them.We use the following to tell computer:Dim total As Integer 0The above statement tells computer that we allocate a spacecalled:type of storage:initial value:Time to think What variables are needed for the vending machine program?Page 7

Task 2 – Vending Machine Input StatementWe can get users’ input from the Textbox. The code is as follow:Dim paid As Integer 0paid Textbox1.Text Output StatementYou may display information to users by changing the Text property of Label.The codeexamples are as followsLabel1.Text "Hello!"' to display text informationDim amount As Integer 30Label1.Text amount' to display number informationLabel1.Text "You have to pay " & amount' to display both text & numberTask:Try to implement the vending machine program by using the skills learntabove.Self-Reflection What are the pros & cons of the program? How can you improve it?Page 8

Task 2 – Vending MachineBonus PartYou may add the following extra functions in the vending machine.1)Add a list to indicate no. of item sold for each product2)Allow user to enter how much they will pay and calculate the change3)Allow user to clear all the content and start it again4)Any other suitable functionsPage 9

Task 3 – Number Guessing GameTask 3 – Number Guessing GameYou are going to create a number guess game.A.Game Rule Guess the secret number from a range of number (from to ). Hints will be displayed on the screen indicating the range. Decide whether the lower/upper limit IS / IS NOT included in the range.B.User Interface DesignA sample interface is shown as below:Which VB controls does the above interface use?C. Program CodingTime to think What variables do you need to use for the above program? What do you need to do to make the game work?Page 10

Task 3 – Number Guessing Game Random number generatorThe following code will generate a random number from 1 to 9 and put it into variable secret.(note that 10 will NOT be generated).Dim RandomClass As New Random()secret RandomClass.Next(1, 10) Relational OperatorTo test whether certain situations happen, we use the following operators.Try to circle the correct answer for each example. OperatorMeaningExampleResult Greater12 6True / False1 9True / False Greater or Equal3 3True / False10 33True / False7 3True / False8 8True / False Less Less or Equal Equal6 4True / False Not Equal8 2True / FalseConditional StatementWe can ask computer to run some statements ONLY WHEN certain situation is true.The following code only checks for one situation. If the situation is TRUE, then the statement(s)inside If Then and End If will be executed.If a 4 Thenexecute statement(s)NOa 4End IfYESstatement(s)Page 11

Task 3 – Number Guessing GameTime to think How many situations do you need to check for the number guessing program? For each situation, what do you need to do? How do you tell users that they have won the game?Self-Reflection What are the pros & cons of the program? How can you improve it?Page 12

Task 3 – Number Guessing GameBonus Part1)When an out-of-range number is entered, the lower/upper limit may be reset to alower/upper number (refers to the example below). Try to solve this problem. 2)Allow users to guess for a number of times (e.g. 10 times) and display “YOU LOSE”.3)Allow users to define the range of number (e.g. from 1 to 200)4)Any other functions to make the game more interestingYou may need to use the following Boolean operators or Conditional Statements. Boolean OperatorsFor the operator AND, only both conditions which are true will give a true value.Example OperationMeaningResult3 1 AND 4 2True AND TrueTrue3 1 AND 2 4True AND FalseFalse1 3 AND 4 2False AND TrueFalse1 3 AND 1 4False AND FalseFalseFor the operator OR, any one of the conditions which is true will give a true value.Example OperationMeaningResult3 1 OR 4 2True OR TrueTrue3 1 OR 2 4True OR FalseTrue1 3 OR 4 2False OR TrueTrue1 3 OR 1 4False OR FalseFalseFor operator NOT, it will give an opposite value.Example OperationMeaningResultNOT 1 3NOT FalseTrueNOT 3 1NOT TrueFalsePage 13

Task 3 – Number Guessing Game Conditional Statement (continue)The following code will check for one situation. If the situation is TRUE, statement 1 will beexecuted. Otherwise, statement 2 will be executed.If a 4 ThenNOexecute statement 1a 4YESElseexecute statement 2statement 1statement 2End IfThe following code checks for two situations.If the first situation is TRUE, statement 1 will beexecuted. Otherwise, it will continue to check for the second situation. If the second situationis TRUE, then statement 2 will be executed.Otherwise, statement 3 will be executed.If a 4 Thenexecute statement 1ElseIf b 5 ThenNOa 4YESb 5execute statement 2YESElseexecute statement 3NOstatement 1statement 2statement 3End IfNote that you may add more than one Else If Then statement.Also, Else Statement is optional and can be omitted.Page 14

Task 4 – Curve StitchingTask 4 – Curve StitchingYou are going to create a program for drawing lines & curves.A.IntroductionBy using computer, we can ask computer to draw lines accurately and repetitively. Exampleworks are:B.User Interface DesignA suggested interface is shown below.Please change the background to white to facilitatedrawing and clearing.Page 15

Task 4 – Curve StitchingC. Program CodingCoordinate System in Visual BasicPlease fill in the coordinates (x, y) of the following points.1000200300x(,)(,)(,)(,)(,)(,)100200y Line DrawingTo draw a line, we firstly define a pen with a specific colour & pen width.The code below tellscomputer to define a pen withDim myPen As Pen New Pen(Color.Red, 3)color:width:By providing the coordinates of two endpoints, we can ask computer to draw a straight line toconnect them.For example:Me.CreateGraphics.DrawLine(myPen, 100, 200, 300, 100)1st point2nd pointTry to draw the line of the above statement:1000200300x100200y ClearWe can clear the whole screen by filling the whole background with color white.Me.CreateGraphics.Clear(Color.White)Page 16

Task 4 – Curve StitchingLevel 1 Rectangle DrawingTo draw a rectangle, lines have to be drawn.1000200Try to fill the following programming code which draws thex rectangle in the left:Dim myPen As Pen New Pen(Color.Red, 3)100Me.CreateGraphics.DrawLine(myPen, , , , )Me.CreateGraphics.DrawLine(myPen, , , , )200Me.CreateGraphics.DrawLine(myPen, , , , )Me.CreateGraphics.DrawLine(myPen, , , , )y Triangle DrawingTry to draw a triangle in your program.Level 2 Rectangle Drawing (with different size)To draw the rectangle based on the inputted size in the Textbox, we have to read the length,declare a variable and get the input from the Textbox:Dim len As Integerlen Textbox1.Text500100 150 200x50By studying the figure in the right, we can assume thecoordinate of one point remains unchanged. Then, othercoordinates will increase based on the input size.100150Try to rewrite the programming code above and draw the200rectangle based on the input size.yHints: the first line of code isMe.CreateGraphics.DrawLine(myPen, 50, 50, 50, 50 len)Page 17