<?xml version="1.0"?>
<!DOCTYPE article PUBLIC "-//OASIS//DTD DocBook XML V4.1.2//EN" 
"http://www.oasis-open.org/docbook/xml/4.1.2/docbookx.dtd" [
  <!ENTITY legal SYSTEM "legal.xml">
  <!ENTITY appversion "1.1.1">
  <!ENTITY manrevision "0.1">
  <!ENTITY date "September 2003">
  <!ENTITY app "anjuta">
]>

<article id="index">

 <!-- ============= Document Header ============================= -->
 <articleinfo> 
  <title>Starting Off in Anjuta</title>
  <copyright>
   <year>2002</year>
   <holder>Ishan Chattopadhyaya</holder>
  </copyright>


  <legalnotice>
   <para>
    Permission is granted to copy, distribute and/or modify this
    document under the terms of the <citetitle>GNU Free Documentation
    License</citetitle>, Version 1.1 or any later version published
    by the Free Software Foundation with no Invariant Sections, no
    Front-Cover Texts, and no Back-Cover Texts. You may obtain a copy
    of the <citetitle>GNU Free Documentation License</citetitle> from
    the Free Software Foundation by visiting <ulink type="http"
    url="http://www.fsf.org">their Web site</ulink> or by writing to:
    Free Software Foundation, Inc., 59 Temple Place - Suite 330,
    Boston, MA 02111-1307, USA.
   </para>
   <para>
    Many of the names used by companies to distinguish their products and
    services are claimed as trademarks. Where those names appear in any
    GNOME documentation, and those trademarks are made aware to the members
    of the GNOME Documentation Project, the names have been printed in caps
    or initial caps.
   </para>
  </legalnotice>

  <releaseinfo>
   This is version 1.0 of 'Starting Off in Anjuta'.
  </releaseinfo>
 </articleinfo>
  <indexterm><primary>Anjuta</primary></indexterm>
  <indexterm><primary>anjuta</primary></indexterm>
  <indexterm><primary>Integrated Development Enviroment</primary></indexterm>


 
