MSSQL-Forms - Windows Application & Basic Form …carme.cs.trinity.edu/thicks/3321/Handouts/VS-2-Buttons...3] Senior Project stakeholders often require our teams to use a specific

Visual Studio Windows Form Application #2 Buttons & TabFrame Properties

Dr. Thomas E. Hicks

Computer Science Department Trinity University

Use LibraryApp2 Project

Visual Studio Windows Form Application #1 Basic Form Properties

http://carme.cs.trinity.edu/thicks/3321/Handouts/VS-1-SE-Basic-Form-Tutorial.pdf

Purpose

1] The purpose of this tutorial is to show how to create, and use, a basic Windows Application with Visual Studio. Buttons and TabFrames will be added to the TextBoxes & Labels used in the first tutorial. Additional basic form Guidelines will be introduced.

2] Topics included are:

A) Rename The Application B) User Form After First Tutorial C) Selecting Color Combination D) Getting RGB Color Tags E) Screen Size Too Small For Data F) Add A Tab Control G) Change The TabControl Background H) Add A Page To The TabControl I) Change The Tab Control Font J) Changing The Page Name & Titles K) Add A MenuStrip L) Add Items To MenuStrip M) Namespace N) Constructor User O) User_Load P) Add A Region Q) MyRenderer & MyColors R) Important Information Goes To Top Of Form S) Key Identification Information On Each & Every Tab T) Stakeholder Review U) Looks Are Important V) Buttons W) Buttons Should Be Well Named X) Variables & MessageBox & On-Click Event Y) Creating A Button Color Z) Buttons Should Often Have ToolTips

3] More topics included are:



VS-2-Buttons-TabFrame-Form.docx Software Engineering Dr. Tom Hicks [2]

A. About Button FlatStyle B. Buttons As Graphic Images C. MessageBox Revisited D. Use MessageBox To Show The Contents Of Multiple Variables E. ToolTips On The MenuStrip F. Prototypes G. Prototype - Assign Values To Data Entry Objects H. Activate One Of The MenuStrip Buttons I. Navigation Panel J. Navigation Buttons K. Quick-Link Buttons

Project Requirements

1] As you work on projects for your company, or as a consultant, there will generally be some constraints with which the project

has to conform. 2] One of those constraints is often the programming language and/or API. If the stakeholder develops applications in C# using

Visual Studio 2017, then it is quite reasonable to expect them to require that work you do for them be in C# using Visual Studio 2017. After all, maintenance and changes are a reality; it may well be the case that you are not available to complete upgrades, etc. They must be able to do that once you are out of the picture.

3] Senior Project stakeholders often require our teams to use a specific language and/or API. Your Software Engineering final

project prototype must be done with Visual Studio 2017 C#. 4] It is often the case that developers also have constraints with respect to style. Training is reduced when the project that you

develop is similar to others that the company uses. 5] Your final project must have a very simplistic novice user interface similar to that shown below. It must have navigation

buttons. You may add additional interface options for extra credit.

Rename The Application

VS-2-Buttons-TabFrame-Form.docx Software Engineering Dr. Tom Hicks [3] 1] Open Project Library2. Right-Mouse Click on the LibraryApp1 Select Rename. (See Below)

2] Change LibraryApp1 to LibraryApp2. (See Below)

3] Select Solution 'LibraryApp1' change LibraryApp1 to LibraryApp2. (See Below)

4] Note that this also changes the name of the Application at the top. (See Below)

User Form After First Tutorial

1] At the end of the tutorial above, we had developed the form you see below.


2] At the end of the tutorial above, we made a backup called LibraryApp2; we shall use it for this tutorial.

Selecting Color Combinations

1] We mentioned using Color Pickers in the first tutorial. We are going to try several of them here.

2] Load http://colorhunter.com into your browser. There are a number of color combinations.

http://colorhunter.com/

http://colorhunter.com/


3] Save a jpg of your screen. Push the Upload An Image button. Once your form is uploaded, the website returns a collection of compatible colors. You can see mine below.

4] Load https://color.adobe.com in your browser. Push the Import Image button.

https://color.adobe.com/

https://color.adobe.com/


5] The adobe site also provides us with color combinations for our page.

6] This site has many options we can set; such as the one below. Check it out.


