SLIK (SimpLIstic sKin interface -- see the Resources section later in this article for a link) provides a great tool for building advanced user interfaces in Linux or Unix systems. A part of the GQmpeg toolset, it is written using the GTK toolkit, a powerful set of widgets for graphics used by such applications as the GIMP and other GNOME-based apps.

By itself, SLIK will compile into a sort of "Hello World" application that demonstrates skin features such as widgets, skin editors, skin spec files, and skin browsers. The purpose of this article is to show you an even simpler approach by providing a modified version of the SLIK source designed to compile as a shared object that could be used by clients. This article also provides a minimal client that uses this shared object, thus shielding developers from the complexity of the skin logic. To download the source code described in this article, see the link in the Resources.

Shared objects 101

Before we can use our skin code, we must understand how to build shared objects in Unix/Linux.

Shared objects are analogous to Windows DLLs (Dynamic Link Libraries). They allow developers to share their code and simplify the complexity of building applications. Compiling a shared object is very similar to compiling a regular executable for Unix/Linux, but some extra rules must be followed.

Position-independent code (PIC)

For a C program to be compiled into a shared object, the C compiler must create "position-independent code," a requirement for shared objects. A normal compilation of an executable can be simplified by the following commands:

$ gcc -c foo.c
$ gcc -o foo_exe foo.o

The first line takes the source code of our program, foo.c, and creates an object file, foo.o. The second line takes the object file and creates an executable. If we wish to build our program as a shared object, we should do the following:

$ gcc -fpic -c foo.c
$ gcc -shared -o libfoo.so foo.o

Note the flag, -fpic, used in the first step. This tells the compiler to generate position-independent code. The second step (linking) tells the compiler to take the object file and create a shared object. By convention, shared object files begin with "lib" and use the extension "so," thus the option: -o libfoo.so.

Now that we have our shared object, we can write a client to use any of the functions defined in the library:

$ gcc -c -Ifoo_includes client.c
$ gcc -o client_exe client.o -L. -lfoo

If the library happens to use header files, those paths must be included using the -I option. To link the executable, the name of the shared object must be used (-lfoo). The compiler assumes the prefix "lib" and the postfix ".so". Use the -L option to add paths to custom library locations. Note: libfoo.so must be in the current working directory for the link step to work.

For more information about shared objects, see the Program Library HOWTO listed in Resources.

Back to top

Compilation of SLIK as a shared object

This article provides a modified version of the SLIK source to compile as a shared object. (Make files are provided for Linux and Windows.) The code has been compiled on Red Hat Linux Workstation 8.x and 9.x, and SUSE LINUX WKS 8.x, as well as Windows 2000/XP.

This version uses pkg-config to detect system libraries for many Unix flavors. Before you try to compile this project, you must have installed the following requirements (also see the README file on the project source).

• GTK+-2.x (note that 1.0.x will not work!)
• pkg-config

For other Unix flavors, you will have to edit the Makefile to match the paths of the GTK/GDK libraries on your system, or if you are an auto-conf guru, enable auto-conf/auto-make on the project. Follow the README file on the source distribution for compilation instructions.

Back to top

A SLIK skin-based C-client

To start our skin client, we must first initialize the GTK environment, create a main window, and add widgets to it, as in the following code snippets. The full source is included in the downloads package.

#include "demo_skin.h"
/* skin includes */
#include "ui2_editor.h"
#include "ui2_main.h"
#include "ui2_util.h"
#include "ui_fileops.h"
#include "ui_tabcomp.h"

#include "ui2_button.h"
#include "ui2_dial.h"
#include "ui2_item.h"
#include "ui2_list.h"
#include "ui2_meter.h"
#include "ui2_number.h"
#include "ui2_overlay.h"
#include "ui2_scope.h"
#include "ui2_slider.h"
#include "ui2_spectrum.h"
#include "ui2_text.h"

/* main window widgets */
UIData 		*main_window = NULL;
UIData *window_main_new(const gchar *skin_path);

/* -- extra subs go here (see source) -- */

