Menu
homeConnection

Graphical interfaces and tools for their development. Graphic screen systems. Constraint. This class is a further extension of the base class. Its instances have additional capabilities to control the size and location of their

Annotation: We study widgets - the visual elements that make up the graphical user interface, their layout, size policy, signal-slot connections, graphical interface elements and their use.

13.1 Widgets

Widgets are the visual elements that make up the graphical user interface.

Examples of widgets:

  • Button (class QPushButton);
  • Label(class QLabel);
  • Input field (class QLineEdit);
  • Numeric counter field (QSpinBox class);
  • Scroll bar (class QScrollBar ).

Qt has about 50 ready-made classes of graphic elements available for use. Parent class for all widgets is the QWidget class. All the main properties of visual elements are inherited from it, which we will carefully consider. Let's start exploring ways to develop programs with a graphical interface with an example.

Let's create empty file project. Launch the project wizard and select the item in the Projects section Other Project. Next, select the project type Empty Qt Project. Let's add the contents to the project file:

TEMPLATE = app #Qt modules that we will use QT += widgets #Add the widgets module to work with widgets (necessary for Qt5). TARGET = widget#Name of the executable file SOURCES += \ main.cpp

Now let's create a simple program with a window in which we will display the inscription. Let's set the size of the window and the text of its title, and also set the font for the inscription. To do this, create a file main.cpp with the following content:

#include #include int main (int lArgc, char * lArgv ) ( //Create a QApplication object that initializes and configures the window program, //controls its execution using the QApplication event loop lApplication (lArgc, lArgv); QLabel lLabel; //Create a QLabel widget - label lLabel.setText ("I am widget!"); //Set the text for the label lLabel.setGeometry (200, 200, 300, 150); //Set the dimensions - position (x, y), width and height. text lLabel.setAlignment (Qt::AlignHCenter | Qt::AlignVCenter); //The QFont class is used to set the font parameters. //Select the Arial Black font family and size 12. QFont lBlackFont ("Arial Black", 12); setFont (lBlackFont); //Set the font for the label lLabel.show (); //Call the show() method to show the label on the screen return lApplication.exec (); //Run the program to execute exec() //cycle. event processing. The program waits for user actions and processes them.

As we can see, the elements that make up interfaces in Qt have their own position and size - the so-called "geometry" - and thus occupy a corresponding rectangular area on the screen (see Fig. 13.1). Also, each element has settings that determine its behavior and appearance.


Rice. 13.1.

To create a structure, widgets are organized into a hierarchy according to the “part - whole” principle. Each widget can contain other widgets. Such visual element becomes the "parent" (parent widget) of the elements it contains. Note that such relationships should not be confused with inheritance in C++ - relationships between classes in a program. Relationships between widgets are relationships between objects. Such relationships give rise to several consequences:

  • the parent element will be responsible for the removal child element: if the parent widget is deleted, it will automatically delete all child elements;
  • the parent widget places child widgets inside itself, parts of child widgets that extend beyond the parent will be invisible;
  • part of the state of the parent widget is passed on to its children - this applies to some properties (visibility, activity) and styles that are applied to the visual element.

Widgets that do not have a parent (widgets top level), look like separate windows in the program. Let's look at an example. Let's name the new project ParentExample. The project file will contain the usual settings for a GUI project:

TEMPLATE = app TARGET = ParentExample QT += widgets

For the widget that we will use as the main window, we will create a new class. For this in the category Files and Classes Let's select the C++ section and select C++ Class (see Fig. 13.2).

The next step is to create several elements on the window. To do this, open the parentwidget.cpp file and change the class constructor code. To display elements, just create them in the class constructor and set ParentWidget as the parent for them. The parentwidget.cpp code looks like this:

