quickly-ubuntu-template 12.08.1-0ubuntu2 / usr / share / quickly / templates / ubuntu-application / help / tutorial.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.1.2//EN"
"http://www.oasis-open.org/docbook/xml/4.1.2/docbookx.dtd" [

 <!ENTITY appname "<application>Quickly</application>" >
 <!ENTITY appversion "12.08.1" >
] >

<book lang="en" id="index">
 <bookinfo id="Front">
   <authorgroup>
     <author role="maintainer">
       <firstname>Shane</firstname>
       <surname>Fagan</surname>
     </author>
     <author role="maintainer">
       <firstname>Rick</firstname>
       <surname>Spencer</surname>
     </author>
     <author role="maintainer">
       <firstname>Michael</firstname>
       <surname>Terry</surname>
     </author>
   <corpauthor>
     Canonical ltd
   </corpauthor>
   </authorgroup>
   <date>
     2011
   </date>
   <productname class="trade">&appname;</productname>
   <productnumber>&appversion;</productnumber>
   <invpartnumber>2011</invpartnumber>
   <title>&appname; &appversion; User Guide</title>
 </bookinfo>


 <preface id="preface">
  <title>About This Guide</title>
  <para><application>Quickly</application> is a set of choices about writing apps for Ubuntu. Out of all the wonderful richness and variety of programming for Ubuntu, <application>Quickly</application> make some very opinionated choices about what tools to use, and how to combine them. The criteria for these choices was to make it easy and fun to write and release Ubuntu applications, even if it's your first time trying, but also in a way that delivers the full power and flexibility of the platform. One benefit of these choices, is that it's also easier to write tools that make it even easier and more fun. So <application>Quickly</application> is also a set of commands.</para>
  <itemizedlist>
   <listitem>
    <para><link linkend="getting-started">Getting Started</link></para>
   </listitem>
  </itemizedlist>
 </preface>

 <chapter id="Quickly-part1">
  <title>Getting Started</title>
  <para>This is part 1 of the <application>Quickly</application> tutorial. This part will introduce some key <application>Quickly</application> commands, editing a user interface in <application>Glade</application>, and editing code in <application>gedit</application>. This part of the tutorial will familiarize you with these three tools, and how they work together with Python and GTK+ so that you can quickly build applications.</para>
  
  <para><title>Creating a <application>Quickly</application> Project</title>Creating an empty but working program couldn't be simpler. First, open a terminal window to type commands into. When it's open, type the command: </para>
  <para><programlisting>quickly create ubuntu-application jotty</programlisting></para>
  <figure>
    <graphic fileref="./images/1.png"></graphic>
  </figure>
  <para>This will create a jotty subdirectory containing a complete directory tree and files for an empty Python application. The command finishes by running the newly created empty application.</para>
  <figure>
    <graphic fileref="./images/2.png"></graphic>
  </figure>
  <para><title>Testing the Empty Application</title> In the window that pops up you have a menubar, text and a statusbar. Notice that <application>Quickly</application> inferred that the application title is "Jotty". Only a few of menu items do anything in the empty application, Help->About, Edit->Preferences, and File->Close.</para>
  <figure>
    <graphic fileref="./images/3.png"></graphic>
  </figure>
  <para><title>Running the Application</title> 
Close the application by closing the window or using the File->Close menu item. Since the empty application isn't actually installed, you can't start the application from the application menu yet. To start the applicaton, use the terminal to first cd into the new subdirectory, and then use "quickly run".</para> 
  <para><programlisting>
cd jotty
quickly run
</programlisting></para>
  <figure>
    <graphic fileref="./images/4.png"></graphic>
  </figure>
  <para><title>Editing an Application</title></para>
  <para><title>Edit the User Interface in <application>Glade</application></title>
<application>Quickly</application> programs use <application>Glade</application> to edit the user interface. Start <application>Glade</application> with "quickly design" in order to set up <application>Glade</application> for editing the empty applicaton. Don't start <application>Glade</application> directly, or it won't load the necessary catalog files for editing the classes that were automatically generated by <application>Quickly</application>.</para> 
  <para><programlisting>quickly design</programlisting></para>  
  <figure>
    <graphic fileref="./images/5.png"></graphic>
  </figure>
  <para><application>Glade</application> will open with the project loaded up and ready to edit.</para>
  <figure>
    <graphic fileref="./images/6.png"></graphic>
  </figure>
  <para>Click on "jotty_window" in the right pane to open the window for editing.</para>
  <figure>
    <graphic fileref="./images/7.png"></graphic>
  </figure>
  <para>The first thing we want to do is create a text area for typing into. There are some default widgets added to the window already, but we won't need these so we'll start by deleting them. Click on the label and press Delete to make it disappear from the window.</para>
  <figure>
    <graphic fileref="./images/8.png"></graphic>
  </figure>
  <figure>
    <graphic fileref="./images/9.png"></graphic>
  </figure>
  <para>Do the same with the image widget. This leave us two free slots.</para> 
  <figure>
    <graphic fileref="./images/10.png"></graphic>
  </figure>
  <para>We'll use the bottom slot to add a TextView widget for the user to type into. In the toolbox on the left, click on the "Text View" button in the "Controls and Display" section. Then click in the bottom empty slot.</para>
  <figure>
    <graphic fileref="./images/11.png"></graphic>
  </figure>
  <para>Make sure you save the file in <application>Glade</application>, or your changes won't be kept! Then run the application from the terminal again. The window now has a place where the user can type.</para>
  <figure>
    <graphic fileref="./images/12.png"></graphic>
  </figure>
  <para>Now we'll add the entry field for the title and also a label for it. We'll use the top empty slot for that. First, click on "Box" from the "Containers" section of the toolbox, and then click on the top slot. A dialog box will open; tell it that you want two items.</para>
  <figure>
    <graphic fileref="./images/13.png"></graphic>
  </figure> 
  <para>A Box is a container that arranges its contents either vertically or horizontally. We want a horizontal one, so on the right bottom pane, change the "Orientation" setting to "Horizontal". Then add a Label to the empty left hand slot, and a Text Entry to the right hand one.</para>
  <figure>
    <graphic fileref="./images/14.png"></graphic>
  </figure>
  <para>Before going on, let's clean up the UI just a tad here. Select the horizontal box from the list on the right. Then go to the Packing tab in the bottom right, and set Expand and Fill to "No".</para>
  <figure>
    <graphic fileref="./images/15.png"></graphic>
  </figure>
  <para>Go to the General tab, and set spacing to 6.</para> 
  <figure>
    <graphic fileref="./images/16.png"></graphic>
  </figure>
  <para>Select the label. On the General tab, set the Label field to "Name:". Set Expand and Fill to "No" for the label, and set them to "Yes" for the entry. Set the Padding for both to 6 (also on the Packing tab).</para>
  <figure>
    <graphic fileref="./images/17.png"></graphic>
  </figure>
  <para><title>Add the Save, Open, and New Features</title> 