7] Another site that allows you to upload an image is http://colrd.com/create/image-dna/

8] We are going to make a number of changes on your form. Use one of the color picker applications to alter the color combination at this time. I am going to use this set.

Getting RGB Color Tags

http://colrd.com/create/image-dna/

http://colrd.com/create/image-dna/


1] Select your pallet from the desired color picker.

2] Start an imaging program of your choice; I am going to use Paint because it is installed with windows.

3] I have pasted in my pallet colors below.

4] Select the color detection tool (eyedropper) and touch one of your colors I am selecting the Green.

5] Once I have selected one of the colors, I am going to make it Color 1 by pushing the Color 1 Button then I am going to push the Edit Colors button. (Seee Below!)

6] The Edit Colors pallet shows us the RGB values for this color. Record them! Red = 32 Green = 29 Blue = 64


7] Record the RGB for each of the colors in your pallet.

8] Record these colors and keep them available.

9] I am going to make the background, on form User,.cs, the dark blue shade above. 32, 29, 64 Alter your background if you like.

Screen Size Too Small For Data

1] I have completed applications in which the database table, or class had as many as 300 fields.

2] Suppose we have found that the txtNote field, on our existing form, is way too small.

3] In addition to this, suppose that we need to show all of the checkout transaction information relative to each user. There simply is not room to accomplish this using a normal size screen.

4] Developers often use the TabControl to provide more real-estate for the data entry.

Add A TabControl

VS-2-Buttons-TabFrame-Form.docx Software Engineering Dr. Tom Hicks [10] 1] It is definitely easier to add the TabControl at the beginning of the form development, but we can add it at any

time,.

2] Using your mouse, drag the TabControl from the ToolBox to the bottom of your form. Temporarily drag you’re the TabControl larger. (See Below)

3] Using your mouse, select everything except the Notes and drag on top of tabPage1 of the TabControl. (See Below)

4] Select the Notes (prompt and data entry field) and drag them on to tabPage2. (See Below)


5] Move the TabControl to neatly fit at the top of your form.

6] Right-mouse click on the TabControl Select Properties. Set the TabControl Location as follows:

Change The TabControl Background

1] Right-mouse click on the TabControl Select Properties.

2] Change the background property of tapPage1 and tabPage2 to match your form background.

Add A Page To The TabControl

VS-2-Buttons-TabFrame-Form.docx Software Engineering Dr. Tom Hicks [12] 1] Right-Mouse click on the TabControl Select Properties.

2] There is a button beside the TabPages (Collection) Push It. This will launch the TabControl Editor.

3] Push the Add button to Add a new third page. We now have three pages with big ugly titles.

Change The Tab Control Font

VS-2-Buttons-TabFrame-Form.docx Software Engineering Dr. Tom Hicks [13] 1] Select TabControl Properties. Change the font to Arial Regular 10 point we would like to make the tabs less

abrasive.

Changing The Page Name & Titles

1] Return to the TabPage Collection Editor. Select TabPage1. Change the name of the page to PersonalInfo.

2] Change the Text of the page to Personal Info

3] Likewise, change the Name of tabPage2 to Notes. Change the Text of the page to Notes.

4] Likewise, change the Name of tabPage3 to CheckOut. Change the Text of the page to CheckOut Records.

VS-2-Buttons-TabFrame-Form.docx Software Engineering Dr. Tom Hicks [14] 5] Your form should look much like the following:

Add A MenuStrip

1] Move the TabControl down so that there is room for our MenuStrip at the top. Set the Location = 0,24 Note the empty space at the top.

2] Using the mouse, drag the MenuStrip tool to to top of your form. (See Below)


3] Change the color or your MenuStrip to match one of your RGB colors.

Add Items To MenuStrip

1] Add the following options to your MenuStrip.

2] Add the following options to Search:

3] As you can see from the hover over Save below, the GUI's are only so good at allowing you to determine the

colors associated with form objects. This is not terribly readable.

4] We are going to add some code, which I found in a 3-minute Internet search, to help correct this.

Namespace

VS-2-Buttons-TabFrame-Form.docx Software Engineering Dr. Tom Hicks [16] 1] Using the mouse, double-click beneath the TabControl as shown below.

2] This will open the code in User.cs[Design] Several things are worth noting. 3] Our user Namespace is LibraryApp . The project may have many forms. You can even import forms from