#include " parentwidget.h " #include #include #include ParentWidget::ParentWidget (QWidget * parent) : QWidget (parent) ( //Create a label indicating the parent widget - this, that is, an instance of the ParentWidget class. QLabel * lLabel=new QLabel (this); //Position relative to the left top corner parent widget. lLabel ->setGeometry (50, 0, 100, 30); lLabel ->setText(" TextLabel "); //Text on the label. //Create a button, set the “parent”, geometry and text QPushButton * lPushButton = new QPushButton (this); lPushButton->setGeometry(50, 50, 100, 30); lPushButton->setText(" PushButton "); //Create an input field, set the “parent”, geometry and text QLineEdit * lLineEdit = new QLineEdit (this); lLineEdit ->setGeometry (50, 100, 100, 30); lLineEdit ->setText(" LineEdit "); lLineEdit ->selectAll(); //Select the text in the input field (just for example) //Finally resize the parent widget setGeometry (x(), y(), 300, 150); //and set the window title text setWindowTitle (" parent widgetExample "); )

Since the parent element is ParentWidget , the label (QLabel), button (QPushButton) and text field (QLineEdit) are within it. The position of child widgets is set relative to the upper left corner of the father. You can easily verify this by changing the size and position of our program window. Notice how we created the UI elements in dynamic memory using the new operator. This ensures that elements are not removed after the ParentWidget constructor completes.

Creating a graphical user interface during which you want to host graphic elements, choose general structure and the flow of applications encourages the programmer to become something of an artist. There are no standard rules to help with creating presentations, arranging elements, and organizing structure. A successful graphical user interface is considered a work of art. Since creating interfaces is an art rather than a science, there are no hard rules to follow in this field. Too many parameters are determined by the nature of the application, users, and context.

However, there is whole line practical recommendations that developers should follow to facilitate interface design.

¦ Complex structures (such as a tree) for communication should be avoided various menus. It is best to include no more than six menus in one menu line, each of which will contain no more than six options.

¦ Objects must have a consistent meaning. For example, to activate all icons, double-click the mouse. Some modern interfaces do not meet this recommendation and contain pictograms that only become effective after the user has towed

object to them. Scroll bars should only be used for scrolling, and if pre-made library icons are used, you should check them carefully to ensure that, for example, the printer icon is always used for printing.

¦ When activating all icons, as noted above, you should double-click the mouse. And to obtain a similar result for object icons that are activated by a single mouse click, it is recommended to also program a double click. Many options, such as those found in the Control Panel menu, look like icons but are objects that can be activated with a single click of the mouse. You should anticipate how users might behave when working with such objects (i.e., expect them to double-click on them) and help them achieve the desired result.

¦ Interface menus should reflect the current state of the system. One of the basic principles that guides most graphical user interface designers is to ensure that all interface features are accessible regardless of user actions. The bottom rule agrees well with simple applications, but for more complex ones it is less useful.

¦ Elements common to different menus should be placed in one place. But for example, the OK and Cancel buttons should always be positioned the same relative to each other and occupy the same place in different dialog boxes.

¦ You should not strive for consistency of menu elements if this does not correspond to the opinion of users. For example, users believe that dragging a file from one folder to another on the same device causes the file to be moved to the second folder.

They also believe that dragging a file to another device creates a copy of the original there. It follows from this that the implementation of the towing function will be inconsistent, i.e. different in different cases. However, this is the wish of users who must be taken into account. Striving for consistency is only a recommendation, not a hard and fast rule.

Ergonomic requirements for graphical user interfaces turned out to be clearly insufficient with the development of “multimedia” - interactive systems that provide work with still images and moving video, animated computer graphics and text, speech and high-quality audio. Ergonomic research and development of these systems presents a challenging and professionally exciting challenge.

Most application development project managers, notes B. Tognazzini, wait until the end of the project to start working on the interface. This is reminiscent of building a house, when an architect is invited after constructing the frame of the building. All developers have different approaches to organizing the interface creation process. However, there are general points that all developers should adhere to:

1) understand the purpose of the software product in detail through close communication with users, often spending entire working days with them in order to better understand their work style and individual habits;

2) creating an interface is not the work of a single person, but of representatives of three areas: a specialist who finds out users’ opinions about the main elements of the interface and describes them; interface developer and graphics creator;

3) one experienced employee should be designated as an interface expert and liaison between the working group and users;

