Howto: Rapid GUI creation with FreeBasic and glade/Gtk

by Klaus Siebke, www.siebke.com Preface For a longer time I was looking for a programming environment that offers both: easy to use and platform independent. Some weeks ago I found FreeBasic to fulfill these requirements perfectly. ust code your program once and run it in native mode under !S "indows and #inu$ %and if you like you can still run it under &'S(. )dditionally FreeBasic in combination with glade*+tk offers a simple framework to create identical +,I applications for "indows and for #inu$. -he only lack so far is a tool to simplify the +,I program creation with glade*+tk. So I wrote a small utility named .glade2bas. which will help you to reali/e your own +,I application with FreeBasic and glade*+tk. What you need 1. First of all you need the FreeBasic compiler for your preferred OS which can be downloaded from: http://www.freebasic.net/. . !hen you need to install "tk. #f you are usin$ %inu& it's already included in your distribution (at least in )buntu/Kubuntu or openSuS*+. ,ust $o to your packa$e mana$er (apt or yast+ and select it. #f you are usin$ -S .indows, download the latest binary from the official ser/er: ftp://ftp.$tk.or$/pub/$tk/ and install it. 0. !he ne&t component you need is $lade, the user interface builder. For %inu& users it's the same as for "tk: install the packa$e with your packa$e mana$er 1 that's it. )sers workin$ with -S .indows should $o to http://$ladewin0 .sourcefor$e.net/, download the latest /ersion of $lade and install it. 2. 3n editor to code your application. # would prefer "eany which supports FreeBasic in a /ery comfortable way. 4ou can compile and run your application 5out of the bo&5. "eany is a/ailable for -S .indows and %inu& and like all the abo/e software components it's free. 4ou can download "eany from http://$eany.u/ena.de/ . 6owe/er, in some %inu& distributions "eany is already included. #n this case make sure that the distribution's /ersion is 7.1 or hi$her (otherwise the FreeBasic support is not implemented+. 8. !he $lade bas utility to create a shell pro$ram out of the $lade file. 4ou can download the source of this utility from my pa$e www.siebke.com/freebasic/$lade bas.9ip. )n9ip the file in your FreeBasic source directory and compile it with :fbc ;s $ui $lade bas.bas:. A first application %et's start with a simple e&ample. %ike you probably know it from other pro$rammin$ lan$ua$es, it's a small 56ello .orld5 application. esigning the interface with glade !o desi$n the window(s+ you can either use $lade / or $lade /0 whate/er you prefer. Because it's the newer /ersion, # use $lade0 in the followin$ e&ample.

3fter startin$ $lade;0 you will $et this screen:

!o create a new window for your application, direct your mouse pointer to the 5<alette5 and choose the first icon under 5!ople/els5:

=lick on it and your first $lade/"tk window will be created:

>ow you ha/e to add a layout to the window. 4ou will find it in the 5<alette5 under 5=ontainers5:

3$ain, click on the icon and then into your window. !he window appearance will chan$e as follows:

>ow you are able to place some elements on the window. #n the 5<alette5 you will find a lot of wid$ets under 5=ontrol and ?isplay5. Select the 5OK button5 and the 5label5 wid$et by clickin$ first on the icon and then on your screen:

#f you like, you can now resi9e and arran$e the elements a little bit:

!o chan$e the te&t and the action of the elements click on the wid$et to be chan$ed and look at the 5<roperties5:

=han$e the te&t of the label from 5label5 to 56ello .orld@5 and the te&t of the OK button from 5button5 to 5OK5.

4our window should now look like this one:

%et's chan$e some properties (title, startup position and si9e+ of the window itself:

