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++)

Microsoft Visual Studio

Creating VB /C# Applications

• Create the interface• Set the properties• Write the code

• 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

Creating VB/C# ApplicationsCreate the interface

How to get started in C#File new project

1 2

3

4

1:Toolbox 2:form window3:properties window 4:projext explorer window

How to get started in C#/VB

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

How to get started

How to get started

properties windowWhenever 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

How to get started

Add controls to a form Objects in the toolbox

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

• CheckBox and RadioButtonWhat is the difference ?

Add controls to a form ((CheckBox and RadioButton

RadioButton CheckBox

Add controls to a form(GroupBox) using GroupBox

ComboBox prosperitiesTextDropDownStyle

Add controls to a form(ComboBox )

ComboBox prosperitiesItem

Add controls to a form(ComboBox )

Run screen

ChecckedListBox isCheckBoxListBox

Add controls to a form(ChecckedListnBox)

ChecckedListnBox properitiesItemCheckonclick

Add controls to a form(ChecckedListnBox)

Toolbox

1

2

Add controls to a form(menustrip)

Add standard items

1 2

Add controls to a form(menustrip)

Add separatorType – 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(menustrip)

Add controls to a form(toolstrip)

• dateTimePicker control: is used to display the date to the user in a single textbox format.

Add controls to a form(dateTimePicker)

• TabControl :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 : TabControlMost important object properties : text

Add controls to a form(taps)

Windows properties for TabControl

Add controls to a form(taps)

textbox control•passwordChar property :use to protect the textbox.•Multiline property: allow to user to enter multiple lines of text

Add controls to a form

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 projectRun 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

Use MSGBOX function(cont…)

Use MSGBOX function(cont…)

Question

Critical

Warning

Use MSGBOX function

• Project <project name> propertiesPublish

Example of Design interface

شرح محتويات الشاشة

Practices

Open new project

Change background image

Status bar

Web browser

Tool strip

Edit item of tool strip 1

Edit item of tool strip 1

Edit item of status bar

Finally