After the user types something, they may want to save it. A File->Save menu item was automatically created when the empty applicaton was created, but it's not hooked up to any code. To make Save work, we need tell the menu item what function to call and then create a function to actually do the saving.</para>
  <para><title>Set the Signal Handler in <application>Glade</application></title> 
First, we need to tell the menu item what function to call. If <application>Glade</application> is not still open, open up the application in <application>Glade</application>:</para> 
  <para><programlisting>quickly design</programlisting></para>
  <para>Click on the file menu, and the menu opens as if the application were running.</para>
  <figure>
    <graphic fileref="./images/18.png"></graphic>
  </figure>
  <para>Choose the Save menu item, and it will be selected in <application>Glade</application>.</para>
  <figure>
    <graphic fileref="./images/19.png"></graphic>
  </figure>
  <para>In GTK+, menu items are "activated" when a user chooses the item from the menu.  Since we want a function to run when the user chooses Save, we want to specify a function to respond to the activate signal from the menu item. Note the name of the menu item is "mnu_save" in the right panel. You will use this in a second.</para>
<para><title>Edit the Code in Gedit</title></para>
<para><title>Create the Save File Signal Handler</title> 
Now you're ready to write some code. The code for the window is stored in the file "JottyWindow.py".</para>
<para>Use the "quickly edit" command to start editing your code files:</para> 
<para><programlisting>quickly edit</programlisting></para> 
<para>This will open the default Ubuntu text editor <application>gedit</application> with all the customizable Python files in the "jotty" directory.</para>
   <figure>
    <graphic fileref="./images/23.png"></graphic>
  </figure>
<para>When signals are emitted, if the window's class has a method called "on_WIDGET_SIGNAL", it will be called.  In this case, we are interested in the "activate" signal on the "mnu_save" widget.  So we want to create an "on_mnu_save_activate" method in the JottyWindow class. So simply switch to the JottyWindow.py file and add the following right under the finish_initializing method:</para> 
<para> 
    <literallayout><programlisting>
    def on_mnu_save_activate(self, widget, data=None):
        print "save"
</programlisting></literallayout></para> 

<para>This will print the word "save" to the terminal when run. The method signature is the standard signature expected in a signal handler. If you are new to python, be sure to copy the indentations exactly, as the indentation level is very important in python.</para>
<para>Save the file, and run it again:</para> 
<para><programlisting>
quickly run
</programlisting></para> 
<para>Choose File->Save from the menu, and you'll see the word "save" printed out in the terminal. That's all there is to hooking up the signals!</para>
   <figure>
    <graphic fileref="./images/24.png"></graphic>
  </figure>
<para><title>Implementing Save</title> 
Now we'll write a little code in the signal handler to actually save the text. This code will do the following:</para>
  <itemizedlist>
   <listitem>
    <para>Import any new modules you'll need.</para>
   </listitem>
   <listitem>
    <para>Get the title of the document and the text from the user interface.</para>
   </listitem>
   <listitem>
    <para>Write the file to disk.</para>
   </listitem>
  </itemizedlist>

<para><title>Import new modules:</title>
Add these import statements near the other imports at the top of the JottyWindow.py file. The comment on the right is there for the benefit of the Python static code analysis tool <application>pylint</application>, if you happen to use it.</para> 
<para>
<literallayout>
<programlisting>
import os
from gi.repository import GLib # pylint: disable=E0611
</programlisting></literallayout>
</para>

<para><title>Here's the code to pull the title out of the title entry:</title>
Add this to the on_mnu_save_activate method.</para>
<para>
<literallayout>
<programlisting>
        #get the title for the note
        title = self.ui.entry1.get_text()
</programlisting></literallayout></para>

<para><title>Here's the code to get pull the text out of the TextView:</title> 
In GTK+, TextView widgets have a text buffer that stores the text. So you ask the TextView for it's TextBuffer, and then you ask the TextBuffer for the text. You use iterators (iters) to determine from which part of the text buffer you want text. Since we want all the text, it's easy to just get the start and end iters.</para> 
<para>
<literallayout><programlisting>
        #get the string
        buff = self.ui.textview1.get_buffer()
        start_iter = buff.get_start_iter()
        end_iter = buff.get_end_iter()
        text = buff.get_text(start_iter, end_iter, True)
</programlisting></literallayout></para>

<para><title>Deciding where to save the note:</title> 
We'll store the document in the system hidden folder designated for user-specific data. It's simple enough to ask GLib where that folder is and then add a jotty subfolder.</para> 
<para>
<literallayout><programlisting>
        #create the filename
        data_dir = GLib.get_user_data_dir()
        jotty_dir = os.path.join(data_dir, "jotty")
        filename = os.path.join(jotty_dir, title)
</programlisting></literallayout></para>

<para><title>Saving a document to user's disk:</title> 
GLib provides a convenience function for directly writing a string to a file.</para> 
<para>
<literallayout><programlisting>
        #write the data
        GLib.mkdir_with_parents(jotty_dir, 0o700)
        GLib.file_set_contents(filename, text)
</programlisting></literallayout></para>

