Tutorial 2: Introduction to Visual Basic Part 2

Contents:
Download and run example program 3 Build example program 3 from scratch o The Database Design o The Software Design Download and run example program 4 Build example program 4 from scratch Download and run example program 5

Download and Run Example Program 3

This week, we do a slightly more complicated example and make use of the S!lex"rid #ontrol to interface with a database built in S $ccess% &t's a really cheap #D #ollection database so you can ha(e a nice cheap computer list of all the #Ds you own% &t's braindead% )* This is so easy and the code is so short, that's my only note for now% )* +et's ,ust ,ump right in on this thing by downloading it and running it)

-kay, the steps to follow) 1. .ust sa(e the file to your desktop% 2. Double click the file to open it with win/ip%

3% 4. #lick 01xtract0 and extract the file to your desktop 5. 6. 7.

2note) you need to extract both files*% -n your desktop, you should now ha(e a folder called 0flexample0 "o in there and double3click 04ro,cet5%(bp0 2%(bp stands for 06isual Basic 4ro,ect0* 7ow, you should get 6B loaded up with that pro,ect, no problem8

9ith that going, you can push the play button 2center of the top tool bar* and see what it looks like% There are a couple of things you can do with it) :ou can add #Ds to the Database by entering some info in the textboxes and pushing the 0$dd This &nfo0 button :ou can select a row from the grid and hit the 0;emo(e Selected0 button to remo(e it permanently from the database

The Cheap CD Collector program window

4retty ama/ing, eh< )*

ac! to top""

Build Example Program 3 #rom $cratch

-kay, already you can tell that this one is a little more complicated to build %%% but it's still surprisingly simple to get a database application going% The only tricky part of it is watching database (ersions% This is ,ust a (ery simple, brain3dead database and app, so it's not meant to be sophisticated or correct in terms of database design in any way88 The first thing you need to do is ,ust make yourself up a database table in $ccess and sa(e it to an mdb file% Sooooooo simple)

The Database Design 1. -pen up S $ccess 2Start 3 4rograms 3 icrosoft $ccess* 2. 4ick 0Start a blank database0 from the wi/ard that pops up 3. 4ick a spot to sa(e the mdb file and a name for it 2mine was
0#D#ollection$%mdb0*

4. :ou'll get to the following window, where you double click on 0#reate a table
in design (iew)0

the data ase design main window

5. 9hen you double click that 0create table in design (iew0 thingie, you get to
this window)

The ta le design %iew window

6. :ou want to follow the following steps to get the table & was working with) 1. ake a field called ArtistName whose type is Text 2. ake a field called AlbumTitle whose type is Text 3. ake a field called Tracks whose type is Number 2,ust a long integer is
cool enough*

