Cross-platform C SDK logo

Cross-platform C SDK

Gui

❮ Back
Next ❯
This page has been automatically translated using the Google Translate API services. We are working on improving texts. Thank you for your understanding and patience.

Functions

voidgui_start (void)
voidgui_finish (void)
voidgui_respack (...)
voidgui_language (...)
const char_t*gui_text (...)
const Image*gui_image (...)
const byte_t*gui_file (...)
bool_tgui_dark_mode (void)
color_tgui_alt_color (...)
color_tgui_label_color (void)
color_tgui_view_color (void)
color_tgui_line_color (void)
color_tgui_link_color (void)
color_tgui_border_color (void)
S2Dfgui_resolution (void)
V2Dfgui_mouse_pos (void)
voidgui_update (void)
voidgui_OnThemeChanged (...)
voidgui_update_transitions (...)
voidgui_OnNotification (...)
type*evbind_object (...)
bool_tevbind_modify (...)

Types and Constants

enumgui_orient_t
enumgui_state_t
enumgui_mouse_t
enumgui_cursor_t
enumgui_close_t
enumgui_scale_t
enumgui_event_t
enumwindow_flag_t
enumgui_notif_t
structControl
structLabel
structButton
structPopUp
structEdit
structCombo
structListBox
structUpDown
structSlider
structProgress
structView
structTextView
structImageView
structTableView
structSplitView
structLayout
structCell
structPanel
structWindow
structMenu
structMenuItem
structEvButton
structEvSlider
structEvText
structEvTextFilter
structEvDraw
structEvMouse
structEvWheel
structEvKey
structEvPos
structEvSize
structEvWinClose
structEvMenu
structEvTbPos
structEvTbRect
structEvTbSel
structEvTbCell

The Gui library allows you to create graphical user interfaces in a simple and intuitive way. Only available for desktop applications for obvious reasons (Figure 1), unlike the rest of libraries that can also be used in command line applications.

Gui library dependency tree.
Figure 1: Dependencies of Gui. See NAppGUI API.

Like Draw2D and Osbs Gui relies on the APIs of each operating system. In addition to the advantages already mentioned in these two cases, native access to interface elements will cause our programs to be fully integrated in the desktop and according to the visual theme present in each machine (Figure 2).

Image of the same program running on Windows, macOS and Linux.
Figure 2: The interfaces created with Gui will adapt to the style of each window environment.

1. Declarative composition

The Gui library moves away from the concept of treating windows (or dialog boxes) as an external resource of the program. On the contrary, these are created directly from the source code avoiding layout by visual editors (Figure 3). We must bear in mind that window managers use different fonts and templates, so specifying specific positions and sizes for the elements will not be portable between platforms (Figure 4). On the contrary, in Gui the controls are located in a virtual grid called Layout, which will calculate its location and final size at runtime and depending on the platform (Figure 5).

Capture of the interface editor included in Xcode.
Figure 3: Resource editors are not good allies to create complex dynamic interfaces. Even less if we want to carry them between platforms.
Label and Button controls on Windows, macOS and Linux.
Figure 4: Using fixed dimensions for controls will not adapt well when migrating the program.
Label and Button controls on Windows, macOS and Linux.
Figure 5: The Layout calculates the position and size of the components at runtime.

In addition, another relevant fact is that interfaces are living objects subject to constant changes. A clear example is the translations, which alter the location of the elements due to the new dimension of the text (Figure 6). Gui will adapt to these events automatically, recalculating positions to maintain a consistent layout.

Translation of a runtime application.
Figure 7: The windows automatically adapt to runtime changes. Animatión in https://nappgui.com/img/gui/translate.gif.

2. Anatomy of a window.

In (Figure 8) we have the main parts of a window. Controls are the final elements with which the user interacts to enter data or launch actions. The views are rectangular regions of relatively large size where information is represented by text and graphics, being able to respond to keyboard or mouse events. Finally, all these elements will be grouped into panels and will be layout by layouts.