<para>So the whole function should look like this:</para> 
<para> 
<literallayout><programlisting>
    def on_mnu_save_activate(self, widget, data=None):
        #get the title for the note
        title = self.ui.entry1.get_text()

        #get the string
        buff = self.ui.textview1.get_buffer()
        start_iter = buff.get_start_iter()
        end_iter = buff.get_end_iter()
        text = buff.get_text(start_iter, end_iter, True)

        #create the filename
        data_dir = GLib.get_user_data_dir()
        jotty_dir = os.path.join(data_dir, "jotty")
        filename = os.path.join(jotty_dir, title)

        #write the data
        GLib.mkdir_with_parents(jotty_dir, 0o700)
        GLib.file_set_contents(filename, text)
</programlisting></literallayout>
</para>

<para>It's easy to see if your save function is working. You can just explore the jotty data folder:</para>
<para><programlisting>gvfs-open ~/.local/share/jotty</programlisting></para>

<para><title>Implementing Open and New</title> 
To open a saved document, the user will type the title of the document that they want to open in the text entry, and choose "Open" from the main menu. If there is no matching document there, it will just clear out the text view, ready for input. This is probably not too intuitive, so we'll add a dialog box for prompting the user for the title, but that's for later in the tutorial. For now, we'll just use the same text entry field.</para>
<para><title>Implementing Open is essentially the reverse of Save:</title> 
Follow these steps:</para>
  <itemizedlist>
   <listitem>
    <para>Add the on_mnu_open_activate method to the JottyWindow class.</para>
   </listitem>
   <listitem>
    <para>Find all of the existing document names.</para>
   </listitem>
   <listitem>
    <para>Check if any have a matching title.</para>
   </listitem>
   <listitem>
    <para>If there is a match, pull out the text and display it in the text view.</para>
   </listitem>
  </itemizedlist>
<para>So the on_mnu_open_activate method looks like so:</para> 
<para>
    <literallayout><programlisting>
    def on_mnu_open_activate(self, widget, data=None):
        #get the name of the document to open
        title = self.ui.entry1.get_text()
        text = ""

        #create the filename
        data_dir = GLib.get_user_data_dir()
        jotty_dir = os.path.join(data_dir, "jotty")
        filename = os.path.join(jotty_dir, title)

        #try to get the data from the file if it exists
        try:
            success, text = GLib.file_get_contents(filename)
        except Exception:
            text = ""

        #set the UI to display the string
        buff = self.ui.textview1.get_buffer()
        buff.set_text(text)
</programlisting></literallayout></para>

<para><title>Implement New</title> 
Add the on_mnu_new_activate method to the JottyWindow class:</para> 
<para>
    <literallayout><programlisting>
    def on_mnu_new_activate(self, widget, data=None):
        self.ui.entry1.set_text("Note Title")
        buff = self.ui.textview1.get_buffer()
        buff.set_text("")
</programlisting></literallayout></para>

<para>Remember to save your JottyWindow.py file.</para>
<ulink url="./code/JottyWindow.py">Complete JottyWindow.py file</ulink>

<para><title>Saving Your Work</title> 
When <application>Quickly</application> created your application, it automatically added it to Bazaar, a source code versioning system. You can use Bazaar to roll back mistakes, see code history, compare versions, etc... <application>Quickly</application> has a convenience function for backing up your work:</para> 
<para><programlisting>
quickly save "First working version of Jotty"
</programlisting></para> 
<para>This will call <programlisting>bzr add</programlisting> and then <programlisting>bzr commit -m [your message]</programlisting> for you.</para>
</chapter>


 <chapter id="Quickly-part2">
<title>Using Dialogs</title>
<para>In part 1, we created an application that can read and write text files, and persist them on the disk. However, the application has a hideous usability flaw: the text box for specifying titles when saving and opening files is very confusing. In part 2, we'll fix that by adding a save and an open dialog.</para>

<para><title>Creating an Empty Dialog</title>
It's simple to add an empty, but working dialog to your project. Simply specify the name of the new dialog, and it will be added automatically. Assuming that you are in the jotty project directory:</para>
<para><programlisting>
quickly add dialog save
</programlisting></para>
<para>This will add the dialog to your project.</para>
<para><title>Editing the New Dialog</title>
To edit the UI for the dialog, you'll need to load it into <application>Glade</application> again. If you already have an instance of <application>Glade</application> running, you might want to go ahead and close it first, as it may get confusing if you have more than one open at a time. After closing <application>Glade</application>, simply open it again:</para>
<para><programlisting>
quickly design
</programlisting></para>
<para>Then use the Projects menu to switch to the newly created SaveDialog.ui file.</para>
   <figure>
    <graphic fileref="./images/26.png"></graphic>
  </figure>
<para>Then add some widgets for the UI. Start with a vertical Box with two items. Put a label in the top, and a horizontal Box in the bottom slot. In the horizontal box, add a label and a text entry, just like you did for JottyWindow in part 1. Set the expand property of the text entry to true.</para>
   <figure>
    <graphic fileref="./images/27.png"></graphic>
  </figure>
<para><title>Code the Dialog</title>
You can use the "quickly edit" command to open the SaveDialog.py file. This dialog needs very little additional code to work.  Essentially, you just need a way to retrieve the string specified by the user.  We'll add a quick accessor method for this:</para>
<para>
<programlisting>
    @property
    def title_text(self):
        return self.ui.entry1.get_text()
</programlisting></para>
<para>We don't need to write any code for the OK and Cancel buttons, as they were automatically hooked up by <application>Quickly</application> when it created the dialog.</para>
<para>Before we go on to invoking the dialog, delete the Box from the original JottyWindow that holds the text entry and label, as we won't be needing those.</para>
   <figure>
    <graphic fileref="./images/28.png"></graphic>
  </figure>
<para><title>Calling the Save Dialog</title>
To use the dialog in JottyWindow, we need to follow these steps:</para>
  <itemizedlist>
   <listitem>
    <para>Import SaveDialog in JottyWindow</para>
   </listitem>
   <listitem>
    <para>In the on_mnu_save_activate method, create an instance of SaveDialog</para>
   </listitem>
   <listitem>
    <para>Run the Dialog</para>
   </listitem>
   <listitem>
    <para>Get the String</para>
   </listitem>
   <listitem>
    <para>Destroy the dialog</para>
   </listitem>
  </itemizedlist>