4) testing, creating a layout and testing again, since even if the purpose of the software product is completely understood, it is impossible to provide for all user needs.

Interfaces should be created by people, D. Norman believes, who do not take part in the development of the application, since developers know too much about the principles of the program, and this only interferes with the creation of the interface. The advantages of a graphical user interface are generally recognized, and perhaps
Therefore, he did not become the object of serious analysis. The traditional rule of a program developer, according to which ease of learning often prevents the user from subsequently fully using all the capabilities of the program, also applies to the graphical interface. An example is the development of a project for an American insurance company, in which they used one insurance application for Macintosh, equipped with an excellent interface that was very easy to learn. However, after two years of work end users became so masterful of the various functions of this application that the graphical user interface only slowed them down. The choice of graphical interface should be determined by the nature of the user's task.

Contributed by Saleem Gul and Tomas Pavek

In this training course We look at creating a simple graphical user interface and adding simple server functionality to it. In particular, we'll look at the code that defines the behavior of buttons and fields on a Swing form.

We'll look at the layout and structure of the GUI, then add some buttons and text fields. Text fields are designed to receive information entered by the user and display the result of the program. The button will initiate the operation of functions built into the client part of the program. The application being created is a simple but fully featured calculator.

More detailed guide on GUI Designer development features, including video demonstrations various functions developments, see section.

Estimated duration: 20 minutes

Exercise 1: Creating a Project

The first step is to create an IDE project for the application you are developing. Let's name the project NumberAddition.

  1. Choose File > New Project. You can also click the New Project icon on the IDE toolbar.
  2. In the Categories area, select the Java node. In the "Projects" area, select "Java Application". Click "Next".
  3. Enter NumberAddition in the Project Name field and specify a path, such as your home directory, as the project location.
  4. Check the "Use separate folder to store libraries" and specify the location of the libraries folder (optional). Additional Information See the article Share a library with other users in a document Developing Applications with NetBeans IDE.
  5. Remove the "Create Main Class" checkbox if it is checked.
  6. Click the "Done" button.

Exercise 2: Creating the Front End

To continue the interface creation process, you need to create a Java container in which the other required GUI elements will be placed. In this activity, a container will be created using a JFrame element. The container will be placed in new package, which will appear in the "Source Packages" node.

Creating a JFrame Container

  1. In the Projects window, right-click the NumberAddition node and select New > Other.
  2. In the Create File dialog box, select the Swing GUI Forms category and the JFrame Form file type. Click "Next".
  3. Enter NumberAdditionUI as the class name.
  4. Select the my.numberaddition package.
  5. Click the "Done" button.

The IDE creates the NumberAdditionUI form and the NumberAdditionUI class in the NumberAddition application and opens the NumberAdditionUI form in the GUI Builder. The my.NumberAddition package replaces the default package.

Adding Elements: Creating a Front End

Next, using the "Palette" window, the external interface of the application is filled with the JPanel. After this, three JLabel elements (text labels), three JTextField elements (text fields), and three JButton elements (buttons) are added. If you have not worked with the GUI designer before, see Designing a Swing GUI in the NetBeans IDE for information about component placement.

After dragging and placing the above elements, the JFrame element should look like the image below.

If there is no Palette window in the upper right corner of the IDE, choose Window > Palette.

  1. To begin, select a panel from the Swing Containers category (" Swing containers") in the palette and drag it onto the JFrame.
  2. The JPanel will be highlighted. Go to the Properties window and click the ellipses button (...) next to the Border field to select a border style.
  3. In the Border dialog box, select TitledBorder from the list and enter Number Addition in the Title field. Click "OK" to save your changes and close the dialog box.
  4. The screen should now display an empty "JFrame" element with the title "Number Addition" as shown in the image. According to the picture, add three JLabels to it, three text fields JTextField and three JButtons.

Renaming elements