Interface window where the most important parts are highlighted.
Figure 8: Notable parts in an interface window.
  • Label. Small blocks of descriptive text.
  • Button. Push buttons, check boxes or radio.
  • PopUp. Button with drop-down list.
  • Edit. Text edit box.
  • Combo. Edit box with drop-down list.
  • ListBox. List box.
  • UpDown. Increment and decrement buttons.
  • Slider. Sliding bar.
  • Progress. Progress bar.
  • View. Generic view where you can freely draw.
  • TextView. View to show and edit texts in multiple formats.
  • ImageView. View to display images.
  • TableView. Table view to display information in rows and columns.
  • SplitView. View divided into two resizable parts.
  • Layout. Virtual and invisible grid where the controls will be located.
  • Panel. Sub-window inside the main one with its own controls.
  • Window. Main window with title bar and frame.
  • Menu. Drop-down list with options.
  • MenuItem. Each of the menu items.

3. GUI Events

Desktop applications are event driven, which means that they are continually waiting for the user to perform some action on the interface: Press a button, drag a slider, write a text, etc. When this occurs, the window manager detects the event and notifies the application (Figure 9), which must provide an event handler with the code to execute. For example in (Listing 1) we define a handler to respond to the press of a button. Obviously, if there is no associated handler, the application will ignore the event.


enum gui_orient_t

Orientation.

enum gui_orient_t
{
    ekGUI_HORIZONTAL,
    ekGUI_VERTICAL
};
ekGUI_HORIZONTAL

Horizontal.

ekGUI_VERTICAL

Vertical.


enum gui_state_t

State values.

enum gui_state_t
{
    ekGUI_OFF,
    ekGUI_ON,
    ekGUI_MIXED
};
ekGUI_OFF

Off.

ekGUI_ON

On.

ekGUI_MIXED

Medium/undetermined.


enum gui_mouse_t

Mouse buttons.

enum gui_mouse_t
{
    ekGUI_MOUSE_LEFT,
    ekGUI_MOUSE_RIGHT,
    ekGUI_MOUSE_MIDDLE
};
ekGUI_MOUSE_LEFT

Left.

ekGUI_MOUSE_RIGHT

Right.

ekGUI_MOUSE_MIDDLE

Center.


enum gui_cursor_t

Cursors. See window_cursor.

enum gui_cursor_t
{
    ekGUI_CURSOR_ARROW,
    ekGUI_CURSOR_HAND,
    ekGUI_CURSOR_IBEAM,
    ekGUI_CURSOR_CROSS,
    ekGUI_CURSOR_SIZEWE,
    ekGUI_CURSOR_SIZENS,
    ekGUI_CURSOR_USER
};
ekGUI_CURSOR_ARROW

Arrow (default).

ekGUI_CURSOR_HAND

Hand.

ekGUI_CURSOR_IBEAM

Vertical bar (text editing).

ekGUI_CURSOR_CROSS

Cross.

ekGUI_CURSOR_SIZEWE

Horizontal resize (left-right).

ekGUI_CURSOR_SIZENS

Vertical resize (top-bottom).

ekGUI_CURSOR_USER

Created from an image.


enum gui_close_t

Reason for closing a window.

enum gui_close_t
{
    ekGUI_CLOSE_ESC,
    ekGUI_CLOSE_INTRO,
    ekGUI_CLOSE_BUTTON,
    ekGUI_CLOSE_DEACT
};
ekGUI_CLOSE_ESC

The [ESC] key has been pressed (cancel).

ekGUI_CLOSE_INTRO

The [ENTER] key has been pressed (accept).

ekGUI_CLOSE_BUTTON

The close button [X] has been pressed in the title bar.

ekGUI_CLOSE_DEACT

The parent window has been hidden.


enum gui_scale_t

Scaling modes.

enum gui_scale_t
{
    ekGUI_SCALE_AUTO,
    ekGUI_SCALE_NONE,
    ekGUI_SCALE_ASPECT,
    ekGUI_SCALE_ASPECTDW
};
ekGUI_SCALE_AUTO

Automatic scaling, the proportion may change.

ekGUI_SCALE_NONE

No scaling.