<para><title>Importing the SaveDialog</title>
Add the SaveDialog to the list of the imported modules at the top of the JottyWindow.py file, like this:</para>
<para><programlisting>
from jotty.SaveDialog import SaveDialog
</programlisting></para>

<para><title>Create an instance of the dialog and run it</title>
When the user chooses Save, we want to open the SaveDialog and collect the title of the note from the user. So we need to modify our on_mnu_save_activate method.</para>

<para>First, create an instance of the SaveDialog like this:</para>
<para><programlisting>
        saver = SaveDialog()
</programlisting></para>
<para>To make the dialog appear, simply use the run() method. However, we want to check the result, so we'll need to store that in a variable. After it runs, we want to collect the string from the user, like this:</para>
<para><programlisting>
        result = saver.run()
        title = saver.title_text
</programlisting></para>
<para><title>Clean up the dialog</title>
We need to tell the dialog to not show itself anymore. We could call saver.hide() to make it hide, but since we don't need it hanging around, we'll just destroy it. Before we go on, though, we need to ensure that the user actually wants to save, so if we didn't get the OK result, we should just return out of the method:</para>
<para>
        <literallayout><programlisting>
        saver.destroy()
        if result != Gtk.ResponseType.OK:
            return
</programlisting></literallayout></para>

<para>Since we're now getting the title from the dialog instead of the text entry, we should delete the line of the code that gets it from the text entry. So except for the addition of the dialog code, the on_mnu_save_activate method looks pretty much the same as it did in part 1:</para>

<para>
    <literallayout><programlisting>
    def save_file(self, widget, data=None):
        #get the title from the user
        saver = SaveDialog()
        result = saver.run()
        title = saver.title_text

        saver.destroy()
        if result != Gtk.ResponseType.OK:
            return

        #get the string
        buff = self.ui.textview1.get_buffer()
        start_iter = buff.get_start_iter()
        end_iter = buff.get_end_iter()
        text = buff.get_text(start_iter, end_iter, True)

        #create the filename
        data_dir = GLib.get_user_data_dir()
        jotty_dir = os.path.join(data_dir, "jotty")
        filename = os.path.join(jotty_dir, title)

        #write the data
        GLib.mkdir_with_parents(jotty_dir, 0o700)
        GLib.file_set_contents(filename, text)
</programlisting></literallayout></para>
<para>Now when we choose save, we get the SaveDialog instead:</para>
   <figure>
    <graphic fileref="./images/29.png"></graphic>
  </figure>

<para><title>Creating a Dialog with a DictionaryGrid</title>
We'll use a similar approach in the Open dialog that we did with Save. However, there is one big difference, we want to provide the user with a list of documents that you could choose to open. We'll use a widget called DictionaryGrid, which is included in the Quickly Widgets library.
</para>
<para><title>Installing the Quickly Widgets library</title></para>
<para><programlisting>
sudo apt-get install python-quickly.widgets
</programlisting></para>
<para><title>Create the Open Dialog</title></para>
<para><programlisting>
quickly add dialog open
</programlisting></para>
<para><title>Editing the New Dialog</title>
Start out by closing, and then reopening <application>Glade</application> again:</para>
<para><programlisting>
quickly design
</programlisting></para>
<para>Start by adding a vertical Box and a label in the same manner as in the Save Dialog above. Leave an empty space in the Box, we will use code to put the DictionaryGrid there.</para>
   <figure>
    <graphic fileref="./images/30.png"></graphic>
  </figure>
<para><title>Coding the Open Dialog</title></para>
<para><title>Creating and Adding a DictionaryGrid</title>
It just takes a little bit of code to add a DictionaryGrid to the  dialog. We need to:</para>
  <itemizedlist>
   <listitem>
    <para>Import the DictionaryGrid class.</para>
   </listitem>
   <listitem>
    <para>Get the list of jotty files.</para>
   </listitem>
   <listitem>
    <para>Throw that list into a DictionaryGrid.</para>
   </listitem>
   <listitem>
    <para>Add the DictionaryGrid to the Dialog.</para>
   </listitem>
   <listitem>
    <para>Create the get_selection function.</para>
   </listitem>
  </itemizedlist>

<para><title>Import the DictionaryGrid class</title>
Open the "OpenDialog.py" file with "quickly edit". DictionaryGrid is part of the quickly.widgets library, so we import it as below. Note we also want to import GLib and os, since we'll use some of their functions.</para>
<para><programlisting>
import os
from quickly.widgets.dictionary_grid import DictionaryGrid
from gi.repository import GLib # pylint: disable=E0611
</programlisting></para>
<para><title>Get the list of jotty files</title>
First things first, we need to know the names of the existing documents. If you recall, we stored the files in the user's data directory. So we just need to list the files in that directory. This set up should be done in the OpenDialog's finish_initializing function.
</para>
<para>
        <literallayout><programlisting>
        #get the jotty document names
        data_dir = GLib.get_user_data_dir()
        jotty_dir = os.path.join(data_dir, "jotty")
        filenames = os.listdir(jotty_dir)
</programlisting></literallayout></para>

<para><title>Throw that list into a DictionaryGrid</title>
Now that we have a list of files, we need to massage it into the format DictionaryGrid expects. Namely, a list of dictionaries that hold header/value pairs. So we'll add a header to each filename and keep track of the full filename.
</para>
<para>
        <literallayout><programlisting>
        #put them into a grid
        dicts = [{'Name': x, 'File': os.path.join(jotty_dir, x)} for x in filenames]
        self.grid = DictionaryGrid(dictionaries=dicts, keys=['Name'])
</programlisting></literallayout></para>

<para><title>Add the DictionaryGrid to the Dialog</title>
When we added the vertical Box to the dialog, we left an open space at the bottom. We'll use this by "packing" the DictionaryGrid into the Box. We need to show it as well. So add the following lines to the finish_initializing function as well:
</para>
<para>
        <literallayout><programlisting>
        #add grid to dialog
        self.grid.show()
        self.ui.box1.pack_end(self.grid, True, True, 0)
