Techniki Glade Techniki Generating invoices with Glade Pablo Dall'Oglio Designing a GTK application interface by hand is not a very hard task and you may give your application a better peformance. However, it takes a lot of time, that as a professional developer you may be lacking of. Therefore, a graphical tool becomes necessary... or these purposes, there's Glade, The Palette W SIECI a graphical tool built exactly to help Each Glade project starts with a Window. Fthe developers to design the inter- The component that represents the win- face of applications written in languages dow is GtkWindow and it's the first item of 1. http://glade.gnome.org that use GTK (C, Python, PHP or Perl). Glade's Palette (see Figure 2). After the – the home page of The sole purpose of the tool is making first click on the Windows component, the Glade project the interface building easier; it's not a code the first window comes up and then we 2. http://http://gladewin editor or IDE. can start using other widgets like GtkHBox 32.sourceforge.net/ Using Glade, we can easily create (horizontal box), GtkVBox (vertical box), – Glade for Windows windows, lists, buttons, boxes and organi- GtkFixed (allows absolute positions), 3. http:// ze them in a clear and simple way. At the GtkLabel (text label), GtkEntry (input bo- end, the interface schema will be saved in O autorze a file .glade, that is an XML file containing the visual structure of the interface. Pablo Dall'Oglio ([email protected]) The basics of Glade is the author of the first book about NA CD The Main window of Glade has the basic PHP-GTK in the world. He is also the author of Agata Report (http: options (Open and Save), the Project //www.agatareports.com), Tulip Editor Options and a list of windows containing (http://tulip.solis.coop.br), as well as the our projects. The Edit menu has Cut, Coordinator of GNUTeca project (http: Copy and Paste options, while the View //www.gnuteca.com), an open source software for library management. menu items allow to show or hide the pop- up windows (Palette, Properties, etc). See Figure 1. 2 www.phpsolmag.org PHP Solutions Nr 1/2006 PHP Solutions Nr 1/2006 www.phpsolmag.org 3 Techniki Glade Techniki Installation As a part of the GNOME environment, Glade should be present in the Linux distributions which contain GNOME. So, if you don't have it installed, search for the proper package in your distro first. If you won't find it there (or you would like to upgrade to the new version), get to the homepage of Glade (glade.gnome.org), download the sources and compile it in a standard way: ./configure make make install Also, the Glade package should contain the INSTALL file, which provides more deta- Figure 1. The Main window of Glade ils on some non-typical installations. In the Windows environment the things are very simple: just download Glade from http://gladewin32.sourceforge.net and install it. Requirements Glade needs GTK-2 installed. In order to use it with PHP, you will also need the PHP-GTK extension, which is available at the address of http://gtk.php.net. Furthermore, your PHP must be of the PHP5 branch. xes), GtkRadioButton, GtkCheckButton, putting a GtkVBox (Vertical Box) inside the GtkFrame, GtkImage, GtkComboBox, window first, and then placing a GtkHBox GtkToolBar, etc. (Horizontal Box) in the second row of the The components list is separeted Vertical Box. The said Horizontal Box will into pages (Basic, Additional and Depre- then contain a GtkLabel in its second co- cated). The Deprecated widgets nclude lumn and a GtkEntry in the fourth. the old Gtk1 widgets (GtkFileSelection, GtkCTree, GtkCList, and so on). The Properties Window The Properties window (see Figure 5) is The Widget Tree the place where you set the properties of The Widget Tree (View menu => Show the selected widget. Its content depends Widget Tree) is a very nice tool that shows on the widget you choose. Clicking on any a hierarchy tree of all widgets you're using widget on the screen causes this window in your application. Each widget is a node to display properties of the class of the in this tree (see Figure 3). The parent/child selected widget. relationship tells us, which widget is inside The Properties window has several another one. This feature is especially tabs. The first one, called Widget defines usefull to locate widgets, because many times the widget we want to change the properties of is not visible (as in the case of structural widgets like GtkHBox'es and GtkVBox'es). A simple right click on any widget in the tree allows you to select it. Then, you can go the the properties win- dow, which content changes according to the selected widget. The Project Window We put our widgets into the Project Win- dow. In the first window on the Figure 4 we have a GtkWindow with a GtkFixed component inside it. The GtkFixed com- ponent allows to put the components like buttons, labels, radiobuttons and check- buttons in absolute coordinates inside the window. In the second window on the same figure we used a different aproach, Figure 3. Widget Tree 2 www.phpsolmag.org PHP Solutions Nr 1/2006 PHPFigure Solutions 2. Glade's Nr 1/2006 Palette www.phpsolmag.org 3 Techniki Glade the basic properties of the selected widget. Listing 1. The Glade XML File The most important feature of each widget is its name, because it's the property we <?xml version="1.0" standalone="no"?> <!--*- mode: xml -*--> refer the widget by in the application. <!DOCTYPE glade-interface SYSTEM "http://glade.gnome.org/glade-2.0.dtd"> Other properties we can define in the <glade-interface> Properties window are, for example, a la- <widget class="GtkWindow" id="window1"> bel and align for a , a stock icon <property name="visible">True</property> GtkLabel <property name="title" translatable="yes">window1</property> and a label for a GtkButton, the maximal <property name="type">GTK_WINDOW_TOPLEVEL</property> length and the visibility of GtkEntry, and <property name="window_position">GTK_WIN_POS_NONE</property> so on. <property name="modal">False</property> The second Tab (Packing) shown on <property name="resizable">True</property> the Figure 6 depends on the way you pack <property name="destroy_with_parent">False</property> <property name="decorated">True</property> your widgets (in the image below, we have <property name="skip_taskbar_hint">False</property> two modes). When the widget is packed <property name="skip_pager_hint">False</property> inside a GtkFixed container, that allows <property name="type_hint">GDK_WINDOW_TYPE_HINT_NORMAL</property> absolute coordinates, it'll permit to chan- <property name="gravity">GDK_GRAVITY_NORTH_WEST</property> ge the widgets position (X and Y). When <property name="focus_on_map">True</property> <child> a widget is packed inside a GtkVBox or <widget class="GtkVBox" id="vbox1"> GtkHBox container, we'll be able to change <property name="visible">True</property> other properties like Expand (if the widget <property name="homogeneous">False</property> will expand within the container's limit) or <property name="spacing">0</property> Fill (if the widget fills all of the containers' <child> <placeholder/> area), and so on. </child> On the same Figure you will see the <child> third Tab (Common), that contains shared <widget class="GtkHBox" id="hbox2"> properties among the widgets. Those <property name="visible">True</property> include the features like Width, Height, vi- <property name="homogeneous">False</property> <property name="spacing">0</property> sibility, ability of the widget to have a focus <child> on, etc. <widget class="GtkLabel" id="label1"> The Fourth Tab (Signals) allows you <property name="visible">True</property> to connect the widget signals (clicked, <property name="label" translatable="yes"> Code: </property> , in the case of GtkBut- <property name="use_underline">False</property> pressed released <property name="use_markup">False</property> ton) to a specific callback. This callback is <property name="justify">GTK_JUSTIFY_LEFT</property> a method or a function that must be inclu- <property name="wrap">False</property> ded in the code of your application (it may <property name="selectable">False</property> be done later). When the widget emits <property name="xalign">0.5</property> a signal, the callback with the given name <property name="yalign">0.5</property> <property name="xpad">0</property> is executed. There's no need to connect <property name="ypad">0</property> the signals in glade, as it is being usually <property name="ellipsize">PANGO_ELLIPSIZE_NONE</property> done later in the code. <property name="width_chars">-1</property> <property name="single_line_mode">False</property> <property name="angle">0</property> The Glade XML File </widget> When you save your file in Glade, it gene- <packing> rates an XML file containing the the visual <property name="padding">0</property> structure of the project (Listing 1). It conta- <property name="expand">False</property> ins the names of the widgets, their proper- <property name="fill">False</property> ties like dimensions, labels, icons, the way </packing> </child> each widget will be packed, all registered </widget> callbacks and more. The XML tags are <packing> used to define the properties of each wid- <property name="padding">0</property> get, and the hierarchy of tags represents <property name="expand">True</property> containers and their children. <property name="fill">True</property> </packing> Then, the Glade project file can be </child> used in your application. It has to be pro- <child> cessed through the GladeXML class that <placeholder/> parses the XML content, making the wid- </child> gets available to our application. For the </widget> </child> latter purpose we use a method named get_widget(). The only thing we have to 4 www.phpsolmag.org PHP Solutions Nr 1/2006 Glade Techniki Figure 5. The Properties window for GtkEntry, GtkLabel and GtkButton do is to know the name of each widget we a button named Print, while the fourth po- lities of Glade and joining the generated want to retrieve from the Glade project file.