To design and create a graphical user interface (GUI) from Qt widgets, you can use the integrated Qt Designer . You can position and customize your widgets or dialogs and test them using different styles and screen resolutions.

Widgets and forms created with Qt Designer are easily integrated into the program code using the Qt signal and slot mechanism, which will allow you to easily define the behavior of graphic elements. All properties set in Qt Designer can be dynamically changed in code. Moreover, features such as widget promotion and custom modules allow you to use your own widgets with Qt Designer .

The user interface using widgets is clearly structured and supports the style of the target platform, which makes it useful for traditional applications. However, they are static and do not allow the use of all the features of high-resolution screens, touch input and significant graphic capabilities that are becoming available in mobile devices, such as cell phones, media players and netbooks.

With the help of the QML declarative programming language, you can easily develop animation. In QML, the user interface is described by a tree of objects with properties. You can edit the QML code in the code editor. To implement the application logic, you can use Qt or JavaScript.

Integration also includes project management and code completion.

Using Qt Designer

Qt Creator automatically opens all .ui files in Qt Designer .

To change the layout of Qt Designer user interface elements:

1. Select Tools > Form Editor > Views > Fixed .

   When this option is not enabled, you can change the layout.

2. Click on an item's title and drag it to the desired place.

To modify Qt Designer properties, select Tools > Options ... > Designer .

• Set class properties and code generation settings in Create Class .
• Install an additional directory for saving templates in Templates .
• Set the grid settings and preview options in Forms . To preview your form with styles, turn on Print / Preview Settings and select your style. Otherwise, the default preview settings will be used.

  To preview the settings, select Tools > Form Editor > Preview ... or press Ctrl + Alt + R.

• To specify the profiles of embedded devices such as style, font and screen resolution, select Appearance of portable devices .

For more information about Qt Designer, see the Qt Designer Manual.

Mobile Application Optimization

Before starting to develop an application, it is necessary to analyze and define the requirements, niche and functionality of the application in order to provide effective functionality and a pleasant user interface. Design an application for one purpose and analyze how it can best serve users. Mobile devices have been designed for mobile use. Do not forget about the characteristics of mobile devices when developing applications for them.

This guide will help you design and develop convenient applications for mobile devices with various characteristics, such as screen size and supported input methods:

• Know your users
  Think about who will use the application, what they will use it for and what is their mobile device. Then design the application to suit certain uses.

• Design for small screens
  The screen size of mobile devices is much smaller than on desktop computers. Carefully consider what is most important in your application for displaying in the interface, as it may be unreasonable to try to fit as much content on the screen as in the desktop application.

• Designing for multiple screen sizes
  Associate the position and size of each control with the size of the screen. This will display the same set of information on the screen for all permissions; devices with higher resolution will simply show the best picture.

• Designing for orientation-changing screens
• Some devices support screen rotation. On these devices, the application can be shown in portrait or landscape orientation. Take into account the orientation and dynamically adjust the view when you rotate the screen.

• Designing intuitive ways to navigate within applications
  Mobile devices do not have a mouse and full-size keyboard, so users must use the touch screen or joystick to navigate within the application. Also, the user can control the device with one hand. To create a positive impression, allow users to access information with a single click; Do not make them scroll and type.

• Design for limited input methods
  Applications receive information from the user using manual input. In addition to typing using the touchscreen, some devices contain physical buttons, such as a joystick, numeric keypad, and a regular keyboard. Users can enter information using on-screen widgets, such as lists, checkboxes, radio buttons, and text fields.

• Keep response times short
  Delays can lead to a slow user interface. If the user feels that the application is running slowly, then most likely he will stop using it.

• Save battery power
  Mobile devices are not always connected to power sources, but are powered by batteries. Optimize energy consumption to keep overall consumption at an acceptable level so as not to drain a user's battery very quickly.

• Consider network issues
  If users do not have unlimited Internet or WLAN support, mobile network connections can cost them money. Also, when users move with the device, the available network connections are constantly changing.

• Remember device processing restrictions
  Memory available on devices is limited, so use it carefully. Although all mobile devices have common functionality, according to the available resources and additional features, each device is individual. Therefore, you must take into account restrictions on all target devices.

Adding Qt Designer Modules

You can use the Qt API to create plugins that extend Qt applications. This will allow you to add your own widgets to Qt Designer . The most convenient way to connect a module to an application is to compile it as a dynamic library, which is supplied separately and determined and loaded during program execution.

An application can define plug-ins that are stored in standard plug-in subdirectories.

Finding Qt Designer Plugins

Qt Designer searches for plug-ins in standard directories and loads those modules with which it has an assembly key. Qt Designer is supplied both as a separate application and as part of the SDK in which it is integrated with Qt Creator. The plug-in directory depends on which version you are using.

The integrated Qt Designer searches for modules in the% SDK% \ bin \ designer directory on Windows and Linux and QtCreator.app / Contents / MacOS / designer on the Mac. To check which modules have been loaded successfully and which ones haven’t, choose Tools> Form Editor> About Qt Designer Add-ons ....

A separate Qt Designer application is part of the Qt library, which is used when building projects and is located in% SDK% \ qt. Therefore, it searches for modules in the following directory:% SDK% \ qt \ plugins \ designer. To check which modules loaded successfully and which ones did not, select Help> About Add-ons ....

Verify build keys

The Qt Creator that is included in the Windows SDK is built using the Microsoft Visual Studio compiler, while the Qt version supplied for building applications is configured and built to use the MinGW / g ++ compiler. Modules compiled with this version of Qt cannot be loaded by Qt Creator due to the fact that their build keys do not match. Modules can only be used in a separate version of Qt Designer . Choose Help> About Qt Creator ... to check the Qt version with which Qt Creator was built.

To use Qt Designer modules that were built with the supplied Qt version, make sure that Qt Creator was built by the same compiler or rebuild Qt with Microsoft Visual Studio, depending on what configuration you want to use for your applications.