</programlisting></literallayout></para>

<para><title>Create the get_selection function</title>
The dialog still needs a bit more code to work. It needs to return the user's selection, if there is one. To do this, we need to ask the DictionaryGrid what is selected. This is easy using the widget's selected_rows member. But DictionaryGrid supports multiple selection, so we'll do the following:</para>
  <itemizedlist>
   <listitem>
    <para>Use a decorator to define the function as a property accessor.</para>
   </listitem>
   <listitem>
    <para>Get all the selected rows.</para>
   </listitem>
   <listitem>
    <para>If none are selected, return None.</para>
   </listitem>
   <listitem>
    <para>Pick the first one and return it.</para>
   </listitem>
  </itemizedlist>
<para>So the function to add to OpenDialog looks like this:</para>
<para>
    <literallayout><programlisting>
    @property
    def selected_file(self):
        rows = self.grid.selected_rows
        if len(rows) &#60; 1:
            return None
        else:
            return rows[0]['Name']
</programlisting></literallayout></para>
<para><title>Using the Open Dialog</title>
Now we want to use the Open Dialog in JottyWindow's on_mnu_open_activate method. To use it, we'll follow these steps:</para>
  <itemizedlist>
   <listitem>
    <para>Import OpenDialog in JottyWindow</para>
   </listitem>
   <listitem>
    <para>In the on_mnu_open_activate method, create an instance of OpenDialog</para>
   </listitem>
   <listitem>
    <para>Run the Dialog</para>
   </listitem>
   <listitem>
    <para>Get the filename for the selected title</para>
   </listitem>
   <listitem>
    <para>Destroy the dialog</para>
   </listitem>   
   <listitem>
    <para>Check the response before proceeding</para>
   </listitem>   
   <listitem>
    <para>Get the file contents</para>
   </listitem>   
   <listitem>
    <para>Update the UI</para>
   </listitem>
  </itemizedlist>

<para><title>Import OpenDialog</title>
Just like the SaveDialog, add the import line to the list of imports:</para>
<para><programlisting>
from jotty.OpenDialog import OpenDialog
</programlisting></para>

<para><title>Create an instance of the dialog and run it</title>
So now we're ready to call the dialog from the JottyWindow's on_mnu_open_activate method. Creating the OpenDialog is exactly the same as creating the SaveDialog, except we also want to tell it to load the titles before we run it:</para>
<para>
        <literallayout><programlisting>
        opener = OpenDialog()
        result = opener.run()
</programlisting></literallayout></para>

<para><title>Get the filename for the selected title</title>
Now use the property that we created to retrieve the title and text from the dialog. Don't forget to check the response type before going on.</para>
<para>
        <literallayout><programlisting>
        filename = opener.selected_file

        #close the dialog, and check whether to proceed
        opener.destroy()
        if result != Gtk.ResponseType.OK:
            return
</programlisting></literallayout></para>

<para><title>Get the file contents</title>
If nothing was selected, we'll just return. Otherwise, we'll retrieve the file contents just like we did before and update the UI.  That is, this code does not need to change, but is presented again here for completeness.</para>
<para>
        <literallayout><programlisting>
        #try to get the data from the file if it exists
        try:
            success, text = GLib.file_get_contents(filename)
        except Exception:
            text = ""

        #set the UI to display the string
        buff = self.ui.textview1.get_buffer()
        buff.set_text(text)</programlisting></literallayout></para>
<para>That's all there is to it. So the whole open_file function looks like this:</para>
<para>
    <literallayout><programlisting>
    def open_file(self, widget, data=None):
        #get the name of the document to open
        opener = OpenDialog()
        result = opener.run()
        filename = opener.selected_file

        #close the dialog, and check whether to proceed
        opener.destroy()
        if result != Gtk.ResponseType.OK:
            return

        #try to get the data from the file if it exists
        try:
            success, text = GLib.file_get_contents(filename)
        except Exception:
            text = ""

        #set the UI to display the string
        buff = self.ui.textview1.get_buffer()
        buff.set_text(text)
</programlisting></literallayout></para>
<para>Now users get a nice open dialog:</para>
   <figure>
    <graphic fileref="./images/31.png"></graphic>
  </figure>

<para>However, the application is not complete. There are a few things left for you to do:</para>
  <itemizedlist>
   <listitem>
    <para>Set the title of the JottyWindow to display the note title. Try self.set_text(title).</para>
   </listitem>
   <listitem>
    <para>The Save command works more like "Save As". The application probably shouldn't pop up a SaveDialog every time you want to save. If it's already been saved, you probably just want to save it, but use a SaveDialog when the user choose Save As, or is saving a document for the first time.</para>
   </listitem>
   <listitem>
    <para>The OpenDialog should probably return when the user double clicks on an item in the list. Try connecting to the "select-cursor-row" signal on the TreeView, and calling self.response(Gtk.ResponseType.OK) in the handler.</para>
   </listitem>
   <listitem>
    <para>Perhaps the OK button in the OpenDialog should be disabled if nothing is selected. Try setting the "sensitivity" in <application>Glade</application> to "False" to start, and using the set_sensitive method on the OK button to adjust it as the selection changes.</para>
   </listitem>
   <listitem>
    <para>It would be more consistent for the Open and Close dialogs to have "Open" and "Close" for buttons instead of "OK". You can set a different type in the properties window in <application>Glade</application>.</para>
   </listitem>
  </itemizedlist>
</chapter>

<chapter id="Quickly-part3">
<title>Packaging</title>
<para>In parts 1 and 2, we showed how to create a simple Ubuntu application using <application>Quickly</application>. This section will cover how to package an application so that it is easy for you to share, and easy for other people to install.</para>
<para><title>License your Application</title>
It's important to license your code so users and other programmers know their rights in terms of redistributing or modifying it. To quickly grant a GPL license to your code, simply:</para>
  <itemizedlist>
   <listitem>
    <para>Specify your name and email address in the AUTHORS file.</para>
   </listitem>
   <listitem>
    <para>Run the "license" command.</para>
   </listitem>
  </itemizedlist>

