Navigation C API Pages Python bindings Applications

Widgets login window

This is a simple example widget application that renders a login like dialog. The layout is loaded from a JSON file and there are two different example layouts that can be loaded and will change the application look without any changes to the C source code.

//SPDX-License-Identifier: LGPL-2.0-or-later

/*

   Copyright (c) 2014-2020 Cyril Hrubis <metan@ucw.cz>

 */

#include <widgets/gp_widgets.h>

static void *uids;

int login_callback(gp_widget_event *ev)
{
        if (ev->type != GP_WIDGET_EVENT_ACTION)
                return 0;

        gp_widget *pass = gp_widget_by_uid(uids, "pass", GP_WIDGET_TEXTBOX);
        gp_widget *uname = gp_widget_by_uid(uids, "uname", GP_WIDGET_TEXTBOX);

        if (uname)
                printf("Username: '%s'\n", uname->tbox->buf);

        if (pass)
                printf("Password: '%s'\n", pass->tbox->buf);

        return 0;
}

int cancel_callback(gp_widget_event *ev)
{
        if (ev->type != GP_WIDGET_EVENT_ACTION)
                return 0;

        exit(0);
}

int show_password(gp_widget_event *ev)
{
        gp_widget *pass = gp_widget_by_uid(uids, "pass", GP_WIDGET_TEXTBOX);

        if (ev->self->b->val)
                pass->tbox->hidden = 0;
        else
                pass->tbox->hidden = 1;

        gp_widget_redraw(pass);

        return 0;
}

int main(int argc, char *argv[])
{
        const char *layout_path = "login_example_1.json";

        gp_widgets_getopt(&argc, &argv);

        if (argv[0])
                layout_path = "login_example_2.json";

        gp_widget *layout = gp_widget_layout_json(layout_path, &uids);
        if (!layout)
                return 0;

        gp_widgets_main_loop(layout, "Login!", NULL, 0, NULL);

        return 0;
}
{
  "rows": 3,
  "border": 2,
  "widgets": [
  {
   "type": "label",
   "text": "Enter your login information."
  },
  {
   "cols": 2,
   "rows": 3,
   "border": "vert",
   "widgets": [
    {
      "type": "label",
      "text": "Username:",
      "halign": "right"
    },
    {
      "type": "label",
      "text": "Password:",
      "halign": "right"
    },
    {
    },
    {
      "type": "textbox",
      "size": 10,
      "uid": "uname",
      "on_event": "login_callback"
    },
    {
      "type": "textbox",
      "size": 10,
      "hidden": true,
      "uid": "pass",
      "on_event": "login_callback"
    },
    {
     "type": "checkbox",
     "label": "Show password",
     "halign": "left",
     "on_event": "show_password"
    }
   ]
  },
  {
   "cols": 2,
   "border": "none",
   "halign": "right",
   "widgets": [
    {
      "type": "button",
      "label": "Ok",
      "on_event": "login_callback"
    },
    {
      "type": "button",
      "label": "Cancel",
      "on_event": "cancel_callback"
    }
   ]
  }
 ]
}
Login example 1
{
  "rows": 3,
  "align": "fill",
  "widgets": [
  {
   "type": "label",
   "text": "Please log in."
  },
  {
   "cols": 2,
   "rows": 2,
   "widgets": [
     {
       "type": "label",
       "text": "Username:",
       "halign": "right"
     },
     {
       "type": "label",
       "text": "Password:",
       "halign": "right"
     },
     {
       "type": "textbox",
       "text": "admin",
       "size": 10,
       "uid": "uname",
       "on_event": "login_callback"
     },
     {
       "type": "textbox",
       "size": 10,
       "hidden": true,
       "uid": "pass",
       "on_event": "login_callback"
     }
   ]
  },
  {
    "type": "button",
    "label": "Ok",
    "on_event": "login_callback"
  }
 ]
}
Login example 2