ekGUI_SCALE_ASPECT

Automatic scaling, but maintaining the proportion (aspect ratio).

ekGUI_SCALE_ASPECTDW

Same as above, but does not increase the original size, only reduce it if appropriate.


enum gui_event_t

Event type. See GUI Events.

enum gui_event_t
{
    ekGUI_EVENT_LABEL,
    ekGUI_EVENT_BUTTON,
    ekGUI_EVENT_POPUP,
    ekGUI_EVENT_LISTBOX,
    ekGUI_EVENT_SLIDER,
    ekGUI_EVENT_UPDOWN,
    ekGUI_EVENT_TXTFILTER,
    ekGUI_EVENT_TXTCHANGE,
    ekGUI_EVENT_FOCUS,
    ekGUI_EVENT_MENU,
    ekGUI_EVENT_DRAW,
    ekGUI_EVENT_RESIZE,
    ekGUI_EVENT_ENTER,
    ekGUI_EVENT_EXIT,
    ekGUI_EVENT_MOVED,
    ekGUI_EVENT_DOWN,
    ekGUI_EVENT_UP,
    ekGUI_EVENT_CLICK,
    ekGUI_EVENT_DRAG,
    ekGUI_EVENT_WHEEL,
    ekGUI_EVENT_KEYDOWN,
    ekGUI_EVENT_KEYUP,
    ekGUI_EVENT_WND_MOVED,
    ekGUI_EVENT_WND_SIZING,
    ekGUI_EVENT_WND_SIZE,
    ekGUI_EVENT_WND_CLOSE,
    ekGUI_EVENT_COLOR,
    ekGUI_EVENT_THEME,
    ekGUI_EVENT_OBJCHANGE,
    ekGUI_EVENT_TBL_NROWS,
    ekGUI_EVENT_TBL_BEGIN,
    ekGUI_EVENT_TBL_END,
    ekGUI_EVENT_TBL_CELL,
    ekGUI_EVENT_TBL_SEL,
    ekGUI_EVENT_TBL_HEADCLICK
};
ekGUI_EVENT_LABEL

Click on a Label control.

ekGUI_EVENT_BUTTON

Click on a Button control.

ekGUI_EVENT_POPUP

The selection of a PopUp control has been changed.

ekGUI_EVENT_LISTBOX

The selection of a control has been changed ListBox.

ekGUI_EVENT_SLIDER

You are moving an Slidercontrol.

ekGUI_EVENT_UPDOWN

Click on a UpDown control.

ekGUI_EVENT_TXTFILTER

The text of a Edit or Combo control is being edited.

ekGUI_EVENT_TXTCHANGE

You have finished editing the text of a Edit or Combo control.

ekGUI_EVENT_FOCUS

A control has received keyboard focus.

ekGUI_EVENT_MENU

Click on a menu.

ekGUI_EVENT_DRAW

The view content must be redrawn.

ekGUI_EVENT_RESIZE

The size of a view has changed.

ekGUI_EVENT_ENTER

The mouse has entered the view area.

ekGUI_EVENT_EXIT

The mouse has left the view area.

ekGUI_EVENT_MOVED

The mouse is moving on the view surface.

ekGUI_EVENT_DOWN

A mouse button was pressed.

ekGUI_EVENT_UP

A mouse button has been released.

ekGUI_EVENT_CLICK

Click on a view.

ekGUI_EVENT_DRAG

Dragging is being done over.

ekGUI_EVENT_WHEEL

Mouse wheel has moved.

ekGUI_EVENT_KEYDOWN

A key has been pressed.

ekGUI_EVENT_KEYUP

A key has been released.

ekGUI_EVENT_WND_MOVED

The window is moving across the desktop.

ekGUI_EVENT_WND_SIZING

The window is being resized.

ekGUI_EVENT_WND_SIZE

The window has been resized.

ekGUI_EVENT_WND_CLOSE

The window has been closed.

ekGUI_EVENT_COLOR

An update color of comwin_color.

ekGUI_EVENT_THEME

Desktop theme has changed.