<para><title>Specify your name and email</title>
When <application>Quickly</application> created your Ubuntu application, it added a file named AUTHORS in the top level of the directory. Open this file in your text editor, and modify the top line so it has your name and email included. For example, I would change the entire file to look like this:</para>
<para>
<literallayout><programlisting>Copyright (C) 2011 Rick Spencer rick.spencer@canonical.com</programlisting></literallayout></para>
<para><title>Run the "License" Command</title>
By default, <application>Quickly</application> will use a GPL 3 license for your project. To use this license, use this command:</para>
<para><programlisting>
quickly license
</programlisting></para>
<para>This will add the GPL 3 license to all of your code files that you've added to your project using <application>Quickly</application>.</para>
<para>Keep in mind a couple of things:</para>
  <itemizedlist>
   <listitem>
    <para>This is a one way trip. Once you license the project, changes to the license must be done manually.</para>
   </listitem>
   <listitem>
    <para>If you prefer a GPL 2 license, you can specify that when you issue the license command:</para>  
<para><programlisting>
quickly license GPL-2
</programlisting></para>
</listitem>
<listitem>
<para><application>Quickly</application> doesn't care what license you use, but only knows natively what files and headers to include for BSD, GPL-2, GPL-3, LGPL-2 and LGPL-3. If you prefer another license, you can simply add whatever you license you like by creating a COPYING file and putting it there.  Then run:</para>
<para><programlisting>
quickly license
</programlisting></para>
<para>to license every file.</para>
</listitem>
<listitem>
<para>If you've added code files or other files to your project manually, you will need to add the license to those files manually or add those tags at the beginning of the file:</para>
<para>
<literallayout><programlisting>### BEGIN LICENSE
### END LICENSE</programlisting></literallayout></para>
</listitem>
</itemizedlist>

<para><title>Translate Your Application</title>
To allow for users from other countries to use your application you may want to translate it. <application>Glade</application> automatically creates a pot file for you but to translate strings in your code you have to:</para>
<para><programlisting>import gettext</programlisting></para>
<para><programlisting>gettext.gettext("What you want translated")</programlisting></para>

<para><title>Specify Application Settings</title>
You should personalize your application a little before creating the archive. This is very easy to do, as all of the files that you need have already been created, and only need a few lines changed to make them your own. To do this you should:
</para>
<itemizedlist>
<listitem><para>Personalize the Application Icon</para></listitem>
<listitem><para>Edit the Desktop File</para></listitem>
<listitem><para>Edit the setup.py File</para></listitem>
</itemizedlist>

<para><title>Personalize your Application Icon</title>
When users install your application, Ubuntu will display an icon next to it in the menus. You can create your own icon or edit the file called "jotty.svg" in the media directory (jotty/data/media). Ubuntu comes with a great image editing program called "Inkscape." So you can go:</para>
<para><programlisting>
inkscape data/media/jotty.svg
</programlisting></para>
   <figure>
    <graphic fileref="./images/package0.png"></graphic>
  </figure>
<para>If you don't personalize the icon, it's ok, your app will just have the default icon, such as in the image above.
</para>
<para><title>Edit the Desktop File</title>
By default, <application>Quickly</application> Ubuntu applications are classified as "utilities", so they show up under the Accessories category in Ubuntu. If we wanted to make <application>Jotty</application> show up in another category, we can do this by editing the desktop file. A desktop file is a file that describes your application to Ubuntu. The file "jotty.desktop.in" was automatically created in your project directory. To change <application>Jotty</application> from a Utility to an Office application, edit jotty.desktop.in and change this:
</para>
<para>
<literallayout><programlisting>[Desktop Entry]
Name=Jotty
Comment=Jotty application
Categories=GNOME;Utility;
Exec=jotty
Icon=jotty
Terminal=false
Type=Application
</programlisting></literallayout></para>

<para>
to this:
</para>
<para>
<literallayout><programlisting>[Desktop Entry]
Name=Jotty
Comment=Jotty application
Categories=GNOME;Office;
Exec=jotty
Icon=jotty
Terminal=false
Type=Application</programlisting></literallayout></para>
<para>
There are lots more categories that you can use, all defined by the FreeDesktop spec. You can see the complete list in the <ulink url="http://standards.freedesktop.org/menu-spec/latest/apa.html">menu spec</ulink>.
</para>
<para>
<title>Edit Setup.py</title>
Finally, you should include some information in the setup.py file to tell your users a little about yourself. The setup.py file was created for you, just like the desktop file. Most of of the setup.py file shouldn't be modified, as it is just boiler plate that makes your application work properly after it has been installed. However, there is a section at the bottom of the setup.py file that you should edit to describe yourself and the application.
</para>
<para>
So I would change this section:
</para>
<para>
<literallayout><programlisting>DistUtilsExtra.auto.setup(
    name='jotty',
    version='0.1',
    license='GPL-3',
    #author='Your Name',
    #author_email='email@ubuntu.com',
    #description='UI for managing …',
    #long_description='Here a longer description',
    #url='https://launchpad.net/jotty',
    cmdclass={'install': InstallAndUpdateDataDirectory}
    )
</programlisting></literallayout></para>
<para>
To look like this:
</para>
<para>
<literallayout><programlisting>DistUtilsExtra.auto.setup(
    name='jotty',
    version='0.1',
    license='GPL-3',
    author='Rick Spencer',
    author_email='rick.spencer@canonical.com',
    description='Note taking application',
    long_description='Note taking application that uses CouchDB as the backend.',
    #url='https://launchpad.net/jotty',
    cmdclass={'install': InstallAndUpdateDataDirectory}
    )</programlisting></literallayout></para>
<para>Note that the license has already been set up for you, author and author_email are updated each time you connect to Launchpad (with quickly release or quickly share) with your Launchpad real name and preferred email adress.</para>
<para>
Notice that <application>Jotty</application> doesn't have a web page yet, so I just left that line commented out. Also, you don't have to increment the version number as quickly share and quickly release commands will do that for you.
</para>

