The Structure of a GUI

Discussion in 'X org / Desktop' started by DevynCJohnson, Jul 6, 2014.

  1. DevynCJohnson

    DevynCJohnson Well-Known Member Staff Member Staff Writer

    Messages:
    1,381
    Likes Received:
    1,094
    Trophy Points:
    113
    Many Linux and Unixoid users (Unix and Unix-like systems) have heard of window managers, window decorators, desktop environments, and such. But what exactly are these and how do they relate to each other? I hope to clarify some of these topics and explain how it all works.

    First of all, a Graphical User Interface (GUI) is an interface that allows users to interact with the system in a visual manner. GUIs typically have icons, windows, or graphics of some kind. An alternative to GUIs are command-lines which may also be called CLIs (Command-Line Interfaces) or CUIs (Console USer Interfaces). An example of this is DOS, FreeDOS, Bash, many server distros, etc. Basically, with a CLI, users interact with the machine through text. Users type a command and the machine performs the action and provides text as the output. A TUI (Text User Interface) is a step up from CLIs. TUIs are still text-based, but the screen is more ornamented and organized. The Ncurses interface is an example of a TUI. Most BIOS systems use a TUI interface (gray background and other coloring with menus). More advanced TUIs may have a cursor. The "dialog" command used to make interfaces for scripts is an example of an advanced TUI.

    Typing "make menuconfig" when working with the source code for the Linux kernel opens and Ncurses interface for configuring the kernel.

    [​IMG]

    The core of most GUIs is a windowing system (sometimes called a display server). Most windowing systems use the WIMP structure (Windows, Icons, Menus, Pointer). X11 is a protocol used by the common windowing system called Xorg used on Linux systems. Xorg, like other windowing systems, allows the movement of windows and input interactions (such as the mouse and keyboard). Windowing systems provide the basic framework for other parts of the GUI. Windowing systems do not control the appearance of the GUI. Rather, the windowing system offers the core functionality. Examples of display managers include SurfaceFlinger, Quartz, XFree86, and Weston.

    Xlib is a C-programming library for interacting with display servers using the X11 protocol (X Window System Version 11). Not all graphical components above the display server are compatible with the display server itself.

    The part of the GUI that controls the way windows appear is called the window manager. Window managers manage the size and placement of windows. Window managers also draw and own the close, maximize, minimize, etc. buttons and the scroll bars and menus (like the "File" menu) commonly seen on many windows. In other words, window managers control the frames that surround applications and the placement of these frames. The term "window decoration" refers to the usable part of the window frame like the close, minimize, etc. buttons, scroll bars, etc. However, sometimes the window manager will allow the application to control the appearance of the window. To understand this, think about the "complete themes” in Firefox that change the appearance of the windows and scroll bars. Not all window managers are compatible with the different display-managers/windowing-systems. Examples of window managers include Mutter, Metacity, KWin, twm, and IceWM.

    win_ff.png

    http://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Window_(windowing_system).svg/640px-Window_(windowing_system).svg.png

    A widget-toolkit is a set of software or a library that works with the window manager to design the window's appearance. For example, the GTK toolkit defines how a window should appear. Then, a window manager draws and manages the window. When users customize the theme of their desktop, they are choosing which GTK design to use. To help clarify, toolkits (like Qt and GTK) are programming frameworks that specify the appearance of a theme. Different themes are basically different sets of code written in GTK, Qt, or some other widget toolkit. When a programmer designs a program, they may add some code that interfaces with a widget library (like GTK or Qt) to hard-code how a window appears. Think about your desktop and notice how you may have a few programs that look like an entirely different theme compared to your other applications. Such "odd" applications may have their appearance hard-coded. Examples of widget toolkits include SDL, Qt, GTK, AWT, and Motif.

    Notice that some of the windows have an appearance that differs from the others (Clementine is more gray and box-like wile the calculator has rounded buttons and a lighter color).

    win_widget.png

    A display manager is the "login screen". LightDM, KDM (KDE display manager), GDM (GNOME Display Manager), etc. are pieces of software that manage the appearance of the login screen.

    A desktop is the "invisible window" that allows users to set a wallpaper/background and place "desktop icons". A virtual desktop refers to a desktop that is on the outside of the screen. Think about "workspaces" or "workspace switchers". You see your desktop, but there is more of it than what you see on the physical screen.

    win_virtualDesktop.png

    A dock, launcher, launch bar, or taskbar is a graphical element that may be its own entity or a component of another graphical software. In Ubuntu, the launcher on the side and the bar at the top are components of Unity. Cairo-Dock is an example of a dock that is its own entity. Their purpose is to give users access to file and applications.

    A dock (Cairo-Dock) and Ubuntu's default wallpaper options are seen.

    win_dockDesktop.png

    Screensavers are special programs that protect the screen from phosphor burn-in on CRT (tube-based monitors) and plasma monitors. However, they are also used for entertainment and security purposes. Screensavers can be set to activate when the workstation has not seen any activity from the user. Screensavers would then require a password to allows users to see the desktop and interact with the machine. Screensavers may be simple like a solid color or they can be graphics intensive like a video game.

    A Desktop Environment is a collection of software that provides a standard look and feel. For example, the KDE Plasma Desktop uses the X11 windowing system, the KWin window manager, the Qt widget, the KDE display manager, and the KDE Software Compilation (the many KDE applications such as Kate, Konsole, Phonon, and the many K* applications).


    In summary, a desktop environment is the collection or a bundled package of various GUI components. Each component performs some function in producing a graphical way of interacting with your machine. The windowing system (think about Xorg) is the lowest level portion of the GUI that controls the input interaction (mouse and keyboard). The window manager puts applications in designated portions of the screen called "windows". Window managers provide a way to change the window size. Users may also use the window manager to close an application. The widget toolkits provide a set (predefined) appearance that the window manager should draw. Such toolkits tell the window manager where to place the close, maximize, etc. buttons and how they should appear. Menus are also drawn by window managers after a toolkit declares how the menu should appear. Display managers a graphical login interfaces that allows users to login and choose the environment to load (if the user has more than one environment installed). Docks and launchers allow users to access certain application and files. The desktop is an "invisible" background window that appears to be behind (or at the bottom - below) all of your other windows and docks.


    All these pieces of software work together to create the applications we see on the screen.

    Attached Files:

    • slide.JPG
      slide.JPG
      File size:
      48.7 KB
      Views:
      100,189
    Eric Z. Ma, ryanvade and rstanley like this.

Share This Page