ekGUI_EVENT_OBJCHANGE

An object linked to a layout has been edited. Notifications and calculated fields.

ekGUI_EVENT_TBL_NROWS

A table needs to know the number of rows. tableview_OnData.

ekGUI_EVENT_TBL_BEGIN

A table will begin to draw the visible part of the data. tableview_OnData.tableview_OnData.

ekGUI_EVENT_TBL_END

A table has finished drawing. tableview_OnData.

ekGUI_EVENT_TBL_CELL

A table needs the data of a cell. tableview_OnData.

ekGUI_EVENT_TBL_SEL

The selected rows in a table have changed. tableview_OnSelect.

ekGUI_EVENT_TBL_HEADCLICK

Click on a table header. tableview_OnHeaderClick.


enum window_flag_t

Window creation attributes.

enum window_flag_t
{
    ekWINDOW_FLAG,
    ekWINDOW_EDGE,
    ekWINDOW_TITLE,
    ekWINDOW_MAX,
    ekWINDOW_MIN,
    ekWINDOW_CLOSE,
    ekWINDOW_RESIZE,
    ekWINDOW_RETURN,
    ekWINDOW_ESC,
    ekWINDOW_STD,
    ekWINDOW_STDRES
};
ekWINDOW_FLAG

Default attributes.

ekWINDOW_EDGE

The window draws an outer border.

ekWINDOW_TITLE

The window has a title bar.

ekWINDOW_MAX

The window shows the maximize button.

ekWINDOW_MIN

The window shows the minimize button.

ekWINDOW_CLOSE

The window shows the close button.

ekWINDOW_RESIZE

The window has resizable borders.

ekWINDOW_RETURN

The window will process the pressing of the [RETURN] key as a possible closing event, sending the message OnClose.

ekWINDOW_ESC

The window will process the pressing of the [ESC] key as a possible closing event, sending the message OnClose.

ekWINDOW_STD

Combination ekWINDOW_TITLE | ekWINDOW_MIN | ekWINDOW_CLOSE.

ekWINDOW_STDRES

Combination ekWINDOW_STD | ekWINDOW_MAX | ekWINDOW_RESIZE.


enum gui_notif_t

Notifications sent by the gui library.

enum gui_notif_t
{
    ekGUI_NOTIF_LANGUAGE,
    ekGUI_NOTIF_WIN_DESTROY,
    ekGUI_NOTIF_MENU_DESTROY
};
ekGUI_NOTIF_LANGUAGE

The interface language has been changed.

ekGUI_NOTIF_WIN_DESTROY

A window has been destroyed.

ekGUI_NOTIF_MENU_DESTROY

A menu has been destroyed.


struct Control

Interface Control (abstract).

struct Control;

struct Label

Interface control that contains static text, usually limited to a single line. Label.

struct Label;

struct Button

Interface control representing a button. Button.

struct Button;

struct PopUp

Control button with drop-down list. PopUp.

struct PopUp;

struct Edit

Text editing control Edit.

struct Edit;

struct Combo

Control that combines an edit box with a drop-down list. Combo.

struct Combo;

struct ListBox

List control. ListBox.

struct ListBox;

struct UpDown

Control that shows two small increase and decrease buttons. UpDown.

struct UpDown;

struct Slider

Control that shows a bar with a slider. Slider.

struct Slider;

struct Progress

Progress bar. Progress.

struct Progress;

struct View

Custom View that allows to create our own controls, drawing what we want. View

struct View;

struct TextView

Text view with several paragraphs and different attributes. TextView.

struct TextView;

struct ImageView

Image viewer control. ImageView.

struct ImageView;

struct TableView

Table view with multiple rows and columns. TableView.

struct TableView;

struct SplitView

Resizable horizontal or vertical split view. SplitView.

struct SplitView;

struct Layout

Invisible grid where the controls of a Panel are organized. Layout.

struct Layout;

struct Cell

Each of the cells that form a Layout. Cell.

struct Cell;

struct Panel

Internal area of a window, which allows you to group different controls. Panel.

struct Panel;

struct Window

