Information System Design Lab 56 User Interface Design

Information System Design Lab 5&6

User Interface Design

Microsoft Visual Studio is Øan integrated development environment (IDE) from Microsoft. ØIt is used to develop console and graphical user interface (windows forms application , websites ) ØVisual Studio includes a code editor, debugger, forms designers ) for building GUI applications. ØVisual Studio supports different programming language (Microsoft Visual Basic, Visual J#, Visual C#, and Visual C++)

Creating VB /C# Applications • Create the interface • Set the properties • Write the code

Creating VB/C# Applications Create the interface • Forms: windows that contain application’s controls. – forms are used as display windows to gather info and return commands or instructions. • Controls: check boxes, list boxes, etc. • Properties: attributes of objects. • Events: messages or requests for service. • Procedures: operations or services. – include methods, functions, subroutines

How to get started in C# File new project

How to get started in C#/VB 1 2 4 3 1: Toolbox 2: form window 3: properties window 4: projext explorer window

How to get started Toolbox display buttons that represent the controls that are available for user to add to a form

How to get started

How to get started properties window Whenever an object is active, the property window lists all of the properties that are associated with that object when you click a property item , there is a message area under the properties window that explains what effect the property has on its object

Add controls to a form Objects in the toolbox

Add controls to a form (label , textbox and button )

Add controls to a form (Check. Box and Radio. Button ) • Check. Box and Radio. Button What is the difference ? Radio. Button Check. Box

Add controls to a form (Group. Box) using Group. Box

Add controls to a form (Combo. Box ) Combo. Box prosperities ØText ØDrop. Down. Style

Add controls to a form (Combo. Box ) Combo. Box prosperities ØItem Run screen

Add controls to a form (Checcked. Listn. Box) Checcked. List. Box is ØCheck. Box ØList. Box

Add controls to a form (Checcked. Listn. Box) Checcked. Listn. Box properities ØItem ØCheckonclick

Toolbox Add controls to a form (menustrip) 1 2

Add controls to a form (menustrip) Add standard items 1 2

Add controls to a form (menustrip) Add separator Type – then enter separator

Add controls to a form (menustrip) • Include menu shortcut keys : In most applications , you have some way of accessing the menu options without using the mouse. this is done by using shortcut keys. Properties windows (Image , Text , Shortcut kes)

Add controls to a form (menustrip) • Add code to a menu option: Double click on a menu option

Add controls to a form (toolstrip)

Add controls to a form (date. Time. Picker) • date. Time. Picker control: is used to display the date to the user in a single textbox format.

Add controls to a form (taps) • Tab. Control : allows to user to place other controls on each of the tabs independently. When the user clicks a particular tab, only those controls on that tab are displayed automatically

Add controls to a form (taps) Object name : Tab. Control Most important object properties : text

Add controls to a form (taps) Windows properties for Tab. Control

Add controls to a form textbox control • password. Char property : use to protect the textbox. • Multiline property: allow to user to enter multiple lines of text

How to add a form • Add new form Project add windows form

Project • Project <project name> properties • The most important item that you can change here is the Startup form • This will tell VB which form should be run first at startup

How to run your project Run The Application : there are several ways to run or test your application. Either …. Return to the environment After executing or running a project , clicking the close button to return to code. End execution with an error : In some case, you may want to terminate the execution during an error massage. the end button on the toolbar will accomplish this.

Add code to your form • Access the code window : 3 ways • Enter code

Use MSGBOX function Displays a message in a dialog box, waits for the user to click a button, and then returns an integer indicating which button the user clicked. Message title