User Interface (UI) Construction with Glade

only for RuBoard - do not distribute or recompile

To begin the build process, set the project options after launching Glade. Set the project directory, and enter the project name of ww_comm (for worldwide commissions ). Disable Gnome and gettext support, as you did for the SESI project.

Create a new form and name it frm_login. For its Title property, enter Commissions Login. Drop in a four-row vbox named vbox_login, and then insert lbl_title and lbl_messages, as shown in Figure 8.2, setting the text for both as shown in Figure 8.1. Give lbl_title a bit of visual separation by setting itsY Pad property to 5. For the rest of the construction of frm_login, have Figures 8.1 and 8.2 available for quick reference.

Drop in frame_login and frame_change_password to their correct locations. Set their Label properties as shown in Figure 8.1. The frame widgets appearance improves if they are given a bit of padding around the edges, so set their Border Width property to 5. Drop in tbl_login and tbl_change_password. Then drop in the four remaining label widgets for this form (lbl_name, lbl_password, lbl_new_password, and lbl_new_password_again) and set their properties. Do the same with the four respective entry widgets. For the entry widgets, the X Fill properties can be set to No. Set the Has Focus property for entry_name to Yes. Finally, drop in cmd_login and cmd_change_password to the bottom rows of their respective parent tables. Set their Col Span properties to 2 so they take up the entire bottom row of their table. Also, set their Y Expand properties to Yes so they will be centered vertically.

Set the Text Visible property to No for entry_password, entry_new_password, and entry_new_password_again so the user s password information will not be visible during entry. Set the Border Width property of cmd_login and cmd_change_password to 5 to separate them visually from the surrounding widgets.

At this point, if you Save and Build the project, frm_main will be the only form created and displayed when the project runs, which is the desired behavior. Figure 9.1 shows frm_login after compiling and launching the application as built so far.

Figure 9.1. frm_login for the Worldwide Commissions Application.

Building frm_login

For frm_login, only three events should be taken into consideration: the clicked event for cmd_login, the clicked event for cmd_change_password, and the delete event of the form (in other words, the user presses the X or Close button in the upper-right corner). In this case, it has to be assumed that the user has decided not to log in to the commish database at all. So exit the application.

In the Signals tab of the properties window, select the clicked signal for the command buttons and the delete event for the window. (For detailed instructions, refer to the example in Chapter 7, Construction of the SESI Order Entry Application. )

Create a new window named frm_table_display and for the Title property enter Commissions Database - Table View, as shown in Figure 8.3. Drop in the first vpaned widget, vpaned_table_top, and then drop another one, vpaned_table_bottom, into the bottom half of vpaned_table_top. Increase the Gutter Size property of both to 10 and deselect the Position check box for both vpaned widgets. Put vbox_commissions into the bottom half of vpaned_table_bottom. Place hbox_header and hbox_footer in place, with three and five columns , respectively; give their child widgets a bit of visual separation by setting their Border Width and Spacing properties to 5. Drop the statusbar into the bottom of vbox_commissions.

Into hbox_header, place lbl_table_list, cbo_tables, and cmd_process, and set their properties according to Figures 8.3 and 8.4. For cbo_tables, set the Value in List property to Yes, and the OK if Empty property to No. Set both the Expand and Fill properties for cbo_tables to No. For the entry child widget of cbo_tables, which is named combo-entry1 on my system, change the name to combo-entry_table. For cmd_process, set the Visible property to No because that widget will be available to only one of the application s users.

Select a CList widget from the palette and drop it into its proper place in frm_table_display. Because the CList widget is actually a CList widget contained in a Scrolledwindow widget (and it turns out the scrolledwindow widget is the one of interest later), name the widgets clist_table and scrolledwindow_table. Beyond that, accept the defaults for those widgets.

Into hbox_footer, drop the five widgets, as shown in Figure 8.4. Into the Items property of cbo_sort_type, add Ascending and Descending, set the Value in List property to Yes, and set the OK If Empty property to No.

Now set the signals for frm_display_table. Get the changed and activate events on combo-entry_table, and the clicked event for all of the command buttons. Also, get the resize event for the window widget: the size_request event. Select the delete event for the form also.

Building frm_commissions

Moving on to frm_commissions, create a new window widget from the Palette. Set its name to frm_commissions and its title according to Figure 8.5. Drop in vpaned_ processing and vbox_processing, changing the names accordingly . Set the Gutter Size of vpaned_processing to 10. Put table_10_by_3 in the top part of vpaned_processing and set its Name property. Set both the Row Spacing and Column Spacing properties to 5. Create and set the three labels in the leftmost column of tbl_10_by_3, and then create the 10 command buttons in the center column. Set the names and visible text portions of these widgets according to Figures 8.5, 8.6, and 8.7. For the 10 command buttons in the middle column, set their X Fill properties to Yes. To finish table_10_by_3, create the label widgets that make up the third column, also according to Figure 8.7.

Add hbox_add_delete to the top row of vbox_processing. Set the Value In List property to Yes and the OK If Empty property to No for cbo_table; set both the Border Width and Spacing properties to 5. Create and place lbl_table and cbo_table. Here you will deviate slightly from the design in Figure 8.6. Before adding cmd_add, insert a frame widget and name it frame_add with its text set to Add. Then add cmd_add_row as shown in Figure 8.6. The frame widget gives cmd_add the same vertical size as cmd_delete_row, rather than making cmd_add_row taller than cmd_delete_row, which would make the layout of the buttons look disjointed . Set the Fill and Expand properties of cbo_table to No. Get a frame object from the Palette and drop it into the right space of hbox_add_delete; this is frame_delete_group. Into it, place hbox_delete with two columns. As with the other hbox widgets, set its Border Width and Spacing to 5. Add cmd_delete and spinbutton_delete_row.

Add frame_update_group, as well as hbox_update. For hbox_update, set the Border Width and Spacing to 5. Add cmd_update, lbl_line_number, and spinbutton_update_line. For both spinbutton_delete_row and spinbutton_update_line, set the Numeric property to Yes, the Min to 1, and the Max to an arbitrarily high number.This example uses two million.

Add in lbl_column, entry_column_name, lbl_to, and entry_new_value to fill out hbox_update. Add statusbar_processing to the bottom, as shown in Figure 8.6.

Figure 9.2 shows Glade with all three of the forms open .

Figure 9.2. The Worldwide Commissions application you re builing with Glade.

Finally, specify the signals for the widgets in frm_commissions. Set the callbacks for all the clicked signals on the command button widgets, as well as the delete event of the form.

Rather than go into a lengthy discussion on building the interface with Glade as we did in Chapter 7, this discussion assumes the reader is familiar with the process of building the application in that manner. Download the code from the book s companion Web site (www.newriders.com) and review Figures 9.3, 9.4, and 9.5. Figure 9.3 shows the widget tree for frm_login, and Figure 9.4 shows the widget tree for frm_table_display. Figure 9.5 shows the widget tree for frm_commissions split over two windows . From that, you should be able to figure out the structure and build process for the Worldwide Commissions application in this chapter.

Figure 9.3. The widget tree for frm_login.

Figure 9.4. The widget tree for frm_table_display.

Figure 9.5. The widget tree for frm_commissions.

only for RuBoard - do not distribute or recompile