other projects. But Every form must be in the same namespace LibraryApp this will be important as multiple people (a team) work on contributions for the same application.

Constructor

VS-2-Buttons-TabFrame-Form.docx Software Engineering Dr. Tom Hicks [17] 1] Just as you would expect from C++, the constructor for class User is User(). This constructor is fired when the

page/form is created.

2] This form is for class User. Function User() is the constructor. It is evoked automatically every time a User object is created just like in scala and C++.

Function User_Load

1] Double-clicking on the empty area form (somewhere off the objects) is one of several ways to create the load event for the form.

2] It too, has the name of the class. I often place the form's load event immediately after the constructor. We will

eventually add code here.

3] Immediately after the constructor is evoked, the class load function User_Load is automatically evoked.

Add A Region

1] The code tends to get long. Many of my pages require more than 40 pages to print. Regions will help you to

concentrate on the functions at hand. Copy/Paste the following into User.cs //-------------------------------------------------------------------------------- //---------------------- Dr. Hicks Initializtion Utilities ----------------------- #region ----User--User_Load--MyRenderer--MyColors--CreateParams ------------------ //-------------------------------------------------------------------------------- //-------------------------------------------------------------------------------- #endregion ------------- Dr. Hicks MySQL Initializtion Utilities ----------------- //-------------------------------------------------------------------------------- 2] Place move functions User & User_Load into the middle of this region. 3] Note that if you click the little minus sign by the region,


it shuts down to the following. Once you finish testing functions, this is a great way to get them out of the way.

4] You can re-open the functions by pressing the plus sign by region, or by searching for something within. 5] This region will get larger as we add functions CreateParms, MyRenderer, and MyColors to the region; we will do

this during this tutorial.

MyRenderer

1] Copy/Paste MyRenderer inside the Region that you created above. private class MyRenderer : ToolStripProfessionalRenderer { protected override void OnRenderMenuItemBackground(ToolStripItemRenderEventArgs e) { Rectangle rc = new Rectangle(Point.Empty, e.Item.Size); Color c = e.Item.Selected ? Color.Black : Color.FromArgb(79, 18, 5); using (SolidBrush brush = new SolidBrush(c)) e.Graphics.FillRectangle(brush, rc); } } 2] Add the following line of code to your form's load event.


3] Run your application. Note that the black is so much more readable for me.

4] You should modify the colors to co-ordinate with your color scheme. Don't be afraid to look for code solutions.

Important Information Goes To Top Of Form

GUIDELINE # 19 If there is a primary key, such as the ID, place it near the top.

GUIDELINE # 20 There will generally be information, which helps to identify this record, that should be place it near the top.

1] The auto incrementing ID is a primary key; it is at the top of our form. It should not appear to be a data entry TextBox.

2] The Name (First-MI-Last) helps to identify each user. It is at the top of our form.

Key Identification Information On Each & Every Tab

GUIDELINE # 21 There will generally be some critical identification information that should be placed at the top of each and every tab – to help to identify the record in view.

1] Some developers use identical data entry boxes on all tabPages; It is best if you keep the location consistent.


2] It is best if you keep the location consistent. First appears at location 86,72 on all three of the tabs.

3] In this particular solution, a user could change the First on any of the three forms; the developer would have to make sure that they are kept in synch.

4] I used this approach for the first two forms on a consulting job; it generated questions as users tested the first release of my prototype. "Why is this here twice?"

5] The guideline is valid I prefer the following look a scenario where the user may alter the First, MI, and Last only on the first tab,

6] The important thing is that we know that the User is Tom Hicks no matter which of the tabs are on the fore-front. I would be happy with either of these strategies. Make sure that we can always identify what we are looking at!

7] My approach leaves more room on the form for data.

Stakeholder Review


GUIDELINE # 22 It is a great idea to get to have your stakeholder review, and use, a first form early in the design process this might help you avoid making similar corrections on many other forms.

1] As software engineers, we often struggle trying to determine the best font size to use. We want it to be easily readable by folks using our software 8 hours a day, but we do not make it too big. When teaching I tend to make my font a size bigger to increase readability in the classroom.

2] I once ask a PhD in User Interface design what she recommended for font face and font size. She recommended Arial for the face it is always available on all systems! She most often recommends a font size of 12.

