Desingning the Interface

After the wizard is complete, Anjuta takes some time to create the directory structure of your project, to run the configuration scripts and to create the project files etc. You can view the processes in the lower half of the Anjuta environment. After this is complete, the left half of your screen shows the Project tree which contain your source files, documentation files and pixmap files.

This is the time to start GLADE and design the GUI. So go to ->View->Edit Application GUIs Edit the GUI. Now GLADE is executed. You can ideally see three windows: 1) the main Glade window, 2) Properties window, and 3) Palette window.

Figure 1. Glade windows

Since we are not really designing a serious killer app, therefore we can make do with a simple GTK Window instead of the pre-set Gnome app. So click at the first item in the Glade (main) window, i.e. click at hello_app and press Del (from the keyboard).

Now in the Palette window, click on the first icon, i.e. on a GtkWindow. This should create a blank window, which will serve our purpose, and this window will be the main window of our application. Click on window1, i.e. the new window, and in the Properties window, type Hello World! as the title. Now add a Vertical Box Container from the Palette to your newly created window1. Let the number of columns be two.

Figure 2. Palette icons

This divides the window into two equal vertical halves. Similarly, divide the upper and lower halver further into two equal horizontal divisions each by using Horizontal Box Containers with two columns each. Now the window should look something like this:

Figure 3. The interface

Now add two buttons into the two lower portions from the Palette. Select each of the buttons one by one and change their Name and Label properties as follows:

	Button on the Left: 
	 	Name: BT_OK 
	 
	 	Label: OK
	 
	Button on the Right: 
	 	Name: BT_EXIT
	 
	 	Label: 	Exit
	

In the upper half of your window, add a Label widget in the left portion and an Entry widget in the right. Name the Entry widget as ENTRY. Set the Label property of the Label widget to 'What's your name, sir?'.

Now select the two buttons one by one and using the Signals tab of the Properties window, connect them to the Clickedsignals. Use the callback function names as suggested by GLADE. Don't forget to click the Add button. This is actually a common mistake, which further results in a blank callbacks.c file. callbacks.c is the file where we would later add the code to these button though the Anjuta interface.

Although, the window doesn't look all that pretty, you can experiment a little by changing the Height and Width properties of the window1 and several properties of the horizontal and vertical boxes. (Remember these boxes can be selected easily by opening the Widget Tree from the View menu). Some are as follows:

After tweaking these properties, I got my window to look something like this:

Figure 4. The Final Interface

Once you are satisfied with the looks of it, click at Save and then at Build from the main Glade window. This updates the interface.c file in your Project's src directory with the changed interface. Click File - Exit to proceed back to the Anjuta environment to do some coding!