michael olivero microsoft student ambassador for fiu mike@mike95
DESCRIPTION
Pick up your free drink below to your left. 1 per person please. Michael Olivero Microsoft Student Ambassador for FIU [email protected]. Pre-Lecture Topics. Web site resources Lecture & Materials http://microsoft.mike95.com MSDN AA program http://www.cs.fiu.edu/MSDNAA/ - PowerPoint PPT PresentationTRANSCRIPT
Michael OliveroMicrosoft Student Ambassador for [email protected]
Pick up your free drink below to your left. 1 per person please.
Pre-Lecture TopicsPre-Lecture Topics
Web site resourcesWeb site resources Lecture & MaterialsLecture & Materials
http://microsoft.mike95.comhttp://microsoft.mike95.com MSDN AA programMSDN AA program
http://www.cs.fiu.edu/MSDNAA/http://www.cs.fiu.edu/MSDNAA/ Clarification / Questions from Previous Clarification / Questions from Previous
LectureLecture ““out” parameterout” parameter VB.NET vs. C#VB.NET vs. C# Lab #1?Lab #1?
Topics Covered TodayTopics Covered Today
Basic User Interface Design Principles Basic User Interface Design Principles .NET Forms .NET Forms Controls & Components Controls & Components Menus Menus ValidationValidation Give AwayGive Away
Basic UI ElementsBasic UI Elements FormsForms
Generally contain information or options in order to Generally contain information or options in order to proceed.proceed.
A Form is a class inherited fromA Form is a class inherited fromSystem.Windows.Forms.FormSystem.Windows.Forms.Form
ControlsControls make information and options accessible to usersmake information and options accessible to users
Some are display only such as labels and picture Some are display only such as labels and picture boxesboxes
Some display and receive input such as text Some display and receive input such as text boxes.boxes.
MenusMenus Expose available commands to the users of your Expose available commands to the users of your
application application
Things to keep in mind when designingThings to keep in mind when designing
SimplicitySimplicity Grouping Related Controls & Default ValuesGrouping Related Controls & Default Values Common mistake: reproducing real world formCommon mistake: reproducing real world form
Position of controlsPosition of controls Position of Required vs. OptionalPosition of Required vs. Optional Submit below informationSubmit below information
ConsistencyConsistency Forms should follow a patternForms should follow a pattern
.NET Forms.NET Forms
After this lesson, you will be able to:After this lesson, you will be able to: State the role of forms in an applicationState the role of forms in an application Explain how to add forms to your Explain how to add forms to your
applicationapplication Explain how to set the start-up form and Explain how to set the start-up form and
the start-up locationthe start-up location Explain how to set the visual appearance Explain how to set the visual appearance
of your formof your form Explain how to use form eventsExplain how to use form events
.NET Forms.NET Forms
Enable interaction between user Enable interaction between user and applicationand application
A way to prompt for or display A way to prompt for or display information without cluttering main information without cluttering main UI.UI.
Modal & Non Modal forms.Modal & Non Modal forms.
Common Form MethodsCommon Form Methods Form.Show()Form.Show()
Loads an instance into memory and makes it visible.Loads an instance into memory and makes it visible.
Form.ShowDialog()Form.ShowDialog() Same as Show() except must be closed before control returns to Same as Show() except must be closed before control returns to
main Form.main Form.
Form.Activate()Form.Activate() Brings form to the front and gives it focus.Brings form to the front and gives it focus. Flashes task bar if app doesn’t have focus.Flashes task bar if app doesn’t have focus.
Form.Hide()Form.Hide() Hides the form from view. Form still is loaded though.Hides the form from view. Form still is loaded though.
Form.Close()Form.Close() Removes form from memory and all related resources.Removes form from memory and all related resources.
Events in FormsEvents in Forms
Something interesting happensSomething interesting happens Think of it as verbs or actionsThink of it as verbs or actions
Form -> ActivatedForm -> Activated Form -> VisibleChangedForm -> VisibleChanged Form -> MoveForm -> Move
You can write custom code for any You can write custom code for any event.event.
Typical Lifetime EventsTypical Lifetime Events LoadLoad
Fired when form is loaded into memoryFired when form is loaded into memory Activate / DeactivateActivate / Deactivate
Fired when form receives focus or looses focus Fired when form receives focus or looses focus respectively – only among within the current respectively – only among within the current Application.Application.
VisibleChangedVisibleChanged Fired when form is hidden or shown.Fired when form is hidden or shown.
ClosingClosing Fired when form is closingFired when form is closing
ClosedClosed Fired after form is closed.Fired after form is closed.
DemoDemo
Adding forms to a projectAdding forms to a project Inheriting existing formsInheriting existing forms Setting Start-up FormSetting Start-up Form
Startup location attributeStartup location attribute
Appearance SettingsAppearance Settings OpacityOpacity Show() vs. ShowDialog()Show() vs. ShowDialog() Handling an EventHandling an Event
Topics Covered TodayTopics Covered Today
Basic User Interface Design Basic User Interface Design Principles Principles
.NET Forms .NET Forms Controls & Components Controls & Components Menus Menus ValidationValidation Give AwayGive Away
Controls & ComponentsControls & ComponentsAfter this lesson, you will be able to:After this lesson, you will be able to: Explain the difference between controls and componentsExplain the difference between controls and components Explain how to set the control tab orderExplain how to set the control tab order Describe which controls can contain other controls and Describe which controls can contain other controls and
how they are usedhow they are used Describe docking and anchoring, and explain their use Describe docking and anchoring, and explain their use
with controlswith controls Describe the process for adding controls to the ToolboxDescribe the process for adding controls to the Toolbox Describe how to create event handlers for controlsDescribe how to create event handlers for controls Explain what an extender is and how to use oneExplain what an extender is and how to use one
Controls & ComponentsControls & Components
Are used to enhance functionality of form.Are used to enhance functionality of form. Component vs. Control?Component vs. Control?
Control has a Visual InterfaceControl has a Visual Interface Ex. ButtonEx. Button
Component has no Visual InterfaceComponent has no Visual Interface Ex. TimerEx. Timer
Components are added to the Components are added to the Components TrayComponents Tray
Container ControlsContainer Controls
Allows you to include other controls Allows you to include other controls within them.within them.
Ex. Group Box, Panel, etc.Ex. Group Box, Panel, etc. You can manipulate all the controls You can manipulate all the controls
together via the container controltogether via the container control Ex. Container.Visible = falseEx. Container.Visible = false
Docking & AnchoringDocking & Anchoring
Specifies behavior of contained Specifies behavior of contained controls when form is resized.controls when form is resized.
DockingDocking Control is bound to a section of the Control is bound to a section of the
form: Top, Bottom, Middle, etc.form: Top, Bottom, Middle, etc.
AnchorAnchor Control is bound by specific distance Control is bound by specific distance
to edge.to edge.
Extender Property ComponentsExtender Property Components
Components which extend the Components which extend the properties of existing components.properties of existing components.
Ex. ToolTip & ErrorProviderEx. ToolTip & ErrorProvider Once added to Form, all controls on Once added to Form, all controls on
form have a new property for form have a new property for definition.definition.
DemoDemo
Component TrayComponent Tray Tab OrderTab Order Docking / AnchoringDocking / Anchoring Adding Controls to ToolBoxAdding Controls to ToolBox ErrorProvider Extender ControlErrorProvider Extender Control
Topics Covered TodayTopics Covered Today
Basic User Interface Design Basic User Interface Design Principles Principles
.NET Forms .NET Forms Controls & ComponentsControls & Components MenusMenus ValidationValidation Give AwayGive Away
Using MenusUsing MenusAfter this lesson, you will be able to:After this lesson, you will be able to: Describe the process of creating a menu using the Describe the process of creating a menu using the
MainMenu componentMainMenu component Describe the process of creating a context menu using Describe the process of creating a context menu using
the ContextMenu componentthe ContextMenu component Explain how to enable or disable a menu itemExplain how to enable or disable a menu item Explain how to create shortcut keys for menu itemsExplain how to create shortcut keys for menu items Explain how to display a check mark or a radio button on Explain how to display a check mark or a radio button on
a menu itema menu item Explain how to make menu items invisibleExplain how to make menu items invisible Explain how to dynamically add items to a menuExplain how to dynamically add items to a menu Explain how to dynamically clone a menuExplain how to dynamically clone a menu
Creating Menus in DesignCreating Menus in Design
Use the MainMenu from the toolboxUse the MainMenu from the toolbox Create new menusCreate new menus Set the properties of each menuSet the properties of each menu Assign event handler to each menuAssign event handler to each menu
HintsHints To create a separator, use the hyphenTo create a separator, use the hyphen Modify other options through the Modify other options through the
property window while the menu is property window while the menu is selectedselected
Creating Menus in DesignCreating Menus in Design
Access Key (i.e. ALT-F for File)Access Key (i.e. ALT-F for File) Other properties through property Other properties through property
windowwindow Checked – displays checkmark next Checked – displays checkmark next
to menuto menu Radio – displays bullet next to Radio – displays bullet next to
menumenu
Modifying Menus DynamicallyModifying Menus Dynamically
Adding Menu ProgramaticallyAdding Menu Programatically MenuItem myItem;MenuItem myItem;
myItem = new MenuItem("Item 1", new EventHandler(ClickHandler));myItem = new MenuItem("Item 1", new EventHandler(ClickHandler));
fileMenuItem.MenuItems.Add(myItem);fileMenuItem.MenuItems.Add(myItem);
Merging Menus into OneMerging Menus into One fileMenuItem.MergeMenu(myContextMenu); fileMenuItem.MergeMenu(myContextMenu);
Context MenusContext Menus
Special menu that appears as a pop-up menu Special menu that appears as a pop-up menu when the right mouse button is clicked.when the right mouse button is clicked.
Can be created similar to a MainMenu using Can be created similar to a MainMenu using ContextMenu component.ContextMenu component.
Can be assigned to any Control via Can be assigned to any Control via ContextMenu property.ContextMenu property.
Context menu can be cloned from an existing Context menu can be cloned from an existing Menu to avoid duplicating code.Menu to avoid duplicating code. myContextMenu.MenuItems.Add(fileMenuItem.CloneMenu());myContextMenu.MenuItems.Add(fileMenuItem.CloneMenu());
Things to KnowThings to Know
Menus are like regular controls:Menus are like regular controls: Can make: Visible, Disabled, Can make: Visible, Disabled,
You can Merge a menuYou can Merge a menu
DemoDemo
Adding MenuAdding MenuAdding a Context MenuAdding a Context MenuReusing a existing Menu for a Reusing a existing Menu for a
Context MenuContext MenuHandling an Event for a menuHandling an Event for a menu
Topics Covered TodayTopics Covered Today
Basic User Interface Design Basic User Interface Design Principles Principles
.NET Forms .NET Forms Controls & ComponentsControls & Components Menus Menus ValidationValidation Give AwayGive Away
Validating User InputValidating User Input
After this lesson, you will be able to:After this lesson, you will be able to: Explain the difference between form-level Explain the difference between form-level
and field-level validationand field-level validation Direct the focus using control methods Direct the focus using control methods
and eventsand events Implement form-level validation for your Implement form-level validation for your
formform Implement field-level validation for your Implement field-level validation for your
formform
Form & Field Level ValidationForm & Field Level Validation
Form LevelForm Level Validates all data at once.Validates all data at once. Ex. User fills out entire form and clicks Ex. User fills out entire form and clicks
Submit. Validation occurs at the Submit. Validation occurs at the moment of submission.moment of submission.
Field LevelField Level Validates as user enters dataValidates as user enters data
Common Validation PropertiesCommon Validation Properties
MaxLengthMaxLength Maximum length textbox can have.Maximum length textbox can have.
PasswordCharPasswordChar The character shown to hide actual The character shown to hide actual
password characterspassword characters
ReadOnlyReadOnly Cannot make changes to controlCannot make changes to control
Common Validation EventsCommon Validation Events
KeyDown, KeyUp, KeyPress EventsKeyDown, KeyUp, KeyPress Events Raised when key is pressed.Raised when key is pressed. KeyPress is fired only if key pressed can be KeyPress is fired only if key pressed can be
represented in by ASCII character.represented in by ASCII character. Ex. ( a-z, A-Z, 0-9, Enter, Backspace )Ex. ( a-z, A-Z, 0-9, Enter, Backspace )
KeyEventArgsKeyEventArgs Parameter passed to EventsParameter passed to Events Has properties to determine all possible Has properties to determine all possible
combination of a key event.combination of a key event.
Typical Validation Event HandlerTypical Validation Event Handler
private void textBox1_KeyUp(object sender, KeyEventArgs e)private void textBox1_KeyUp(object sender, KeyEventArgs e){{
if (e.Alt == true) if (e.Alt == true)
MessageBox.Show("The ALT key is down");MessageBox.Show("The ALT key is down");
} }
Character ValidationCharacter Validation
Char data type can be used to inspect Char data type can be used to inspect character pressed in KeyPress Eventcharacter pressed in KeyPress Event
Char.IsDigitChar.IsDigit Char.IsLetterChar.IsLetter Char.IsLetterOrDigitChar.IsLetterOrDigit Char.IsPunctuationChar.IsPunctuation Char.IsLowerChar.IsLower Char.IsUpperChar.IsUpper
Validating & Validated EventsValidating & Validated Events
ValidatingValidating Fired before control looses focus.Fired before control looses focus.
ValidatedValidated Fired after successfully firing Fired after successfully firing
ValidatingValidating
The Validation can be canceled byThe Validation can be canceled by e.Cancel = true inside of the handler.e.Cancel = true inside of the handler.
Form Level ValidationForm Level Validation
All fields are validated at onceAll fields are validated at once Simpler than one may expectSimpler than one may expect Submit Button Event Handler simply Submit Button Event Handler simply
checks controls individually or checks controls individually or iteratively.iteratively.
If one fails the check, then can use If one fails the check, then can use ErrorProvider and give it focus.ErrorProvider and give it focus.
Topics Covered TodayTopics Covered Today
Basic User Interface Design Basic User Interface Design Principles Principles
.NET Forms .NET Forms Controls & ComponentsControls & Components Menus Menus ValidationValidation Give AwayGive Away