/*
 *--------------------------------------------------------------------
 * main routine
 *--------------------------------------------------------------------
 */

int main (int argc, char *argv[])
{
	gchar *buf;
	gint tc = 0;
	gchar *startup_skin_file = NULL; /* will load def skin if NULL */

  // setup dbg mode
  debug_mode = FALSE;

  	/*
	 * the gtk inits are moved after the command line parser
	 * (for speed with command line options, or errors thereof)
	 */
	gtk_init (&argc, &argv);

	gdk_rgb_init();

	/* push the correct color depths to gtk, (for 8-bit psuedo color
         * displays)
	 * they should be popped, too, I guess...
	 */
	gtk_widget_push_visual(gdk_rgb_get_visual());
	gtk_widget_push_colormap(gdk_rgb_get_cmap());

	/* for this hello world, allow all widgets in editor by
	 * specifically registering each one (usually they are reg'd when
         * needed)
	 */

	button_type_init();
	dial_type_init();
	item_type_init();
	list_type_init();
	meter_type_init();
	number_type_init();
	overlay_type_init();
	scope_type_init();
	slider_type_init();
	spectrum_type_init();
	text_type_init();

  /* register base dirs to skin editor */
	buf = g_strconcat(homedir(), "/", "", NULL);
	ui_edit_add_skin_resource(buf);
	g_free(buf);

	/* set up main window */
	main_window = window_main_new(startup_skin_file);
	g_free(startup_skin_file);
	startup_skin_file = NULL;

	gtk_widget_show(main_window->window);

	/* start main loop */
	gtk_main ();
	return 0;

}

Back to top

Initializing the skin layer

It is time to initialize the "skin layer" of our application. For this task, we use the function window_main_new called with the main subroutine. The job of this function is to initialize the skin data structures and setup "callbacks" or events that fire on events such as window closing, mouse events, and so on. The following code is included in window.c, which you can download as part of the tarred package listed in Resources.

UIData *window_main_new(const gchar *skin_path)
{
	UIData *ui;

	/* skin initialization */
	ui = ui_new("SKIN Demo", "main", wm_decorations, "SLIK test");
	ui_set_icon(ui, ui_slik_logo(), NULL);

	/* skin callback: used to skin widgets in the main window */
	ui_set_skin_callback(ui, skin_default_cb, NULL);

	/* signals: fire when window closed or mouse events */
	gtk_signal_connect(GTK_OBJECT (ui->window), "delete_event",
			   GTK_SIGNAL_FUNC(window_delete_cb), ui);

	/* fires on mouse events */
	ui_set_mouse_callback(ui, window_main_mouse_cb, NULL);

	/* register the right stuff */
	display_register_widgets(ui);

	printf("Loading built-in Skin \n");
	ui_skin_load(ui, NULL, skin_mode_key);

	return ui;
}

Back to top

Widget initialization

Another important function, called from the previous snippet, is the widget initialization callback. Its task is to initialize the widgets in our sample application. We will define four buttons:

• Exit: quits the application
• Change skin: fires the SLIK built-in change skin dialog to switch skins
• Skin editor: fires the SLIK built-in skin editor dialog
• Play: A sample button

We will also define four labels for the above buttons, and a small logo on the left side. This code can be found in the tarfile, which accompanies this article, in the file display.c.