3] The Interface Designer said that the size 12 often allowed her to include a substantial amount of data while maintaining reasonable readability.

Looks Are Important

1] It absolutely befuddles me to hear that the "Number 1 criteria influencing the purchase of a pieces of software is WHAT DOES IT LOOK LIKE". The look and feel are often more important than what you invest under the hood!

GUIDELINE # 23 Lots of form design decisions are best made early this includes choices in color schemes, use of tabs, button choices, menustrips, etc.

2] What color scheme are you going to use? What font are you going to use? What font size are you going to use? Are you going to use TabControls?

3] At the end of this tutorial, we will add some Navigation buttons and a MenuStrip. We will have to decide what these are to look like and where they will be placed.

4] Applications generally involve many forms. I hope that you have already seen that it takes extra time to make changes; this slows down progress. Make these decisions early.

Buttons

1] Buttons are used to enable the user to trigger events; we are about to create a button to Exit the application.

2] Drag a Button from the Toolbox to the User form.


Buttons Should Be Well Named

GUIDELINE # 24 All buttons should be well named and the button Text/Image shall help to clearly identify the purpose/functionality.

1] The Microsoft convention is to begin the name of each button with the string "btn" I am going to call this data entry container ==> btnTest (See Below)

2] Change the button Name from button1 to btnTest

GUIDELINE # 25 Some buttons will have text on the button face; it this is the case, that text shall clearly identify the purpose of the specific button whether we use text or images, we should often use ToolTips to help clarify the purpose/functionality.

3] Change the button Text from button1 to Exit.

Creating A Button Color

GUIDELINE # 26 All Button color combinations should be consistent and professional; they shall go well with the form.

1] Your buttons may be the normal silver/aluminum shade if that goes with your form; you may select a color in you palette. Remember to keep it professional.

Variables & MessageBox & On-Click Event

1] Declare a Boolean variable, called Testing, at the top of the User form.


2] Keep your Test button relatively small and out of the way. Using the mouse, double-click on btnTest to create an on-click event for that button.

3] Note the good title associated with the on-click event btnTest_Click this is why we name all of our buttons well before we create the events. This is much more meaningful than button1_Click.

4] The plus sign is concatenation. The message box can be used to display local variables.

5] This is one of several events that can be associated with a button.

Buttons Should Often Have ToolTips

VS-2-Buttons-TabFrame-Form.docx Software Engineering Dr. Tom Hicks [24] 1] Select the Button Properties. Add the following ToolTips to the Exit Button.

2] The ToolTips work; make the background color of the button match that of your menustrip.

3] The ToolTips work. The vast majority of my buttons have meaningful tool tips which help to explain the functionality associated with the button.

About Button FlatStyle You Need Not Do This Section For Your Info

1] The default FlatStyle is Standard.

2] The left image, below, shows a standard FlatStyle button; the right image, below, shows a standard FlatStyle button with mouse over. There is no obvious difference.

VS-2-Buttons-TabFrame-Form.docx Software Engineering Dr. Tom Hicks [25] 3] The FlatStyle is now set to Popup.

4] The left image, below, shows a popup FlatStyle button; the right image, below, shows a popup FlatStyle button with mouse over. Note a slight difference around the image border as it turns light blue.

5] The FlatStyle is now set to flat.

6] The left image, below, shows a flat FlatStyle button; the right image, below, shows a flat FlatStyle button with mouse over. Note a definite difference in color. It is much more obvious that this is a button. I often use flat!

Buttons As Graphic Images

1] Go to google images and get a phone icon of some type. You are welcome to use any type of phone cell phone, land line, etc. Save the image on your desktop. Select an image that you can identify when you get it small.

2] Use a paint program to resize your image and match your color scheme. Make your image about 20-25 pixels high. I have done the following:

3] Inside your project, create a folder called Images. We would like to make sure that we always have all of them images associated with the project close at hand in case we choose to alter one later.


4] Place your phone image inside the Images folder.

5] Drag a new button beside your Home Phone

6] Name the button btnHomePhone.

7] Push the button to add a BackgroundImage

8] Visual Studio can link to local images. Do not do this. You will need these images, in exactly the same directories on future installations. It is best to Import all images into your application so that they are bundled with the .exe file as you distribute other installations.