<para><title>Create and Test the Debian Archive</title>
After personalizing the project, we are now ready to create the package. This is easily done by issuing the package command:
</para>
<para><programlisting>
quickly package
</programlisting></para>
<para>This command will take a little while to discover dependencies and create all the required archives, etc... It will also report some errors as we haven't created a PGP key, for instance. Nonetheless, when it is done, the package will be created. Using the file browser, you can see the created package next to the project directory:</para>
   <figure>
    <graphic fileref="./images/package1.png"></graphic>
  </figure>
<para>Right now, the specific file we are interested in is "jotty_0.1_all.deb". To test it out, double click on it to open it in the Ubuntu Software Center:</para>
   <figure>
    <graphic fileref="./images/package2.png"></graphic>
  </figure>
<para>Click "Install" to see how it installs onto your desktop. After chugging for a bit, you'll see that it is installed in the Applications Office category. If you customized your icon, you'll see that the it uses your custom icon as well.</para>
   <figure>
    <graphic fileref="./images/package3.png"></graphic>
  </figure>
<para><title>Now that you have a package</title>
Now that you've packaged your application, you can share the .deb file. However, if your users install your application this way, and you update the application, your users will have to find this out and reinstall the newer version themselves. This hassle can be avoided in Ubuntu by using Personal Package Archives (or PPAs). Distrubuting your applications in this manner is covered in section 4 (not yet available).</para>
</chapter>
<chapter id="Quickly-reference">
<title><application>Quickly</application>: <application>Quickly</application> Command Reference</title>
<para>The ubuntu-application template template contains the following commands.</para>
  <itemizedlist>
   <listitem>
<xref linkend="create">create</xref>
   </listitem>
   <listitem>
<xref linkend="dialog">add dialog</xref>
   </listitem>
   <listitem>
<xref linkend="edit">edit</xref>
   </listitem>
   <listitem>
<xref linkend="design">design</xref>
   </listitem>
   <listitem>
<xref linkend="help">help</xref>
   </listitem>
   <listitem>
<xref linkend="license">license</xref>
   </listitem>
   <listitem>
<xref linkend="package">package</xref>
   </listitem>
   <listitem>
<xref linkend="release">release</xref>
   </listitem>
   <listitem>
<xref linkend="run">run</xref>
   </listitem>
   <listitem>
<xref linkend="save">save</xref>
   </listitem>
   <listitem>
<xref linkend="share">share</xref>
</listitem>
</itemizedlist>
<sect1 id="create"><title>create</title>
<para><title>create</title>
Usage:</para>
<para><programlisting>
quickly create ubuntu-application path/to/project_name</programlisting>
</para><para>
where "project_name" is one or more words separated by an underscore and
path/to can be any existing path.
</para><para>
This will create and run a new project, including Python code, 
<application>Glade</application> files, and packaging files to make the project work. After
creating the project, get started by:
</para>
<itemizedlist>
<listitem><para>
Changing your working directory to the new project:</para>
<para><programlisting>cd path/to/project_name</programlisting></para>
</listitem><listitem>
<para>Edit the UI with <application>Glade</application>:</para>
<para><programlisting>quickly design</programlisting></para>
</listitem><listitem>
<para>Edit the Python code:</para>
<para><programlisting>quickly edit</programlisting></para>
</listitem>
</itemizedlist>
</sect1>

<sect1 id="dialog"><title>add dialog</title>
<para><title>dialog</title>
Usage:</para>
<para><programlisting>quickly add dialog dialog-name</programlisting></para>
<para>where dialog-name is one or more words seperated with a dash</para>
<para>
This will create:
</para>
<itemizedlist>
<listitem><para>
A subclass of gtk.Dialog called DialogNameDialog in the module DialogNameDialog.py
</para></listitem>
<listitem><para>
A <application>Glade</application> file called DialogNameDialog.ui in the ui directory
</para></listitem>
<listitem><para>
A catalog file called dialog_name_dialog.xml also in the ui directory
</para></listitem></itemizedlist>
<para>
To edit the UI for the dialog, run:</para>
<para><programlisting>quickly design
</programlisting></para>
<para>
To edit the behavior, run:</para>
<para><programlisting>quickly edit</programlisting></para>
<para>
To use the dialog you have to invoke it from another python file:
</para>
<itemizedlist>
<listitem><para><programlisting>
Import the dialog
import DialogNameDialog
</programlisting></para></listitem>
<listitem><para><programlisting>
Create an instance of the dialog
dialog = DialogNameDialog.NewDialogNameDialog()
</programlisting></para></listitem>
<listitem><para><programlisting>
Run the dialog and hide the dialog
result = dialog.run()
dialog.hide()
</programlisting></para></listitem>
</itemizedlist>
</sect1>

<sect1 id="edit"><title>edit</title>
<para><title>edit</title>
Usage:</para>
<para><programlisting>
quickly edit
</programlisting></para><para>
A convenience command to open all of your python files in your project 
directory in your default editor, ready for editing.
</para>
</sect1>

<sect1 id="design"><title>design</title>
<para><title>design</title>
Usage:</para><para><programlisting>
quickly design
</programlisting></para><para>
Opens <application>Glade</application> UI editor so that you can edit the UI for dialogs
and windows in your project. Note that you *must* open <application>Glade</application>
in this manner for <application>Quickly</application> to work. If you try to open <application>Glade</application>
directly, and the open the UI files, <application>Glade</application> will throw errors
and won't open the files.
</para>
</sect1>

<sect1 id="help"><title>help</title>
<para><title>help</title>
Usage:</para><para><programlisting>
quickly help
</programlisting></para><para>
Opens a web browser with the help index.
</para>
</sect1>

<sect1 id="license"><title>license</title>
<para><title>license</title>
Usage:</para><para><programlisting>
quickly license &#60;Your_Licence&#61;
</programlisting></para><para>
Adds license to project files. Before using this command, you should:
</para>
<itemizedlist>
<listitem><para>
run "quickly save" in case something goes wrong
</para></listitem>
<listitem><para>
Edit the file Copyright to include your authorship.
</para></listitem><listitem><para>
If you want to put your own <application>Quickly</application> unsupported Licence, remove and replace the tags
   ### BEGIN AUTOMATIC LICENCE GENERATION and ### END AUTOMATIC LICENCE GENERATION
   in it by your own licence.