/* Widget init callback */
SkinData *skin_default_cb(UIData *ui, const gchar *key, gpointer data)
{
	SkinData *skin;

	skin = skin_new();

	/* skin background */
	skin->real_overlay =
	 util_size_pixbuf(gdk_pixbuf_new_from_xpm_data((const char
 	 **)back_xpm), TRUE);

	skin->width = gdk_pixbuf_get_width(skin->real_overlay);
	skin->height = gdk_pixbuf_get_height(skin->real_overlay);

	/* 4 skin buttons: */
	/* 1) exit, 2) change skin (fires change skin dialog) */
	/* 3) skin editor (fires editor dlg), 4) Play (sample btn)
	button_register_to_skin("exit", (gchar **)btn_exit_xpm, 109, 34,
				TRUE, FALSE, NULL, skin, NULL);
	button_register_to_skin("change_skin",
	 (gchar **)btn_config_xpm, 109, 70,
				TRUE, FALSE, NULL, skin, NULL);
	button_register_to_skin("skin_editor",
	 (gchar **)btn_config_xpm, 109, 88,
				TRUE, FALSE, NULL, skin, NULL);
	button_register_to_skin("play", (gchar **)btn_play_xpm, 48, 128,
				TRUE, TRUE, NULL, skin, NULL);

	/* 4 labels for the prev buttons */
	text_register_to_skin("hello", (gchar **)letters_xpm, 31, 110,
			      84, FALSE, 0, FALSE, skin, NULL);

	text_register_to_skin("exit", (gchar **)letters_xpm, 52, 34,
			      56, FALSE, 0, FALSE, skin, NULL);

	text_register_to_skin("change", (gchar **)letters_xpm, 52, 70,
			      56, FALSE, 0, FALSE, skin, NULL);
	text_register_to_skin("editor", (gchar **)letters_xpm, 52, 88,
			      56, FALSE, 0, FALSE, skin, NULL);

	/* A Small logo (pixmap) to display on the left side) */
	item_register_to_skin("SKIN", (gchar **)slik_xpm, 4, 34,
			      1, skin, NULL);

	/* this is merely so that the skin editor has sane values for these */
	skin->width_def = skin->width_min = skin->width_max = skin->width;
	skin->height_def = skin->height_min = skin->height_max = skin->height;

	return skin;
}

Back to top

Displaying widgets

The final step in our client application is to display the actual widgets! For this we use a set of register functions for each type of widget: buttons, labels, and so on. Each widget must be assigned a unique name or key used by SLIK to identify a specific widget. Along with the widget id, we can register callbacks or events that fire when events such as a button click occurs. The following snippet demonstrates this technique. The full source can be seen in display.c in the source for the skin client provided in Resources.

/* Includes go here: see display.c */

/* play button call backs */
static gint button_play_status_cb(ButtonData *button, const gchar *key,
 gpointer data)
{
	return TRUE;
}

/* fires when play btn is clicked */
static void button_play_click_cb(ButtonData *button, const gchar *key,
 gpointer data)
{
	printf("play pressed\n");
}

/* exit btn CB: fires when the exit btn is clicked */
static void button_exit_click_cb(ButtonData *button, const gchar *key,
 gpointer data)
{
	app_exit();
}


/* ...see display.c */

/* register and display widgets */
void display_register_widgets(UIData *ui)
{
	/* play btn */
	button_register_key("play", ui,
			    button_play_status_cb, NULL,
			    button_play_click_cb, NULL,
			    NULL, NULL,
			    NULL, NULL);
	/* exit btn */
	button_register_key("exit", ui,
                            NULL, NULL,
                            button_exit_click_cb, NULL,
                            NULL, NULL,
                            NULL, NULL);

	/* ...see display.c */

	/* label widgets... */
	text_register_key("hello", ui, text_hello_status_cb, NULL);
	text_register_key("exit", ui, text_exit_status_cb, NULL);

	/* ...see display.c */

}

Back to top

Skin SPEC file

Widgets are loaded according to a set of rules defined in a skin spec file. By default, the name of the file is "skindata." This file contains the names of the application widgets along with attributes such as images, XY coordinates, and so on. Here is a sample taken from one of the demo skins provided in this article:

[main]
image = main-complete.png
transparent = FALSE
border = TRUE
border_left = 116
border_right = 63
#
# ...
#
[button_exit]
image = btn-12-exit.png
x = 252
y = 2
prelight = TRUE

Back to top

Putting it all together

Now it is time to compile and run our sample skin application. The code included with this article provides Make files ready to use for Red Hat Linux Workstation 8.x /9.x and SUSE LINUX 8.x Workstation. No auto-conf or auto-make capabilities are provided at this point.