9] Push the Import button.


10] Navigate to your Phone Image. Select it. Push the Open button.

11] The phone is now in the library. Push the OK button.

12] Perhaps you can see that the button text is not needed.

13] Change the button text to blank.


14] Change the button border size to 0.

15] Change the button FlatStyle to Flat.

16] Things are getting better. We now need to figure out what size to make our button. Trial and Error!

17] In order to avoid the duplication of the image, resize your image appropriately.

18] Your phone button should be well named and look something like the following:

19] We could repeat that same process for the Cell Phone but.. I prefer to copy paste btnHomePhone and rename it.

20] Of course you should make sure your buttons are aligned.

GUIDELINE # 27 Some buttons will have text on the button face; it this is the case, that text shall clearly identify the purpose of the specific button. Mouse-over tool tips will often clarify the purpose.

21] Add the following tooltip to btnHomePhone.

22] Add the following tooltip to btnCellPhone.


MessageBox Revisited

1] Using the mouse, double-click on btnHomePhone; this act of double-clicking creates an On-Click event for the object.

2] We are now ready to add C# code to the button.

3] Add the code below to you’re your on-click event.

4] Create an on-click event for your btnCellPhone and add the following code.

5] This MessageBox dialog window. now pops up when you press btnHomePhone. In a real life application, you could add code to acutally dial the phone.


Use MessageBox To Show The Contents Of Multiple Variables

1] Declare String variable Database at the top of the class; initialize it to Trinity. By declaring the variable here, it is available to every function within the class. Declare long variable Port and initialize it to 12345. (See Below)

2] We could Update btnTest_Click function to show the contents of multiple variables. Add the following:

3] Run your form. Push the button. You should get the following:


ToolTips On The MenuStrip

1] Select the properties on the MenuStrip. Change the ShowItemToolTips from False to True.

2] Make the ToolTips for Add Add A New User

3] Make the ToolTips for Edit Edit This User

4] Make the ToolTips for Delete Delete This User

5] Make the ToolTips for Undelete UnDelete Users

6] Make the ToolTips for Save Save Changes Made To This User

7] Make the ToolTips for Cancel Cancel Changes Made To This User

8] Make the ToolTips for Close Close This Form

9] Make sure that each of these ToolTips work properly. 10] Eventually, each of our MenuStrip items should have ToolTips. Test each of these to make sure that they

work.

Prototypes

VS-2-Buttons-TabFrame-Form.docx Software Engineering Dr. Tom Hicks [32] 1] C# is used to build software Prototypes. These prototypes are non-working versions that the developers can

share with the stakeholders to enable them to see what you have in mind a possible solution.

2] Software Engineers tell us that Prototypes are so much more effective when the stakeholder can see a sample record on each form.

3] During the prototype demonstrations, the only time we wish to see a form that does not contain data is when we are demonstrating the Add process.

Add A Region

1] Add the following region to your code. //-------------------------------------------------------------------------------- //------------------------- Dr. Hicks Form Processing ---------------------------- #region ----- FillFormVariables--FillFormBlank--ProcessDataToggle ---------------- //-------------------------------------------------------------------------------- //-------------------------------------------------------------------------------- #endregion ---------------- Dr. Hicks Form Processing ---------------------------- //-------------------------------------------------------------------------------- 2] Use your name.

Prototype - Assign Values To Data Entry Objects

1] Add variable DataToggle to your form.

:

2] We have DATA at the far end of the MenuStrip. (See Below)

3] We are going to use button DATA to (1) blank out all of the data simulating what the user would see if they were to add a new record and (2) refill the form with an example of valid looking data.

4] Your top of User.cs should look something like the following:


3] Write the code for function FillFormWithSampleData. Include the documentation update it using your name. Use data of your own. I created this in such a way that you can copy/paste. Your job is to blank out all of the fields on your form including the notes tab. Place this function in your Form Processing Region.

//===========================================================================// //== FillFormVariables ==// //== ==// //== Purpose: Fill all of the data entry fields with a realistic sample ==// //== data record. ==// //== ==// //== Written By: Dr. Tom Hicks Operating System: Windows 10 ==// //== Date: XX\XX\XXXX Environment: C# VS 2017 ==// //===========================================================================// private void FillFormVariables() { txtFirst.Text = "Tom"; txtLast.Text = "Hicks"; txtID.Text = "12345"; }