</para></listitem><listitem><para>
Executes either <programlisting>quickly license</programlisting> or <programlisting>quickly licence &#60;License&#61;</programlisting>
   where &#60;License&#61; can be either:
   - GPL-3 (default)
   - GPL-2
</para></listitem>
</itemizedlist>
<para>
This will modify the Copyright file with the chosen licence (with GPL-3 by default).
Updating previous chosen Licence if needed.
If you previously removed the tags to add your own licence, it will leave it pristine.
If no name is attributed to the Copyright, it will try to retrieve it from Launchpad
(in <application>Quickly</application> release or <application>Quickly</application> share command only)
</para><para>
Finally, this will copy the Copyright at the head of every files.
</para><para>
Note that if you don't run <application>Quickly</application> licence before calling <application>Quickly</application> release or <application>Quickly</application>
share, this one will execute it for you and guess the copyright holder from your
launchpad account if you didn't update it.
</para>
</sect1>

<sect1 id="package"><title>package</title>
<para><title>package</title>
Usage:</para><para><programlisting>
quickly package
</programlisting></para><para>
Creates a debian file (deb) from your project. Before running
the package command you can edit the Icon and Category entry of *.desktop.in 
file, where * is the name of your project.
</para><para>
Note that if you didn't run <application>Quickly</application> release, <application>Quickly</application> share
or <application>Quickly</application> change-lp-project you may miss the name, email in
setup.py. You can edit them if you don't want to use any of these
commands afterwards. Those changes are not a mandatory at all for
testing purpose.
</para>
</sect1>

<sect1 id="release"><title>release</title>
<para><title>release</title>
Usage:</para><para><programlisting>
quickly release
</programlisting></para><para>
Posts a release of your project to a PPA on launchpad so that
users can install the application on their system. 
</para><para>
You can also execute:
<programlisting>quickly release &#60;release_number&#61;</programlisting> of you don't want to use current
release_number. The release_number must be a number.
</para><para>
<programlisting>quickly release &#60;release_number&#61;</programlisting> notes about changes
where "notes about changes" is optional text describing what changes
were made since the last save
</para><para>
Before running <application>Quickly</application> release, you should: create your account
and a project page on http://launchpad.net.
You also have to add a PPA to your launchpad account.
</para><para>
Name, email and version setup.py will be automatically changed.
(version will be &#60;current_release&#61; and bzr will commit and tagged.
Once the release is done,  &#60;current_release&#61; will be incremented
by 0.1 to be ready for next release.
</para><para>
If you previously used <application>Quickly</application> shared &#60;current_release&#61;~publicX
will be dropped to release &#60;current_release&#61; version
(&#60;current_release&#61;~publicX      &#60;current_release&#61;)
You can modify the description and long description if you wish.
</para><para>
You can run <programlisting>quickly package</programlisting> and test your package to make sure it
installs as expected. (This is not mandatory)
</para>
</sect1>

<sect1 id="run"><title>run</title>
<para><title>run</title>
Usage:</para><para><programlisting>
quickly run
</programlisting></para><para>
Runs your application. This is the best way to try test it out
while you are developing it. It starts up the main project window.
</para>
</sect1>

<sect1 id="save"><title>save</title>
<para><title>save</title>
Usage:</para><para><programlisting>
quickly save notes about changes
</programlisting></para><para>
where "notes about changes" is optional text describing what changes
were made since the last save.
</para><para>
This command commits all changes since the last save to bzr. Note that 
it does not push changes to any back up location. If you need revert
or otherwise use the revision control, use bzr directly:
<programlisting>bzr help</programlisting>
</para>
<para>Before running "save" for the first time, you should tell bzr who you are: <programlisting>bzr whoami "My Name &lt;my@email.com&gt;"</programlisting></para>
</sect1>

<sect1 id="share"><title>share</title>
<para>
<title>share</title>
Usage:</para><para><programlisting>
quickly share</programlisting>
</para><para>
Updates your PPA with the the latest saved project changes.
</para><para>
Before running <application>Quickly</application> release, you should: create your account
on http://launchpad.net.
You also have to add a PPA to your launchpad account.
</para><para>
Name, email and version setup.py will be automatically changed.
(version will be &#60;current_release~publicX&#61; where X will be incremented
at each <application>Quickly</application> share execution)
You can modify the description and long description if you wish.
</para>
</sect1>
</chapter>

<chapter id="Quickly-links">
<title>Links</title>
<para>
  <itemizedlist>
   <listitem>
    <para><ulink url="http://developer.ubuntu.com/">Ubuntu App Developer portal</ulink></para>
   </listitem>
   <listitem>
    <para><ulink url="http://blog.didrocks.fr/post/Build-your-application-quickly-with-Quickly%3A-Inside-Quickly-part-1">Blog series on <application>Quickly</application></ulink></para>
   </listitem>
   <listitem>
    <para><ulink url="http://docs.python.org/reference/">Language: Python Language Reference</ulink></para>
   </listitem>
   <listitem>
    <para><ulink url="http://www.python.org/doc/2.7/library/index.html">Core Library: Python 2.7 Library Reference</ulink></para>
   </listitem>
   <listitem>
    <para><ulink url="http://readthedocs.org/docs/python-gtk-3-tutorial/en/latest/index.html">UI Library: Python GTK+ 3 Tutorial</ulink></para>
   </listitem>
   <listitem>
    <ulink url="http://library.gnome.org/devel/glade/stable/">UI Editing: <application>Glade</application> User Documentation</ulink>
   </listitem>
   <listitem>
    <ulink url="http://library.gnome.org/users/gedit/stable/index.html">Editor: Gedit Help</ulink>
   </listitem>
   <listitem>
    <ulink url="http://bazaar.canonical.com/">Version Control: Bazaar</ulink>
   </listitem>
  </itemizedlist>
</para>
</chapter>
</book>