Finally you should define some actions (Asi$nals+ to react on in the FreeBasic pro$ram: 1. ?efine a si$nal to terminate the pro$ram when the window is deleted. "o to the properties and click on the 5Si$nals5 tab strip. !hen $o to line 5delete;e/entB and click in the 56andlerB column:

=lick here and enter an 5o5

!he name of the handler will automatically be completed:

<ress *nter to assi$n the handler name to the e/ent.

. ?efine a si$nal when the OK button is pressed =lick on the OK button wid$et on your screen. "o to the properties and click on the 5Si$nals5 tab strip (same procedure as with the si$nal abo/e 1 the handler name will be automatically completed when you key in 5o5 and press *nter afterwards+:

<lease sa/e your work now as file 5helloworld.$lade5 by pressin$ the sa/e button in the $lade main window:

For this simple e&ample that's all on the $lade desi$n side. 4ou can now close the application and run the utility $lade bas.

!on"ert glade to FreeBasic with glade#$as 3fter startin$ $lade bas the followin$ screen appears:

=lick on the open button ri$ht to the te&t field and select the file 5helloworld.$lade5.

>ow you can $enerate the FreeBasic shell pro$ram by clickin$ on the 5=on/ert5 button:

!he utility has created

files: helloworld.decl and helloworld.bas.

Add your logic to the application %ets ha/e a look at the $enerated source. Start "eany and open the file helloworld.bas:

!he $enerated pro$ram is already runable. 4ou can compile und run it. 6owe/er it will not react on the defined si$nals. So it makes sense to add some additional statements. On the top of the left side you can see the si$nals we defined in the $lade desi$n listed by "eany as 5functions5:

=lick on the first function 5onCbutton1Cclicked5 and the editor on the ri$ht will directly position to that function (or S)B in FreeBasic notation+:

>ow you can add a statement to react on the e/ent that is initiated when the OK button is pressed. ,ust key in: print :OK button pressed: below the comment bo&.

!he other S)B (onCwindow1CdeleteCe/ent+ shall terminate the pro$ram. So key in: $tkCmainCDuit(+ below that comment bo&. >ow your code should look this way:

!o%pile the application !o compile the pro$ram directly out of "eany please check the settin$s. "o to 5Build5 and then to 5Set #ncludes and 3r$uments5 in the menu:

-ake sure that the correct path to the FB= e&ecutable is specified 1 for -S .indows # had to chan$e it on my machine as follows:

For %inu& you can lea/e the "eany default /alues unchan$ed ...

... but you will ha/e to chan$e the !erminal strin$ in the properties:

Specify the path of your source codes here

3fter checkin$ the abo/e settin$s press the 5=ompile5 button on the tool bar and you will $et this messa$es in the status window:

3lternati/ely you can open a command shell and compile the pro$ram manually. Run the application .ithin "eany simply press the 5*&ecute5 button and the pro$ram starts:

!ry the OK button an see what happens in the command shell window:

>ow click on the 5&5 on the ri$ht corner of the window ...

... and the application finishes. 6ere's how it looks in %inu& (kubuntu+:

&u%%ary #n this lesson you learned how to write a simple $lade/"tk application with FreeBasic. For more information about "tk /isit http://www.$tk.or$/. 6int: the $enerated shell pro$ram and the utiltiy pro$ram are fully commented (in en$lish and $erman+ and can ser/e as e&amples for the $lade/"tk ")# pro$rammin$ with FreeBasic.

'rou$leshooting #f you are runnin$ into problems (especially on -S .indows+ check the followin$:

?o you ha/e the latest "tk /ersion installed on your systemE !here's a trick: the latest "tk /ersion is always part of "#-<. So dowload "#-< from http://www.$imp.or$/ and install it. 3fterwards copy (with replace+ the directory =:F<ro$ram FilesF"#-<; .7Fbin into your "tk path, which should be =:F<ro$ram FilesF=ommon FilesF"!KF .7Fbin. #s the lib$lade; .7;7.dll correctly installed (either in the application directory or in the FwindowsFsystem0 directory+E

?isclaimer: -icrosoft (-S+ .indows and the .indows lo$o are trademarks or re$istered trademarks of -icrosoft =orporation in the )nited States and/or other countries. 3ll other product and company names mentioned may be trademarks or re$istered trademarks of their owners.