4] Write the code for function FillFormBlank. Include & Update the documentation. I created this in such a way that you can copy/paste, Your job is to blank out all of the fields on your form including the notes tab. Place this function in your Form Processing Region.

//===========================================================================// //== FillFormBlank ==// //== ==// //== Purpose: Fill all of the data entry fields with a realistic blank ==// //== (new user type) data record. ==// //== ==// //== Written By: Dr. Tom Hicks Operating System: Windows 10 ==// //== Date: XX\XX\XXXX Environment: C# VS 2017 ==// //===========================================================================// private void FillFormBlank() { txtFirst.Text = ""; txtLast.Text = ""; txtID.Text = ""; }

5] Write the code for function ProcessDataToggle. Include & Update the documentation. I created this in such a way that you can copy/paste. Place this function in your Form Processing Region.


//===========================================================================// //== ProcessDataToggle ==// //== ==// //== Purpose: When the DataToggle = true, set it to false and run ==// //== FillFormVariables. ==// //== ==// //== When the DataToggle = false, set it to true and run ==// //== FillFormBlank. ==// //== ==// //== Written By: Dr. Tom Hicks Operating System: Windows 10 ==// //== Date: XX\XX\XXXX Environment: C# VS 2017 ==// //===========================================================================// private void ProcessDataToggle() { if (DataToggle == true) { FillFormVariables(); DataToggle = false; } else { FillFormBlank (); DataToggle = true; } }

6] Add a call to ProcessDataToggle to the Load event; it will be fired each time the form is created it will start with data.

Activate One Of The MenuStrip Buttons

1] Each of the items on the MenuStrip are Buttons. We can create the On-Click events by double-clicking on them. 2] Using the mouse, double-click on the DATA button.

3] Use the button to evoke ProcessDataToggle.

Review The Data Toggle

1] When stakeholders view your form, they will now have an opportunity to view the form with data. Your Personal Info tab should be complete (including an ID)


2] When you look at the Notes tab, make sure that the First, MI, Last, and ID are the same as on the first tab.

3] When you look at the Check-Out tab, make sure that the First, MI, Last, and ID are the same as on the first tab.


4] When you push the DATA button, stakeholders view your form as it would appear if they were about to add a new record. This is a new record Note that there is not an ID yet.

5] Tab Notes in Add Mode. This is a new record Note that there is no First, MI, Last, ID, or Notes.


6] Tab Check-Out in Add Mode. We are going to add more to this page later, but for the moment Note that there is no First, MI, Last, or ID.

Navigation Panel


1] Using the mouse, drag a panel to the bottom of your form. Expand it across the whole rectangle at the bottom.

2] Name the panel

3] As part of the requirements for this novice interface, you will be asked to create graphical navigation controls which will help direct users to the next record, the previous record, the first record, and the last record.

4] I would like you get four icons to use for navigation. You may download these from the Internet or draw your own with a paint program. I drew these with Paint.net. It would be best if these images are about 30 x 30 pixels.

5] Place the four graphic images in your Images folder. Name the images First, Last, Next, & Previous.

6] Import the images into your application.


Navigation Buttons

1] Add the following buttons on top of your panel,

2] Name two of the buttons and provide tool tips.

btnFirstLeft "Navigate To The First Logical Record Within The View"

btnFirstRight "Navigate To The First Logical Record Within The View"

btnLastLeft "Navigate To The Last Logical Record Within The View"


btnLastRight "Navigate To The Last Logical Record Within The View"

btnNextLeft "Navigate To The Next Logical Record Within The View"

btnNextRight "Navigate To The Next Logical Record Within The View"

btnPreviousLeft "Navigate To The Previous Logical Record Within The View"

btnPreviousRight "Navigate To The Previous Logical Record Within The View"

3] Double-check the ToolTips for all 8 of the Navigation Buttons.

Add A Region

1] Copy/Paste the following region..

//-------------------------------------------------------------------------------- //------------------ Dr. Hicks Record Set Navigation Collection ------------------ // ---LoadNextRecord--LoadFirstRecord--LoadLastRecord--LoadPreviousRecord--------- #region ----- ReloadQuickLinkToolTips -- LoadFirstLetterRecord-------------------- //-------------------------------------------------------------------------------- //-------------------------------------------------------------------------------- #endregion ------------- Dr. Hicks Record Set Navigation Collection -------------- //--------------------------------------------------------------------------------