A set of "demo skins" are provided also. Feel free to explore this sample and its source code. SLIK uses a skin spec file when changing skins. This file defines what widgets will be displayed, their positions, and the image files to use for a given widget.

For a full description of the skin specs, see the SKIN_SPEC file included in any of the projects of this article, or see the SLIK home page (listed in Resources).

Here are some screenshots of this client built-in skin and some demo skins included in the project.

Back to top

Compilation notes

The source code included in this article provides two folders: src_gtk2 and client. The first folder is a modified version of the SLIK-0.13.0 source to compile as a shared object. Both projects provide Make files for RHL 8.x/9.x, SUSE 8.x Workstation and Windows; there are no auto-conf/auto-make capabilities at this time. To compile in other Unix flavors, you should edit the Make files and update the paths to the header files for the required GTK+-.2.x and pkg-config software (see Resources for links to those).

Make sure these development packages are installed first, before attempting to compile. See the README file included in the source.

Back to top

Conclusion

As computing power increases over time, so do the needs of users for advanced user interfaces. Traditional user interfaces are evolving from crude rectangular windows with buttons and menus to full-fledged real-world virtual "gadgets." It is only a matter of time until rectangular-window based application become a thing of the past. Linux is leading the pack as the open source platform of choice for advanced user interface design.

The techniques demonstrated in this article show the advantages of using shared objects for User Interface design: ease of maintenance, simplicity, and elegance. This technique will help you to get started on writing advanced open source applications.

Resources

• Download the source code described in this article.
  
  
• SLIK, a part of the GQmpeg project, is a skeleton application that includes all of the skin code and utility functions. Vladimir provides a modified version in his tarfile; you can also download the original from the GQmpeg downloads page.
  
  
• The Program Library HOWTO has more information on how to build shared objects in Unix/Linux.
  
  
• pkg-config and GTK+-2.x are prerequisites to running SLIK on Linux and Unix (note that the GTK version must be 2.0 or higher; 1.0 will not work). For Windows, you'll need GTK+ 2.x for Windows and the GTK 2 development libraries, as well as the GNU mingw32 tools (make, gcc, and so on).
  
  
• Get help and find more information on the GQmpeg mailing lists.
  
  
• SLIK and GQmpeg are licensed under the GNU General Public License.
  
  
• The GIMP and GNOME are also powered by the GIMP Toolkit (GTK+).
  
  
• GTK is also available for Windows.
  
  
• The IBM Ease of Use resource page "What is a user interface?" includes links to more information about computer interaction and UI evolution.
  
  
• "Web application architecture and the user experience" (developerWorks, September 2003) covers some UI design basics.
  
  
• The Browser-based Application (BAT) Toolkit from alphaWorks is a Web presentation framework for creating a professional, consistent user interface.
  
  
• "Build a better GUI" (developerWorks, October 2001) discusses the use of Java layout managers for better overall GUI design.
  
  
• Read how simple "GUI building with GTK+" can really be (developerWorks, July 1999).
  
  
• IBM Research is looking Toward computers that recognize and respond to user emotion; of course, in order to do that they will require Audio-Visual Speech Processing as their human-computer interface (HCI).
  
  
• What else is in store for the non-rectangular-window-based GUIs of the future? Check out the articles listed in the IBM Ease of Use page on Exploratory user interface design for more glimpses at the future.
  
  
• Find more resources for Linux developers in the Linux section of developerWorks.
  
  

About the author

Rate this article

Comments

Back to top

Table of contents

• Shared objects 101
• Compilation of SLIK as a shared object
• A SLIK skin-based C-client
• Initializing the skin layer
• Widget initialization
• Displaying widgets
• Skin SPEC file
• Putting it all together
• Compilation notes
• Conclusion
• Resources
• About the author
• Comments

Next steps from IBM

Try the XL C/C++ compilers, downloadable for free.

---

• Try: XL C/C++ for AIX
• Community: Go to Rational C/C++ cafe to join the conversation.
• Buy: XL C/C++ for AIX

Dig deeper into Linux on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

Get started with the cloud-based trial and pattern development kit.

Special offers