<!-- ============= Building Glade ========================== -->
  <sect1 id="intro">
	   <title>Introduction</title>
	   <para>
	       Earlier developing Linux programs with a good Graphical User Interface had been a problem. With the creation of the GIMP Toolkit (GTK), it became an easier task. Even easier became the developing of GUI based programs, when <application>GLADE</application>, which is a tool for creating GUIs for the GTK applications, was written by Damon Chaplin. But yet <application>GLADE</application> cannot be called an Integrated Development Environment (like Visual Basic etc.) due to the fact that the programmers cannot edit the code generated by <application>GLADE</application> in <application>GLADE</application>'s environment itself. Then came <application>Anjuta</application>!   	   </para>
   
	   <para>
 		<application>Anjuta</application> uses GLADE's power of creating nice GUIs and combines it with its own powerful code editing capabilities, thus evolving as an excellent IDE for rapid application development. Earlier people used GLADE for the GUI, and emacs or vi etc. for text editing and some terminal emulator for compiling their projects. All this, thanks to <application>Anjuta</application>, can now be done through one unified and intuitive interface. This is what a good Integrated User Interface is all about.


	  </para>
  
 	  <para>
		So come, let's waste no more time and jump straight into the world of <application>Anjuta</application> by
		creating a simple <application>Hello World</application> application. This tutorial will highlight more 
		on the designing part with a little mention about the GTK code involved. (For more 
		details about GTK, visit <ulink type="http" url="http://www.gtk.org"> GTK's site </ulink>) 
	  </para>
 </sect1>

 
<!-- ============= Creating a new Project ==================== -->
 <sect1 id="project">
 	<title>Creating a New Project</title>
 	<para>
		Open <application>Anjuta</application>. Since we are going to create a new project and work on it, so go to File -&gt; New Project. Consequently, the "GNOME Application Wizard" appears. Although it is a common practice that we tend to ignore whatever is written as long as there is a Next button, but it is advised that you go carefully through each and every message. So, after reading the message in the first step of the Wizard, proceed forward, i.e., press <emphasis>Next</emphasis>button.
 	</para>

 	<para>
	The step 2 is a crucial one. It gives you the option of creating the type of application you want. For our purposes, lets choose "<emphasis>Gnome Application</emphasis>" and proceed forward. Step 3 deals with the basic project information. You should carefully fill this step of the wizard. For this tutorial, enter the following information.
 	</para>

	<itemizedlist>
		<listitem>	
			<para>
				<guilabel>Project Name</guilabel>: Hello World
			</para>
		</listitem>
		<listitem>
			<para>
				<guilabel>Author</guilabel>: (Your Name)
			</para>
		</listitem>
		<listitem>
			<para>
				<guilabel>Version</guilabel>: 0.1
			</para>
		</listitem>
		<listitem>
			<para>
				<guilabel>Program name</guilabel>: hello
			</para>
		</listitem>
		<listitem>
			<para>
				<guilabel>Source Directory</guilabel>: src
			</para>
		</listitem>
		<listitem>
			<para>
				<guilabel>Documents Directory</guilabel>: doc
			</para>
		</listitem>
		<listitem>
			<para>
				<guilabel>Pixmaps Directory</guilabel>: pixmaps
			</para>
		</listitem>
	</itemizedlist>

 	<para>
		In the next step, i.e. Step 4, select the programming language as C.
		You can disable Gettext support if you don't want it. Ideally, you
		should assign an icon to this project so that it appears in the GNOME
		Application menu. You can select <userinput>Hello World example</userinput>
		as the<guilabel>Entry name</guilabel>, which will appear at the GNOME
		Application menu. Let the <guilabel>Group</guilabel> field remain at
		<userinput>Applications</userinput>. Finally click <emphasis>Next</emphasis>
		and <emphasis>Finish </emphasis>thereafter to create your project.
 	</para>

 	<para>
 		Since we are developing this as an example therefore you can relax, 
		  but while creating real-time applications, these steps can be real crucial and 
		  need to be filled in carefully.
 	</para>
</sect1>

<!-- ============= Designing the Interface ==================== -->
<sect1 id="interface">
  <title>Designing the Interface </title>
	<para>
		After the wizard is complete, <application>Anjuta</application> 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 <application>Anjuta</application> 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.
	</para>

	<para>
		This is the time to start <application>GLADE</application> and design the GUI. So go to 

<menuchoice>
 <guisubmenu>View</guisubmenu><guimenuitem>Edit Application GUIs</guimenuitem>
</menuchoice>

Edit the GUI. Now <application>GLADE</application> is executed. You can ideally see three 
	  windows: 1) the main Glade window, 2) Properties window, and 3) Palette window.

	</para>

	<figure	id="glade-s">
	   <title>Glade windows</title>
	   <screenshot>
	     <screeninfo>Glade windows</screeninfo>
			<graphic fileref="figures/glade-l.png" format="PNG" srccredit="Ishan Chattopadhyaya"></graphic>
			
		</screenshot>
	</figure>

	<para>
		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).
	</para>


		

	<para>
		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.
	</para>


		
	<figure	id="icons-sh">
	   <title>Palette icons</title>
	   <screenshot>
	     <screeninfo>Palette icons</screeninfo>
			<graphic fileref="figures/icons.png" format="PNG" srccredit="Ishan Chattopadhyaya"></graphic>
			
		</screenshot>
	</figure>
	
	<para>
		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:
	</para>

	<figure	id="divided-sh">
	   <title>The interface</title>
	   <screenshot>
	     <screeninfo>The interface</screeninfo>
			<graphic fileref="figures/divided.png" format="PNG" srccredit="Ishan Chattopadhyaya"></graphic>
			
		</screenshot>
	</figure>

	<para>
	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:
	</para>

	<programlisting>
	Button on the Left: 
	 	Name: <emphasis>BT_OK</emphasis> 
	 
	 	Label: <emphasis>OK</emphasis>
	 
	Button on the Right: 
	 	Name: <emphasis>BT_EXIT</emphasis>
	 
	 	Label: 	<emphasis>Exit</emphasis>
	</programlisting>



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

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

	<para>
	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: 
	</para>

	<itemizedlist>
		<listitem>
			<para> Set the <emphasis>Homogeneous</emphasis> property
			of the lower vertical box to<emphasis>Yes</emphasis>; </para>
		</listitem>
		<listitem>
			<para> Set the <emphasis>Fill</emphasis> property of the Buttons
			from the Place tab of the Properties window to <emphasis>Yes</emphasis>;
			</para> 
		</listitem>
		<listitem>
			<para> Set the window1's <emphasis>Grow</emphasis> property to
			<emphasis>No</emphasis>. </para> 
		</listitem>
	</itemizedlist>

	<para>
	After tweaking these properties, I got my window to look something 
	  like this:
	</para>

	<figure	id="interface-sh">
	   <title>The Final Interface</title>
	   <screenshot>
	     <screeninfo>The Final Interface</screeninfo>
			<graphic fileref="figures/interface.png" format="PNG" srccredit="Ishan Chattopadhyaya"></graphic>
			
		</screenshot>
	</figure>


	<para>
	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 
	  -&gt; Exit to proceed back to the <application>Anjuta</application> environment to do some coding!
	</para>

</sect1>