4. Select the rows in the design (iew 2as pictured abo(e* that ha(e
ArtistName and AlbumTitle 5. ;ight3click on that selection, and pick Primary Key from the menu you get% This will make both fields into primary keys% The idea is that they can be primary because you'll ne(er ha(e identical artist names and album titles 2otherwise what's the point<8*% -nce you'(e got your table built, ,ust close that window% :ou'll be automatically prompted to sa(e changes to the table design and to gi(e the table a name% & picked CDs, how original% )* -nce that's all done, you can either add a couple entries to the database by double clicking the #Ds table from the database design main window and inputting them manually or ,ust mo(e on to) 1xport the database to $ccess '=> 2this is the annoying part of the whole thing* ?ere's what you do) 1. "o to the Tools menu 2. Select Database Utilities 3. Select Convert Database 4. Select To Prior Access Database Version 5. :ou'll get a sa(e file dialog that will let you enter a name for your database% 2& used "CDCollection m!b"* .ust sa(e it in the same folder as your $ccess @AAA (ersion of the file% 9hate(er you call it, make sure you keep track of which database file is which (ersion88

7. 8. 9.

Export &our data ase to a prior 'ccess Data ase Version

The So"t#are Design

-kay, now you'(e got the database file, and remember where you sa(ed that mdb file at the start of the process% That's where you'll sa(e your (b pro,ect too, ,ust to keep things simple% :ou'll probably e(entually want your program and data li(ing in the same folder for simplicity's sake, so it makes sense to ,ust start out like that% -kay, let's build this app) 1. Start up 6B

2. 4ick Standard 1B1 from the new pro,ect list

3% $dd the S!lex"rid control to your pro,ect) 1. "o to the Pro$ect menu, pick Com%onents 2. Scroll down the list of components until you find "&icroso"t 'lex(ri! Control ) * +s%,-"% Select that checkbox and hit the -C button to add the control to your pro,ect%

4. $dd a !lex"rid to your form by picking the

main form%

tool and drawing it on your tool and drawing on the form%

5. $dd a data source to the form using the

#hange its %isi ilit& property to 'alse

6. $dd two frames to the form using the tool and drawing them on the form% 7. #hange the caption of one to A!! ne# entry and the caption of the other to 8.
.emove /ntry Draw the following controls in the A!! ne# entry frame 2yes, actually in the frame*) 1. $ text box with the (name) txtArtistName 2. $ label abo(e that text box with the caption Artist Name 3. $ text box with the (name) txtAlbumTitle 4. $ label abo(e that text box with the caption Album Title 5. $ text box with the (name) txtTrackCount 6. $ label abo(e that text box with the caption Number o" Tracks 7. $ command button with the (name) cm!A!!/ntry and the caption A!! this in"o

9. 7ow, to the .emove /ntry frame, add the following controls) 1. $ command button with the (name) cm!.emove/ntry and the
caption .emove Selecte! click the button0 &S'lex(ri!1* to do what you want% &t's fairly customi/able, but here's all & did for this example program) 1. the 'llow*serResi+ing property was set to 5 2. the Cols property was set to 3 3. the Data$ource property was set to Data1 (** this is required **) this hooks the data source up to the !lex"rid% 4. the #ixedCols property was set to A while the #ixedRows property was set to 5% 2this is recommended* 5. the #ocusRect property was set to A% 6. the ,igh-ight property was set to 5% 7. the $crollTrac! property was set to True 8. the $election.ode property was set to 5 2selection by row only*% 9. the /ord/rap property was set to True 11. -kay, next the code% &n the form design window, double click the form, which should bring up the code window with a blank 'orm23oa!+- subroutine% ?ere's the code for it) Private Sub Form_Load() 'the format string just lets you define a format for how 'your flexgrid will appear SFlex!rid"#FormatString $ %&rtist 'ame (% ) _ %&lbum 'ame ( *ra+,s% 'ma,e sure the sear+h path to the db is always in the right spot -ata"#-atabase'ame $ &pp#Path ) %./-/olle+tion#mdb% 'set up the re+ordsour+e for the datasour+e and flexgrid +ontrol 'in this +ase0 it's just a raw S1L 2uery0 simple simple# -ata"#3e+ordSour+e $ %sele+t 4 from /-s order by &rtist'ame% 5nd Sub 12. 7ow, go back to the form design window and double click the A!! this in"o button% :ou should now ha(e a blank cm!A!!/ntry2Click+- subroutine% ?ere's what to fill in there) Private Sub +md&dd5ntry_/li+,() 'add a new entry to our table# 6ith -ata"#3e+ordset #&dd'ew 7&rtist'ame $ txt&rtist'ame 7&lbum*itle $ txt&lbum*itle 7*ra+,s $ txt*ra+,/ount #8pdate 5nd 6ith -ata"#3efresh '+lear the text fields on+e the new re+ord is added txt&rtist'ame $ %% txt&lbum*itle $ %%

2. $ label with the caption Select the entry you #ant to remove an! 10. 7ow, the most complicated part is formatting the !lex"rid 2which is called

txt*ra+,/ount $ %% 5nd Sub 13. +ast thing you need is the remo(e code% &n the form design window, double3 click the .emove Selecte! button% :ou should get a shell for the cm!.emove/ntry2Click+- subroutine% This is the code) Private Sub +md3emove5ntry_/li+,() 'delete an entry from the database 6ith -ata"#3e+ordset # ove ( SFlex!rid"#3ow 9 ") ' we minus one be+ause row :ero is the header row #-elete 5nd 6ith -ata"#3efresh 'set the fo+us ba+, to the first add field txt&rtist'ame#SetFo+us 5nd Sub 54% $nd we are done8 &t's actually pretty simple to do this stuff, no problem88 Before you run this thing, you will need to sa(e the pro,ect to the same folder that you sa(ed your database file from the abo(e section to%
ac! to the top""

Download and Run Example Program 0

1xample programs 4 and 5 were both written by Saul and ha(e the basic goal of teaching some more about e(ent handling in 6B as well as teaching a little bit about how to go about using a can(as3style widget% 9ithout further adue, let's check out the first simple example) Clic! here to download

-kay, the steps to follow) 1. .ust sa(e the file to your desktop% 2. Double click the file to open it with win/ip%

3% 4. #lick 01xtract0 and extract the file to your desktop 5. 6. 7.

2note) you need to extract both files*% -n your desktop, you should now ha(e a folder The pro1ect 2ile 2or the simple called 0Sketchpad50 s!etchpad program "o in there and double3click 0Sketch5%(bp0 2%(bp stands for 06isual Basic 4ro,ect0* 7ow, you should get 6B loaded up with that pro,ect, no problem8

9ith that going, you can push the play button 2center of the top tool bar* and see what it looks like% Theres only one thing you can do with this one88) #lick and hold the mouse on the can(as and roll it around to draw a cute blue line

the s!etchpad 2orm in action (&es I3m rad) ac! to the top""

Build Example Program 0 2rom $cratch -kay, let's actually get to work building this thing% This one is actually Duite simple to build and shouldn't take too long at all88 #heck it out) 1. Start up 6B with a Standard 1B1 pro,ect 2this should be familiar terminology
to you by now*% tool and drawing on the form% .ust make it mostly the same si/e as the entire form% )* 3. #hange the picturebox's (name) property to read %icCanvas 4. 7ow double3click on the form 2not on the picturebox* to get access to a shell for the 'orm23oa!+- subroutine% The code for that looks like) Private Sub Form_Load() '3edraws the image when the window is +overed;un+overed pi+/anvas#&uto3edraw $ *rue '*he +anvas loo, and drawing behaviour pi+/anvas#-raw6idth $ < 'Lines are < units thi+, pi+/anvas#Fore/olor $ vb=lue 'Lines are blue pi+/anvas#=a+,/olor $ vb6hite '=a+,ground +anvas is white 5nd Sub 5. &f you go back to the form3design window and double click on the picturebox now, you'll get a shell for cm!Canvas2Click+- That's not the one you want% !rom the dropdown list on the top of the code window, pick the &ouseDo#n e(ent% ?ere's the code to fill that one in) 'Set the first point and start the line Private Sub pi+/anvas_ ouse-own(=utton &s >nteger0 Shift &s >nteger0 ? &s Single0 @ &s Single) >f =utton $ " *hen pi+/anvas#Line (?0 @)9(?0 @) 5nd >f 5nd Sub

2. $dd a picturebox to the main form using the

6. -nce that's filled in, from the same e(ent drop3down list at the top of the code window, pick the &ouse&ove e(ent% The code for that bad boy is right here for the taking)
'/ontinue the line to the next point as we move the mouse Private Sub pi+/anvas_ ouse ove(=utton &s >nteger0 Shift &s >nteger0 ? &s Single0 @ &s Single) >f =utton $ " *hen pi+/anvas#Line 9(?0 @) 5nd >f 5nd Sub That should be it8 This is pretty simple, all it does is listen for a button click with the left mouse button on the picturebox% &f it gets a mousedown followed by a drag, it draws a blue line 2as was set up in the formEload subroutine*% Simple use of e(ents makes a fun little app88
ac! to the top""

Download and Run Example Program 4

1xample program 5 2also written by Saul* is an extention of the idea presented by 1xample program 4% &t has the same basic concept with a ton of more features8 & won't go through how to build it here, but lea(e it to you to download this sucker and play around with it, because you can do some pretty neat things pretty easily% !un challenge) try to implement a feature that would let you sa(e whate(er you draw in the can(as to a bitmap or ,pg file8 Clic! here to download

-kay, the steps to follow) 1. .ust sa(e the file to your desktop% 2. Double click the file to open it with win/ip%

3% 4. #lick 01xtract0 and extract the file to your desktop

2note) you need to extract both files*%

5. -n your desktop, you should now ha(e a folder 6. 7.

called 0Sketchpad@0 extended s!etchpad program "o in there and double3click 0Sketch@%(bp0 2%(bp stands for 06isual Basic 4ro,ect0* 7ow, you should get 6B loaded up with that pro,ect, no problem8

The pro1ect 2ile 2or the

9ith that going, you can push the play button 2center of the top tool bar* and see what it looks like% There's tons of stuff you can do with this one) :ou can draw a line on the can(as you can change the colour of the line you draw on the can(as you can change the thickness of the line you draw on the can(as you can clear your can(as and start from scratch 2although witha picture like this, why would you clear it<<< )**