Interface window. Window.

struct Window;

struct Menu

Menu or submenu. Menu.

struct Menu;

struct MenuItem

Item within a menu. MenuItem.

struct MenuItem;

struct EvButton

Parameters of the OnClick event of a button or OnSelect of a popup.

struct EvButton
{
    uint32_t index;
    gui_state_t state;
    const char_t* text;
};
index

Button or item index.

state

State.

text

Text.


struct EvSlider

Parameters of the OnMoved event of a slider.

struct EvSlider
{
    real32_t pos;
    real32_t incr;
    uint32_t step;
};
pos

Normalized slider position (0, 1).

incr

Increase with respect to the previous position.

step

Interval index (only for discrete ranges).


struct EvText

Parameters of the OnChange event of the text boxes.

struct EvText
{
    const char_t* text;
    uint32_t cpos;
};
text

Text.

cpos

Cursor position (caret).


struct EvTextFilter

Result of the OnFilter event of the text boxes.

struct EvTextFilter
{
    bool_t apply;
    char_t* text;
    uint32_t cpos;
};
apply

TRUE if the original control text should be changed.

text

New control text, which is a revision (filter) of the original text.

cpos

Cursor position (caret).


struct EvDraw

OnDraw event parameters.

struct EvDraw
{
    DCtx* ctx;
    real32_t x;
    real32_t y;
    real32_t width;
    real32_t height;
};
ctx

2D drawing context.

x

X coordinate of the drawing area (viewport).

y

Y coordinate of the drawing area.

width

Width of the drawing area.

height

Height of the drawing area.


struct EvMouse

Mouse event parameters.

struct EvMouse
{
    real32_t x;
    real32_t y;
    gui_mouse_t button;
    uint32_t count;
};
x

Pointer x coordinate.

y

Coordinate and pointer.

button

Active button.

count

Number of clicks.


struct EvWheel

OnWheel event parameters.

struct EvWheel
{
    real32_t x;
    real32_t y;
    real32_t dx;
    real32_t dy;
    real32_t dz;
};
x

Pointer x coordinate.

y

Pointer y coordinate.

dx

Increase in x of the wheel or trackpad.

dy

Increase in x of the wheel or trackpad.

dz

Increase in x of the wheel or trackpad.


struct EvKey

Keyboard event parameters.

struct EvKey
{
    vkey_t key;
};
key

Pulsed key or released.


struct EvPos

Parameters of change of position events.

struct EvPos
{
    real32_t x;
    real32_t y;
};
x

X coordinate.

y

Y coordinate.


struct EvSize

Resize event parameters.

struct EvSize
{
    real32_t width;
    real32_t height;
};
width

Width (size in x).

height

Height (size in y).


struct EvWinClose

Window closing Event Parameters.

struct EvWinClose
{
    gui_close_t origin;
};
origin

Origin of the close.


struct EvMenu

Menu event parameters.

struct EvMenu
{
    uint32_t index;
    gui_state_t state;
    const char_t* str;
};
index

Pressed item index.

state

Pressed item status.

str

Pressed item text.


struct EvTbPos

Location of a cell in a table.

struct EvTbPos
{
    uint32_t col;
    uint32_t row;
};
col

Column index.

row

Row index.


struct EvTbRect

Group of cells in a table.

struct EvTbRect
{
    uint32_t stcol;
    uint32_t edcol;
    uint32_t strow;
    uint32_t edrow;
};
stcol

Initial column index.

edcol

End column index.

strow

Initial row index.

edrow

End row index.


struct EvTbSel

Selection in a table.

struct EvTbSel
{
    ArrSt(uint32_t)* sel;
};
sel

Row indices.


struct EvTbCell

Data from a cell in a table.

struct EvTbCell
{
    const char_t* text;
    align_t align;
};
text

Cell text.

align

Text alignment.


gui_start ()

Start the Gui library, reserving space for global internal structures. Internally call draw2d_start. It is called automatically by osmain.

void
gui_start(void);

gui_finish ()

Finish the Gui library, freeing up the space of global internal structures. Internally call draw2d_finish. It is called automatically by osmain.

