Information System Design Lab 5&6. User Interface Design.
-
Upload
miriam-sapp -
Category
Documents
-
view
219 -
download
1
Transcript of Information System Design Lab 5&6. User Interface Design.
![Page 1: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/1.jpg)
Information System Design
Lab 5&6
![Page 2: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/2.jpg)
User Interface Design
![Page 3: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/3.jpg)
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
![Page 4: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/4.jpg)
Creating VB /C# Applications
• Create the interface• Set the properties• Write the code
![Page 5: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/5.jpg)
• 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
![Page 6: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/6.jpg)
How to get started in C#File new project
![Page 7: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/7.jpg)
1 2
3
4
1:Toolbox 2:form window3:properties window 4:projext explorer window
How to get started in C#/VB
![Page 8: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/8.jpg)
Toolbox display buttons that represent the controls that are are available for user to add to a form
How to get started
![Page 9: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/9.jpg)
How to get started
![Page 10: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/10.jpg)
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
![Page 11: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/11.jpg)
![Page 12: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/12.jpg)
![Page 13: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/13.jpg)
Add controls to a form Objects in the toolbox
![Page 14: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/14.jpg)
Add controls to a form(label ,textbox and button )
![Page 15: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/15.jpg)
• CheckBox and RadioButtonWhat is the difference ?
Add controls to a form ((CheckBox and RadioButton
RadioButton CheckBox
![Page 16: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/16.jpg)
Add controls to a form(GroupBox) using GroupBox
![Page 17: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/17.jpg)
ComboBox prosperitiesTextDropDownStyle
Add controls to a form(ComboBox )
![Page 18: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/18.jpg)
ComboBox prosperitiesItem
Add controls to a form(ComboBox )
Run screen
![Page 19: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/19.jpg)
ChecckedListBox isCheckBoxListBox
Add controls to a form(ChecckedListnBox)
![Page 20: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/20.jpg)
ChecckedListnBox properitiesItemCheckonclick
Add controls to a form(ChecckedListnBox)
![Page 21: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/21.jpg)
Toolbox
1
2
Add controls to a form(menustrip)
![Page 22: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/22.jpg)
Add standard items
1 2
Add controls to a form(menustrip)
![Page 23: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/23.jpg)
Add separatorType – then enter
separator
Add controls to a form(menustrip)
![Page 24: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/24.jpg)
•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)
![Page 25: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/25.jpg)
•Add code to a menu option:Double click on a menu option
Add controls to a form(menustrip)
![Page 26: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/26.jpg)
Add controls to a form(toolstrip)
![Page 27: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/27.jpg)
• dateTimePicker control: is used to display the date to the user in a single textbox format.
Add controls to a form(dateTimePicker)
![Page 28: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/28.jpg)
• 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)
![Page 29: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/29.jpg)
Object name : TabControlMost important object properties : text
Add controls to a form(taps)
![Page 30: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/30.jpg)
Windows properties for TabControl
Add controls to a form(taps)
![Page 31: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/31.jpg)
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
![Page 32: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/32.jpg)
How to add a form
• Add new form Project add windows form
![Page 33: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/33.jpg)
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
![Page 34: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/34.jpg)
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.
![Page 35: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/35.jpg)
Add code to your form
• Access the code window :3 ways • Enter code
![Page 36: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/36.jpg)
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
![Page 37: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/37.jpg)
Use MSGBOX function(cont…)
![Page 38: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/38.jpg)
Use MSGBOX function(cont…)
![Page 39: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/39.jpg)
Question
Critical
Warning
Use MSGBOX function
![Page 40: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/40.jpg)
• Project <project name> propertiesPublish
![Page 41: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/41.jpg)
Example of Design interface
![Page 42: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/42.jpg)
![Page 43: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/43.jpg)
![Page 44: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/44.jpg)
![Page 45: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/45.jpg)
شرح محتويات الشاشة
![Page 46: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/46.jpg)
Practices
![Page 47: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/47.jpg)
Open new project
![Page 48: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/48.jpg)
Change background image
![Page 49: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/49.jpg)
Status bar
Web browser
Tool strip
![Page 50: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/50.jpg)
Edit item of tool strip 1
![Page 51: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/51.jpg)
Edit item of tool strip 1
![Page 52: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/52.jpg)
Edit item of status bar
![Page 53: Information System Design Lab 5&6. User Interface Design.](https://reader037.fdocuments.net/reader037/viewer/2022103015/551b0a5a5503462e578b5759/html5/thumbnails/53.jpg)
Finally