Software Development and Professional Practice B u ild in g a Graphical user Interface Prof. Yousef B. Mahdy -2017, Assuit University, Egypt
Introduction n 2 - User interface is the front-end application view to which user interacts in order to use the software. User can manipulate and control the software as well as hardware by means of user interface. Today, user interface is found at almost every place where digital technology exists, right from computers, mobile phones, cars, music players, airplanes, ships etc. User interface is part of software and is designed such a way that it is expected to provide the user insight of the software. UI provides fundamental platform for human-computer interaction. UI can be graphical, text-based, audio-video based, depending upon the underlying hardware and software combination. UI can be hardware or software or a combination of both. Prof. Yousef B. Mahdy, Assuit Software Development
1 n n 3 - The software becomes more popular if its user interface is: » Attractive » Simple to use » Responsive in short time » Clear to understand » Consistent on all interfacing screens UI is broadly divided into two categories: » Command Line Interface » Graphical User Interface Prof. Yousef B. Mahdy, Assuit Software Development
Command Line Interface (CLI) n n n 4 - CLI has been a great tool of interaction with computers until the video display monitors came into existence. CLI is first choice of many technical users and programmers. CLI is minimum interface a software can provide to its users. CLI provides a command prompt, the place where the user types the command feeds to the system. The user needs to remember the syntax of command its use. A command is a text-based reference to set of instructions, which are expected to be executed by the system. There are methods like macros, scripts that make it easy for the user to operate. CLI uses less amount of computer resource as compared to GUI. Prof. Yousef B. Mahdy, Assuit Software Development
1 5 - Prof. Yousef B. Mahdy, Assuit Software Development
2 n 6 - A text-based command line interface can have the following elements: » Command Prompt - It is text-based notifier that is mostly shows the context in which the user is working. It is generated by the software system. » Cursor - It is a small horizontal line or a vertical bar of the height of line, to represent position of character while typing. Cursor is mostly found in blinking state. It moves as the user writes or deletes something. » Command - A command is an executable instruction. It may have one or more parameters. Output on command execution is shown inline on the screen. When output is produced, command prompt is displayed on the next line. Prof. Yousef B. Mahdy, Assuit Software Development
Graphical User Interface n n n 7 - Graphical User Interface provides the user graphical means to interact with the system. GUI can be combination of both hardware and software. Using GUI, user interprets the software. Typically, GUI is more resource consuming than that of CLI. With advancing technology, the programmers and designers create complex GUI designs that work with more efficiency, accuracy and speed. GUI Elements GUI provides a set of components to interact with software or hardware. Every graphical component provides a way to work with the system. A GUI system has following elements such as: Prof. Yousef B. Mahdy, Assuit Software Development
1 8 - Prof. Yousef B. Mahdy, Assuit Software Development
2 n n 9 - Window - An area where contents of application are displayed (container). Contents in a window can be displayed in the form of icons or lists, if the window represents file structure. It is easier for a user to navigate in the file system in an exploring window. Windows can be minimized, resized or maximized to the size of screen. They can be moved anywhere on the screen. A window may contain another window of the same application, called child window (MDI). Tabs - If an application allows executing multiple instances of itself, they appear on the screen as separate windows. Tabbed Document Interface has come up to open multiple documents in the same window. This interface also helps in viewing preference panel in application. Prof. Yousef B. Mahdy, Assuit Software Development
3 n n n Menu - Menu is an array of standard commands, grouped together and placed at a visible place (usually top) inside the application window. The menu can be programmed to appear or hide on mouse clicks. Icon - An icon is small picture representing an associated application. When these icons are clicked or double clicked, the application window is opened. Icon displays application and programs installed on a system in the form of small pictures. Cursor - Interacting devices such as mouse, touch pad, digital pen are represented in GUI as cursors. On screen cursor follows the instructions from hardware in almost real-time. Cursors are also named pointers in GUI systems. They are used to select menus, windows and other application features. 10 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Application specific GUI components n n n A GUI of an application contains one or more of the listed GUI elements: Application Window - Most application windows uses the constructs supplied by operating systems but many use their own customer created windows to contain the contents of application. Dialogue Box - It is a child window that contains message for the user and request for some action to be taken. For Example: Application generate a dialogue to get confirmation from user to delete a file. Text-Box - Provides an area for user to type and enter text-based data. Buttons - They imitate real life buttons and are used to submit inputs to the software. 11 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Dialogue Box 12 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 n n Radio-button - Displays available options for selection. Only one can be selected among all offered. Check-box - Functions similar to list-box. When an option is selected, the box is marked as checked. Multiple options represented by check boxes can be selected. 13 - Prof. Yousef B. Mahdy, Assuit Software Developmen
2 n List-box - Provides list of available items for selection. More than one item can be selected. n Other impressive GUI components are: » Sliders » Combo-box » Data-grid » Drop-down list 14 - Prof. Yousef B. Mahdy, Assuit Software Developmen
User Interface Design Activities n n n There a number of activities performed for designing user interface. The process of GUI design and implementation is alike SDLC. Any model can be used for GUI implementation among Waterfall, Iterative or Spiral Model. GUI Requirement Gathering - The designers may like to have list of all functional and non-functional requirements of GUI. This can be taken from user and their existing software solution. User Analysis - The designer studies who is going to use the software GUI. The target audience matters as the design details change according to the knowledge and competency level of the user. If user is technical savvy, advanced and complex GUI can be incorporated. For a novice user, more information is included on how-to of software. 15 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 16 - Prof. Yousef B. Mahdy, Assuit Software Developmen
2 n n Task Analysis - Designers have to analyze what task is to be done by the software solution. Here in GUI, it does not matter how it will be done. Tasks can be represented in hierarchical manner taking one major task and dividing it further into smaller sub-tasks. Tasks provide goals for GUI presentation. Flow of information among sub-tasks determines the flow of GUI contents in the software. GUI Design & implementation - Designers after having information about requirements, tasks and user environment, design the GUI and implements into code and embed the GUI with working or dummy software in the background. It is then self-tested by the developers. 17 - Prof. Yousef B. Mahdy, Assuit Software Developmen
3 n Testing - GUI testing can be done in various ways. Organization can have in-house inspection, direct involvement of users and release of beta version are few of them. Testing may include usability, compatibility, user acceptance etc. 18 - Prof. Yousef B. Mahdy, Assuit Software Developmen
GUI Implementation Tools n n There are several tools available using which the designers can create entire GUI on a mouse click. Some tools can be embedded into the software environment (IDE). GUI implementation tools provide powerful array of GUI controls. For software customization, designers can change the code accordingly. Example: Mobile GUI, Computer GUI, Touch-Screen GUI etc. Here is a list of few tools which come handy to build GUI: » FLUID » App. Inventor (Android) » Lucid. Chart » Wavemaker » Visual Studio 19 - Prof. Yousef B. Mahdy, Assuit Software Developmen
User Interface Golden rules n The following rules are mentioned to be the golden rules for GUI design, described by Shneiderman and Plaisant in their book (Designing the User Interface). » Strive for consistency - Consistent sequences of actions should be required in similar situations. Identical terminology should be used in prompts, menus, and help screens. Consistent commands should be employed throughout. » Enable frequent users to use short-cuts - The user’s desire to reduce the number of interactions increases with the frequency of use. Abbreviations, function keys, hidden commands, and macro facilities are very helpful to an expert user. 20 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 » Offer informative feedback - For every operator action, there should be some system feedback. For frequent and minor actions, the response must be modest, while for infrequent and major actions, the response must be more substantial. » Design dialog to yield closure - Sequences of actions should be organized into groups with a beginning, middle, and end. The informative feedback at the completion of a group of actions gives the operators the satisfaction of accomplishment, a sense of relief, the signal to drop contingency plans and options from their minds, and this indicates that the way ahead is clear to prepare for the next group of actions. 21 - Prof. Yousef B. Mahdy, Assuit Software Developmen
2 » Offer simple error handling - As much as possible, design the system so the user will not make a serious error. If an error is made, the system should be able to detect it and offer simple, comprehensible mechanisms for handling the error. » Permit easy reversal of actions - This feature relieves anxiety, since the user knows that errors can be undone. Easy reversal of actions encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data entry, or a complete group of actions. 22 - Prof. Yousef B. Mahdy, Assuit Software Developmen
User Interface in. Net (C#) n n In next part, we will learn how to use C# to build a graphical user interface (GUI), using the. NET Windows Forms library classes to build the GUI. Windows Forms are the Graphical User Interface (GUI) libraries of the Microsoft. NET Frameworks. The Windows Forms library contains most of the graphical controls familiar to GUI programmers. All of the concepts learned in previous C# ‘s course are applied when doing GUI programming. Of special significance is the use of events to connect GUI controls, such as buttons, to the code that implements the program's behavior related to that control. Here, Specific emphasis is placed on how C# is used to produce GUIs, and the language constructs involved. 23 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Command-line n This section introduces you to more of the Console class API, showing you different ways to display information and how to receive input from the user when writing utility or command-line applications (Console Applications). 24 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Handling Command-Line Input n n n If you are going to write a utility program, you’ll often want to give users the ability to pass information via the command line. For power users, this makes the program quick and easy to use, rather than requiring the user to navigate a series of prompts, which is more appropriate for beginners. This section demonstrates how to allow users to run your program efficiently by passing command-line arguments. The Main method in Listing 1 has an argument named args, whose parameter type is array of string, string[]. When a user runs this program on the command line, they can follow it with as many space-separated arguments they desire. Each of these arguments is passed to the Main method as an element in the args array. 25 - Prof. Yousef B. Mahdy, Assuit Software Developmen
![Listing 1 using System; class Change. Password. Option { static void Main(string[] args) {](https://present5.com/presentation/65c4275fd3e72456a16fe74b478d9cb1/image-26.jpg "Listing 1 using System; class Change. Password. Option { static void Main(string[] args) {")
Listing 1 using System; class Change. Password. Option { static void Main(string[] args) { string user. Name = args[0]; Console. Write. Line( “Hi {0}! Your new password is {1}. ”, user. Name, “M 3 yz*a. Hc”); Console. Write. Line(“Press any key to continue. . . ”); Console. Read. Key(); } } 26 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 n n n For the purpose of this program, the first command-line argument is the only one we care about. If your program needs more arguments, it could read each element of the args array. The first element of the args array, args[0], retrieves the first command-line argument and assigns the string value to the local user. Name variable, which is also type string. If you’re using VS 2010, remember to add command-line args by double-clicking on the project’s Properties folder, selecting the Debug tab, and then setting Command line arguments. Calling Console. Read. Key is a useful way to get the command prompt window, which shows the command line, to continue showing. It waits for the user to press any keyboard key. Without Console. Read. Key, the program exits and closes the window right away. 27 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Adding Color and Positioning to Consoles n n n The Console class also has several methods that enable you to build text-based graphical interfaces. You can set color, position text on the screen, and make sounds. The following provides details for each Console member shown above and how it is used. Background. Color, Foreground. Color, Console. Color: Used to set screen color Clear: Clears all text from the screen. Set. Cursor. Position: Sets the location on the screen where the next Console member will operate. The screen buffer is organized by columns and rows with 0, 0 being the upper-left corner. Columns increase in number toward the right, and rows increase in number toward the bottom. 28 - Prof. Yousef B. Mahdy, Assuit Software Developmen
![Listing 2 using System; class Change. Password. Option { static void Main(string[] args) {](https://present5.com/presentation/65c4275fd3e72456a16fe74b478d9cb1/image-29.jpg "Listing 2 using System; class Change. Password. Option { static void Main(string[] args) {")
Listing 2 using System; class Change. Password. Option { static void Main(string[] args) { Console. Background. Color = Console. Color. Dark. Green; Console. Foreground. Color = Console. Color. Green; Console. Write( “Caps Lock: {0} - Number Lock: {1}”, Console. Caps. Lock, Console. Number. Lock); string user. Name = Console. Read. Line(); Console. Clear(); Console. Set. Cursor. Position(20, 12); Console. Beep(1000, 100); Console. Beep(900, 50); Console. Beep(1100, 200); 29 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 Console. Write. Line( “Hi {0}! Your new password is {1}. ”, user. Name, “M 3 yz*a. Hc”); Console. Write. Line(“Press any key to continue. . . ”); Console. Read. Key(); } } 30 - Prof. Yousef B. Mahdy, Assuit Software Developmen
2 n n Caps. Lock, Number. Lock: Allows you to set or get the value of the Caps Lock or Number Lock keys. You can see how the example reads these values and prints them. Beep: Emits a sound to the computer speakers. The first parameter is frequency and the second is duration. 31 - Prof. Yousef B. Mahdy, Assuit Software Developmen
GUI n n n With software where you have a console application and a GUI application, what do you think customer response would be like? Let’s even say that the console application has more features, less errors, and performs better than the GUI application. The results would still be that a customer would prefer the GUI application more often than the console application because it is more attractive to look at. For this reason and the fact that you can make the user experience more positive, most applications being written today use some form of GUI where a customer can use a mouse to interact with buttons, drop-down lists, and many other types of graphical controls. Therefore, the next part shows you how to build GUI applications with Windows Forms. 32 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 n Examples in this chapter begin with the basic element of Windows Forms programming: the window. Then there is an introduction to the standard window controls such as buttons and text boxes. The menu, a common element of GUIs, is included. 33 - Prof. Yousef B. Mahdy, Assuit Software Developmen
System. Windows. Forms n n n The System. Windows. Forms namespace contains a large number of types to aid in the process of building rich user interfaces. The classes in this namespace can be grouped into the following categories: » Control, » User Control, and » Form. Most classes within the System. Windows. Forms namespace derive from the Control class. The Control class provides the base functionality for all controls that are displayed on a Form. The Form class represents a window within an application. This includes dialog boxes, modeless windows, and Multiple Document Interface (MDI) client and parent windows. 34 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 n n n To create a custom control that is a composite of other controls, use the User. Control class. The System. Windows. Forms namespace provides a variety of control classes that allow you to create rich user interfaces. Some controls are designed for data entry within the application, such as Text. Box and Combo. Box controls. Other controls display application data, such as Label and List. View. The namespace also provides controls for invoking commands within the application, such as Button and Tool. Bar. 35 - Prof. Yousef B. Mahdy, Assuit Software Developmen
2 n n The System. Windows. Forms namespace provides also classes (components) that do not derive from the Control class but still provide visual features to a Windows-based application. For example, Tool. Tip and Error. Provider extend the capabilities or provide information to the user. Menu, Menu. Item, and Context. Menu provide the ability to display menus, which can be used to invoke commands within an application. The Help and Help. Provider classes enable you to display help information to the user of your applications. The System. Windows. Forms namespace provides also the Message. Box class for displaying a message box that can display and retrieve data from the user. 36 - Prof. Yousef B. Mahdy, Assuit Software Developmen
3 n n Microsoft Windows applications are event driven. This means that when a GUI application executes, it sits there patiently waiting for an event to occur such as a mouse click or keystroke. These events are delivered to the application in the form of messages. Messages can be generated by the system in response to various types of stimuli including direct user interaction (i. e. , mouse movement, clicking, scrolling, keystrokes, etc. ), or by other applications. The majority of system-generated messages are placed into a data structure referred to as the system message Queue. A queue is a data structure that has a first-in-first-out (FIFO) characteristic. Messages are placed into the queue as they occur. 37 - Prof. Yousef B. Mahdy, Assuit Software Developmen
4 n n Each message contains data that includes the type of event, target window, cursor coordinates, etc. The system then examines each message and routes it to its target window. This process, referred to as the message pump is illustrated in Figure 1. Referring to Figure 1 — system messages are placed into the system message queue where they wait in line to be processed. The system then examines the data within each message to determine its GUI application target. Each GUI application, which runs in its own thread of execution, has its own message queue. The message is placed in the GUI application’s queue where again it waits turn to be examined and forwarded on to its generating window. 38 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Figure 1 39 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Core Windows Form Types 40 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Building a Main Window n n n The basic element of most GUI programming in Windows Forms is the window. Essentially, everything on a GUI screen—buttons, text boxes, and icons—are windows. Because of this, most of the windows and controls in the Windows Forms package have the same characteristics. For instance, they all have a Text property. How they use the property is up to the specific type of window. In order to create a new main window, one has to perform two mandatory steps: » Derive a new custom class from System. Windows. Form. » Configure the application’s Main() method to call Application. Run(), passing an instance of the new derived Form class as an argument. 41 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 42 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Listing 3 using System; using System. Windows. Forms; using System. Component. Model; using System. Drawing; public class First. Form : Form { private Container components; private Label lbl. How; public First. Form() { Initialize. Component(); } private void Initialize. Component() { components = new Container (); lbl. How = new Label (); lbl. How. Location = new Point (12, 116); lbl. How. Text = “Asd, Asden!”; 43 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 lbl. How. Size = new Size (267, 40); lbl. How. Auto. Size = true; lbl. How. Font = new Font (“Microsoft Sans Serif”, 26, System. Drawing. Font. Style. Bold); lbl. How. Tab. Index = 0; lbl. How. Anchor = Anchor. Styles. None; lbl. How. Text. Align = Content. Alignment. Middle. Center; Text = “First Form”; Controls. Add (lbl. How); } public static void Main(){ Application. Run(new First. Form()); } } 44 - Prof. Yousef B. Mahdy, Assuit Software Developmen
2 csc /r: System. Windows. Forms. DLL /r: System. Drawing. DLL First. Form. cs n The above line contains a command line that can be used to compile the code from Listing 3. The command line references a few dynamic link libraries by using the /r: <dllname> option. The System. Windows. Forms. DLL and System. Drawing. DLL libraries contain all the routines required to present graphical components, such as forms and controls, on the screen. n At the top of the Listing 3 are a few namespaces to be familiar with. The most familiar is the System namespace, holding all the basic class libraries. n The System. Windows. Forms namespace holds definitions of all the Windows Forms windows and controls. 45 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 n n n It also has other supporting types including interfaces, structs, delegates, and enumerations supporting the window types. The System. Component. Model namespace contains several classes and interfaces (language as opposed to graphical interfaces) for providing generalized support of components. The System. Drawing namespace provides access to the operating system graphics functionality. The first two class members of the First. Form class are components and blb. How. The components field is a Container object from the System. Component. Model namespace. This object doesn’t participate in the graphical presentation of the program. 46 - Prof. Yousef B. Mahdy, Assuit Software Developmen
2 n n However, it does do a lot of behind-the-scenes work to support timers, multithreading, and cleanup when the program ends. Its declaration and instantiation are mandatory. The other field, lbl. How, is a Windows Forms Label Control. It is used in this program to display the “Asd, Asden!” message in the window that is created. The First. Form constructor calls the Initialize. Component() method. The Initialize. Component() method creates and instantiates the Windows Forms Controls and Forms that make up the graphical interface of this program. It begins by instantiating the components and lbl. How fields as objects. The first group of statements initializes the lbl. How label. Labels are well suited to presenting static text. That’s exactly what lbl. How does. 47 - Prof. Yousef B. Mahdy, Assuit Software Developmen
3 n n Labels have a Location property, keeping track of where the Label is placed on the screen. The Location property accepts a Point structure, which is a member of the System. Drawing namespace. The Point struct is used frequently in Windows Forms applications to specify X and Y screen coordinates. In the example, the Location of the lbl. How is 12 pixels from the left and 116 pixels from the top of the main form. Here’s how the Location property of the lbl. How label is set: lbl. How. Location = new Point (12, 116); The static text of a Label is set through the Text property. The following statement sets the text of the Label to the string “Asd, Asden!” lbl. How. Text = “Asd, Asden!”; 48 - Prof. Yousef B. Mahdy, Assuit Software Developmen
4 n n n A Label also has a Size property that takes a Size structure. In Listing 16. 1, the size of lbl. How is set to 267 pixels wide by 40 pixels high: lbl. How. Size = new Size (267, 40); The Auto. Size property accepts a Boolean value, which tells whether a Label can automatically resize itself to accommodate its contents. For instance, in this program the actual size of the lbl. How contents exceeds its set size from the previous statement, so the label must grow to fully show the entirety of its text. Here’s how the Auto. Size property of the lbl. How label is set. lbl. How. Auto. Size = true; A Label can change its typeface through the Font property. It accepts a Font object. The constructor for the Font object in the following statement accepts three 49 - Prof. Yousef B. Mahdy, Assuit Software Developmen
5 n n parameters: the font name, the font size, and a font style. The font style is from the Font. Style enum in the System. Drawing namespace. lbl. How. Font = new Font (“Microsoft Sans Serif”, 26, System. Drawing. Font. Style. Bold); When there are multiple controls on a form, each control that can accept input can have its Tab. Index property set. This permits the user to press the Tab key to move to the next control on the form, based on Tab. Index. In this example, the Tab. Index of lbl. How is set to 0. This is for illustrative reasons only. The fact is that a Label can never be a tab stop because it doesn’t normally accept user input. Here’s how the Tab. Index property of the lbl. How label is set: lbl. How. Tab. Index = 0; 50 - Prof. Yousef B. Mahdy, Assuit Software Developmen
6 n n n Window layout in Windows Forms is done with the techniques of anchoring and docking. Docking specifies the location of the form that a control will reside in. Anchoring tells which side of a control will be attached to another control. These two techniques permit any type of layout a window design would need. The following code line states that lbl. How will not be anchored. It uses the Anchor. Styles enumeration to set the Anchor property. lbl. How. Anchor = Anchor. Styles. None; The horizontal alignment of a Label may be set with the Text. Align property, which accepts a Content. Alignment enumeration. The following statement sets the horizontal alignment of howdy. Label to be centered between its left and right margins. 51 - Prof. Yousef B. Mahdy, Assuit Software Developmen
7 lbl. How. Text. Align = Content. Alignment. Middle. Center; n The next few statements perform initialization on the main form. Since First. Form is a Form object, it is considered the main form. Text = “First Form”; n All forms and controls have Text properties. What they do with them is unique to each form or control. A Form object sets its title bar with the value of the Text property. This example sets the program’s title bar to say “First Form. ” n Controls. Add (lbl. How); n A form’s Controls object holds a collection of all of its controls. When the form has to redraw itself, it iterates through this collection and sets itself up according to several factors, including the anchoring and docking properties of each control. 52 - Prof. Yousef B. Mahdy, Assuit Software Developmen
8 n n This example adds lbl. How to the First. Form Controls collection object. public static void Main(){ Application. Run(new First. Form()); } The Main() method simply gets the program running. It calls the static Run() method of the Application class. Its parameter is a new instance of the First. Form class. When this program runs, it looks like the window shown in Figure 1. 53 - Prof. Yousef B. Mahdy, Assuit Software Developmen
9 54 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Adding a Button- listing 4 55 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 56 - Prof. Yousef B. Mahdy, Assuit Software Developmen
2 n n n The Simple. Window constructor initializes the controls by calling the Initialize. Components() method. The l. Btn button’s text property is set to “Show Time”. This is the text that shows up on the front of the button. The next line sets the l. Btn button’s Click event. It uses the standard Windows Forms Event. Handler delegate to encapsulate the event handler method. Every time the l. Btn button is clicked, the Click. Handler () method is called. The Location property specifies where the upper left-hand corner of the button will be located on its parent form. It’s set with a Point object. The Size property controls the width and height of a button. It’s set with a Size object. 57 - Prof. Yousef B. Mahdy, Assuit Software Developmen
3 n Click. Handler () sets the text property of the Form to display the current time. 58 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Overriding Form Methods n n The Visible. Changed event fires whenever the visibility of a control changes. Add the following method to listing 4 and see what happens: protected override void On. Visible. Changed(Event. Args e) { base. On. Visible. Changed(e); Message. Box. Show("Thank you for playing with Forms. "); } 59 - Prof. Yousef B. Mahdy, Assuit Software Developmen
The Application Class n n n The Application class is a low-level class that defines members that allow one to control various behaviors of a Windows Forms application. The Application class defines also a set of events that allow one to respond to application-level events such as application shutdown and idle processing. Application Events: » Application. Exit: Occurs when the application is just about to shut down » Idle: Occurs when the application’s message loop has finished processing and is about to enter an idle state. » Thread. Exit: Occurs when a thread in the application is about to terminate. If the main thread for an application is about to be shut down, this event will be raised before the Application. Exit event. 60 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 61 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Responding to Application. Exit 62 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Message Preprocessing n n n As you can well imagine, many types of events can occur during the execution of a complex GUI application. Each of these application events generates a corresponding system message. The following table lists the system message categories and their message prefixes. One way to see messages in action is to print them to the console as they occur. The following program is very similar to the Simple. Form code in that the Message. Pump. Demo class extends Form. It also implements the IMessage. Filter interface, which declares one method named Pre. Filter. Message(). The Pre. Filter. Message() does in this simple example is write the incoming message to the console. 63 - Prof. Yousef B. Mahdy, Assuit Software Developmen
message categories 64 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 65 - Prof. Yousef B. Mahdy, Assuit Software Developmen
2 n n n Referring to the above Example— any class that implements IMessage. Filter can be used as a message filter. In this example, the Form 1 class uses an instance of itself as a message filter with a call to the Application. Add. Message. Filter() method. To see the messages being printed to the console, compile this program into an ordinary console executable file. The next Figure shows the results of running this program. Referring to Figure— cursor movement within the application window, not the console, causes the generation of WM_MOUSEMOVE messages. Note that since the window has no additional components like buttons or text boxes, almost all the messages generated belong to the WM (general window) category. 66 - Prof. Yousef B. Mahdy, Assuit Software Developmen
3 67 - Prof. Yousef B. Mahdy, Assuit Software Developmen
4 n n n Scrolling the mouse wheel causes a WM_MOUSEWHEEL message. Keystrokes cause a sequence of messages including WM_KEYDOWN, WM_CHAR, and WM_KEYUP. The best way to see these messages in action is to run this application and experiment with different types of mouse and keyboard entry along with window movement and resizing. The information presented in this section falls into the category of “nice to know”. Unless you’re writing know complex GUI applications that need to filter system messages you can safely ignore them. What you’ll most likely do is create windows that contain various components, like text boxes, buttons, labels, menus, etc. These components, and indeed, forms as well, can respond to certain events. 68 - Prof. Yousef B. Mahdy, Assuit Software Developmen
5 n n For example, buttons have (among others) the Click event. If you want a button to do something in response to a mouse click on it, you will need to create what is referred to as an event handler method and register it with the button’s Click event. When the event button is clicked, its event handler method, or methods if there is more than one, is called. So, although the system is creating, sending, and responding to messages, you will think in terms of components and the events they can respond to. I will show you how to do this shortly, but first, I want to show you a few things about screen coordinates. 69 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Screen And Window (Client) Coordinate System n n When working with GUIs you’ll need to be aware to two types of coordinates: screen coordinates and window coordinates. Window coordinates are also referred to as client coordinates. A window is drawn upon a computer screen at a certain position. The placement of the window’s upper left corner falls on a certain point within the screen’s coordinate system. The basic unit of measure for a screen is the pixel. The screen coordinate system is illustrated in the following Figure. Referring to this Figure— the origin of the screen, or the point where the value of both its x and y coordinates equal 0, is located in the upper left corner of the screen. 70 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Screen Coordinate System 71 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 n n The value of the x coordinate increases to the right, while the value of the y coordinate increases down. Points upon the screen are given in (x, y) pairs. Windows have a coordinate system similar to screen coordinates as is shown in the next Figure. Referring to this Figure— the window is placed on the screen at position (100, 275). This is the location of its upper left corner. The origin of the window is its upper left corner, meaning that components drawn within the window are placed with respect to the window’s origin. The button drawn in the window is placed at position (125, 125). Windows, and the components drawn within them, have height and width. The bounds of a component are the location of its upper left corner together with its width and height. 72 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Window Coordinates 73 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 n n If a window is placed at position (100, 275) and is 300 pixels wide and 100 pixels high, then its bounds are (100, 275, 300, 100). The following Listing gives a short program that prints the bounds of a window in response to user input. 74 - Prof. Yousef B. Mahdy, Assuit Software Developmen
2 75 - Prof. Yousef B. Mahdy, Assuit Software Developmen
3 76 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Adding Components To Windows: Button, Text. Box, And Label n n n In this example you’ll also need the System. Drawing. Point structure to help place components in absolute positions within the window. Referring to Example 4 — the Component. Demo class extends Form and declares three private component members: _button 1, _textbox 1, and _label 1. It declares two constructors. The first constructor declares four parameters that are used to set the window’s Bounds property. Notice that the Bounds property must be set with the help of a Rectangle structure. Alternatively, you could set the window’s Location, Height, and Width properties separately. Then, the window’s title bar text is set via its Text property. And lastly the Initialize. Components() method is called. 77 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Example -4 78 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 79 - Prof. Yousef B. Mahdy, Assuit Software Developmen
2 80 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Registering Event Handlers With GUI Components n n The whole point of creating a GUI is to have it respond to user interaction. As it stands now, the program shown in Example 4 simply displays a window with a label, a button, and a text box. Although you can type in the text box and click the button, nothing else happens. Let’s change that by adding an event handler method and registering it with the button’s Click event. Delegates And Events: All System. Windows. Forms GUI controls have event members. An event is something an object can respond to. For example, a Button can respond to a mouse click via its Click event (and also via its Mouse. Click event!) GUI components can respond to many types of events. 81 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 n n The following Table offers an incomplete listing of some common events associated with the Control class, from which most Windows forms components inherit. The important thing to note about the events listed in in this Table is that different types of events are handled by different types of event handlers. An event handler type is defined or specified by a delegate type. A delegate provides a specification for a method signature. For example, the System. Event. Handler delegate specifies a method with the following signature: void Event. Handler(Object sender, Event. Args e) This means that if you want to register a method to respond to Click events on a control, the method must have the same signature as the event’s delegate type. 82 - Prof. Yousef B. Mahdy, Assuit Software Developmen
2 83 - Prof. Yousef B. Mahdy, Assuit Software Developmen
3 n The best way to see all this work is to look at some code. Example 5 expands on the previous example by adding an event handler method for the _button 1 component. When the button is clicked the text appearing in the text box is used to set the label’s text. 84 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Example-5 85 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 86 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Layout Managers n n n As you saw earlier, placing GUI components in a window at absolute positions is tedious at best. While there may be times when you really want to put some component in a particular spot and have it stay there, it’s generally preferable to make the window’s components adjust their positions automatically to accommodate window resizing and prevent component clipping or hiding. In this section, I will show you how to automatically place components on a window via layout panels. The . NET Framework provides two layout panels: Flow. Layout. Panel and Table. Layout. Panel. This may not seem like much, but you really can create complex window layouts using only these two layout panels. 87 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Flow. Layout. Panel n n n The purpose of the Flow. Layout. Panel is to dynamically lay out its components either horizontally or vertically. When you resize a window that contains components in a Flow. Layout. Panel, those components will float within the panel and readjust their position based on the size of the window. Let’s see a Flow. Layout. Panel in action. Example 6 give the code for a program that displays five buttons in a window. The buttons are placed in a Flow. Layout. Panel. To make the program more interesting, I have added the capability for each button to display the time it was clicked relative to program launch. 88 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Example 6 89 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 90 - Prof. Yousef B. Mahdy, Assuit Software Developmen
2 91 - Prof. Yousef B. Mahdy, Assuit Software Developmen
3 n n n Referring to Example 6 — the Flow. Layout. GUI class declares an array of Buttons and one Flow. Layout. Panel. Most of the action takes place in the Initialize. Components() method. First, the Flow. Layout. Panel is created. Several of its properties are then set, including Auto. Size, Auto. Size. Mode, Wrap. Contents, and Dock. Note the call to _panel. Suspend. Layout(). Call the Suspend. Layout() method anytime you are modifying several control properties at a time or are adding multiple controls to a control. The Suspend. Layout() method suspends the target control’s layout logic for improved performance. A call to Suspend. Layout() must eventually be followed by a call to Resume. Layout(). 92 - Prof. Yousef B. Mahdy, Assuit Software Developmen
4 n n n The Dock property gets or sets how a control’s edges are docked to its containing control and determines how it is resized. Note the use of the Dock. Style enumeration to specify which edge to dock. The complete set of Dock. Style values include Dock. Style. Bottom, Dock. Style. Fill, Dock. Style. Left, Dock. Style. None, Dock. Style. Right, and Dock-Style. Top as I have used here. The button array is created followed by a for loop that creates and initializes each button. Note that each button is added to the Flow. Layout. Panel’s Controls array. The buttons will be “flowed” into the Flow. Layout-Panel from left to right by default in the order in which the buttons are added. You can change this behavior by setting the panel’s Flow. Direction property with the help of the Flow. Direction enumeration. 93 - Prof. Yousef B. Mahdy, Assuit Software Developmen
5 n n Flow. Direction enumeration whose values include Flow. Direction. Bottom. Up, Flow. Direction. Left. To. Right, Flow. Direction. Right. To. Left, and Flow. Direction. Top. Down. After all the buttons have been added to the Flow. Layout. Panel, it’s time to add the _panel reference to the window’s Controls collection. 94 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Example 95 - Prof. Yousef B. Mahdy, Assuit Software Developmen
1 96 - Prof. Yousef B. Mahdy, Assuit Software Developmen
2 97 - Prof. Yousef B. Mahdy, Assuit Software Developmen
3 98 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Table. Layout. Panel n n n The Table. Layout. Panel control is a container control where child controls are added within a table structure. Each cell in the table contains a single control, unless a container such as a Panel is added first. The Table. Layout. Panel lets you divvy up a panel into cells arranged by rows and columns. The order in which controls are added to a Table. Layout. Panel is, by default, left-to-right and top-to-bottom. For example, if you create a Table. Layout. Panel with two rows that each contain two columns and you add four buttons to it, the first button will go into cell 0, 0, the second onto cell 0, 1, the third into cell 1, 0, and the last into cell 1, 1. 99 - Prof. Yousef B. Mahdy, Assuit Software Developmen
Useful properties n n n Cell. Border. Style - This property determines if the cell is outlined with a border or not. A value from the Table. Layout. Panel. Cell. Border. Style enumeration is required, the default value is None: » Inset - A single-line sunken border. » Inset. Double - A double-line sunken border. » None - No borders. » Outset - A single-line raised border. » Outset Double - A double-line raised border. » Outset. Partial - A single-line border containing a raised portion. » Single - A single-line border. Column. Count - Determines the number of columns in the table. Column. Styles - A collection of column styles, one for each column in the Table. Layout. Panel control. 100 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
1 n n Controls - Gets the collection of controls contained within the control. Grow. Style - Determines whether the control should expand to accommodate new cells when all existing cells are occupied. A value from the Table. Layout. Panel. Grow. Style enumeration is required, the default value is Add. Rows: » Add. Columns - The Table. Layout. Panel gains additional columns after it is full. » Add. Rows - The Table. Layout. Panel gains additional rows after it is full. » Fixed. Size - The Table. Layout. Panel does not allow additional rows or columns after it is full. Row. Count - Determines the number of rows in the table. Row. Styles - A collection of row styles, one for each row in the Table. Layout. Panel control. 101 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
2 n The Size. Type property determines how the Height (Row. Style) or Width (Column. Style) should be interpreted. A value from the Size. Type enumeration is required, the default value is Percent: » Absolute - The row or column should be sized to an exact number of pixels. » Auto. Size - The row or column should be automatically sized to share space with its peers. » Percent - The row or column should be sized as a percentage of the parent container. 102 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
3 n n You can add controls to a Table. Layout. Panel by dragging and dropping control to the Table. Layout. Panel. We can add controls to a Table. Layout. Panel at run-time by using its Add method. Column. Style and Row. Style properties are used to specify number of columns and rows in a Table. Layout. Panel. Add method is used to add a row and column to Row. Style and Column. Style respectively. 103 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Example 7 n n This example shows how a C# program can create controls at runtime. It demonstrates several techniques that may be useful if you’re creating a board game such as tic-tac-toe. They include: » Creating and configuring a Table. Layout. Panel control at run time. » Making a button and giving it an event handler. » Storing controls in an array. » Using controls in an array. This example makes a tic-tac-toe board. Each square is implemented by a Label control. The Labels and the Clear Button are arranged in a Table. Layout. Panel. 104 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
1 105 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
2 106 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
3 107 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
4 108 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
5 109 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Timer n n n The Timer control allows you to set a time interval to periodically execute an event at a specified interval. It is useful when you want to execute certain applications after a certain interval. Say you want to create a hourly backup of your data. Enabled property of timer represents if the timer is running. We can set this property to true to start a timer and false to stop a timer. Interval property represents time on in milliseconds, before the Tick event is raised relative to the last occurrence of the Tick event. One second equals to 1000 milliseconds. So if you want a timer event to be fired every 5 seconds, you need to set Interval property to 5000. 110 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
1 n n Creating a Timer: A Timer control does not have a visual representation and works as a component in the background. Design-time You can create a timer at design-time by dragging and dropping a Timer component from Toolbox to a Form. After that, you can use F 4 or right click Properties menu to set a Timer properties as shown in Figure 1. 111 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
2 n n n First thing you want to do is, change Enabled to true so the timer will start when your application starts. Now next step is to add an event handler. Double click on it will add the Tick event handler. Now whatever code you write on this event handler, it will be executed every 1 second. For example, if you have a List. Box control on a Form and you want to add some items to it, the following code will do so. private void timer 1_Tick(object sender, Event. Args e) { ist. Box 1. Items. Add(Date. Time. Now. To. Long. Time. String() + ", " + Date. Time. Now. To. Long. Date. String()); } 112 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
3 Run-time: n Timer class represents a Timer control and used to create a Timer at run-time. The following code snippet creates a Timer at run-time, sets its property and event handler. Timer t = new Timer(); t. Interval = 2000; timer 1. Enabled = true; timer 1. Tick += new System. Event. Handler(On. Timer. Event); n 113 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Example 114 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
1 115 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
4 116 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Progress. Bar n n n A Progress. Bar control is used to represent the progress of a lengthy operation that takes time where a user must wait for the operation to be finished. Creating a Progress. Bar: We can create a Progress. Bar control using a Forms designer at design-time or using the Progress. Bar class in code at run-time. Design-time: To create a Progress. Bar control at design-time, you simply drag a Progress. Bar control from the Toolbox and drop onto a Form in Visual Studio. After you the drag and drop, a Progress. Bar is created on the Form; for example the Progress. Bar 1 is added to the form and looks as in Figure 1. 117 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
1 n n n Run-time Creating a Progress. Bar control at run-time is merely a work of creating an instance of the Progress. Bar class, set its properties and add the Progress. Bar class to the Form controls. The first step to create a dynamic Progress. Bar is to create an instance of the Progress. Bar class. The following code snippet creates a Progress. Bar control object: 118 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
2 Progress. Bar p. Bar = new Progress. Bar(); p. Bar. Location = new System. Drawing. Point(20, 20); p. Bar. Name = "progress. Bar 1"; p. Bar. Width = 200; p. Bar. Height = 30; p. Bar. Dock = Dock. Style. Bottom; n n The Dock property is used to set the position of a Progress. Bar. It is of the type Dock. Style that can have values Top, Bottom, Left, Right, and Fill. The Minimum and Maximum properties define the range of a Progress. Bar. The Value property represents the current value of a Progress. Bar. The current value of the Progress. Bar for the minimum value is the color green to show the progress of the control. 119 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
3 n We can also use the Value property to show the progress of an operation. p. Bar. Minimum = 0; p. Bar. Maximum = 100; p. Bar. Value = 70; n We can specify different styles to progressbar we have three types of styles are available: 1) Blocks 2) Continuous 3) Marquee n n n 120 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Example n How to make a progress bar last 45 minutes with timer? 121 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
1 122 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
2 123 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Example 124 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Menus n n Professional looking GUIs are usually controlled via menus. In this section, I am going to show you how to add menus to your GUIs. The. NET Framework provides several classes that make adding menus easy. These include the Menu. Strip and the Tool. Strip. Menu. Item. We can create a Menu. Strip control using a Forms designer at design-time or using the Menu. Strip class in code at runtime or dynamically. To create a Menu. Strip control at design-time, you simply drag and drop a Menu. Strip control from Toolbox to a Form in Visual Studio. After you drag and drop a Menu. Strip on a Form, the Menu. Strip 1 is added to the Form and looks like Figure 10. Once a Menu. Strip is on the Form, you can add menu items and set its properties and events. 125 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
1 n n One of the easiest ways to build a menu on Winforms is by simply dragging and dropping a Menu. Strip control from the toolbox on your form and then go to town filling in menu text and attaching events. Most of the time this is the way to go and works for the majority of programs out there. What we will cover this time around is just a few examples of how you can build these menus dynamically. 126 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Example n n n The example program used to demonstrate the operation of these classes allows the user to dynamically add buttons and text boxes to a window via a menu. The Add menu contains three menu items named Button, Text. Box, and Exit. It also contains a menu item separator. Note: The trick here is to understand that menus are built in a hierarchy fashion. The following Figure shows the application’s window and menu structure. 127 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
1 128 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
2 129 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
3 n n n The first thing I do is to declare and create the Menu. Strip. Next, I declare and create the four Tool. Strip. Menu. Items. Notice the naming convention I have adopted here to help sort out which sub-items belong to which parent menu item. By putting it in front of a letter (in this case “F”) we are saying that if the user presses Alt + F it will trigger the opening of this menu. The Tool. Strip. Menu. Item constructor is overloaded. I have used two versions in this code. The first version used on step 1 takes the name of the menu item. The second type of constructor takes three arguments: name, image, and event handler. I’ve used “null” to indicate no image. Notice how, by supplying an event handler, menu items are enabled to perform work. 130 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
4 131 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
5 n n n Next, I add the submenu items to the add. Menu item by adding them with its Drop. Down-Items. Add() method. Notice, how a menu item is disable and how a menu item separator is added to a list of menu items by adding a dash “-”. Once the submenu items are added to the parent menu item, the parent menu item is added to the Menu. Strip by calling its Items. Add() method. The Menu. Strip is docked to the top of the window and then designated as the Menu. Strip for this window. Finally, event handler methods are added. 132 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
6 133 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Context. Menu. Strip n n n Context menu is group of commands or menu items that can be accessed by Right click on the control surface. It usually contains some frequently used commands for example Cut, Copy and Paste in a text editor. In Windows Forms, context menu is created using Context. Menu. Strip control and its command or menu items are Tool. Strip. Menu. Item objects. Context menus are also sometimes referred to as Popup menus or Shortcut menus. First step to create a dynamic Context. Menu. Strip is to create an instance of Context. Menu. Strip class. Then, the required menu items are added using Tool. Strip. Menu. Item as in the previous example. Finally, assign it in the control's properties under Context. Menu. The following function is used to create Context menu of the main form. 134 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
1 n In the next step, 135 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Sending Data Between Forms n n n Some of you would have faced a scenario where you wanted to pass data from one form to another in Win. Forms. There are so many methods (How many? I don't know) to pass data between forms in Windows application. In this section, let me take four important (easiest) ways of accomplishing this: » Using constructor » Using objects » Using properties » Using delegates For data to be passed between forms using any of the above methods, we need two forms and some controls. Let us start by following the steps given below. 136 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
1 n n Create a new project and select Windows application. This will create a default form as “Form 1”. We can use this form for sending data. For the Constructor Approach, instantiate frm. Constructor class in form 1’s Constructor button click event handler. 137 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
2 n n n For the properties Approach, instantiate frm. Properties class in form 1’s properties button click event handler. For the objects Approach, instantiate frm. Objects class in form 1’s objects button click event handler. For the delegates Approach, instantiate frmdelegates class in form 1’s delegates button click event handler. Properties allow clients to access class state as if they were accessing member fields directly, while actually implementing that access through a class method. Objects are reference types, and are created on the heap, using the keyword new. Technically, a delegate is a reference type used to encapsulate a method with a specific signature and return type. You can encapsulate any matching method in that delegate. 138 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Form 1 139 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
1 140 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
frm. Constructor 141 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
frm. Delegatescs 142 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
frm. Objects 143 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
frm. Properties 144 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
How to return a value from a Form n n There are two types of child form: modal and modeless (non-modal). There are different techniques for getting information from both, since they behave differently. Modeless child windows do not require an immediate response, and do not block you from focusing the parent form again. You are allowed to freely switch back and forth between them. Modal dialogs, on the other hand, block you from switching back to the parent window. They require a response before continuing. An example of a modal dialog is a Message. Box. Depending on which type of form you choose to use, you will need to get the data from it differently. 145 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Modeless n n First, we'll visit modeless forms. A form is treated as modeless when it is opened by the. Show method. Execution does not stop on that line; the code after it continues to execute even though the child form is now shown and focused. We will explain this case in the next chapter: custom events. Since execution does not stop, we need a way to know when the value we want is updated. Custom events are the answer. The subject of the next chapter. The reason we like to use events rather than just passing properties around is that we don't want to tightly couple our forms. Another benefit is reusability. You may want several forms to update themselves when a child window does. This way, each form can subscribe to the event and handle it the way they choose. 146 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Modal n n n Next, we'll visit modal forms. A form is treated as modal when it is opened by the. Show. Dialog method. Execution does stop at that line until the child form is closed. The Show. Dialog method returns a Dialog. Result object. Now, modal dialogs are a bit different of a model from the other types. They're usually more limited in their focus and purpose, and execution of the parent form is blocked while they're open, so it's OK to tightly couple them with a parent form. To an extent. Neither form should know about the UI controls on the other, of course. Assume there is a textbox in the child form, frmchild, and we want to return its content to the main form when the child form is closed(like inputbox in Vb. net). 147 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
1 Step 1: in the child form wrap your Text. Box's Text property in a public Property: public string txt{ get { return Text. Box 1. Text; } } n Now instead of dealing with an entire Text. Box, we're just dealing with a string. n Now, since we don't need a way to know when the child form is closed (because Show. Dialog is a blocking call), we just need to make sure to close the form when we get what we want. In this example, I'm closing the form when someone clicks a button labeled "OK": n 148 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
2 private void Ok. Button_Click(object sender, Event. Args e){ this. Dialog. Result = Dialog. Result. OK; this. Close(); } n We're setting the Dialog. Result to OK to let the other form know it wasn't forced closed or cancelled. n In the main form, we need to look at creating the dialog and retrieving it's value. private void Get. Txt_Click(object sender, Event. Args e){ frmchild lnf = new frmchild(); Dialog. Result res = lnf. Show. Dialog(); if (res == Dialog. Result. OK) Text. Box 1. Text = lnf. txt; } 149 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Example 150 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
1 151 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Child form 152 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Extension methods n n Let's assume you want to convert an integer value to a hex value and print it out. Your code may look like this: //. . . int i = 15; // get hex value and convert to string hex = String. Format("0 x{0: X}", i); Console. Write. Line(i. To. String()); // line 3 : output: 15 Console. Write. Line(hex); // output: 0 x. F //. . . Looks already quite simple, doesn't it? But. . . In line 3 of this little code snippet the integer i is converted to a string by using . To. String(). Wouldn't it be nice if we could just write: Console. Writeline(i. To. Hex()); 153 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
1 n n n As we cannot change or add a new method to the Integer Class, one pretty nice and clean solution is the use of extension methods. Extension methods are external methods which feel like they are part of a specific class (in our example: the Integer Class). They are actually "just" syntactical sugar for a better/easier code handling and to make your code look cleaner. Creating extension methods: Firstly, create a new class File. I usually call it something like "Integer. Extensions" or just "Extensions". The keyword static in the class signature is required as extension methods have to be in static classes as static methods. And it must be public. Your code should now look like this: 154 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
2 using System; using System. Collections. Generic; using System. Text; namespace Extension. Method { public static class Integer. Extensions { } } n Now let's define the signature of the extension method we want: public static string To. Hex(this int i) { } 155 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
3 n The method is pulbic and static. And it's return type is defined as a string (to use it in Console. Writeline()). The first parameter must be the type of object that we are creating this extension method for - marked with this. After this there can follow as much parameters of any type as needed. 156 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Example n The following program is used to extend the integer class by adding two methods: to. Hex() and factorial. 157 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
1 158 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
2 159 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
MDI n n MDI (Multiple Document Interface) is a type of GUI (Graphical User Interface), which presents a single parent (container) window for other windows in a specific application. The opposites of MDI are SDI (Single Document Interface) and TDI (Tabbed Document Interface). The main advantages of MDI are: » Child windows are easily managed from a single parent (container) form. » A single menu and toolbar can be shared for other windows. » The possibility to work with multiple documents in one window of the same application. » Closing the parent (container) window, the user closes other child windows. 160 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
1 n n 1. Create a standard C# Windows Forms Application 2. First of all I have to create a container form. The first form that was created by default can become a container just by changing the Is. Mdi. Container property to True. 3. Now, I will add a new form to the project. It will be a child form. To add a new form, use the Add New Item button on the IDE toolbar (if you use Visual Studio). Now, to open a new child in the parent form, add this code to the "New Child. . . " menu item: // Declare the child form as a new one. Form 2 child. Form = new Form 2(); // Set the main form as a parent form. child. Form. Mdi. Parent = this; // Show the child form. child. Form. Show(); 161 - Prof. Yousef B. Mahdy, Assuit Software Developmen Software Developme
Скачать презентацию Software Development and Professional Practice B u ild
65c4275fd3e72456a16fe74b478d9cb1.ppt