Quick-Link Buttons

1] Add 26 Quick-Link buttons to your form. You can make them with a paint program if you like? You can download some from the Internet. I just used the Arial font on the normal button. Make your buttons about 30 x 30 pixels.

2] Name the buttons btnA, btnB, … btnZ.

3] We are going to Associate the FullName with the quick-link buttons; this will us to cycle through the undeleted records in the same order as they would appear in the phone book. When I develop applications, I often allow my users to alter/select these buttons.

VS-2-Buttons-TabFrame-Form.docx Software Engineering Dr. Tom Hicks [41] 4] Add the variable QuickLinkText to your form.

5] Copy/Paste ReloadQuickLinkToolTips into your region.

//===========================================================================// // Purpose: Programatically assign tool tips to the quick-link keys. ==// //== ==// //== Written By: Dr. Tom Hicks Operating System: Windows 10 ==// //== Date: XX\XX\XXXX Environment: C# VS 2017 ==// //===========================================================================// public void ReloadQuickLinkToolTips() { toolTip1.SetToolTip(btnA, "Load The First Record Whose " + QuickLinkText + " Begins With An 'A'"); toolTip1.SetToolTip(btnB, "Load The First Record Whose " + QuickLinkText + " Begins With A 'B'"); toolTip1.SetToolTip(btnC, "Load The First Record Whose " + QuickLinkText + " Begins With A 'C'"); toolTip1.SetToolTip(btnD, "Load The First Record Whose " + QuickLinkText + " Begins With A 'D'"); toolTip1.SetToolTip(btnE, "Load The First Record Whose " + QuickLinkText + " Begins With An 'E'"); toolTip1.SetToolTip(btnF, "Load The First Record Whose " + QuickLinkText + " Begins With An 'F'"); toolTip1.SetToolTip(btnG, "Load The First Record Whose " + QuickLinkText + " Begins With A 'G'"); toolTip1.SetToolTip(btnH, "Load The First Record Whose " + QuickLinkText + " Begins With An 'H'"); toolTip1.SetToolTip(btnI, "Load The First Record Whose " + QuickLinkText + " Begins With An 'I'"); toolTip1.SetToolTip(btnJ, "Load The First Record Whose " + QuickLinkText + " Begins With A 'J"); toolTip1.SetToolTip(btnK, "Load The First Record Whose " + QuickLinkText + " Begins With A 'K'"); toolTip1.SetToolTip(btnL, "Load The First Record Whose " + QuickLinkText + " Begins With An 'L'"); toolTip1.SetToolTip(btnM, "Load The First Record Whose " + QuickLinkText + " Begins With An 'M'"); toolTip1.SetToolTip(btnN, "Load The First Record Whose " + QuickLinkText + " Begins With An 'N'"); toolTip1.SetToolTip(btnO, "Load The First Record Whose " + QuickLinkText + " Begins With An 'O'"); toolTip1.SetToolTip(btnP, "Load The First Record Whose " + QuickLinkText + " Begins With A 'P'"); toolTip1.SetToolTip(btnQ, "Load The First Record Whose " + QuickLinkText + " Begins With A 'Q'"); toolTip1.SetToolTip(btnR, "Load The First Record Whose " + QuickLinkText + " Begins With An 'R'"); toolTip1.SetToolTip(btnS, "Load The First Record Whose " + QuickLinkText + " Begins With An 'S'"); toolTip1.SetToolTip(btnT, "Load The First Record Whose " + QuickLinkText + " Begins With A 'T'"); toolTip1.SetToolTip(btnU, "Load The First Record Whose " + QuickLinkText + " Begins With A 'U'"); toolTip1.SetToolTip(btnV, "Load The First Record Whose " + QuickLinkText + " Begins With A 'V'"); toolTip1.SetToolTip(btnW, "Load The First Record Whose " + QuickLinkText + " Begins With A 'W'"); toolTip1.SetToolTip(btnX, "Load The First Record Whose " + QuickLinkText + " Begins With An 'X'"); toolTip1.SetToolTip(btnY, "Load The First Record Whose " + QuickLinkText + " Begins With A 'Y'"); toolTip1.SetToolTip(btnZ, "Load The First Record Whose " + QuickLinkText + " Begins With A 'Z'"); }