<!-- ================= EDITING THE CODE ================= -->
<sect1 id="code">
	<title>Editing the Code</title>

	<para>
	Now, back at the <application>Anjuta</application> environment, you would be able to see a callbacks.c file in the left panel of the screen in the Source files section. Double click it to open it. <application>Anjuta</application> then opens the file into the right portion of the window for editing purposes.
	</para>

	<para>It sometimes becomes easier and more exciting if thing are colorful. Such is the case with Anjuta's Syntax Hilite feature (from the Format menu). Many more features are provided with <application>Anjuta</application>, which you can make yourself comfortable with. Perhaps take a little time off and explore the environment till you are satisfied and things start appearing known to you.
	</para>

	<para> Back, in the callbacks.c file, you might see two callback functions: <emphasis>on_BT_OK_clicked</emphasis> and<emphasis>on_BT_EXIT_clicked</emphasis>. In the latter, add a function gtk_main_quit() such that the entire function looks like this:
	</para>

	<programlisting>
	void 
	on_BT_EXIT_clicked (GtkButton *button, gpointer user_data) 
	{ 

		gtk_main_quit(); 

	} </programlisting>

	<para>
	This causes the program to end when the user clicks this button.
	Similarly, add the following code to the <emphasis>on_BT_OK_clicked</emphasis>
	function:
	</para>

	<programlisting>
	void 
	on_BT_OK_clicked (GtkButton *button, gpointer user_data) 
	{ 

		GtkWidget *entry = lookup_widget (GTK_WIDGET(button), "ENTRY"); 
		GtkWidget *msgbox = gnome_app_new("Hello World", "Hello World"); 
		gchar *text1, *text2; 

		text1 = gtk_entry_get_text (GTK_ENTRY(entry)); 
		text2 = g_strconcat ("Hello, ", text1, NULL); 
		gnome_app_message (GNOME_APP(msgbox), text2); 
		g_free (text2);
	} </programlisting>

	<para>After this save and close the callbacks.c (use the File 
	  menu or the toolbar icons for this purpose).
	</para>
</sect1>

<!-- ======= BUILDING, EXECUTING & DISTRIBUTING ======= -->
<sect1 id="building">
	<title>Building, executing and distributing</title>

	<para>
	After this comes the sweet moment of testing out your app. First, go to
	<menuchoice>
	 <guimenu>Build</guimenu><guimenuitem>Build All</guimenuitem>
    </menuchoice>.
	This creates the executable file hello in the src directory, after
	compiling the files, viz., main.c, interface.c, support.c and callbacks.c.
	Generally the gcc compiler is used for this purpose.
	</para>

	<para>
	If you are lucky, you might compile your app without any errors. In that case go to 
	<menuchoice>
	 <guimenu>Build</guimenu><guimenuitem>Execute</guimenuitem>
	</menuchoice>
	
	<application>Anjuta</application> will then open a terminal window
	and through it will run your <application>Hello World</application>
	app! Try entering your name in the entry field and pressing the
	<guibutton>OK</guibutton> button. Hopefully, it will wish you
	Hello ... wish him back and click the Exit button to see if your
	program exits successfully. If yes, enjoy! Your hard work has been rewarded!
	</para>

	<para>
	You can, at this time install this app into your system by 
	<menuchoice>
	 <guimenu>Build</guimenu> <guimenuitem>Install</guimenuitem>
	</menuchoice>
	Although you might not want to create a distribution tarball
	file for this app right now, but perhaps it might be needed 
	when you distribute your future projects. But before distributing
	your projects, make sure you have filled in the <filename>TODO</filename>,
	<filename>ChangeLog</filename>, <filename>INSTALL</filename> and
	<filename>README</filename> files. For creating the distribution,
	click 
	
	<menuchoice>
	 <guimenu>Build</guimenu> <guimenuitem>Build Distribution</guimenuitem>
	</menuchoice>
	
	It might take a few seconds and ultimately it creates a file <filename>hello-0.1.tar.gz</filename>
	file in the <filename class="directory">/home/(username)/Projects/hello/</filename> directory.
	It might well be time to take this file to your nerdy brother and show him your worth...!
	</para>
</sect1>

<sect1 id="conclusion">
	<title>Conclusion</title>

	<para>
	Although this tutorial is quite a simple one as far as functionality goes,
	but I do hope that it will help starters of <application>Anjuta</application>
	to get a taste of things. As for me, I am 16 years old, and currently studying
	in a High School in Allahabad, India. You may contact me with your suggestions
	at: <email>ichattopadhyaya@hclinfinet.com</email>. Any further questions which
	may need to be clarified can be posted to the <application>Anjuta</application>
	Mailing Lists (you can subscribe to them from the main page of the website
	<ulink type="http" url="http://anjuta.sourceforge.net">anjuta.sourceforge.net</ulink>).
	Good luck and enjoy <application>Anjuta</application>!
	</para>

</sect1>

</article>