void
gui_finish(void);

gui_respack ()

Register a resource package.

void
gui_respack(FPtr_respack func_respack);
func_respack

Resource constructor.

Remarks

See Resources.


gui_language ()

Set the language of the registered resources with gui_respack.

void
gui_language(const char_t *lang);
lang

Language.

Remarks

See Resources.


gui_text ()

Get a text string through its resource identifier.

const char_t*
gui_text(const ResId id);
id

Resource Identifier.

Return

The text string or NULL if it is not found.

Remarks

The resource must belong to a package registered with gui_respack.


gui_image ()

Get an image through its resource identifier.

const Image*
gui_image(const ResId id);
id

Resource Identifier.

Return

The image or NULL if it is not found.

Remarks

The resource must belong to a package registered with gui_respack. Do not destroy the image as it is managed by Gui.


gui_file ()

Get the contents of a file through its resource identifier.

const byte_t*
gui_file(const ResId id,
         uint32_t *size);
id

Resource Identifier.

size

Buffer size in bytes.

Return

File data or NULL if it is not found.

Remarks

The resource must belong to a package registered with gui_respack. The data is managed by Gui, so there is no need to free memory.


gui_dark_mode ()

Determines if the window environment has a light or dark theme.

bool_t
gui_dark_mode(void);

Return

TRUE for Dark mode, FALSE for light mode.


gui_alt_color ()

Create a color with two alternative versions.

color_t
gui_alt_color(const color_t light_color,
              const color_t dark_color);
light_color

Color for LIGHT desktop themes.

dark_color

Color for DARK desktop themes.

Return

The color.

Remarks

The system will set the final color based on the "lightness" of the window manager colors (Light/Dark). Nested alternate colors ARE NOT ALLOWED. The light and dark values ​​must be RGB or system colors.


gui_label_color ()

Returns the default color of text labels Label.

color_t
gui_label_color(void);

Return

The color.


gui_view_color ()

Returns the background color in controls View.

color_t
gui_view_color(void);

Return

The color.


gui_line_color ()

Returns the color of lines in tables or window separator elements.

color_t
gui_line_color(void);

Return

The color.


gui_link_color ()

Returns the color of the text in hyperlinks.

color_t
gui_link_color(void);

Return

The color.


gui_border_color ()

Returns the border color in button controls, popups, etc..

color_t
gui_border_color(void);

Return

The color.


gui_resolution ()

Returns screen resolution.

S2Df
gui_resolution(void);

Return

Resolution.


gui_mouse_pos ()

Returns the position of the mouse cursor.

V2Df
gui_mouse_pos(void);

Return

Position.


gui_update ()

Refreshes all application windows, after a theme change.

void
gui_update(void);

Remarks

Normally it is not necessary to call this method. It is called automatically from osapp.


gui_OnThemeChanged ()

Set a handler to detect the change of the visual theme of the windows environment.

void
gui_OnThemeChanged(Listener *listener);
listener

The event handler.


gui_update_transitions ()

Update the automatic animations of the interface.

void
gui_update_transitions(const real64_t prtime,
                       const real64_t crtime);
prtime

Time of the previous instant.

crtime

Time of the current instant.

Remarks

Normally it is not necessary to call this method. It is called automatically from osapp.


gui_OnNotification ()

Sets up a handler to receive notifications from gui.

void
gui_OnNotification(Listener *listener);
listener

The event handler.

Remarks

See gui_notif_t.


evbind_object ()

Gets the object linked to a layout within a callback function.

type*
evbind_object(Event *e,
              type);
e

The event.

type

The object type.

Return

The object.

Remarks

See Notifications and calculated fields.


evbind_modify ()

Checks, inside a callback function, if the object's field has been modified.

bool_t
evbind_modify(Event *e,
              type,
              mtype,
              mname);
e

The event.

type

The object type.

mtype

The type of the field to check.

mname

The name of the field to check.

Return

TRUE if the field has been modified.

Remarks

See Notifications and calculated fields.

❮ Back
Next ❯