6] Add the call to ReloadQuickLinkToolTips to your Load event.

7] Double-check the ToolTips for all 26 of the Quick-Link Buttons.


Place Important Code In Functions

1] It is not a good practice to put any significant code in your buttons. It is best to put all significant code in functions because we can call functions from other functions. We also have less risk associated with the accidental deletion of a button.

2] Copy all of the following code in your Navigation Region.

//===========================================================================// //== LoadLastRecord ==// //===========================================================================// //== ==// //== Purpose: Load the last logical record into the datatable. ==// //== ==// //== Limitation : Problem when all records are deleted or no records in ==// //== view. ==// //== ==// //== Written By: Dr. Tom Hicks Operating System: Windows 10 ==// //== Date: XX\XX\XXXX Environment: C# VS 2017 ==// //===========================================================================// private void LoadLastRecord() { } //===========================================================================// //== LoadFirstRecord ==// //===========================================================================//

VS-2-Buttons-TabFrame-Form.docx Software Engineering Dr. Tom Hicks [43] //== ==// //== Purpose: Load the first logical record into the datatable. ==// //== ==// //== Limitation : Problem when all records are deleted or no records in ==// //== view. ==// //== ==// //== Written By: Dr. Tom Hicks Operating System: Windows 10 ==// //== Date: XX\XX\XXXX Environment: C# VS 2017 ==// //===========================================================================// private void LoadFirstRecord() { } //===========================================================================// //== LoadNextRecord ==// //===========================================================================// //== ==// //== Purpose: Load the next logical record into the datatable. Cycle ==// //== from the last record to the first. ==// //== ==// //== Limitation : Problem when all records are deleted or no records in ==// //== view. ==// //== ==// //== Written By: Dr. Tom Hicks Operating System: Windows 10 ==// //== Date: XX\XX\XXXX Environment: C# VS 2017 ==// //===========================================================================// private void LoadNextRecord() { } //===========================================================================// //== LoadPreviousRecord ==// //===========================================================================// //== ==// //== Purpose: Load the previous logical record into the datatable. Cycle ==// //== from the first record to the last. ==// //== ==// //== Limitation : Problem when all records are deleted or no records in ==// //== view. ==// //== ==// //== Written By: Dr. Tom Hicks Operating System: Windows 10 ==// //== Date: XX\XX\XXXX Environment: C# VS 2017 ==// //===========================================================================// private void LoadPreviousRecord() { }

//===========================================================================// //== LoadFirstLetterRecord ==// //===========================================================================// //== ==//

VS-2-Buttons-TabFrame-Form.docx Software Engineering Dr. Tom Hicks [44] //== Purpose: Load the first logical record, in the current view, whose ==// //== FullName begins with the Letter into the datatable. ==// //== ==// //== In the event that there is no name with this letter, you ==// //== can choose to (1) bring up a dialog box and tell the user ==// //== or go to the first record past that letter ==> i.e. if ==// //== there is no FullName starting with an 'X' --> maybe ==// //== try 'Y'? ==// //== ==// //== Use MySqlDataAdapter da & DataTable dt to house the ==// //== data. ==// //== ==// //== Limitation : Problem when all records are deleted or no records in ==// //== view. ==// //== ==// //== Written By: Dr. Tom Hicks Operating System: Windows 10 ==// //== Date: XX\XX\XXXX Environment: C# VS 2017 ==// //===========================================================================// private void LoadFirstLetterRecord(char Letter) { }

3] I teach students in my database design class to create on-click events for all of the navigation controls; each of these events call/evoke a more complex function. Their button code looks like the following:

Backup

1] Make a backup of LibraryApp2 Call it LibraryApp3


2] Copy LibraryApp1, LibraryApp2, & LibraryApp3 to your personal computer.

3] Copy LibraryApp1, LibraryApp2, & LibraryApp3 to your flash drive.

MSSQL-Forms - Windows Application & Basic Form …carme.cs.trinity.edu/thicks/3321/Handouts/VS-2-Buttons...3] Senior Project stakeholders often require our teams to use a specific

Documents