This step will rename the elements that have been added to the JFrame element.

  1. Double-click jLabel1 and change ntrcn ("text" property) to First Number.
  2. Double click jLabel2 and change the text to Second Number.
  3. Double click jLabel3 and change the text to Result.
  4. Remove the default text from jTextField1. The displayed text can be converted to editable text. To do this, right-click the text field and select "Edit Text" from the pop-up menu. This may require you to restore jTextField1 to its original size. Repeat this step for the jTextField2 and jTextField3 fields.
  5. Change the display text of jButton1 to Clear . (To change the text of a button, right-click the button and select Edit Text. Alternatively, you can click the button, pause, and click again.)
  6. Change the display text of jButton2 to Add .
  7. Change the display text of jButton3 to Exit .

Now the finished GUI should look like the image below:

Exercise 3: Adding Functionality

This exercise will add the required functionality to the Add, Clear, and Exit buttons. The fields jTextField1 and jTextField2 will be used for user input, and jTextField3 will be used to display the result of the program. Created program represents simple calculator. So let's get started!

Adding functionality to the Exit button

In order for the buttons to become functional, each of them must be assigned an event handler, which will be responsible for responding to events. In our case, we need to identify the button click event - either by clicking the mouse or using the keyboard. Therefore, the "ActionListener" interface will be used to handle "ActionEvent" events.

  1. Right-click the "Exit" button. From the pop-up menu, select Events > Action > actionPerformed. Please note that the menu contains many other events that the program can respond to! When you select the actionPerformed event, the IDE will automatically add an ActionListener to the Exit button and create a handler method to handle the actionPerformed listener method.
  2. The IDE automatically opens the Source Code window, showing you where to insert the action you want the button to perform when you click it (with your mouse or keyboard). The "Source Code" window should contain the following lines: private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) ( //TODO add your handling code here: )
  3. Now let's add the code for the action that the "Exit" button should perform. Replace the TODO line with System.exit(0); . The finished code for the "Exit" button should look like this: private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) ( System.exit(0); )

Adding functionality to the "Clear" button

  1. Right-click the "Clear" button (jButton1). From the menu that appears, select "Events > Action > actionPerformed".
  2. Clicking the "Clear" button should result in all text being removed from all "jTextField" text fields. To do this, add code similar to the one above. The finished source code should look like this: private void jButton1ActionPerformed(java.awt.event.ActionEvent evt)( jTextField1.setText(""); jTextField2.setText(""); jTextField3.setText(""); )

This code removes text from all three JTextFields, leaving them empty.

Adding functionality to the "Add" button

The "Add" button should do three things.

  1. It first takes the user's input in the jTextField1 and jTextField2 fields and converts them from a "String" type to a "Float" type.
  2. It will then perform the addition of the two numbers.
  3. Finally, it will convert the sum to a String and place it in jTextField3 .
Let's begin!
  1. Click the "Design" tab at the top work area to return to the Form Design screen.
  2. Right-click the "Add" button (jButton2). From the pop-up menu, select Events > Action > actionPerformed.
  3. Add code for the actions that the "Add" button should perform. The finished source code should look like this: private void jButton2ActionPerformed(java.awt.event.ActionEvent evt)( // First we define float variables. float num1, num2, result; // We have to parse the text to a type float. num1 = Float.parseFloat(jTextField1.getText()); num2 = Float.parseFloat(jTextField2.getText()); // Now we can perform the addition = num1+num2; result to jTextField3. // At the same time, we are going to // change the value of result from a float to a string. jTextField3.setText(String.valueOf(result));

Now the program is completely ready, and you can start assembling and executing it.

Exercise 4: Executing the Program

To run the program in the IDE, follow these steps:

  1. Select Run > Run Main Project (alternatively, press F6).

    Note. If you open a window indicating that Project NumberAddition does not have a main class specified, you should select my.NumberAddition.NumberAdditionUI as the main class in the same window and click OK.

To run the program outside the IDE, follow these steps:

After a few seconds the application will launch.

Note. If at double click JAR file does not launch the application, for more information about setting up JAR file associations on your operating system, see .

You can also run the application from the command line.

To run the application from the command line, follow these steps:

  1. Open a command prompt or terminal window.
  2. IN command line change the current directory to the NumberAddition/dist directory.
  3. At the command prompt, enter the following statement: java -jar NumberAddition.jar

    Note. Make sure that my.NumberAddition.NumberAdditionUI is set as the main class before running the application. To check this, right-click the NumberAddition project node in the Projects panel, choose Properties from the pop-up menu, and select the Run category in the Project Properties dialog box. The Main Class field should show my.numberaddition.NumberAdditionUI .

Event Processing Engine

This tutorial looked at responding to a simple button click event. There are many events that an application can respond to. In the IDE, you can view the list of available events that can be processed by GUI elements as follows:

  1. Return to the NumberAdditionUI.java file in the editor. Click the "Design" tab to view the GUI structure in GUI Builder.
  2. Right-click any GUI element and select "Events" from the menu that appears. Now you can simply explore the contents of the menu without selecting any items.
  3. Alternatively, you can select "Properties" from the "Window" menu. In the Properties window, click the Events tab. The "Events" tab allows you to view and change event handlers associated with the currently active GUI element.
  4. The application can also respond to key presses, single, double, or triple clicks, mouse pointer movements, window resizing, and input focus movements. The "Events" menu allows you to automatically create event handlers for all these events. The most common of these is the "Action" event. (For getting additional information see the Sun Java Events Tutorial for practical advice on event handling.)

How are events processed? Whenever you select an event from the event menu, the IDE automatically creates what is called an event listener and associates it with the developer component. To learn more about event processing, follow these steps:

  1. Return to the NumberAdditionUI.java file in the editor. Click the "Source" tab to view source code graphical interface.
  2. Scroll down to see the implemented jButton1ActionPerformed() , jButton2ActionPerformed() , and jButton3ActionPerformed() methods. These methods are called event handlers.
  3. Now go to the initComponents() method. If this method is missing, find the Generated Code line and click the + sign next to that line to display the hidden initComponents() method.
  4. Notice the blue block surrounding the initComponents() method. This code was automatically generated by the IDE and cannot be modified by the user.
  5. Now look at the initComponents() method itself. Among other things, it contains code that initializes GUI elements and places them on the form. This code is generated and updated automatically as you place and change elements in design mode.
  6. In the initComponents() method, find the following snippet: jButton3.setText("Exit"); jButton3.addActionListener(new java.awt.event.ActionListener() ( public void actionPerformed(java.awt.event.ActionEvent evt) ( jButton3ActionPerformed(evt); ) ));

    At this point, an "ActionListener" event listener object is added to the GUI element, in this case jButton3 . The "ActionListener" interface has an "actionPerformed" method of the "ActionEvent" object, which is implemented by simple call jButton3ActionPerformed event handler. This button now responds to action events. Each time the button is clicked, an "ActionEvent" is generated and passed to the "actionPerformed" method of the event listener interface, which executes the code the developer provided for that event in the event handler.

  7. Java GUI Applications Learning Card

July 09, 2003

With the advent of various visual application development tools, writing graphical interfaces for programs has turned into something like a child's game. I poked it with the mouse and a form appeared; I poked it a second time and a button appeared. It seems to me that many people now do not think about another way of programming in a graphical environment. Of course, you can’t argue against progress; when writing large projects, all these conveniences come in very handy. But that's not what this conversation is about. Sometimes it comes to the point of absurdity: a primitive application is written using MFC, VCL, etc. Such programs devour memory like termites and take up unnecessary space with their fat bodies. disk space. As a rule, MFC/VCL analogues “weigh” ten to twenty times more than programs written on a pure API. A Visual Basic(may God forgive me for this phrase) with its msvbvmXX.dll? Yes and system resources significantly more is consumed (several times). Poor users, denying themselves beer, save money to buy new hardware. Isn't it a pity for the poor things? Not only programmers drink beer? There is one more positive point in API coding, the programmer becomes closer to the operating system. Accordingly, he understands and controls it better. And it’s simple - it’s a very exciting activity. I repeat, all of the above applies specifically to small, simple programs, in large projects everything is completely different.

I hope I convinced you. Go.

We will look at creating a simple window interface with minimal functionality. This will be a simple window with two input fields and two buttons. When you click on the "Copy" button, the text from the first input field will be copied to the second. When you click on the "Close" button, the program will complete its work. In the future, it can serve as a template for writing other, more complex applications. We will communicate in C/C++, although we will not offend Delphi either. The general principle is the same, only the syntax is different. To work with system messages and API functions, you need to connect to your project header files; in C/C++ this is windows.h, in Delphi these are the windows and messages modules.

Any program in Windows OS consists of three main parts: the main function, the message loop and the window function, which processes all messages sent to the window.

Our program starts executing with the WinMain() function. This is the main function. The WinMain() function typically performs the following tasks:

  • Defines the window class. Not to be confused with an OOP class.
  • Registers this class in the system.
  • Creates the main application window and other controls.
  • Displays a window on the screen.
  • Starts the message processing loop.
  • It is declared this way: int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow) Let's look at the parameters:
    • hInstance is a handle to the current application instance.
    • hPrevInstance is a handle to the previous instance of the application, if it is running.
    • lpCmdLine - pointer to a line containing parameters passed to the program at startup.
    • nCmdShow - a constant that determines how the window is displayed. (See SW_ constants).

In Delphi we will not see such a picture; in this development environment the main function is hidden from the programmer by the compiler. Although, of course, it is present in the final code. To register a window class, you need to fill in the fields of the structure of type WNDCLASS (in Delphi TWNDCLASS). For this purpose, we have declared the wcl variable.

wcl.hInstance = hInstance; A handle to the current application instance, the hInstance variable is initialized by the WinMain() function. In Delphi it is initialized implicitly.

wcl.lpszClassName = szWinName; Class name. We created and initialized the string variable szWinName in advance.

wcl.lpfnWndProc = WindowFunc; A pointer to a window function. wcl.style = 0; A constant that specifies the window style. The CS_ flags are used for this, I just cleared them to zero. You can specify a combination of flags using the bitwise "or" operation. wcl.hIcon = LoadIcon(NULL, IDI_ASTERISK); A handle to the application icon, as returned by the LoadIcon() function. I uploaded a standard icon. See IDI_ constants.
  • wcl.hCursor = LoadCursor(NULL,IDC_ARROW); A handle to the application cursor, as returned by LoadCursor(). I loaded the standard arrow. See IDC_ constants.
  • wcl.lpszMenuName = NULL; Pointer to a string specifying the name of the menu resource for this window class. No menu, no sign.
  • wcl.cbClsExtra = 0; Reserved field. Let's reset.
  • wcl.cbWndExtra = 0; Reserved field. Let's reset.
  • wcl.hbrBackground = (HBRUSH)COLOR_WINDOW; Window color. The COLOR_WINDOW constant is cast to type HBRUSH (in Delphi there is no need to cast). Also, using the GetStockObject() function, you can set the window brush color or background image. Now, feel free to register the window class.
  • The eighth parameter is the owner window. At the main window, the owner is the desktop (0). The controls have a main window.
  • The ninth is a pointer to the menu handle. No menu, no sign.
  • The tenth parameter is a handle to the current application instance.
  • Eleventh - Used when creating applications with an MDI interface. We do not need.
The function returns a handle to the created window, which is stored in the hMainWnd variable.
A window handle is a unique number in the system that identifies a window or control.

Next we will create the necessary controls. All controls are the same windows, they just have a different class name. There is no need to register control classes; they are already predefined in the system. Button - button class. Input field - class edit. Caption - class ststic. There are many classes that correspond to standard controls. We create controls using the familiar CreateWindow() function and the unfamiliar CreateWindowEx() function. CreateWindowEx() allows you to create a window with an advanced style. We use it to create input fields. This function has added the first parameter, which sets this most advanced style, the remaining parameters are the same as CreateWindow(). Controls are child windows, their owner is the main window.

When creating controls, in the function parameters you must specify the descriptor of the main window, as well as the window style WS_CHILD. The appearance and functionality of controls can be manipulated using the flags: WS_, ES_, BS_, SS_, combining them with the bitwise “or” operation. When creating controls, we initialize the corresponding variables with their descriptors, which are returned by the CreateWindow() and CreateWindowEx() functions. We will need these descriptors for further work with controls. We display the window we created on the screen and redraw it.

The GetMessage function selects the next message from the application's message queue and sends it to the window.
  • The first parameter is a structure of type MSG (in Delphi of type TMSG)
  • The second parameter is a handle to the window to which the message is intended. If NULL or 0, then all application windows.
  • The third and fourth - allow you to set the range of received messages. If 0, then all messages addressed to the window.
GetMessage - returns FALSE when a WM_QUIT message appears, in which case the loop is exited and the application exits. TranslateMessage - translates keys into keyboard messages.

DispatchMessage - sends a message to the window function for processing.

The window function provides program functionality by processing system messages. The window function is a CALLBACK function, i.e. called by the operating system in response to an incoming new message. The window function is declared like this:

  • LRESULT CALLBACK WindowFunc(HWND hMainWnd, UINT iMsg, WPARAM wParam, LPARAM lParam)
  • HMainWnd - handle to the main window.
  • iMsg - message number. See WM_ constants.

lParam and wParam are message parameters.

When a message appears, we can compare the iMsg parameter with one of the WM_ constants and program the program to react accordingly.

For example: When the left mouse button is pressed while the mouse pointer is over the client area of ​​the window, the WM_LBUTTONDOWN event is raised. The window function is called, the value of the constant WM_LBUTTONDOWN is entered into the iMsg parameter, we can check the condition and program the program reaction we need.

Inside the window function is a selection operator that performs the task described above. The selection operator must have a default handler, which is implemented by the function DefWindowProc(hMainWnd, iMsg, wParam, lParam); If this is not done, our program will die without reviving. Many messages are processed by the system itself, such as: resizing a window, minimizing/maximizing a window, calling system menu

etc. This is what DefWindowProc() is for.

When working with window controls, a WM_COMMAND message is sent to the window owner, with lParam containing the handle to the control, and the high byte of the wParam parameter is the identifier of the event raised on the control. For example: when you click on a button - BN_CLICKED. See constants BN_, WM_. We can close the program using the PostQuitMessage(0) function. This function sends a WM_QUIT message to the window.

  • A few words about how to write such programs in Delphi. Create a new project, launch Project Manager, delete Unit1 along with the form. Press Ctrl + F12 and open the project file. We remove the forms module from the uses, add windows and messages there. We delete everything between begin and end. The workpiece is ready. You can code. It is impossible to write programs using a pure API without help, which should always be at hand. If you were Gates himself, you wouldn’t remember everything. I recommend:
  • first of all - MSDN; reference Delphi system
  • There is Russian help on the Win32 API on the website http://www.soobcha.ru/rushelp.
That's all.
Good luck.

Bobachenko Maxim Download: CreateWnd.zip(2.6K)
the archive contains the files windows.cpp and windows.dpr

GUI standard.

One of the most important changes in the computer industry is the advent of the graphical interface. So is there a need to adopt GUI standards that define what Windows applications should look like? Macintosh, etc. There are even certification programs that vendors tailor their applications to achieve. Windows icon. This is done for several reasons.

One of advantages of Windows or Mac is their standard view. When you have learned to work in one of them, consider that you have mastered the rest. Most Windows applications use the same conventions, so you know how to open, save, print, close, and copy a file in any of them. The standard interface is very user-friendly. You need to try to make your applications similar to other Windows applications that users have already learned to work with. There are seven general principles for GUI design. If you learn them and follow them, your app design will be fine.

Seven principles of GUI design.

The seven general principles of GUI design are taken from the Microsoft Windows Interface Guide. They form a blueprint from which you can create your own standards. This scheme gives developers and users two significant advantages. First of all, the apps look professional. Second, they are functional, consistent with other applications, and easy for users to learn.

Of course, for an application to be successful, it must be well-written and useful - these are the main requirements. The principles we talk about simply give the developer food for thought.

1. Allow the user to control the application.

2. Follow the object/action paradigm.

3. Be consistent.

4. Make using applications simple and obvious.

5. Strive for harmony.

6. Provide user feedback.

7. Be lenient

Principle One: Give the user control over the application.

The user must control the application, that is, have access to each application module from any other module. Previously, a hierarchical menu was used for such access.


Let's say the user wants to add a new client. In the example, the user must go to the ACCOUNTS RECCIEVAble module and then add a new client from there. How does he know what to do? Probably from my experience with this application. And in the GUI world, the user simply selects the New command from the menu, then Customer, as shown in Fig. In this modern system You can add a new customer, vendor, or inventory item using the File menu. This allows you to change a customer record while on the merchant screen and vice versa. The user no longer needs to navigate complex and confusing hierarchical menus.

Principle two: follow the object/action paradigm.

The object/action paradigm states that some operation can be performed on all objects in the system. The simplest and most obvious example is the customer database support screen (Fig.). The screen contains a set of buttons and each of the bottom allows you to perform some action on information about the selected client. You can delete it, edit it, print it, etc. Actions that can be performed on a particular client must be available or unavailable at the appropriate times. For example, when a customer record is in edit mode, the Delete and New buttons should be disabled.

Principle three: be consistent.

Consistency is one of the most important principles of GUI design. GUIs – allow users to explore more applications than older programs. And all this thanks to the principle of consistency. When a user encounters a new application, he is already familiar with the basic commands: opening, printing and saving files. Applications developed on these platforms are usually consistent with each other.

So, when creating new applications, be consistent. If to add new entry The New command is used, use it everywhere. This word should not be replaced with others - for example, with the word Add 9add). Thanks to your consistency, users will know that wherever they encounter the New command, it can be used to add a new entry.

