Ximba Radio: Developing a GTK+/Glade GUI to XM Satellite Radio

They say Glade can make desktop application prototyping a quick and painless process. To scratch my own itch with XM Satellite Radio on my PC, I decided to see exactly how fast and painless.
UI Design with Glade

Ximba Radio required two primary windows, the Main Window and the Preferences Dialog, and a number of secondary pop-up windows. The Main Window's button bar was created with Glade's toolbar widget, and the buttons were added to that manually. GTK+ buttons can have text or images. Glade allows a choice of application images, stock buttons or stock icons. Stock buttons use the same icons as stock icons except that tooltips are not available. Because of this, I suggest using stock icons and leaving the stock button field blank.

Figure 3. Glade's toolbar widget and the properties used to set icons in buttons inside a toolbar.

Each button in the toolbar has a single callback function attached to the click signal. The callback function can have any name and, if desired, be passed the name of the widget itself as an argument. For callbacks attached to click signals, the latter is not necessary. In callbacks attached to realize signals, which I discuss in a moment, the widget name is passed to the function.

Figure 4. Buttons in the toolbar have a single callback attached to the clicked signal.

I added three GtkImage widgets in the Main Window. The first is a State icon positioned to the right of the Host name field. I set this to the Remove icon—Glade offers many stock icons—to show no connection to the dæmon. To show a connected state I used the Apply icon. In order to change the icon at runtime, I saved the widget ID of this GtkImage in a realize callback. During normal use, this icon also can be changed to the Off stock icon in order to show a connected but muted state. I examine the code for handling these changes in the next section.

Figure 5. The State icon needs a realize callback to get the name of the widget so we can update it at runtime.

The Favorites buttons are plus signs. Glade and GTK+ call these Add icons. These buttons have a single callback attached to their click signal. The callback adds the current artist or channel to the appropriate list of favorites. The menu bar at the top of the main window was created using Glade's built-in Menu Editor. The editor has many options, but for this project I used only the Label, Name and Handler options, the latter to define the function to be called when the menu item was selected.

Figure 6. Glade's Menu Editor offers many options, but only Label, Name and Handler are necessary for our prototype.

A notebook widget provides access to the complete channel listings, as well as category, favorite and session-specific listings. All of these are provided through the CList widget. Glade fully supports this widget even though GTK+ prefers that new code use the newer and more complex Tree and List widget. I cover this controversial decision in more detail a little later.

Figure 7. Glade fully supports the CList widget, which is preferred over the Tree and List widget for simple list management.

Coding Process

Glade generates empty functions for callbacks, often referred to as stub functions. The stub functions make it possible to follow a simple process in prototype development: design the UI, generate code, write callbacks, test and repeat. I left most of the callback coding—aside from menu quit functions—until after the UI was complete. Later, I went back and filled in the callbacks. This methodology allowed me to experiment with the layout of the application before having to get involved too deeply with what that layout actually would do. Again, this is part of the whole goal of separating user-interface code from application code. By keeping these two pieces separate, I allow future changes to the UI to happen without serious impact on the core code. Callbacks are the glue between the UI and the application code because they map UI events to code that performs some action.

Callbacks have varying interfaces. Button click signals need callbacks that take the button widget ID and user data as input arguments. CList callbacks for the select-row signal, sent when a row is clicked on, get five arguments. Letting Glade generate them makes it possible to learn these varying interfaces quickly. In fact, because the API for callbacks is not well documented—at least documentation is not easy to find—letting Glade create these is the best way to learn callback syntax.

Filling in the callback code can be done directly in callbacks.c, but this C module will be dropped in the future when I move to libGlade. Instead, I usually pass parameters straight through to a similar function in utils.c that does the actual work. Despite this general rule, one important bit of code was put in callbacks.c: assigning widget IDs to global variables. Listing 1 shows how a global variable is used in a callback to save the ID of the Preferences dialog.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

XM Satellite Radio

medium readings's picture

In a little under four years, his show went from 47 stations to more than 200 (it's now at 350) and XM satellite radio. In 2006, when he began a TV gig on ...

Re: Ximba Radio: Developing a GTK+/Glade GUI to XM Satellite Rad

Anonymous's picture

Is it possible to download the sourcecode for Ximba? I'm a current subscriber to XM Radio for my car and would like to have this for my PC in the future. Thanks!!

Re: Ximba Radio: Developing a GTK+/Glade GUI to XM Satellite Rad

Anonymous's picture

Try going to the Authors website
http://graphics-muse.com/

Usability and design of Gnome Applications

Anonymous's picture

some suggestions on how to make your application fit in better with other Gnome applications.

a menubar with only two top level menus is a waste of prime real estate

if at all possible add in some more menus like perhaps
an edit menu with undo, redo, cut, copy, paste, select all, preferences
a view menu, with ...
a Radio menu with ...

a row of buttons! you really should use a real toolbar.
not only will it look better but it will allow users to choose to have text labels or not

the Ximba Radio graphic is nice but wouldn't it be better to save it for the About Dialog rather (with useful version and author information) than having such loud branding?

good luck

- Alan

White Paper
Linux Management with Red Hat Satellite: Measuring Business Impact and ROI

Linux has become a key foundation for supporting today's rapidly growing IT environments. Linux is being used to deploy business applications and databases, trading on its reputation as a low-cost operating environment. For many IT organizations, Linux is a mainstay for deploying Web servers and has evolved from handling basic file, print, and utility workloads to running mission-critical applications and databases, physically, virtually, and in the cloud. As Linux grows in importance in terms of value to the business, managing Linux environments to high standards of service quality — availability, security, and performance — becomes an essential requirement for business success.

Learn More

Sponsored by Red Hat

White Paper
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState