The Graphic User Interface Development

Introduction

The creation of GUIs has been and remains a relatively complex problem to manage. One of the main constraints is the often close link between the interface and the functionalities developed. Often the addition or modification results in a drastic change of the interface and requires a complete overhaul of the code. Hence the idea of ​​splitting the presentation layer (GUI) from the business layer.

It remains that the mechanisms to allow the links between these two worlds remain laborious depending on the technologies and frameworks used. Added to this is the strong link that exists between the user interface and the OS due to the use of the corresponding proprietary API. So how do you choose ?

Use the framework “deliver” with the OS, use a cross-platform framework, or create your own library?

The main ways to create a GUI

0
Visual Factory 1.00 – Imalogic 1996 – Simple User Interface developed in C

In 1996, during the development of Visual Factory 1.0, the choice fell on a mix between the use of FLTK and a homemade framework for the management of buttons / windows based on skins (images).

skindown4
Skin “Down” Image

skinup4
Skin “Up” Image

The problem to be dealt with was the integration of a GUI in an environment based on DirectX. With this environment, the basic functionalists of the OS (widget) are not accessible. It was therefore necessary to develop a proprietary graphical interface layer.

At the time, the graphics cards did not allow 3D acceleration, all the effects were achieved in software rendering. The software open, using directx, two 16bit buffers for double buffering. To speed up the rendering process, we used precomputed tables for managing transparency in particular. The display routines were done in 80×86 assembler.

The interface and visual effects were rendered in real time in these buffers and then sent to the graphics card.

The simplest method to realize the interface (buttons) was based on the use of two images representing the interface according to two states (activated / not activated); in the code we tested where the mouse pointer was and depending on the selected delimited area (representing a button or in “clickable” place) we activated the specific associated functions.

During this period, Borland had released C ++ Builder, a small revolution in the creation of software interfaces based on a Windows environment, an alternative to MFC, allowing to reduce the programming by the use of a “drag & drop” system of widget on areas representing application windows. The business code is then associated with an action defined on a widget.

Nowadays, there are tools for creating GUIs based on different environments, more or less portable.

From C ++ Buidler we have seen the creation of x-platform solutions for mobile (Embarcadero). On PC, the creator of C ++ Builder went to Microsoft to develop RAD tools .Net based on C #.

Each operating system (Windows, Mac OS X, Linux…) offers at least one way to create user interfaces. On a “text console”, the user experience is restricted to displaying text and using the keyboard.

In general, OS provide a proprietary framework to improve the user experience. These frameworks make it possible to create human machine interfaces (HMI) or Graphic User Interface (GUI).

One of the problems is that these frameworks are related to the OS and are not portable, the program created only for Windows will only be able to work on Windows and not elsewhere.

From a software interface point of view:

either we write our application especially for the OS we want, but the program will not be portable;
either we use a library that adapts to all OS, that is to say a multiplatform library and we can more “easily” distribute it on other OS.

The second solution is generally the most flexible. But it has the disadvantage (for some purists) of not using the look & feel of the OS, and of offering its “own look”. On the other hand, it guarantees visual consistency between a product running on different platforms (OS), and from a development point of view, these frameworks offer high-level architectures and functions that help in the evolution and maintenance of the application.

I will first present libraries specific to the main OS, for information.

Then I would see what are the main cross-platform libraries out there.

OS-specific libraries

Each OS offers at least one library that allows you to create windows, buttons and other widgets, a graphical interface component, a visual element of a graphical interface (button, scroll bar, drop-down list, etc.).
The default is that in general, this library only works for the OS for which it was created. So, if you use the Windows library, your program will only work on Windows.

  • Under Windows: we have the .NET framework. It is a very complete set of libraries that can be used in C ++, C #, Visual Basic… The preferred language for working with .NET is C #. It should be noted that .NET can also be used under Linux (with some limitations) thanks to the Mono project. In short, .NET is a real Swiss army knife for developing under Windows and you can also run programs under Linux, with a few exceptions.
  • Under Windows in DirectX used mainly for games and specific graphics applications, this mode is a bit special because the standard window management libraries and other widgets are not available. We have a very succinct library delivered in the Microsoft SDK (DXUTILS) which consists of some basic widgets.

  • Under Mac OS X: The preferred library is called Cocoa. It is generally used in the “Objective C” language. It is an object oriented library.
  • Under Linux: all desktop environments (called WM for Windows Managers) are based on X, the base of Linux graphical interfaces. X offers a library called Xlib but, under Linux, we rarely program in Xlib. We prefer to use a library that is easier to use and multiplatform like GTK + (under Gnome) or Qt (under KDE).

There is a “base” library for each OS. Some, like Cocoa, only work for the operating system for which they were designed. It is generally recommended that you use a cross-platform library if your software is to be distributed over different environments.

Cross-platform libraries

The advantages of using a cross-platform library are many (even if you want to create programs for Windows only).

  • In most cases, they simplify the creation of the user interface. Typically, fewer lines of code are needed to handle the user interface.
  • It must make it possible to split the user interface from the “business code”
  • Then, they standardize everything, they form a coherent whole in which it is easy to navigate.
  • The names of the functions and classes are chosen logically to help you as much as possible.µ
  • Finally, they disregard the operating system but also the version of the system. This means that if tomorrow Cocoa ceases to be usable under Mac OS X, your application will continue to function because the multiplatform library will adapt to the changes.

Choosing a multiplatform library is not easy, this choice must take into account the platforms targeted for deployment, ease of use, associated tools (UI designer), …

Here are some of the top cross-platform libraries to know, at least in name:

  • .NET (pronounced “Dot Net”): Developed by Microsoft to succeed the aging Win32 API. It is often used in C # language. However, you can use .NET in a multitude of other languages ​​including C ++. .NET is portable because Microsoft has explained how it works. Thus, we can use a program written in .NET under Linux with Mono. At the moment, however, .NET is mainly used on Windows.
  • GTK +: one of the most important libraries used in Linux. It is portable, that is to say usable under Linux, Mac OS X and Windows. GTK + can be used in C but there is a C ++ version called GTKmm (we talk about wrapper or even overlay). GTK + is the library of choice for those writing applications for Gnome on Linux, but it also works under KDE. This is the library used for example by Firefox, to name just one.
  • Qt: I will describe it in more detail in a future post. Be aware, however, that Qt is widely used on Linux too, especially in the KDE desktop environment. Qt offers components for graphical interface (widgets), data access, network connections, management of threads, XML analysis, etc. ; in some respects, it looks like a framework when used to design graphical interfaces or when we design the architecture of its application using the mechanisms of signals and slots for example.
  • wxWidgets: a very complete object library too, roughly comparable to Qt. Its license is very similar to that of Qt (it allows you to create proprietary programs). However, I still chose to show you Qt because this library is easier for beginner training. Note that once you get started, wxWidgets is not much more complicated than Qt. WxWidgets is the library used to build the GUI of the Code :: Blocks IDE.
  • FLTK: unlike all previous heavyweight libraries, FLTK is meant to be lightweight. It is a small library dedicated only to the creation of cross-platform graphical interfaces.

  • AntTweakBar is a super useful little library for interactively manipulating variables. Most of the time it is directly used in C / C ++ apps. I use it for my 3D projects, e.g. firsttest 50kCube