Principle four: make using the application simple and obvious.

Another way to express this idea is: don’t use jargon. There is a screen with two buttons. One of them says “Pack the database”, and the other says “Remove records marked for deletion”. The second entry will probably be more understandable to the user.

When developing applications, there is often a temptation to use programmer slang in the interface. Try to avoid this if possible.

Principle Five: Strive for Harmony

Even in black and white, this screen has a significant aesthetic drawback: White background and there are contrasting objects on it. In Fig. The same screen looks well-balanced color-wise.

There are millions of color combinations you can transfer to Windows. Does this mean that they all need to be used? Of course no. You should choose simple, calm colors and avoid their chaotic mixing, which for some reason some programmers like.

Principle six. Provide feedback to the user.

Imagine that your application has a process that takes a long time to execute. During this time, you can display a message on the screen with the following content: “The program is running, please wait.” Convenient solution; but how does the user know that it is not frozen? Therefore, it is very likely that he will give the application a “three-finger salute” (Ctrl+Alt+Del), although everything will be fine with the program.

It's better to show the user what part of the process is completed. Then he will not needlessly interrupt the program, he will be able to evaluate how far the work has progressed, and do other things until the process is completed. Thus, the user's productivity will increase by approximately 25 percent. This result can be achieved by simply displaying the meter on the screen. Typically messages like “10 out of 100 records processed” or “40% complete” are displayed. Even better is to show both the number of records processed and their percentage."

Principle Seven: Be Forgiving

Each of us has sometimes deleted a post by accidentally pressing the wrong button. Therefore, give the user the opportunity to change his mind or cancel the actions just taken. If a process takes a long time, changes a lot of data, or requires the user to back up data before performing an action, you should issue a warning. I have seen applications that require confirmation twice and then ask for a password. Do your programs need this level of protection? Maybe. The developer’s task is to help the user if he made a mistake at any stage of the work.

The importance of GUI standard conventions.

As you can see, the principles of GUI design are very simple and should be used when creating screens. However, before you design the screen, you need to establish what it will look like. Choose its sizes, fonts, colors, message styles, etc. By resolving these issues in advance, you will significantly speed up your work. When it comes to the font or style of messages later, you just look at the standard.