gnome-devel-docs master - en to fr translation catalogue (1409 entries)

note: (itstool) path: info/desc
en: Learn how to lay out UI components, like Images and Labels.
fr: Apprenez à disposer les éléments d'interface graphique, comme les images ou les étiquettes.

note: (itstool) path: page/title
en: 2. Welcome to the Grid
fr: 2. Bienvenue devant la Grid

note: (itstool) path: synopsis/p
en: This tutorial will show you how to create basic widgets, or parts of the GNOME user interface, like Images and Labels. You'll then learn how to arrange them all in a Grid, which lets you put widgets exactly where you want them.
fr: Ce tutoriel vous montrera comment créer des composants graphiques basiques, ou des parties de l'interface utilisateur de GNOME, comme les images ou les étiquettes. Vous apprendrez ensuite comment les arranger tous dans une grille, qui vous permet de placer les widgets où vous le souhaitez.

note: (itstool) path: note/p
en: Have you taken <link xref="hellognome.js">the first tutorial in this series</link> already? You'll want to do so before continuing.
fr: Avez vous lu <link xref="hellognome.js">le premier tutoriel de cette série</link> ? Faites le avant de continuer.

note: (itstool) path: section/title
en: Going native
fr: Côté natif

note: (itstool) path: section/p
en: In the last tutorial, we created what was basically a GNOME window frame for a web app. All the GNOME-specific code we needed to learn revolved around putting the WebView -- the widget containing our application -- into an ApplicationWindow, and telling it to display. The application itself was written in HTML and JavaScript, just like most pages on the web.
fr: Dans le dernier tutoriel, nous avons créé un cadre de fenêtre GNOME pour une application web. Tout le code spécifique à GNOME dont nous avons eu besoin consistait à mettre la WebView ­– le composant graphique contenant notre application – dans notre fenêtre applicative, et lui dire de s'afficher. L'application elle-même était écrite en HTML et JavaScript, comme la plupart des pages du web.

note: (itstool) path: section/title
en: Setting up our application
fr: Mise en place de notre application

note: (itstool) path: section/p
en: Before we dig out any widgets from the GTK+ toolbox, we first need to write the basic boilerplate code that our application requires.
fr: Avant de sortir des outils de notre boîte à outils GTK+, nous devons écrire du code d'enrobage requis par l'application.

note: (itstool) path: section/p
en: This part always goes at the start of your code. Depending on what you'll be doing with it, you may want to declare more imports here. What we're writing today is pretty basic, so these are all we need; Gtk for the widgets, and Lang so we can use Lang.bind to connect our application's activate and startup signals to the requisite functions.
fr: Cette partie va toujours au début de votre code. Selon ce que vous souhaitez en faire, vous pourriez importer plus de choses ici. Cet exemple est assez basique, aussi nous n'avons pas besoin de plus ; Gtk pour les composants graphiques et Lang pour pouvoir utilise Lang.bind pour connecter les signaux « activate » et « startup » aux fonctions correspondantes.

note: (itstool) path: section/p
en: Speaking of which:
fr: À propos de cela :

note: (itstool) path: section/code
en: 
    const WelcomeToTheGrid = new Lang.Class({
        Name: 'Welcome to the Grid',
    
        // Create the application itself
        _init: function() {
            this.application = new Gtk.Application();
    
            // Connect 'activate' and 'startup' signals to the callback functions
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Callback function for 'activate' signal presents windows when active
        _onActivate: function() {
            this._window.present();
        },
    
        // Callback function for 'startup' signal builds the UI
        _onStartup: function() {
            this._buildUI ();
        },
fr: 
    const WelcomeToTheGrid = new Lang.Class({
        Name: 'Bienvenue devant la Grid',
    
        // Création de l'application
        _init: function() {
            this.application = new Gtk.Application();
    
            // Connection des signaux 'activate' et 'startup' aux fonctions de rappel
            this.application.connect('activate', Lang.bind(this, this._onActivate));
            this.application.connect('startup', Lang.bind(this, this._onStartup));
        },
    
        // Fonction de rappel pour que le signal 'activate' présente la fenêtre quand elle est activée
        _onActivate: function() {
            this._window.present();
        },
    
        // Fonction de rappel pour que le signal 'startup' construise l'interface graphique
        _onStartup: function() {
            this._buildUI ();
        },

note: (itstool) path: section/title
en: Reaching into the GTK+ toolbox
fr: Sortons la boîte à outils GTK+

note: (itstool) path: section/title
en: Tweaking the Grid
fr: Manipulons la Grid

note: (itstool) path: section/p
en: That makes it look something like this:
fr: Cela ressemble à présent à quelque chose comme ceci :

note: (itstool) path: section/p
en: That makes it look like this:
fr: Cela ressemble à présent à ceci :

note: (itstool) path: section/title
en: Using stock images
fr: Utilisation des images de la collection

note: (itstool) path: section/title
en: Complete code sample
fr: Exemple complet de code

note: (itstool) path: page/title
en: 3. Getting the Signal
fr: 3. Connexion des signaux

note: (itstool) path: section/title
en: A basic application
fr: Une application basique

note: (itstool) path: section/title
en: Flip the switch
fr: Commuter l'interrupteur

note: (itstool) path: section/title
en: Tuning the radio
fr: Choisir le bouton de radio

note: (itstool) path: section/title
en: Complete code samples
fr: Exemples complets de code

note: (itstool) path: section/title
en: Code sample with Button
fr: Exemple de code utilisant un Button

note: (itstool) path: section/title
en: Code sample with Switch
fr: Exemples de code avec un Switch

note: (itstool) path: section/title
en: Code sample with RadioButton
fr: Exemples de code avec un RadioButton

note: (itstool) path: section/title
en: Code sample with Entry
fr: Exemples de code avec une Entry

note: (itstool) path: info/desc
en: Display information about an application
fr: Afficher des informations à propos d'une application

note: (itstool) path: page/p
en: An AboutDialog example using Gtk.ApplicationWindow and Menu
fr: Un exemple AboutDialog utilisant Gtk.ApplicationWindow et Menu

note: (itstool) path: note/p
en: <em style="bold">You need to be running Gtk3.4 or later for this to work</em>
fr:  <em style="bold">GTK 3.4 ou supérieur est requis pour que cela fonctionne</em>

note: (itstool) path: page/p (itstool) path: section/p
en: In this sample we used the following:
fr: Dans cet exemple, les éléments suivants sont utilisés :

note: (itstool) path: page/p
en: A modal dialog window which shows information about an application and its creators. This one is triggered by clicking "About" in the application's menu, which is normally a good place to put it.
fr: Une boîte de dialogue modale qui affiche des informations sur une application ainsi que sur ses auteurs. Celle-ci est activée en cliquant sur « À propos » dans le menu de l'application, ce qui est d'habitude l'emplacement approprié.

note: (itstool) path: info/desc
en: A window that displays information about an application
fr: Une boîte de dialogue qui affiche des informations à propos d'une application

note: (itstool) path: page/p
en: An AboutDialog example using Gtk.ApplicationWindow and Menu (the "about" is displayed if "About" in the menu is selected).
fr: Un exemple AboutDialog utilisant Gtk.ApplicationWindow et Menu (le « about » s'affiche si « À propos » a été sélectionné dans le menu).

note: (itstool) path: section/title
en: Code used to generate this example
fr: Code utilisé pour générer cet exemple

note: (itstool) path: section/title
en: Useful methods for an AboutDialog widget
fr: Méthodes utiles pour un composant graphique AboutDialog

note: (itstool) path: section/title
en: API References
fr: Références API

note: (itstool) path: info/desc
en: Coming soon...
fr: Prochainement...

note: (itstool) path: credit/name
en: GNOME Documentation Project
fr: Projet de Documentation GNOME

note: (itstool) path: page/title
en: Audio player
fr: Lecteur audio

note: (itstool) path: info/desc
en: A beginner's guide to writing GNOME applications in JavaScript, including code samples and practice exercises.
fr: Un guide pour débuter la programmation d'applications GNOME en JavaScript, incluant des exemples de code et des exercices pratiques.

note: (itstool) path: page/title
en: Tutorial for beginners and code samples
fr: Tutoriel pour débutants et exemples de code

note: (itstool) path: note/p
en: GNOME Shell is what you see when you click on "Activities" in the top-left corner of your screen. It also controls the clock and the rest of the top panel. Besides showing how you to write GNOME applications, these tutorials will also show you how to use JavaScript to write GNOME Shell extensions, which give it new features or change the way it does things.
fr: GNOME Shell est le bureau qui s'affiche quand vous cliquez sur « Activités » dans le coin supérieur gauche de votre écran. Il contrôle aussi l'horloge et toute la barre supérieure. En plus de vous guider dans la programmation d'applications GNOME, ces tutoriels vont aussi vous montrer comment utiliser JavaScript pour programmer des extensions pour GNOME Shell, afin de lui apporter de nouvelles fonctionnalités ou modifier son comportement.

note: (itstool) path: section/title
en: Getting Started
fr: Premiers pas

note: (itstool) path: section/p
en: These tutorials are designed for people who already know how to write in JavaScript, and who have GNOME installed on their computers already, but who are new to developing GNOME applications. If you don't already know JavaScript, or if you need help getting GNOME set up, take a look at these resources first:
fr: Ces tutoriels sont destinés à des personnes ayant déjà des connaissances en JavaScript et qui ont déjà installé GNOME comme interface de bureau sur leur ordinateur, mais qui n'ont encore jamais développé d'application GNOME. Si vous n'avez pas de connaissance en JavaScript, ou si vous avez besoin d'aide pour installer GNOME, consultez d'abord ces ressources :

note: (itstool) path: item/p
en: <link href="http://eloquentjavascript.net/contents.html">Eloquent JavaScript</link> is a free, Creative Commons-licensed book, which explains the basics of JavaScript programming. Since you won't be writing JavaScript for the web, you only need to read up to chapter 10 or so.
fr: <link href="http://eloquentjavascript.net/contents.html">Eloquent JavaScript</link> est un livre gratuit, sous licence Creative Commons et qui explique les bases de la programmation en JavaScript. Comme vous n'allez pas programmer en JavaScript pour le Web, il vous suffit de lire jusqu'au chapitre 10 environ.

note: (itstool) path: item/p
en: <link href="http://www.gnome.org/getting-gnome/">Download GNOME</link> as part of a distribution, like Fedora, openSUSE, or Ubuntu. Each distribution has its own instructions for how to get GNOME.
fr: <link href="http://www.gnome.org/getting-gnome/">Procurez-vous GNOME</link> pour une distribution, comme Fedora, openSUSE ou Ubuntu. Chaque distribution possède son propre moyen d'installer GNOME.

note: (itstool) path: item/p
en: <link xref="set-up-gedit.js">Set up gedit</link> for writing applications. GNOME's text editor, gedit, is sometimes just called "text editor".
fr: <link xref="set-up-gedit.js">Configurer Gedit</link> pour écrire des applications. Gedit est l'éditeur de texte de GNOME et parfois simplement appelé « éditeur de texte ».

note: (itstool) path: section/title
en: Tutorials
fr: Tutoriels

note: (itstool) path: section/title
en: Code samples
fr: Exemples de code

note: (itstool) path: section/p
en: These samples show how to use widgets in your GNOME applications. Each one demonstrates a complete application which showcases the featured widget. At the end of each sample, you will find links to more detailed reference material.
fr: Ces exemples montrent la manière d'utiliser des éléments graphiques dans vos applications GNOME. Chacun d'eux fait la démonstration d'une application complète mettant en valeur un composant graphique en particulier. À la fin de chaque exemple, vous trouverez des liens vers de plus amples informations.

note: (itstool) path: section/p
en: To run the code samples:
fr: Pour exécuter les exemples de code :

note: (itstool) path: item/p
en: Copy and paste the code into <var>filename</var>.js
fr: Copiez puis collez le code dans <var>nomdufichier</var>.js

note: (itstool) path: item/p
en: In the terminal, type:
fr: Saisissez dans le terminal :

note: (itstool) path: item/screen
en: gjs <var>filename</var>.js
fr: gjs <var>nomdufichier</var>.js

note: (itstool) path: section/title
en: Windows
fr: Fenêtres

note: (itstool) path: section/title
en: Display widgets
fr: Éléments graphiques d'affichage

note: (itstool) path: section/title
en: Buttons and toggles
fr: Boutons et inverseurs

note: (itstool) path: section/title
en: Numeric and text data entry
fr: Entrée de données numériques et de texte

note: (itstool) path: section/title
en: Multiline text editor
fr: Éditeur de texte multiligne

note: (itstool) path: section/title
en: Menu, combo box and toolbar widgets
fr: Menu, boîte combinée et éléments graphiques de barre d'outils

note: (itstool) path: section/title
en: TreeView widget
fr: Élément graphique arborescent

note: (itstool) path: section/title (itstool) path: steps/title
en: Selectors
fr: Sélecteurs

note: (itstool) path: section/title
en: File selectors
fr: Sélecteurs de fichiers

note: (itstool) path: section/title
en: Font selectors
fr: Sélecteurs de polices

note: (itstool) path: section/title
en: Color Selectors
fr: Sélecteurs de couleurs

note: (itstool) path: section/title
en: Layout containers
fr: Conteneurs d'agencement

note: (itstool) path: section/title
en: Ornaments
fr: Décorations

note: (itstool) path: section/title
en: Scrolling
fr: Barre de défilement

note: (itstool) path: section/title
en: Miscellaneous
fr: Divers

note: (itstool) path: section/title
en: Exercises
fr: Exercices

[ctx: text]
note: (itstool) path: info/title
en: GTK+ widgets sample code (Python)
fr: Exemple de code pour composants graphiques GTK (Python)

note: (itstool) path: info/desc
en: A guide to GUI programming using GTK+, including code samples and practice exercises.
fr: Un guide pour la programmation d'interfaces graphiques avec GTK+, incluant des exemples de code et des exercices pratiques.

note: (itstool) path: synopsis/p
en: If you are a beginner and you would like a tutorial to guide you step by step in an exploration of what you can do with GTK+ 3, you should go to the <link xref="tutorial.py"/> page. If you are looking for a specific widget, you can find it in the sections below.
fr: Si vous êtes débutant et que vous souhaitez un tutoriel pas à pas pour vous guider dans la découverte des possibilités de GTK+ 3, vous devriez consulter cette page <link xref="tutorial.py"/>. Si vous recherchez un composant graphique en particulier, vous le trouverez dans les sections ci-dessous.

[ctx: text]
note: (itstool) path: info/title
en: Tutorial for beginners (Vala)
fr: Tutoriel pour débutants (Vala)

note: (itstool) path: info/desc
en: A beginner's guide to GUI programming using GTK+, including code samples and practice exercises.
fr: Un guide du débutant en programmation d'interfaces graphiques avec GTK+, incluant des exemples de code et des exercices pratiques.

note: (itstool) path: synopsis/p
en: Although these tutorials are designed for beginners, we can't cover all the basics. Before attempting to follow these tutorials, you are expected to be familiar with the following concepts:
fr: Bien que ces tutoriels soient conçus pour les débutants, ils ne couvrent pas toutes les bases de la programmation. Avant d'essayer de suivre ces tutoriels, vous devez être à l'aise avec les concepts suivants :

note: (itstool) path: item/p
en: Object oriented programming
fr: La programmation orientée objet

note: (itstool) path: item/p
en: The Vala programming language:
fr: Le langage de programmation Vala :

note: (itstool) path: item/p
en: <link href="https://live.gnome.org/Vala/Tutorial">The Vala Tutorial</link>
fr: <link href="https://wiki.gnome.org/Vala/Tutorial">Tutoriel Vala</link>

note: (itstool) path: synopsis/p
en: By following these tutorials you will learn the basics of GUI programming using GTK+.
fr: En suivant ces tutoriels, vous apprendrez les bases de la programmation d'interfaces graphiques en GTK+.

note: (itstool) path: item/p
en: Copy and paste the code into <var>filename</var>.vala
fr: Copiez puis collez le code dans <var>nomdufichier</var>.vala

note: (itstool) path: item/p
en: In the terminal type:
fr: Saisissez dans le terminal :

note: (itstool) path: item/screen
en: valac --pkg gtk+-3.0 <var>filename</var>.vala
fr: valac --pkg gtk+-3.0 <var>nomdufichier</var>.vala

note: (itstool) path: item/screen
en: ./<var>filename</var>
fr: ./<var>nomdufichier</var>

note: (itstool) path: info/desc
en: A button widget which emits a signal when clicked
fr: Un bouton qui émet un signal quand il est cliqué

note: (itstool) path: page/p
en: A button widget connected to a callback function that reverses its label when clicked.
fr: Un bouton connecté à une fonction de rappel qui inverse son étiquette quand il est cliqué.

note: (itstool) path: info/desc
en: A button which can be connected to other widgets
fr: Un bouton qui peut être connecté à d'autres composants graphiques.

note: (itstool) path: page/p
en: A button widget that changes its label when you click it.
fr: Un bouton qui change d'étiquette quand il est cliqué.

note: (itstool) path: page/p
en: A button widget connected to a simple callback function.
fr: Un bouton connecté à une fonction de rappel simple.

note: (itstool) path: section/title
en: Useful methods for a Button widget
fr: Méthode utiles pour un composant graphique Button

note: (itstool) path: item/p
en: <code>set_relief(Gtk.ReliefStyle.NONE)</code> sets to none the relief style of the edges of the Gtk.Button - as opposed to <code>Gtk.ReliefStyle.NORMAL</code>.
fr: La méthode <code>set_relief(Gtk.ReliefStyle.NONE)</code> annule le style en relief des bordures du Gtk.Button - à l'opposé, <code>Gtk.ReliefStyle.NORMAL</code> le rétablit.

note: (itstool) path: item/p
en: If the label of the button is a <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">stock icon</link>, <code>set_use_stock(True)</code> sets the label as the name of the corresponding stock icon.
fr: Si l'étiquette du bouton est issue de la <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">collection d'icônes</link>, la méthode <code>set_use_stock(True)</code> assigne l'étiquette comme étant le nom de l'icône correspondante de la collection.

note: (itstool) path: item/p
en: To set an image (e.g. a stock image) for the button <code>button</code>:
fr: Pour assigner une image (par ex. une image de la collection d'images) au bouton <code>button</code> :

note: (itstool) path: item/p
en: You should not set a label for the button after this, otherwise it will show the label and not the image.
fr: Vous ne devez plus assigner d'étiquette au bouton après cela, sinon il affichera l'étiquette au lieu de l'image.

note: (itstool) path: item/p
en: If we use <code>set_focus_on_click(False)</code> the button will not grab focus when it is clicked by the mouse. This could be useful in places like toolbars, so that the keyboard focus is not removed from the main area of the application.
fr: La fonction <code>set_focus_on_click(False)</code> empêche le bouton de prendre le focus quand vous cliquez dessus avec la souris. Cela peut être utile dans les barres d'outils, afin que la zone principale de l'application ne perde pas le focus clavier.

note: (itstool) path: page/title
en: Button widget
fr: Composant graphique Button

note: (itstool) path: page/p
en: In this sample we used the following: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Button.html">Gtk.Button</link>
fr: Dans cet exemple, nous avons utilisé un <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Button.html">Gtk.Button</link>

note: (itstool) path: item/p
en: <code>set_spacing(spacing)</code> sets the spacing, in pixels, between the buttons of the box.
fr: <code>set_spacing(spacing)</code> fixe l'espacement, en pixels, entre les boutons de la boîte.

note: (itstool) path: item/p
en: Copy and paste the code into <var>filename</var>.c
fr: Copiez et collez le code dans <var>nomdufichier</var>.c

note: (itstool) path: note/p
en: For more information about compiling GTK+ programs see <link href="http://developer.gnome.org/gtk3/3.4/gtk-compiling.html">Compiling GTK+ Applications on UNIX</link>.
fr: Pour plus d'informations, consultez <link href="http://developer.gnome.org/gtk3/3.4/gtk-compiling.html">Compiler des applications GTK+ sur UNIX</link>.

note: (itstool) path: info/desc
en: Create widgets with a discrete ToggleButton
fr: Créer des composants graphiques avec un ToggleButton

note: (itstool) path: page/p
en: This CheckButton toggles the title.
fr: Cette CaseAcocher inverse le titre.

note: (itstool) path: info/desc
en: A box which can be checked or unchecked
fr: Une case que l'on peut cocher ou décocher

note: (itstool) path: page/p
en: This application has a CheckButton. Whether the box is checked dictates whether the window's title bar shows anything.
fr: Cette application possède un CheckButton. L'état de la case – cochée ou non – indique s'il y a quelque chose d'affiché ou non dans la barre de titre de la fenêtre.

note: (itstool) path: page/p
en: A CheckButton sends the "toggled" signal when it's checked or unchecked. While it's checked, the "active" property is true. While it's not, "active" tests as false.
fr: Un CheckButton envoie le signal d'inversion « toggled » quand il est cochée ou décochée. Tant qu'il est coché, la propriété « active » est vraie et tant qu'elle ne l'est pas, elle est fausse.

note: (itstool) path: section/title
en: Libraries to import
fr: Bibliothèques à importer

note: (itstool) path: section/p
en: These are the libraries we need to import for this application to run. Remember that the line which tells GNOME that we're using Gjs always needs to go at the start.
fr: Ce sont les bibliothèques que nous devons importer pour faire fonctionner cette application. N'oubliez pas que la ligne qui informe GNOME que nous allons utiliser Gjs doit toujours se trouver au début.

note: (itstool) path: section/title
en: Creating the application window
fr: Création de la fenêtre de l'application

note: (itstool) path: section/p
en: All the code for this sample goes in the CheckButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
fr: Tout le code de cet exemple va dans la classe CheckButtonExample. Le code ci-dessus crée une <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> qui contiendra la fenêtre et nos composants graphiques.

note: (itstool) path: section/p
en: The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> to put all our widgets into.
fr: Mettons tout le code nécessaire à la création de l'interface utilisateur dans la fonction _buildUI. Créons maintenant une nouvelle <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> pour y mettre tous nos composants graphiques.

note: (itstool) path: section/title
en: Creating the checkbutton
fr: Création de la case à cocher

note: (itstool) path: section/p
en: This code creates the checkbutton itself. The label next to the checkbutton is created by giving the checkbutton the "label" property and assigning a string value to it. Since this checkbutton toggles whether the window title is on or off, and the window title will be on to start with, we want the box to be checked by default. Whenever the user checks or unchecks the box, we call the _toggledCB function.
fr: Ce code ne génère que la case à cocher. Pour créer l'étiquette à côté de la case à cocher, il faut donner à la case à cocher la propriété « label » et lui assigner une valeur de chaîne. Comme la case à cocher s'inverse selon que le titre de la fenêtre s'affiche ou non (et nous le mettons en position affiché pour commencer), il faut que la case soit cochée par défaut. Ensuite, à chaque fois que l'utilisateur coche ou décoche la case, nous appelons la fonction _toggledCB.

note: (itstool) path: section/p
en: This code finishes up creating the UI, by telling the window to show itself and all child widgets (which is just the checkbutton in this case).
fr: Ce code termine la création de l'interface utilisateur en indiquant à la fenêtre de s'afficher toute seule avec tous ses composants graphiques enfants (il n'y a que la case à cocher dans cet exemple).

note: (itstool) path: section/title
en: Function which handles the checkbutton's toggling
fr: Fonction prenant en charge l'inversion de la case à cocher

note: (itstool) path: section/p
en: If the checkbutton is toggled from on to off, we want the window title to disappear. If it's toggled from off to on, we want it to reappear. We can tell which way it was toggled by testing to see whether it's active (checked) or not afterwards. A simple if / else statement which calls the checkbutton's get_active() method will work for this.
fr: Nous voulons que le titre de la fenêtre disparaisse quand la case à cocher devient décochée, et qu'elle réapparaisse quand elle devient cochée. Pour savoir quel est son état, il nous faut la tester. Nous appellerons pour cela la méthode get_active() dans un bloc if ou else.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished CheckButtonExample class, and set the application running.
fr: Enfin, nous créons un nouvel exemple de la classe CheckButtonExample et démarrons l'application.

note: (itstool) path: section/title
en: In-depth documentation
fr: Documentation approfondie

note: (itstool) path: info/desc
en: A toggle button in a window
fr: Un bouton de basculement dans une fenêtre

note: (itstool) path: section/title
en: Useful methods for a CheckButton widget
fr: Méthodes utiles pour un composant graphique CheckButton

note: (itstool) path: info/desc
en: A button to launch a color selection dialog
fr: Un bouton pour ouvrir une boîte de dialogue de sélection de couleur

note: (itstool) path: page/p
en: This ColorButton launches a color selection dialog and prints in the terminal the RGB values of the color selected.
fr: Ce ColorButton ouvre une boîte de dialogue pour sélectionner une couleur et affiche dans le terminal les valeurs RVB de la couleur sélectionnée.

note: (itstool) path: section/title
en: Useful methods for a ColorButton widget
fr: Méthode utiles pour un composant graphique ColorButton

note: (itstool) path: page/p
en: RGB values of the selected color are shown in the label.
fr: Les valeurs RVB de la couleur sélectionnée sont affichées dans cette étiquette.

note: (itstool) path: info/desc
en: A text-only drop-down menu
fr: Un menu déroulant pour texte uniquement

note: (itstool) path: page/p
en: A ComboBox is a drop-down menu. The difference between a <link xref="combobox.js">ComboBox</link> and a ComboBoxText is that a ComboBoxText just has basic text options, while a full ComboBox uses a ListStore or TreeStore (which are basically spreadsheets) to show things like branching options, or pictures to go alongside each choice.
fr: Une ComboBox est un menu déroulant. La différence entre une <link xref="combobox.js">ComboBox</link> et une ComboBoxText est que cette dernière ne possède que des options texte de base, alors que la ComboBox utilise un ListStore ou un TreeStore (qui sont en gros des feuilles de calcul) pour afficher des éléments arborescents ou des images à côté de chaque choix.

note: (itstool) path: note/p
en: Unless you need the added features of a full ComboBox, or are comfortable working with ListStores and TreeStores, you may find it a lot simpler to use a ComboBoxText whenever possible.
fr: À moins que vous n'ayez besoin des fonctions supplémentaires d'une ComboBox, ou si vous vous sentez à l'aise dans la manipulation des ListStore et TreeStore, il est préférable d'utiliser la simplicité d'une ComboBoxText chaque fois que possible.

note: (itstool) path: section/p
en: All the code for this sample goes in the MessageDialogExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
fr: Tout le code de cet exemple va dans la classe MessageDialogExample. Le code ci-dessus crée une <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> pour nos composants graphiques et la fenêtre qui les contient.

note: (itstool) path: section/p
en: The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> to put all our widgets into.
fr: La fonction _buildUI est l'endroit où nous mettons tout le code nécessaire à la création de l'interface utilisateur de l'application. La première étape consiste à créer une <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> pour y mettre tous nos éléments graphiques.

note: (itstool) path: section/title
en: Creating the ComboBoxText
fr: Création de la ComboBoxText

note: (itstool) path: section/p
en: After we create the ComboBoxText, we use its <file>append_text</file> method to add text strings to it. Like the entries in an array, they each have a number for an ID, starting with 0. To make things simpler, you can actually create an array for your ComboBoxText entries, then use a for loop to append them in order, like we did here.
fr: Après avoir créé la ComboBoxText, utilisons la méthode <file>append_text</file> pour lui ajouter des chaînes de texte. Comme les entrées d'un tableau, les chaînes ont chacune un nombre comme identifiant, en commençant par 0. Pour simplifier les choses, créons un tableau pour les entrées de la ComboBoxText et utilisons une boucle pour les ajouter dans l'ordre, comme ici.

note: (itstool) path: section/p
en: After we populate the ComboBoxText, we set its first entry to be active, so that we'll see the "Select distribution" line before we click on it. Then we connect its <file>changed</file> signal to the _onComboChanged function, so that it's called whenever you make a new selection from the drop-down menu.
fr: Après avoir garni la ComboBoxText, définissons sa première entrée pour qu'elle devienne active, nous pouvons ainsi voir la ligne « Select distribution » avant de cliquer dessus. Connectons ensuite son signal <file>changed</file> à la fonction _onComboChanged, pour qu'elle soit appelée à chaque fois que vous faites une nouvelle sélection dans le menu déroulant.

note: (itstool) path: note/p
en: If you'd like to add an entry to a ComboBoxText, you can use the <file>insert_text</file> method. And if you'd rather use a text string as an ID for each entry than rely on numbers alone, you can use the <file>append</file> and <file>insert</file> methods. See the links at the bottom of this tutorial for the details of how to use them.
fr: Pour ajouter une entrée dans une ComboBoxText, utilisez la méthode <file>insert_text</file>. Pour utiliser une chaîne texte plutôt qu'un identifiant pour chaque entrée se référant à un nombre seul, utilisez les méthodes <file>append</file> et <file>insert</file>. Reportez-vous aux liens au bas de ce tutoriel pour de plus amples informations sur leur utilisation.

note: (itstool) path: section/p
en: Finally, we add the ComboBoxText to the window, and tell the window to show itself and the widget inside it.
fr: Enfin, ajoutons la ComboBoxText à la fenêtre et indiquons à la fenêtre de s'afficher avec ses éléments graphiques à l'intérieur.

note: (itstool) path: section/title
en: Function which handles your selection
fr: Fonction prenant en charge votre sélection

note: (itstool) path: section/p
en: We're going to create a pop-up <link xref="messagedialog.js">MessageDialog</link>, which shows you a message based on which distro you select. First, we create the array of responses to use. Since the first string in our ComboBoxText is just the "Select distribution" message, we make the first string in our array blank.
fr: Nous allons créer une <link xref="messagedialog.js">MessageDialog</link> qui affiche un message en fonction de la distribution sélectionnée. Créons d'abord le tableau des réponses à utiliser. Comme la première chaîne de notre ComboBoxText est justement le message « Select distribution », laissons celle-ci vide.

note: (itstool) path: section/p
en: Before showing a MessageDialog, we first test to make sure you didn't choose the "Select distribution" message. After that, we set its text to be the entry in the array that corresponds to the active entry in our ComboBoxText. We do that using the <file>get_active</file> method, which returns the number ID of your selection.
fr: Avant d'afficher une MessageDialog, vérifions d'abord que vous n'avez pas choisi le message « Select distribution ». Ensuite, définissons son texte comme étant l'entrée dans le tableau qui correspond à l'entrée active de notre ComboBoxText. Cela se fait avec la méthode <file>get_active</file>, qui renvoie l'identifiant numérique de votre sélection.

note: (itstool) path: note/p
en: Other methods you can use include <file>get_active_id,</file> which returns the text ID assigned by <file>append,</file> and <file>get_active_text,</file> which returns the full text of the string you selected.
fr: Il existe d'autres méthodes alternatives : <file>get_active_id</file>, qui renvoie l'identifiant texte assigné par <file>append</file>, et <file>get_active_text</file>, qui renvoie le texte complet de la chaîne sélectionnée.

note: (itstool) path: section/p
en: After we create the MessageDialog, we connect its response signal to the _onDialogResponse function, then tell it to show itself.
fr: Une fois la MessageDialog terminée, connectons son signal de retour à la fonction _onDialogResponse et indiquons lui de s'afficher toute seule.

note: (itstool) path: section/p
en: Since the only button the MessageDialog has is an OK button, we don't need to test its response_id to see which button was clicked. All we do here is destroy the popup.
fr: Comme le seul bouton de la MessageDialog est le bouton OK, il n'est pas nécessaire de vérifier son response_id pour savoir quel bouton a été cliqué. Tout ce que nous faisons ici est détruire le message surgissant.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished ComboBoxTextExample class, and set the application running.
fr: Enfin, nous créons un nouvel exemple de la classe ComboBoxTextExample terminée et démarrons l'application.

note: (itstool) path: info/desc
en: A widget used to choose from a list of items
fr: Un composant graphique utilisé pour effectuer un choix dans une liste d'éléments

note: (itstool) path: page/p
en: This ComboBox prints to the terminal when you change your selection.
fr: Cette ComboBox s'affiche dans le terminal quand vous modifiez votre sélection.

note: (itstool) path: section/title
en: Creating the ListStore
fr: Création du ListStore

note: (itstool) path: item/p
en: <file>GObject.TYPE_BOOLEAN</file> -- True or false
fr: <file>GObject.TYPE_BOOLEAN</file> -- true ou false

note: (itstool) path: item/p
en: <file>GObject.TYPE_FLOAT</file> -- A floating point number (one with a decimal point)
fr: <file>GObject.TYPE_FLOAT</file> -- un nombre à virgule flottante

note: (itstool) path: item/p
en: <file>GObject.TYPE_STRING</file> -- A string of letters and numbers
fr: <file>GObject.TYPE_STRING</file> -- une chaîne de caractères (lettres ou chiffres)

note: (itstool) path: note/p
en: You need to put the line <file>const GObject = imports.gi.GObject;</file> at the start of your application's code, like we did in this example, if you want to be able to use GObject types.
fr: Pour pouvoir utiliser les types GObject, vous devez placer la ligne <file>const GObject = imports.gi.GObject;</file> au début du code de votre application, comme nous l'avons fait dans cet exemple.

note: (itstool) path: section/title
en: Creating the ComboBox
fr: Création de la ComboBox

note: (itstool) path: section/p
en: Finally, we add the ComboBox to the window, and tell the window to show itself and everything inside it.
fr: Enfin, ajoutons la ComboBox à la fenêtre et indiquons à la fenêtre de s'afficher avec ses éléments graphiques à l'intérieur.

note: (itstool) path: section/p
en: We're going to create a pop-up <link xref="messagedialog.js">MessageDialog</link>, which shows you a silly haiku based on which distro you select. First, we create the array of haiku to use. Since the first string in our ComboBox is just the "Select" message, we make the first string in our array blank.
fr: Nous allons créer une <link xref="messagedialog.js">MessageDialog</link> qui affiche un message en fonction de la distribution sélectionnée. Créons d'abord le tableau des réponses à utiliser. Comme la première chaîne de notre ComboBox est justement le message « Select distribution », laissons celle-ci vide.

note: (itstool) path: section/p
en: Before showing a MessageDialog, we first test to make sure you didn't choose the "Select" message. After that, we set its text to be the haiku in the array that corresponds to the active entry in our ComboBoxText. We do that using the <file>get_active</file> method, which returns the number ID of your selection.
fr: Avant d'afficher une MessageDialog, vérifions d'abord que vous n'avez pas choisi le message « Select distribution ». Ensuite, définissons son texte comme étant l'entrée dans le tableau qui correspond à l'entrée active de notre ComboBoxText. Cela se fait avec la méthode <file>get_active</file>, qui renvoie l'identifiant numérique de votre sélection.

note: (itstool) path: page/p
en: This ComboBox prints to the terminal your selection when you change it.
fr: Cette BoiteCombinee affiche votre sélection dans le terminal quand vous la modifiez.

note: (itstool) path: section/title
en: Useful methods for a ComboBox widget
fr: Méthode utiles pour un élément graphique BoiteCombinee

note: (itstool) path: info/desc
en: A popup window
fr: Une fenêtre surgissante

note: (itstool) path: page/title
en: Dialog
fr: Boîte de dialogue

note: (itstool) path: page/p
en: A dialog window that pops up when a button is pressed.
fr: Une boîte de dialogue qui surgit quand un bouton est enfoncé.

note: (itstool) path: page/p
en: A customizable popup window, which has a content area and an action area. This example dialog's content area contains a short message, and its action area contains a button which dismisses the dialog.
fr: Une fenêtre surgissante personnalisable, avec une zone de contenu et une zone d'action. Cet exemple de boîte de dialogue montre que dans la zone de contenu il y a un petit message et dans la zone d'action il y a un bouton qui ferme la boîte.

note: (itstool) path: page/p
en: A dialog with the response signal connected to a callback function.
fr: Une boîte de dialogue avec le signal de réponse connecté à une fonction de rappel.

note: (itstool) path: section/title
en: Useful methods for a Dialog widget
fr: Méthodes utiles pour un élément graphique BoiteDeDialogue

note: (itstool) path: item/p
en: Instead of <code>set_modal(True)</code> we could have <code>set_modal(False)</code> followed by <code>set_destroy_with_parent(True)</code> that would destroy the dialog window if the main window is closed.
fr: Au lieu de <code>set_modal(True)</code>, nous pouvons avoir <code>set_modal(False)</code> suivi de la méthode <code>set_destroy_with_parent(True)</code>, qui détruit la boîte de dialogue quand on ferme la fenêtre principale.

note: (itstool) path: item/p
en: <code>add_button(button_text="The Answer", response_id=42)</code>, where <code>42</code> is any integer, is an alternative to <code>add_button(button_text="text", response_id=Gtk.ResponseType.RESPONSE)</code>, where <code>RESPONSE</code> could be one of <code>OK, CANCEL, CLOSE, YES, NO, APPLY, HELP</code>, which in turn correspond to the integers <code>-5, -6,..., -11</code>.
fr: La méthode <code>add_button(button_text="The Answer", response_id=42)</code>, où <code>42</code> est un nombre entier, est une alternative à la fonction <code>add_button(button_text="text", response_id=Gtk.ResponseType.RESPONSE)</code>, où <code>RESPONSE</code> peut être l'une des valeurs <code>OK, CANCEL, CLOSE, YES, NO, APPLY, HELP</code> qui correspondent aux nombres entiers <code>-5, -6,..., -11</code>.

note: (itstool) path: page/p
en: A dialog with the response signal hooked up to a callback function.
fr: Une boîte de dialogue avec le signal de réponse connecté à une fonction de rappel.

note: (itstool) path: info/desc
en: A single line text entry field
fr: Un champ de saisie de texte sur une ligne

note: (itstool) path: page/title
en: Entry
fr: Entrée

note: (itstool) path: page/p
en: This application greets you in the terminal.
fr: Cette application vous accueille dans le terminal.

note: (itstool) path: info/desc
en: A single-line text entry field
fr: Un champ de saisie de texte sur une ligne

note: (itstool) path: page/p
en: This application greets you by name through a pop-up window.
fr: Cette application vous accueille par votre nom dans une fenêtre surgissante.

note: (itstool) path: page/p
en: This application greets you in the terminal with the name you provide.
fr: Cette application vous accueille dans le terminal avec le nom que vous fournissez.

note: (itstool) path: section/title
en: Useful methods for an Entry widget
fr: Méthodes utiles pour un élément graphique Entrée

note: (itstool) path: item/p
en: <code>get_buffer()</code> and <code>set_buffer(buffer)</code>, where <code>buffer</code> is a Gtk.EntryBuffer object, can be used to get and set the buffer for the entry.
fr: Les méthodes <code>get_buffer()</code> et <code>set_buffer(tampon)</code>, où <code>tampon</code> est un objet Gtk.EntryBuffer, peuvent être utilisées pour obtenir et définir le tampon de l'entrée.

note: (itstool) path: item/p
en: <code>get_text()</code> and <code>set_text("some text")</code> can be used to get and set the content for the entry.
fr: Les fonctions <code>get_text()</code> et <code>set_text("some text")</code> peuvent être utilisées pour obtenir et définir le contenu de l'entrée.

note: (itstool) path: item/p
en: <code>get_text_length()</code> is self-explanatory.
fr: La méthode <code>get_text_length()</code> parle d'elle-même.

note: (itstool) path: item/p
en: <code>get_text_area()</code> gets the area where the entry's text is drawn.
fr: La méthode <code>get_text_area()</code> obtient la position où le texte de l'entrée est dessiné.

note: (itstool) path: item/p
en: If we set <code>set_visibility(False)</code> the characters in the entry are displayed as the invisible char. This is the best available in the current font, but it can be changed with <code>set_invisible_char(ch)</code>, where <code>ch</code> is a Unicode charcater. The latter method is reversed by <code>unset_invisbile_char()</code>.
fr: Si nous définissons la méthode <code>set_visibility(False)</code>, les caractères de l'entrée sont affichés en tant que caractères invisibles. C'est la meilleur police disponible dans le type actuel, mais peut être modifié à l'aide de <code>set_invisible_char(ch)</code>, où <code>ch</code> est un caractère Unicode. Nous pouvons inverser cette denière fonction avec <code>unset_invisible_char()</code>.

note: (itstool) path: item/p
en: <code>set_max_length(int)</code>, where <code>int</code> is an integer, truncates every entry longer than <code>int</code> to have the desired maximum length.
fr: La méthode <code>set_max_length(int)</code>, où <code>int</code> est un nombre entier, coupe chaque entrée plus longue que <code>int</code> afin d'obtenir la longueur maximum désirée.

note: (itstool) path: item/p
en: By default, if you press the Entry key the Gtk.Entry emits the signal <code>"activate"</code>. If you would like to activate the default widget for the window (set using <code>set_default(widget)</code> on the window), then use <code>set_activates_default(True)</code>.
fr: Par défaut, si vous appuyez sur la touche Entrée, Gtk.Entry émet le signal <code>"activate"</code>. Si vous préférez activer l'élément graphique par défaut de la fenêtre (défini par la méthode <code>set_default(widget)</code> pour la fenêtre), utilisez alors <code>set_activates_default(True)</code>.

note: (itstool) path: item/p
en: To set a frame around the entry: <code>set_has_frame(True)</code>.
fr: Pour définir un cadre autour de l'entrée, utilisez la méthode <code>set_has_frame(True)</code>.

note: (itstool) path: item/p
en: <code>set_placeholder_text("some text")</code> sets the text to be displayed in the entry when it is empty and unfocused.
fr: La méthode <code>set_placeholder_text(« texte »)</code> définit le texte pour qu'il s'affiche dans l'entrée quand il est vide et inactif.

note: (itstool) path: item/p
en: <code>set_overwrite_mode(True)</code> and <code>set_overwrite_mode(False)</code> are self-explanatory.
fr: Les méthodes <code>set_overwrite_mode(True)</code> et <code>set_overwrite_mode(False)</code> parlent d'elles-mêmes.

note: (itstool) path: item/p
en: If we have <code>set_editable(False)</code> the user cannot edit the text in the widget.
fr: La méthode <code>set_editable(False)</code> n'autorise pas l'utilisateur à modifier le texte dans l'élément graphique.

note: (itstool) path: item/p
en: An Entry widget can display progress or activity information behind the text. We use <code>set_progress_fraction(fraction)</code>, where <code>fraction</code> is a <code>float</code> between <code>0.0</code> and <code>1.0</code> inclusive, to fill in the given fraction of the bar. We use <code>set_progress_pulse_step()</code> to set the fraction of total entry width to move the progress bouncing block for each call to <code>progress_pulse()</code>. The latter method indicates that some progress is made, and causes the progress indicator of the entry to enter "activity mode", where a block bounces back and forth. Each call to <code>progress_pulse()</code> causes the block to move by a little bit (the amount of movement per pulse is determined, as said before, by <code>set_progress_pulse_step()</code>).
fr: Un élément graphique Entry peut afficher la progression ou les informations d'activité derrière le texte. La méthode <code>set_progress_fraction(fraction)</code>, où <code>fraction</code> est un nombre flottant <code>float</code> compris entre <code>0.0</code> et <code>1.0</code> inclus, sert à remplir la fraction définie de la barre de progression. La méthode <code>set_progress_pulse_step()</code> définit la fraction de la largeur totale de l'entrée qui va se remplir d'un bloc à chaque appel à <code>progress_pulse()</code>. Cette dernière fonction indique qu'une progression est en cours et passe l'indicateur de progression sur "activity mode", ce qui fait avancer ou reculer un bloc. Chaque appel à <code>progress_pulse()</code> fait un petit peu bouger le bloc (l'amplitude du mouvement par pulsation est définie par <code>set_progress_pulse_step()</code>), comme expliqué précédemment.

note: (itstool) path: item/p
en: An Entry widget can also show icons. These icons can be activatable by clicking, can be set up as drag source and can have tooltips. To add an icon, use <code>set_icon_from_stock(icon_position, stock_id)</code>, or one of <code>set_icon_from_pixbuf(icon_position, pixbuf)</code>, <code>set_icon_from_icon_name(icon_position, icon_name)</code>, where <code>icon_position</code> is one of <code>Gtk.EntryIconPosition.PRIMARY</code> (to set the icon at the beginning of the entry) <code>Gtk.EntryIconPosition.SECONDARY</code> (to set the icon at the end of the entry). To set a tooltip on an icon, use <code>set_icon_tooltip_text("tooltip text")</code> or <code>set_icon_tooltip_markup("tooltip text in Pango markup language")</code>.
fr: Un élément graphique Entry peut aussi afficher des icônes. Ces icônes sont activables d'un clic de souris, ou peuvent être définies comme étant la source d'un élément glissable et comporter des infobulles. Pour ajouter une icône de la collection, utilisez la méthode <code>set_icon_from_stock(icon_position, stock_id)</code>, ou bien l'une des méthodes suivantes : <code>set_icon_from_pixbuf(icon_position, pixbuf)</code> ; <code>set_icon_from_icon_name(icon_position, icon_name)</code>, où <code>icon_position</code> est l'une des deux positions <code>Gtk.EntryIconPosition.PRIMARY</code> (pour positionner l'icône au début de l'entrée) ou <code>Gtk.EntryIconPosition.SECONDARY</code> (pour positionner l'icône à la fin de l'entrée). Pour ajouter une infobulle à une icône, utiliser l'une des deux fonctions <code>set_icon_tooltip_text("tooltip text")</code> ou <code>set_icon_tooltip_markup("tooltip text in Pango markup language")</code>.

note: (itstool) path: page/title
en: FileChooserDialog
fr: Boîte de dialogue FileChooser

note: (itstool) path: info/desc
en: A dialog suitable for "Open" and "Save" commands.
fr: Une boîte de dialogue qui convient aux commandes « open » et « save ».

note: (itstool) path: section/title
en: Overview of the example
fr: Vue d'ensemble de l'exemple

note: (itstool) path: section/p
en: This example demonstrates how the FileChooserDialog can be used. It is incorporated into a very simple text editor application. All the <link xref="menubar.vala#win-app">actions</link>, including the "open", "save" and "save-as" commands can be found in the <link xref="gmenu.vala">app-menu</link>. Here, the app-menu is created using an XML UI file, which is then imported into the application using Gtk.Builder.
fr: Cet exemple montre l'utilisation d'une boîte de dialogue FileChooser. Elle est intégrée dans une application éditeur de texte très simple. Toutes les <link xref="menubar.vala#win-app">actions</link>, y compris les commandes « open », « save » et « save-as » sont disponibles dans <link xref="gmenu.vala">app-menu</link>. Ici, nous créons l'app-menu avec un fichier interface utilisateur en XML, qui est ensuite importé dans l'application avec Gtk.Builder.

note: (itstool) path: section/title
en: XML UI file which creates the app-menu
fr: Fichier XML interface utilisateur créant l'app-menu

note: (itstool) path: section/title
en: Vala Code
fr: Code Vala

note: (itstool) path: section/title
en: Relevant API documentation
fr: Documentation API associée

note: (itstool) path: info/desc
en: A widget to choose a font
fr: Un élément graphique pour choisir une police

note: (itstool) path: page/title
en: FontChooserWidget
fr: Élément graphique GtkFontChooser

note: (itstool) path: page/p
en: A FontChooserWidget with a callback function.
fr: Un élément graphique GtkFontChooser avec une fonction de rappel.

note: (itstool) path: section/title
en: Useful methods for a FontChooserWidget
fr: Méthodes utiles pour un élément graphique GtkFontChooser

note: (itstool) path: item/p
en: To set the font which is initially selected, use <code>set_font(font)</code> (where <code>font</code> is the font name) or <code>set_font_desc(font)</code> (where <code>font</code> is the PangoFontDescription).
fr: Pour définir la police initiallement sélectionnée, utilisez la méthode <code>set_font(font)</code> (où <code>font</code> est le nom de la police), ou <code>set_font_desc(font)</code> (où <code>font</code> est la PangoFontDescription).

note: (itstool) path: item/p
en: To get the selected font use <code>get_font()</code> or <code>get_font_desc()</code>.
fr: Pour obtenir la police sélectionnée, utilisez l'une des deux méthodes <code>get_font()</code> ou <code>get_font_desc()</code>.

note: (itstool) path: item/p
en: To change the text which is shown in the preview area, use <code>set_preview_text()</code>.
fr: Pour modifier le texte affiché dans la position précédente, utilisez la méthode <code>set_preview_text()</code>.

note: (itstool) path: info/desc
en: A simple implementation of GMenuModel
fr: Une implémentation simple de GMenuModel

note: (itstool) path: page/p
en: A GtkApplication with a simple GMenu and SimpleActions
fr: Une application Gtk avec un GMenu de base et des SimpleActions

note: (itstool) path: info/desc
en: A simple implementation of GMenu
fr: Une implémentation simple de GMenu

note: (itstool) path: section/title
en: Useful methods for a GSimpleAction and a GMenu
fr: Méthodes utiles pour GSimpleAction et GMenu

note: (itstool) path: section/p
en: Useful methods for a GSimpleAction:
fr: Méthodes utiles pour GSimpleAction :

note: (itstool) path: item/p
en: To create a new action that is <em>stateless</em>, that is, an action that do not retain or depend on a state given by the action itself, use
fr: Pour créer une nouvelle action qui est <em>stateless</em>, c-à-d. une action qui ne retient ni ne dépend d'un état définit par l'action elle-même, utilisez

note: (itstool) path: item/code
en: 
    action = Gio.SimpleAction.new("name", parameter_type)
fr: 
    action = Gio.SimpleAction.new(« nom », parameter_type)

note: (itstool) path: item/p
en: where <code>"name"</code> is the name of the action and <code>parameter_type</code> is the type of the parameters that the action receives when being activated. This can be <code>None</code>, or <code>GLib.VariantType.new('s')</code> if the parameter is of type <code>str</code>, or instead of <code>'s'</code> a character as described <link href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html">here</link>. To create a new <em>stateful</em> (i.e. not stateless) action, use
fr: où <code>« nom »</code> est le nom de l'action et <code>parameter_type</code> est le type de paramètre que l'action reçoit quand elle est activée. Ce peut être <code>None</code>, ou <code>GLib.VariantType.new('s')</code> si le paramètre est du type <code>str</code>, ou au lieu de <code>'s'</code>, un caractère tel que décrit <link href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html">ici</link>.

note: (itstool) path: item/code
en: 
    action = Gio.SimpleAction.new_stateful("name", parameter_type, initial_state)
fr: 
    action = Gio.SimpleAction.new_stateful(« nom », parameter_type, initial_state)

note: (itstool) path: item/p
en: <code>set_enabled(True)</code> sets the action as enabled; an action must be enabled in order to be activated or in order to have its state changed from outside callers. This should only be called by the implementor of the action. Users of the action should not attempt to modify its enabled flag.
fr: La méthode <code>set_enabled(True)</code> définit l'action à enabled ; une action doit être en position enabled pour pouvoir être activée ou pour voir son état modifié par des appels extérieurs. La fonction ne peut être appelée que par l'implémenteur de l'action. Les utilisateurs de l'action ne doivent pas tenter de modifier son drapeau enabled.

note: (itstool) path: item/p
en: <code>set_state(state)</code>, where <code>state</code> is a GVariant, sets the state of the action, updating the 'state' property to the given value. This should only be called by the implementor of the action; users of the action should instead call <code>change_state(state)</code> (where <code>state</code> is as above) to request the change.
fr: La fonction <code>set_state(state)</code>, où <code>state</code> est une GVariant, définit l'état de l'action en mettant à jour la propriété « state » à la valeur donnée. Elle ne peut être appelée que par l'implémenteur de l'action ; par contre, les utilisateurs peuvent appeler <code>change_state(state)</code> (où <code>state</code> est une GVariant) pour demander le changement d'état.

note: (itstool) path: section/p
en: Useful methods for a GMenu:
fr: Méthodes utiles pour un GMenu :

note: (itstool) path: item/p
en: To insert an item in the menu in position <code>position</code>, use <code>insert(position, label, detailed_action)</code>, where <code>label</code> is the label that will appear in the menu and <code>detailed_action</code> is a string composed of the name of the action to which we prepend the prefix <code>app.</code>. A more detailed discussion of this can be found in <link xref="menubar.py#win-app"/>.
fr: Pour insérer un élément dans le menu à la <code>position</code>, utilisez la méthode <code>insert(position, label, detailed_action)</code>, où <code>label</code> est l'étiquette qui s'affiche dans le menu et <code>detailed_action</code> est une chaîne de caractères composée du nom de l'action à laquelle vous ajoutez le préfixe <code>app.</code>. Pour de plus amples détails, consultez <link xref="menubar.py#win-app"/>.

note: (itstool) path: item/p
en: To append or prepend an item in the menu use respectively <code>append(label, detailed_action)</code> and <code>prepend(label, detailed_action)</code>.
fr: Pour joindre ou ajouter un élément dans le menu, utilisez respectivement les méthodes <code>append(label, detailed_action)</code> et <code>prepend(label, detailed_action)</code>.

note: (itstool) path: item/p
en: Another way of adding items to the menu is to create them as <code>GMenuItem</code>s and use <code>insert_item(position, item)</code>, <code>append_item(item)</code>, or <code>prepend_item(item)</code>; so for instance we might have:
fr: Une autre méthode pour ajouter des éléments au menu est de les créer comme des éléments <code>GMenuItem</code> et d'utiliser l'une des fonctions <code>insert_item(position, item)</code>, <code>append_item(item)</code>, ou <code>prepend_item(item)</code> ; par exemple :

note: (itstool) path: item/p
en: We can also add a whole subsection in a menu using <code>insert_section(position, label, section)</code>, <code>append_section(label, section)</code>, or <code>prepend_section(label, section)</code>, where <code>label</code> is the title of the subsection.
fr: Nous pouvons aussi ajouter une sous-section entière dans un menu avec <code>insert_section(position, label, section)</code>, <code>append_section(label, section)</code>, ou <code>prepend_section(label, section)</code>, où <code>label</code> est le titre de la sous-section.

note: (itstool) path: item/p
en: To add a submenu that will expand and collapse, use <code>insert_submenu(position, label, section)</code>, <code>append_submenu(label, section)</code>, or <code>prepend_submenu(label, section)</code>, where <code>label</code> is the title of the subsection.
fr: Pour ajouter un sous-menu qui va s'étendre et se contracter, utilisez l'une des méthodes <code>insert_submenu(position, label, section)</code>, <code>append_submenu(label, section)</code>, ou bien <code>prepend_submenu(label, section)</code>, où <code>label</code> est le titre du sous-menu.

note: (itstool) path: item/p
en: To set a label for the menu, use <code>set_label(label)</code>.
fr: Pour définir une étiquette pour le menu, utilisez la méthode <code>set_label(label)</code>.

note: (itstool) path: info/desc
en: Pack widgets in rows and columns
fr: Ranger les éléments graphiques en lignes et colonnes

note: (itstool) path: page/title
en: Grid
fr: Grille

note: (itstool) path: page/p
en: A button widget connected to a progress bar.
fr: Un élément graphique bouton connecté à une barre de progression.

note: (itstool) path: page/p
en: A button widget connected to a progress bar, inside of a grid which handles the layout.
fr: Un élément graphique bouton connecté à une barre de progression, à l'intérieur d'une grille qui gère l'agencement.

note: (itstool) path: page/p
en: Some labels in a grid.
fr: Quelques étiquettes dans une grille.

note: (itstool) path: section/title
en: Useful methods for a Grid widget
fr: Méthodes utiles pour un élément graphique Grille

note: (itstool) path: item/p
en: To attach a widget <code>child</code> in position <code>left, top</code> in a slot of given <code>width, height</code> use <code>attach(child, top, left, width, height)</code>. If a widget <code>sibling</code> is already in place, we can also use <code>attach_next_to(child, sibling, side, width, height)</code>, where <code>side</code> is one of <code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT, Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code>.
fr: Pour joindre un élément graphique <code>enfant</code> à l'emplacement <code>gauche, superieur</code> dans un créneaux de taille <code>largeur, hauteur</code> donné, utilisez la méthode <code>attach(enfant, superieur, gauche, largeur, hauteur)</code>. S'il y a déjà un élément graphique <code>sibling</code> à cette place, utilisez la fonction <code>attach_next_to(enfant, sibling, side, largeur, hauteur)</code>, où <code>side</code> est l'une des positions <code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT, Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code>.

note: (itstool) path: item/p
en: <code>set_row_homogeneous(True)</code> and <code>set_column_homogeneous(True)</code> ensure that (respectively) every row or every column has the same width or height.
fr: Les méthodes <code>set_row_homogeneous(True)</code> et <code>set_column_homogeneous(True)</code> vérifient que chaque ligne ou chaque colonne a la même largeur ou la même hauteur.

note: (itstool) path: page/title
en: Grid widget
fr: Élément graphique Grille

note: (itstool) path: info/desc
en: A toplevel window which can contain other widgets, and support GMenu
fr: Une fenêtre de niveau supérieur qui peut contenir d'autres éléments graphiques et prend en charge GMenu.

note: (itstool) path: page/p
en: A minimal GtkApplication with a GtkApplicationWindow
fr: Une application Gtk minimale avec une GtkApplicationWindow

note: (itstool) path: info/desc
en: GtkWindow subclass with GtkApplication support
fr: Sous-classe GtkWindow avec la prise en charge de GtkApplication

note: (itstool) path: page/p
en: A simple GtkApplicationWindow which can support Menus.
fr: Une simple GtkApplicationWindow qui prend en charge les menus.

note: (itstool) path: section/title
en: Useful methods for a Gtk.ApplicationWindow widget
fr: Méthodes utiles pour un élément graphique Gtk.ApplicationWindow

note: (itstool) path: item/p
en: <code>set_default_size(200, 100)</code> sets the default size of the window to a width of <code>200</code> and a height of <code>100</code>; if instead of a positive number we pass <code>-1</code> we have the default size.
fr: <code>set_default_size(200, 100)</code> définit la taille par défaut de la fenêtre à une largeur de <code>200</code> et une hauteur de <code>100</code> ; si, au lieu d'un nombre positif, vous lui transmettez <code>-1</code>, vous obtenez la taille par défaut.

note: (itstool) path: item/p
en: <code>set_position(Gtk.WindowPosition.CENTER)</code> centers the window. Other options are <code>Gtk.WindowPosition.NONE, Gtk.WindowPosition.MOUSE, Gtk.WindowPosition.CENTER_ALWAYS, Gtk.WindowPosition.CENTER_ON_PARENT</code>.
fr: <code>set_position(Gtk.WindowPosition.CENTER)</code> place la fenêtre au centre de l'écran. Les autres options possibles sont : <code>Gtk.WindowPosition.NONE, Gtk.WindowPosition.MOUSE, Gtk.WindowPosition.CENTER_ALWAYS, Gtk.WindowPosition.CENTER_ON_PARENT</code>.

note: (itstool) path: page/p
en: The simplest GtkApplication Window which can support Menus.
fr: L'application Gtk la plus simple qui prend en charge les menus.

note: (itstool) path: synopsis/p
en: In this tutorial, we're going to make a program which plays tones that you can use to tune a guitar. You will learn how to:
fr: Dans ce tutoriel, nous allons écrire un programme qui émet des sons servant à accorder une guitare. Nous allons apprendre comment :

note: (itstool) path: item/p
en: Set up a basic project in Anjuta
fr: créer un projet basique dans Anjuta,

note: (itstool) path: item/p
en: Create a simple GUI with Anjuta's UI designer
fr: créer une interface graphique simple avec le concepteur d'interface utilisateur d'Anjuta,

note: (itstool) path: item/p
en: Use GStreamer to play sounds
fr: utiliser GStreamer pour émettre des sons.

note: (itstool) path: synopsis/p
en: You'll need the following to be able to follow this tutorial:
fr: Vous avez besoin de ce qui suit pour pouvoir suivre ce tutoriel :

note: (itstool) path: item/p
en: An installed copy of the <link xref="getting-ready">Anjuta IDE</link>
fr: l'installation du paquet <link xref="getting-ready">Anjuta IDE</link>,

note: (itstool) path: item/p
en: Basic knowledge of the C programming language
fr: des connaissances de base de la programmation en langage C

note: (itstool) path: section/title
en: Create a project in Anjuta
fr: Création d'un projet dans Anjuta

note: (itstool) path: section/p
en: Before you start coding, you'll need to set up a new project in Anjuta. This will create all of the files you need to build and run the code later on. It's also useful for keeping everything together.
fr: Avant de commencer à programmer, vous devez ouvrir un nouveau projet dans Anjuta. Ceci crée tous les fichiers qui vous sont nécessaires pour construire et exécuter votre programme plus tard. C'est aussi utile pour tout regrouper en un seul endroit.

note: (itstool) path: item/p
en: Start Anjuta and click <guiseq><gui>File</gui><gui>New</gui><gui>Project</gui></guiseq> to open the project wizard.
fr: Lancez Anjuta et cliquez sur <guiseq><gui>Fichier</gui><gui>Nouveau</gui><gui>Projet</gui></guiseq> pour ouvrir l'assistant de création de projet.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is switched <gui>ON</gui>. On the next page, select <em>gstreamer-0.10</em> from the list to include the GStreamer library in your project.
fr: Assurez-vous que <gui>Configuration des paquets externes</gui> est basculée sur <gui>I</gui>. Sur la page suivante, choisissez <em>gstreamer-0.10</em> dans la liste pour inclure la bibliothèque GStreamer à votre projet.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.c</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
fr: Cliquez sur <gui>Appliquer</gui> et votre projet est créé. Ouvrez <file>src/main.c</file> depuis l'onglet <gui>Projet</gui> ou l'onglet <gui>Fichiers</gui>. Vous devez voir apparaître du code commençant par les lignes :

note: (itstool) path: section/title
en: Build the code for the first time
fr: Première construction du programme

note: (itstool) path: section/p
en: C is a rather verbose language, so don't be surprised that the file contains quite a lot of code. Most of it is template code. It loads an (empty) window from the user interface description file and shows it. More details are given below; skip this list if you understand the basics:
fr: « C » est un langage plutôt verbeux, donc ne soyez pas surpris par la quantité de code que contient le fichier. La plupart du code est générique. Il charge une fenêtre (vide) à partir du fichier de description de l'interface et l'affiche. Vous trouverez plus de détails ci-dessous ; passez cette liste si vous comprenez les bases :

note: (itstool) path: item/p
en: The three <code>#include</code> lines at the top include the <code>config</code> (useful autoconf build defines), <code>gtk</code> (user interface) and <code>gi18n</code> (internationalization) libraries. Functions from these libraries are used in the rest of the code.
fr: Les trois lignes <code>#include</code> du haut incorporent les bibliothèques <code>config</code> (définitions utiles pour la construction autoconf), <code>gtk</code> (interface utilisateur) et <code>gi18n</code> (pour internationalisation). Les fonctions de ces bibliothèques seront utilisées dans le reste du programme.

note: (itstool) path: item/p
en: The <code>create_window</code> function creates a new window by opening a GtkBuilder file (<file>src/guitar-tuner.ui</file>, defined a few lines above), connecting its signals and then displaying it in a window. The GtkBuilder file contains a description of a user interface and all of its elements. You can use Anjuta's editor to design GtkBuilder user interfaces.
fr: La fonction <code>create_window</code> crée une nouvelle fenêtre en ouvrant un fichier GtkBuilder (<file>src/guitar-tuner.ui</file>, défini quelques lignes plus haut), en connectant ses signaux et en l'affichant dans une fenêtre. Le fichier GtkBuilder contient une description de l'interface utilisateur et de tous ses éléments. Vous pouvez utiliser l'éditeur d'Anjuta pour concevoir des interfaces utilisateur GtkBuilder.

note: (itstool) path: item/p
en: Connecting signals is how you define what happens when you push a button, or when some other event happens. Here, the <code>destroy</code> function is called (and quits the app) when you close the window.
fr: Connecter des signaux, c'est décider de ce qui doit se passer quand on appuie sur un bouton ou quand quelque chose d'autre se produit. Ici, la fonction <code>destroy</code> est appelée (et quitte l'application) quand la fenêtre est fermée.

note: (itstool) path: item/p
en: The <code>main</code> function is run by default when you start a C application. It calls a few functions which set up and then run the application. The <code>gtk_main</code> function starts the GTK main loop, which runs the user interface and starts listening for events (like clicks and key presses).
fr: La fonction <code>main</code> est exécutée par défaut quand vous lancez une application C. Elle appelle d'autres fonctions qui configurent puis lancent l'application. La fonction <code>gtk_main</code> démarre la boucle principale de GTK, qui lance l'interface utilisateur et commence à écouter les événements (comme des clics de souris ou des appuis sur des touches).

note: (itstool) path: item/p
en: The <code>ENABLE_NLS</code> conditional definition sets up <code>gettext</code>, which is a framework for translating applications. These functions specify how translation tools should handle your app when you run them.
fr: La définition conditionnelle <code>ENABLE_NLS</code> configure <code>gettext</code> qui est un environnement pour la traduction des applications. Ces fonctions définissent la façon dont les objets de traduction doivent prendre en charge votre application quand vous l'exécutez.

note: (itstool) path: section/p
en: This code is ready to be used, so you can compile it by clicking <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> (or press <keyseq><key>Shift</key><key>F7</key></keyseq>).
fr: Le programme est prêt à être utilisé, donc vous pouvez le compiler en cliquant sur <guiseq><gui>Construire</gui><gui>Construire le projet</gui></guiseq> ou en appuyant sur <keyseq><key>Maj</key><key>F7</key></keyseq>.

note: (itstool) path: section/p
en: Press <gui>Execute</gui> on the next window that appears to configure a debug build. You only need to do this once, for the first build.
fr: Cliquez sur <gui>Exécuter</gui> dans la fenêtre suivante pour configurer une construction avec débogage. Vous ne devez le faire qu'une seule fois, lors de la première exécution.

note: (itstool) path: section/title
en: Create the user interface
fr: Création de l'interface utilisateur

note: (itstool) path: section/p
en: A description of the user interface (UI) is contained in the GtkBuilder file. To edit the user interface, open <file>src/guitar_tuner.ui</file>. This will switch to the interface designer. The design window is in the center; widgets and widgets' properties are on the left, and the palette of available widgets is on the right.
fr: Une description de l'interface utilisateur est contenue dans le fichier GtkBuilder. Pour la modifier, ouvrez le fichier <file>src/guitar_tuner.ui</file>. Ceci vous bascule vers le concepteur d'interface. La fenêtre de conception se trouve au centre ; les éléments graphiques et leurs propriétés sont sur la gauche et la palette des composants graphiques disponibles est sur la droite.

note: (itstool) path: section/p
en: The layout of every UI in GTK+ is organized using boxes and tables. Let's use a vertical <gui>GtkButtonBox</gui> here to assign six <gui>GtkButtons</gui>, one for each of the six guitar strings.
fr: La disposition de toute interface utilisateur dans GTK+ est organisée à l'aide de boîtes et de tableaux. Dans cet exemple, prenons une <gui>GtkButtonBox</gui> verticale pour y mettre six <gui>GtkButtons</gui>, un pour chacune des six cordes de la guitare.

note: (itstool) path: item/p
en: Select a <gui>GtkButtonBox</gui> from the <gui>Container</gui> section of the <gui>Palette</gui> on the right and put it into the window. In the <gui>Properties</gui> pane, set the number of elements to 6 (for the six strings) and the orientation to vertical.
fr: Choisissez une <gui>GtkButtonBox</gui> (Boîte) dans la section <gui>Conteneurs</gui> de la <gui>Palette</gui> à droite et mettez-la dans la fenêtre. Dans l'onglet <gui>Propriétés</gui>, définissez le nombre d'éléments à 6 (pour les six cordes) et l'orientation à verticale.

note: (itstool) path: item/p
en: Now, choose a <gui>GtkButton</gui> from the palette and put it into the first part of the box.
fr: Ensuite, choisissez un <gui>GtkButton</gui> (Bouton) dans la palette et mettez-le dans la première partie de la boîte.

note: (itstool) path: item/p
en: While the button is still selected, change the <gui>Label</gui> property in the <gui>Widgets</gui> tab to <gui>E</gui>. This will be the low E string.
fr: Pendant que le bouton est encore sélectionné, modifiez la propriété <gui>Étiquette</gui> dans l'onglet <gui>Composants graphiques</gui> à <gui>E</gui>. C'est la corde E du bas.

note: (itstool) path: item/p
en: Switch to the <gui>Signals</gui> tab (inside the <gui>Widgets</gui> tab) and look for the <code>clicked</code> signal of the button. You can use this to connect a signal handler that will be called when the button is clicked by the user. To do this, click on the signal and type <code>on_button_clicked</code> in the <gui>Handler</gui> column and press <key>Return</key>.
fr: Passez à l'onglet <gui>Signaux</gui> (dans l'onglet <gui>Composants graphiques</gui>) et recherchez le signal <code>clicked</code> du bouton. Vous pouvez l'utiliser pour connecter un gestionnaire de signal qui sera appelé quand le bouton est cliqué. Pour cela, cliquez sur le signal et saisissez <code>on_button_clicked</code> dans la colonne <gui>Gestionnaire</gui> et appuyez sur <key>Entrée</key>.

note: (itstool) path: item/p
en: Repeat the above steps for the other buttons, adding the next 5 strings with the names <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, and <em>e</em>.
fr: Répétez cette procédure pour les autres boutons, ce qui ajoute les 5 autres cordes nommées <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em> et <em>e</em>.

note: (itstool) path: item/p
en: Save the UI design (by clicking <guiseq><gui>File</gui><gui>Save</gui></guiseq>) and keep it open.
fr: Enregistrez le fichier de conception de l'interface utilisateur (en cliquant sur <guiseq><gui>Fichier</gui><gui>Enregistrer</gui></guiseq>) et laissez-le ouvert.

note: (itstool) path: section/title
en: Creating the signal handler
fr: Création du gestionnaire de signal

note: (itstool) path: section/p
en: In the UI designer, you made it so that all of the buttons will call the same function, <gui>on_button_clicked</gui>, when they are clicked. We need to add that function in the source file.
fr: Dans le concepteur d'interface utilisateur, il a été fait en sorte que tous les boutons appellent la même fonction, <gui>on_button_clicked</gui> quand ils sont cliqués. Nous devons ajouter cette fonction dans notre fichier source.

note: (itstool) path: section/p
en: To do this, open <file>main.c</file> while the user interface file is still open. Switch to the <gui>Signals</gui> tab, which you already used to set the signal name. Now take the row where you set the <gui>clicked</gui> signal and drag it into to the source file at a position that is outside any function. The following code will be added to your source file:
fr: Pour cela, ouvrez <file>main.c</file> pendant que le fichier de l'interface utilisateur est encore ouvert. Allez au même onglet <gui>Signaux</gui> que vous aviez déjà utilisé pour nommer le signal. Prenez la ligne où vous aviez défini le signal <gui>clicked</gui> et faites la glisser quelque part à l'extérieur d'une fonction dans le fichier source. Le code suivant s'ajoute à votre fichier source :

note: (itstool) path: section/p
en: This signal handler has two arguments: a pointer to the <code>GtkWidget</code> that called the function (in our case, always a <code>GtkButton</code>), and a pointer to some "user data" that you can define, but which we won't be using here. (You can set the user data by calling <code>gtk_builder_connect_signals</code>; it is normally used to pass a pointer to a data structure that you might need to access inside the signal handler.)
fr: Ce récepteur de signal a deux arguments : un pointeur vers le <code>GtkWidget</code> qui a appelé la fonction (dans notre cas, toujours un <code>GtkButton</code>) et un pointeur sur des « données utilisateur » (user_data) que vous pouvez définir, mais que nous n'utilisons pas ici (les données utilisateur peuvent être définies par un appel à la fonction <code>gtk_builder_connect_signals</code> ; il sert normalement à transmettre un pointeur à une structure de données auxquelles vous pouvez avoir besoin d'accéder à l'intérieur du gestionnaire de signal).

note: (itstool) path: section/p
en: For now, we'll leave the signal handler empty while we work on writing the code to produce sounds.
fr: Laissons le gestionnaire de signal vide pour l'instant et écrivons le code qui produit les sons.

note: (itstool) path: section/title
en: GStreamer pipelines
fr: Les pipelines GStreamer

note: (itstool) path: section/p
en: GStreamer is GNOME's multimedia framework — you can use it for playing, recording, and processing video, audio, webcam streams and the like. Here, we'll be using it to produce single-frequency tones.
fr: GStreamer est l'architecture multimédia de GNOME — vous pouvez vous en servir pour des jeux, des enregistrements, pour traiter des flux vidéo, audio, de webcam entre autres. Ici, nous allons nous en servir pour émettre des tonalités à une seule fréquence.

note: (itstool) path: section/p
en: Conceptually, GStreamer works as follows: You create a <em>pipeline</em> containing several processing elements going from the <em>source</em> to the <em>sink</em> (output). The source can be an image file, a video, or a music file, for example, and the output could be a widget or the soundcard.
fr: Le concept de GStreamer est le suivant : il y a création d'un <em>pipeline</em> contenant plusieurs éléments de traitement en provenance d'une <em>source</em> à destination d'un <em>collecteur</em> (sortie). La source peut être un fichier image, une vidéo ou un fichier musical, par exemple, et la sortie un élément graphique ou une carte son.

note: (itstool) path: section/p
en: Between source and sink, you can apply various filters and converters to handle effects, format conversions and so on. Each element of the pipeline has properties which can be used to change its behaviour.
fr: Entre la source et le collecteur, vous pouvez appliquer différents filtres et convertisseurs pour prendre en charge les effets, les conversions de format et ainsi de suite. Chaque élément du pipeline possède des propriétés pouvant être utilisées pour modifier son comportement.

note: (itstool) path: media/p
en: An example GStreamer pipeline.
fr: Un exemple de pipeline GStreamer.

note: (itstool) path: section/title
en: Set up the pipeline
fr: Configuration du pipeline

note: (itstool) path: section/p
en: In this simple example we will use a tone generator source called <code>audiotestsrc</code> and send the output to the default system sound device, <code>autoaudiosink</code>. We only need to configure the frequency of the tone generator; this is accessible through the <code>freq</code> property of <code>audiotestsrc</code>.
fr: Dans ce petit exemple, nous utilisons une source génératrice de son de fréquence pure appelée <code>audiotestsrc</code> et envoyons sa sortie au périphérique son par défaut du système, <code>autoaudiosink</code>. Il nous faut seulement configurer la fréquence du générateur accessible depuis la propriété <code>freq</code> de <code>audiotestsrc</code>.

note: (itstool) path: section/p
en: This includes the GStreamer library. You also need to add a line to initialize GStreamer; put the following code on the line above the <code>gtk_init</code> call in the <code>main</code> function:
fr: Cela inclut la bibliothèque de GStreamer. Ajoutez aussi une ligne pour initialiser GStreamer ; mettez le code suivant dans la ligne au-dessus de <code>gtk_init</code> dans la fonction <code>main</code> :

note: (itstool) path: section/p
en: Then, copy the following function into <file>main.c</file> above the empty <code>on_button_clicked</code> function:
fr: Ensuite, copiez la fonction suivante dans le fichier <file>main.c</file> au-dessus de la fonction vide <code>on_button_clicked</code> :

note: (itstool) path: item/p
en: The first five lines create source and sink GStreamer elements (<code>GstElement</code>), and a pipeline element (which will be used as a container for the other two elements). The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output).
fr: Les cinq premières lignes créent les éléments GStreamer source et sink (collecteur) et un élément pipeline (qui sera utilisé comme conteneur pour les deux autres éléments). Le pipeline est nommé « note » ; la source est nommée « source » et définie comme étant le connecteur <code>audiotestsrc</code> et le collecteur est nommé « output » et défini comme étant le connecteur <code>autoaudiosink</code> (qui est la sortie par défaut de la carte son).

note: (itstool) path: item/p
en: The call to <code>g_object_set</code> sets the <code>freq</code> property of the source element to <code>frequency</code>, which is passed as an argument to the <code>play_sound</code> function. This is just the frequency of the note in Hertz; some useful frequencies will be defined later on.
fr: L'appel à <code>g_object_set</code> définit la propriété <code>freq</code> de l'élément source à <code>frequency</code> qui est transmis comme argument de la fonction <code>play_sound</code>. Il s'agit simplement de la fréquence de la note de musique en Hertz ; certaines fréquences utiles seront définies plus tard.

note: (itstool) path: item/p
en: <code>gst_bin_add_many</code> puts the source and sink into the pipeline. The pipeline is a <code>GstBin</code>, which is just an element that can contain multiple other GStreamer elements. In general, you can add as many elements as you like to the pipeline by adding more arguments to <code>gst_bin_add_many</code>.
fr: <code>gst_bin_add_many</code> place la source et le collecteur dans le pipeline. Le pipeline est un <code>GstBin</code> qui est juste un élément qui peut contenir beaucoup d'autres éléments GStreamer. En général, vous pouvez ajouter autant d'éléments que vous voulez au pipeline en ajoutant d'autres d'arguments à <code>gst_bin_add_many</code>.

note: (itstool) path: item/p
en: Next, <code>gst_element_link</code> is used to connect the elements together, so the output of <code>source</code> (a tone) goes into the input of <code>sink</code> (which is then output to the sound card). <code>gst_element_set_state</code> is then used to start playback, by setting the state of the pipeline to playing (<code>GST_STATE_PLAYING</code>).
fr: Ensuite, <code>gst_element_link</code> est utilisé pour connecter les éléments ensemble, de sorte que la sortie de la source (une note) va à l'entrée du collecteur (et est ensuite envoyée à la carte son). <code>gst_element_set_state</code> sert enfin à démarrer la lecture en basculant l'état du pipeline à « playing » (lecture) (<code>GST_STATE_PLAYING</code>).

note: (itstool) path: section/title
en: Stopping playback
fr: Arrêt de la lecture

note: (itstool) path: section/p
en: We don't want to play an annoying tone forever, so the last thing <code>play_sound</code> does is to call <code>g_timeout_add</code>. This sets a timeout for stopping the sound; it waits for <code>LENGTH</code> milliseconds before calling the function <code>pipeline_stop</code>, and will keep calling it until <code>pipeline_stop</code> returns <code>FALSE</code>.
fr: Comme nous ne voulons pas jouer indéfiniment une note ennuyeuse, la dernière chose que fait <code>play_sound</code> est d'appeler <code>g_timeout_add</code> qui définit un délai avant la coupure du son ; cela attend <code>LENGTH</code> millisecondes avant d'appeler la fonction <code>pipeline_stop</code> et continuera à l'appeler jusqu'à ce que <code>pipeline_stop</code> renvoie la valeur <code>FALSE</code>.

note: (itstool) path: section/p
en: Now, we'll write the <code>pipeline_stop</code> function which is called by <code>g_timeout_add</code>. Insert the following code <em>above</em> the <code>play_sound</code> function:
fr: Écrivons maintenant la fonction <code>pipeline_stop</code> qui est appelée par <code>g_timeout_add</code>. Insérez le code suivant <em>au-dessus</em> de la fonction <code>play_sound</code> :

note: (itstool) path: section/title
en: Define the tones
fr: Définition des notes

note: (itstool) path: section/p
en: We want to play the correct sound when the user clicks a button. First of all, we need to know the frequencies for the six guitar strings, which are defined (at the top of <file>main.c</file>) as follows:
fr: Nous voulons jouer la note adéquate quand l'utilisateur clique sur un bouton. Avant tout, nous devons connaître la fréquence de chacune des six cordes de la guitare qui sont définies (au début du fichier <file>main.c</file>) ainsi :

note: (itstool) path: section/p
en: Now to flesh out the signal handler that we defined earlier, <code>on_button_clicked</code>. We could have connected every button to a different signal handler, but that would lead to a lot of code duplication. Instead, we can use the label of the button to figure out which button was clicked:
fr: Maintenant, nous allons étoffer le gestionnaire de signal <code>on_button_clicked</code> défini auparavant. Nous aurions pu connecter chaque bouton à un gestionnaire différent, mais cela aurait dupliqué beaucoup de code. Au lieu de ça, nous allons plutôt utiliser l'étiquette du bouton pour déterminer le bouton cliqué :

note: (itstool) path: section/title
en: Build and run the application
fr: Construction et lancement de l'application

note: (itstool) path: section/p
en: All of the code should now be ready to go. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, and then <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> to start the application.
fr: À ce stade, tout le programme est fonctionnel. Cliquez sur <guiseq><gui>Construire</gui><gui>Construire le projet</gui></guiseq> pour tout reconstruire et faites <guiseq><gui>Exécuter</gui><gui>Exécuter</gui></guiseq> pour lancer l'application.

note: (itstool) path: section/p
en: If you haven't already done so, choose the <file>Debug/src/guitar-tuner</file> application in the dialog that appears. Finally, hit <gui>Run</gui> and enjoy!
fr: Si ce n'est déjà fait, choisissez l'application <file>Debug/src/guitar-tuner</file> dans la boîte de dialogue qui s'affiche. Enfin, cliquez sur <gui>Exécuter</gui> et amusez-vous !

note: (itstool) path: section/title
en: Reference Implementation
fr: Implémentation de référence

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.c">reference code</link>.
fr: Si vous rencontrez des difficultés avec ce tutoriel, comparez votre programme à ce <link href="guitar-tuner/guitar-tuner.c">programme de référence</link>.

note: (itstool) path: section/title
en: Next steps
fr: Les étapes suivantes

note: (itstool) path: section/p
en: Here are some ideas for how you can extend this simple demonstration:
fr: Voici quelques idées sur la manière d'étendre ce simple exemple :

note: (itstool) path: item/p
en: Have the program automatically cycle through the notes.
fr: Faire que le programme joue automatiquement les notes de manière cyclique.

note: (itstool) path: item/p
en: Make the program play recordings of real guitar strings being plucked.
fr: Faire que le programme lise des enregistrements de vraies cordes de guitare pincées.

note: (itstool) path: item/p
en: To do this, you would need to set up a more complicated GStreamer pipeline which allows you to load and play back music files. You'll have to choose <link href="http://gstreamer.freedesktop.org/documentation/plugins.html">decoder and demuxer</link> GStreamer elements based on the file format of your recorded sounds — MP3s use different elements to Ogg Vorbis files, for example.
fr: Pour y parvenir, vous devrez configurer un pipeline GStreamer un peu plus sophistiqué qui vous permette de charger et lire des fichiers musicaux. Vous devrez choisir des éléments GStreamer <link href="http://gstreamer.freedesktop.org/documentation/plugins.html">décodeur et démuxeur</link> basés sur le format des sons enregistrés — par exemple, les MP3 utilisent des éléments différents de ceux des fichiers Ogg Vorbis.

note: (itstool) path: item/p
en: You might need to connect the elements in more complicated ways too. This could involve using <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/chapter-intro-basics.html">GStreamer concepts</link> that we didn't cover in this tutorial, such as <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-pads.html">pads</link>. You may also find the <cmd>gst-inspect</cmd> command useful.
fr: Il vous faudra aussi peut-être connecter les éléments de façon plus complexe. Vous aurez sans doute besoin de consulter les <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/chapter-intro-basics.html">concepts GStreamer</link> que nous ne couvrons pas dans ce tutoriel, comme les <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-pads.html">pads</link>. La commande <cmd>gst-inspect</cmd> peut également vous être utile.

note: (itstool) path: item/p
en: Automatically analyze notes that the user plays.
fr: Analyser automatiquement les notes jouées par l'utilisateur.

note: (itstool) path: item/p
en: You could connect a microphone and record sounds from it using an <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-autoaudiosrc.html">input source</link>. Perhaps some form of <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-plugin-spectrum.html">spectrum analysis</link> would allow you to figure out what notes are being played?
fr: Vous pourriez branchez un microphone et enregistrez les sons obtenus en utilisant l'<link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-autoaudiosrc.html">entrée source</link>. Peut-être qu'une espèce d'<link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-plugin-spectrum.html">analyseur de spectre</link> peut vous aider à trouver les notes jouées ?

note: (itstool) path: info/desc
en: Use GTKmm and GStreamermm to build a simple guitar tuner application for GNOME. Shows off how to use the interface designer.
fr: Utilisation de GTKmm et de GStreamermm pour construire une application accordeur de guitare simple pour GNOME. Explications sur la manière d'utiliser le concepteur d'interface.

note: (itstool) path: item/p
en: Basic knowledge of the C++ programming language
fr: des connaissances de base de la programmation en langage C++.

note: (itstool) path: item/p
en: Choose <gui>GTKmm (Simple)</gui> from the <gui>C++</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
fr: Sélectionnez <gui>GTKmm (Simple)</gui> dans l'onglet <gui>C++</gui>, cliquez sur <gui>Continuer</gui> et saisissez vos informations sur les pages suivantes. Utilisez <file>guitar-tuner</file> comme nom de projet et de répertoire.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is selected. On the next page, select <em>gstreamermm-0.10</em> from the list to include the GStreamermm library in your project.
fr: Assurez-vous que <gui>Configuration des paquets externes</gui> est activé. Sur la page suivante, choisissez <em>gstreamermm-0.10</em> dans la liste pour inclure la bibliothèque GStreamermm à votre projet.

note: (itstool) path: item/p
en: Click <gui>Finished</gui> and the project will be created for you. Open <file>src/main.cc</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
fr: Cliquez sur <gui>Appliquer</gui> et votre projet est créé. Ouvrez <file>src/main.cc</file> depuis l'onglet <gui>Projet</gui> ou l'onglet <gui>Fichiers</gui>. Vous devez voir apparaître du code commençant par les lignes :

note: (itstool) path: section/p
en: This is a very basic C++ code setting up GTKmm. More details are given below; skip this list if you understand the basics:
fr: C'est un programme C++ très basique pour configurer GTKmm. Vous trouverez plus de détails ci-dessous ; passez cette liste si vous comprenez les bases :

note: (itstool) path: item/p
en: The three <code>#include</code> lines at the top include the <code>config</code> (useful autoconf build defines), <code>gtkmm</code> (user interface) and <code>iostream</code> (STL). Functions from these libraries are used in the rest of the code.
fr: Les trois lignes <code>#include</code> du haut incorporent les bibliothèques <code>config</code> (définitions utiles pour la construction autoconf), <code>gtkmm</code> (interface utilisateur) et <code>iostream</code> (STL). Les fonctions de ces bibliothèques seront utilisées dans le reste du programme.

note: (itstool) path: item/p
en: The <code>main</code> function creates a new window by opening a GtkBuilder file (<file>src/guitar-tuner.ui</file>, defined a few lines above) and then displaying it in a window. The GtkBuilder file contains a description of a user interface and all of its elements. You can use Anjuta's editor to design GtkBuilder user interfaces.
fr: La fonction <code>main</code> crée une nouvelle fenêtre en ouvrant un fichier GtkBuilder (<file>src/guitar-tuner.ui</file>, défini quelques lignes plus haut) et en l'affichant. Le fichier GtkBuilder contient une description de l'interface utilisateur et de tous ses éléments. Vous pouvez utiliser l'éditeur d'Anjuta pour concevoir des interfaces utilisateur GtkBuilder.

note: (itstool) path: item/p
en: Afterwards it calls a few functions which set up and then run the application. The <code>kit.run</code> function starts the GTKmm main loop, which runs the user interface and starts listening for events (like clicks and key presses).
fr: Ensuite quelques fonctions sont appelées pour configurer puis exécuter l'application. La fonction <code>kit.run</code> démarre la boucle principale de GTKmm qui affiche l'interface utilisateur et commence à écouter les événements (comme des clics de souris ou des appuis sur des touches).

note: (itstool) path: item/p
en: While the button is still selected, change the <gui>Label</gui> property in the <gui>Widgets</gui> tab to <gui>E</gui>. This will be the low E string. Also change the <gui>Name</gui> property to <gui>button_E</gui>. This is the name we will refer to the widget later in code.
fr: Pendant que le bouton est encore sélectionné, modifiez la propriété <gui>Étiquette</gui> dans l'onglet <gui>Composants graphiques</gui> à <gui>E</gui>. Ce sera la corde E du bas. Modifiez aussi la propriété <gui>Nom</gui> en <gui>bouton_E</gui>. Nous nous référerons à cet élément graphique par ce nom plus tard dans le programme.

note: (itstool) path: item/p
en: Repeat the above steps for the other buttons, adding the next 5 strings with the labels <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, and <em>e</em> and the names <em>button_A</em>, etc.
fr: Répétez cette procédure pour les autres boutons, en ajoutant les 5 cordes suivantes avec les étiquettes <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em> et <em>e</em> et les noms des <em>bouton_A</em>, etc. correspondants.

note: (itstool) path: item/p
en: Save the UI design (by clicking <guiseq><gui>File</gui><gui>Save</gui></guiseq>) and close the file.
fr: Enregistrez le fichier de conception de l'interface utilisateur (en cliquant sur <guiseq><gui>Fichier</gui><gui>Enregistrer</gui></guiseq>) et fermez le fichier.

note: (itstool) path: section/p
en: GStreamer is GNOME's multimedia framework — you can use it for playing, recording, and processing video, audio, webcam streams and the like. Here, we'll be using it to produce single-frequency tones. GStreamermm is the C++ binding to GStreamer which we will use here.
fr: GStreamer est l'architecture multimédia de GNOME — vous pouvez vous en servir pour des jeux, des enregistrements, pour traiter des flux vidéo, audio, de webcam entre autres. Ici, nous allons nous en servir pour émettre des tonalités à une seule fréquence. GStreamermm est le lien C++ à GStreamer que nous utilisons dans cet exemple.

note: (itstool) path: section/title
en: Using GStreamermm
fr: Utilisation de GStreamermm

note: (itstool) path: section/p
en: To use GStreamermm, it has to be initialised. We do that by adding the following line of code next to the <code>Gtk::Main kit(argc, argv);</code> line in <file>main.cc</file>:
fr: Pour utiliser GStreamermm, il faut l'initialiser. Ajoutez la ligne de code suivante en dessous de la ligne <code>Gtk::Main kit(argc, argv);</code> du fichier <file>main.cc</file> :

note: (itstool) path: section/p
en: While we are on it, also make sure that the <file>gstreamermm.h</file> is included in <file>main.cc</file> properly.
fr: Vérifiez que le fichier <file>gstreamermm.h</file> est correctement inclus dans <file>main.cc</file>.

note: (itstool) path: section/p
en: To simplify the handling of the pipeline we will define a helper class <code>Sound</code>. We do that in <file>main.cc</file> in order to keep this example simple, whereas you might usually want to use a separate file:
fr: Pour simplifier la gestion du pipeline, nous définissons une classe assistant <code>Sound</code>. Ceci est réalisé dans le fichier <file>main.cc</file> pour garder toute sa simplicité à cet exemple, alors que normalement vous le feriez dans un fichier séparé :

note: (itstool) path: section/p
en: The code has the following purpose:
fr: L'objectif du programme est le suivant :

note: (itstool) path: item/p
en: In the constructor, source and sink GStreamer elements (<code>Gst::Element</code>) are created, and a pipeline element (which will be used as a container for the other two elements). The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output). After the elements have been added to the pipeline and linked together, the pipeline is ready to run.
fr: Le constructeur crée les éléments GStreamer source et sink (collecteur) (<code>Gst.Element</code>) et un élément pipeline (qui sera utilisé comme conteneur pour les deux autres). Le pipeline est nommé « note » ; la source est nommée « source » et définie comme étant le connecteur <code>audiotestsrc</code> et le collecteur est nommé « output » et défini comme étant le connecteur <code>autoaudiosink</code> (qui est la sortie par défaut de la carte son). Après avoir lié entre eux et ajouté les éléments au pipeline, il est prêt à fonctionner.

note: (itstool) path: item/p
en: <code>start_playing</code> sets the source element to play a particular frequency and then starts the pipeline so the sound actually starts playing. As we don't want to have the annoying sound for ages, a timeout is set up to stop the pipeline after 200 ms by calling <code>stop_playing</code>.
fr: <code>start_playing</code> définit l'élément source à une fréquence donnée et démarre réellement le pipeline pour commencer à diffuser le son. Comme nous ne voulons pas jouer indéfiniment une note ennuyeuse, un délai de 200 ms est défini avant d'interrompre le pipeline en appelant la fonction <code>stop_playing</code>.

note: (itstool) path: item/p
en: In <code>stop_playing</code> which is called when the timeout has elapsed, the pipeline is stopped and as such there isn't any sound output anymore. As GStreamermm uses reference counting through the <code>Glib::RefPtr</code> object, the memory is automatically freed once the <code>Sound</code> class is destroyed.
fr: Dans <code>stop_playing</code>, après que la durée soit échue, le pipeline s'arrête et donc il n'y a plus de sortie son. Comme GStreamer utilise le comptage des références à l'objet <code>Glib::RefPtr</code>, la mémoire est automatiquement libérée dès que la classe <code>Sound</code> est détruite.

note: (itstool) path: section/title
en: Connecting the signals
fr: Connexion des signaux

note: (itstool) path: section/p
en: We want to play the correct sound when the user clicks a button. That means that we have to connect to the signal that is fired when the user clicks the button. We also want to provide information to the called function which tone to play. GTKmm makes that quite easy as we can easily bind information with the <em>sigc</em> library.
fr: Nous voulons jouer la note adéquate quand l'utilisateur clique sur un bouton. Cela signifie que nous devons connecter le signal émis par ce bouton. Nous voulons aussi informer la fonction appelée du son à diffuser. GTKmm rend la chose facile car il est facile de lier des informations avec la bibliothèque <em>sigc</em>.

note: (itstool) path: section/p
en: The function that is called when the user clicks a button can be pretty simple, as all the interesting stuff is done in the helper class now:
fr: La fonction appelée lors d'un clic sur un bouton peut être très simple, car tout le travail intéressant se fait maintenant dans la classe assistant :

note: (itstool) path: section/p
en: It only calls the helper class we defined before to play the correct frequencies. With some more clever code we would also have been able to directly connect to the class without using the function but we will leave that to use as an exercise.
fr: Elle ne fait qu'appeler la classe assistant que nous avons configurée auparavant pour diffuser la fréquence appropriée. Avec un programme un peu plus malin, nous aurions pu aussi nous connecter directement à la classe sans passer par la fonction, mais laissons cela pour un exercice futur.

note: (itstool) path: section/p
en: The code to set up the signals should be added to the <code>main()</code> function just after the <code>builder-&gt;get_widget("main_window", main_win);</code> line:
fr: Le code qui configure les signaux doit être ajouté à la fonction <code>main()</code>, juste après la ligne <code>builder-&gt;get_widget("main_window",main_win);</code> :

note: (itstool) path: item/p
en: At first we create an instance of our helper class that we want to use now and declare a variable for the button we want to connect to.
fr: D'abord, nous créons une instance de notre classe assistant que nous voulons maintenant utiliser et déclarons une variable pour le bouton que nous voulons connecter.

note: (itstool) path: item/p
en: Next, we receive the button object from the user interface that was created out of the user interface file. Remember that <em>button_E</em> is the name we gave to the first button.
fr: Ensuite, nous récupérons l'objet bouton de l'interface utilisateur qui a été créé à partir du fichier de l'interface utilisateur. Souvenez-vous que <em>bouton_E</em> est le nom que nous avons donné au premier bouton.

note: (itstool) path: item/p
en: Finally we connect the <em>clicked</em> signal. This isn't fully straightforward because this is done in a fully type-safe way and we actually want to pass the frequency and our helper class to the signal handler. <code>sigc::ptr_fun(&amp;on_button_clicked)</code> creates a <em>slot</em> for the <code>on_button_clicked</code> method we defined above. With <code>sigc::bind</code> we are able to pass additional arguments to the slot and in this case we pass the frequency (as double) and our helper class.
fr: Enfin, nous connectons le signal <em>clicked</em>. Il est vrai que cela ne paraît pas très simple car nous prenons beaucoup de précautions sur le type des variables et que nous désirons en réalité transmettre notre classe assistant et la fréquence au récepteur de signal. <code>sigc::ptr_fun(&amp;on_button_clicked)</code> crée un <em>connecteur</em> pour la méthode <code>on_button_clicked</code> définie plus haut. Nous pouvons transmettre d'autres arguments avec <code>sigc::bind</code> et dans notre exemple, nous transmettons la fréquence (de type « double ») et notre classe assistant.

note: (itstool) path: section/p
en: Now that we have set up the <em>E</em> button we also need to connect the other buttons according to their frequencies: 440 for A, 587.33 for D, 783.99 for G, 987.77 for B and 1318.5 for the high E. This is done in the same way, just passing a different frequency to the handler.
fr: Après avoir configuré le bouton <em>E</em>, nous devons connecter les autres boutons en fonction de leur fréquence : 440 pour A, 587,33 pour D, 783,99 pour G, 987,77 pour B et 1318,5 pour E aiguë. Le processus est le même, seule la fréquence transmise au récepteur change.

note: (itstool) path: section/p
en: All of the code should now be ready to go. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, and then <guiseq><gui>Run</gui><gui>Run</gui></guiseq> to start the application.
fr: À ce stade, tout le programme est fonctionnel. Cliquez sur <guiseq><gui>Construire</gui><gui>Construire le projet</gui></guiseq> pour tout reconstruire et faites <guiseq><gui>Exécuter</gui><gui>Exécuter</gui></guiseq> pour lancer l'application.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.cc">reference code</link>.
fr: Si vous rencontrez des difficultés avec ce tutoriel, comparez votre programme à ce <link href="guitar-tuner/guitar-tuner.cc">programme de référence</link>.

note: (itstool) path: section/title
en: Further Reading
fr: Lecture complémentaire

note: (itstool) path: section/p
en: Many of the things shown above are explained in detail in the <link href="http://library.gnome.org/devel/gtkmm-tutorial/stable/">GTKmm book</link> which also covers a lot more key concept for using the full power of GTKmm. You might also be interested in the <link href="http://library.gnome.org/devel/gstreamermm/">GStreamermm reference documentation</link>.
fr: Pour des informations plus détaillées sur les exemples ci-dessus, consultez le <link href="http://library.gnome.org/devel/gtkmm-tutorial/stable/">manuel de GTKmm</link> qui couvre beaucoup plus de sujets clés pour utiliser toute la puissance de GTKmm, ainsi que la <link href="http://library.gnome.org/devel/gstreamermm/">documentation de référence de gstreamermm</link>.

note: (itstool) path: synopsis/p
en: In this tutorial we'll construct a small application, Guitar Tuner, using JavaScript and GTK+ and GStreamer. To do and run all the code examples yourself, you need an editor to write code in, terminal and GNOME 3. or higher installed into your computer.
fr: Dans ce tutoriel, nous allons construire une petite application, Accordeur de guitare, utilisant JavaScript, GTK+ et GStreamer. Pour écrire et lancer tous les exemples de code vous-même, vous avez besoin d'un éditeur pour écrire le code, de Terminal et d'un ordinateur sur lequel GNOME 3 ou supérieur est installé. Dans ce guide, nous illustrerons les éléments suivants :

note: (itstool) path: page/p
en: After reading this tutorial, you should see this in your screen:
fr: Après avoir suivi ce tutoriel, vous devriez voir ceci sur votre écran :

note: (itstool) path: section/title
en: Script for running the application
fr: Script de lancement de l'application

note: (itstool) path: section/p
en: This line tells how to run the script. It needs to be the first line of the code and it needs to be executable. To get the execution rights go to terminal and run in right folder: chmod +x scriptname. Or you can use the graphical filemanager. Just go to the right folder where your code is, right click you code file, choose properties, click the permissions tab and check the box for allow executing file as a program
fr: Cette ligne indique comment lancer le script. Elle doit être la première ligne de code et le script doit être exécutable. Pour donner les bonnes permissions, allez dans Terminal et lancer dans le dossier correct la commande : chmod +x nomduscript. Vous pouvez aussi utiliser le gestionnaire de fichiers graphique. Déplacez-vous dans le bon dossier où se trouve votre code, faites un clic-droit sur le fichier, sélectionnez Propriétés, cliquez sur l'onglet Permissions et cochez la case pour permettre l'exécution du fichier comme un programme.

note: (itstool) path: section/p
en: In order to have a working program we need to import a few GObject Introspection -libraries to our use. For working UI, we need Gtk and for Gstreamer to work we need Gst. These are imported in the beginning so we have them at use everywhere. Also in the beginning we import a construct Mainloop to handle the timeout to be used with the tuning sounds.
fr: Afin que le programme fonctionne, vous devez importer quelques bibliothèques d'introspection GObject à utiliser. Pour faire une interface graphique, nous avons besoin de Gtk et pour que Gstreamer fonctionne, nous avons besoin de Gst. Elles sont importées au début afin de pouvoir les utiliser partout ensuite. Nous importons également au début une boucle principale Mainloop pour prendre en charge le délai à utiliser avec les sons d'accordage.

note: (itstool) path: section/title
en: Creating the main window for the application
fr: Création de la fenêtre principale de l'application

note: (itstool) path: section/p
en: Importing Gtk and Gst is not enough, we need to initialize them in order to get them working. When Gtk and Gst are up and running we need to create the window for the application. Later we are going to put all the buttons for making sounds inside this window. In order to get the window showing, we need to tell it to show and we need also to run the code with the Gtk.main()
fr: L'importation de Gtk et Gst n'est pas suffisante, nous devons les initialiser afin qu'elles fonctionnent. Lorsque c'est fait, nous devons créer la fenêtre de l'application. Plus tard, nous allons placer tous les boutons pour faire les sons dans cette fenêtre. Afin que la fenêtre s'affiche, nous devons lui dire de s'afficher et nous avons besoin de lancer le code avec Gtk.main().

note: (itstool) path: section/title
en: Buttons for the tunes
fr: Les boutons pour les sons

note: (itstool) path: section/p
en: Because Gtk.Window can only contain a single widget, we need to create something under it to be able to add all the necessary buttons inside it. In this example we use Buttonbox. After creating the Buttonbox we create buttons with necessary labels. After we have the buttons we need to add them to the Buttonbox and the Buttonbox must be added to the Gtk.Window and everything in the Buttonbox must be shown.
fr: Puisque Gtk.Window ne peut contenir qu'un seul élément graphique, nous devons créer quelque chose en dessous pour pouvoir ajouter tous les boutons nécessaires à l'intérieur. Dans cet exemple, nous utilisons Buttonbox. Après la création de Buttonbox, nous créons les boutons avec les étiquettes nécessaires. Après l'obtention des boutons, nous devons les ajouter au Buttonbox et celui-ci doit être ajouté au Gtk.Window et tout ce qui est dans Buttonbox doit être affiché.

note: (itstool) path: section/p
en: After this stage you should have a window appearing to your screen showing 6 buttons. Right now the buttons don't do anything and we shall address that issue later. Before we can connect the button signals to something we need to code that something first.
fr: Après cette étape, vous devriez voir s'afficher une fenêtre à l'écran avec les 6 boutons. Pour l'instant, les boutons n'ont aucune action et nous verrons cela plus tard. Pour pouvoir connecter les signaux des boutons à quelque chose, il nous faut d'abord coder ce quelque chose.

note: (itstool) path: section/title
en: Making the sounds with GStreamer
fr: Création des sons avec GStreamer

note: (itstool) path: section/title
en: Connecting buttons to playSound
fr: Connexion des boutons à playSound

note: (itstool) path: section/title
en: The whole program
fr: Le programme complet

note: (itstool) path: section/title
en: Running the application form Terminal
fr: Exécution de l'application à partir de Terminal

note: (itstool) path: section/p
en: To run this application open Terminal, go to the folder where your application is stored and then run
fr: Pour lancer cette application, ouvrez Terminal, allez dans le dossier où votre application est enregistrée et lancez

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.js">reference code</link>.
fr: Si vous rencontrez des difficultés avec ce tutoriel, comparez votre programme à ce <link href="guitar-tuner/guitar-tuner.js">programme de référence</link>.

note: (itstool) path: item/p
en: Basic knowledge of the Python programming language
fr: de connaissances de base du langage de programmation Python.

note: (itstool) path: item/p
en: Choose <gui>PyGTK (automake)</gui> from the <gui>Python</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
fr: Sélectionnez <gui>PyGTK (automake)</gui> dans l'onglet <gui>Python</gui>, cliquez sur <gui>Continuer</gui> et saisissez vos informations sur les pages suivantes. Utilisez <file>guitar-tuner</file> comme nom de projet et de répertoire.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/guitar_tuner.py</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
fr: Cliquez sur <gui>Appliquer</gui> et le projet est créé. Ouvrez <file>src/guitar_tuner.py</file> depuis l'onglet <gui>Projet</gui> ou l'onglet <gui>Fichiers</gui>. Vous devez voir apparaître du code commençant par les lignes :

note: (itstool) path: section/title
en: Run the code for the first time
fr: Exécution du programme pour la première fois

note: (itstool) path: section/p
en: Most of the code in the file is template code. It loads an (empty) window from the user interface description file and shows it. More details are given below; skip this list if you understand the basics:
fr: La plupart du code dans ce fichier est générique. Il charge une fenêtre (vide) à partir du fichier de description de l'interface et l'affiche. Vous trouverez plus de détails ci-dessous ; passez cette liste si vous comprenez les bases :

note: (itstool) path: item/p
en: The <code>import</code> lines at the top include the tell Python to load the user interface and system libraries needed.
fr: Les lignes <code>import</code> tout en haut, indiquent à Python de charger l'interface utilisateur et les bibliothèques système nécessaires.

note: (itstool) path: item/p
en: A class is declared that will be the main class for our application. In the <code>__init__</code> method the main window is loaded from the GtkBuilder file (<file>src/guitar-tuner.ui</file>) and the signals are connected.
fr: Nous déclarons une classe qui est la classe principale de notre application. Dans la méthode <code>__init__</code>, la fenêtre principale est chargée depuis le fichier GtkBuilder (<file>src/guitar-tuner.ui</file>) et les signaux sont connectés.

note: (itstool) path: item/p
en: Connecting signals is how you define what happens when you push a button, or when some other event happens. Here, the <code>destroy</code> method is called (and quits the app) when you close the window.
fr: Connecter des signaux, c'est décider de ce qui doit se passer quand on appuie sur un bouton ou quand quelque chose d'autre se produit. Ici, la méthode <code>destroy</code> est appelée (et quitte l'application) quand la fenêtre est fermée.

note: (itstool) path: item/p
en: The <code>main</code> function is run by default when you start a Python application. It just creates an instance of the main class and starts the main loop to bring up the window.
fr: La fonction <code>main</code> est exécutée par défaut quand vous lancez une application Python. Elle crée juste une instance de la classe principale et démarre la boucle principale pour afficher la fenêtre.

note: (itstool) path: section/p
en: This code is ready to be used, so you can run it by clicking <guiseq><gui>Run</gui><gui>Execute</gui></guiseq>.
fr: Le programme est prêt à être utilisé et vous pouvez l'exécuter avec <guiseq><gui>Exécuter</gui><gui>Exécuter</gui></guiseq>.

note: (itstool) path: section/p
en: A description of the user interface (UI) is contained in the GtkBuilder file. To edit the user interface, open <file>src/guitar_tuner.ui</file>. This will switch to the interface designer. The design window is in the center; widgets and widgets' properties are on the right, and the palette of available widgets is on the left.
fr: Une description de l'interface utilisateur est contenue dans le fichier GtkBuilder. Pour la modifier, ouvrez le fichier <file>src/guitar_tuner.ui</file>. Ceci vous bascule vers le concepteur d'interface. La fenêtre de conception se trouve au centre ; les éléments graphiques et leurs propriétés sont sur la droite et la palette des composants graphiques disponibles est sur la gauche.

note: (itstool) path: section/title
en: Write the signal handler
fr: Écriture du gestionnaire de signal

note: (itstool) path: section/p
en: To do this, open <file>guitar_tuner.py</file> while the user interface file is still open. Switch to the <gui>Signals</gui> tab, which you already used to set the signal name. Now take the row where you set the <gui>clicked</gui> signal and drag it into to the source file inside the class. The following code will be added to your source file:
fr: Pour cela, ouvrez <file>guitar_tuner.py</file> pendant que le fichier interface utilisateur est encore ouvert. Allez au même onglet <gui>Signaux</gui> que vous aviez déjà utilisé pour nommer le signal. Prenez la ligne où vous aviez défini le signal <gui>clicked</gui> et faites-la glisser dans la classe du fichier source. Le code suivant s'ajoute à votre fichier source :

note: (itstool) path: section/p
en: This signal handler has two arguments: the usual Python class pointer, and the <code>Gtk.Button</code> that called the function.
fr: Ce récepteur de signal possède deux arguments : le pointeur classique de Python et <code>Gtk.Button</code> qui appelle la fonction.

note: (itstool) path: section/p
en: Change the import line in <file>guitar_tuner.py</file>, just at the beginning to :
fr: Modifiez la ligne import au début du fichier <file>guitar_tuner.py</file> en :

note: (itstool) path: section/p
en: The <code>Gst</code> includes the GStreamer library. You also need to initialise GStreamer properly which is done in the <code>main()</code> method with this call added above the <code>app = GUI()</code> line:
fr: <code>Gst</code> contient la bibliothèque de GStreamer. Il vous faut aussi initialiser correctement GStreamer ce qui est réalisé dans la méthode <code>main()</code> par cet appel à ajouter au-dessus de la ligne <code>app = GUI()</code> :

note: (itstool) path: section/p
en: Then, copy the following function into the class in <file>guitar_tuner.py</file> somewhere:
fr: Copiez ensuite la fonction suivante quelque part dans la classe de <file>guitar_tuner.py</file> :

note: (itstool) path: item/p
en: The first three lines create source and sink GStreamer elements and a pipeline element (which will be used as a container for the other two elements). The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output).
fr: Les trois premières lignes créent les éléments GStreamer source et sink (collecteur) et un élément pipeline (qui sera utilisé comme conteneur pour les deux autres éléments). Le pipeline est nommé « note » ; la source est nommée « source » et est définie comme étant le connecteur <code>audiotestsrc</code> et le collecteur est nommé « output » et est défini comme étant le connecteur <code>autoaudiosink</code> (qui est la sortie par défaut de la carte son).

note: (itstool) path: item/p
en: The call to <code>source.set_property</code> sets the <code>freq</code> property of the source element to <code>frequency</code>, which was passed as an argument to the <code>play_sound</code> function. This is just the frequency of the note in Hertz; some useful frequencies will be defined later on.
fr: L'appel à <code>source.set_property</code> définit la propriété <code>freq</code> de l'élément source à <code>frequency</code> qui est transmis comme argument de la fonction <code>play_sound</code>. Il s'agit simplement de la fréquence de la note de musique en Hertz ; certaines fréquences utiles seront définies plus tard.

note: (itstool) path: item/p
en: The next two lines call <code>pipeline.add</code>, putting the source and sink into the pipeline. The pipeline can contain multiple other GStreamer elements. In general, you can add as many elements as you like to the pipeline by calling its <code>add</code> method repeatedly.
fr: Les deux lignes suivantes appellent <code>pipeline.add</code> qui place la source et le collecteur dans le pipeline. Le pipeline peut contenir beaucoup d'autres éléments GStreamer. En général, vous pouvez ajouter autant d'éléments que vous voulez au pipeline en faisant autant d'appels supplémentaires à <code>add</code>.

note: (itstool) path: item/p
en: Next <code>pipeline.set_state</code> is used to start playback, by setting the state of the pipeline to playing (<code>Gst.State.PLAYING</code>).
fr: Ensuite, <code>pipeline.set_state</code> est utilisé pour démarrer la lecture en basculant l'état du pipeline à « playing » (lecture) (<code>Gst.State.PLAYING</code>).

note: (itstool) path: section/p
en: We don't want to play an annoying tone forever, so the last thing <code>play_sound</code> does is to call <code>GObject.timeout_add</code>. This sets a timeout for stopping the sound; it waits for <code>LENGTH</code> milliseconds before calling the function <code>pipeline_stop</code>, and will keep calling it until <code>pipeline_stop</code> returns <code>False</code>.
fr: Comme nous ne voulons pas jouer indéfiniment une note ennuyeuse, la dernière chose que fait <code>play_sound</code> est d'appeler <code>GObject.timeout_add</code> qui définit un délai avant la coupure du son ; cela attend <code>LENGTH</code> millisecondes avant d'appeler la fonction <code>pipeline_stop</code> et continuera à l'appeler jusqu'à ce que <code>pipeline_stop</code> renvoie la valeur <code>False</code>.

note: (itstool) path: section/p
en: Now, we'll write the <code>pipeline_stop</code> function which is called by <code>GObject.timeout_add</code>. Insert the following code <em>above</em> the <code>play_sound</code> function:
fr: Écrivons maintenant la fonction <code>pipeline_stop</code> qui est appelée par <code>GObject.timeout_add</code>. Insérez le code suivant <em>au-dessus</em> de la fonction <code>play_sound</code> :

note: (itstool) path: section/p
en: You need to define the <code>LENGTH</code> constant inside the class, so add this code at the beginning of the main class:
fr: Vous devez définir la constante <code>LENGTH</code> dans la classe, donc ajoutez ce code au début de la classe principale :

note: (itstool) path: section/p
en: We want to play the correct sound when the user clicks a button. First of all, we need to know the frequencies for the six guitar strings, which are defined (at the beginning of the main class) inside a dictionary so we can easily map them to the names of the strings:
fr: Nous voulons jouer la note adéquate quand l'utilisateur clique sur un bouton. Avant tout, nous devons connaître la fréquence de chacune des six cordes de la guitare qui sont définies (au début de la classe principale) dans un dictionnaire de façon à pouvoir facilement les associer aux noms des cordes :

note: (itstool) path: section/p
en: The button that was clicked is passed as an argument (<code>button</code>) to <code>on_button_clicked</code>. We can get the label of that button by using <code>button.get_child</code>, and then get the text from that label using <code>label.get_label</code>.
fr: Le bouton qui a été cliqué est transmis comme argument (<code>button</code>) à <code>on_button_clicked</code>. On peut obtenir l'étiquette de ce bouton en utilisant <code>button.get_child</code> puis en extrayant le texte de cette étiquette avec <code>label.get_label</code>.

note: (itstool) path: section/p
en: The label text is then used as a key for the dictionary and <code>play_sound</code> is called with the frequency appropriate for that note. This plays the tone; we have a working guitar tuner!
fr: Le texte de cette étiquette est alors utilisé comme clé du dictionnaire et la fonction <code>play_sound</code> est appelée avec la fréquence appropriée à cette note. Cela joue la note ; nous avons un accordeur de guitare opérationnel !

note: (itstool) path: section/title
en: Run the application
fr: Exécution de l'application

note: (itstool) path: section/p
en: All of the code should now be ready to go. Click <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> to start the application. Enjoy!
fr: Tout le programme nécessaire doit maintenant être fonctionnel. Cliquez sur <guiseq><gui>Exécuter</gui><gui>Exécuter</gui></guiseq> pour lancer l'application. Amusez-vous bien !

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.py">reference code</link>.
fr: Si vous rencontrez des difficultés avec ce tutoriel, comparez votre programme à ce <link href="guitar-tuner/guitar-tuner.py">programme de référence</link>.

note: (itstool) path: synopsis/p
en: In this tutorial you will create an application which plays tones that you can use to tune a guitar. You will learn how to:
fr: Dans ce tutoriel, nous allons écrire un programme qui émet des sons servant à accorder une guitare. Nous allons apprendre comment :

note: (itstool) path: item/p
en: Set up a basic project using the <link xref="getting-ready">Anjuta IDE</link>.
fr: paramétrer un projet de base en utilisant <link xref="getting-ready">Anjuta IDE</link>,

note: (itstool) path: item/p
en: Create a simple GUI with <app>Anjuta</app>'s UI designer.
fr: créer une interface graphique simple avec le concepteur d'interface utilisateur d'<app>Anjuta</app>,

note: (itstool) path: item/p
en: Use the <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> library to play sounds.
fr: utiliser la bibliothèque <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> pour jouer des sons.

note: (itstool) path: item/p
en: Basic knowledge of the <link href="https://live.gnome.org/Vala/Tutorial">Vala</link> programming language.
fr: les connaissances de base du langage de programmation <link href="https://live.gnome.org/Vala/Tutorial">Vala</link>.

note: (itstool) path: item/p
en: An installed copy of <app>Anjuta</app>.
fr: une copie installée de <em>Anjuta</em>.

note: (itstool) path: section/title
en: Create a project in <app>Anjuta</app>
fr: Création d'un projet dans <app>Anjuta</app>

note: (itstool) path: item/p
en: Start <app>Anjuta</app> and click <gui>Create a new project</gui> or <guiseq><gui>File</gui><gui>New</gui><gui>Project</gui></guiseq> to open the project wizard.
fr: Lancez <app>Anjuta</app> et cliquez sur <gui>Créer un nouveau projet</gui> ou <guiseq><gui>Fichier</gui><gui>Nouveau</gui><gui>Projet</gui></guiseq> pour ouvrir l'assistant de création de projet.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is switched <gui>ON</gui>. On the next page, select <link href="http://valadoc.org/gstreamer-0.10/index.htm"><em>gstreamer-0.10</em></link> from the list to include the GStreamer library in your project. Click <gui>Continue</gui>
fr: Assurez-vous que <gui>Configuration des paquets externes</gui> est basculée sur <gui>I</gui>. Sur la page suivante, choisissez <link href="http://valadoc.org/gstreamer-0.10/index.htm"><em>gstreamer-0.10</em></link> dans la liste pour inclure la bibliothèque GStreamer à votre projet. Cliquez sur <gui>Continuer</gui>.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. From the <gui>Project</gui> or <gui>Files</gui> tab, open <file>src/guitar_tuner.vala</file> by double-clicking on it. You should see some code which starts with the lines:
fr: Cliquez sur <gui>Appliquer</gui> et votre projet est créé. Ouvrez <file>src/guitar_tuner.vala</file> en faisant un double clic depuis l'onglet <gui>Projet</gui> ou l'onglet <gui>Fichiers</gui>. Vous devez voir apparaître du code commençant par les lignes :

note: (itstool) path: section/p
en: The code loads an (empty) window from the user interface description file and displays it. More details are given below; you may choose to skip this list if you understand the basics:
fr: Ce programme charge une fenêtre (vide) à partir du fichier de description de l'interface et l'affiche. Vous trouverez plus de détails ci-dessous ; passez cette liste si vous comprenez les bases :

note: (itstool) path: item/p
en: The two <code>using</code> lines import namespaces so we don't have to name them explicitly.
fr: Les deux lignes <code>using</code> importent des espaces de noms que nous n'aurons plus à nommer explicitement.

note: (itstool) path: item/p
en: The constructor of the <code>Main</code> class creates a new window by opening a GtkBuilder file (<file>src/guitar-tuner.ui</file>, defined a few lines above), connecting its signals and then displaying it in a window. This GtkBuilder file contains a description of a user interface and all of its elements. You can use Anjuta's editor to design GtkBuilder user interfaces.
fr: Le constructeur de la classe <code>Main</code> crée une nouvelle fenêtre en ouvrant un fichier GtkBuilder (<file>src/guitar-tuner.ui</file>, défini quelques lignes plus haut), en connectant son signal puis en l'affichant dans une fenêtre. Ce fichier GtkBuilder contient la description d'une interface utilisateur et tous ses éléments. On peut utiliser l'éditeur d'Anjuta pour concevoir des interfaces utilisateur GtkBuilder.

note: (itstool) path: note/p
en: Connecting signals is how you define what happens when you push a button, or when some other event happens. Here, the <code>on_destroy</code> function is called (and quits the app) when you close the window.
fr: Connecter des signaux, c'est décider de ce qui doit se passer quand on appuie sur un bouton ou quand quelque chose d'autre se produit. Ici, la fonction <code>on_destroy</code> est appelée (et quitte l'application) quand la fenêtre est fermée.

note: (itstool) path: item/p
en: The static <code>main</code> function is run by default when you start a Vala application. It calls a few functions which create the Main class, set up and then run the application. The <code>Gtk.main</code> function starts the GTK main loop, which runs the user interface and starts listening for events (like clicks and key presses).
fr: La fonction statique <code>main</code> est exécutée par défaut quand vous lancez une application Vala. Elle appelle d'autres fonctions qui créent la classe Main, configurent puis exécutent l'application. La fonction <code>Gtk.Main</code> démarre la boucle principale de GTK, qui lance l'interface utilisateur et commence à écouter les événements (comme des clics de souris ou des appuis sur des touches).

note: (itstool) path: section/p
en: This code is ready to be used, so you can compile it by clicking <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> (or press <keyseq><key>Shift</key><key>F7</key></keyseq>). When you do this, a dialog will appear. Change the <gui>Configuration</gui> to <gui>Default</gui> and then click <gui>Execute</gui> to configure the build directory. You only need to do this once, for the first build.
fr: Le programme est prêt à être utilisé, donc vous pouvez le compiler en cliquant sur <guiseq><gui>Construire</gui><gui>Construire le projet</gui></guiseq> ou en appuyant sur <keyseq><key>Maj</key><key>F7</key></keyseq>. Ceci fait apparaître une boîte de dialogue. Pour configurer le répertoire de compilation, modifiez la <gui>Configuration</gui> à <gui>Par défaut</gui> et cliquez sur <gui>Exécuter</gui>. Il ne faut le faire qu'une seule fois, à la première compilation.

note: (itstool) path: section/p
en: A description of the user interface (UI) is contained in the GtkBuilder file <file>src/guitar_tuner.ui</file> defined at the top of the class. To edit the user interface, open <file>src/guitar_tuner.ui</file> by double-clicking on it in the <gui>Project</gui> or <gui>Files</gui> section. This will switch to the interface designer. The design window is in the center; <gui>Widgets</gui> and the widget properties are on the right, and the <gui>Palette</gui> of available widgets is on the left.
fr: Une description de l'interface utilisateur est contenue dans le fichier GtkBuilder <file>src/guitar_tuner.ui</file> défini au début de la classe. Pour la modifier, ouvrez le fichier <file>src/guitar_tuner.ui</file> en faisant un double clic depuis les onglets <gui>Projet</gui> ou <gui>Fichiers</gui>. Ceci vous renvoie vers le concepteur d'interface. La fenêtre de conception se trouve au centre ; les <gui>éléments graphiques</gui> et leurs propriétés sont sur la droite et la <gui>palette</gui> des éléments graphiques disponibles est sur la gauche.

note: (itstool) path: section/p
en: The layout of every UI in GTK+ is organized using boxes and tables. Let's use a vertical GtkButtonBox here to assign six GtkButtons, one for each of the six guitar strings.
fr: La disposition de toute interface utilisateur dans GTK+ est organisée à l'aide de boîtes et de tableaux. Dans cet exemple, prenons une GtkButtonBox verticale pour y mettre six GtkButtons, un pour chacune des six cordes de la guitare.

note: (itstool) path: item/p
en: In the <gui>Palette</gui> tab, from the <gui>Containers</gui> section, select a <gui>Button Box</gui> (GtkButtonBox) by clicking on the icon. Then click on the design window in the center to place it into the window. A dialog will display where you can set the <gui>Number of items</gui> to <input>6</input>. Then click <gui>Create</gui>.
fr: Dans l'onglet <gui>Palette</gui> de la section <gui>Conteneurs</gui>, choisissez une <gui>Boîte</gui> (GtkButtonBox) en cliquant sur l'icône. Cliquez ensuite sur la fenêtre de conception au centre pour la placer dans la fenêtre. Une boîte de dialogue apparaît dans laquelle vous pouvez définir le <gui>nombre d'éléments</gui> à <input>6</input>. Cliquez ensuite sur <gui>Créer</gui>.

note: (itstool) path: note/p
en: You can also change the <gui>Number of elements</gui> and the <gui>Orientation</gui> in the <gui>General</gui> tab on the right.
fr: Vous pouvez aussi modifier le <gui>Nombre d'éléments</gui> et l'<gui>Orientation</gui> dans l'onglet <gui>Général</gui> sur la droite.

note: (itstool) path: item/p
en: Now, from the <gui>Control and Display</gui> section of the <gui>Palette</gui> choose a <gui>Button</gui> (GtkButton) by clicking on it. Place it into the first section of the GtkButtonBox by clicking in the first section.
fr: Maintenant, à partir de la section <gui>Contrôle et affichage</gui> de la section <gui>Palette</gui>, sélectionnez un <gui>Bouton</gui> (GtkButton) en cliquant dessus et disposez-le dans la première case du GtkButtonBox en cliquant sur celle-ci.

note: (itstool) path: item/p
en: While the button is still selected, scroll down in the <gui>General</gui> tab on the right to the <gui>Label</gui> property, and change it to <gui>E</gui>. This will be the low E guitar string.
fr: Pendant que le bouton est encore sélectionné, déplacez-vous dans l'onglet <gui>Général</gui> à droite de la propriété <gui>Étiquette</gui> et modifiez-la en <gui>E</gui>. C'est la corde E en bas de la guitare.

note: (itstool) path: note/p
en: The <gui>General</gui> tab is located in the <gui>Widgets</gui> section on the right.
fr: L'onglet <gui>Général</gui> est situé dans la section <gui>Composants graphiques</gui> sur la droite.

note: (itstool) path: item/p
en: Click on the <gui>Signals</gui> tab in the <gui>Widgets</gui> section on the right, and look for the <code>clicked</code> signal of the button. You can use this to connect a signal handler that will be called when the button is clicked by the user. To do this, click on the signal and type <code>main_on_button_clicked</code> in the <gui>Handler</gui> column and press the <key>Enter</key>.
fr: Passez à l'onglet <gui>Signaux</gui> dans la section <gui>Composants graphiques</gui> et recherchez le signal <code>clicked</code> du bouton. Vous pouvez l'utiliser pour connecter un gestionnaire de signal qui sera appelé quand le bouton est cliqué. Pour cela, cliquez sur le signal et saisissez <code>main_on_button_clicked</code> dans la colonne <gui>Gestionnaire</gui> et appuyez sur <key>Entrée</key>.

note: (itstool) path: section/p
en: This section will show you how to create the code to produce sounds. <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> is GNOME's multimedia framework — you can use it for playing, recording, and processing video, audio, webcam streams and the like. Here, we'll be using it to produce single-frequency tones.
fr: Cette section va vous montrer comment créer un programme qui produit des sons. <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> est l'architecture multimédia de GNOME — vous pouvez vous en servir pour des jeux, des enregistrements, pour traiter des flux vidéo, audio, de webcam entre autres. Ici, nous allons nous en servir pour émettre des tonalités à une seule fréquence.

note: (itstool) path: section/p
en: Conceptually, GStreamer works as follows: You create a <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-bins.html"><em>pipeline</em></link> containing several processing elements going from the <em>source</em> to the <em>sink</em> (output). The source can be an image file, a video, or a music file, for example, and the output could be a widget or the soundcard.
fr: Le concept de GStreamer est le suivant : il y a création d'un <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-bins.html"><em>pipeline</em></link> contenant plusieurs éléments de traitement en provenance d'une <em>source</em> à destination d'un <em>collecteur</em> (sortie). La source peut être un fichier image, une vidéo ou un fichier musical, par exemple, et la sortie un élément graphique ou une carte son.

note: (itstool) path: section/p
en: In this example we will use a tone generator source called <code>audiotestsrc</code> and send the output to the default system sound device, <code>autoaudiosink</code>. We only need to configure the frequency of the tone generator; this is accessible through the <code>freq</code> property of <code>audiotestsrc</code>.
fr: Dans cet exemple, nous utilisons une source génératrice de son de fréquence pure appelée <code>audiotestsrc</code> et envoyons sa sortie au périphérique son par défaut du système, <code>autoaudiosink</code>. Il nous faut seulement configurer la fréquence du générateur accessible depuis la propriété <code>freq</code> de <code>audiotestsrc</code>.

note: (itstool) path: section/p
en: We need to add a line to initialize GStreamer; put the following code on the line above the <code>Gtk.init</code> call in the <code>main</code> function:
fr: Il faut ajouter une ligne pour initialiser GStreamer ; écrivez le code suivant dans la ligne au-dessus de l'appel à <code>Gtk.init</code> dans la fonction <code>main</code> :

note: (itstool) path: section/p
en: Then, copy the following function into <file>guitar_tuner.vala</file> inside our <code>Main</code> class:
fr: Ensuite, copiez la fonction suivante dans le fichier <file>guitar_tuner.vala</file> à l'intérieur de notre classe <code>Main</code> :

note: (itstool) path: item/p
en: The first three lines create source and sink GStreamer elements (<link href="http://valadoc.org/gstreamer-0.10/Gst.Element.html"><code>Gst.Element</code></link>), and a <link href="http://valadoc.org/gstreamer-0.10/Gst.Pipeline.html">pipeline element</link> (which will be used as a container for the other two elements). Those are class variables so they are defined outside the method. The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output).
fr: Les trois premières lignes créent les éléments GStreamer source et sink (collecteur) (<link href="http://valadoc.org/gstreamer-0.10/Gst.Element.html"><code>Gst.Element</code></link>) et un élément <link href="http://valadoc.org/gstreamer-0.10/Gst.Pipeline.html">pipeline element</link> (qui sera utilisé comme conteneur pour les deux autres). Ce sont des variables de classe et sont donc définies en dehors de la méthode. Le pipeline est nommé « note » ; la source est nommée « source » et le collecteur est nommé « output » et est défini comme étant le connecteur <code>autoaudiosink</code> (qui est la sortie par défaut de la carte son).

note: (itstool) path: item/p
en: The call to <link href="http://valadoc.org/gobject-2.0/GLib.Object.set.html"><code>source.set</code></link> sets the <code>freq</code> property of the source element to <code>frequency</code>, which is passed in as an argument to the <code>play_sound</code> function. This is just the frequency of the note in Hertz; some useful frequencies will be defined later on.
fr: L'appel à <link href="http://valadoc.org/gobject-2.0/GLib.Object.set.html"><code>source.set</code></link> définit la propriété <code>freq</code> de l'élément source à <code>frequency</code> qui est transmis comme argument de la fonction <code>play_sound</code>. Il s'agit simplement de la fréquence de la note de musique en Hertz ; certaines fréquences utiles seront définies plus tard.

note: (itstool) path: item/p
en: <link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.add.html"><code>pipeline.add</code></link> puts the source and sink into the pipeline. The pipeline is a <link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.html"><code>Gst.Bin</code></link>, which is just an element that can contain multiple other GStreamer elements. In general, you can add as many elements as you like to the pipeline by adding more calls to <code>pipeline.add</code>.
fr: <link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.add.html"><code>pipeline.add</code></link> place la source et le collecteur dans le pipeline. Le pipeline est un <link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.html"><code>Gst.Bin</code></link>, c.-à-d. juste un élément qui peut contenir beaucoup d'autres éléments GStreamer. En général, vous pouvez ajouter autant d'éléments que vous voulez au pipeline en faisant autant d'appels supplémentaires à <code>pipeline.add</code>.

note: (itstool) path: item/p
en: Next, <link href="http://valadoc.org/gstreamer-0.10/Gst.Element.link.html"><code>sink.link</code></link> is used to connect the elements together, so the output of source (a tone) goes into the input of sink (which is then output to the sound card). <link href="http://www.valadoc.org/gstreamer-0.10/Gst.Element.set_state.html"><code>pipeline.set_state</code></link> is then used to start playback, by setting the <link href="http://www.valadoc.org/gstreamer-0.10/Gst.State.html">state of the pipeline</link> to playing (<code>Gst.State.PLAYING</code>).
fr: Ensuite, <link href="http://valadoc.org/gstreamer-0.10/Gst.Element.link.html"><code>sink.link</code></link> sert à lier les éléments ensemble, de sorte que la sortie de la source (une note) va à l'entrée du collecteur (et est ensuite envoyée à la carte son). <link href="http://www.valadoc.org/gstreamer-0.10/Gst.Element.set_state.html"><code>pipeline.set_state</code></link> sert enfin à démarrer la lecture en basculant l'<link href="http://www.valadoc.org/gstreamer-0.10/Gst.State.html">état du pipeline</link> à « playing » (lecture) (<code>Gst.State.PLAYING</code>).

note: (itstool) path: item/p
en: We don't want to play an annoying tone forever, so the last thing <code>play_sound</code> does is to add a <link href="http://www.valadoc.org/glib-2.0/GLib.TimeoutSource.html"><code>TimeoutSource</code></link>. This sets a timeout for stopping the sound; it waits for 200 milliseconds before calling a signal handler defined inline that stops and destroys the pipeline. It returns <code>false</code> to remove itself from the timeout, otherwise it would continue to be called every 200 ms.
fr: Comme nous ne voulons pas jouer indéfiniment une note ennuyeuse, la dernière chose que fait <code>play_sound</code> est d'ajouter un <link href="http://www.valadoc.org/glib-2.0/GLib.TimeoutSource.html"><code>TimeoutSource</code></link> qui définit un délai avant la coupure du son ; cela attend 200 millisecondes avant d'appeler un gestionnaire de signal défini ici même, qui stoppe et détruit le pipeline. Il renvoie <code>false</code> pour se supprimer lui-même du délai d'attente, sinon il serait constamment appelé toutes les 200 ms.

note: (itstool) path: section/p
en: In the UI designer, you made it so that all of the buttons will call the same function, <gui>on_button_clicked</gui>, when they are clicked. Actually we type <gui>main_on_button_clicked</gui> which tells the UI designer that this method is part of our <code>Main</code>. We need to add that function in the source file.
fr: Dans le concepteur d'interface utilisateur, il a été fait en sorte que tous les boutons appellent la même fonction, <gui>on_button_clicked</gui> quand ils sont cliqués. En réalité, nous saisissons <gui>main_on_button_clicked</gui> qui indique au concepteur d'interface utilisateur que cette méthode fait partie de notre fonction <code>Main</code>. Nous devons ajouter cette fonction dans notre fichier source.

note: (itstool) path: section/p
en: To do this, in the user interface file (guitar_tuner.ui) select one of the buttons by clicking on it, then open <file>guitar_tuner.vala</file> (by clicking on the tab in the center). Switch to the <gui>Signals</gui> tab on the right, which you used to set the signal name. Now take the row where you set the <gui>clicked</gui> signal and drag and drop it into to the source file at the beginning of the class. The following code will be added to your source file:
fr: Pour cela, dans le fichier interface utilisateur (guitar_tuner.ui), sélectionnez un des boutons en cliquant dessus, puis ouvrez <file>guitar_tuner.vala</file> (en cliquant sur l'onglet au milieu). Allez sur la droite, dans l'onglet <gui>Signaux</gui> que vous aviez déjà utilisé pour nommer le signal. Prenez maintenant la ligne où vous aviez défini le signal <gui>clicked</gui> et faites-la glisser dans le fichier source au début de la classe. Le code suivant s'ajoute à votre fichier source :

note: (itstool) path: note/p
en: You can also just type the code at the beginning of the class instead of using the drag and drop.
fr: Vous pouvez aussi saisir seulement le code au début de la classe au lieu d'utiliser le glisser-déposer.

note: (itstool) path: section/p
en: This signal handler has only one argument: the <link href="http://valadoc.org/gtk+-3.0/Gtk.Widget.html"><code>Gtk.Widget</code></link> that called the function (in our case, always a <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html"><code>Gtk.Button</code></link>).
fr: Le récepteur du signal n'a qu'un seul argument : le <link href="http://valadoc.org/gtk+-3.0/Gtk.Widget.html"><code>Gtk.Widget</code></link> qui a appelé la fonction (dans notre cas, toujours un <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html"><code>Gtk.Button</code></link>).

note: (itstool) path: section/title
en: Define the signal handler
fr: Définition du gestionnaire de signal

note: (itstool) path: section/p
en: We want to play the correct sound when the user clicks a button. For this, we flesh out the signal handler which we defined above, <code>on_button_clicked</code>. We could have connected every button to a different signal handler, but that would lead to a lot of code duplication. Instead, we can use the label of the button to figure out which button was clicked:
fr: Nous voulons jouer la note adéquate quand l'utilisateur clique sur un bouton. Pour cela, nous allons étoffer le gestionnaire de signal défini auparavant. Nous aurions pu connecter chaque bouton à un gestionnaire différent, mais cela aurait dupliqué beaucoup de code. Au lieu de ça, nous allons plutôt utiliser l'étiquette du bouton pour déterminer le bouton cliqué :

note: (itstool) path: section/p
en: The <code>Gtk.Button</code> that was clicked is passed as an argument (<code>sender</code>) to <code>on_button_clicked</code>. We can get the label of that button by using <code>get_child</code>, and then get the text from that label using <code>get_label</code>.
fr: Le bouton <code>Gtk.Button</code> qui a été cliqué est transmis comme argument (<code>sender</code>) à <code>on_button_clicked</code>. Nous pouvons obtenir l'étiquette de ce bouton en utilisant <code>get_child</code> puis, le texte de cette étiquette en utilisant <code>get_label</code>.

note: (itstool) path: section/p
en: The switch statement compares the label text to the notes that we can play, and <code>play_sound</code> is called with the frequency appropriate for that note. This plays the tone; we have a working guitar tuner!
fr: L'instruction « switch » compare le texte de l'étiquette à la note que nous pouvons jouer et <code>play_sound</code> est appelé avec la fréquence appropriée à cette note. Cela fonctionne ; nous obtenons un accordeur de guitare opérationnel !

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.vala">reference code</link>.
fr: Si vous rencontrez des difficultés avec ce tutoriel, comparez votre programme à ce <link href="guitar-tuner/guitar-tuner.vala">programme de référence</link>.

note: (itstool) path: section/title
en: Further reading
fr: Documentation complémentaire

note: (itstool) path: section/p
en: To find out more about the Vala programming language you might want to check out the <link href="http://live.gnome.org/Vala/Tutorial">Vala Tutorial</link> and the <link href="http://valadoc.org/">Vala API Documentation</link>
fr: Pour en savoir plus à propos de la programmation en langage Vala, consultez le <link href="http://live.gnome.org/Vala/Tutorial">manuel Vala</link> et la <link href="http://valadoc.org/">Documentation de Vala API</link>.

note: (itstool) path: info/desc
en: A basic "hello, world" application
fr: Une application basique « hello, world »

note: (itstool) path: section/title
en: Label for the window
fr: Étiquette de la fenêtre

note: (itstool) path: item/title (itstool) path: td/p
en: Name
fr: Nom

note: (itstool) path: section/p
en: To make your application truly a part of the GNOME 3 system you need to install it with the help of autotools. The autotools build will install all the necessary files to all the right places.
fr: Pour que votre application fasse partie intégrante de GNOME 3, vous devez l'installer à l'aide d'autotools. Autotools construit et installe tous les fichiers nécessaires et les place à leurs emplacements corrects.

note: (itstool) path: section/p
en: For this you need to have the following files:
fr: Auparavant, vous devez posséder les fichiers suivants :

note: (itstool) path: info/desc
en: A widget displaying an image
fr: Un élément graphique qui affiche une image

note: (itstool) path: page/p
en: This GtkApplication displays an image file from the current directory.
fr: Cette application Gtk affiche un fichier image issu du dossier en cours.

note: (itstool) path: note/p
en: If the image file isn't loaded successfully, the image will contain a "broken image" icon. The <file>filename.png</file> needs to be in the current directory for this code to work. Use your favorite picture!
fr: Si le fichier image n'est pas chargé correctement, l'image contient une icône en forme d'« image brisée ». Le <file>nomdufichier.png</file> doit être dans le dossier actuel pour que ce code fonctionne. Faites bon usage de votre photo favorite !

note: (itstool) path: section/p
en: Another way to obtain what we have in the example is to create the image as an instance of another class and add it to the instance of <code>MyWindow</code> in the <code>do_activate(self)</code> method:
fr: Une autre manière d'obtenir ce qu'il y a dans cet exemple est de créer l'image en tant qu'exemple d'une autre classe et de l'ajouter à <code>MyWindow</code> dans la méthode <code>do_activate(self)</code> :

note: (itstool) path: section/title
en: Useful methods for an Image widget
fr: Méthodes utiles pour un élément graphique Image

note: (itstool) path: item/p
en: If <code>preserve_aspect_ratio=True</code> we can use <code>new_from_file_at_size(filename, width, height)</code>. If <code>width</code> or <code>height</code> is <code>-1</code>, it is not constrained.
fr: Si <code>preserve_aspect_ratio=True</code> est vrai, utilisez <code>new_from_file_at_size(nomdufichier, largeur, hauteur)</code>. Si <code>largeur</code> ou <code>hauteur</code> est <code>-1</code>, il n'y a pas de contrainte.

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" Gtk application.
fr: Un peu plus qu'une simple application Gtk « Hello world ».

note: (itstool) path: synopsis/p
en: In this tutorial, you will learn:
fr: Dans ce tutoriel, vous allez apprendre :

note: (itstool) path: item/p
en: Some basic concepts of C/GObject programming
fr: quelques concepts de base de la programmation en C/GObject,

note: (itstool) path: item/p
en: How to write a Gtk application in C
fr: comment écrire une application GTK en C.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is disabled as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.c">Guitar-Tuner</link> tutorial if you want to learn how to use the interface builder.
fr: Assurez-vous d'avoir désactivé <gui>Utiliser GtkBuilder pour l'interface utilisateur</gui> car nous allons créer l'interface utilisateur manuellement dans cet exemple. Consultez le tutoriel <link xref="guitar-tuner.c">Guitar-Tuner</link> pour un exemple d'utilisation du constructeur d'interfaces.

note: (itstool) path: section/p
en: C is a rather verbose language, so don't be surprised that the file contains quite a lot of code. Most of it is template code. It loads an (empty) window and shows it. More details are given below; skip this list if you understand the basics:
fr: « C » est un langage plutôt verbeux, donc ne soyez pas surpris par la quantité de code que contient le fichier. La plupart du code est générique. Il charge une fenêtre (vide) et l'affiche. Vous trouverez plus de détails ci-dessous ; passez cette liste si vous comprenez les bases :

note: (itstool) path: item/p
en: The <code>create_window</code> function creates a new (empty) window and connects a signal to exit the application when that window is closed.
fr: La fonction <code>create_window</code> crée une nouvelle fenêtre (vide) et connecte un signal pour quitter l'application quand la fenêtre est fermée.

note: (itstool) path: section/title
en: Creating the user interface
fr: Création de l'interface utilisateur

note: (itstool) path: section/p
en: Now we will bring life into the empty window. GTK organizes the user interface with <code>GtkContainer</code>s that can contain other widgets and even other containers. Here we will use the simplest available container, a <code>GtkBox</code>:
fr: Nous allons maintenant donner vie à la fenêtre vide. GTK organise l'interface utilisateur avec des <code>GtkContainer</code> qui peuvent contenir d'autres éléments graphiques et même d'autres conteneurs. Ici, nous allons utiliser le plus simple conteneur disponible, une boîte <code>GtkBox</code> :

note: (itstool) path: item/p
en: The first lines create the widgets we want to use: a button for opening up an image, the image view widget itself and the box we will use as a container. The macros like <code>GTK_BOX</code> are used for dynamic type checking and casting which is needed as C doesn't support object-orientation out-of-the-box.
fr: Les premières lignes créent les éléments graphiques que nous voulons utiliser : un bouton pour pouvoir ouvrir une image, l'élément graphique image lui-même et la boîte qui nous sert de conteneur. Nous utilisons des macros comme <code>GTK_BOX</code> pour contrôler et convertir de manière dynamique les types d'objet ce qui est nécessaire car le C n'est pas prévu nativement pour prendre en charge la programmation orientée objets.

note: (itstool) path: item/p
en: The calls to <code>gtk_box_pack_start</code> add the two widgets to the box and define their behaviour. The image will expand into any available space while the button will just be as big as needed. You will notice that we don't set explicit sizes on the widgets. In GTK this is usually not needed as it makes it much easier to have a layout that looks good in different window sizes. Next, the box is added to the window.
fr: Les appels à <code>gtk_box_pack_start</code> ajoutent les deux éléments graphiques à la boîte et définissent leur comportement. L'image va s'étendre pour occuper tout l'espace disponible alors que le bouton va prendre juste la taille nécessaire. Notez que nous ne définissons pas explicitement les dimensions des éléments graphiques. Avec GTK, ce n'est habituellement pas nécessaire car cela facilite grandement l'obtention d'une bonne disposition pour différentes tailles de fenêtre. La boîte est ensuite ajoutée dans la fenêtre.

note: (itstool) path: item/p
en: We need to define what happens when the user clicks on the button. GTK uses the concept of <em>signals</em>. When the button is clicked, it fires the <em>clicked</em> signal, which we can connect to some action. This is done using the <code>g_signal_connect</code> function which tells GTK to call the <code>on_image_open</code> function when the button is clicked and to pass the image as an additional argument to that function. We will define the <em>callback</em> in the next section.
fr: Il nous faut définir ce qui se passe quand l'utilisateur clique sur le bouton. GTK utilise le concept de <em>signaux</em>. Quand le bouton est cliqué, il envoie le signal <em>clicked</em> qu'il est possible de relier à une action. Cela a été réalisé avec la méthode <code>g_signal_connect</code> qui commande à GTK d'appeler la fonction <code>on_open_image</code> quand le bouton est cliqué et de transmettre l'image à cette fonction comme argument additionnel. Nous définirons la <em>fonction de rappel</em> à la section suivante.

note: (itstool) path: item/p
en: The last <code>g_signal_connect()</code> makes sure that the application exits when the window is closed.
fr: Le dernier signal <code>g_signal_connect()</code> assure que l'application quitte quand la fenêtre est fermée.

note: (itstool) path: item/p
en: As a last step, make sure to replace the <code>gtk_widget_show</code> call in the <code>main()</code> function by <code>gtk_widget_show_all()</code> to show the window and all the widgets it contains.
fr: Pour finir, assurez-vous de remplacer l'appel <code>gtk_widget_show</code> de la fonction principale <code>main()</code> par <code>gtk_widget_show_all()</code> pour afficher la fenêtre et tous les éléments graphiques qu'elle contient.

note: (itstool) path: section/title
en: Showing the image
fr: Affichage de l'image

note: (itstool) path: section/p
en: We will now define the signal handler for the <em>clicked</em> signal or the button we mentioned before. Add this code before the <code>create_window()</code> method.
fr: Nous allons maintenant définir le gestionnaire de signal pour le signal <em>clicked</em> du bouton ci-dessus. Ajoutez ce code avant la méthode <code>create_window()</code>.

note: (itstool) path: section/p
en: This is a bit more complicated than anything we've attempted so far, so let's break it down:
fr: C'est un peu plus compliqué que tout ce que nous avons essayé jusqu'à présent, donc décortiquons cette partie étape par étape :

note: (itstool) path: item/p
en: The first argument of the signal is always the widget that sent the signal. Sometimes other arguments related to the signal come after that, but <em>clicked</em> doesn't have any. Next is the <code>user_data</code> argument which is a pointer to the data we passed when connecting the signal. In this case it is our <code>GtkImage</code> object.
fr: Le premier argument du signal est toujours l'élément graphique qui envoie le signal. Il y a parfois d'autres arguments attachés au signal, mais <em>clicked</em> n'en a aucun. Ensuite vient l'argument <code>user_data</code> qui est un pointeur vers les données transmises en connectant le signal. Ici, c'est notre objet <code>GtkImage</code>.

note: (itstool) path: item/p
en: The next interesting line is where the dialog for choosing the file is created using <code>gtk_file_chooser_dialog_new</code>. The function takes the title of the dialog, the parent window of the dialog and several options like the number of buttons and their corresponding values.
fr: La prochaine ligne intéressante est celle où est créée la boîte de dialogue pour choisir le fichier avec <code>gtk_file_chooser_dialog_new</code>. La fonction prend comme argument le titre et la fenêtre parente de la boîte de dialogue et plusieurs options telles que le numéro des boutons et leurs valeurs correspondantes.

note: (itstool) path: item/p
en: Notice that we are using <em>stock</em> button names from Gtk, instead of manually typing "Cancel" or "Open". The advantage of using stock names is that the button labels will already be translated into the user's language.
fr: Notez que nous utilisons les noms de bouton de la <em>collection</em> (stock) Gtk au lieu de saisir manuellement « Cancel » ou « Open ». L'avantage d'utiliser les noms de la collection est que les étiquettes des boutons seront déjà traduites dans la langue de l'utilisateur.

note: (itstool) path: item/p
en: The next two lines restrict the <gui>Open</gui> dialog to only display files which can be opened by GtkImage. A filter object is created first; we then add all kinds of files supported by <code>GdkPixbuf</code> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.
fr: Les deux lignes suivantes limitent la boîte de dialogue <gui>Open</gui> à l'affichage des seuls fichiers pouvant être ouverts par <code>GtkImage</code>. Un objet filtre est d'abord créé ; ensuite nous ajoutons tous les types de fichier pris en charge par <code>GdkPixbuf</code> (ce qui inclut la plupart des formats d'image comme PNG ou JPEG) au filtre. Enfin, nous appliquons ce filtre à la boîte de dialogue <gui>Open</gui>.

note: (itstool) path: item/p
en: <code>gtk_dialog_run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>gtk_dialog_run</code> will return the value <code>GTK_RESPONSE_ACCEPT</code> (it would return <code>GTK_RESPONSE_CANCEL</code> if the user clicked <gui>Cancel</gui>). The <code>switch</code> statement tests for this.
fr: <code>gtk_dialog_run</code> affiche la boîte de dialogue <gui>Open</gui>. La boîte de dialogue attend que l'utilisateur choisisse une image ; quand c'est fait, <code>gtk_dialog_run</code> retourne la valeur <code>GTK_RESPONSE_ACCEPT</code> (il retourne la valeur <code>GTK_RESPONSE_CANCEL</code> si l'utilisateur clique sur <gui>Cancel</gui>). L'instruction <code>switch</code> teste cette réponse.

note: (itstool) path: item/p
en: Assuming that the user did click <gui>Open</gui>, the next line sets the <code>file</code> property of the GtkImage to the filename of the image selected by the user. The GtkImage will then load and display the chosen image.
fr: Supposons que l'utilisateur a cliqué sur le bouton <gui>Ouvrir</gui>, la ligne suivante attribue le nom du fichier image choisi par l'utilisateur aux propriétés <code>file</code> du GtkImage. Ensuite, GtkImage charge et affiche l'image choisie.

note: (itstool) path: item/p
en: In the final line of this method, we destroy the <gui>Open</gui> dialog because we don't need it any more. Destroying automatically hides the dialog.
fr: Dans la dernière ligne de cette méthode, nous détruisons la boîte de dialogue <gui>Open</gui> car on n'en a plus besoin. La destruction masque automatiquement la boîte de dialogue.

note: (itstool) path: section/p
en: If you haven't already done so, choose the <file>Debug/src/image-viewer</file> application in the dialog that appears. Finally, hit <gui>Run</gui> and enjoy!
fr: Si ce n'est pas encore fait, sélectionnez l'application <file>Debug/src/image-viewer</file> dans la boîte de dialogue qui s'affiche et cliquez sur <gui>Exécuter</gui>. Amusez-vous bien !

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.c">reference code</link>.
fr: Si vous rencontrez des difficultés avec ce tutoriel, comparez votre programme à ce <link href="image-viewer/image-viewer.c">programme de référence</link>.

note: (itstool) path: item/p
en: Have the user select a directory rather than a file, and provide controls to cycle through all of the images in a directory.
fr: Faire que l'utilisateur puisse sélectionner un dossier plutôt qu'un fichier et fournir les contrôles pour naviguer parmi toutes les images d'un dossier.

note: (itstool) path: item/p
en: Apply random filters and effects to the image when it is loaded and allow the user to save the modified image.
fr: Appliquer au hasard des filtres et des effets à l'image quand elle est chargée et permettre à l'utilisateur d'enregistrer l'image modifiée.

note: (itstool) path: item/p
en: <link href="http://www.gegl.org/api.html">GEGL</link> provides powerful image manipulation capabilities.
fr: <link href="http://www.gegl.org/api.html">GEGL</link> fournit de puissantes possibilités de manipulation d'image.

note: (itstool) path: item/p
en: Allow the user to load images from network shares, scanners, and other more complicated sources.
fr: Permettre à l'utilisateur de charger des images depuis des sites de partage, des scanners ou d'autres sources plus sophistiquées.

note: (itstool) path: item/p
en: You can use <link href="http://library.gnome.org/devel/gio/unstable/">GIO</link> to handle network file tranfers and the like, and <link href="http://library.gnome.org/devel/gnome-scan/unstable/">GNOME Scan</link> to handle scanning.
fr: Vous pouvez utiliser <link href="http://library.gnome.org/devel/gio/unstable/">GIO</link> pour gérer des transferts de fichiers en ligne et des choses du même type et <link href="http://library.gnome.org/devel/gnome-scan/unstable/">GNOME Scan</link> pour gérer les documents scannés.

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" GTKmm application.
fr: Un peu plus qu'une simple application GTKmm « Hello world ».

note: (itstool) path: item/p
en: Some basic concepts of C++/GObject programming
fr: quelques concepts de base de la programmation en C++/GObject,

note: (itstool) path: item/p
en: How to write a Gtk application in C++
fr: comment écrire une application Gtk en C++.

note: (itstool) path: item/p
en: Choose <gui>GTKmm (Simple)</gui> from the <gui>C++</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
fr: Sélectionnez <gui>GTKmm (Simple)</gui> dans l'onglet <gui>C++</gui>, cliquez sur <gui>Continuer</gui> et saisissez vos informations sur les quelques pages suivantes. Mettez <file>image-viewer</file> comme nom de projet et de répertoire.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is disabled as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.cpp">Guitar-Tuner</link> tutorial if you want to learn how to use the interface builder.
fr: Assurez-vous d'avoir désactivé <gui>Utiliser GtkBuilder pour l'interface utilisateur</gui> car nous allons créer l'interface utilisateur manuellement dans cet exemple. Consultez le tutoriel <link xref="guitar-tuner.cpp">Guitar-Tuner</link> pour un exemple d'utilisation du constructeur d'interfaces.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.cc</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
fr: Cliquez sur <gui>Appliquer</gui> et le projet est créé. Ouvrez <file>src/main.cc</file> depuis l'onglet <gui>Projet</gui> ou l'onglet <gui>Fichiers</gui>. Vous devez voir apparaître du code commençant par les lignes :

note: (itstool) path: item/p
en: The three <code>#include</code> lines at the top include the <code>config</code> (useful autoconf build defines), <code>gtkmm</code> (user interface) and <code>iostream</code> (C++-STL) libraries. Functions from these libraries are used in the rest of the code.
fr: Les trois lignes <code>#include</code> du haut incorporent les bibliothèques <code>config</code> (définitions utiles pour la construction autoconf), <code>gtkmm</code> (interface utilisateur) et <code>iostream</code> (C++-STL). Les fonctions de ces bibliothèques seront utilisées dans le reste du programme.

note: (itstool) path: item/p
en: The <code>main</code> function creates a new (empty) window and sets the window title.
fr: La fonction <code>main</code> crée une nouvelle fenêtre (vide) et configure le titre de la fenêtre.

note: (itstool) path: item/p
en: The <code>kit::run()</code> call starts the GTKmm main loop, which runs the user interface and starts listening for events (like clicks and key presses). As we give the window as an argument to that function, the application will automatically exit when that window is closed.
fr: L'appel <code>kit::run()</code> démarre la boucle principale de GTKmm qui exécute l'interface utilisateur et commence à écouter les événements (comme des clics ou des appuis sur des touches). Comme la fenêtre est fournie comme argument de la fonction, l'application quitte automatiquement quand la fenêtre est fermée.

note: (itstool) path: section/p
en: Now we will bring life into the empty window. GTKmm organizes the user interface with <code>Gtk::Container</code>s that can contain other widgets and even other containers. Here we will use the simplest available container, a <code>Gtk::Box</code>:
fr: Nous allons maintenant donner vie à la fenêtre vide. La disposition de l'interface utilisateur est faite par GTKmm avec les conteneurs <code>Gtk::Container</code> qui peuvent contenir d'autres éléments graphiques et même d'autres conteneurs. Ici, on utilise le plus simple des conteneurs disponibles, une boîte <code>Gtk::Box</code> :

note: (itstool) path: item/p
en: The first lines create the widgets we want to use: a button for opening up an image, the image view widget itself and the box we will use as a container.
fr: Les premières lignes créent les éléments graphiques dont nous avons besoin : un bouton pour ouvrir une image, l'élément graphique image lui-même et la boîte que nous utilisons comme conteneur.

note: (itstool) path: item/p
en: The calls to <code>pack_start</code> add the two widgets to the box and define their behaviour. The image will expand into any available space while the button will just be as big as needed. You will notice that we don't set explicit sizes on the widgets. In GTKmm this is usually not needed as it makes it much easier to have a layout that looks good in different window sizes. Next, the box is added to the window.
fr: Les appels à <code>pack_start</code> ajoutent les deux éléments graphiques à la boîte et définissent leur comportement. L'image va s'étendre pour occuper tout l'espace disponible alors que le bouton va prendre juste la taille nécessaire. Notez que nous ne définissons pas explicitement les dimensions des éléments graphiques. Avec GTKmm, ce n'est habituellement pas nécessaire car cela facilite grandement l'obtention d'une bonne disposition pour différentes tailles de fenêtre. La boîte est ensuite ajoutée dans la fenêtre.

note: (itstool) path: item/p
en: We need to define what happens when the user clicks on the button. GTKmm uses the concept of <em>signals</em>. When the button is clicked, it fires the <em>clicked</em> signal, which we can connect to some action. This is done using the <code>signal_clicked().connect</code> method which tells GTKmm to call the <code>on_open_image</code> function when the button is clicked. We will define the <em>callback</em> in the next section.
fr: Il nous faut définir ce qui se passe quand l'utilisateur clique sur le bouton. GTKmm utilise le concept de <em>signaux</em>. Quand le bouton est cliqué, il envoie le signal <em>clicked</em> qu'il est possible de relier à une action. Cela a été réalisé avec la méthode <code>signal_clicked().connect</code> qui commande à GTKmm d'appeler la fonction <code>on_open_image</code> quand le bouton est cliqué. Nous définirons la <em>fonction de rappel</em> à la section suivante.

note: (itstool) path: item/p
en: The last step is to show all widgets in the window using <code>show_all_children()</code>. This is equivalent to using the <code>show()</code> method on all our child widgets.
fr: La dernière étape consiste à afficher tous les éléments graphiques avec la commande <code>show_all_children()</code>. Ceci équivaut à appliquer la méthode <code>show()</code> séparément à chaque élément graphique enfant.

note: (itstool) path: section/p
en: We will now define the signal handler for the <em>clicked</em> signal or the button we mentioned before. Add this code before the <code>main</code> method.
fr: Nous allons maintenant définir le gestionnaire de signal pour le signal <em>clicked</em> du bouton ci-dessus. Ajoutez ce code avant la méthode <code>main</code>.

note: (itstool) path: item/p
en: The dialog for choosing the file is created using the <code>Gtk::FileChooserDialog</code> constructor. This takes the title and type of the dialog. In our case, it is an <em>Open</em> dialog.
fr: La boîte de dialogue pour choisir le fichier en utilisant le constructeur <code>Gtk::FileChooserDialog</code>. Celui-ci prend comme argument le titre et le type de la boîte de dialogue. Ici, c'est un dialogue <em>OPEN</em> (ouvrir).

note: (itstool) path: item/p
en: The next two lines add an <em>Open</em> and a <em>Close</em> button to the dialog.
fr: Les deux lignes suivantes ajoutent les boutons <em>Open</em> et <em>Close</em> à la boîte de dialogue.

note: (itstool) path: item/p
en: The second argument to the <code>add_button()</code> method is a value to identify the clicked button. We use predefined values provided by GTKmm here, too.
fr: Le second argument de la méthode <code>add_button()</code> est une valeur identifiant le bouton cliqué. Nous utilisons ici aussi les valeurs de GTKmm fournies par défaut.

note: (itstool) path: item/p
en: The next two lines restrict the <gui>Open</gui> dialog to only display files which can be opened by <code>Gtk::Image</code>. A filter object is created first; we then add all kinds of files supported by <code>Gdk::Pixbuf</code> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.
fr: Les deux lignes suivantes limitent la boîte de dialogue <gui>Open</gui> à l'affichage des seuls fichiers pouvant être ouverts par <code>Gtk::Image</code>. Un objet filtre est d'abord créé ; ensuite nous ajoutons tous les types de fichier pris en charge par <code>Gdk::Pixbuf</code> (ce qui inclut la plupart des formats d'image comme PNG ou JPEG) au filtre. Enfin, nous appliquons ce filtre à la boîte de dialogue <gui>Open</gui>.

note: (itstool) path: item/p
en: <code>Glib::RefPtr</code> is a smart pointer used here, that makes sure that the filter is destroyed when there is no reference to it anymore.
fr: <code>Glib::RefPtr</code> utilisé ici, est un pointeur intelligent qui surveille que le filtre soit bien détruit quand il n'a plus de référence vers lui.

note: (itstool) path: item/p
en: <code>dialog.run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>dialog.run</code> will return the value <code>Gtk::RESPONSE_ACCEPT</code> (it would return <code>Gtk::RESPONSE_CANCEL</code> if the user clicked <gui>Cancel</gui>). The <code>switch</code> statement tests for this.
fr: <code>dialog.run</code> affiche la boîte de dialogue <gui>Open</gui>. La boîte de dialogue attend que l'utilisateur choisisse une image ; quand c'est fait, <code>dialog.run</code> retourne la valeur <code>Gtk::RESPONSE_ACCEPT</code> (il retourne la valeur <code>Gtk::RESPONSE_CANCEL</code> si l'utilisateur clique sur <gui>Cancel</gui>). L'instruction <code>switch</code> teste cette réponse.

note: (itstool) path: item/p
en: We hide the <gui>Open</gui> dialog because we don't need it any more. The dialog would be hidden later anyway, as it is only a local variable and is destroyed (and therefore hidden) when the scope ends.
fr: Nous masquons la boîte de dialogue <gui>Open</gui> car on n'en a plus besoin. Elle aurait de toute façon été masquée plus tard, car ce n'est qu'une variable locale qui est détruite (et donc disparaît) lorsqu'elle sort de la portée.

note: (itstool) path: item/p
en: Assuming that the user did click <gui>Open</gui>, the next line loads the file into the <code>Gtk::Image</code> so that it is displayed.
fr: Supposons que l'utilisateur a cliqué sur le bouton <gui>Ouvrir</gui>, la ligne suivante charge le fichier dans le<code>Gtk::Image</code> afin qu'elle s'affiche.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.cc">reference code</link>.
fr: Si vous rencontrez des difficultés avec ce tutoriel, comparez votre programme à ce <link href="image-viewer/image-viewer.cc">programme de référence</link>.

note: (itstool) path: synopsis/p
en: In this tutorial, we're going to write a very simple GTK application that loads and displays an image file. You will learn how to:
fr: Dans ce tutoriel, nous allons écrire une application GTK très simple qui charge et affiche un fichier image. Vous allez apprendre comment :

note: (itstool) path: item/p
en: Write a basic GTK user interface in JavaScript
fr: écrire une interface utilisateur GTK de base en JavaScript,

note: (itstool) path: item/p
en: Deal with events by connecting signals to signal handlers
fr: travailler avec des événements en connectant des signaux à des gestionnaires de signaux,

note: (itstool) path: item/p
en: Lay out GTK user interfaces using containers
fr: mettre en forme des interfaces utilisateur GTK avec des conteneurs,

note: (itstool) path: item/p
en: Load and display image files
fr: charger et afficher des fichiers image.

note: (itstool) path: item/p
en: An installed copy of the <em>gjs</em> interpreter
fr: une copie installée de l'interpréteur <em>gjs</em>,

note: (itstool) path: item/p
en: Basic knowledge of any object-orientated programming language
fr: des connaissances de base d'un langage de programmation objet.

note: (itstool) path: item/p
en: Choose <gui>Generic Javascript</gui> from the <gui>JS</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
fr: Sélectionnez <gui>JavaScript générique</gui> dans l'onglet <gui>JS</gui>, cliquez sur <gui>Continuer</gui> et saisissez vos informations sur les pages suivantes. Mettez <file>visionneur_image</file> comme nom de projet et de répertoire.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.js</file> from the <gui>Project</gui> or <gui>File</gui> tabs. It contains very basic example code.
fr: Cliquez sur <gui>Appliquer</gui> et le projet est créé. Ouvrez <file>src/main.js</file> depuis l'onglet <gui>Projet</gui> ou l'onglet <gui>Fichiers</gui>. Il contient un exemple de programme très basique.

note: (itstool) path: section/title
en: JavaScript basics: Hello World
fr: Les bases JavaScript : Hello World

note: (itstool) path: section/p
en: Before we start writing the image viewer, let's find out more about the way JavaScript is used in GNOME. Of course, your very first contact with any programming language should be the Hello World program which can already be found in <file>main.js</file>:
fr: Avant de commencer à programmer le visionneur d'images, regardons de plus près la façon dont JavaScript est utilisé dans GNOME. Bien sûr, votre tout premier contact avec n'importe quel langage de programmation devrait être le « Hello World » du fichier <file>main.js</file> :

note: (itstool) path: section/code
en: print ("Hello world!");
fr: print("Hello world!");

note: (itstool) path: section/p
en: This should look quite natural if you're familiar with almost any other programming language. The function <code>print</code> is called with the argument <code>"Hello world!"</code>, which will be printed on the screen. Note that each line of code ends with a semicolon.
fr: Ceci doit vous sembler très normal si vous êtes familier avec la plupart des langages de programmation. La fonction <code>print</code> est appelée avec l'argument <code>"Hello world!"</code> qui est imprimé à l'écran. Notez que chaque ligne du programme se termine par un point-virgule.

note: (itstool) path: section/title
en: Classes in JavaScript
fr: Les classes en JavaScript

note: (itstool) path: section/p
en: This is the standard way to define a class in JavaScript:
fr: Voici la méthode standard pour définir une classe en JavaScript :

note: (itstool) path: section/p
en: This defines a class called <code>MyClass</code>. Let's go through each part of the class definition:
fr: Ceci définit une classe appelée <code>MyClass</code>. Passons en revue chaque partie de la définition d'une classe :

note: (itstool) path: item/p
en: <code>function MyClass</code> is the constructor of the class — its name must match the class's name. You can access any member of the class by using the <code>this</code> object; here, the constructor calls the class's <code>_init</code> method.
fr: <code>function MyClass</code> est le constructeur de la classe — son nom doit correspondre au nom de la classe. Vous avez accès à n'importe quel membre de la classe avec l'objet <code>this</code> ; ici, le générateur appelle la méthode <code>_init</code> de la classe.

note: (itstool) path: item/p
en: The <code>MyClass.prototype</code> block is where you define the <em>structure</em> of the class. Each class is made up of methods (functions) and fields (variables); there are three methods and two fields in this example.
fr: Le bloc <code>MyClass.prototype</code> est l'endroit où vous définissez la <em>structure</em> de la classe. Chaque classe est constituée de méthodes (les fonctions) et de champs (les variables) ; il y a trois méthodes et deux champs dans cet exemple.

note: (itstool) path: item/p
en: The first method defined here is called <code>_init</code>, and we specify that it is a function with no arguments:
fr: La première méthode définie ici est appelée <code>_init</code> et nous spécifions que c'est une fonction sans argument :

note: (itstool) path: item/p
en: We write the function inside some curly braces. Two fields are defined here, <code>propertyA</code> and <code>propertyB</code>. The first is set to a string and the second is set to an integer (10). The function doesn't return any value.
fr: Nous écrivons la fonction à l'intérieur d'accolades. Deux champs sont définis ici, <code>propertyA</code> et <code>propertyB</code>. Le premier est défini comme une chaîne et le second comme un nombre entier (10). La fonction ne retourne aucune valeur.

note: (itstool) path: item/p
en: The next method is called <code>aMethod</code> and has two arguments, which it prints out when you call it. The final method is <code>dumpProperties</code>, and prints the fields <code>propertyA</code> and <code>propertyB</code>.
fr: La méthode suivante est appelée <code>aMethod</code> et possède deux arguments qu'elle affiche quand vous l'appelez. La dernière méthode est <code>dumpProperties</code> et elle affiche les champs <code>propertyA</code> et <code>propertyB</code>.

note: (itstool) path: item/p
en: Note how the class definition (prototype) is arranged; each function definition is separated by a comma.
fr: Notez comment la définition de la classe (prototype) est structurée ; chaque définition de fonction est séparée par une virgule.

note: (itstool) path: section/p
en: Now that MyClass has been defined, we can play with it:
fr: Maintenant que MyClass a été défini, nous pouvons jouer avec :

note: (itstool) path: section/p
en: This code creates a new instance of the class called <code>o</code>, runs <code>aMethod</code>, changes <code>propertyA</code> to a different string, and then calls <code>dumpProperties</code> (which outputs the fields).
fr: Ce code crée une nouvelle version de la classe appelée <code>o</code>, appelle <code>aMethod</code>, modifie <code>propertyA</code> en une chaîne différente et ensuite appelle <code>dumpProperties</code> (qui affiche les champs).

note: (itstool) path: section/p
en: Save the code in the <file>main.js</file> and then run it by using <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> from the menu or using the toolbar.
fr: Enregistrez le code dans le fichier <file>main.js</file> et ensuite lancez-le avec <guiseq><gui>Exécuter</gui><gui>Exécuter</gui></guiseq> à partir du menu ou de la barre d'outils.

note: (itstool) path: section/title
en: A first Gtk application
fr: Une première application Gtk

note: (itstool) path: section/p
en: Let's see what a very basic Gtk application looks like in JavaScript:
fr: Voyons à quoi ressemble une application Gtk très basique écrite en JavaScript :

note: (itstool) path: section/p
en: Let's take a look at what's happening:
fr: Regardons ce qui se passe :

note: (itstool) path: item/p
en: The first line imports the Gtk namespace (that is, it includes the Gtk library). The libraries are provided by GObject Introspection (gi), which provides language bindings for many GNOME libraries.
fr: La première ligne importe l'espace de nom Gtk (c.-à-d. cela inclut la bibliothèque Gtk). Les bibliothèques sont fournies par « GObject Introspection (gi) » qui fournit les liens de langage à beaucoup de bibliothèques GNOME.

note: (itstool) path: item/p
en: <code>Gtk.init</code> initializes the Gtk library; this statement is mandatory for all Gtk programs.
fr: <code>Gtk.init</code> initialise la bibliothèque Gtk ; cette instruction est obligatoire pour tous les programmes Gtk.

note: (itstool) path: item/p
en: The next line creates the main window by creating a new <code>Gtk.Window</code> object. You can pass several properties to the window's constructor by using the syntax <code>{property: value, property: value, ...}</code>. In this case we are setting the title of the window.
fr: La ligne suivante crée la fenêtre principale en créant un nouvel objet <code>Gtk.Window</code>. Vous pouvez transmettre plusieurs propriétés au constructeur de la fenêtre avec la syntaxe <code>{propriété: valeur, propriété: valeur, ...}</code>. Dans ce cas, le titre de la fenêtre est défini.

note: (itstool) path: item/p
en: The next line explicitly shows the window. In Gtk, every widget is hidden by default.
fr: La ligne suivante affiche explicitement la fenêtre. Dans Gtk, chaque élément graphique est masqué par défaut.

note: (itstool) path: item/p
en: Finally, <code>Gtk.main</code> runs the main loop — in other words, it executes the program. The main loop listens for events (signals) from the user interface and then calls a signal handler which will do something useful. We'll learn more about signals shortly.
fr: Enfin, <code>Gtk.main</code> lance la boucle principale — en d'autres termes, il exécute le programme. La boucle principale écoute les événements (signaux) en provenance de l'interface utilisateur et appelle un gestionnaire de signal qui fera quelque chose d'utile. Nous en apprendrons davantage sur les signaux bientôt.

note: (itstool) path: section/p
en: Save the code in <file>main.js</file> and run it. You will notice that the application does not quit when you close the window. This is because we haven't set up a signal handler to deal with the window's <code>destroy</code> (close) signal yet. We'll do this shortly, but for now you can just hit <keyseq><key>Ctrl</key><key>C</key></keyseq> in the terminal window to quit the program.
fr: Enregistrez le code dans le fichier <file>main.js</file> et exécutez-le. Notez que l'application ne quitte pas quand vous fermez la fenêtre. C'est parce que nous n'avons pas encore défini de gestionnaire de signal qui prend en charge le signal <code>destroy</code> de fermeture. Nous le ferons prochainement, mais en attendant, pressez seulement <keyseq><key>Ctrl</key><key>C</key></keyseq> dans la fenêtre du terminal pour quitter le programme.

note: (itstool) path: section/title
en: Adding classes
fr: Ajout de classes

note: (itstool) path: section/p
en: The proper way of doing Gtk programming is by using classes. Let's rewrite the simple code you just wrote using classes:
fr: La bonne méthode de programmation avec Gtk est l'utilisation de classes. Récrivons le bout de programme que l'on vient d'écrire en utilisant des classes :

note: (itstool) path: section/p
en: Notice that the program is the same; we just moved the window creation code to our own <code>ImageViewer</code> class. The class's constructor calls the <code>_init</code> method, which creates and shows the window. We then create an instance of the class before running the main loop (<code>Gtk.main</code>).
fr: Notez que le programme reste le même ; on a juste déplacé le code de création de la fenêtre dans notre propre classe <code>ImageViewer</code>. Le constructeur de la classe appelle la méthode <code>_init</code> qui crée et affiche la fenêtre. Ensuite, on crée une instance de la classe avant de lancer la boucle principale (<code>Gtk.main</code>).

note: (itstool) path: section/p
en: This code is modular and can be split into multiple files easily. This makes it cleaner and easier to read.
fr: Ce programme est modulaire et peut être divisé facilement en plusieurs fichiers ce qui le rend plus propre et plus facile à lire.

note: (itstool) path: section/title
en: Signals
fr: Les signaux

note: (itstool) path: section/p
en: Signals are one of the key concepts in Gtk programming. Whenever something happens to an object, it emits a signal; for example, when a button is clicked it gives off the <code>clicked</code> signal. If you want your program to do something when that event occurs, you must connect a function (a "signal handler") to that signal. Here's an example:
fr: Les signaux sont un des concepts clé de la programmation Gtk. Chaque fois que quelque chose arrive à un objet, il émet un signal ; par exemple, quand un bouton est cliqué, il renvoie le signal <code>clicked</code>. Si vous voulez que votre programme réagisse en conséquence, il faut connecter une fonction (un « gestionnaire de signal ») à ce signal. Voici un exemple :

note: (itstool) path: section/p
en: The last two lines create a <code>Gtk.Button</code> called <code>b</code> and connect its <code>clicked</code> signal to the <code>button_clicked</code> function, which is defined above. Every time the button is clicked, the code in the <code>button_clicked</code> function will be executed. It just prints a message here.
fr: Les deux dernières lignes créent un bouton <code>Gtk.Button</code> appelé <code>b</code> et connectent son signal <code>clicked</code> à la fonction <code>button_clicked</code> définie au-dessus. Chaque fois que ce bouton est cliqué, le code de la fonction <code>button_clicked</code> est exécuté. Il affiche juste un message dans cet exemple.

note: (itstool) path: section/p
en: The syntax for connecting any signal to a function is:
fr: Voici la syntaxe pour connecter n'importe quel signal à une fonction :

note: (itstool) path: note/p
en: You can simplify the code by making use of an inline function definition:
fr: Vous pouvez simplifier le code avec une définition de fonction en ligne :

note: (itstool) path: section/title
en: Closing the window
fr: Fermeture de la fenêtre

note: (itstool) path: section/p
en: When you close a Gtk window it's not really closed, it's hidden. This allows you to keep the window around (which is useful if you want to ask the user if they really want to close the window, for example).
fr: Quand vous fermez une fenêtre Gtk, elle n'est pas vraiment fermée, mais masquée. Cela permet de la garder accessible (utile si on veut poser la question à l'utilisateur s'il veut oui ou non fermer la fenêtre, par exemple).

note: (itstool) path: section/p
en: In our case, we really do just want to close the window. The simplest way of doing this is by connecting the <code>hide</code> signal of the GtkWindow object to a function that closes the application. Go back to the <file>image-viewer.js</file> file and add the following code to the <code>_init</code> method, on the line above <code>this.window.show</code>:
fr: Dans notre cas, on veut réellement fermer la fenêtre. La façon la plus simple de le faire est de connecter le signal <code>hide</code> de l'objet fenêtre « GtkWindow » à une fonction qui ferme l'application. Retournez au fichier <file>image-viewer.js</file> et ajoutez le code suivant à la méthode <code>_init</code> dans la ligne au-dessus de <code>this.window.show</code> :

note: (itstool) path: section/p
en: This connects the <code>hide</code> signal of the window to Gtk's <code>main_quit</code> function, which ends the execution of the Gtk main loop. Once the main loop finishes, the function <code>Gtk.main</code> returns. Our program would continue to run any code written after the <code>Gtk.main ();</code> line, but since we don't have any code after that point, the program just ends.
fr: Ceci connecte le signal <code>hide</code> de la fenêtre à la fonction <code>main_quit</code> de Gtk, qui met fin à l'exécution de la boucle principale de Gtk. Lorsque cette boucle s'arrête, la fonction <code>Gtk.main</code> est quittée. Notre programme aurait continué d'exécuter n'importe quel code écrit après la ligne <code>Gtk.main ();</code>, mais comme nous n'avons plus de code après cela, le programme s'arrête.

note: (itstool) path: section/title
en: Containers: Laying-out the user interface
fr: Les conteneurs : agencement de l'interface utilisateur

note: (itstool) path: section/p
en: Widgets (controls, such as buttons and labels) can be arranged in the window by making use of <em>containers</em>. You can organize the layout by mixing different types of containers, like boxes and grids.
fr: Les éléments graphiques (les contrôles, comme les boutons ou les étiquettes) peuvent être disposés dans la fenêtre à l'aide de <em>conteneurs</em>. Vous pouvez organiser l'agencement en mélangeant différents types de conteneurs, comme des boîtes ou des grilles.

note: (itstool) path: section/p
en: A <code>Gtk.Window</code> is itself a type of container, but you can only put one widget directly into it. We would like to have two widgets, an image and a button, so we must put a "higher-capacity" container inside the window to hold the other widgets. A number of <link href="http://library.gnome.org/devel/gtk/stable/GtkContainer.html">container types</link> are available, but we will use a <code>Gtk.Box</code> here. A <code>Gtk.Box</code> can hold several widgets, organized horizontally or vertically. You can do more complicated layouts by putting several boxes inside another box and so on.
fr: Une fenêtre <code>Gtk.Window</code> est elle-même un type de conteneur, mais vous ne pouvez y insérer directement qu'un seul élément graphique. Nous aimerions avoir deux éléments graphiques, une image et un bouton, donc nous devons placer un conteneur de « plus haute capacité » dans la fenêtre pour tout contenir. Plusieurs <link href="http://library.gnome.org/devel/gtk/stable/GtkContainer.html">types de conteneurs</link> sont disponibles, mais nous allons utiliser ici une boîte <code>Gtk.Box</code>. Une boîte <code>Gtk.Box</code> peut contenir plusieurs éléments graphiques, disposés horizontalement ou verticalement. On pourrait créer des agencements plus complexes en mettant plusieurs boîtes dans une autre et ainsi de suite.

note: (itstool) path: note/p
en: There is a graphical user interface designer called <app>Glade</app> integrated in <app>Anjuta</app> which makes UI design really easy. For this simple example, however, we will code everything manually.
fr: Il existe un concepteur graphique d'interface utilisateur appelé <app>Glade</app> intégré à <app>Anjuta</app> ce qui rend la conception d'interface utilisateur vraiment facile. Dans cet exemple simple, cependant, nous allons tout programmer à la main.

note: (itstool) path: section/p
en: Let's add the box and widgets to the window. Insert the following code into the <code>_init</code> method, immediately above the <code>this.window.show</code> line:
fr: Ajoutons la boîte et les éléments graphiques à la fenêtre. Insérez le code suivant dans la méthode <code>_init</code> immédiatement au-dessus de la ligne <code>this.window.show</code> :

note: (itstool) path: section/p
en: The first line creates a <code>Gtk.Box</code> called <code>main_box</code> and sets two of its properties: the <code>orientation</code> is set to vertical (so widgets are arranged in a column), and the <code>spacing</code> between the widgets is set to 0 pixels. The next line then adds the newly-created <code>Gtk.Box</code> to the window.
fr: La première ligne crée une boîte <code>Gtk.Box</code> appelée <code>main_box</code> et définit deux de ses propriétés : l'<code>orientation</code> est fixée à verticale (donc les éléments graphiques sont disposés en colonne) et l'espacement <code>spacing</code> entre les éléments graphiques est fixé à 0 pixel. La ligne suivante ajoute cette nouvelle boîte <code>Gtk.Box</code> à la fenêtre.

note: (itstool) path: section/p
en: So far the window only contains an empty <code>Gtk.Box</code>, and if you run the program now you will see no changes at all (the <code>Gtk.Box</code> is a transparent container, so you can't see that it's there).
fr: Pour l'instant, la fenêtre ne contient qu'une boîte <code>Gtk.Box</code> vide et si vous exécutez le programme, vous ne verrez pas encore de changement (la boîte <code>Gtk.Box</code> est un conteneur transparent et vous ne le voyez donc pas).

note: (itstool) path: section/title
en: Packing: Adding widgets to the container
fr: Placement : ajout d'éléments graphiques au conteneur

note: (itstool) path: section/p
en: To add some widgets to the <code>Gtk.Box</code>, insert the following code directly below the <code>this.window.add (main_box)</code> line:
fr: Pour ajouter des éléments graphiques à la boîte <code>Gtk.Box</code>, insérez le code suivant juste en dessous de la ligne <code>this.window.add (main_box)</code> :

note: (itstool) path: section/p
en: The first line creates a new <code>Gtk.Image</code> called <code>image</code>, which will be used to display an image file. Then, the image widget is added (<em>packed</em>) into the <code>main_box</code> container using <code>Gtk.Box</code>'s <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start"><code>pack_start</code></link> method.
fr: La première ligne crée une nouvelle <code>Gtk.Image</code> appelée <code>image</code> qui servira à afficher un fichier image. Puis, l'élément graphique image est ajouté (<em>placé</em>) dans le conteneur <code>main_box</code> par la méthode <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start"><code>pack_start</code></link> de <code>Gtk.Box</code> .

note: (itstool) path: section/p
en: <code>pack_start</code> takes 4 arguments: the widget that is to be added to the <code>Gtk.Box</code> (<code>child</code>); whether the <code>Gtk.Box</code> should grow larger when the new widget is added (<code>expand</code>); whether the new widget should take up all of the extra space created if the <code>Gtk.Box</code> gets bigger (<code>fill</code>); and how much space there should be, in pixels, between the widget and its neighbors inside the <code>Gtk.Box</code> (<code>padding</code>).
fr: <code>pack_start</code> prend 4 arguments : l'élément graphique enfant (<code>child</code>) qui doit être ajouté à la boîte <code>Gtk.Box</code> ; si la boîte <code>Gtk.Box</code> doit s'agrandir (<code>expand</code>) quand le nouvel élément graphique est ajouté ; si le nouvel élément graphique doit prendre tout le nouvel espace créé quand la boîte <code>Gtk.Box</code> s'agrandit (<code>fill</code>) ; et enfin combien d'espace libre (<code>padding</code>), en pixels, il doit y avoir entre l'élément graphique et ses voisins à l'intérieur de la <code>Gtk.Box</code>.

note: (itstool) path: section/p
en: Gtk containers (and widgets) dynamically expand to fill the available space, if you let them. You don't position widgets by giving them a precise x,y-coordinate location in the window; rather, they are positioned relative to one another. This makes handling window resizing much easier, and widgets should automatically take a sensible size in most situations.
fr: Si vous les laissez faire, les conteneurs Gtk (et les éléments graphiques) s'agrandissent dynamiquement pour occuper tout l'espace disponible. Vous ne positionnez pas les éléments graphiques dans la fenêtre en leur spécifiant des coordonnées x,y précises mais vous les positionnez les uns par rapport aux autres. Ceci permet un redimensionnement plus aisé de la fenêtre et les éléments graphiques devraient automatiquement prendre une taille raisonnable dans la plupart des cas.

note: (itstool) path: section/p
en: Also note how the widgets are organized in a hierarchy. Once packed in the <code>Gtk.Box</code>, the <code>Gtk.Image</code> is considered a <em>child</em> of the <code>Gtk.Box</code>. This allows you to treat all of the children of a widget as a group; for example, you could hide the <code>Gtk.Box</code>, which would also hide all of its children at the same time.
fr: Notez aussi de quelle manière les éléments graphiques sont organisés hiérarchiquement. Une fois placée dans la <code>Gtk.Box</code>, l'image <code>Gtk.Image</code> est considérée comme un <em>enfant</em> de la boîte <code>Gtk.Box</code>. Ceci vous permet de traiter tous les enfants d'un élément graphique comme un groupe ; par exemple, vous pouvez masquer la boîte <code>Gtk.Box</code> qui du coup, masque tous ses enfants en même temps.

note: (itstool) path: section/p
en: Now insert these two lines, below the two you just added:
fr: Insérez maintenant ces deux lignes en dessous des deux que vous venez d'ajouter :

note: (itstool) path: section/p
en: These lines are similar to the first two, but this time they create a <code>Gtk.Button</code> and add it to <code>main_box</code>. Notice that we are setting the <code>expand</code> argument (the second one) to <code>false</code> here, whereas it was set to <code>true</code> for the <code>Gtk.Image</code>. This will cause the image to take up all available space and the button to take only the space it needs. When you maximize the window, the button size will remain the same, but the image size will increase, taking up all of the rest of the window.
fr: Ces lignes ressemblent aux deux premières, mais cette fois elles créent un bouton <code>Gtk.Button</code> et l'ajoute à la <code>main_box</code>. Notez que nous paramétrons ici l'argument <code>expand</code> (le second) sur <code>false</code>, alors qu'il était sur <code>true</code> pour l'image <code>Gtk.Image</code>. Ceci va conduire à ce que l'image prenne tout l'espace disponible et le bouton seulement l'espace nécessaire. Lors d'un redimensionnement de la fenêtre, la taille du bouton reste identique, alors que la taille de l'image va augmenter pour occuper le reste de la fenêtre.

note: (itstool) path: section/p
en: Finally, we must change the <code>this.window.show ();</code> line to read:
fr: Finalement, nous devons modifier la ligne <code>this.window.show ();</code> pour devenir :

note: (itstool) path: section/p
en: This will show the child of the Gtk window, and all of its children, and its children's children, and so on. (Remember that Gtk widgets are all hidden by default.)
fr: Ceci affiche l'enfant de la fenêtre Gtk et tous ses enfants, enfants de ses enfants et ainsi de suite (souvenez-vous que les éléments graphiques Gtk sont tous masqués par défaut).

note: (itstool) path: section/title
en: Loading the image: Connecting to the button's <code>clicked</code> signal
fr: Chargement de l'image : connexion au signal <code>clicked</code> du bouton

note: (itstool) path: section/p
en: When the user clicks on the <gui>Open</gui> button, a dialog should appear so that the user can choose a picture. Once chosen, the picture should be loaded and shown in the image widget.
fr: Quand l'utilisateur clique sur le bouton <gui>Open a picture</gui>, une boîte de dialogue devrait apparaître pour permettre le choix d'une image. Une fois ce choix effectué, la photo est chargée et affichée dans l'élément graphique image.

note: (itstool) path: section/p
en: The first step is to connect the <code>clicked</code> signal of the button to a signal handler function, which we call <code>_openClicked</code>. Put this code immediately after the <code>var open_button = new Gtk.Button</code> line where the button was created:
fr: Connectez d'abord le signal <code>clicked</code> du bouton à une fonction de gestion de signal que vous appelez <code>_openClicked</code>. Mettez ce code immédiatement après la ligne <code>var open_button = new Gtk.Button</code> où le bouton a été créé :

note: (itstool) path: section/p
en: We are using the <em>Lang</em> JavaScript helper here. It allows us to connect a <em>class method</em> to the signal, rather than a plain function (without a class) which we had used before for the window's <code>hide</code> signal. Don't worry about this for now, it's just a technical detail. For it to work, you also need to put the following line at the top of the file:
fr: Ici, nous utilisons l'assistant JavaScript <em>Lang</em>. Il nous permet de connecter une <em>class method</em> au signal plutôt qu'à une simple fonction (sans classe) que nous avions utilisée avant pour le signal de masquage <code>hide</code>. Ne vous préoccupez pas de cela pour le moment, ce n'est qu'un détail technique. Pour que cela fonctionne, vous devez aussi ajouter cette ligne en haut du fichier :

note: (itstool) path: section/title
en: Loading the image: Writing the signal's callback
fr: Chargement de l'image : écriture de la fonction de rappel du signal

note: (itstool) path: section/p
en: Now we can create the <code>_openClicked()</code> method. Insert the following into the <code>ImageViewer.prototype</code> code block, after the <code>_init</code> method (and not forgetting the comma):
fr: Nous pouvons maintenant créer la méthode <code>_openClicked()</code>. Insérez ce qui suit dans le bloc de code <code>ImageViewer.prototype</code>, après la méthode <code>_init</code> (et sans oublier la virgule) :

note: (itstool) path: item/p
en: The line beginning with <code>var chooser</code> creates an <gui>Open</gui> dialog, which the user can use to choose files. We set four properties: the title of the dialog; the action (type) of the dialog (it's an "open" dialog, but we could have used <code>SAVE</code> if the intention was to save a file; <code>transient_for</code>, which sets the parent window of the dialog; and <code>modal</code> which, if set to <code>true</code>, prevents the user from clicking on another area of the application until the dialog is closed.
fr: La ligne commençant par <code>var chooser</code> crée une boîte de dialogue <gui>Ouvrir</gui> qui permet à l'utilisateur de choisir des fichiers. Nous paramétrons quatre propriétés : le titre de la boîte de dialogue ; la fonction (le type) de la boîte de dialogue (c'est une boîte de dialogue « OPEN », mais on aurait pu utiliser (<code>SAVE</code>) (enregistrer) si notre intention avait été d'enregistrer un fichier) ; <code>transient_for</code>, qui définit la fenêtre parent de la boîte de dialogue ; et <code>modal</code> qui, s'il est fixé à <code>true</code> empêche l'utilisateur de cliquer sur un autre emplacement de l'application jusqu'à ce que la boîte de dialogue soit fermée.

note: (itstool) path: item/p
en: The next two lines add <gui>Cancel</gui> and <gui>Open</gui> buttons to the dialog. The second argument of the <code>add_button</code> method is the (integer) value that is returned when the button is pressed: 0 for <gui>Cancel</gui> and 1 for <gui>Open</gui>.
fr: Les deux lignes suivantes ajoutent les boutons <gui>Cancel</gui> (Annuler) et <gui>Open</gui> (Ouvrir) à la boîte de dialogue. Le second argument de la méthode <code>add_button</code> est la valeur (de type entier) qui est retournée lorsque le bouton est cliqué : 0 pour <gui>Annuler</gui> et 1 pour <gui>Ouvrir</gui>.

note: (itstool) path: item/p
en: <code>set_default_response</code> determines the button that will be activated if the user double-clicks a file or presses <key>Enter</key>. In our case, we are using the <gui>Open</gui> button as default (which has the value 1).
fr: <code>set_default_response</code> détermine le bouton qui est activé quand l'utilisateur fait un double-clic sur un fichier ou appuie sur la touche <key>Entrée</key>. Ici, nous utilisons le bouton <gui>Open</gui> (qui a la valeur 1).

note: (itstool) path: item/p
en: The next three lines restrict the <gui>Open</gui> dialog to only display files which can be opened by <code>Gtk.Image</code>. A filter object is created first; we then add all kinds of files supported by <code>Gdk.Pixbuf</code> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.
fr: Les trois lignes suivantes limitent la boîte de dialogue <gui>Ouvrir</gui> à l'affichage des seuls fichiers pouvant être ouverts par <code>Gtk.Image</code>. Un objet filtre est d'abord créé ; ensuite nous ajoutons tous les types de fichier pris en charge par <code>Gdk.Pixbuf</code> (ce qui inclut la plupart des formats d'image comme PNG ou JPEG) au filtre. Enfin, nous appliquons ce filtre à la boîte de dialogue <gui>Open</gui>.

note: (itstool) path: item/p
en: <code>chooser.run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>chooser.run</code> will return the value <output>1</output> (it would return <output>0</output> if the user clicked <gui>Cancel</gui>). The <code>if</code> statement tests for this.
fr: <code>chooser.run</code> affiche la boîte de dialogue <gui>Open</gui>. La boîte de dialogue attend que l'utilisateur choisisse une image ; quand c'est fait, <code>chooser.run</code> retourne la valeur <output>1</output> (il retourne la valeur <output>0</output> si l'utilisateur clique sur <gui>Annuler</gui>). L'instruction <code>if</code> teste cette réponse.

note: (itstool) path: item/p
en: Assuming that the user did click <gui>Open</gui>, the next line sets the <code>file</code> property of the <code>Gtk.Image</code> to the filename of the image selected by the user. The <code>Gtk.Image</code> will then load and display the chosen image.
fr: Supposons que l'utilisateur a cliqué sur le bouton <gui>Ouvrir</gui>, la ligne suivante définit la propriété <code>file</code> du <code>Gtk.Image</code> au nom de fichier image sélectionné. <code>Gtk.Image</code> charge alors l'image choisie et l'affiche.

note: (itstool) path: item/p
en: In the final line of this method, we destroy the <gui>Open</gui> dialog because we don't need it any more.
fr: La dernière ligne de cette méthode détruit la boîte de dialogue <gui>Open</gui> car nous n'en avons plus besoin.

note: (itstool) path: section/p
en: All of the code you need should now be in place, so try running the code. That should be it; a fully-functioning image viewer (and a whistlestop tour of JavaScript and Gtk) in not much time at all!
fr: Tout le programme nécessaire est maintenant en place, donc essayez de l'exécuter. Cela devrait fonctionner ; un visionneur d'images totalement fonctionnel (et une visite éclair de JavaScript et de Gtk) en très peu de temps !

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.js">reference code</link>.
fr: Si vous rencontrez des difficultés avec ce tutoriel, comparez votre programme à ce <link href="image-viewer/image-viewer.js">programme de référence</link>.

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" application - write an image viewer in GTK.
fr: Un peu plus qu'une simple application « Hello world » - écrire un visionneur d'images en GTK.

note: (itstool) path: item/p
en: Write a basic GTK user interface in Python
fr: écrire une interface graphique GTK en Python,

note: (itstool) path: item/p
en: Basic knowledge of the python programming language
fr: des connaissances de base du langage de programmation python.

note: (itstool) path: item/p
en: Choose <gui>PyGTK (automake)</gui> from the <gui>Python</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
fr: Sélectionnez <gui>PyGTK (automake)</gui> dans l'onglet <gui>Python</gui>, cliquez sur <gui>Continuer</gui> et saisissez vos informations sur les pages suivantes. Mettez <file>image-viewer</file> comme nom de projet et de répertoire.

note: (itstool) path: item/p
en: Be sure to disable <gui>Use GtkBuilder for user interface</gui> as we will build the user interface manually in this example. For an example of using the interface designer, check the <link xref="guitar-tuner.py">Guitar-Tuner demo</link>.
fr: Assurez-vous d'avoir désactivé <gui>Utiliser GtkBuilder pour l'interface utilisateur</gui> car nous allons créer l'interface utilisateur manuellement dans cet exemple. Consultez <link xref="guitar-tuner.py">l'exemple Guitar-Tuner</link> pour un exemple d'utilisation du constructeur d'interfaces.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/image_viewer.py</file> from the <gui>Project</gui> or <gui>File</gui> tabs. It contains very basic example code.
fr: Cliquez sur <gui>Appliquer</gui> et le projet est créé. Ouvrez <file>src/image_viewer.py</file> depuis l'onglet <gui>Projet</gui> ou l'onglet <gui>Fichiers</gui>. Il contient quelques lignes de code très basique.

note: (itstool) path: section/p
en: Let's see what a very basic Gtk application looks like in Python:
fr: Voyons à quoi ressemble une application Gtk basique écrite en Python :

note: (itstool) path: item/p
en: In the <code>__init__</code> method of the <code>GUI</code> class creates an (empty) <code>Gtk.Window</code>, sets its title and then connects a signal to quit the application once the window is closed. That's pretty simple overall, more on signals later.
fr: La méthode <code>__init__</code> de la classe <code>GUI</code> crée une fenêtre <code>Gtk.Window</code> (vide), définit son titre, puis connecte un signal pour quitter l'application quand la fenêtre est fermée. C'est globalement très simple. Nous en verrons un peu plus sur les signaux plus tard.

note: (itstool) path: item/p
en: Next, <code>destroy</code> is defined which just quits the application. It is called by the <code>destroy</code> signal connected above.
fr: Ensuite est définie la méthode <code>destroy</code> qui quitte juste l'application. Elle est appelée par le signal connecté ci-dessus.

note: (itstool) path: item/p
en: The rest of the file does initialisation for Gtk and displays the GUI.
fr: Le reste du fichier effectue l'initialisation pour Gtk et affiche l'interface graphique.

note: (itstool) path: section/p
en: This code is ready to run, so try it using <guiseq><gui>Run</gui><gui>Execute</gui></guiseq>. It should show you an empty window.
fr: Ce programme est prêt à être utilisé, donc essayez-le en utilisant le menu <guiseq><gui>Exécuter</gui><gui>Exécuter</gui></guiseq>. Cela devrait vous afficher une fenêtre vide.

note: (itstool) path: section/p
en: Let's add the box and widgets to the window. Insert the following code into the <code>__init__</code> method, immediately after the <code>window.connect_after</code> line:
fr: Ajoutons la boîte et les éléments graphiques à la fenêtre. Insérez le code suivant dans la méthode <code>__init__</code>, juste après la ligne <code>window.connect_after</code> :

note: (itstool) path: section/p
en: The first line creates a <code>Gtk.Box</code> called <code>box</code> and the following lines set two of its properties: the <code>orientation</code> is set to vertical (so the widgets are arranged in a column), and the <code>spacing</code> between the widgets is set to 5 pixels. The next line then adds the newly-created <code>Gtk.Box</code> to the window.
fr: La première ligne crée une <code>Gtk.Box</code> nommée <code>box</code> et les lignes suivantes définissent deux de ses propriétés : l'<code>orientation</code> est verticale (donc les éléments graphiques sont disposés en colonne) et l'espacement entre les éléments graphiques est fixé à 5 pixels. La ligne suivante ajoute ensuite cette nouvelle <code>Gtk.Box</code> à la fenêtre.

note: (itstool) path: section/p
en: To add some widgets to the <code>Gtk.Box</code>, insert the following code directly below the <code>window.add (box)</code> line:
fr: Pour ajouter d'autres éléments graphiques à la fenêtre, insérez ce code juste dessous la ligne <code>window.add (box)</code> :

note: (itstool) path: section/p
en: The first line creates a new <code>Gtk.Image</code> called <code>image</code>, which will be used to display an image file. As we need that later on in the signal handler, we will define it as a class-wide variable. You need to add <code>image = 0</code> to the beginning of the <code>GUI</code> class. Then, the image widget is added (<em>packed</em>) into the <code>box</code> container using GtkBox's <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start"><code>pack_start</code></link> method.
fr: La première ligne crée une nouvelle image <code>Gtk.Image</code> nommée <code>image</code> qui sera utilisée pour afficher un fichier image. Comme nous en avons besoin plus tard dans la fonction de gestion de signal, nous la définissons comme étant un attribut de classe. Vous devez ajouter <code>image = 0</code> au début de la classe <code>GUI</code>. Puis, l'élément graphique image est ajouté (<em>placé</em>) dans le conteneur <code>box</code> à l'aide de la méthode <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start"><code>pack_start</code></link> de GtkBox.

note: (itstool) path: section/p
en: <code>pack_start</code> takes 4 arguments: the widget that is to be added to the GtkBox (<code>child</code>); whether the <code>Gtk.Box</code> should grow larger when the new widget is added (<code>expand</code>); whether the new widget should take up all of the extra space created if the <code>Gtk.Box</code> gets bigger (<code>fill</code>); and how much space there should be, in pixels, between the widget and its neighbors inside the <code>Gtk.Box</code> (<code>padding</code>).
fr: <code>pack_start</code> prend 4 arguments : l'élément graphique enfant (<code>child</code>) qui doit être ajouté à la boîte <code>Gtk.Box</code> ; si la boîte <code>Gtk.Box</code> doit s'agrandir (<code>expand</code>) quand le nouvel élément graphique est ajouté ; si le nouvel élément graphique doit prendre tout le nouvel espace créé quand la boîte <code>Gtk.Box</code> s'agrandit (<code>fill</code>) ; et enfin combien d'espace libre (<code>padding</code>), en pixels, il doit y avoir entre l'élément graphique et ses voisins à l'intérieur de la <code>Gtk.Box</code>.

note: (itstool) path: section/p
en: These lines are similar to the first two, but this time they create a <code>Gtk.Button</code> and add it to <code>box</code>. Notice that we are setting the <code>expand</code> argument (the second one) to <code>False</code> here, whereas it was set to <code>True</code> for the <code>Gtk.Image</code>. This will cause the image to take up all available space and the button to take only the space it needs. When you maximize the window, the button size will remain the same, but the image size will increase, taking up all of the rest of the window.
fr: Ces lignes ressemblent aux deux premières, mais cette fois elles créent un bouton <code>Gtk.Button</code> et l'ajoute à la <code>box</code>. Notez que nous paramétrons ici l'argument <code>expand</code> (le second) sur <code>False</code>, alors qu'il était sur <code>True</code> pour l'image <code>Gtk.Image</code>. Ceci va conduire à ce que l'image prenne tout l'espace disponible et le bouton seulement l'espace nécessaire. Lors d'un redimensionnement de la fenêtre, la taille du bouton reste identique, alors que la taille de l'image va augmenter pour occuper le reste de la fenêtre.

note: (itstool) path: section/p
en: When the user clicks on the <gui>Open Image...</gui> button, a dialog should appear so that the user can choose a picture. Once chosen, the picture should be loaded and shown in the image widget.
fr: Quand l'utilisateur clique sur le bouton <gui>Open a picture...</gui>, une boîte de dialogue s'affiche pour lui permettre de choisir une image. Une fois ce choix effectué, la photo est chargée et affichée dans l'élément graphique image.

note: (itstool) path: section/p
en: The first step is to connect the <code>clicked</code> signal of the button to a signal handler function, which we call <code>on_open_clicked</code>. Put this code immediately after the <code>button = Gtk.Button()</code> line where the button was created:
fr: Connectez d'abord le signal <code>clicked</code> du bouton à une fonction de gestion de signal que vous appelez <code>on_open_clicked</code>. Mettez ce code immédiatement après la ligne <code>button = Gtk.Button()</code> où le bouton a été créé :

note: (itstool) path: section/p
en: This will connect the <code>clicked</code> signal to <code>on_open_clicked</code> method that we will define below.
fr: Cela connecte le signal <code>clicked</code> à la méthode <code>on_open_clicked</code> que nous définirons ci-dessous.

note: (itstool) path: section/p
en: Now we can create the <code>on_open_clicked</code> method. Insert the following into the <code>GUI</code> class code block, after the <code>__init__</code> method:
fr: On peut maintenant créer la méthode <code>on_open_clicked</code>. Insérez ce qui suit dans le bloc de code de la classe <code>GUI</code>, après la méthode <code>__init__</code> :

note: (itstool) path: item/p
en: The line beginning with <code>dialog</code> creates an <gui>Open</gui> dialog, which the user can use to choose files. We set three properties: the title of the dialog; the action (type) of the dialog (it's an "open" dialog, but we could have used <code>SAVE</code> if the intention was to save a file; and <code>transient_for</code>, which sets the parent window of the dialog.
fr: La ligne commençant par <code>dialog</code> crée une boîte de dialogue <gui>Open</gui> qui permet à l'utilisateur de choisir des fichiers. Nous paramétrons trois propriétés : le titre de la boîte de dialogue ; la fonction (le type) de la boîte de dialogue (c'est une boîte de dialogue « OPEN », mais on aurait pu utiliser (<code>SAVE</code>) (enregistrer) si notre intention avait été d'enregistrer un fichier) et <code>transient_for</code>, qui définit la fenêtre parent de la boîte de dialogue.

note: (itstool) path: item/p
en: <code>dialog.run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>dialog.run</code> will return the value <output>1</output> (it would return <output>0</output> if the user clicked <gui>Cancel</gui>). The <code>if</code> statement tests for this.
fr: <code>dialog.run</code> affiche la boîte de dialogue <gui>Open</gui>. La boîte de dialogue attend que l'utilisateur choisisse une image ; quand c'est fait, <code>dialog.run</code> retourne la valeur <output>1</output> (il retourne la valeur <output>0</output> si l'utilisateur clique sur <gui>Annuler</gui>). L'instruction <code>if</code> teste cette réponse.

note: (itstool) path: section/p
en: All of the code you need should now be in place, so try running the code. That should be it; a fully-functioning image viewer (and a whistlestop tour of Python and Gtk) in not much time at all!
fr: Tout le programme nécessaire est maintenant en place, donc essayez de l'exécuter. Cela devrait fonctionner ; un visionneur d'images totalement fonctionnel (et une visite éclair de Python et de Gtk) en très peu de temps !

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.py">reference code</link>.
fr: Si vous rencontrez des difficultés avec ce tutoriel, comparez votre programme à ce <link href="image-viewer/image-viewer.py">programme de référence</link>.

note: (itstool) path: synopsis/p
en: In this tutorial you will create an application which opens and displays an image file. You will learn:
fr: Dans ce tutoriel, nous allons écrire une application qui charge et affiche un fichier image. Vous allez apprendre :

note: (itstool) path: item/p
en: How to set up a basic project using the <link xref="getting-ready">Anjuta IDE</link>.
fr: comment paramétrer un projet de base en utilisant <link xref="getting-ready">Anjuta IDE</link>,

note: (itstool) path: item/p
en: How to write a <link href="http://developer.gnome.org/platform-overview/stable/gtk">Gtk application</link> in Vala
fr: comment écrire une <link href="http://developer.gnome.org/platform-overview/stable/gtk">application Gtk</link> en Vala,

note: (itstool) path: item/p
en: Some basic concepts of <link href="http://developer.gnome.org/gobject/stable/">GObject</link> programming
fr: quelques concepts de base sur la programmation <link href="http://developer.gnome.org/gobject/stable/">GObject</link>,

note: (itstool) path: item/p
en: You may find the <link href="http://valadoc.org/gtk+-3.0/">gtk+-3.0</link> API Reference useful, although it is not necessary to follow the tutorial.
fr: Vous pourriez trouver la référence API de <link href="http://valadoc.org/gtk+-3.0/">gtk+-3.0</link> utile, bien qu'il ne soit pas nécessaire de suivre le tutoriel.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is unchecked as we will create the UI manually in this tutorial.
fr: Assurez-vous d'avoir désactivé <gui>Utiliser GtkBuilder pour l'interface utilisateur</gui> car nous allons créer l'interface utilisateur manuellement dans cet exemple.

note: (itstool) path: note/p
en: You will learn how to use the interface builder in the <link xref="guitar-tuner.vala">Guitar-Tuner</link> tutorial.
fr: Consultez le tutoriel <link xref="guitar-tuner.c">Accordeur de guitare</link> si vous souhaitez savoir comment utiliser le constructeur d'interface GtkBuilder.

note: (itstool) path: item/p
en: Click <gui>Continue</gui> then <gui>Apply</gui> and the project will be created for you. Open <file>src/image_viewer.vala</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You will see this code:
fr: Cliquez sur <gui>Continuer</gui> et le projet est créé. Ouvrez <file>src/image_viewer.vala</file> depuis l'onglet <gui>Projet</gui> ou l'onglet <gui>Fichiers</gui>. Vous verrez apparaître ce code :

note: (itstool) path: section/p
en: The code loads an (empty) window from the user interface description file and shows it. More details are given below; skip this list if you understand the basics:
fr: Ce programme charge une fenêtre (vide) à partir du fichier de description de l'interface et l'affiche. Vous trouverez plus de détails ci-dessous ; passez cette liste si vous comprenez les bases :

note: (itstool) path: item/p
en: The two <code>using</code> lines at the top import namespaces so we don't have to name them explicitly.
fr: Les deux lignes <code>using</code> du début importent des espaces de noms que nous n'aurons plus à nommer explicitement.

note: (itstool) path: item/p
en: The constructor of the <code>Main</code> class creates a new (empty) window and connects a <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">signal</link> to exit the application when that window is closed.
fr: Le constructeur de la classe principale <code>Main</code> crée une nouvelle fenêtre (vide) et connecte un <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">signal</link> pour quitter l'application quand cette fenêtre est fermée.

note: (itstool) path: item/p
en: The <code>static main</code> function is run by default when you start a Vala application. It calls a few functions which create the <code>Main</code> class, set up and then run the application. The <link href="http://valadoc.org/gtk+-3.0/Gtk.main.html"><code>Gtk.main</code></link> function starts the GTK <link href="http://en.wikipedia.org/wiki/Event_loop">main loop</link>, which runs the user interface and starts listening for events (like clicks and key presses).
fr: La fonction <code>statique main</code> est exécutée par défaut quand vous lancez une application Vala. Elle appelle d'autres fonctions qui créent la classe <code>Main</code>, configurent puis exécutent l'application. La fonction <link href="http://valadoc.org/gtk+-3.0/Gtk.main.html"><code>Gtk.main</code></link> démarre la <link href="http://en.wikipedia.org/wiki/Event_loop">boucle principale</link> de GTK, qui lance l'interface utilisateur et commence à écouter les événements (comme des clics de souris ou des appuis sur des touches).

note: (itstool) path: section/p
en: Change the <gui>Configuration</gui> to <gui>Default</gui> and then press <gui>Execute</gui> to configure the build directory. You only need to do this once, for the first build.
fr: Pour configurer le répertoire de compilation, modifiez la <gui>Configuration</gui> à <gui>Par défaut</gui> et cliquez sur <gui>Exécuter</gui>. Il ne faut le faire qu'une seule fois, à la première compilation.

note: (itstool) path: section/p
en: Now we will bring life into the empty window. GTK organizes the user interface with <link href="http://www.valadoc.org/gtk+-2.0/Gtk.Container.html"><code>Gtk.Container</code></link>s that can contain other widgets and even other containers. Here we will use the simplest available container, a <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.html"><code>Gtk.Box</code></link>.
fr: Nous allons maintenant donner vie à la fenêtre vide. GTK organise l'interface utilisateur avec des <link href="http://www.valadoc.org/gtk+-2.0/Gtk.Container.html"><code>Gtk.Container</code></link> qui peuvent contenir d'autres éléments graphiques et même d'autres conteneurs. Ici, nous allons utiliser le plus simple conteneur disponible, une boîte <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.html"><code>Gtk.Box</code></link> :

note: (itstool) path: section/p
en: Add the following lines to the top of the <code>Main</code> class:
fr: Ajoutez les lignes suivantes au dessus de la classe <code>Main</code> :

note: (itstool) path: section/p
en: Now replace the current constructor with the one below:
fr: Remplacez maintenant le constructeur actuel par celui ci-dessous :

note: (itstool) path: item/p
en: The first two lines are the parts of the GUI that we will need to access from more than one method. We declare them up here so that they are accessible throughout the class instead of only in the method where they are created.
fr: Les deux premières lignes sont les parties de l'interface graphique auxquelles nous aurons besoin d'accéder depuis plus d'une méthode. Nous les déclarons avant afin qu'elles soient accessibles depuis la classe plutôt que seulement dans la méthode où elles sont crées.

note: (itstool) path: item/p
en: The first lines of the constructor create the empty window. The next lines create the widgets we want to use: a button for opening up an image, the image view widget itself and the box we will use as a container.
fr: Les premières lignes du constructeur créent la fenêtre vide. Les lignes suivantes créent les éléments graphiques dont nous avons besoin : un bouton pour ouvrir une image, l'élément graphique image lui-même et la boîte que nous utilisons comme conteneur.

note: (itstool) path: item/p
en: The calls to <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.pack_start.html"><code>pack_start</code></link> add the two widgets to the box and define their behaviour. The image will expand into any available space whereas the button will just be as big as needed. You will notice that we don't set explicit sizes on the widgets. In GTK this is usually not needed as it makes it much easier to have a layout that looks good in different window sizes. Next, the box is added to the window.
fr: Les appels à <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.pack_start.html"><code>pack_start</code></link> ajoutent les deux éléments graphiques à la boîte et définissent leur comportement. L'image va s'étendre pour occuper tout l'espace disponible alors que le bouton va prendre juste la taille nécessaire. Notez que nous ne définissons pas explicitement les dimensions des éléments graphiques. Avec GTK, ce n'est habituellement pas nécessaire car cela facilite grandement l'obtention d'une bonne disposition pour différentes tailles de fenêtre. La boîte est ensuite ajoutée dans la fenêtre.

note: (itstool) path: item/p
en: We need to define what happens when the user clicks on the button. GTK uses the concept of <em>signals</em>.
fr: Nous devons définir ce qui se produit lorsque l'utilisateur clique sur le bouton. GTK utilise le concept de <em>signaux</em>.

note: (itstool) path: item/p
en: When the <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html">button</link> is clicked, it fires the <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.clicked.html"><code>clicked</code></link> signal, which we can connect to some action (defined in a <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">callback</link> method).
fr: Lorsque le <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html">bouton</link> est cliqué, il émet le signal <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.clicked.html"><code>clicked</code></link> que nous pouvons connecter à des actions (définies dans une <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">fonction de rappel</link>).

note: (itstool) path: item/p
en: This is done using the <code>connect</code> method of the button's <code>clicked</code> signal, which in this case tells GTK to call the (yet undefined) <code>on_image_open</code> callback method when the button is clicked. We will define the <em>callback</em> in the next section.
fr: On le fait en utilisant la méthode <code>connect</code> du signal <code>clicked</code> du bouton qui dans ce cas indique à GTK d'appeler la fonction de rappel (pas encore définie) <code>on_image_open</code> lorsque le bouton est cliqué. Nous définirons la <em>fonction de rappel</em> dans la prochaine section.

note: (itstool) path: item/p
en: In the callback, we need to access the <code>window</code> and <code>image</code> widgets, which is why we defined them as private members at the top of our class.
fr: Dans la fonction de rappel, nous avons besoin d'accéder aux éléments graphiques <code>window</code> (fenêtre) et <code>image</code>, c'est pourquoi nous les définissons comme membres privés (private) au début de notre classe.

note: (itstool) path: item/p
en: The last <code>connect</code> call makes sure that the application exits when the window is closed. The code generated by Anjuta called an <code>on_destroy</code> callback method which called <link href="http://www.valadoc.org/gtk+-2.0/Gtk.main_quit.html"><code>Gtk.main_quit</code></link>, but just connecting our signal to <code>main_quit</code> directly is easier. You can delete the <code>on_destroy</code> method.
fr: Le dernier appel <code>connect</code> permet d'être sûr que l'application quitte lorsque la fenêtre est fermée. Le code généré par Anjuta appelle une fonction de rappel <code>on_destroy</code> qui appelle <link href="http://www.valadoc.org/gtk+-2.0/Gtk.main_quit.html"><code>Gtk.main_quit</code></link> bien qu'il soit plus facile de connecter directement notre signal à <code>main_quit</code>. Vous pouvez supprimer la méthode <code>on_destroy</code>.

note: (itstool) path: section/p
en: We will now define the signal handler for the <code>clicked</code> signal for the button we mentioned before. Add this code after the constructor:
fr: Nous allons maintenant définir le gestionnaire de signal pour le signal <code>clicked</code> du bouton ci-dessus. Ajoutez ce code après le constructeur :

note: (itstool) path: section/p
en: This is a bit complicated, so let's break it down:
fr: C'est un peu compliqué, donc décortiquons cette partie étape par étape :

note: (itstool) path: note/p
en: A signal handler is a type of callback method that is called when a signal is emitted. Here the terms are used interchangeably.
fr: Un gestionnaire de signal est un type de fonction de rappel qui est appelé lorsqu'un signal est émis. Ici les termes sont utilisés indifféremment.

note: (itstool) path: item/p
en: The first argument of the callback method is always the widget that sent the signal. Sometimes other arguments related to the signal come after that, but <em>clicked</em> doesn't have any.
fr: Le premier argument de la fonction de rappel est toujours l'élément graphique qui a envoyé le signal. Parfois d'autres arguments apparaissent derrière reliés au signal, mais <em>clicked</em> n'en a aucun.

note: (itstool) path: item/p
en: In this case the <code>button</code> sent the <code>clicked</code> signal, which is connected to the <code>on_open_image</code> callback method:
fr: Dans ce cas, le <code>bouton</code> envoie le signal <code>clicked</code> qui est connecté à la fonction de rappel <code>on_open_image</code> :

note: (itstool) path: item/p
en: The <code>on_open_image</code> method takes the button that emitted the signal as an argument:
fr: Le méthode <code>on_open_image</code> prend comme paramètre le bouton qui a émis le signal :

note: (itstool) path: item/p
en: The next interesting line is where the dialog for choosing the file is created. <link href="http://www.valadoc.org/gtk+-3.0/Gtk.FileChooserDialog.html"><code>FileChooserDialog</code></link>'s constructor takes the title of the dialog, the parent window of the dialog and several options like the number of buttons and their corresponding values.
fr: La prochaine ligne intéressante est celle où est créée la boîte de dialogue pour choisir le fichier. Le constructeur de <link href="http://www.valadoc.org/gtk+-3.0/Gtk.FileChooserDialog.html"><code>FileChooserDialog</code></link> prend comme argument le titre, la fenêtre parente de la boîte de dialogue et plusieurs options telles que l'étiquette des boutons et les actions correspondantes.

note: (itstool) path: item/p
en: Notice that we are using <link href="http://unstable.valadoc.org/gtk+-3.0/Gtk.Stock.html"><em>stock</em></link> button names from Gtk, instead of manually typing "Cancel" or "Open". The advantage of using stock names is that the button labels will already be translated into the user's language.
fr: Notez que nous utilisons les noms de bouton de la <link href="http://unstable.valadoc.org/gtk+-3.0/Gtk.Stock.html"><em>collection</em></link> (stock) Gtk au lieu de saisir manuellement « Cancel » ou « Open ». L'avantage d'utiliser les noms de la collection est que les étiquettes des boutons sont déjà traduites dans la langue de l'utilisateur.

note: (itstool) path: item/p
en: The next two lines restrict the <gui>Open</gui> dialog to only display files which can be opened by <em>GtkImage</em>. GtkImage is a widget which displays an image. A filter object is created first; we then add all kinds of files supported by <link href="http://www.valadoc.org/gdk-pixbuf-2.0/Gdk.Pixbuf.html"><code>Gdk.Pixbuf</code></link> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.
fr: Les deux lignes suivantes limitent la boîte de dialogue <gui>Open</gui> à l'affichage des seuls fichiers pouvant être ouverts par <em>GtkImage</em> qui est un élément graphique qui affiche une image. Un objet filtre est d'abord créé ; ensuite nous ajoutons tous les types de fichiers pris en charge par <link href="http://www.valadoc.org/gdk-pixbuf-2.0/Gdk.Pixbuf.html"><code>Gdk.Pixbuf</code></link> (ce qui inclut la plupart des formats d'image comme PNG ou JPEG) au filtre. Enfin, nous appliquons ce filtre à la boîte de dialogue <gui>Open</gui>.

note: (itstool) path: item/p
en: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Dialog.run.html"><code>dialog.run</code></link> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>dialog.run</code> will return the <link href="http://www.valadoc.org/gtk+-3.0/Gtk.ResponseType.html">ResponseType</link> value <code>ResponseType.ACCEPT</code> (it would return <code>ResponseType.CANCEL</code> if the user clicked <gui>Cancel</gui>). The <code>switch</code> statement tests for this.
fr: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Dialog.run.html"><code>dialog.run</code></link> affiche la boîte de dialogue <gui>Open</gui>. La boîte de dialogue attend que l'utilisateur choisisse une image ; quand c'est fait, <code>dialog.run</code> retourne la valeur <link href="http://www.valadoc.org/gtk+-3.0/Gtk.ResponseType.html">ResponseType</link> <code>ResponseType.ACCEPT</code> (il retourne la valeur <code>ResponseType.CANCEL</code> si l'utilisateur clique sur <gui>Cancel</gui>). L'instruction <code>switch</code> teste cette réponse.

note: (itstool) path: item/p
en: Assuming that the user did click <gui>Open</gui>, the next lines get the filename of the image selected by the user, and tell the <code>GtkImage</code> widget to load and display the selected image.
fr: Supposons que l'utilisateur a cliqué sur le bouton <gui>Ouvrir</gui>, la ligne suivante récupère le nom de fichier de l'image sélectionnée par l'utilisateur et indique à l'élément graphique <code>GtkImage</code> de charger et d'afficher l'image choisie.

note: (itstool) path: item/p
en: Destroying automatically hides the dialog.
fr: La destruction masque automatiquement la boîte de dialogue.

note: (itstool) path: section/p
en: If you haven't already done so, choose the <file>src/image-viewer</file> application in the dialog that appears. Finally, hit <gui>Run</gui> and enjoy!
fr: Si ce n'est pas encore fait, sélectionnez l'application <file>src/image-viewer</file> dans la boîte de dialogue qui s'affiche et cliquez sur <gui>Exécuter</gui>. Amusez-vous bien !

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.vala">reference code</link>.
fr: Si vous rencontrez des difficultés avec ce tutoriel, comparez votre programme à ce <link href="image-viewer/image-viewer.vala">programme de référence</link>.

note: (itstool) path: item/p
en: Set it up so that when the window opens it is of a specific size to start off with. For example, 200 X 200 pixels.
fr: Paramètre en sorte que lorsque la fenêtre s'ouvre, elle fasse une taille de départ spécifiée, par exemple 200 X 200 pixels.

note: (itstool) path: credit/name
en: GNOME Documentation Team
fr: Équipe de documentation GNOME

note: (itstool) path: page/title
en: GNOME Developer Platform Demos
fr: Exemples de la plateforme de développement GNOME

note: (itstool) path: page/title
en: Tutorials, code samples and platform demos in JavaScript
fr: Tutoriels, exemples de code et plateformes de démonstration en JavaScript

note: (itstool) path: info/desc
en: A widget which displays text
fr: Un élément graphique qui affiche du texte

note: (itstool) path: page/title (itstool) path: td/p
en: Label
fr: Étiquette

note: (itstool) path: td/p (itstool) path: page/p
en: A simple label
fr: Une étiquette simple

note: (itstool) path: info/desc
en: A label which can contain text
fr: Une étiquette qui peut contenir du texte

note: (itstool) path: page/p
en: A label displaying a friendly message.
fr: Une étiquette qui affiche un message sympathique.

note: (itstool) path: info/desc
en: A widget that displays a small to medium amount of text
fr: Un élément graphique qui affiche une petite à moyenne quantité de texte

note: (itstool) path: section/p
en: Another way to obtain what we have in the example is to create the label as an instance of another class and add it to the instance of <code>MyWindow</code> in the <code>do_activate(self)</code> method:
fr: Une autre manière d'obtenir ce que contient cet exemple est de créer l'étiquette comme étant un exemple d'une autre classe et de l'ajouter à <code>MyWindow</code> dans la méthode <code>do_activate(self)</code> :

note: (itstool) path: section/title
en: Useful methods for a Label widget
fr: Méthodes utiles pour un élément graphique étiquette

note: (itstool) path: item/p
en: <code>set_line_wrap(True)</code> breaks lines if the text of the label exceeds the size of the widget.
fr: La fonction <code>set_line_wrap(True)</code> renvoie le texte de l'étiquette à la ligne s'il excède la largeur de l'élément graphique.

note: (itstool) path: item/p
en: <code>set_justify(Gtk.Justification.LEFT)</code> (or <code>Gtk.Justification.RIGHT, Gtk.Justification.CENTER, Gtk.Justification.FILL</code>) sets the alignment of the lines in the text of the label relative to each other. The method has no effect on a single-line label.
fr: La fonction <code>set_justify(Gtk.Justification.LEFT)</code> (ou <code>Gtk.Justification.RIGHT, Gtk.Justification.CENTER, Gtk.Justification.FILL</code>) définit l'alignement des lignes du texte de l'étiquette à une position relative les unes par rapport aux autres. La méthode n'a aucun effet sur une étiquette comportant une seule ligne.

note: (itstool) path: item/p
en: For decorated text we can use <code>set_markup("text")</code>, where <code>"text"</code> is a text in the <link href="http://developer.gnome.org/pango/stable/PangoMarkupFormat.html">Pango Markup Language</link>. An example:
fr: Pour décorer le texte, nous pouvons utiliser <code>set_markup("text")</code>, où <code>"text"</code> est mis en <link href="http://developer.gnome.org/pango/stable/PangoMarkupFormat.html">langage Markup pango</link>. Voici un exemple :

note: (itstool) path: info/desc
en: Create buttons bound to a URL
fr: Créer des boutons reliés à un URL

note: (itstool) path: page/p
en: This button links to the GNOME live webpage.
fr: Ce bouton se connecte à la page Web de GNOME live.

note: (itstool) path: info/desc
en: A button that links to a web page
fr: Un bouton qui crée un lien vers une page Web

note: (itstool) path: page/p
en: A button that links to live.gnome.org.
fr: Un bouton qui crée un lien vers live.gnome.org.

note: (itstool) path: info/desc
en: A button bound to an URL
fr: Un bouton relié à un URL

note: (itstool) path: page/p
en: A button that links to a web page.
fr: Un bouton qui crée un lien vers une page Web.

note: (itstool) path: section/title
en: Useful methods for a LinkButton widget
fr: Méthodes utiles pour un élément graphique LinkButton

note: (itstool) path: item/p
en: <code>get_visited()</code> returns the 'visited' state (<code>True</code> or <code>False</code>) of the URI where the LinkButton points. The button becomes visited when it is clicked.
fr: La méthode <code>get_visited()</code> renvoie l'état « visited » (<code>True</code> ou <code>False</code>) de l'URI vers lequel pointe le LinkButton. Le bouton se change en visited quand il est cliqué.

note: (itstool) path: item/p
en: <code>set_visited(True)</code> sets the 'visited' state of the URI where the LinkButton points as <code>True</code> (analogously for <code>False</code>).
fr: La méthode <code>set_visited(vrai)</code> définit l'état « visited » de l'URI vers lequel pointe le LinkButton à <code>vrai</code> (même chose pour <code>faux</code>).

note: (itstool) path: page/p
en: This button links to GNOME live.
fr: Ce bouton se connecte à la page Web de GNOME live.

note: (itstool) path: page/title
en: Magic mirror
fr: Miroir magique

note: (itstool) path: synopsis/p
en: In this tutorial, we're going to make a program which lets you use your webcam as a mirror. You will learn how to:
fr: Dans ce tutoriel, nous allons faire un programme qui va vous permettre d'utiliser votre webcam comme miroir. Vous apprendrez comment :

note: (itstool) path: item/p
en: Create a GTK+ application
fr: créer une application GTK+,

note: (itstool) path: item/p
en: Access your webcam using GStreamer and embed the result into a window
fr: accéder à votre webcam en utilisant GStreamer et intégrer le résultat dans une fenêtre,

note: (itstool) path: item/p
en: Grab photos off your webcam
fr: récupérer des photos de votre webcam,

note: (itstool) path: item/p
en: Installed copies of GTK, GStreamer, and a Vala compiler
fr: l'installation des paquets GTK, GStreamer et d'un compilateur Vala,

note: (itstool) path: item/p
en: Basic knowledge of an object-oriented programming language
fr: des connaissances de base d'un langage de programmation d'objets.

note: (itstool) path: item/p
en: Disable <gui>Use GtkBuilder for user interface</gui> as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.vala">Guitar-Tuner</link> tutorial using the interface builder.
fr: Désactivez <gui>Utiliser GtkBuilder pour l'interface utilisateur</gui> car nous allons créer l'interface utilisateur manuellement. Consultez le tutoriel <link xref="guitar-tuner.vala">Accordeur de guitare</link> à propos de l'utilisation du constructeur d'interface GtkBuilder.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is selected. On the next page, select <em>gstreamer-0.10</em> from the list to include the <app>GStreamer</app> library into your project.
fr: Assurez-vous que <gui>Configuration des paquets externes</gui> est activé. Sur la page suivante, sélectionnez <em>gstreamer-0.10</em> dans la liste pour inclure la bibliothèque <app>GStreamer</app> à votre projet.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/magic_mirror.vala</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
fr: Cliquez sur <gui>Appliquer</gui> et votre projet est créé. Ouvrez <file>src/miroir_magique.vala</file> depuis l'onglet <gui>Projet</gui> ou l'onglet <gui>Fichiers</gui>. Vous devez voir apparaître du code commençant par les lignes :

note: (itstool) path: section/p
en: The code loads an (empty) window and shows it. More details are given below; skip this list if you understand the basics:
fr: Le programme charge et affiche une fenêtre (vide). Vous trouverez plus de détails ci-dessous ; passez cette liste si vous comprenez les bases :

note: (itstool) path: item/p
en: The constructor of the <code>Main</code> class creates a new window and sets its title. Afterwards the window is shown and a signal is connected which quits the application if the window is closed. More on signals later on.
fr: Le constructeur de la classe principale <code>Main</code> crée une nouvelle fenêtre et définit son titre. Ensuite, la fenêtre est affichée et un signal permettant de quitter l'application est connecté à la fermeture de la fenêtre. Plus d'informations sur les signaux sont données plus tard.

note: (itstool) path: item/p
en: The static <code>main</code> function is run by default when you start a Vala application. It calls a few functions which create the Main class, set up and then run the application. The <code>Gtk.Main</code> function starts the GTK main loop, which runs the user interface and starts listening for events (like clicks and key presses).
fr: La fonction statique <code>main</code> est exécutée par défaut quand vous lancez une application Vala. Elle appelle d'autres fonctions qui créent la classe « Main », initialise et ensuite exécute l'application. La fonction <code>Gtk.Main</code> démarre la boucle principale GTK, qui lance l'interface utilisateur et commence à écouter les événements (comme des clics de souris ou des appuis sur des touches).

note: (itstool) path: section/title
en: Access the webcam video stream with GStreamer
fr: Accès au flux vidéo de votre webcam avec GStreamer

note: (itstool) path: section/p
en: The GStreamer multimedia framework is able to handle video from webcams. Let's add GStreamer to our application and so we can access the video stream.
fr: L'architecture multimédia de GStreamer sait gérer les vidéos en provenance de webcams. Ajoutons GStreamer à notre application et nous pouvons ainsi accéder au flux vidéo.

note: (itstool) path: item/p
en: First we remove the window we created before because GStreamer will take care of showing the picture on screen.
fr: Enlevons d'abord la fenêtre créée précédemment, car GStreamer va gérer l'affichage de l'image à l'écran.

note: (itstool) path: item/p
en: Now we are creating a GStreamer element which accesses our webcam. We are using the Camerabin element, which is an all-in-one camera element and is capable of taking photos, videos, applying effects and much more. Perfect for our use case! With <code>this.camerabin.set_state (Gst.State.PLAYING)</code> we tell the GStreamer pipeline we just created to start playing. Easy, no?
fr: Créons maintenant un élément GStreamer qui va accéder à notre webcam. Nous utilisons l'élément « Camerabin », qui est un élément caméra tout-en-un et qui sait faire des photos, des vidéos, appliquer des effets et beaucoup plus encore. Parfait dans notre cas ! Avec <code>this.camerabin.set_state (Gst.State.PLAYING)</code> nous disons au pipeline GStreamer, que nous venons de créer, de commencer la lecture. Facile, non ?

note: (itstool) path: item/p
en: Of course it is also possible to integrate the video more tighly into other windows but that is an advanced topic that includes some details of the X Window System we will omit here.
fr: Bien sûr, il est aussi possible d'ajuster plus précisément la vidéo dans d'autres fenêtres, mais c'est un sujet avancé, qui inclut des détails sur le système X Window et que nous ne traiterons pas ici.

note: (itstool) path: item/p
en: Compile and run it again. You will end up with two windows. In the next step we will integrate the video into the GTK+ window.
fr: Compilez et exécutez le programme à nouveau. Vous obtenez finalement deux fenêtres. À l'étape suivante, nous allons intégrer la vidéo dans la fenêtre GTK+.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="magic-mirror/magic-mirror.vala">reference code</link>. There is also a more <link href="magic-mirror/magic-mirror-advanced.vala">extensive implementation</link> that embeds the window into a regular Gtk.Window which involves some advanced techniques, and adds buttons to start/stop the picture.
fr: Si vous rencontrez des difficultés avec ce tutoriel, comparez votre programme à ce <link href="magic-mirror/magic-mirror.vala">programme de référence</link>. Il existe aussi une <link href="magic-mirror/magic-mirror-advanced.vala">implémentation plus complète</link> qui intègre la fenêtre à une fenêtre standard Gtk, mais qui nécessite des techniques avancées ainsi que l'ajout de boutons pour lire/arrêter l'image.

note: (itstool) path: section/p
en: To find out more about the Vala programming language you might want to check out the <link href="http://live.gnome.org/Vala/Tutorial">Vala Tutorial</link>.
fr: Pour en savoir plus à propos de la programmation en langage Vala, consultez le <link href="http://live.gnome.org/Vala/Tutorial">manuel Vala</link>.

note: (itstool) path: section/p
en: That's it, you have managed to create a full-featured webcam photo application in 15 minutes. Now you can shave your beard off or add some makeup to your beautiful face, right before having a beautiful day at your workplace, where you can impress your friends and colleagues with an awesome application you just made in 15 minutes.
fr: Ça y est ; vous avez réussi à créer une application fonctionnelle pour webcam en 15 minutes. Maintenant, vous pouvez vous raser ou maquiller votre joli visage avant de passer une belle journée sur votre lieu de travail, où vous allez pouvoir épater vos amis et collègues avec une application géniale faite en 15 minutes.

note: (itstool) path: info/desc
en: A widget which holds GtkMenuItem widgets
fr: Un composant graphique qui contient des éléments graphiques GtkMenuItem

note: (itstool) path: page/title
en: MenuBar
fr: BarreDeMenu

note: (itstool) path: page/p
en: A MenuBar created using XML and GtkBuilder.
fr: Une BarreDeMenu créée avec XML et GtkBuilder.

note: (itstool) path: section/title
en: Create a MenuBar using XML
fr: Création d'une BarreDeMenu avec XML

note: (itstool) path: section/p
en: To create the menubar using XML:
fr: Pour créer une BarreDeMenu avec XML :

note: (itstool) path: item/p
en: Create <file>menubar.ui</file> using your favorite text editor.
fr: créez le fichier <file>barredemenu.ui</file> avec votre éditeur de texte favorit.

note: (itstool) path: item/p
en: Enter the following line at the top of the file:
fr: Saisissez la ligne suivante en haut du fichier :

note: (itstool) path: item/p
en: Now we will create the .py file and use GtkBuilder to import the <file>menubar.ui</file> we just created.
fr: Maintenant, créons le fichier .py et utilisons GtkBuilder pour importer le fichier <file>barredemenu.ui</file> que nous venons de faire.

note: (itstool) path: section/title
en: Add the MenuBar to the window using GtkBuilder
fr: Ajout de la BarreDeMenu à la fenêtre avec GtkBuilder

note: (itstool) path: section/p
en: Now run the python application. It should look like the picture at the top of this page.
fr: Démarrez maintenant l'application python. Vous devriez voir quelque chose qui ressemble à l'image en haut de cette page.

note: (itstool) path: section/title
en: Add items to the menus
fr: Ajout d'éléments aux menus

note: (itstool) path: section/p
en: We start off by adding 2 menuitems to the <gui>File</gui> menu: <gui>New</gui> and <gui>Quit</gui>. We do this by adding a <code>section</code> to the the <code>File</code> submenu with these items. The <file>menubar.ui</file> should look like this (lines 6 to 13 inclusive comprise the newly added section):
fr: Commençons par ajouter 2 éléments au menu <gui>Fichier</gui> : <gui>Nouveau</gui> et <gui>Quitter</gui>. Pour ce faire, ajoutons une <code>section</code> contenant ces éléments au SouMenu <code>Fichier</code>. Le fichier <file>barredemenu.ui</file> devrait ressembler à ceci (les lignes 6 à 13 comportent la section nouvellement ajoutée) :

note: (itstool) path: section/p
en: Following this pattern, you can now add a <code>Copy</code> and a <code>Paste</code> item to the <code>Edit</code> submenu, and an <code>About</code> item to the <code>Help</code> submenu.
fr: En suivant ce modèle, ajoutez maintenant les éléments <code>Copier</code> et <code>Coller</code> au SousMenu <code>Édition</code> et un élément <code>À propos</code> au SousMenu <code>Aide</code>.

note: (itstool) path: section/title
en: Setup actions
fr: Définition des actions

note: (itstool) path: section/p
en: We now create the actions for "New" and "Quit" connected to a callback function in the Python file; for instance we create "new" as:
fr: Dans le fichier Python, créons les actions « Nouveau » et « Quitter » et connectons-les à une fonction de rappel ; par exemple, créons « new » de cette façon :

note: (itstool) path: section/p
en: And we create the callback function of "new" as
fr: et la fonction de rappel de « new » de cette façon :

note: (itstool) path: section/p
en: Note that for an action that is relative to the application, we use the prefix <code>app.</code>; for actions that are relative to the window we use the prefix <code>win.</code>.
fr: Notez que pour une action relative à l'application, nous utilisons le préfixe <code>app.</code>, et que pour une action relative à la fenêtre, nous utilisons le préfixe <code>win.</code>.

note: (itstool) path: section/p
en: Finally, in the Python file, we add the action to the application or to the window - so for instance <code>app.new</code> will be added to the application in the method <code>do_startup(self)</code> as
fr: Finalement, nous ajoutons l'action à l'application ou à la fenêtre dans le fichier python - ainsi, par exemple, <code>app.new</code> est ajouté à l'application dans la méthode <code>do_startup(self)</code> de cette façon :

note: (itstool) path: section/title
en: Actions: Application or Window?
fr: Actions : application ou fenêtre ?

note: (itstool) path: section/p
en: Above, we created the "new" and "open" actions as part of the MyApplication class. Actions which control the application itself, such as "quit" should be created similarly.
fr: Ci-dessus, nous créons les actions « new » et « open » comme faisant partie de la classe MyApplication. Les actions qui gèrent l'application elle-même (comme « quit »), doivent être créées de la même façon.

note: (itstool) path: section/p
en: Some actions, such as "copy" and "paste" deal with the window, not the application. Window actions should be created as part of the window class.
fr: Quelques actions, comme « copy » et « paste » gèrent la fenêtre, pas l'application. Les actions gérant la fenêtre doivent être créées dans la classe window.

note: (itstool) path: section/title
en: Choices submenu and items with state
fr: Le SousMenu Choix et les éléments avec leur état

note: (itstool) path: section/p
en: Lines 30 to 80 inclusive of the <link xref="menubar.py#xml-code"/> demonstrate the XML code used to create the UI for <gui>Choices</gui> menu.
fr: Les lignes 30 à 80 inclue de <link xref="menubar.py#xml-code"/> décrivent le code XML utilisé pour créer le menu <gui>Choix</gui> de l'interface utilisateur.

note: (itstool) path: section/p
en: The actions created so far are <em>stateless</em>, that is they do not retain or depend on a state given by the action itself. The actions we need to create for the Choices submenu, on the other hand, are <em>stateful</em>. An example of creation of a stateful action is:
fr: les actions créées jusqu'à présent sont <em>sans état (stateless)</em>, c-à-d. qu'elles ne prennent pas ni ne dépendent pas d'un état définit par l'action elle-même. Par contre, les actions que nous avons besoin de créer pour le SousMenu Choix sont <em>avec état (stateful)</em>. Voici un exemple de création d'une action stateful :

note: (itstool) path: section/p
en: where the variables of the method are: name, parameter type (in this case, a string - see <link href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html">here</link> for a complete list of character meanings), initial state (in this case, 'line' - in case of a <code>True</code> boolean value it should be <code>Glib.Variant.new_boolean(True)</code>, and so on, see <link href="http://developer.gnome.org/glib/unstable/glib-GVariant.html">here</link> for a complete list)
fr: où les variables de la méthode sont : le nom, le type de paramètre (dans ce cas, une chaîne - voyez <link href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html">ici</link> pour une liste complète des significations des caractères), l'état initial (dans ce cas, « line » - dans le cas d'une valeur boléenne <code>True</code>, il devrait être <code>Glib.Variant.new_boolean(True)</code> et ainsi de suite. Voyez <link href="http://developer.gnome.org/glib/unstable/glib-GVariant.html">ici</link> pour consulter une liste complète)

note: (itstool) path: section/p
en: After creating the stateful SimpleAction we connect it to the callback function and we add it to the window (or the application, if it is the case), as before:
fr: Après avoir créé l'ActionSimple stateful, nous la connectons à la fonction de rappel et nous l'ajoutons à la fenêtre (ou à l'application selon le cas) comme auparavant :

note: (itstool) path: section/title
en: Complete XML UI file for this example
fr: Fichier XML complet de l'interface utilisateur de cet exemple

note: (itstool) path: section/title
en: Complete Python file for this example
fr: Fichier Python complet de cet exemple

note: (itstool) path: section/title
en: Mnemonics and Accelerators
fr: Mnémoniques et raccourcis clavier

note: (itstool) path: section/p
en: Labels may contain mnemonics. Mnemonics are underlined characters in the label, used for keyboard navigation. Mnemonics are created by placing an underscore before the mnemonic character. For example "_File" instead of just "File" in the menubar.ui label attribute.
fr: Les étiquettes peuvent contenir des mnémoniques. Les mnémoniques sont les caractères soulignés dans l'étiquette et sont utilisés pour se déplacer à l'aide des touches du clavier. Par exemple, « _Fichier » au lieu de seulement « Fichier » dans l'attribut barredemenu.ui de l'étiquette.

note: (itstool) path: section/p
en: The mnemonics are visible when you press the <key>Alt</key> key. Pressing <keyseq><key>Alt</key><key>F</key></keyseq> will open the <gui>File</gui> menu.
fr: Vous pouvez voir les mnémoniques en appuyant sur la touche <key>Alt</key>. Pour ouvrir le menu <gui>Fichier</gui>, appuyez sur la combinaison de touches <keyseq><key>Alt</key><key>F</key></keyseq>.

note: (itstool) path: section/p
en: Accelerators can be explicitly added in the UI definitions. For example, it is common to be able to quit an application by pressing <keyseq><key>Ctrl</key><key>Q</key></keyseq> or to save a file by pressing <keyseq><key>Ctrl</key><key>S</key></keyseq>. To add an accelerator to the UI definition, you simply need add an "accel" attribute to the item.
fr: Des raccourcis clavier peuvent être explicitement ajoutés aux définitions de l'interface utilisateur. Il est par exemple usuel de pouvoir quitter une application en appuyant sur la combinaison <keyseq><key>Ctrl</key><key>Q</key></keyseq> ou enregistrer un fichier avec <keyseq><key>Ctrl</key><key>S</key></keyseq>. Pour ajouter un raccourci clavier à la définition de l'interface, ajoutez simplement un attribut « accel » à l'élément.

note: (itstool) path: section/title
en: Translatable strings
fr: Chaînes de caractères traduisibles

note: (itstool) path: item/p
en: Now we will create the .vala file and use GtkBuilder to import the <file>menubar.ui</file> we just created.
fr: Créons maintenant le fichier .vala et utilisons GtkBuilder pour importer le fichier <file>barredemenu.ui</file> que nous venons de faire.

note: (itstool) path: section/p
en: Now, compile the vala file, and run it. The application should look like the picture at the top of this page.
fr: Maintenant, compilez le fichier vala et lancez-le. L'application devrait ressembler à l'image en haut de cette page.

note: (itstool) path: section/p
en: Following this pattern, you can now add a <code>Copy</code> and a <code>Paste</code> item to the <code>Edit</code> submenu, and an <code>About</code> item to the <code>Help</code> submenu. We will hold off on adding items to the <link xref="menubar.vala#choices">Choices submenu</link> until further in the tutorial.
fr: En suivant ce modèle, ajoutez les éléments <code>Copier</code> et <code>Coller</code> au SousMenu <code>Édition</code> et un élément <code>À propos</code> au SousMenu <code>Aide</code>. Nous allons attendre pour ajouter des éléments au SousMenu <link xref="menubar.vala#choices">Choix</link> d'être un peu plus loin dans ce guide.

note: (itstool) path: note/p
en: You do not need to recompile the vala program if you only made changes to the UI file. Just run your previously compiled application, and the UI changes will be reflected.
fr: Il es inutile de recompiler le programme vala si vous n'avez apporté des modifications qu'au fichier barredemenu.ui. Éxecutez seulement votre application compilée précédemment et les modifications dans l'interface utilisateur vont être prises en compte.

note: (itstool) path: section/p
en: This is a three step process.
fr: Ceci est un processus en trois étapes.

note: (itstool) path: item/p
en: First we create the ActionEntry array in the MyApplication class. An ActionEntry consists of:
fr: Premièrement, créons la matrice ActionEntry dans la classe MyApplication. Une ActionEntry se compose :

note: (itstool) path: item/p
en: the "action name" (mandatory)
fr: du nom « action name » (obligatoire)

note: (itstool) path: item/p
en: the callback function to connect to the "activate" signal of the action (if applicable)
fr: de la fonction de rappel pour connecter le signal « activate » à l'action (si applicable)

note: (itstool) path: item/p
en: the type of the parameter that must be passed to the activate function for the action (if applicable)
fr: du type de paramètre qui doit être transmis à la fonction activate pour l'action (si applicable)

note: (itstool) path: item/p
en: the initial state for this action (if applicable)
fr: de l'état initial de cette action (si applicable)

note: (itstool) path: item/p
en: the callback to connect to "change-state" signal (if applicable)
fr: du rappel à connecter au signal « change-state » (si applicable)

note: (itstool) path: item/p
en: Second, we create the callback functions the actions are connected to.
fr: Deuxièmement, nous créons les fonctions de rappel qui sont connectées aux actions.

note: (itstool) path: item/p
en: And lastly, we connect the menu items to the actions in the XML file by adding the "action" attribute:
fr: Et troisièmement, nous connectons les éléments du menu aux actions dans le fichier XML en y ajoutant l'attribut « action » :

note: (itstool) path: section/p
en: Lines 30 to 80 inclusive of the <link xref="menubar.vala#xml-code"/> demonstrate the XML code used to create the UI for <gui>Choices</gui> menu.
fr: Les lignes 30 à 80 inclues de <link xref="menubar.vala#xml-code"/> décrivent le code XML utilisé pour créer le menu <gui>Choix</gui> de l'interface utilisateur.

note: (itstool) path: section/title
en: Complete Vala file for this example
fr: Fichier vala complet de cet exemple

note: (itstool) path: section/title
en: Mnemonics
fr: Mnémoniques

note: (itstool) path: section/title
en: Accelerators
fr: Raccourcis clavier

note: (itstool) path: info/desc
en: A widget that shows a menu when clicked on
fr: Un élément graphique qui affiche un menu quand il est cliqué

note: (itstool) path: page/p
en: The GtkMenuButton widget is used to display a menu when clicked on. This menu can be provided either as a GtkMenu, or an abstract GMenuModel. The GtkMenuButton widget can hold any valid child widget. That is, it can hold almost any other standard GtkWidget. The most commonly used child is the provided GtkArrow.
fr: L'élément graphique GtkMenuButton sert à afficher un menu quand il est cliqué. Le menu peut provenir soit d'un GtkMenu, soit d'un GMenuModel abstrait. L'élément graphique GtkMenuButton peut contenir n'importe quel élément graphique enfant valide. Ceci dit, il peut contenir pratiquement n'importe quel autre GtkWidget standard. L'enfant le plus souvent utilisé est la flèche GtkArrow fournie.

note: (itstool) path: note/p
en: You need to be running GNOME 3.6 for the MenuButton to work.
fr: Pour que le MenuButton fonctionne, il vous faut avoir installé GNOME 3.6

note: (itstool) path: info/desc
en: A simple program using WebKitGTK+ and the DOM.
fr: Un programme simple utilisant WebKitGTK+ et DOM.

note: (itstool) path: item/p
en: How to display a web page with WebKit.
fr: comment afficher une page Web avec Webkit,

note: (itstool) path: item/p
en: How to manipulate the contents of a web page using WebKit's DOM functions.
fr: comment manipuler le contenu d'une page Web en utilisant les fonctions DOM de WebKit.

note: (itstool) path: synopsis/p
en: This tutorial assumes you are familiar with the C programming language and have a basic understanding of GTK+, including how to create and place widgets and how to connect callback functions to signals. See <link xref="image-viewer.c"/> to learn the basics of GTK+.
fr: Ce tutoriel suppose que vous soyez familier avec le langage de programmation C et que vous possédiez les bases nécessaires à la compréhension de GTK+, y compris comment générer et placer des éléments graphiques et comment associer des fonctions de rappel à des signaux. Consultez <link xref="image-viewer.c"/> pour apprendre les bases de GTK+.

note: (itstool) path: section/p
en: The GNOME platform includes WebKitGTK+, built on top of the powerful WebKit HTML framework. WebKit is used throughout GNOME, not just to view web pages on the Internet, but also to create rich user interfaces that can be easily styled with CSS.
fr: La plateforme GNOME inclut WebKitGTK+, bâti sur le puissant environnement HTML WebKit. WebKit est utilisé partout dans GNOME, pas seulement pour afficher des pages Web sur internet, mais aussi pour créer de riches interfaces utilisateur qui peuvent être facilement stylisées par CSS.

note: (itstool) path: section/p
en: In this tutorial, you will create a simple message board using WebKit. The message board will allow you to enter some text and have it added to a list of messages in HTML. Before you begin, you need to set up a project in Anjuta.
fr: Dans ce tutoriel vous allez créer un simple visionneur de messages en utilisant Webkit. Ce visionneur de messages vous permettra de saisir du texte et de l'ajouter à une liste de messages en HTML. Avant de débuter, vous devez créer un projet dans Anjuta.

note: (itstool) path: item/p
en: Select <gui>GTK+ (simple)</gui> on the <gui>C</gui> tab, and click <gui>Continue</gui>.
fr: Sélectionnez <gui>GTK+ (simple)</gui> dans l'onglet <gui>C</gui> et cliquez sur <gui>Continuer</gui>.

note: (itstool) path: item/p
en: Fill out your details on the <gui>Basic information</gui> page. Use <input>message-board</input> for the project name. Click <gui>Continue</gui>.
fr: Renseignez les champs de la page <gui>Informations générales</gui>. Mettez <input>message-board</input> comme nom de projet et cliquez sur <gui>Continuer</gui>.

note: (itstool) path: item/p
en: Disable the <gui>Use GtkBuilder for user interface</gui> option as this tutorial builds the user-interface manually.
fr: Désactivez l'option <gui>Utiliser GtkBuilder pour l'interface utilisateur</gui> car ce tutoriel construit l'interface manuellement.

note: (itstool) path: item/p
en: You need to tell Anjuta you're using WebKitGTK+ on this project. On the <gui>Project options</gui> page, select <gui>Configure external packages</gui>. Click <gui>Continue</gui>. On the <gui>Configure external packages</gui> page, check <gui>webkitgtk-3.0</gui>.
fr: Vous devez indiquer à Anjuta que vous utilisez WebKitGTK+ dans ce projet. Sur la page <gui>Options du projet</gui>, sélectionnez l'option <gui>Configuration des paquets externes</gui>. Cliquez sur <gui>Continuer</gui>. Sur la page <gui>Configuration des paquets externes</gui>, cochez <gui>webkitgtk-3.0</gui>.

note: (itstool) path: section/p
en: After you finish the new project assistant, open the file <file>src/main.c</file> from either the <gui>Project</gui> or the <gui>File</gui> tab. Anjuta will have filled this in with some basic GTK+ code from its templates. Since you are creating a WebKit project, you first need to include the WebKit headers. After the line that includes <code>gtk/gtk.h</code>, add the following line:
fr: Une fois terminé avec l'assistant de nouveau projet, ouvrez le fichier <file>src/main.c</file> depuis l'onglet <gui>Projet</gui> ou l'onglet <gui>Fichiers</gui>. Anjuta l'a rempli avec du code GTK+ basique à partir d'un modèle. Comme vous êtes en train de créer un projet WebKit, il vous faut avant tout y inclure les entêtes WebKit. Après la ligne contenant <code>gtk/gtk.h</code>, ajoutez cette ligne :

note: (itstool) path: section/p
en: Verify that everything works by building what you have so far. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> or just press <keyseq><key>Shift</key><key>F7</key></keyseq>. The first time you build, you will be asked for some configure options. Just accept the defaults and click <gui>Execute</gui>.
fr: Vérifiez que tout fonctionne en construisant ce que vous avez déjà. Cliquez sur <guiseq><gui>Construire</gui><gui>Construire le projet</gui></guiseq>, ou appuyez sur <keyseq><key>Maj</key><key>F7</key></keyseq>. À la première construction, il vous est demandé quelques options de configuration. Acceptez celles qui vous sont proposées par défaut, et cliquez sur <gui>Exécuter</gui>.

note: (itstool) path: section/title
en: Lay out your window and web view
fr: Mise en forme de votre fenêtre et de votre affichage Web

note: (itstool) path: section/p
en: Now that you can show a window, it's time to start working with WebKit. For this tutorial, you'll create a text entry and a web view and pack them both into a window. Find the function <code>create_window</code> and replace it with the following:
fr: Maintenant que vous savez afficher une fenêtre, vous pouvez commencer à travailler avec WebKit. Pour les besoins de ce tutoriel, vous allez créer un champ texte ainsi qu'une vue Web et les placer dans une fenêtre. Trouvez la fonction <code>create_window</code> et remplacez-la par ce qui suit :

note: (itstool) path: section/p
en: You first create a <code>GtkWindow</code> object and set its title and default size. You also connect the <code>gtk_main_quit</code> function to the <code>delete-event</code> signal. The <code>delete-event</code> signal is emitted when the window is closed. The <code>gtk_main_quit</code> function is part of GTK, and it quits the application.
fr: Commencez par générer un objet <code>GtkWindow</code> et donnez-lui un titre et des dimensions par défaut. Il vous faut aussi connecter la fonction <code>gtk_main_quit</code> au signal <code>delete-event</code>. Le signal <code>delete-event</code> est émis lors de la fermeture de la fenêtre. La fonction <code>gtk_main_quit</code> fait partie de GTK et elle ferme l'application.

note: (itstool) path: section/p
en: You then create a vertical box and add it to the window. A window can only hold a single child widget, so you need to use a box to add multiple widgets. The second argument to <code>gtk_box_new</code> sets the amount of padding (in pixels) between each child, and the next line puts a six-pixel border around the entire thing.
fr: Ensuite créez une boîte verticale et ajoutez-la à la fenêtre. Une fenêtre ne peut contenir qu'un seul élément graphique enfant, il faut donc utiliser une boîte pour en ajouter plusieurs. Le second argument de <code>gtk_box_new</code> définit la largeur des marges (en pixels) entre chaque enfant et la ligne suivante ajoute une bordure de six pixels autour du tout.

note: (itstool) path: section/p
en: You next create a <code>GtkEntry</code> object and pack it into the box. The third and fourth arguments to <code>gtk_box_pack_start</code> specify that the entry shouldn't take up any extra space the box has available. The fourth argument is the amount of padding you want around the entry. In this case, you set the padding to zero, because you're allowing the box to handle all the padding.
fr: Il vous faut ensuite générer un objet <code>GtkEntry</code> et le placer dans la boîte. Les troisième et quatrième arguments de <code>gtk_box_pack_start</code> précisent que l'entrée ne doit pas occuper plus d'espace que la boîte n'en dispose. Le quatrième argument représente la largeur des marges souhaitée autour de l'entrée. Dans ce cas, définissez la largeur des marges à zéro, car vous autorisez la boîte à remplir tout l'espace libre.

note: (itstool) path: section/p
en: Before you add a web view, you have to create a scrolled window to put it inside of. The scrolled window will place scrollbars on the right and bottom when necessary, and prevent your web view from filling your entire screen. This time, you pass <code>TRUE</code> and <code>TRUE</code> to <code>gtk_box_pack_start</code> to allow the scrolled window (and thus, the web view) to use any extra space available in the box.
fr: Avant d'ajouter une vue Web, vous devez créer une fenêtre avec barres de défilement pour la contenir. Cette fenêtre fera apparaître des barres de défilement à droite et en bas si nécessaire, évitant ainsi à votre vue Web de remplir tout votre écran. Cette fois, transmettez <code>TRUE</code> et <code>TRUE</code> à <code>gtk_box_pack_start</code> pour autoriser la fenêtre de défilement (et donc la vue Web) à occuper tout l'espace supplémentaire disponible dans la boîte.

note: (itstool) path: section/p
en: Finally, you create a <code>WebKitWebView</code> and add it to the scrolled window. Then load a very basic HTML page into the web view by calling <code>webkit_web_view_load_string</code> with the following arguments:
fr: Enfin, vous créez un <code>WebKitWebView</code> et l'ajoutez à la fenêtre de défilement. Chargez ensuite une page HTML basique dans la vue Web en appelant <code>webkit_web_view_load_string</code> avec les arguments suivants :

note: (itstool) path: item/p
en: The view itself. Because <code>view</code> is typed as a <code>GtkWidget*</code>, you have to use <code>WEBKIT_WEB_VIEW</code> to safely cast the object.
fr: La vue en elle-même. Comme <code>view</code> est saisi sous forme de <code>GtkWidget*</code>, il vous faut utiliser <code>WEBKIT_WEB_VIEW</code> pour intégrer l'objet.

note: (itstool) path: item/p
en: The simplest HTML file you could possibly write.
fr: Le plus simple fichier HTML que vous pourriez écrire.

note: (itstool) path: item/p
en: The MIME type of the content you provided. In this case, you're using plain HTML.
fr: Le type MIME du contenu que vous avez fourni. Dans ce cas vous utilisez du HTML simple.

note: (itstool) path: item/p
en: The character encoding of the content you provided. Although you only used ASCII characters, it's a good idea to specify UTF-8. UTF-8 is used as the default encoding throughout the GNOME platform.
fr: Le type de codage de caractères du contenu que vous avez fourni. Bien que vous n'ayez probablement utilisé que des caractères ASCII, c'est une bonne pratique de spécifier UTF-8, car c'est le codage par défaut utilisé dans toute la plateforme GNOME.

note: (itstool) path: item/p
en: The base URI. You don't need it in this simple example, but you might want to provide a <sys>file:</sys> URI if you add images or other features where you want to use relative URI references.
fr: L'URI de base. Vous n'en avez pas besoin dans cet exemple, mais vous pourriez fournir un URI <sys>file:</sys> pour ajouter des images ou d'autres choses pour lesquelles vous devrez utiliser les références d'URI correspondantes.

note: (itstool) path: note/p
en: Every time you add a widget, you have to call <code>gtk_widget_show</code> on it for it to be visible. If you call <code>gtk_widget_show_all</code> on a container widget like a <code>GtkBox</code>, GTK+ will automatically show all the widgets inside the container, to any depth. Sometimes you don't want to call <code>gtk_widget_show_all</code>, such as when you want to dynamically hide and show some widgets in response to events.
fr: Chaque fois que vous ajoutez un élément graphique, vous devez appeler <code>gtk_widget_show</code> pour le rendre visible. Si vous appelez <code>gtk_widget_show_all</code> sur un conteneur comme une <code>GtkBox</code>, GTK+ montre automatiquement tous les éléments graphiques qui sont à l'intérieur quelque soit leur altitude (depth). Parfois, vous ne voulez pas appeler <code>gtk_widget_show_all</code>, comme quand vous souhaitez faire apparaître ou disparaître dynamiquement des éléments graphiques en réponse à des événements.

note: (itstool) path: section/p
en: Finally, you have to call <code>gtk_widget_show_all</code> on the box. Otherwise, none of the widgets you created will be visible. (The window is shown in the <code>main</code> function with <code>gtk_widget_show</code>.)
fr: Enfin, vous devez appeler <code>gtk_widget_show_all</code> sur la boîte. Sinon, aucun des éléments graphiques créés n'est visible (la fenêtre est affichée dans la fonction <code>main</code> avec <code>gtk_widget_show</code>).

note: (itstool) path: section/p
en: Build and run the message board again. You should see a window with a text entry and a web view. It doesn't do anything yet because the text entry and the web view don't know anything about each other.
fr: Construisez et exécutez le visionneur de messages une nouvelle fois. Vous devez voir apparaître une fenêtre contenant du texte et une vue Web. Pour l'instant, il ne se passe encore rien, car le champ texte et la vue Web ne savent rien l'un sur l'autre.

note: (itstool) path: section/title
en: Hook up signals
fr: Signaux de connexion

note: (itstool) path: section/p
en: Now you want to make the message board actually <em>do</em> something when you enter text into the text entry. To do this, connect a callback function to the <code>activate</code> signal of <code>entry</code>. GTK+ emits the <code>activate</code> signal whenever the user presses <key>Enter</key> in the entry. Add the following into <code>create_window</code>, anywhere after both <code>entry</code> and <code>view</code> have been defined:
fr: Maintenant, vous allez faire en sorte que le visionneur de messages <em>fasse</em> quelque chose quand vous saisissez du texte dans le champ de texte. Pour ce faire, connectez une fonction de rappel au signal <code>activate</code> de l'élément <code>entry</code>. GTK+ émet le signal <code>activate</code> à chaque fois que l'utilisateur appuie sur la touche <key>Entrée</key> dans le champ. Ajoutez ceci dans <code>create_window</code>, n'importe où après la définition de <code>entry</code> et <code>view</code> :

note: (itstool) path: section/p
en: You then have to actually define <code>entry_activate_cb</code>. Define it as follows, anywhere above <code>create_window</code>:
fr: Vous devez ensuite définir <code>entry_activate_cb</code> de la façon suivante, n'importe où au-dessus de <code>create_window</code> :

note: (itstool) path: section/p
en: The first thing you do is get a <code>WebKitDOMDocument</code> object that represents the HTML document displayed in <code>view</code>. The DOM classes and methods in WebKit allow you to inspect and manipulate the HTML document, and work very similarly to the DOM APIs you might already know from JavaScript.
fr: La première chose à faire est d'obtenir un objet <code>WebKitDOMDocument</code> qui représente le document HTML affiché dans <code>view</code>. Les classes et les méthodes DOM de WebKit vous permettent d'examiner et de manipuler le document HTML et fonctionnent d'une façon très similaire aux API DOM de JavaScript que vous connaissez peut-être déjà.

note: (itstool) path: section/p
en: Once you have the document, you want to get the <code>body</code> element so that you can add <code>div</code> elements to it. The <code>webkit_dom_document_query_selector</code> function lets you find an element in the document using CSS selectors. This keeps you from having to write tedious loops to traverse the document.
fr: Une fois que vous avez le document, il vous faut obtenir l'élément <code>body</code> pour pouvoir y ajouter des éléments <code>div</code>. La fonction <code>webkit_dom_document_query_selector</code> vous permet de trouver un élément dans le document en utilisant des sélecteurs CSS. Ceci vous évite de fastidieux aller-retour à travers le document.

note: (itstool) path: section/p
en: Next, you create a new <code>div</code> element to hold the message. Every element you create has to be attached to a document, so the function to create an element takes the <code>WebKitDOMDocument</code> as its first arguments. You then set the text content of the element to the contents of the text entry. Because <code>gtk_entry_get_text</code> returns a <code>const gchar*</code>, you don't have to free the result.
fr: Puis, vous créez un nouveau bloc <code>div</code> pour contenir le message. Chaque élément que vous créez doit être attaché à un document ; ainsi la fonction pour créer un élément prend le <code>WebKitDOMDocument</code> comme premier argument. Vous définissez ensuite le contenu texte de l'élément au contenu du champ texte. Étant donné que <code>gtk_entry_get_text</code> retourne un <code>const gchar*</code>, vous n'êtes pas obligé de libérer le résultat.

note: (itstool) path: section/p
en: Finally, you append the new <code>div</code> element to the body and clear out the text entry so you can type something new. Build and run the program again and test it for yourself.
fr: Enfin, vous devez ajouter le nouveau bloc <code>div</code> après le bloc <code>body</code> et effacer le champ texte pour pouvoir y saisir quelque chose d'autre. Construisez et exécutez le programme à nouveau et testez-le.

note: (itstool) path: section/title
en: Make it look better with CSS
fr: Le rendre plus joli avec du CSS

note: (itstool) path: section/p
en: At this point, your program is completely functional, but not very pretty. You can style the message display with CSS, just like you can with any other HTML page. There are many ways you could attach some CSS to the page: You could add it in the initial HTML document. You could inline it in the <code>style</code> attribute of the <code>div</code> elements. You could even programmatically construct it using the DOM APIs.
fr: À ce stade, votre programme est tout à fait fonctionnel, mais le résultat pas très joli. Vous pouvez styliser votre affichage avec CSS, comme vous le feriez avec n'importe quelle autre page HTML. Il y a plusieurs façons d'attacher du CSS à votre page : vous pouvez l'ajouter au document HTML initial, vous pouvez l'incorporer dans l'attribut <code>style</code> des blocs <code>div</code>, ou encore le construire en le programmant à partir des API DOM.

note: (itstool) path: section/p
en: In this tutorial, you'll attach the CSS using the <code>user-stylesheet-uri</code> property of the <code>WebKitWebSetting</code> object attached to your web view. In a more complete application, you would want to save and load your HTML file. Keeping the style information outside the actual HTML means that you can change the styling completely within your application, without having to change users' files. You would normally just install a file along with your application, but just to keep everything in one file for this demo, we'll use a trick called a data URI. First, define the CSS as a static string near the top of your file.
fr: Dans ce tutoriel, vous allez ajouter du CSS en utilisant la propriété <code>user-stylesheet-uri</code> de l'objet <code>WebKitWebSetting</code> attachée à votre vue Web. Pour une application plus élaborée, il serait préférable d'enregistrer et de charger votre fichier HTML. Séparer les informations de style du vrai HTML conduit à pouvoir complètement changer de style dans votre application sans toucher aux fichiers des utilisateurs. Normalement, il faudrait juste installer un fichier avec votre application, mais pour cet exemple, et pour que tout soit dans un seul fichier, nous allons utiliser une astuce nommée un URI de données. Commencez par définir le CSS dans une chaîne de type « static » et placez-la près du début du fichier.

note: (itstool) path: section/p
en: All you have in this example are <code>div</code> elements inside a <code>body</code> element. If you created more complicated HTML, you could use whatever CSS is necessary. In fact, if you're comfortable with CSS, you should trying changing this to something you like better.
fr: Dans cet exemple, vous n'avez que des blocs <code>div</code> dans un élément <code>body</code>. Si vous créez un document HTML plus complexe, vous pouvez utiliser le code CSS dont vous avez besoin. En fait, si vous vous sentez à l'aise avec le CSS, vous pouvez essayer de modifier cette partie pour en faire ce qu'il vous plaît.

note: (itstool) path: section/p
en: To apply the CSS, you set the <code>user-stylesheet-uri</code> in the <code>create_window</code> function, anywhere after <code>view</code> has already been defined.
fr: Pour appliquer le CSS, placez <code>user-stylesheet-uri</code> n'importe où dans la fonction <code>create_window</code> après la définition de <code>view</code>.

note: (itstool) path: section/p
en: Also, make sure to add variable declarations for <code>tmp</code> and <code>css</code> to the top of <code>create_window</code>.
fr: Assurez-vous aussi d'ajouter les déclarations pour les variables <code>tmp</code> et <code>css</code> en haut de <code>create_window</code>.

note: (itstool) path: section/p
en: A data URI starts with <sys>data:</sys> and some information about the content type and how the data is encoded. The actual data follows after a comma, in this case encoded in Base64. Unlike other URI schemes like <sys>http:</sys>, <sys>ftp:</sys>, and <sys>file:</sys>, the <sys>data:</sys> URI scheme doesn't specify where to find a file to load. Rather, it gives the entire contents of the file.
fr: Un URI de données commence par <sys>data:</sys>, quelques informations sur le type de contenu et par la façon dont les données sont codées. Les vraies données suivent après une virgule et dans notre cas sont codées en Base64. Contrairement à d'autres protocoles d'URI, comme <sys>http:</sys>, <sys>ftp:</sys> et <sys>file:</sys>, l'URI <sys>data:</sys> ne spécifie pas où trouver le fichier à charger. Il fournit par contre le contenu complet du fichier.

note: (itstool) path: section/p
en: The code above first encodes your CSS definitions in Base64, then combines that with a fixed string to create a data URI. The <code>g_strconcat</code> function can take any number of string arguments and concatenate them all together, so you have to pass <code>NULL</code> as the final argument so it knows when to stop. And don't forget to free those temporary strings after you set the stylesheet property.
fr: Le programme ci-dessus code d'abord vos définitions CSS en Base64, puis les combine dans une chaîne constante pour générer un URI de données. La fonction <code>g_strconcat</code> peut prendre un nombre infini d'arguments de type chaîne de caractères et les assemble. Par conséquent il vous faut mettre <code>NULL</code> comme dernier argument pour lui indiquer où s'arrêter. N'oubliez pas de libérer ces chaînes temporaires après avoir défini la propriété de la feuille de style.

note: (itstool) path: section/p
en: Build and run the program again. It should now work exactly the same as at the end of the last section, except the messages will be nicely styled with a border and a subtle background gradient.
fr: Construisez et exécutez à nouveau le programme. Il doit maintenant fonctionner exactement de la même façon qu'à la fin du chapitre précédent, sauf que cette fois, les messages sont joliment stylisés avec une bordure et un gradient discret en arrière-plan.

note: (itstool) path: section/title
en: Learn more
fr: En savoir plus

note: (itstool) path: section/p
en: This tutorial showed you how to create a basic application using GTK+ and WebKit, including showing a document and manipulating its contents. To create a real application, you probably want to do a little bit more. Try adding features on your own. Here are a few ideas:
fr: Le but de ce tutoriel était de vous montrer comment créer une application basique avec GTK+ et WebKit, et également d'afficher un document et de manipuler son contenu. Pour créer une application réelle, vous voudrez probablement en faire un peu plus. Essayez d'ajouter vous-même d'autres fonctionnalités. Voici quelques idées :

note: (itstool) path: item/p
en: If you're comfortable with CSS, try changing the style of the message display. CSS is easy to get started with, but increasingly more powerful. There is a wealth of CSS tutorials on the Internet, and just about everything you can do on the web, you can do in this application.
fr: Si vous êtes à l'aise avec CSS, essayez de modifier le style d'affichage du message. Débuter avec le CSS est facile, mais en allant plus loin ça devient un objet plus puissant. Vous allez trouver plein de tutoriels CSS sur internet, et tous sont adaptables à cette application.

note: (itstool) path: item/p
en: Right now, you lose all your messages whenever you close the message board. Try saving the HTML contents after each post, and loading the saved file (if it exists) on startup.
fr: Pour l'instant, vous perdez tous vos messages chaque fois que vous fermez le visionneur de messages. Essayez d'enregistrer le contenu HTML après chaque message et d'ouvrir le fichier enregistré (s'il existe) au démarrage.

note: (itstool) path: item/p
en: If you keep your messages around for a long time, you'll start wondering when you posted them. Add a timestamp to each message when it's posted. You'll probably want to create some additional child <code>div</code> elements with different classes that you can style in the CSS.
fr: Si vous conservez vos messages pendant longtemps, un jour vous allez vous demander quand ils ont été postés. Ajoutez un horodatage à chaque message posté. Créez quelques blocs <code>div</code> enfants supplémentaires avec des classes différentes que vous pouvez styliser dans la feuille CSS.

note: (itstool) path: item/p
en: This program keeps messages around forever. Think about ways you could allow the user to delete messages. Perhaps you want messages to disappear automatically after they're too old, or after there are a certain number of messages before them. Or you could add a link in each message to delete it. You could even override the context menu when you right-click on a message. These features involve exploring WebKit's DOM API more.
fr: Ce programme conserve les messages pour toujours. Réfléchissez à une façon pour autoriser l'utilisateur à supprimer des messages. Peut-être en les faisant disparaître automatiquement lorsqu'ils sont trop vieux ou quand il y a un nombre défini de messages devant eux. Ou alors en ajoutant un lien à chaque message pour pouvoir le supprimer. Ou encore en redéfinissant le menu contextuel quand vous faites un clic-droit sur un message. Ces fonctions impliquent que vous exploriez davantage encore les API DOM de WebKit.

note: (itstool) path: info/desc
en: A message window
fr: Une fenêtre de message

note: (itstool) path: page/title
en: MessageDialog
fr: Boîte de dialogue de message

note: (itstool) path: page/p
en: A modal message dialog which can cause the world to explode.
fr: Une boîte de dialogue de message modal qui peut faire exploser le monde.

note: (itstool) path: info/desc
en: A popup message attached to a window
fr: Un message surgissant lié à une fenêtre

note: (itstool) path: page/p
en: A MessageDialog is a modal message dialog, which means a popup that you have to respond to before you get back to what you were doing in the window that it's attached to. This one can cause the world to explode (or at least it says that it can). To make the popup appear when you run this sample, click on "Message" inside of its application menu -- that's the menu that appears when you click on an application's name in the upper-left screen corner, next to Activities.
fr: Une BoiteDeDialogueDemessage contient un message modale surgissant auquel vous devez d'abord répondre avant de pouvoir retourner travailler dans la fenêtre à laquelle elle est liée. Elle peut faire exploser le monde (ou au moins elle le prétend). Pour faire apparaître le message surgissant quand vous exécutez cet exemple, cliquez sur « Message » dans le menu de son application : c'est le menu qui s'affiche quand vous cliquez sur le nom de l'application dans le coin supérieur gauche de l'écran, à côté de « Activités ».

note: (itstool) path: note/p
en: The difference between a MessageDialog and a <link xref="dialog.js">Dialog</link> is that a Dialog can contain whatever widgets and content you want to put in it, whereas a MessageDialog is just a convenient way to make popups appear with a basic message and buttons.
fr: La différence entre une BoiteDeDialogueDemessage et une <link xref="dialog.js">Boîte de dialogue</link> est que la boîte de dialogue peut contenir n'importe quel élément graphique ou contenu que vous souhaitez y mettre, alors que la BoiteDeDialogueDemessage est juste un moyen pratique de faire s'afficher un message basique surgissant avec des boutons.

note: (itstool) path: note/p
en: Before we call _buildUI to create the window and the widgets inside it, we need to call _initMenus, which tells GNOME to create the menu. We can put the actual code for _initMenus after the code for _buildUI, since it doesn't matter what order we put them in so long as _initMenus is called first in _onStartup.
fr: Avant d'appeler _buildUI pour créer la fenêtre et les éléments graphiques qu'elle contient, il nous faut appeler _initMenus, qui indique à GNOME de générer le menu. Nous pouvons mettre le code actuel pour _initMenus après le code pour _buildUI, car l'ordre n'a pas d'importance du moment que _initMenus est appelé en premier dans _onStartup.

note: (itstool) path: section/title
en: Creating the application's menu
fr: Création du menu de l'application

note: (itstool) path: section/p
en: Here, we build the <link xref="gmenu.js">GMenu</link> where we'll be putting the "Message" button which triggers the popup MessageDialog. The GMenu is the menu that appears when you click the application's name in the upper-left corner of the screen, next to the Activities menu. Our menu only has two options in it: Message, and Quit.
fr: Ici, nous construisons le <link xref="gmenu.js">GMenu</link> où nous mettons le bouton « Message » qui active la BoiteDeDialogueDemessage. le GMenu est le menu qui s'affiche quand vous cliquez sur le nom de l'application dans le coin supérieur gauche de l'écran, à côté de « Activités ». Notre menu ne contient que deux options : Message et Quit.

note: (itstool) path: section/title
en: Creating the MessageDialog
fr: Création de la BoiteDeDialogueDemessage

note: (itstool) path: section/p
en: To make our MessageDialog a popup attached to the main window, we set its modal property to true and set it to be "transient_for" _window. After that, we can set what kind of buttons it has and what kind of message it is (which determines what icon appears next to the message), and write out the text inside it, before connecting its "response" signal to the callback function which handles it.
fr: Pour que notre BoiteDeDialogueDemessage soit liée à la fenêtre principale, nous définissons sa propriété modale à vrai et la configurons comme une "transient_for" _window. Ensuite, nous définissons quel type de bouton et quel genre de message nous voulons y mettre (celui-ci va déterminer le type d'icône qui accompagnera le message). Enfin nous y saisissons le texte du message et connectons son signal « response » à la fonction de rappel qui le prend en charge.

note: (itstool) path: note/p
en: Here are some resources for making your own MessageDialogs:
fr: Voici quelques ressources pour bâtir vos propres BoiteDeDialogueDemessage

note: (itstool) path: section/p
en: This function takes two parameters, the MessageDialog and its response_id, both of which are automatically supplied (you don't have to manually pass them to it for it to work). Here we use a simple switch to change the "warning label"'s text, depending on which option you select. The DELETE_EVENT occurs if you press Escape to cancel the MessageDialog, instead of clicking OK or Cancel. Whatever you select, the popup is destroyed afterwards.
fr: Cette fonction prend deux paramètres : la BoiteDeDialogueDemessage et son identifiant response_id. Les deux sont fournis automatiquement (il n'y a pas besoins d'intervention manuelle pour que cela fonctionne). Ici, nous utilisons un interrupteur simple pour modifier le texte « warning label » en fonction de l'option sélectionnée. Le DELETE_EVENT se produit en appuyant sur la touche Échap pour annuler la BoiteDeDialogueDemessage au lieu de cliquer sur OK ou Cancel. Quel que soit votre choix, le message surgissant est détruit ensuite.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished MessageDialogExample class, and set the application running.
fr: Pour finir, nous créons un nouvel exemple de la classe MessageDialogExample terminée et nous démarrons l'application.

note: (itstool) path: page/p
en: A message dialog which prints messages on the terminal, depending on your choices.
fr: Une boîte de dialogue qui affiche les messages sur le terminal en fonction de vos choix.

note: (itstool) path: section/title
en: Useful methods for a MessageDialog widget
fr: Méthodes utiles pour un élément graphique BoiteDeDialogueDemessage

note: (itstool) path: item/p
en: In the constructor of MessageDialog we could set flags as <code>Gtk.DialogFlags.DESTROY_WITH_PARENT</code> (to destroy the messagedialog window when its parent window is destroyed) or as <code>Gtk.DialogFlags.MODAL</code> (no interaction with other windows of the application).
fr: Dans le constructeur de BoiteDeDialogueDemessage, nous pouvons définir les drapeaux à <code>Gtk.DialogFlags.DESTROY_WITH_PARENT</code> (pour la détruire si sa fenêtre parente est détruite), ou à <code>Gtk.DialogFlags.MODAL</code> (aucune interaction avec les autres fenêtres de l'application).

note: (itstool) path: item/p
en: In the constructor of MessageDialog we could set type as any of <code>Gtk.MessageType.INFO, Gtk.MessageType.WARNING, Gtk.MessageType.QUESTION, Gtk.MessageType.ERROR, Gtk.MessageType.OTHER</code> depending on what type of message we want.
fr: Dans le constructeur de BoiteDeDialogueDemessage, nous pouvons définir le type à <code>Gtk.MessageType.INFO, Gtk.MessageType.WARNING, Gtk.MessageType.QUESTION, Gtk.MessageType.ERROR, Gtk.MessageType.OTHER</code> en fonction du type de message voulu.

note: (itstool) path: item/p
en: In the constructor of MessageDialog we could set buttons as any of <code>Gtk.ButtonsType.NONE, Gtk.ButtonsType.OK, Gtk.ButtonsType.CLOSE, Gtk.ButtonsType.CANCEL, Gtk.ButtonsType.YES_NO, Gtk.ButtonsType.OK_CANCEL</code>, or any button using <code>add_button()</code> as in Gtk.Dialog.
fr: Dans le constructeur de BoiteDeDialogueDemessage, nous pouvons définir les boutons à <code>Gtk.ButtonsType.NONE, Gtk.ButtonsType.OK, Gtk.ButtonsType.CLOSE, Gtk.ButtonsType.CANCEL, Gtk.ButtonsType.YES_NO, Gtk.ButtonsType.OK_CANCEL</code>, ou n'importe quel bouton utilisant <code>add_button()</code> comme dans Gtk.Dialog.

note: (itstool) path: item/p
en: We could substitute the default image of the MessageDialog with another image using
fr: Nous pouvons substituer l'image par défaut de la BoiteDeDialogueDemessage par une autre avec

note: (itstool) path: item/p
en: <code>format_secondary_text("some secondary message")</code> sets a secondary message. The primary text becomes bold.
fr: La méthode <code>format_secondary_text(« messagesecondaire »)</code> définit un message secondaire. Le texte principal se met en gras.

note: (itstool) path: info/desc (itstool) path: page/title
en: The Model/View/Controller design
fr: Le concept Modèle/Vue/Contrôleur

note: (itstool) path: section/title
en: Overview
fr: Présentation

note: (itstool) path: section/p
en: Both the <link xref="treeview_simple_liststore.py">TreeView</link> and the <link xref="combobox.py">ComboBox</link> widgets are built on the <em>Model/View/Controller</em> design. The <em>Model</em> (an implementation of <code>Gtk.TreeModel</code>, usually <code>Gtk.TreeStore</code> or <code>Gtk.ListStore</code>) stores the data; the <em>View</em> (e.g. <code>Gtk.TreeView</code>, <code>Gtk.ComboBox</code>, or <code>Gtk.ComboBoxText</code>) gets change notifications and displays the content of the model. The <em>Controller</em>, finally, changes the state of the model (via some methods in the model's implementation - such as <code>append()</code> or <code>remove()</code>) and notifies the view of these changes (via signals like <code>"changed"</code>).
fr: Les deux éléments graphiques <link xref="treeview_simple_liststore.py">TreeView</link> et <link xref="combobox.py">BoiteCombinee</link> sont construits sur le concept <em>Modèle/Vue/Contrôleur</em>. Le <em>Modèle</em> (une implémentation de <code>Gtk.TreeModel</code>, habituellemnt soit <code>Gtk.TreeStore</code>, soit <code>Gtk.ListStore</code>) stocke les données ; la<em>Vue</em> (par ex. <code>Gtk.TreeView</code>, <code>Gtk.ComboBox</code>, ou <code>Gtk.ComboBoxText</code>) obtient les notifications de modifications et affiche le contenu du modèle. Enfin, le <em>Contrôleur</em> modifie l'état du modèle (à l'aide de méthodes dans l'implémentation du modèle, comme <code>append()</code>, ou <code>remove()</code>) et indique à la Vue ces modifications (à l'aide de signaux comme <code>"changed"</code>).

note: (itstool) path: section/title
en: The Model
fr: Le Modèle

note: (itstool) path: section/p
en: The main difference between the two main implementations of <code>Gtk.TreeModel</code> is that <code>Gtk.ListStore</code> contains simple rows of data without children, whereas <code>Gtk.TreeStore</code> also contains rows of data, but each row may have child rows (which in turn can have child rows, and so on).
fr: La principale différence entre les deux implémentations principales de <code>Gtk.TreeModel</code> est que <code>Gtk.ListStore</code> ne contient que des lignes de données sans enfant, alors que <code>Gtk.TreeStore</code> contient aussi des lignes de données mais que chacune d'elle peut contenir des lignes enfants (qui à leur tour peuvent aussi contenir des lignes enfants et ainsi de suite).

note: (itstool) path: section/p
en: The data in the Model can be retrieved or modified using the tree iter and column index, or <code>Gtk.TreeIter</code>, or <code>Gtk.TreePath</code>.
fr: Les données du modèle peuvent être supprimées ou modifiées avec l'itérateur arborescent et l'indexe de la colonne, ou avec <code>Gtk.TreeIter</code>, ou <code>Gtk.TreePath</code>.

note: (itstool) path: section/p
en: As with Python's built-in list object you can use <code>len()</code> to get the number of rows and use slices to retrieve or set values. Otherwise, the method <code>append()</code> returns a <code>Gtk.TreeIter</code> instance, which points to the location of the newly inserted row. You can also retrieve a <code>Gtk.TreeIter</code> by calling <code>get_iter()</code>.
fr: Comme avec l'objet liste intégré dans Python, vous pouvez obtenir le nombre de lignes avec <code>len()</code> et utiliser des segments pour récupérer ou définir des valeurs. D'une autre façon, la méthode <code>append()</code> renvoie un exemple de <code>Gtk.TreeIter</code> qui pointe vers l'emplacement de la ligne qui vient d'être insérée. L'appel à la fonction <code>get_iter()</code> récupère aussi un <code>Gtk.TreeIter</code>.

note: (itstool) path: section/p
en: As <code>Gtk.ListStore</code> contains only one level, i.e. nodes do not have any child nodes, a path is essentially the index of the row you want to access. In the case of <code>Gtk.TreeStore</code>, a path is a list of indexes or a string. The string form is a list of numbers separated by a colon. Each number refers to the offset at that level. Thus, the path <code>"0"</code> refers to the root node and the path <code>"2:4"</code> refers to the fifth child of the third node.
fr: Comme <code>Gtk.ListStore</code> n'a qu'un seul niveau, c-à-d. les nœuds n'ont aucun nœud enfant, un chemin est essentiellement représenté par l'index de la ligne à laquelle vous souhaitez accéder. En ce qui concerne <code>Gtk.TreeStore</code>, un chemin est représenté par une liste d'indexes ou une chaîne de caractères. La chaîne se présente sous la forme d'une liste de nombres séparés par une colonne. Chaque nombre se réfère au décalage à ce niveau. Donc, le chemin <code>"0"</code> se réfère au nœud racine et le chemin <code>"2:4"</code> se réfère au cinquième enfant du troisième nœud.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeModel</code>:
fr: Méthodes utiles pour un <code>Gtk.TreeModel</code> :

note: (itstool) path: item/p
en: <code>get_iter(path)</code> returns a <code>Gtk.TreeIter</code> instance pointing to <code>path</code>. This is expected to be a colon-separated list of numbers, or a tuple. For example, the string <code>"10:4:0"</code> is equivalent to the tuple <code>(10, 4, 0)</code>, as both would create a path of depth 3 pointing to the 11th child of the root node, the 5th child of that 11th child, and the 1st child of that 5th child.
fr: La méthode <code>get_iter(chemin)</code> renvoie un exemple de <code>Gtk.TreeIter</code> qui pointe vers le <code>chemin</code>. Ce chemin est soit une liste de nombres séparés par une colonne, soit un tuple. Par exemple, la chaîne de caractères <code>"10:4:0"</code> est équivalente au tuple <code>(10, 4, 0)</code>, car tous deux créent un chemin de niveau 3 pointant vers le 11ème enfant du nœud racine, le 5ème enfant de cet 11ème enfant et le 1er enfant de ce 5ème enfant.

note: (itstool) path: item/p
en: <code>iter_next(treeiter)</code> returns a <code>Gtk.TreeIter</code> instance pointing the node following treeiter at the current level or <code>None</code> if there is no next iter.
fr: La méthode <code>iter_next(TreeIter)</code> renvoie un exemple de <code>Gtk.TreeIter</code> qui pointe vers le nœud TreeIter suivant situé au même niveau, ou vers <code>None</code> s'il n'y a rien derrière.

note: (itstool) path: item/p
en: <code>iter_has_child(treeiter)</code> returns <code>True</code> if <code>treeiter</code> has children, <code>False</code> otherwise.
fr: La méthode <code>iter_has_child(TreeIter)</code> renvoie la valeur <code>vrai</code> si <code>TreeIter</code> a des enfants, ou <code>faux</code> dans le cas contraire.

note: (itstool) path: item/p
en: <code>iter_children(treeiter)</code> returns a <code>Gtk.TreeIter</code> instance pointing to the first child of <code>treeiter</code> or <code>None</code> if <code>treeiter</code> has no children.
fr: La méthode <code>iter_children(TreeIter)</code> renvoie un exemple de <code>Gtk.TreeIter</code> qui pointe vers le premier enfant de <code>TreeIter</code>, ou sur <code>None</code> si <code>TreeIter</code> n'a pas d'enfant.

note: (itstool) path: item/p
en: <code>get_iter_first()</code> returns a <code>Gtk.TreeIter</code> instance pointing to the first iterator in the tree (the one at the path <code>"0"</code>) or <code>None</code> if the tree is empty.
fr: La fonction <code>get_iter_first()</code> renvoie un exemple de <code>Gtk.TreeIter</code> qui pointe vers le premier itérateur arborescent (celui du chemin <code>"0"</code>) ou sur <code>None</code> si l'arborescence est vide.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.ListStore</code>:
fr: Méthodes utiles pour un <code>Gtk.ListStore</code> :

note: (itstool) path: item/p
en: <code>append(row)</code> appends a new row to this list store, where <code>row</code> can be a list of values for each column; <code>row</code> can also be omitted or <code>None</code>, and in that case an empty row will be appended. The method returns a <code>Gtk.TreeIter</code> pointing to the appended row.
fr: La méthode <code>append(ligne)</code> ajoute une nouvelle ligne à ce magasin liste, où <code>ligne</code> peut être une liste de valeurs pour chaque colonne ; <code>ligne</code> peut aussi être omis ou avoir la valeur <code>None</code> et dans ces cas une colonne vide est ajoutée. La méthode renvoie un <code>Gtk.TreeIter</code> qui pointe vers la ligne ajoutée.

note: (itstool) path: item/p
en: <code>remove(iter)</code> removes <code>iter</code> from the <code>Gtk.ListStore</code>, and returns <code>True</code> if the iter is valid, and <code>False</code> if the iter is not. After being removed, <code>iter</code> is set to be the next valid row.
fr: La méthode <code>remove(iter)</code> supprime l'<code>iter</code> du magasin <code>Gtk.ListStore</code> et renvoie la valeur <code>vrai</code> si l'itérateur est valide ou <code>faux</code> dans le cas contraire. Après sa suppression, l'<code>iter</code> est configuré pour devenir la prochaine ligne valide.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeStore</code>:
fr: Méthodes utiles pour un <code>Gtk.TreeStore</code> :

note: (itstool) path: item/p
en: <code>append(parent, row)</code> appends a new row to this tree store; <code>parent</code> must be a valid Gtk.TreeIter. If parent is not <code>None</code>, then it will append the new row after the last child of parent, otherwise it will append a row to the top level; <code>row</code> can be a list of values for each column, or it can be omitted or <code>None</code>; in this latter case an empty row will be appended. The method returns a <code>Gtk.TreeIter</code> pointing to the appended row.
fr: La méthode <code>append(parent, ligne)</code> ajoute une nouvelle ligne à ce magasin arborescent ; <code>parent</code> doit être un Gtk.TreeIter valide. Si la valeur du parent est différente de <code>None</code>, alors elle ajoute la nouvelle ligne après le dernier enfant du parent, sinon elle ajoute une ligne au premier niveau ; <code>ligne</code> peut être une liste de valeurs pour chaque colonne, ou alors peut être omis ou avoir la valeur <code>None</code> ; dans ce dernier cas, une colonne vide est ajoutée. La méthode renvoie un <code>Gtk.TreeIter</code> qui pointe vers la ligne ajoutée.

note: (itstool) path: section/title
en: The View: the TreeView case
fr: La Vue : le cas de la TreeView

note: (itstool) path: section/p
en: A Treeview shows the structure of children and parent items as a tree. See for instance <link xref="treeview_treestore.py">this example</link>.
fr: Une TreeView affiche la structure des éléments enfants et parents sous la forme des branches d'un arbre. Regardez cet <link xref="treeview_treestore.py">exemple</link>.

note: (itstool) path: section/p
en: The <code>Gtk.TreeViewColumn</code> is used to organize the vertical columns.
fr: La <code>Gtk.TreeViewColumn</code> est utilisée pour organiser les colonnes verticales.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeView</code>:
fr: Méthodes utiles pour une vue <code>Gtk.TreeView</code> :

note: (itstool) path: item/p
en: <code>set_model(model)</code> sets the model for this tree view. If this tree view already has a model set, it will remove it before setting the new model. If model is <code>None</code>, then it will unset the old model.
fr: La méthode <code>set_model(modele)</code> définit le modèle de cette vue arborescente. Si elle a déjà un modèle défini, la fonction le supprime avant de lui définir le nouveau. Si la valeur du modèle est <code>None</code>, la fonction supprime l'ancien modèle.

note: (itstool) path: item/p
en: <code>get_model()</code> returns the model this tree view is based on, <code>None</code> if the model is unset.
fr: La méthode <code>get_model()</code> renvoie le modèle sur lequel est construite cette vue arborescente, ou <code>None</code> si le modèle n'est pas défini.

note: (itstool) path: item/p
en: <code>append_column(column)</code> appends <code>column</code> to the list of columns.
fr: La méthode <code>append_column(colonne)</code> ajoute <code>colonne</code> à la liste de colonnes.

note: (itstool) path: item/p
en: <code>get_selection()</code> gets the <code>Gtk.TreeSelection</code> associated with this tree view.
fr: La méthode <code>get_selection()</code> récupère la sélection <code>Gtk.TreeSelection</code> associée à cette vue arborescente.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeViewColumn</code>:
fr: Méthodes utiles pour une <code>Gtk.TreeViewColumn</code> :

note: (itstool) path: item/p
en: <code>add_attribute(renderer, attribute, value)</code> adds an attribute mapping to this column. <code>attribute</code> is the parameter on <code>renderer</code> to be set from the <code>value</code>
fr: La méthode <code>add_attribute(renderer, attribut, valeur)</code> ajoute un mappage d'attribut à cette colonne. <code>attribut</code> est le paramètre du <code>renderer</code> à définir à partir de la valeur <code>valeur</code>

note: (itstool) path: item/p
en: <code>pack_start(renderer, expand)</code> packs <code>renderer</code> into the beginning of this column. If <code>expand</code> is <code>False</code>, then <code>renderer</code> is allocated no more space than it needs. Any unused space is divided evenly between cells for which expand is <code>True</code>.
fr: La méthode <code>pack_start(renderer, expand)</code> compresse le <code>renderer</code> au début de cette colonne. Si la valeur d'<code>expand</code> est <code>False</code>, alors il est alloué au <code>renderer</code> juste l'espace qui lui est nécessaire. Tout espace inutilisé est divisé à parts égales entre les cellules pour lesquelles la valeur est <code>True</code>.

note: (itstool) path: item/p
en: <code>pack_end(renderer, expand)</code> adds <code>renderer</code> to end of this column. If <code>expand</code> is <code>False</code>, then <code>renderer</code> is allocated no more space than it needs. Any unused space is divided evenly between cells for which <code>expand</code> is <code>True</code>.
fr: La méthode <code>pack_end(renderer, expand)</code> compresse le <code>renderer</code> à la fin de cette colonne. Si la valeur d'<code>expand</code> est <code>False</code>, alors il est alloué au <code>renderer</code> juste l'espace qui lui est nécessaire. Tout espace inutilisé est divisé à parts égales entre les cellules pour lesquelles la valeur est <code>True</code>.

note: (itstool) path: item/p
en: <code>set_sort_indicator(setting)</code> sets whether a little arrow is displayed in the column header; <code>setting</code> can either be <code>True</code> (indicator is shown) or <code>False</code>.
fr: La méthode <code>set_sort_indicator(setting)</code> définit s'il faut afficher une petite flèche dans l'en-tête de la colonne ; le <code>setting</code> possible peut être soit <code>True</code> (la flèche est visible), soit <code>False</code>.

note: (itstool) path: item/p
en: <code>set_sort_order(order)</code> changes the order by which the column is sorted; <code>order</code> can either be <code>Gtk.SortType.ASCENDING</code> or <code>Gtk.SortType.DESCENDING</code>.
fr: La méthode <code>set_sort_order(ordre)</code> modifie l'ordre de tri de la colonne ; l'<code>ordre</code> peut être soit <code>Gtk.SortType.ASCENDING</code>, soit <code>Gtk.SortType.DESCENDING</code>.

note: (itstool) path: section/title
en: The View: the ComboBox case
fr: La Vue : cas de l'élément graphique BoiteCombinee

note: (itstool) path: section/p
en: A <code>Gtk.ComboBox</code> allows for the selection of an item from a dropdown menu, see for instance <link xref="combobox.py">this example</link>. For a list of textual choices, one can also use the simpler <code>Gtk.ComboBoxText</code>. Both <code>Gtk.ComboBox</code> and <code>Gtk.ComboBoxText</code> can contain an entry.
fr: Une <code>Gtk.ComboBox</code> permet de sélectionner un élément à partir d'un menu déroulant, regardez <link xref="combobox.py">cet exemple</link>. Pour une liste de choix textuels, on peut aussi utiliser plus simplement un <code>Gtk.ComboBoxText</code>. Les deux peuvent contenir une entrée.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.ComboBox</code>:
fr: Méthodes utiles pour un élément graphique <code>Gtk.ComboBox</code> :

note: (itstool) path: item/p
en: The static method <code>new_with_entry()</code> creates a new empty <code>Gtk.ComboBox</code> with an entry; the static method <code>new_with_model(model)</code> creates a new one with the model initialized to <code>model</code>; and the static method <code>new_with_model_and_entry(model)</code> is a combination of the two.
fr: La méthode statique <code>new_with_entry()</code> crée une nouvelle BoiteCombinee <code>Gtk.ComboBox</code> avec une entrée ; la méthode statique <code>new_with_model(model)</code> en crée une nouvelle à partir du modèle initialisé à <code>model</code> ; et la méthode statique <code>new_with_model_and_entry(model)</code> est une combinaison des deux autres.

note: (itstool) path: item/p
en: <code>get_active_iter()</code> returns a <code>Gtk.TreeIter</code> pointing to the current active item. If no active item exists, <code>None</code> is returned.
fr: La méthode <code>get_active_iter()</code> renvoie un <code>Gtk.TreeIter</code> qui pointe vers l'élément actif actuel. S'il n'y en a pas, elle renvoie <code>None</code>.

note: (itstool) path: item/p
en: <code>set_model(model)</code> sets the model used by this combo box to be <code>model</code>, and it will unset a previously set model (if there is any). If <code>model</code> is <code>None</code>, then it will unset the model. Note that this function does not clear the cell renderers.
fr: La méthode <code>set_model(model)</code> définit le modèle utilisé par la boîte combinée à <code>model</code> et annule le modèle précédent s'il existait déjà. Si la valeur <code>model</code> est <code>None</code>, alors la fonction annule le paramétrage du modèle. Notez que cette fonction ne supprime pas les générateurs de rendu de cellules.

note: (itstool) path: item/p
en: <code>set_entry_text_column(text_column)</code> sets the model column which this combo box should use to get strings from to be <code>text_column</code>. The column <code>text_column</code> in the model of this combo box must be of type <code>str</code> (this is only relevant if this combo box has been created with the “has-entry” property set to True).
fr: La méthode <code>set_entry_text_column(text_column)</code> définit la colonne du modèle que cette boîte combinée doit utiliser pour que ses chaînes de caractères soient du type <code>text_column</code>. La colonne <code>text_column</code> dans ce modèle de boîte combinée doit être du type <code>str</code> (ceci n'est pertinent que si cette boîte combinée a été créée avec la propriété « has-entry » définie à True).

note: (itstool) path: item/p
en: <code>set_wrap_width(width)</code> sets the wrap width of this combo box to be <code>width</code>. The wrap width is basically the preferred number of columns when you want the popup to be layed out in a grid.
fr: La méthode <code>set_wrap_width(largeur)</code> définit la largeur du texte de cette boîte combinée à <code>largeur</code>. Basiquement, la largeur du texte est votre nombre préféré de colonnes quand vous voulez que le message surgissant soit placé dans une grille.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.ComboBoxText</code>:
fr: Méthodes utiles pour une boîte <code>Gtk.ComboBoxText</code> :

note: (itstool) path: item/p
en: The static method <code>new_with_entry()</code> creates a new empty <code>Gtk.ComboBoxText</code> with an entry.
fr: La méthode statique <code>new_with_entry()</code> crée une nouvelle <code>Gtk.ComboBoxText</code> vide avec une entrée.

note: (itstool) path: item/p
en: <code>append_text(text)</code> appends <code>text</code> to the list of strings stored in this combo box.
fr: La méthode <code>append_text(texte)</code> ajoute le <code>texte</code> à la liste des chaînes stockées dans cette boîte combinée.

note: (itstool) path: item/p
en: <code>get_active_text()</code> returns the currently active string in this combo box, or <code>None</code> if none is selected. If this combo box contains an entry, this function will return its contents (which will not necessarily be an item from the list).
fr: La méthode <code>get_active_text()</code> renvoie la chaîne active actuelle de cette boîte combinée, ou <code>None</code> si aucune chaîne n'est sélectionnée. Si la boîte combinée contient une entrée, la méthode renvoie son contenu (qui n'est pas nécessairement un élément de la liste).

note: (itstool) path: section/title
en: The View: the Cellrenderers
fr: La Vue : les Cellrenderers

note: (itstool) path: section/p
en: The View makes use of <code>Gtk.CellRenderer</code>s of various types to draw the data.
fr: La Vue se sert de <code>Gtk.CellRenderer</code> de différents types pour dessiner les données.

note: (itstool) path: section/p
en: Implementations of <code>Gtk.CellRenderer</code> and useful methods:
fr: Implémentations de <code>Gtk.CellRenderer</code> et méthodes utiles :

note: (itstool) path: item/p
en: <code>Gtk.CellRendererText</code> - renders text in a cell
fr: <code>Gtk.CellRendererText</code> - génère du texte dans une cellule

note: (itstool) path: item/p
en: <code>Gtk.CellRendererToggle</code> - renders a toggle or radio button in a cell. Useful methods:
fr: <code>Gtk.CellRendererToggle</code> - génère un bouton de basculement ou de radio dans une cellule. Méthodes utiles :

note: (itstool) path: item/p
en: <code>set_active(setting)</code> - activates or deactivates a cell renderer
fr: <code>set_active(setting)</code> - active ou désactive un générateur de rendu

note: (itstool) path: item/p
en: <code>get_active()</code> - returns whether the cell renderer is active
fr: <code>get_active()</code> - indique si le générateur de rendu est actif

note: (itstool) path: item/p
en: <code>set_radio(radio)</code> - if radio is <code>True</code>, the cell renderer renders a radio toggle (i.e. a toggle in a group of mutually-exclusive toggles); if <code>False</code>, it renders a check toggle (a standalone boolean option)
fr: <code>set_radio(radio)</code> - si la valeur radio est <code>True</code>, le générateur crée un bouton de radio inverseur (par ex. un inverseur d'un groupe mutuellement exclusif) ; si la valeur est <code>False</code>, il génère un inverseur de vérification (une option boléenne autonome)

note: (itstool) path: item/p
en: <code>get_radio()</code> - returns whether we are rendering radio toggles rather than checkboxes.
fr: <code>get_radio()</code> - indique si nous générons des boutons de basculement au lieu de cases à cocher.

note: (itstool) path: item/p
en: <code>Gtk.CellRendererPixbuf</code> - renders an image in a cell
fr: <code>Gtk.CellRendererPixbuf</code> - génère un rendu image dans une cellule

note: (itstool) path: item/p
en: <code>Gtk.CellRendererCombo</code> - renders text in a cell; but while <code>Gtk.CellRendererText</code> offers a simple entry to edit the text, <code>Gtk.CellRendererCombo</code> offers a <code>Gtk.ComboBox</code> widget to edit the text. It can be used with and without an associated Gtk.Entry widget, depending on the value of the “has-entry” property.
fr: <code>Gtk.CellRendererCombo</code> - génère un rendu texte dans une cellule ; mais, alors que <code>Gtk.CellRendererText</code> n'offre qu'une simple entrée pour modifier le texte, <code>Gtk.CellRendererCombo</code> offre un élément graphique <code>Gtk.ComboBox</code> pour la même action. Il peut être utilisé avec ou sans un élément graphique Gtk.Entry associé, en fonction de la propriété de la valeur « has-entry ».

note: (itstool) path: item/p
en: <code>Gtk.CellRendererProgress</code> - renders a numeric value as a progress bar in a cell; it can display a text on top of the progress bar
fr: <code>Gtk.CellRendererProgress</code> - génère une valeur numérique sous forme de barre de progression dans une cellule ; il peut afficher du texte au-dessus de la barre de progression

note: (itstool) path: item/p
en: <code>Gtk.CellRendererSpinner</code> - renders a spinning animation in a cell
fr: <code>Gtk.CellRendererSpinner</code> - génère l'animation d'un indicateur dans une cellule

note: (itstool) path: item/p
en: <code>Gtk.CellRendererSpin</code> - renders a spin button in a cell
fr: <code>Gtk.CellRendererSpin</code> - génère un bouton d'activité dans une cellule

note: (itstool) path: item/p
en: <code>Gtk.CellRendererAccel</code> - renders a keyboard accelerator in a cell
fr: <code>Gtk.CellRendererAccel</code> - génère un accélérateur de clavier dans une cellule

note: (itstool) path: section/title
en: The Controller: the Selection
fr: Le contrôleur : la sélection

note: (itstool) path: section/p
en: Most applications will need to not only deal with displaying data, but also receiving input events from users. To do this, simply get a reference to a selection object and connect to the <code>"changed"</code> signal.
fr: La plupart des applications doivent non seulement afficher des données, mais aussi réceptionner les événements émis par les utilisateurs. Pour faire cela, il faut tout simplement obtenir une référence pour un objet sélectionné et la connecter au signal « changed ».

note: (itstool) path: section/p
en: Then to retrieve data for the row selected:
fr: Ensuite, pour récupérer les données pour la colonne sélectionnée :

note: (itstool) path: item/p
en: <code>set_mode(type)</code> sets the type of selection, where type is one of
fr: La méthode <code>set_mode(type)</code> définit le type de sélection, où type est l'un des

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.NONE</code> - no selection is possible
fr: <code>Gtk.SelectionMode.NONE</code> - pas de sélection possible

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.SINGLE</code> - zero or one element may be selected
fr: <code>Gtk.SelectionMode.SINGLE</code> - zéro ou un élément peut être sélectionné

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.BROWSE</code> - exactly one element is selected. In some circumstances, such as initially or during a search operation, it’s possible for no element to be selected. What is really enforced is that the user can’t deselect a currently selected element except by selecting another element.
fr: <code>Gtk.SelectionMode.BROWSE</code> - exactement un élément est sélectionné. Dans certaines circonstances, comme au début ou pendant une opération de recherche, il est possible qu'il n'y ait aucun élément pouvant être sélectionné. Ce qui est réellement imposé, c'est l'impossibilité pour l'utilisateur de désélectionner un élément actuellement sélectionné sauf s'il en sélectionne un autre.

note: (itstool) path: item/p
en: <code>get_selected()</code> returns a tuple <code>(model, treeiter)</code>, where <code>model</code> is the current model and <code>treeiter</code> a <code>Gtk.TreeIter</code> pointing to the currently selected row, or None if no rows are selected. The method does not work if the selection mode is set to <code>Gtk.SelectionMode.MULTIPLE</code>; in that case, use <code>get_selected_rows()</code> instead, which Returns a list of <code>Gtk.TreePath</code> instances of all selected rows.
fr: La méthode <code>get_selected()</code> renvoie un tuple <code>(modele, TreeIter)</code>, où <code>modele</code> est le modèle actuel et <code>TreeIter</code> un <code>Gtk.TreeIter</code> qui pointe soit vers la ligne actuellement sélectionnée, soit vers None si aucune ligne n'est sélectionnée. La méthode ne marche pas si le type de sélection est défini à <code>Gtk.SelectionMode.MULTIPLE</code> ; dans ce cas, utilisez à la place la fonction <code>get_selected_rows()</code>, qui renvoie une liste d'exemples <code>Gtk.TreePath</code> de toutes les lignes sélectionnées.

note: (itstool) path: section/title
en: References
fr: Références

note: (itstool) path: info/desc
en: A Clutter image viewer
fr: Un visionneur d'images avec Clutter

note: (itstool) path: synopsis/p
en: For this example we will build a simple image viewer using Clutter. You will learn:
fr: Dans cet exemple, nous allons fabriquer un visionneur d'images simple avec Clutter. Vous apprendrez :

note: (itstool) path: item/p
en: How to size and position <code>ClutterActor</code>s
fr: comment dimensionner et positionner les <code>ClutterActor</code>,

note: (itstool) path: item/p
en: How to place an image in a <code>ClutterActor</code>
fr: comment placer une image dans un <code>ClutterActor</code>,

note: (itstool) path: item/p
en: How to do simple transitions using Clutter's animation framework
fr: comment faire des transitions simples avec la structure d'animation de Clutter,

note: (itstool) path: item/p
en: How to make <code>ClutterActor</code>s respond to mouse events
fr: comment faire réagir les <code>ClutterActor</code> aux événements de la souris,

note: (itstool) path: item/p
en: How to get file names from a directory
fr: et comment récupérer des noms de fichier depuis un répertoire.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is disabled as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.c">Guitar-Tuner</link> tutorial using the interface builder.
fr: Assurez-vous d'avoir désactivé <gui>Utiliser GtkBuilder pour l'interface utilisateur</gui> car nous allons créer l'interface utilisateur manuellement dans cet exemple. Consultez le tutoriel <link xref="guitar-tuner.c">Accordeur de guitare</link> si vous souhaitez savoir comment utiliser le constructeur d'interface GtkBuilder.

note: (itstool) path: item/p
en: Enable <gui>Configure external packages</gui>. On the next page, select <em>clutter-1.0</em> from the list to include the Clutter library in your project.
fr: Activez <gui>Configuration des paquets externes</gui>. Sur la page suivante, sélectionnez <em>clutter-1.0</em> dans la liste pour inclure la bibliothèque Clutter à votre projet.

note: (itstool) path: section/title
en: A look at Photo Wall
fr: Un aperçu du mur de photos

note: (itstool) path: section/p
en: Our image viewer presents the user with a wall of images.
fr: Notre visionneur d'images vous montre un mur de photos.

note: (itstool) path: section/p
en: When an image is clicked, it is animated to fill the viewing area. When the image having focus is clicked it is returned to its original position using an animation with the same duration of 500 milliseconds.
fr: Quand une image est cliquée, elle est animée pour remplir la zone d'affichage. Lorsque la photo qui possède le focus est cliquée, elle retourne à sa position d'origine en utilisant une animation qui dure également 500 millisecondes.

note: (itstool) path: section/title
en: Initial setup
fr: Configuration initiale

note: (itstool) path: section/p
en: The following code segment contains many of the defines and variables we will be using in the following sections. Use this as a reference for later sections. Copy this code to the beginning of <file>src/main.c</file>:
fr: La partie de code suivante contient beaucoup de définitions et de variables qui sont utilisées dans les sections suivantes. Servez-vous en comme référence. Copiez ce code au début du fichier <file>src/main.c</file> :

note: (itstool) path: section/title
en: Jumping into the code
fr: Immersion dans le code

note: (itstool) path: section/p
en: We will start by taking a look at the <code>main()</code> function as a whole. Then we'll discuss the other code sections in detail. Change the <file>src/main.c</file> to contain this <code>main()</code> function. You can delete the <code>create_window()</code> function as we don't need it in this example.
fr: Nous commencerons par analyser la fonction <code>main()</code> dans son ensemble. Ensuite nous discuterons des autres parties du programme en détail. Modifiez le fichier <file>src/main.c</file> pour qu'il contienne la fonction <code>main()</code>. Vous pouvez aussi supprimer la fonction <code>create_window()</code> car on n'en a plus besoin dans cet exemple.

note: (itstool) path: item/p
en: Line 4: <code>ClutterColor</code> is defined by setting the red, green, blue and transparency (alpha) values. The values range from 0-255. For transparency a value of 255 is opaque.
fr: Ligne 4 : configuration de <code>ClutterColor</code> en paramétrant les valeurs rouge, vert, bleu et celle de transparence (alpha). Les valeurs sont comprises entre 0 et 255. Pour la transparence, une valeur de 255 représente l'opacité.

note: (itstool) path: item/p
en: Line 7: You must initialize Clutter. If you forget to do this, you will get very strange errors. Be warned.
fr: Ligne 7 : vous devez initialiser Clutter. Attention, si vous oubliez de le faire, vous aurez de très étranges messages d'erreur. Vous êtes prévenu.

note: (itstool) path: note/p
en: A <code>ClutterStage</code> is the top-level <code>ClutterActor</code> onto which other <code>ClutterActor</code>s are placed.
fr: Un <code>ClutterStage</code> est le <code>ClutterActor</code> de premier niveau sur lequel les autres <code>ClutterActor</code> sont disposés.

note: (itstool) path: section/title
en: Setting up our image actors
fr: Mise en place de nos acteurs image

note: (itstool) path: note/p
en: In Clutter, an actor is the most basic visual element. Basically, everything you see is an actor.
fr: Dans Clutter, un acteur est l'élément visuel le plus élémentaire. En gros, tout ce que vous voyez est un acteur.

note: (itstool) path: section/p
en: In this section, we are going to take a closer look at the loop used for setting up the <code>ClutterActor</code>s that will display our images.
fr: Dans cette section, nous allons regarder plus en détail la boucle utilisée pour paramétrer les <code>ClutterActor</code> qui affichent nos images.

note: (itstool) path: section/title
en: Loading the images
fr: Chargement des images

note: (itstool) path: section/p
en: Let's take a short break from Clutter to see how we can get the file names from our image directory.
fr: Oublions un court instant Clutter pour regarder comment nous pouvons obtenir les noms des fichiers contenus dans notre répertoire d'images.

note: (itstool) path: section/title
en: Set up the actors
fr: Mise en place des acteurs

note: (itstool) path: section/p
en: We now take a look at the sizing and positioning of <code>ClutterActor</code>s and also readying the <code>ClutterActor</code> for user interaction.
fr: Examinons maintenant le choix de la taille et du positionnement des <code>ClutterActor</code> et également la préparation du <code>ClutterActor</code> pour une interaction de l'utilisateur.

note: (itstool) path: item/p
en: Line 7: Setting an actor reactive means that it reacts to events, such as <code>button-press-event</code> in our case. For Photo Wall, all <code>ClutterActor</code>s in the wall should initially be reactive.
fr: Ligne 7 : le fait de définir un acteur comme « reactive » signifie qu'il réagit aux événements, au <code>button-press-event</code> dans notre cas. Pour le mur de photos, tous les <code>ClutterActor</code> du mur doivent être initialisés comme « reactive ».

note: (itstool) path: item/p
en: Line 9‒12: Now we connect the <code>button-press-event</code> to the <code>actor_clicked_cb</code> callback which we will look at next.
fr: Ligne 9-12 : nous connectons maintenant l'événement <code>button-press-event</code> à la fonction de rappel <code>actor_clicked_cb</code> que nous examinons ci-dessous.

note: (itstool) path: section/p
en: At this point we've got a wall of images that are ready to be viewed.
fr: À cet instant, nous obtenons un mur d'images qui sont prêtes à être regardées.

note: (itstool) path: section/title
en: Reacting to the clicks
fr: Réaction aux clics

note: (itstool) path: item/p
en: Lines 1‒4: We have to make sure our callback function matches the signature required for the <code>button_clicked_event</code> signal. For our example, we will only use the first argument, the <code>ClutterActor</code> that is actually clicked.
fr: Ligne 1-4 : nous devons être sûr que notre fonction de rappel correspond à la signature requise par notre signal <code>button_clicked_event</code>. Dans notre exemple, nous n'utilisons que le premier argument, le <code>ClutterActor</code> qui est réellement cliqué.

note: (itstool) path: note/p
en: A few words on the arguments we are not using in this example. The <code>ClutterEvent</code> is different depending on what event is being handled. For example, a key event produces a <code>ClutterKeyEvent</code> from which you can get the key being pressed among other information. For mouse click events you get a <code>ClutterButtonEvent</code> from which you can get the <code>x</code> and <code>y</code> values. See the Clutter documentation for other <code>ClutterEvent</code> types.
fr: Quelques mots sur les arguments que nous n'utilisons pas dans cet exemple. L'événement <code>ClutterEvent</code> est différent en fonction de l'événement géré. Par exemple, un événement appui sur une touche du clavier produit un <code>ClutterKeyEvent</code> à partir duquel vous pouvez obtenir comme information, entre autres, la touche qui a été enfoncée. Pour un événement clic de souris, vous obtenez un <code>ClutterButtonEvent</code> à partir duquel vous pouvez connaître les valeurs <code>x</code> et <code>y</code>. Consultez la documentation de Clutter pour les autres types d'événement <code>ClutterEvent</code>.

note: (itstool) path: item/p
en: Line 7: We set up a static flag to track which state we are in: wall mode or focus mode. We start out in wall mode so no image has focus. Thus, we set the flag to <code>FALSE</code> initially.
fr: Ligne 7 : nous définissons un drapeau de type « static » pour enregistrer l'état dans lequel nous sommes : en mode mur ou en mode focus. Nous commençons en mode mur donc aucune image ne possède le focus, par conséquent, nous paramétrons le drapeau à <code>FALSE</code> (FAUX) au départ.

note: (itstool) path: item/p
en: Line 24: Reaching this line of code means we are currently in the wall state and are about to give a <code>ClutterActor</code> focus. Here we save the starting position so that we can return to it later.
fr: Ligne 24 : ces lignes sont atteintes lorsque nous sommes actuellement dans l'état mur et que nous allons donner le focus à un <code>ClutterActor</code>. Ici nous enregistrons la position de départ afin de pouvoir le repositionner plus tard.

note: (itstool) path: item/p
en: Line 25: Setting the <code>ClutterActor</code>'s <code>reactive</code> property to <code>TRUE</code> makes this <code>ClutterActor</code> react to events. In this focused state the only <code>ClutterActor</code> that we want to receive events will be the <code>ClutterActor</code> being viewed. Clicking on the <code>ClutterActor</code> will return it to its starting position.
fr: Ligne 25 : le fait de paramétrer la propriété <code>reactive</code> du <code>ClutterActor</code> à <code>TRUE</code> rend ce <code>ClutterActor</code> réactif aux événements. Dans cet état de focus, le seul <code>ClutterActor</code> qui doit recevoir des événements est le <code>ClutterActor</code> qui est actuellement affiché. Un clic sur ce <code>ClutterActor</code> le repositionne à sa position de départ.

note: (itstool) path: item/p
en: As mentioned previously, the <code>ClutterActor</code>s with higher <code>depth</code> values receive events but can allow <code>ClutterActor</code>s below them to also receive events. Returning <code>TRUE</code> will stop events from being passed down, while <code>FALSE</code> will pass events down.
fr: Comme mentionné ci-dessus, les <code>ClutterActor</code> qui possèdent des valeurs <code>depth</code> plus grandes reçoivent les événements mais peuvent autoriser les <code>ClutterActor</code> en dessous d'eux à recevoir les événements également. En renvoyant <code>TRUE</code>, l'acteur empêche la transmission des événements alors qu'en renvoyant <code>FALSE</code> la transmission se fait.

note: (itstool) path: note/p
en: Remember, however, that to receive events the <code>ClutterActor</code>s must be set <code>reactive</code>.
fr: Rappelez-vous cependant que pour recevoir des événements les <code>ClutterActor</code> doivent être définis à <code>reactive</code>.

note: (itstool) path: section/p
en: All of the code should now be ready to go. All you need now is some pictures to load. By default, the pictures are loaded from a <file>berlin_images</file> directory. If you want, you can change the <code>#define IMAGE_DIR_PATH</code> line near the top to refer to your photo directory, or create a <file>berlin_images</file> directory by clicking <guiseq><gui>Project</gui><gui>New Directory...</gui></guiseq> and creating a <file>berlin_images</file> directory as a subdirectory of the <file>photo-wall</file> directory. Make sure to put at least twelve images in the directory!
fr: Le programme complet devrait maintenant être prêt à fonctionner. Tout ce dont vous avez besoin est de quelques images à charger. Par défaut, les images sont chargées à partir d'un répertoire <file>berlin_images</file>. Vous pouvez, si vous voulez, modifier la ligne <code>#define IMAGE_DIR_PATH</code> qui se trouve au début du fichier pour faire référence à votre répertoire de photos ou créer un répertoire <file>berlin_images</file> en cliquant sur <guiseq><gui>Projet</gui><gui>Nouveau répertoire...</gui></guiseq> et en créant un sous-répertoire <file>berlin_images</file> dans le répertoire <file>murdephotos</file>. Assurez-vous de mettre au moins 12 images dans le répertoire !

note: (itstool) path: section/p
en: When you have done that, click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, then <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> to start the application.
fr: Après avoir fait cela, cliquez sur <guiseq><gui>Construire</gui><gui>Construire le projet</gui></guiseq> pour tout reconstruire, puis sur <guiseq><gui>Exécuter</gui><gui>Exécuter</gui></guiseq> pour lancer l'application.

note: (itstool) path: section/p
en: If you haven't already done so, choose the <file>Debug/src/photo-wall</file> application in the dialog that appears. Finally, hit <gui>Run</gui> and enjoy!
fr: Si vous ne l'avez pas déjà fait, choisissez l'application <file>Debug/src/murdephotos</file> dans la boîte de dialogue qui apparaît. Enfin, cliquez sur <gui>Lancer</gui> et amusez-vous !

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="photo-wall/photo-wall.c">reference code</link>.
fr: Si vous rencontrez des difficultés avec ce tutoriel, comparez votre programme à ce <link href="photo-wall/photo-wall.c">programme de référence</link>.

note: (itstool) path: info/desc
en: A widget which indicates progress visually
fr: Un élément graphique qui matérialise visuellement la progression

note: (itstool) path: page/title
en: ProgressBar
fr: Barre de progression

note: (itstool) path: page/p
en: This ProgressBar "fills in" by a fraction of the bar until it is full.
fr: Cette barre de progression se « rempli » par fractions jusqu'à ce qu'elle soit pleine.

note: (itstool) path: info/desc
en: A bar which animates to indicate progress
fr: Une barre qui s'anime pour indiquer la progression

note: (itstool) path: div/p
en: Pressing any key stops and starts this ProgressBar.
fr: L'appui sur n'importe quelle touche démarre et arrête la barre de progression (ProgressBar).

note: (itstool) path: page/p
en: This ProgressBar is stopped and started by pressing any key.
fr: Pour démarrer ou arrêter cette barre de progression, appuyez sur n'importe quelle touche.

note: (itstool) path: info/desc
en: A widget which indicates progress visually.
fr: Un élément graphique qui matérialise visuellement la progression.

note: (itstool) path: section/title
en: Useful methods for a ProgressBar widget
fr: Méthodes utiles pour un élément graphique barre de progression

note: (itstool) path: item/p
en: Instead of <code>pulse()</code>, that makes the bar go back and forth, if we want the ProgressBar to "fill in" a fraction (a <code>float</code> between <code>0.0</code> and <code>1.0</code> included) of the bar that has been completed, use <code>set_fraction(fraction)</code>.
fr: Contrairement à <code>pulse()</code>, qui fait avancer ou reculer la barre, si nous voulons que notre barre de progression se remplisse par fractions (un nombre flottant <code>float</code> compris entre <code>0.0</code> et <code>1.0</code> inclus) toujours dans le même sens, nous utilisons la méthode <code>set_fraction(fraction)</code>.

note: (itstool) path: info/desc
en: An explanation of properties, getters and setters.
fr: Une explication des propriétés, des mécanismes d'obtention et de définition.

note: (itstool) path: page/title
en: Properties
fr: Propriétés

note: (itstool) path: page/title
en: Tutorials, code samples and platform demos in Python
fr: Tutoriels, exemples de code et plateformes de démonstration en Python

note: (itstool) path: info/desc
en: A choice from multiple checkbuttons
fr: Un choix entre plusieurs boutons de vérification.

note: (itstool) path: page/p
en: These radiobuttons report their activity in the terminal.
fr: Ces boutons de radio signalent leur activité dans le terminal.

note: (itstool) path: info/desc
en: Only one can be selected at a time
fr: Un seul peut être sélectionné à la fois

note: (itstool) path: page/p
en: RadioButtons are named after old-style car radios, which had buttons for switching between channel presets. Because the radio could only be tuned to one station at a time, only one button could be pressed in at a time; if you pressed a new one, the one that was already pressed in would pop back out. That's how these buttons work, too.
fr: Le terme « bouton de radio » provient de l'analogie avec les anciennes radios de nos vieux véhicules. Ils avaient des boutons poussoirs programmés et un seul pouvait resté enfoncé à la fois, transmettant une seule station. Si vous en enfonciez un autre, cela faisait sortir automatiquement le précédent. Ici, nos RadioButtons fonctionnent exactement de la même façon.

note: (itstool) path: page/p
en: Each RadioButton needs a text label and a group. Only one button in a group can be selected at a time. You don't name each group; you just set new RadioButtons to be part of the same group as an existing one. If you create a new one outside of a group, it automatically creates a new group for it to be part of.
fr: Chaque bouton de radio nécessite une étiquette texte et un groupe. Un seul bouton d'un même groupe peut être sélectionné à la fois. Ne nommez pas chaque groupe ; définissez seulement les nouveaux boutons à l'intérieur d'un groupe qui existe déjà. Si vous créez un bouton en dehors d'un groupe existant, il générera automatiquement un nouveau groupe pour s'y loger.

note: (itstool) path: section/p
en: All the code for this sample goes in the RadioButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
fr: Tout le code de cet exemple est dans la classe RadioButtonExample. Le code ci-dessus crée un <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> pour y mettre nos éléments graphiques et la fenêtre qui les contient.

note: (itstool) path: section/title
en: Creating the radiobuttons
fr: Création des boutons de radio

note: (itstool) path: section/p
en: We use a <link xref="label.js">Gtk.Label</link> to set each group of RadioButtons apart. Nothing will stop you from putting RadioButtons from all different groups wherever you want, so if you want people to know which ones go together you need to organize things accordingly.
fr: Utilisez une étiquette <link xref="label.js">Gtk.Label</link> pour définir chaque groupe de boutons de radio séparément. Vous pouvez mettre les boutons de radio de tous les différents groupes où vous voulez, donc si vous voulez que l'on sache lesquels vont ensemble, vous devez organiser les choses en fonction.

note: (itstool) path: section/p
en: Here are three different ways to create RadioButtons. The first is the usual way, where we create a new Gtk.RadioButton and assign its properties at the same time. The second and third use functions which automatically handle some of the properties; new_from_widget takes a single argument, the RadioButton that you want to put this new one in the same group as. Meanwhile, new_with_label_from_widget takes that and the RadioButton's label at the same time.
fr: Voici trois méthodes différentes pour créer des boutons de radio. La première est la méthode habituelle, où nous créons un nouveau Gtk.RadioButton et lui assignons ses propriétés en même temps. La seconde et la troisième utilisent des fonctions qui prennent en charge automatiquement quelques unes des propriétés ; new_from_widget ne prend qu'un argument : le nouveau bouton de radio que vous voulez mettre dans le même groupe, alors que new_with_label_from_widget prend ce même argument et l'étiquette qui va avec en même temps.

note: (itstool) path: section/p
en: The first RadioButton in a group is the one that's selected by default. Try uncommenting the last line in this sample code to see how you can set a different one to be the default selection.
fr: Le premier bouton de radio d'un groupe est celui sélectionné par défaut. Décommentez la dernière ligne de cet exemple de code pour apprendre comment en définir un autre pour qu'il devienne celui sélectionné par défaut.

note: (itstool) path: section/p
en: Here we create the label for the second group of buttons, and then create them all the same way.
fr: Ici, nous créons l'étiquette du second groupe de boutons et ensuite nous les générons tous de la même manière.

note: (itstool) path: section/title
en: Creating the rest of the user interface
fr: Création du reste de l'interface utilisateur

note: (itstool) path: section/p
en: This code creates a <link xref="button.js">Gtk.Button</link> and binds it to a function which will show people a silly message when they click OK, depending on which RadioButtons were selected.
fr: Ce code crée un bouton <link xref="button.js">Gtk.Button</link> et le lie à une fonction qui affiche un message stupide si on clique sur OK, selon les boutons qui sont sélectionnés.

note: (itstool) path: section/p
en: We use a separate <link xref="grid.js">Gtk.Grid</link> to organize each group of radio buttons. This way we can change the layout with less fuss later on. The second Grid has a margin on top, to visually separate the two sets of choices.
fr: Organisons chaque groupe de boutons de radio dans une grille <link xref="grid.js">Gtk.Grid</link> séparée. Comme cela, nous pouvons modifier l'agencement plus aisément plus tard. Mettons une marge en haut de la deuxième grille pour séparer visuellemnt les deux ensembles de choix.

note: (itstool) path: section/p
en: After we've organized them, we put them into a third, master Grid, along with the OK button. Then we attach that to the window.
fr: Après les avoir organisé, nous les mettons dans une troisième grille principale, avec le bouton OK. Puis, nous lions le tout à la fenêtre.

note: (itstool) path: section/p
en: Finally, we tell the window and everything inside it to become visible when the application is run.
fr: Enfin, nous indiquons à la fenêtre de s'afficher avec son contenu au démarrage de l'application.

note: (itstool) path: section/p
en: When you click OK, a <link xref="messagedialog.js">Gtk.MessageDialog</link> appears. This function creates and displays the popup window, then binds its OK button to a function that closes it. What text appears in the popup depends on the _messageText() function, which returns a different value depending on which set of options you chose.
fr: Quand vous cliquez sur OK, une boîte de dialogue <link xref="messagedialog.js">Gtk.MessageDialog</link> s'affiche. Cette fonction crée et affiche le message surgissant et ensuite connecte son bouton OK à une fonction qui le ferme. Le contenu du message surgissant dépend de la fonction _messageText(), qui renvoie une valeur différente selon les options que vous avez choisies.

note: (itstool) path: section/p
en: The get_active() method is how we can tell which RadioButton's pressed in. This function returns a different silly message depending on which set of buttons was pressed. Its return value is used as the MessageDialog's text property.
fr: La méthode get_active() permet de savoir quel bouton de radio a été pressé. Cette fonction renvoie un message stupide différent selon le bouton qui a été pressé. Sa valeur de retour est utilisée comme propriété du texte de la boîte de dialogue de message.

note: (itstool) path: section/p
en: This function is called when the MessageDialog's OK button is pressed. It simply makes the popup go away.
fr: Cette fonction est appelée quand le bouton OK du texte de la boîte de dialogue de message est pressé. Elle fait seulement disparaître le message surgissant.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished RadioButtonExample class, and set the application running.
fr: Enfin, nous créons une nouvelle instance de la classe RadioButtonExample et lançons l'application.

note: (itstool) path: info/desc
en: Mutually exclusive buttons.
fr: Boutons exclusifs.

note: (itstool) path: page/p
en: Three RadioButtons. You can see in the terminal if they are turned off or on.
fr: Trois boutons radio. Vous pouvez voir dans le terminal s'ils sont activés ou non.

note: (itstool) path: section/title
en: Useful methods for a RadioButton widget
fr: Méthodes utiles pour un élément graphique RadioButton

note: (itstool) path: section/code
en: 
    button1 = Gtk.RadioButton()
    button1.set_label("Button 1").
fr: 
    button1 = Gtk.RadioButton()
    button1.set_label(« bouton 1 »).

note: (itstool) path: info/desc
en: A choice from multiple CheckButtons.
fr: Un choix entre plusieurs CheckButtons.

note: (itstool) path: page/p
en: These RadioButtons report their activity in the terminal.
fr: Ces boutons radio signalent leur activité dans le terminal.

note: (itstool) path: info/desc
en: Create a small database application for ordering your music collection
fr: Création d'une petite base de données pour trier votre discothèque

note: (itstool) path: item/p
en: How to connect to a database using libgda
fr: comment vous connecter à une base de données en utilisant « libgda »

note: (itstool) path: item/p
en: How to insert and browse records in a database table
fr: comment insérer et parcourir des enregistrements dans une table de base de données

note: (itstool) path: section/p
en: This demo uses the Javascript language. We are going to demonstrate how to connect and use a database from a GTK program, by using the GDA (GNOME Data Access) library. Thus you also need this library installed.
fr: Cet exemple utilise le langage Javascript. Nous allons vous montrer comment vous connecter à une base de données et l'utiliser à partir d'un programme GTK en utilisant la bibliothèque GDA (GNOME Data Access). Vous devez bien sûr avoir déjà installé cette dernière.

note: (itstool) path: section/p
en: GNOME Data Access (GDA) is library whose purpose is to provide universal access to different kinds and types of data sources. This goes from traditional relational database systems, to any imaginable kind of data source such as a mail server, a LDAP directory, etc. For more information, and for a full API and documentation, visit the <link href="http://library.gnome.org/devel/libgda/stable/">GDA website</link>.
fr: La bibliothèque GDA (GNOME Data Access) vous permet d'accéder de manière universelle à différentes sortes et types de sources de données, depuis les plus traditionnels systèmes de bases de données relationnelles, jusqu'à des sources aussi diverses qu'un serveur de messagerie, un répertoire LDAP, etc. Pour de plus amples informations et pour une documentation et l'API complète, consultez le <link href="http://library.gnome.org/devel/libgda/stable/">Site Web de GDA</link>.

note: (itstool) path: section/p
en: Although a big part of the code is related to user interface (GUI), we are going to focus our tutorial on the database parts (we might mention other parts we think are relevant though). To know more about Javascript programs in GNOME, see the <link xref="image-viewer.js">Image Viewer program</link> tutorial.
fr: Bien que la plus grosse partie du programme se réfère à l'interface utilisateur (GUI), nous allons orienter notre tutoriel sur les fonctions bases de données (avec des explications sur certaines autres fonctions que nous jugeons pertinentes). Pour de plus amples informations sur les programmes GNOME en Javascript, consultez le tutoriel <link xref="image-viewer.js">Programme visionneur d'images</link>.

note: (itstool) path: item/p
en: Choose <gui>Generic Javascript</gui> from the <gui>JS</gui> tab, click <gui>Forward</gui>, and fill-out your details on the next few pages. Use <file>record-collection</file> as project name and directory.
fr: Cliquez sur l'onglet <gui>JS</gui>, choisissez <gui>JavaScript générique</gui>, cliquez sur <gui>Continuer</gui> et renseignez les champs requis avec vos informations. Mettez <file>discotheque</file> (sans accent) comme nom du projet et répertoire.

note: (itstool) path: item/p
en: Click <gui>Finished</gui> and the project will be created for you. Open <file>src/main.js</file> from the <gui>Project</gui> or <gui>File</gui> tabs. It contains very basic example code.
fr: Cliquez sur <gui>Appliquer</gui> et votre projet est créé. Ouvrez <file>src/main.js</file> depuis l'onglet <gui>Projet</gui> ou l'onglet <gui>Fichiers</gui>. Il contient un exemple de programme très basique.

note: (itstool) path: section/title
en: Program Structure
fr: Structure du programme

note: (itstool) path: section/p
en: This demo is a simple GTK application (with a single window) capable of inserting records into a database table as well as browsing all records of the table. The table has two fields: <code>id</code>, an integer, and <code>name</code>, a varchar. The first section (on the top) of the application allows you to insert a record into the table. The last section (bottom) allows you to see all the records of that table. Its content is refreshed every time a new record is inserted and on the application startup.
fr: Cet exemple est une application GTK simple (avec une seule fenêtre) pouvant insérer des enregistrements dans une table de base de données et également consulter tous les enregistrements de cette table. Cette table possède deux champs : <code>id</code>, un entier et <code>name</code>, une variable de type caractère. La première section de l'application (en haut) vous permet d'insérer un enregistrement dans la table. La dernière (en bas) vous permet d'afficher tous les enregistrements de cette table. Son contenu est mis à jour à chaque fois qu'un nouvel enregistrement est inséré et au démarrage de l'application.

note: (itstool) path: section/title
en: Starting the fun
fr: Début du plaisir

note: (itstool) path: section/p
en: Let's start by examining the skeleton of the program:
fr: Commençons par examiner le squelette du programme :

note: (itstool) path: item/p
en: Lines 1‒4: Initial imports. Pay special attention to line 3, which tells Javascript to import the GDA library, our focus in this tutorial.
fr: Lignes 1‒4 : importations initiales. Faites surtout attention à la ligne 3, qui commande à Javascript l'importation de la bibliothèque GDA, la cible de ce tutoriel.

note: (itstool) path: item/p
en: Lines 6‒17: Define our <code>Demo</code> class. Pay special attention to lines 13‒15, where we call 3 methods which will do the whole job. They will be detailed below.
fr: Lignes 6‒17 : définition de la classe <code>Demo</code>. Faites surtout attention aux lignes 13‒15, où nous appelons 3 méthodes qui font tout le travail. Elles sont détaillées plus bas.

note: (itstool) path: item/p
en: Lines 19‒23: Start the application.
fr: Lignes 19‒23 : lancement de l'application.

note: (itstool) path: section/title
en: Designing the application
fr: Conception de l'application

note: (itstool) path: section/p
en: Let's take a look at the <code>setupWindow</code> method. It is responsible for creating the User Interface (UI). As UI is not our focus, we will explain only the relevant parts.
fr: Examinons la méthode <code>setupWindow</code>. C'est elle qui crée l'interface utilisateur. Comme l'interface utilisateur n'est pas notre sujet, nous en expliquons seulement les parties pertinentes.

note: (itstool) path: item/p
en: Lines 22 and 27: Create the 2 entries (for the two fields) in which users will type something to get inserted in the database.
fr: Lignes 22 et 27 : création des 2 entrées (pour les 2 champs) dans lesquelles l'utilisateur saisit les choses à insérer dans la base de données.

note: (itstool) path: item/p
en: Lines 31‒34: Create the Insert button. We connect its <code>clicked</code> signal to the <code>_insertClicked</code> private method of the class. This method is detailed below.
fr: Lignes 31‒34 : création du bouton « Insert ». Le signal <code>clicked</code> de ce bouton est connecté à la méthode privée <code>_insertClicked</code> de la classe. Cette méthode est décrite ci-dessous.

note: (itstool) path: item/p
en: Line 39: Create the widget (<code>TextView</code>) where we will show the contents of the table.
fr: Ligne 39 : création de l'élément graphique (<code>TextView</code>) où nous affichons le contenu de la table.

note: (itstool) path: item/p
en: Line 44: Create the label where we will show the number of records in the table. Initially it's empty, it will be updated later.
fr: Ligne 44 : création de l'étiquette où nous affichons le nombre d'enregistrements dans la table. Au début, elle est vide et est mise à jour ultérieurement.

note: (itstool) path: section/title
en: Connecting to and initializing the database
fr: Connexion à la base de données et initialisation

note: (itstool) path: section/p
en: The code which makes the connection to the database is in the <code>setupDatabase</code> method below:
fr: Le code permettant de se connecter à la base de données est dans la méthode <code>setupDatabase</code> ci-dessous :

note: (itstool) path: item/p
en: Lines 2‒3: Create the GDA's <code>Connection</code> object. We must supply to its constructor some properties:
fr: Lignes 2‒3 : création de l'objet <code>Connection</code> de GDA. Il faut transmettre quelques propriétés à son constructeur :

note: (itstool) path: item/p
en: <code>provider</code>: One of GDA's supported providers. GDA supports SQLite, MySQL, PostgreSQL, Oracle and many others. For demo purposes we will use a SQLite database, as it comes installed by default in most distributions and it is simple to use (it just uses a file as a database).
fr: <code>provider</code> : l'un des fournisseurs reconnus par GDA. GDA prend en charge SQLite, MySQL, PostgreSQL, Oracle et beaucoup d'autres. Pour les besoins de l'exemple, nous utilisons une base de données SQLite car elle est déjà incluse par défaut dans la plupart des distributions et elle est facile à utiliser (elle n'a besoin que d'un fichier comme base de données).

note: (itstool) path: item/p
en: <code>cnc_string</code>: The connection string. It may change from provider to provider. The syntax for SQLite is: <code>DB_DIR=<var>PATH</var>;DB_NAME=<var>FILENAME</var></code>. In this demo we are accessing a database called gnome_demo in the user home dir (note the call to GLib's <code>get_home_dir</code> function).
fr: <code>cnc_string</code> : la chaîne de connexion. Elle peut être différente en fonction du fournisseur. La syntaxe pour SQLite est : <code>DB_DIR=<var>CHEMIN</var>;DB_NAME=<var>NOM2FICHIER</var></code>. Dans cet exemple, nous accédons à une base de données nommée gnome_demo dans le dossier personnel de l'utilisateur (notez l'appel à la fonction <code>get_home_dir</code> de GLib).

note: (itstool) path: note/p
en: If the provider is not supported by GDA, or if the connection string is missing some element, line 2 will raise an exception. So, in real life we should handle it with JavaScript's statement <code>try</code>...<code>catch</code>.
fr: Si le fournisseur n'est pas reconnu par GDA, ou si la chaîne de connexion n'est pas complète, la ligne 2 provoque une exception. Donc, en pratique, il faut gérer cette exception grâce à l'instruction JavaScript <code>try</code>...<code>catch</code>.

note: (itstool) path: item/p
en: Line 4: Open the connection. In the SQLite provider, if the database does not exist, it will be created in this step.
fr: Ligne 4 : ouverture de la connexion. Pour le fournisseur SQLite, si la base de donnée n'existe pas, elle est créée à cette étape.

note: (itstool) path: item/p
en: Lines 6‒10: Try to do a simple select to check if the table exists (line 7). If it does not exist (because the database was just created), this command will raise an exception, which is handled by the <code>try</code>...<code>catch</code> block. If it is the case, we run the create table statement (line 9).
fr: Lignes 6‒10 : tentative de faire une simple instruction « select » pour vérifier que la table existe (ligne 7). Si elle n'existe pas (parce que la base de données vient juste d'être créée), cette instruction provoque une exception qu'il faut gérer grâce au bloc <code>try</code>...<code>catch</code>. Dans ce cas, il faut exécuter l'instruction « create table » pour créer la table (ligne 9).

note: (itstool) path: section/p
en: At this point we have the database set up, and are ready to use it.
fr: À ce niveau, nous avons configuré la base de données et cette dernière est fonctionnelle.

note: (itstool) path: section/title
en: Selecting
fr: Sélection

note: (itstool) path: section/p
en: After connecting to the database, our demo's constructor calls the <code>selectData</code> method. It is responsible for getting all the records in the table and showing them on the <code>TextView</code> widget. Let's take a look at it:
fr: Après connexion à la base de données, le constructeur de notre exemple appelle la méthode <code>selectData</code>. C'est elle qui récupère tous les enregistrements de la table et qui les affiche dans l'élément graphique <code>TextView</code>. Regardons à quoi elle ressemble :

note: (itstool) path: item/p
en: Line 3: Create an <code>Iter</code> object, which is used to iterate over the <code>DataModel</code>'s records.
fr: Ligne 3 : création d'un objet <code>Iter</code> qui sert à itérer sur les enregistrements de <code>DataModel</code>.

note: (itstool) path: item/p
en: Line 7: Loop through all the records, fetching them with the help of the <code>Iter</code> object. At this point, the <code>iter</code> variable contains the actual, retrieved data. Its <code>move_next</code> method returns <code>false</code> when it reaches the last record.
fr: Ligne 7 : Itération sur tous les enregistrements en les récupérant à l'aide de l'objet <code>Iter</code>. À cet endroit, la variable <code>Iter</code> contient les informations trouvées. La méthode <code>move_next</code> retourne le message <code>false</code> quand elle atteint le dernier enregistrement.

note: (itstool) path: item/p
en: Lines 8‒9: We do two things in each line:
fr: Lignes 8‒9 : nous faisons deux choses dans chaque ligne :

note: (itstool) path: item/p
en: Use <code>Iter</code>'s method <code>get_value_at</code>, which requires only one argument: the column number to retrieve, starting at 0. As our <code>SELECT</code> command returns only two columns, we are retrieving columns 0 and 1.
fr: Utilisez la méthode <code>get_value_at</code> d'<code>Iter</code> qui n'a besoin que d'un argument : le numéro de colonne à récupérer, en commençant par 0. Comme notre commande <code>SELECT</code> ne retourne que deux colonnes, nous récupérons donc les colonnes 0 et 1.

note: (itstool) path: item/p
en: The method <code>get_value_at</code> returns the field in GLib's <code>GValue</code> format. A simple way to convert this format to a string is by using GDA's global function <code>value_stringify</code>. That's what we are doing here, and we store the results in the variables <code>id_field</code> and <code>name_field</code>.
fr: La méthode <code>get_value_at</code> retourne l'information sur les champs au format <code>GValue</code> de GLib. Pour convertir ce format en chaîne de caractères, utilisez simplement la fonction globale <code>value_stringify</code> de GDA. C'est ce que nous faisons ici puis nous enregistrons les résultats dans les variables <code>id_field</code> et <code>name_field</code>.

note: (itstool) path: item/p
en: Line 11: Concatenate the two fields to make one text line, separated by <code>"=&gt;"</code>, and store it in the <code>text</code> variable.
fr: Ligne 11 : concaténation des deux chaînes pour former une seule ligne de texte en les séparant par <code>"=&gt;"</code> et enregistrement dans la variable <code>text</code>.

note: (itstool) path: item/p
en: Line 14: After the loop is finished, we have all the records formatted in the <code>text</code> variable. In this line we just set the contents of the <code>TextView</code> with that variable.
fr: Ligne 14 : à la fin de la boucle, tous les enregistrements sont formatés dans la variable <code>text</code>. À cette ligne, nous attribuons le contenu de cette variable au <code>TextView</code>.

note: (itstool) path: item/p
en: Line 15: Display the number of records in the table, making use of the <code>DataModel</code>'s <code>get_n_rows</code> method.
fr: Ligne 15 : affichage du nombre d'enregistrements dans la table avec la fonction <code>get_n_rows</code> de <code>DataModel</code>.

note: (itstool) path: section/title
en: Inserting
fr: Insertion

note: (itstool) path: section/p
en: OK, we know how to connect to a database and how to select rows from a table. Now it's time to do an <code>INSERT</code> on the table. Do you remember above, in the method <code>setupWindow</code> we connected the <gui>Insert</gui> button's <code>clicked</code> signal to the method <code>_insertClicked</code>? Let's see the implementation of this method.
fr: Bien, nous savons comment nous connecter à une base de données et comment sélectionner des lignes dans une table. Il est temps maintenant d'apprendre à faire une insertion à l'aide de la commande <code>INSERT</code> dans la table. Souvenez-vous, dans la méthode <code>setupWindow</code>, nous avions relié le signal <code>clicked</code> du bouton <gui>Insert</gui> à la méthode <code>_insertClicked</code>. Voyons la mise en place de cette méthode.

note: (itstool) path: item/p
en: Lines 2‒3: Check if the user filled all the fields. The code for the private method <code>_validateFields</code> is really simple and you can read it in the full demo source code.
fr: Lignes 2‒3 : vérification du bon renseignement par l'utilisateur de tous les champs. Le code de la méthode privée <code>_validateFields</code> est vraiment simple et vous pouvez le consulter dans le programme source complet de l'exemple.

note: (itstool) path: item/p
en: Line 5: The faster way of doing the <code>INSERT</code>. It's commented out as we want to show how to use the <code>SqlBuilder</code> object to build a SQL statement portable across databases.
fr: Ligne 5 : la façon la plus rapide pour faire l'insertion à l'aide de la commande <code>INSERT</code>. Celle-ci est mise en commentaire car nous voulons vous montrer comment utiliser l'objet <code>SqlBuilder</code> pour construire une instruction SQL qui soit indépendante de la base de données.

note: (itstool) path: item/p
en: Line 7: Create the <code>SqlBuilder</code> object. We must pass the type of statement we are going to build. It can be <code>SELECT</code>, <code>UPDATE</code>, <code>INSERT</code> or <code>DELETE</code>.
fr:  Ligne 7 : création de l'objet <code>SqlBuilder</code>. Nous devons transmettre le type d'instruction que nous voulons construire. Cela peut être <code>SELECT</code>, <code>UPDATE</code>, <code>INSERT</code> ou <code>DELETE</code>.

note: (itstool) path: item/p
en: Line 8: Set the name of the table on which the built statement will operate (it will generate <code>INSERT INTO demo</code>)
fr: Ligne 8 : détermination du nom de la table sur laquelle l'instruction construite va agir (le code <code>INSERT INTO demo</code> est généré)

note: (itstool) path: item/p
en: Lines 9‒10: Set the fields and its values that will be part of the statement. The first argument is the field name (as in the table). The second one is the value for that field.
fr: Lignes 9‒10 : détermination des champs et de leurs valeurs qui font partie de l'instruction. Le premier argument est le nom du champ (comme dans la table). Le second est la valeur pour ce champ.

note: (itstool) path: item/p
en: Line 11: Get the dynamically generated <code>Statement</code> object, which represents a SQL statement.
fr: Ligne 11 : fabrication de l'objet <code>Statement</code> généré dynamiquement et qui représente une instruction SQL.

note: (itstool) path: item/p
en: Line 12: Finally, execute the SQL statement (<code>INSERT</code>).
fr: Ligne 12 : enfin, exécution de l'instruction SQL (<code>INSERT</code>).

note: (itstool) path: item/p
en: Line 14: Clear the id and name fields on the screen. The code for the private method <code>_clearFields</code> is really simple and you can read it in the full demo source code.
fr: Ligne 14 : effacement des champs « id » et « name » à l'écran. Le code de la méthode privée <code>_clearFields</code> est vraiment simple et vous pouvez le consulter dans le programme source complet de l'exemple.

note: (itstool) path: item/p
en: Line 15: Refresh the view on the screen by doing another <code>SELECT</code>.
fr: Ligne 15 : mise à jour de l'affichage à l'écran en faisant un nouveau <code>SELECT</code>.

note: (itstool) path: note/p
en: You can also make use of parameters while building the statement. By using the <code>SqlBuilder</code> objects and parameters you are less subject to attacks like SQL injection. Check the <link href="http://library.gnome.org/devel/libgda/stable/">GDA documentation</link> for more information about parameters.
fr: Vous pouvez aussi faire usage de paramètres pour construire l'instruction. En utilisant les objets <code>SqlBuilder</code> et des paramètres, vous êtes moins exposé à des attaques du type injection SQL. Consultez la <link href="http://library.gnome.org/devel/libgda/stable/">documentation GDA</link> pour plus d'informations sur les paramètres.

note: (itstool) path: section/p
en: All of the code you need should now be in place, so try running the code. You now have a database for your record collection!
fr: Tout le programme nécessaire doit maintenant être en place, donc essayez de l'exécuter. Vous disposez maintenant d'une base de donnée pour votre discothèque !

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="record-collection/record-collection.js">reference code</link>.
fr: Si vous rencontrez des difficultés avec ce tutoriel, comparez votre programme à ce <link href="record-collection/record-collection.js">programme de référence</link>.

note: (itstool) path: info/desc
en: A slider widget for selecting a value from a range
fr: Un élément graphique glissière pour choisir une valeur dans un intervalle

note: (itstool) path: page/title
en: Scale
fr: Échelle

note: (itstool) path: page/p
en: Slide the scales!
fr: Faites glisser les échelles !

note: (itstool) path: info/desc
en: A slider which corresponds to a numerical value
fr: Une glissière qui correspond à une valeur numérique

note: (itstool) path: page/p
en: A Scale is a horizontal or vertical slider, that represents a value inside a numerical range. When you create a new Scale, you set what its default position is, what the numbers at the top and bottom of the range are, and things like how much it moves up or down when you click on the Scale to either side of the knob. To keep from having to type all that in every time you create a new Scale, you can create an object called an Adjustment which keeps track of all that, then tell each new Scale to use that Adjustment.
fr: Une échelle est une glissière horizontale ou verticale représentant une valeur comprise dans une fourchette numérique. Pour créer une échelle, vous devez définir sa position par défaut, son étendue numérique et le pas auquel elle avance ou recule. Au lieu d'être obligé de tout recommencer à chaque fois que vous créez une nouvelle échelle, vous pouvez inclure toutes ces données dans un objet nommé Adjustment et qui garde en mémoire tous les paramètres. Ensuite, à chaque création d'une nouvelle échelle, il suffit de lui indiquer de prendre ces réglages.

note: (itstool) path: page/p
en: This scale is a simple widget that lets you adjust the size of an iceberg that penguins live on. The number of penguins on the iceberg is the product of the values of the two sliders. Try playing with them and seeing what happens.
fr: Cette échelle est un simple élément graphique permettant d'ajuster la taille d'un iceberg sur lequel vivent des pingouins. Le nombre de pingouins sur l'iceberg est le produit des valeurs des deux glissières. Faites des essais en modifiant les valeurs et observez le résultat.

note: (itstool) path: section/p
en: All the code for this sample goes in the ScaleExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
fr: Tout le code de cet exemple va dans la classe ScaleExemple. Le code ci-dessus crée une <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> pour nos éléments graphiques et la fenêtre qui les contient.

note: (itstool) path: section/title
en: Creating the scales
fr: Création des échelles

note: (itstool) path: section/p
en: The new_with_range method is one way to create a new Scale widget. The parameters it takes are a <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Orientation.html">Gtk.Orientation</link>, the minimum value, the maximum value, and the increment for a single step. After that we use the Scale's methods to set its starting value, and how many decimal places it runs to. We also set its vertical alignment in this case, to control where it appears in the window.
fr: La méthode new_with_range est l'un des moyens pour créer un nouvel élément graphique échelle. Les paramètres qu'elle utilise sont <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Orientation.html">Gtk.Orientation</link>, la valeur minimum et l'incrément pour une seule graduation. Ensuite, nous utilisons les méthodes de l'échelle pour définir sa valeur de départ et en combien de fractions décimales la diviser. Dans ce cas, il nous faut aussi définir son alignement vertical pour la placer dans la fenêtre.

note: (itstool) path: section/p
en: We can use the set_draw_value method to tell it whether or not to show the number next to the sliding scale. It's commented out in this example.
fr: Nous pouvons aussi lui indiquer s'il faut afficher ou non le nombre à côté de la glissière avec la méthode set_draw_value. Les explications se trouvent dans cet exemple.

note: (itstool) path: section/p
en: An Adjustment is an object we can use to simplify things when creating a new Scale. The Adjustment's "value" property is what the Scale's default value is, while "upper" and "lower" make the high and low ends of the numerical range. Meanwhile, the increment values show how much the slider moves when you do things like click on it.
fr: Un Adjustment est un objet permettant de simplifier la procédure de création d'une nouvelle échelle. La propriété « valeur » de l'Adjustment est la valeur par défaut de l'échelle alors que les valeurs « superieure » et « inferieure » en représentent le début et la fin. Entre les deux, les valeurs de l'incrément définissent le pas auquel l'échelle se déplace lorsque vous cliquez dessus.

note: (itstool) path: section/p
en: Here we create a new Scale object using _adjustment as its "adjustment" property. This is a great shortcut. We still have to tell it to round off the decimal place, though. Note that the draw_value property is commented out; this is how you tell it not to show the number next to the Scale when you're creating one this way.
fr: Ici, nous créons un nouvel objet échelle en utilisant _adjustment comme étant sa propriété d'« ajustement ». Cela est un raccourci important. Cependant, il nous faut encore lui indiquer comment arrondir les décimales. Notez que nous y expliquons aussi la propriété draw_value : comment lui indiquer de ne pas afficher le nombre à côté de l'échelle lorsque vous décidez cette façon de faire.

note: (itstool) path: section/p
en: We can use the get_value method to find out the numerical value a Scale is set at. We can then do whatever we want with it, including multiply the two Scales' values together and have a <link xref="label.js">Label</link> show us the product. We set the label's text to wrap around, because we're having it display a silly message too.
fr: La méthode get_value permet de trouver la valeur numérique à laquelle une échelle est définie. Ensuite, nous pouvons en faire ce que nous voulons, y compris multiplier les valeurs des deux échelles et obtenir une <link xref="label.js">étiquette</link> affichant le produit. Paramétrons le texte avec retour à la ligne, car nous avons aussi un message stupide à afficher.

note: (itstool) path: section/p
en: After we create the Label, we connect the two Scales' "value-changed" signals to _recalc, a function that will recalculate the number of penguins on the iceberg and come up with a new message.
fr: Ensuite, connectons les deux signaux « value-changed » à la fonction _recalc, qui recalcule le nombre de pingouins sur l'iceberg et affiche un nouveau message.

note: (itstool) path: section/p
en: Here we create a <link xref="grid.js">Grid</link> to put everything in, then attach all our widgets to it. Note that here and on some of the widgets themselves we're using margins to keep things neatly spaced.
fr: Ici, nous créons une <link xref="grid.js">grille</link> pour tout y mettre et nous lui lions tous nos éléments graphiques. Notez que cette fois (et pour quelques éléments graphiques) nous utilisons des marges pour espacer proprement les éléments.

note: (itstool) path: section/p
en: Finally, we add the Grid to the window, then tell the window to show itself and all the widgets inside of it.
fr: Enfin, nous ajoutons la grille à la fenêtre et indiquons à celle-ci de s'afficher toute seule avec tout son contenu.

note: (itstool) path: section/title
en: Function which handles the scales' values changing
fr: Fonction prenant en charge les modifications de valeurs de l'échelle

note: (itstool) path: section/p
en: Remember, we can get a Scale's value using its get_value method. Here we simply recalculate what the product of the two values is after one of the Scales is moved, add in a silly message depending on how many penguins are left, and change the wording on _label to show the new number and message.
fr: Souvenez-vous, nous pouvons obtenir la valeur d'une échelle avec la méthode get_value. Ici, nous ne faisons que recalculer le produit des deux valeurs après qu'une des deux échelles a bougé, ajouter un message stupide en fonction du nombre de pingouins restant et modifier le texte de l'étiquette avec le nouveau nombre et le message.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished ScaleExample class, and set the application running.
fr: Enfin, nous créons un nouvel exemple de la classe ScaleExemple et démarrons l'application.

note: (itstool) path: section/title
en: Useful methods for a Scale widget
fr: Méthodes utiles pour un élément graphique échelle

note: (itstool) path: section/p
en: A Gtk.Adjustment is needed to construct the Gtk.Scale. This is the representation of a value with a lower and upper bound, together with step and page increments, and a page size, and it is constructed as <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code> where the fields are of type <code>float</code>; <code>step_increment</code> is the increment/decrement that is obtained by using the cursor keys, <code>page_increment</code> the one that is obtained clicking on the scale itself. Note that <code>page_size</code> is not used in this case, it should be set to <code>0</code>.
fr: Pour construire une échelle Gtk.Scale, il faut un Gtk.Adjustment. C'est la représentation d'une valeur avec une limite inférieure et supérieure, des incréments d'étape et de page, d'une taille de page et est construite sous la forme <code>Gtk.Adjustment(valeur, inferieure, superieure, step_increment, page_increment, page_size)</code>, où les champs sont du type flottant <code>float</code> ; <code>step_increment</code> est l'incrément ou décrément obtenu par l'utilisation des touches fléchées et <code>page_increment</code> est celui obtenu en cliquant sur l'échelle elle-même. Notez que la taille <code>page_size</code> n'est pas utilisée dans notre exemple et que sa valeur doit être définie à <code>0</code>.

note: (itstool) path: item/p
en: <code>get_value()</code> retrieves the current value of the scale; <code>set_value(value)</code> sets it (if the <code>value</code>, of type <code>float</code>, is outside the minimum or maximum range, it will be clamped to fit inside them). These are methods of the class Gtk.Range.
fr: La méthode <code>get_value()</code> récupère la valeur actuelle de l'échelle ; <code>set_value(valeur)</code> la définit (si la <code>valeur</code>, du type <code>float</code>, est en dehors des limites inférieure ou supérieure, elle sera rétrécie pour tenir à l'intérieur). Ce sont les méthodes de la classe Gtk.Range.

note: (itstool) path: item/p
en: Use <code>set_draw_value(False)</code> to avoid displaying the current value as a string next to the slider.
fr: Utilisez <code>set_draw_value(faux)</code> pour éviter d'afficher la valeur actuelle sous forme d'une chaîne à côté de la glissière.

note: (itstool) path: item/p
en: To highlight the part of the scale between the origin and the current value:
fr: Pour surligner la partie d'échelle située entre l'origine et la valeur actuelle :

note: (itstool) path: item/code
en: 
    self.h_scale.set_restrict_to_fill_level(False)
    self.h_scale.set_fill_level(self.h_scale.get_value())
    self.h_scale.set_show_fill_level(True)
fr: 
    self.h_scale.set_restrict_to_fill_level(faux)
    self.h_scale.set_fill_level(self.h_scale.get_value())
    self.h_scale.set_show_fill_level(vrai)

note: (itstool) path: item/p
en: in the callback function of the "value-changed" signal, so to have the new filling every time the value is changed. These are methods of the class Gtk.Range.
fr: dans la fonction de rappel du signal « value-changed », pour avoir le nouveau remplissage chaque fois que la valeur est modifiée. Ce sont les méthodes de la classe Gtk.Range.

note: (itstool) path: item/p
en: <code>add_mark(value, position, markup)</code> adds a mark at the <code>value</code> (<code>float</code> or <code>int</code> if that is the precision of the scale), in <code>position</code> (<code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT, Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code>) with text <code>Null</code> or <code>markup</code> in the Pango Markup Language. To clear marks, <code>clear_marks()</code>.
fr: La méthode <code>add_mark(valeur, position, marqueur)</code> ajoute un marqueur à la <code>valeur</code> (<code>float</code> ou <code>int</code> selon la précision de l'échelle) dans <code>position</code> (<code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT, Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code>) avec le texte <code>Null</code> ou <code>marqueur</code> en langage Pango Markup. La fonction <code>clear_marks()</code> supprime les marqueurs.

note: (itstool) path: item/p
en: <code>set_digits(digits)</code> sets the precision of the scale at <code>digits</code> digits.
fr: La méthode <code>set_digits(digits)</code> définit la précision de l'échelle aux caractères <code>digits</code>.

note: (itstool) path: info/desc
en: Adds scrollbars to its child widget
fr: Ajoute des barres de défilement à son élément graphique enfant

note: (itstool) path: page/p
en: An image in a scrolled window.
fr: Une image dans une fenêtre avec barres de défilement.

note: (itstool) path: section/title
en: Useful methods for a ScrolledWindow widget
fr: Méthodes utiles pour un élément graphique ScrolledWindow

note: (itstool) path: item/p
en: <code>set_policy(hscrollbar_policy, vscrollbar_policy)</code> where each of the arguments is one of <code>Gtk.Policy.AUTOMATIC, Gtk.Policy.ALWAYS, Gtk.Policy.NEVER</code> regulates whether the horizontal and vertical scrollbars should appear: with <code>AUTOMATIC</code> they appear only if needed, <code>ALWAYS</code> and <code>NEVER</code> are self-explanatory.
fr: La méthode <code>set_policy(hscrollbar_policy, vscrollbar_policy)</code>, où chaque argument est l'un des <code>Gtk.Policy.AUTOMATIC, Gtk.Policy.ALWAYS, Gtk.Policy.NEVER</code>, définit laquelle des barres de défilement verticale ou horizontale doit s'afficher. <code>AUTOMATIC</code> les affiche seulement si nécessaire, <code>ALWAYS</code> et <code>NEVER</code> les affichent respectivement toujours ou jamais.

note: (itstool) path: item/p
en: <code>add_with_viewport(widget)</code> is used to add the Gtk.Widget <code>widget</code> without native scrolling capabilities inside the window.
fr: La méthode <code>add_with_viewport(widget)</code> est utilisé pour ajouter l'élément graphique Gtk.Widget <code>widget</code>, sans possibilité de défilement à l'intérieur de la fenêtre.

note: (itstool) path: item/p
en: <code>set_placement(window_placement)</code> sets the placement of the contents with respect to the scrollbars for the scrolled window. The options for the argument are <code>Gtk.CornerType.TOP_LEFT</code> (default: the scrollbars are on the bottom and on the right of the window), <code>Gtk.CornerType.TOP_RIGHT, Gtk.CornerType.BOTTOM_LEFT, Gtk.CornerType.BOTTOM_RIGHT</code>.
fr: La méthode <code>set_placement(window_placement)</code> organise le cadrage du contenu de la fenêtre en fonction de ses barres de défilement. Les options possibles des arguments sont : <code>Gtk.CornerType.TOP_LEFT</code> (par défaut, les barres de défilement sont en bas et à droite de la fenêtre), <code>Gtk.CornerType.TOP_RIGHT, Gtk.CornerType.BOTTOM_LEFT, Gtk.CornerType.BOTTOM_RIGHT</code>.

note: (itstool) path: item/p
en: <code>set_hadjustment(adjustment)</code> and <code>set_vadjustment(adjustment)</code> set the Gtk.Adjustment <code>adjustment</code>. This is the representation of a value with a lower and upper bound, together with step and page increments, and a page size, and it is constructed as <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code> where the fields are of type <code>float</code>. (Note that <code>step_increment</code> is not used in this case, it can be set to <code>0</code>.)
fr: Les méthodes <code>set_hadjustment(ajustement)</code> et <code>set_vadjustment(ajustement)</code> définissent l'<code>ajustement</code> Gtk.Adjustment. C'est la représentation d'une valeur avec une limite inférieure et supérieure, des incréments d'étape et de page, d'une taille de page et est construite sous la forme <code>Gtk.Adjustment(valeur, inferieure, superieure, step_increment, page_increment, page_size)</code> où les champs sont du type <code>float</code>. (Notez que <code>step_increment</code> n'est pas utilisé dans notre exemple et qu'il peut être défini à <code>0</code>).

note: (itstool) path: info/desc
en: A separator widget
fr: Un élément graphique séparateur

note: (itstool) path: page/title
en: Separator
fr: Séparateur

note: (itstool) path: page/p
en: A horizontal and a vertical separator divide some labels.
fr: Un séparateur horizontal et un vertical séparent quelques étiquettes.

note: (itstool) path: section/title
en: API Reference
fr: Référence API

note: (itstool) path: page/title
en: Set up gedit for JavaScript development
fr: Configuration de gedit pour le développement en JavaScript

note: (itstool) path: section/title
en: Making code clearer
fr: Clarification du code

note: (itstool) path: section/p
en: Here are the options you want to make sure are turned on.
fr: Voici les options à activer.

note: (itstool) path: item/p
en: <gui>Display line numbers</gui> will help you compare the code you type in with the original, and make it easier to see which line is causing an error if there is a bug.
fr: <gui>Afficher les numéros de ligne</gui> va vous aider à comparer votre code avec l'original et trouver plus facilement la ligne qui provoque une erreur s'il y a un bogue.

note: (itstool) path: item/p
en: <gui>Highlight current line</gui> makes it easier to see which line you're on, when you have to go back and forth a lot.
fr: <gui>Surligner la ligne actuelle</gui> vous permet de retrouver plus facilement votre ligne active quand vous vous déplacez souvent.

note: (itstool) path: item/p
en: <gui>Highlight matching brackets</gui> helps you make sure you didn't leave out a bracket by accident.
fr: <gui>Surligner les parenthèses correspondantes</gui> vous permet de penser à refermer la parenthèse.

note: (itstool) path: section/title
en: Making editing easier
fr: Faciliter l'édition

note: (itstool) path: section/p
en: In gedit's <gui>Preferences</gui> dialog, click on the <gui>Editor</gui> tab. You should see something like this:
fr: Dans les <gui>Préférences</gui> de gedit, ouvrez l'onglet <gui>Éditeur</gui>. Cette boîte de dialogue s'affiche :

note: (itstool) path: section/p
en: Here, you want to have <gui>Enable automatic indentation</gui> turned on. This means that when you hit <key>Enter</key> the cursor stays indented as far as the last line was. This is extremely useful when writing JavaScript code, since it uses indentation to make it clearer which parts do what.
fr: Cochez la case <gui>Activer l'indentation automatique</gui>. Cela oblige le curseur à rester sur le même indent qu'à la ligne précédente lorsque vous pressez sur la touche <key>Entrée</key>. Cela est très important en JavaScript car ce langage utilise l'indentation pour clarifier les fonctions de chaque partie du programme.

note: (itstool) path: info/desc
en: An explanation of signals and callbacks in GTK+.
fr: Une explication des signaux et rappels dans GTK+.

note: (itstool) path: page/title
en: Signals and callbacks
fr: Signaux et rappels

note: (itstool) path: section/p
en: Like most GUI toolkits, GTK+ uses an event-driven programming model. When the user is doing nothing, GTK+ sits in the main loop and waits for input. If the user performs some action - say, a mouse click - then the main loop "wakes up" and delivers an event to GTK+.
fr: Comme la plupart des boîtes à outils d'interfaces utilisateurs, GTK+ utilise un modèle de programmation événementiel. Lorsque l'utilisateur ne fait rien, GTK+ attend qu'une entrée se fasse dans la boucle principale. Dès que l'utilisateur fait quelque chose (disons un clic de souris), alors la boucle principale « se réveille » et fournit un événement à GTK+.

note: (itstool) path: section/p
en: When widgets receive an event, they frequently emit one or more signals. Signals notify your program that "something interesting happened" by invoking functions you have connected to the signal. Such functions are commonly known as callbacks. When your callbacks are invoked, you would typically take some action. After a callback finishes, GTK+ will return to the main loop and await more user input.
fr: Lorsque les éléments graphiques reçoivent un événement, il émettent la plupart du temps un ou plusieurs signaux. Ces signaux indiquent à votre programme que « quelque chose d'intéressant vient de se passer » en exécutant les fonctions que vous leur avez connecté. Lorsque vos rappels sont exécutés, vous agissez normalement en conséquence. Après la fin d'un rappel, GTK+ retourne dans la boucle principale et attend d'autres événements.

note: (itstool) path: section/p
en: A generic example is: <code>handler_id = widget.connect("event", callback, data)</code>. <code>widget</code> is an instance of a widget we created earlier. Next, the <code>event</code> we are interested in. Each widget has its own particular events which can occur. For instance, if you have a Gtk.Button you usually want to connect to the "clicked" event: this means that when the button is clicked, the signal is issued. Another example is the <code>notify::property</code> signal: whenever a <link xref="properties.py">property</link> is modified on a GObject, instead of just emitting the <code>notify</code> signal, GObject associates as a detail to this signal emission the name of the property modified. This allows clients who wish to be notified of changes to only one property to filter most events before receiving them. Thirdly, the callback argument is the name of the callback function, which contains the code which runs when signals of the specified type are issued. Finally, the optional data argument includes any data which should be passed when the signal is issued.
fr: Voici un exemple générique : <code>handler_id = widget.connect(evenement, rappel, donnees)</code>. <code>widget</code> est un exemple d'élément graphique que nous avons créé un peu plus tôt. Puis vient l'<code>evenement</code> qui nous intéresse. Chaque élément graphique possède ses propres événements pouvant arriver. Par exemple, si vous connectez un Gtk.Button à l'événement « cliqué » : chaque fois que ce bouton est cliqué, le signal est émis. Un autre exemple avec le signal <code>notify::property</code> : chaque fois qu'une <link xref="properties.py">propriété</link> d'un GObject est modifiée, GObject associe comme détail à l'émission de ce signal, le nom de la propriété modifiée au lieu de seulement émettre le signal <code>notify</code>. Cela permet aux clients qui ne veulent être informés des modifications que d'une seule propriété de filtrer la plupart des événements avant de les recevoir. Troisièmement, l'argument de rappel est le nom de la fonction de rappel, qui contient le code en cours d'exécution quand les signaux de ce type spécifique sont émis. Enfin, l'argument optionnel de données inclut toute donnée devant être passée quand le signal est émis.

note: (itstool) path: section/p
en: The function returns a number (the <code>handler_id</code>) that identifies this particular signal-callback pair. This number is required to disconnect from a signal such that the callback function will not be called during any future or currently ongoing emissions of the signal it has been connected to, as in <code>widget.disconnect(handler_id)</code>.
fr: La fonction renvoie un nombre (le <code>handler_id</code>) qui identifie cette paire particulière de signal-rappel. Ce nombre est nécessaire pour se déconnecter d'un signal de façon à ce que la fonction de rappel ne soit plus appelée, ni par la suite, ni pendant les émissions du signal à laquelle elle est actuellement connectée, comme dans <code>widget.disconnect(handler_id)</code>.

note: (itstool) path: section/p
en: <link href="http://developer.gnome.org/gobject/stable/signal.html">Signals</link> in GObject documentation
fr: <link href="http://developer.gnome.org/gobject/stable/signal.html">Les signaux</link> dans la documentation GObject

note: (itstool) path: info/desc
en: Retrieve an integer or floating point number
fr: Renvoie un entier ou un nombre à virgule flottante

note: (itstool) path: page/p
en: Choose a number, by entering it or by clicking on the -/+ buttons!
fr: Choisissez un nombre en le saisissant ou en cliquant sur les boutons -/+ !

note: (itstool) path: info/desc
en: A number entry field that has + and - buttons
fr: Un champ de saisie de nombres avec des boutons + et -

note: (itstool) path: page/p
en: It's best used when it's obvious that only a number can be entered into it. In this example, two SpinButtons are used for the number of kittens and number of cans of tuna to give them.
fr: Son utilisation est optimale quand il apparaît évident que seul un nombre peut y être saisi. Dans cet exemple, nous utilisons deux BoutonDactivités pour définir le nombre de chatons et le nombre de boîtes de thon à leur donner.

note: (itstool) path: section/p
en: All the code for this sample goes in the SpinButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
fr: Tout le code de cet exemple va dans la classe SpinButtonExample. Le code ci-dessus crée une <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> pour nos éléments graphiques et la fenêtre qui les contient.

note: (itstool) path: section/title
en: Creating the SpinButtons
fr: Création des BoutonDactivités

note: (itstool) path: section/p
en: We can use the new_with_range function to create a new SpinButton quickly. Its first parameter is the SpinButton's starting value, its second is the maximum value, and its third is how much to increment it when the plus or minus buttons are pressed.
fr: Utilisons la fonction new_with_range pour créer rapidement un nouveau BoutonDactivité. Son premier paramètre est la valeur de départ du BoutonDactivité, le second est la valeur maximale et le troisième est la valeur de l'incrément lorsque les boutons plus ou moins sont pressés.

note: (itstool) path: section/p
en: After we create the first SpinButton, we connect its value-changed signal to a function which handles what happens when the number inside either SpinButton changes.
fr: Après avoir généré le premier BoutonDactivité, nous connectons son signal value-changed à une fonction qui gère ce qui se passe quand le nombre à l'intérieur d'un des deux BoutonDactivités change.

note: (itstool) path: section/p
en: The commented-out lines here show things you can do to customize your SpinButton. You can set the number of digits which go after the decimal point, for example, or tell it to wrap the number around if it goes past the upper or lower bounds that you set.
fr: Ici, les lignes placées en commentaires vous montrent des moyens de personnaliser votre BoutonDactivité. Vous pouvez, par exemple, définir le nombre de décimales après la virgule, ou lui indiquer qu'il doit aller à la ligne s'il dépasse les limites supérieures ou inférieures que vous avez définies.

note: (itstool) path: note/p
en: For the kitties' sake, please don't use set_digits to allow a decimal number of kittens.
fr: Dans l'intérêt des chatons, il est préférable de ne pas autoriser set_digits à paramétrer un nombre décimal de chatons.

note: (itstool) path: section/title
en: Creating the rest of the UI
fr: Création du reste de l'interface utilisateur

note: (itstool) path: section/p
en: We create each <link xref="label.js">Label</link> individually, and then string them together along with the SpinButtons. The last label needs to show the number of cans of tuna per kitten, so it has a variable in the middle, which corresponds to an equation that uses the SpinButtons' get_value functions to find out what they're set at. JavaScript's Math function's floor method is used to round the number of cans of tuna per kitten down to the nearest whole number.
fr: Créons chaque <link xref="label.js">étiquette</link> individuellement et attachons-les ensemble avec les BoutonDactivités. La dernière étiquette doit afficher le nombre de boîtes de thon par chaton, elle comprend donc une variable au milieu qui correspond à une équation qui utilise les fonctions get_value des BoutonDactivités pour trouver à quelles valeurs ils sont définis. On utilise une méthode mathématique de base en JavaScript pour arrondir le nombre de boîtes de thon par chaton à l'entier le plus proche.

note: (itstool) path: section/p
en: Here we use <link xref="grid.js">Grid</link> widgets to keep everything organized. One Grid holds the labels and SpinButtons in order, while the next puts that Grid on top and the final Label on the bottom.
fr: Ici, nous utilisons des éléments graphiques <link xref="grid.js">grille</link> pour tout ranger. Une grille maintient les étiquettes et les BoutonDactivités dans l'ordre pendant que l'autre affiche la première grille en haut et la dernière étiquette en bas.

note: (itstool) path: section/p
en: There isn't a wrong way to organize things in Grids, so long as you like how it turns out. In this case, the top Grid has a margin on the bottom to keep it evenly spaced from the bottom Label, and the bottom Label is inside a separate Grid so it will be centered relative to the Labels and SpinButtons on the top.
fr: Il n'y a pas de mauvaise façon de ranger les éléments dans les grilles, à partir du moment où cela vous convient. Dans notre cas, la grille du haut comporte une marge en bas pour la séparer de l'étiquette qui se trouve au-dessous et qui est dans une grille indépendante centrée par rapport aux étiquettes et BoutonDactivités du haut.

note: (itstool) path: section/p
en: Finally, we add the larger Grid to the window, then tell the window to show itself and all the widgets inside of it.
fr: Enfin, ajoutons la grille la plus grande à la fenêtre et indiquons à la fenêtre de s'afficher avec tous les éléments graphiques à l'intérieur.

note: (itstool) path: section/title
en: Function which handles the SpinButtons' numerical values being adjusted
fr: Fonction prenant en charge les valeurs numériques des BoutonDactivités en cours de réglage

note: (itstool) path: section/p
en: Here we update the perKitten variable based on the SpinButtons' new values, and use the set_label property to refresh what _lastLabel shows. Since both SpinButtons have their value-changed signal connected to this function, every time either of the numbers changes this function will update the Label.
fr: Ici, nous mettons à jour la variable parchaton en fonction des nouvelles valeurs des BoutonDactivités et utilisons les propriétés de set_label pour actualiser ce qu'affiche _lastLabel. Comme les deux BoutonDactivités ont leur signal value-changed connecté à cette fonction, celle-ci met à jour l'étiquette à chaque fois qu'un des nombres change.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished SpinButtonExample class, and set the application running.
fr: Enfin, nous créons un nouvel exemple de la classe SpinButtonExample et démarrons l'application.

note: (itstool) path: info/desc
en: Retrieve an integer or floating-point number from the user.
fr: Renvoie un entier ou un nombre à virgule flottante de l'utilisateur.

note: (itstool) path: section/title
en: Useful methods for a SpinButton widget
fr: Méthodes utiles pour un élément graphique BoutonDactivité

note: (itstool) path: section/p
en: A Gtk.Adjustment is needed to construct the Gtk.SpinButton. This is the representation of a value with a lower and upper bound, together with step and page increments, and a page size, and it is constructed as <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code> where the fields are of type <code>float</code>; <code>step_increment</code> is the increment/decrement that is obtained by using the cursor keys or the buttons of the spinbutton. Note that <code>page_increment</code> and <code>page_size</code> are not used in this case, and they should be set to <code>0</code>.
fr: Il faut une valeur Gtk.Adjustment pour construire le Gtk.SpinButton. C'est la représentation d'une valeur avec une limite supérieure et une limite inférieure, avec des incréments d'étape et de page, avec une taille de page et elle se présente sous la forme <code>Gtk.Adjustment(valeur, inferieure, superieure, step_increment, page_increment, page_size)</code> où les champs sont du type <code>float</code> ; <code>step_increment</code> est l'incrément ou le décrément obtenu en agissant sur les touches du curseur ou sur les boutons du BoutonDactivité. Notez que les valeurs <code>page_increment</code> et <code>page_size</code> ne sont pas utilisés dans ce cas et qu'ils doivent être définis à <code>0</code>.

note: (itstool) path: item/p
en: If you want the value of the spinbutton to wrap around when they exceed the maximum or the minimum, set <code>set_wrap(True)</code>. The <code>"wrapped"</code> signal is emitted when this happens.
fr: Si vous voulez que la valeur du BoutonDactivité aille à la ligne quand elle dépasse les limites supérieure ou inférieure, définissez la fonction <code>set_wrap(True)</code> sur vrai. Le signal <code>"wrapped"</code> est alors émis quand cela se produit.

note: (itstool) path: item/p
en: <code>set_digits(digits)</code> sets the precision to be displayed by the spinbutton, up to 20 digits.
fr: La méthode <code>set_digits(caracteres)</code> définit la précision d'affichage du BoutonDactivité, jusqu'à 20 caractères.

note: (itstool) path: item/p
en: To get the value of the spinbutton as an integer, use <code>get_value_as_int()</code>.
fr: Pour avoir la valeur du BoutonDactivité sous forme d'un nombre entier, utilisez <code>get_value_as_int()</code>.

note: (itstool) path: info/desc
en: Retrieve an integer or floating point number.
fr: Renvoie un entier ou un nombre à virgule flottante.

note: (itstool) path: info/desc
en: A spinner animation
fr: L'animation d'un indicateur d'activité

note: (itstool) path: page/title
en: Spinner
fr: Indicateur d'activité

note: (itstool) path: page/p
en: This Spinner is stopped and started by pressing the spacebar.
fr: Cet indicateur d'activité s'arrête et démarre en appuyant sur la barre d'espace.

note: (itstool) path: note/p
en: <code>Gdk.keyval_name(event.keyval)</code> converts the key value <code>event.keyval</code> into a symbolic name. The names and corresponding key values can be found <link href="http://git.gnome.org/browse/gtk+/tree/gdk/gdkkeysyms.h">here</link>,but for instance <code>GDK_KEY_BackSpace</code> becomes the string <code>"BackSpace"</code>.
fr: La fonction <code>Gdk.keyval_name(event.keyval)</code> donne à la touche <code>event.keyval</code> un nom symbolique. Les noms avec leurs valeurs correspondantes se trouvent <link href="http://git.gnome.org/browse/gtk+/tree/gdk/gdkkeysyms.h">ici</link>, mais par exemple, <code>GDK_KEY_BackSpace</code> devient la chaîne <code>« Retour arrière »</code>.

note: (itstool) path: info/desc
en: Report messages of minor importance to the user
fr: Rapporte les messages d'information d'importance mineure pour l'utilisateur

note: (itstool) path: page/title
en: Statusbar
fr: Barre de statut

note: (itstool) path: page/p
en: This statusbar is used to demonstrate how messages are stacked in a last-in-first-out order. The message at the top of the stack is always the one displayed.
fr: Cette barre de statut sert à démontrer comment les messages sont empilés dans l'ordre « le dernier au-dessus ». Le message au sommet de la pile est toujours celui qui est affiché.

note: (itstool) path: info/desc
en: Show notifications in a dedicated statusbar
fr: Afficher les notifications dans une barre de statut donnée

note: (itstool) path: page/p
en: This statusbar keeps track of how many times you've clicked a button. Applications like <link href="http://projects.gnome.org/gedit/">gedit</link> use statusbars to display information at a glance, and show notifications without interrupting the user.
fr: Cette barre de statut enregistre le nombre de fois que vous avez cliqué sur un bouton. Des applications comme <link href="http://projects.gnome.org/gedit/">gedit</link> utilisent une barre de statut pour rendre les informations visibles d'un coup d'œil sans interrompre l'utilisateur.

note: (itstool) path: page/p
en: Messages pushed to a statusbar go on top of its stack, and can be popped off to show the next-most recent one. You can also clear away every message of a specific type all at once. This sample application demonstrates these functions.
fr: Les nouveaux messages sont ajoutés au sommet de la pile d'une barre de statut et peuvent être affichés pour consulter les plus récents. Vous pouvez aussi effacer tous les messages d'un type spécifique d'un seul coup. Cet exemple d'application explique ces fonctions.

note: (itstool) path: section/p
en: All the code for this sample goes in the StatusbarExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
fr: Tout le code de cet exemple va dans la classe StatusbarExample. Le code ci-dessus crée une <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> pour nos éléments graphiques et la fenêtre qui les contient.

note: (itstool) path: section/title
en: Creating the buttons
fr: Création des boutons

note: (itstool) path: section/p
en: This code creates the <link href="grid.js.page">Gtk.Grid</link> that we'll use to organize the buttons, and attaches the buttons to it in order. It then creates a <link href="paned.js.page">Gtk.Frame</link> which will take up most of the window and has a large amount of padding around the buttons, and adds the Grid to the Frame. Note that we still need to put the Frame into the Paned interface, and then add it to the ApplicationWindow.
fr: Ce code génère la grille <link href="grid.js.page">Gtk.Grid</link> que nous utiliserons pour organiser les boutons et les mettre dans le bon ordre. Il génère ensuite un cadre <link href="paned.js.page">Gtk.Frame</link> qui occupe la majeure partie de la fenêtre et laisse beaucoup de marge autour des boutons, puis lui ajoute la grille. Il nous reste encore à placer le cadre dans le panneau interface et l'ajouter à l'ApplicationWindow.

note: (itstool) path: section/title
en: Creating the statusbar
fr: Création de la barre de statut

note: (itstool) path: section/p
en: Here we create the Gtk.Statusbar, and push a message to it to start off with. Then we give it its own narrow frame at the bottom of the window.
fr: Ici, nous créons la barre de statuts Gtk.Statusbar et lui ajoutons un message pour commencer. Puis, nous lui attribuons son propre cadre étroit au bas de la fenêtre.

note: (itstool) path: section/p
en: Every message needs to have a context id, which is an integer value you can get from the statusbar with the get_context_id() function. Its only parameter is the string value you use to describe that particular context id. Normally, you'll get a new context id for different kinds of messages, so that you can use the remove() function to remove a specific message and not just the most recent one on the stack. This is a simple example with only one kind of message, though, so we're just using one for everything.
fr: Chaque message doit avoir un identifiant de contexte, une valeur entière qui peut vous être donnée par la fonction get_context_id(). Son seul paramètre est la valeur de la chaîne que vous utilisez pour décrire cet identifiant particulier. Normalement, il y a un identifiant différent selon le type de message, de façon à pouvoir utiliser la fonction remove() pour supprimer un message spécifique et non pas seulement le dernier au sommet de la pile. Voici un exemple simple avec un seul type de message, nous n'en utiliserons donc qu'un seul pour tout.

note: (itstool) path: section/p
en: We use the push() function to push a new message onto the stack. Its first parameter is the context id, and its second is the message.
fr: La fonction push(), ajoute un nouveau message au-dessus de la pile. Son premier paramètre est l'identifiant de contexte, et le second, le message.

note: (itstool) path: section/p
en: This code finishes up creating the window, by packing the frames into the pane, adding it to the window, and telling the window to show all child widgets.
fr: Ce code se termine par la création de la fenêtre, le placement du cadre dans le panneau et l'ordre donné à la fenêtre d'afficher tous ses éléments graphiques enfants.

note: (itstool) path: section/title
en: Functions for interacting with the statusbar
fr: Fonctions interagissant avec la barre de statut

note: (itstool) path: section/p
en: Here we have functions which demonstrate pushing a message onto the stack, popping the top one off of it, and clearing all messages of a particular context id. The pop() function just takes one parameter, which is the context id for the type of message you want to pop off the most recent one of. The remove_all() function works the same way, except it removes all messages of that type from the stack.
fr: Voici des fonctions qui montrent comment ajouter un message à la pile, comment afficher celui qui se trouve au sommet et comment effacer tous les messages avec un identifiant de contexte particulier. La fonction pop() ne prend qu'un argument, l'identifiant de contexte du type de message le plus récent à afficher. La fonction remove_all() se comporte de la même façon, sauf qu'elle supprime de la pile tous les messages de ce type.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished StatusbarExample class, and set the application running.
fr: Enfin, nous créons un nouvel exemple de la classe StatusbarExample terminée et nous démarrons l'application.

note: (itstool) path: page/p
en: This statusbar tells you if you click the button or if you press any key (and which key).
fr: Cette barre de statut vous informe si vous cliquez sur le bouton ou si vous appuyez sur n'importe quelle touche (et sur quelle touche).

note: (itstool) path: note/p
en: <code>Gdk.keyval_name(event.keyval)</code> converts the key value <code>event.keyval</code> into a symbolic name. The names and corresponding key values can be found <link href="http://git.gnome.org/browse/gtk+/tree/gdk/gdkkeysyms.h">here</link>, but for instance <code>GDK_KEY_BackSpace</code> becomes the string <code>"BackSpace"</code>.
fr: La méthode <code>Gdk.keyval_name(event.keyval)</code> convertit la valeur des touches <code>event.keyval</code> en noms symboliques. Les noms et les valeurs correspondantes des touches se trouvent <link href="http://git.gnome.org/browse/gtk+/tree/gdk/gdkkeysyms.h">ici</link>. À titre d'exemple, <code>GDK_KEY_BackSpace</code> devient la chaîne <code>« Retour arrière »</code>.

note: (itstool) path: section/title
en: Useful methods for a Statusbar widget
fr: Méthodes utiles pour un élément graphique BarreDeStatut

note: (itstool) path: item/p
en: <code>pop(context_id)</code> removes the first message in the statusbar stack with the given <code>context_id</code>.
fr: La fonction <code>pop(context_id)</code> efface le premier message de la pile de la barre de statut avec le <code>context_id</code> donné.

note: (itstool) path: item/p
en: <code>remove_all(context_id)</code> removes all the messages in the statusbar stack with the given <code>context_id</code>.
fr: La méhode <code>remove_all(context_id)</code> efface tous les messages de la pile de la barre de statut ayant l'identifiant <code>context_id</code> donné.

note: (itstool) path: item/p
en: <code>remove(context_id, message_id)</code> removes the message with the given <code>message_id</code> in the statusbar stack with the given <code>context_id</code>. The <code>message_id</code> is returned by <code>push(context_id, "the message")</code> when pushing the message on the statusbar.
fr: La méthode <code>remove(context_id, message_id)</code> efface le message de la pile de la barre de statut avec le <code>context_id</code> donné. Le <code>message_id</code> est renvoyé par <code>push(context_id, lemessage)</code> quand il pousse le message dans la barre des statut.

note: (itstool) path: page/p
en: This statusbar tells you what's going on.
fr: Cette barre de statut vous indique ce qui se passe.

note: (itstool) path: info/desc
en: An explanation of how to deal with strings in Python and GTK+.
fr: Une explication sur l'utilisation des chaînes de caractères dans Python et GTK+.

note: (itstool) path: page/title
en: Strings
fr: Chaînes de caractères

note: (itstool) path: section/title
en: Strings in Python 2
fr: Les chaînes de caractères dans Python 2

note: (itstool) path: section/p
en: Python 2 comes with two different kinds of objects that can be used to represent strings, <code>str</code> and <code>unicode</code>. Instances of <code>unicode</code> are used to express Unicode strings, whereas instances of the <code>str</code> type are byte representations (the encoded string). Under the hood, Python represents Unicode strings as either 16- or 32-bit integers, depending on how the Python interpreter was compiled.
fr: Python 2 est livré avec deux types différents d'objets qui peuvent être utilisés pour représenter des chaînes : <code>str</code> et <code>unicode</code>. Les instances du type <code>unicode</code> sont utilisées pour exprimer des chaînes Unicode, alors que les exemples du type <code>str</code> sont des représentations d'octets (la chaîne codée). En interne, Python représente les chaînes Unicode par des entiers de 16 ou de 32 bits, en fonction du type de compilation de l'interpréteur Python.

note: (itstool) path: section/p
en: Unicode strings can be converted to 8-bit strings with <code>unicode.encode()</code>. Python’s 8-bit strings have a <code>str.decode()</code> method that interprets the string using the given encoding (that is, it is the inverse of the <code>unicode.encode()</code>):
fr: Les chaînes Unicode peuvent être converties en 8 bits avec <code>unicode.encode()</code>. Les chaînes Python en 8 bits contiennent une méthode <code>str.decode()</code> qui interprète la chaîne avec le codage qui lui est attribué (c'est donc l'inverse de <code>unicode.encode()</code>) :

note: (itstool) path: section/p
en: Unfortunately, Python 2.x allows you to mix <code>unicode</code> and <code>str</code> if the 8-bit string happened to contain only 7-bit (ASCII) bytes, but would get <sys>UnicodeDecodeError</sys> if it contained non-ASCII values.
fr: Malheureusement, Python 2.x vous permet de mélanger les types <code>unicode</code> et <code>str</code> s'il arrivait que la chaîne de 8 bits ne contienne que des octets de 7 bits (ASCII), mais retourne l'erreur <sys>UnicodeDecodeError</sys> si elle contient des valeurs qui ne sont pas ASCII.

note: (itstool) path: section/title
en: Strings in Python 3
fr: Les chaînes dans Python 3

note: (itstool) path: section/p
en: Since Python 3.0, all strings are stored as Unicode in an instance of the <code>str</code> type. Encoded strings on the other hand are represented as binary data in the form of instances of the bytes type. Conceptionally, <code>str</code> refers to text, whereas bytes refers to data. Use <code>encode()</code> to go from <code>str</code> to <code>bytes</code>, and <code>decode()</code> to go from <code>bytes</code> to <code>str</code>.
fr: Depuis la version 3.0 de Python, toutes les chaînes sont stockées en Unicode dans une représentation du type <code>str</code>. D'autre part, les chaînes codées sont stockées en données binaires sous forme d'octets. Conceptuellement, le type <code>str</code> représente du texte, alors que les octets représentent des données. Utilisez la méthode <code>encode()</code> pour passer de <code>str</code> à <code>bytes</code> et <code>decode()</code> pour passer de <code>bytes</code> à <code>str</code>.

note: (itstool) path: section/p
en: In addition, it is no longer possible to mix Unicode strings with encoded strings, because it will result in a <code>TypeError</code>:
fr: En plus, il n'est plus possible de mélanger des chaînes Unicode avec des chaînes codées, car cela retournerait une erreur <code>TypeError</code> :

note: (itstool) path: section/title
en: Unicode in GTK+
fr: Unicode dans GTK+

note: (itstool) path: section/p
en: GTK+ uses UTF-8 encoded strings for all text. This means that if you call a method that returns a string you will always obtain an instance of the <code>str</code> type. The same applies to methods that expect one or more strings as parameter, they must be UTF-8 encoded. However, for convenience PyGObject will automatically convert any unicode instance to str if supplied as argument:
fr: GTK+ utilise des chaînes au format UTF-8 pour tout ce qui est texte. Cela signifie que, si vous appelez une méthode qui renvoie une chaîne, vous obtenez toujours une représentation du type <code>str</code>. Cela s'applique également aux méthodes qui considèrent une ou plusieurs chaînes comme paramètres, elles doivent aussi être codées en UTF-8. Cependant, pour plus de souplesse, PyGObject convertit automatiquement n'importe quelle représentation Unicode au format str si vous lui donnez comme argument :

note: (itstool) path: section/p
en: would return <code>False</code>, with the warning <code>__main__:1: UnicodeWarning: Unicode equal comparison failed to convert both arguments to Unicode - interpreting them as being unequal</code> (<code>Gtk.Label.get_text()</code> will always return a <code>str</code> instance; therefore, <code>txt</code> and <code>unicode_string</code> are not equal).
fr: devrait renvoyer <code>False</code>, avec l'avertissement <code>__main__:1: UnicodeWarning: Unicode equal comparison failed to convert both arguments to Unicode - interpreting them as being unequal</code> (<code>Gtk.Label.get_text()</code> renvoie toujours une représentation <code>str</code> ; en conséquence, <code>txt</code> et <code>unicode_string</code> sont inégaux).

note: (itstool) path: section/p
en: This is especially important if you want to internationalize your program using <link href="http://docs.python.org/library/gettext.html"><code>gettext</code></link>. You have to make sure that <code>gettext</code> will return UTF-8 encoded 8-bit strings for all languages.
fr: Cela est particulièrement important si vous voulez internationnaliser votre programme avec <link href="http://docs.python.org/library/gettext.html"><code>gettext</code></link>. Vous devez vous assurer que <code>gettext</code> va renvoyer des chaînes codées en UTF-8 pour toutes les langues.

note: (itstool) path: section/p
en: In general it is recommended to not use <code>unicode</code> objects in GTK+ applications at all, and only use UTF-8 encoded <code>str</code> objects since GTK+ does not fully integrate with <code>unicode</code> objects.
fr: D'une manière générale, nous vous recommandons de ne pas du tout utiliser d'objets <code>unicode</code> dans les applications GTK+, mais seulement des objets <code>str</code> codés en UTF-8, car GTK+ n'intègre pas tous les objets <code>unicode</code>.

note: (itstool) path: info/desc
en: A "light switch" style toggle
fr: Un bouton de basculement du style « interrupteur électrique »

note: (itstool) path: page/title
en: Switch
fr: Switch (interrupteur)

note: (itstool) path: page/p
en: This switch toggles the title of the window.
fr: Cet interrupteur bascule le titre de la fenêtre.

note: (itstool) path: info/desc
en: A sliding switch that can be flipped on and off
fr: Un interrupteur à glissière qui peut être allumé ou éteint

note: (itstool) path: note/p
en: The window will contain a "broken image" icon instead of a picture if picture files named <file>redfox.png</file>, <file>muteswan.png</file>, <file>fruitbat.png</file>, and <file>gentoopenguin.png</file> aren't in the same directory. You can change the code and the pictures around as you like, but the Creative Commons-licensed photos used in this example were taken from the following sources and cropped to 640x425:
fr: Si les fichiers <file>redfox.png</file>, <file>muteswan.png</file>, <file>fruitbat.png</file> et <file>gentoopenguin.png</file> ne se trouvent pas dans le même dossier, la fenêtre affichera une icône « image brisée ». Vous pouvez modifier le code et les images comme bon vous semble, mais sachez que les photos sous licence Creative Commons utilisées dans cet exemple proviennent des sources suivantes et ont été rognées à 640x435 :

note: (itstool) path: item/p
en: <link href="http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg">Red fox photo</link> by Rob Lee, licensed <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>
fr: <link href="http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg">Red fox photo</link> (renard rouge) par Rob Lee, licence <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>

note: (itstool) path: item/p
en: <link href="http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg">Gentoo penguin photo</link> by Ken Funakoshi, licensed <link href="http://creativecommons.org/licenses/by-sa/2.0/deed.en">CC-By-SA</link>
fr: <link href="http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg">Gentoo penguinphoto</link> (pingouin) par Ken Funakoshi, licence <link href="http://creativecommons.org/licenses/by-sa/2.0/deed.en">CC-By-SA</link>

note: (itstool) path: item/p
en: <link href="http://www.flickr.com/photos/shekgraham/127431519/in/photostream/">Fruit bat photo</link> by Shek Graham, licensed <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>
fr: <link href="http://www.flickr.com/photos/shekgraham/127431519/in/photostream/">Fruit bat photo</link> (chauve-souris) par Shek Graham, licence <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>

note: (itstool) path: item/p
en: <link href="http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg">Mute swan photo</link> by Mindaugas Urbonas, licensed <link href="http://creativecommons.org/licenses/by-sa/2.5/deed.en">CC-By-SA</link>
fr: <link href="http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg">Mute swan photo</link> (cygne) par Mindaugas Urbonas, licence <link href="http://creativecommons.org/licenses/by-sa/2.5/deed.en">CC-By-SA</link>

note: (itstool) path: section/p
en: All the code for this sample goes in the SwitchExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
fr: Tout le code de cet exemple est contenu dans la classe SwitchExample. Le code ci-dessus crée une <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> pour nos éléments graphiques et la fenêtre qui les contient.

note: (itstool) path: section/title
en: Creating the switches
fr: Création des interrupteurs

note: (itstool) path: section/p
en: We first create the <link xref="image.js">Image</link> that the switches will control. Remember that a file named <file>redfox.png</file> needs to be in the same directory as this application.
fr: Créons en premier l'<link xref="image.js">Image</link> que les interrupteurs vont contrôler. Souvenez-vous qu'un fichier nommé <file>redfox.png</file> doit être présent dans le même dossier que cette application.

note: (itstool) path: section/p
en: We use a <link xref="label.js">Label</link> to mark each Switch, and give them a bit of a margin on the right so that they aren't crammed right next to the Switches. After that we create the Switches, and set them to be switched off by default.
fr: Utilisons un <link xref="label.js">Label</link> pour étiqueter chaque interrupteur et laissons-leur un peu de marge à droite pour qu'ils ne débordent pas les uns sur les autres. Créons ensuite les interrupteurs et paramétrons-les pour qu'ils soient en position « éteint » par défaut.

note: (itstool) path: section/p
en: The signal a switch sends out when it's flipped on or off is called notify::active. After we create each switch, we connect its notify::active signal to a function called _switchFlip. If you have multiple switches that each do something different, you might want to connect them to different functions, but here they're both used for the same thing: To control what picture's displayed by _image.
fr: Le signal qu'un interrupteur envoie quand il est basculé dans un sens ou dans l'autre est appelé notify::active. Après avoir créé chaque interrupteur, connectons son signal notify::active à une fonction appelée _switchFlip. Si vous avez plein d'interrupteurs qui font chacun quelque chose de différent, vous pouvez les connecter à différentes fonctions, mais ici, ils sont tous les deux utilisés pour la même chose : contrôler quelle image est affichée par _image.

note: (itstool) path: section/p
en: We create a <link xref="grid.js">Grid</link> for the Labels and Switches first, so that we can organize them in a 2x2 layout with a margin between it and the Image. Then we put that Grid into a larger 2x1 Grid that has the Image on top, and the Grid with the Labels and Switches on the bottom.
fr: Créons une <link xref="grid.js">grille</link> pour les étiquettes et les interrupteurs de façon à les organiser dans un agencement 2x2 avec une marge entre eux et l'image. Ensuite, mettons cette grille dans une plus grande au format 2x1 qui contient l'image en haut et la grille avec les étiquettes et les interrupteurs en bas.

note: (itstool) path: section/title
en: Function which handles the switches being flipped
fr: Fonction prenant en charge la commutation des interrupteurs

note: (itstool) path: section/p
en: Each time a Switch is flipped, this function checks to see which of the two Switches are active afterwards, using the Switches' built-in get_active() function. It then changes the Image accordingly. You can change the filenames around as you like, so long as you have pictures to go with them.
fr: À chaque fois qu'un interrupteur est activé, cette fonction vérifie lequel des deux interrupteurs est allumé à l'aide de la fonction intégrée get_active(). Elle affiche ensuite l'image correspondante. Vous pouvez modifier les noms des fichiers comme bon vous semble, tant que les images correspondantes sont dans le même dossier.

note: (itstool) path: section/title
en: Creating the AboutDialog
fr: Création de la boîte de dialogue « À propos »

note: (itstool) path: section/p
en: The first step is building the <link xref="gmenu.js">GMenu</link> that the "About" button goes into. This is the menu that appears when you click the application's name in the upper-left corner of the screen, next to the Activities menu. Our menu only has two options in it: About, and Quit.
fr: La première étape est de créer le <link xref="gmenu.js">GMenu</link> dans lequel s'insère le bouton « À propos ». C'est ce menu qui s'affiche quand vous cliquez dans le coin gauche supérieur de l'écran, à côté du menu Activités. Notre menu ne contient que deux options : À propos et Quitter.

note: (itstool) path: section/p
en: An <link xref="aboutdialog.js">AboutDialog</link> has a lot of different things you can set, to credit everyone who worked on the application and leave a note to whomever reads it. In this case, the copyright section contains our note and credits the original photographers, while the artists section shows you a list of the photographers with links to the original photos when you click the Credits button. The web URLs put after their names in the array turn their names into clickable links in the Credits section.
fr: Vous pouvez définir beaucoup de choses très différentes dans une boîte de dialogue <link xref="aboutdialog.js">À propos</link>, comme créditer tous les contributeurs ayant participé au développement de l'application et laisser une note à qui veut la lire. Dans notre cas, la section licence contient nos notes et les crédits aux photographes auteurs, alors que la section artistes affiche une liste des photographes avec les liens vers les images originales quand vous cliquez sur le bouton Crédits. Les liens URL qui suivent leurs noms les transforment en liens cliquables vous renvoyant à la section Crédits.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished SwitchExample class, and set the application running.
fr: Enfin, créons une nouvelle instance de la classe SwitchExample et démarrons l'application.

note: (itstool) path: page/p
en: This Switch makes the title appears and disappear.
fr: Cet interrupteur fait apparaître et disparaître le titre.

note: (itstool) path: section/title
en: Useful methods for a Switch widget
fr: Méthodes utiles pour un élément graphique Switch

note: (itstool) path: page/p
en: This Switch toggles the title.
fr: Cet interrupteur bascule le titre.

note: (itstool) path: info/desc
en: Widget which displays a GtkTextBuffer
fr: L'élément graphique qui affiche un GtkTextBuffer

note: (itstool) path: page/title
en: TextView widget
fr: Élément graphique TextView

note: (itstool) path: note/p
en: If we press "enter", we have a new line.
fr: En appuyant sur « Entrée », nous créons une nouvelle ligne.

note: (itstool) path: note/p
en: If we press "enter" more times then there are lines in the default sized window, then a vertical scrollbar appears.
fr: En appuyant encore de nombreuses fois sur « Entrée », d'autres lignes sont créées dans la fenêtre de taille par défaut, puis une barre de défilement verticale apparaît.

note: (itstool) path: note/p
en: If we write a long sentence, the text will wrap breaking lines between words.
fr: Si nous écrivons une longue phrase, la césure se fait entre deux mots.

note: (itstool) path: note/p
en: If we have a loooooooooooooooooooooooooooooooooooong (that was long) word, a* horizontal scrollbar will appear.
fr: Si nous avons un loooooooooooooooooooooooooooooooooooong mot, une barre de défilement horizontale apparaît.

note: (itstool) path: page/p
en: This is an example of Gtk.TextView
fr: Ceci est un exemple de Gtk.TextView

note: (itstool) path: info/desc
en: A multiline text editor
fr: Un éditeur de texte multiligne

note: (itstool) path: page/p
en: A TextView is really (or at least usually) a nested set of three objects.
fr: Un élément graphique TextView est en réalité (le plus souvent) une combinaison de trois objets.

note: (itstool) path: item/p
en: At the bottom there is a <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextBuffer.html">TextBuffer</link>. This holds the text itself.
fr: En bas se trouve un tampon <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextBuffer.html">TextBuffer</link> qui contient le texte lui-même.

note: (itstool) path: item/p
en: In the middle there is the <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextView.html">TextView</link>, which is a widget that lets you see and edit the text in the buffer. It automatically resizes itself depending on how much text there is.
fr: Au milieu, nous trouvons l'élément graphique <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextView.html">TextView</link>, qui nous permet d'afficher et de modifier le texte du tampon. Il se redimensionne automatiquement en fonction de la quantité de texte qu'il contient.

note: (itstool) path: page/p
en: If you want to change what text is displayed in the TextView, you act on the TextBuffer, since it's what actually holds the text. The same goes for if you want to see what text someone typed in. This sample application lets you talk to a (make-believe) penguin, and checks the TextBuffer to see if you typed the word "fish" anywhere in it.
fr: Si vous modifiez le texte affiché dans le TextView, vous agissez sur le TextBuffer puisque c'est lui qui contient effectivement le texte. Procédez de la même manière si vous souhaitez connaître le texte saisi par quelqu'un. Cet exemple d'application vous permet de parler à un pingouin (imaginaire) et parcourt le TextBuffer pour voir si vous avez saisi le mot « poisson » quelque part.

note: (itstool) path: note/p
en: Real-life penguin populations are declining fast, because climate change is melting the ice that they live on and killing the fish that they eat. If you'd like to play a (somewhat silly) GNOME game based on this premise, take a look at <link href="http://pingus.seul.org/">Pingus</link>.
fr: Dans la vraie vie, les populations de pingouins déclinent rapidement, à cause du changement climatique qui fait fondre les glaces sur lesquels ils vivent et raréfie les stocks de poissons dont ils se nourrissent. Allez jeter un coup d'œil à <link href="http://pingus.seul.org/">Pingus.</link> si vous voulez jouer à un jeu GNOME (un peu stupide) basé sur ce constat.

note: (itstool) path: section/p
en: All the code for this sample goes in the TextViewExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
fr: Tout le code de cet exemple tient dans la classe TextViewExample. Le code ci-dessus crée une <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> pour nos éléments graphiques et la fenêtre qui les contient.

note: (itstool) path: section/title
en: Creating the TextView
fr: Création de l'élément graphique TextView

note: (itstool) path: section/p
en: Our first step in this example is to create the <link xref="label.js">Label</link> that the penguin will use to talk to you. We set the text in it to wrap by setting its wrap property to true, but we'll use a different method on the TextView itself that allows for more fine-grained control.
fr: Pour commencer, créons le <link xref="label.js">Label</link> (étiquette) que le pingouin va utiliser pour dialoguer avec vous. Définissons la propriété de césure du texte de l'étiquette sur wrap (césure) en lui attribuant la valeur « true », mais nous utiliserons une méthode différente sur l'élément graphique TextView lui-même pour avoir un contrôle plus fin.

note: (itstool) path: section/p
en: Our first step is to create a TextBuffer to put the words into. After that we create the TextView, and tell it to use the TextBuffer we created as its buffer. We also set it to be editable, since we want to be able to type new things in.
fr: La première étape consiste à créer un élément graphique TextBuffer pour y placer les mots. Ensuite, nous créons l'élément TextView et nous lui indiquons d'utiliser le TextBuffer comme tampon. Nous le paramétrons aussi pour qu'il soit modifiable (editable), car nous voulons pouvoir y saisir d'autres choses.

note: (itstool) path: section/p
en: The first <link xref="grid.js">Grid</link> we create only has the Label and the ScrolledWindow inside it.
fr: Le premier <link xref="grid.js">Grid</link> (grille) que nous avons créé ne contient que l'étiquette et la ScrolledWindow.

note: (itstool) path: section/p
en: We create a <link xref="button.js">Button</link> to send your message to the penguin, and a new Grid that has the other one on top and the Button on the bottom. The Button has a margin on top, so that it isn't squished up against the ScrolledWindow.
fr: Nous créons un <link xref="button.js">Button</link> (bouton) pour envoyer votre message au pingouin et un nouveau Grid (grille) qui contient l'autre grille en haut et le bouton en bas. Le bouton comporte une marge (margin) dans sa partie supérieure, de telle sorte qu'il n'est pas collé contre la ScrolledWindow.

note: (itstool) path: section/p
en: Finally, we attach the main Grid to the window, then we tell the window and everything inside it to become visible when the application is run.
fr: Enfin, nous relions la grille principale à la fenêtre, puis indiquons à la fenêtre de s'afficher avec son contenu quand l'application est lancée.

note: (itstool) path: section/title
en: Function which handles the penguin's response
fr: Fonction prenant en charge la réponse du pingouin

note: (itstool) path: section/p
en: Here we use some basic JavaScript functions to have the penguins say something random. Penguins like fish, though, so if you mention fish we want the penguin to respond to that. To do that, we use the JavaScript String object's match method on <file>this.buffer.text</file>, which returns the contents of our TextBuffer.
fr: Nous utilisons ici quelques fonctions JavaScript de base pour que le pingouin dise quelque chose au hasard. Les pingouins apprécient le poisson et nous allons donc le faire répondre quand on prononce le mot « fish » (poisson). Pour cela, nous appliquons la méthode JavaScript de correspondance d'objets chaîne de caractères sur le texte <file>this.buffer.text</file>, qui renvoie le contenu de notre TextBuffer.

note: (itstool) path: section/p
en: Since we want to clear out the TextBuffer after each time you click Send, we set <file>this.buffer.text</file> to contain an empty string afterwards. Then we return focus to our TextView, so that you can keep typing without having to click on it beforehand.
fr: Comme nous voulons effacer le TextBuffer après chaque clic sur « Sent » (Envoyer), nous paramétrons le <file>this.buffer.text</file> pour qu'il contienne une chaîne vide après cela. Nous renvoyons ensuite le focus sur notre élément TextView, pour pouvoir continuer à y saisir du texte sans avoir besoin de cliquer dessus au préalable.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished TextViewExample class, and set the application running.
fr: Enfin, nous créons une nouvelle instance de la classe TextViewExample que nous venons de terminer et démarrons l'application.

note: (itstool) path: info/desc
en: Widget that displays a GtkTextBuffer
fr: L'élément graphique qui affiche un GtkTextBuffer

note: (itstool) path: note/p
en: This is an example of Gtk.TextView.
fr: Ceci est un exemple de Gtk.TextView.

note: (itstool) path: note/p
en: But we can also have a new line if we write a long sentence (the text will wrap breaking lines between words).
fr: Mais il peut également y avoir un retour à la ligne si nous écrivons une longue phrase (la césure se fait entre deux mots).

note: (itstool) path: note/p
en: If we have a loooooooooooooooooooooooooooooooooooong
fr: Si nous avons un loooooooooooooooooooooooooooooooooooong

note: (itstool) path: note/p
en: (that was long)
fr: (long comme ça)

note: (itstool) path: note/p
en: word, an horizontal scrollbar will appear.
fr: mot, une barre de défilement horizontale apparaît.

note: (itstool) path: section/title
en: Useful methods for a TextView widget
fr: Méthodes utiles pour un élément graphique TextView

note: (itstool) path: section/p
en: A <code>Gtk.TextView</code> displays the text stored in a <code>Gtk.TextBuffer</code>. However, most text manipulation is accomplished with iterators, represented by a <code>Gtk.TextIter</code> - a position between two characters in the text buffer. Iterators are not valid indefinitely; whenever the buffer is modified in a way that affects the contents of the buffer, all outstanding iterators become invalid. Because of this, iterators can’t be used to preserve positions across buffer modifications. To preserve a position, we use a <code>Gtk.TextMark</code>, that can be set visible with <code>visible(True)</code>. A text buffer contains two built-in marks; an "insert" mark (the position of the cursor) and the "selection_bound" mark.
fr: Un <code>Gtk.TextView</code> affiche le texte stocké dans le tampon d'un <code>Gtk.TextBuffer</code>. Cependant, la plupart des manipulations de texte se font avec des itérateurs représentés par un <code>Gtk.TextIter</code> - une position entre deux caractères dans le tampon du texte. Les itérateurs ne restent pas valides indéfiniment ; à chaque fois que le tampon se trouve modifié d'une façon qui affecte son contenu, tous les itérateurs en cours deviennent non valides. À cause de cela, les itérateurs ne peuvent pas être utilisés pour préserver les positions en cas de modifications du tampon. Pour préserver une position, nous utilisons donc un marqueur <code>Gtk.TextMark</code>, qui peut être rendu visible avec <code>visible(True)</code>. Un tampon de texte contient deux marqueurs intégrés : un marqueur « insert » (la position du curseur) et un marqueur « selection_bound » (limite de sélection).

note: (itstool) path: section/p
en: Methods for a TextView widget:
fr: Méthodes pour un élément graphique TextView :

note: (itstool) path: item/p
en: The TextView widget is by default editable. If you prefer otherwise, use <code>set_editable(False)</code>. If the buffer has no editable text, it might be a good idea to use <code>set_cursor_visible(False)</code> as well.
fr: L'élément graphique TextView est modifiable par défaut. Si vous préférez le contraire, utilisez <code>set_editable(False)</code>. Si le tampon ne contient pas de texte modifiable, c'est une bonne idée d'utiliser <code>set_cursor_visible(False)</code> aussi.

note: (itstool) path: item/p
en: The justification of the text is set with <code>set_justification(Gtk.Justification.JUSTIFICATION)</code> where <code>JUSTIFICATION</code> is one of <code>LEFT, RIGHT, CENTER, FILL</code>.
fr: La justification du texte est définie par <code>set_justification(Gtk.Justification.JUSTIFICATION)</code> où <code>JUSTIFICATION</code> est l'une des valeurs <code>LEFT, RIGHT, CENTER, FILL</code>.

note: (itstool) path: item/p
en: The line wrapping of the text is set with <code>set_wrap_mode(Gtk.WrapMode.WRAP)</code> where <code>WRAP</code> is one of <code>NONE</code> (the text area is made wider), <code>CHAR</code> (break lines anywhere the cursor can appear), <code>WORD</code> (break lines between words), <code>WORD_CHAR</code> (break lines between words, but if that is not enough between characters).
fr: La césure du texte est définie par <code>set_wrap_mode(Gtk.WrapMode.WRAP)</code> où <code>WRAP</code> est une des valeurs <code>NONE</code> (la zone de texte s'élargit), <code>CHAR</code> (fait la césure n'importe où le curseur peut apparaître), <code>WORD</code> (fait la césure entre deux mots), <code>WORD_CHAR</code> (fait la césure entre deux mots, mais si cela ne suffit pas, la fait entre deux caractères).

note: (itstool) path: section/p
en: Methods for a TextBuffer widget:
fr: Méthodes pour un élément graphique TextBuffer :

note: (itstool) path: item/p
en: <code>get_insert()</code> returns the <code>Gtk.TextMark</code> that represents the cursor, that is the insertion point.
fr: La méthode <code>get_insert()</code> retourne le marqueur <code>Gtk.TextMark</code> qui représente le curseur, c'est-à-dire le point d'insertion.

note: (itstool) path: item/p
en: <code>get_selection_bound()</code> returns the <code>Gtk.TextMark</code> that represents the selection bound.
fr: La méthode <code>get_selection_bound()</code> renvoie le marqueur <code>Gtk.TextMark</code> qui représente les limites de la sélection.

note: (itstool) path: item/p
en: <code>set_text("some text", length)</code> where <code>length</code> is a positive integer or <code>-1</code>, sets the content of the buffer as the first <code>length</code> characters of the <code>"some text"</code> text. If <code>length</code> is omitted or <code>-1</code>, the text is inserted completely. The content of the buffer, if there is any, is destroyed.
fr: La méthode <code>set_text("du texte", longueur)</code> où <code>longueur</code> est un nombre entier positif ou <code>-1</code> définit le contenu du tampon comme étant les <code>longueur</code> premiers caractères du texte <code>du texte</code>. Si <code>longueur</code> est omis ou égal à <code>-1</code>, tout le texte est inséré. Le contenu du tampon, s'il existe, est détruit.

note: (itstool) path: item/p
en: <code>insert(iter, "some text", length)</code> where <code>iter</code> is a text iterator and <code>length</code> is a positive integer or <code>-1</code>, inserts in the buffer at <code>iter</code> the first <code>length</code> characters of the <code>"some text"</code> text. If <code>length</code> is omitted or <code>-1</code>, the text is inserted completely.
fr: La méthode <code>insert(iter, "du texte", longueur)</code>, où <code>iter</code> est un itérateur et <code>longueur</code> est un nombre entier positif ou <code>-1</code>, insère dans le tampon à l'endroit de <code>iter</code> les <code>longueur</code> premiers caractères du texte <code>du texte</code>. Si <code>longueur</code> est omis ou égal à <code>-1</code>, tout le texte est inséré.

note: (itstool) path: item/p
en: <code>insert_at_cursor("some text", length)</code> does the same as <code>insert(iter, "some text", length)</code>, with the current cursor taken as <code>iter</code>.
fr: La méthode <code>insert_at_cursor("du texte", longueur)</code> effectue la même action que <code>insert(iter, "du texte", length)</code>, avec le curseur actuel comme <code>iter</code>.

note: (itstool) path: item/p
en: <code>create_mark("mark_name", iter, left_gravity)</code> where <code>iter</code> is a <code>Gtk.TextIter</code> and <code>left_gravity</code> is a boolean, creates a <code>Gtk.TextMark</code> at the position of <code>iter</code>. If <code>"mark_name"</code> is <code>None</code>, the mark is anonymous; otherwise, the mark can be retrieved by name using <code>get_mark()</code>. If a mark has left gravity, and text is inserted at the mark’s current location, the mark will be moved to the left of the newly-inserted text. If <code>left_gravity</code> is omitted, it defaults to <code>False</code>.
fr: La méthode <code>create_mark("nom_marqueur", iter, left_gravity)</code>, où <code>iter</code> est un <code>Gtk.TextIter</code> et <code>left_gravity</code> une valeur booléenne, crée un marqueur <code>Gtk.TextMark</code> à l'emplacement de l'<code>iter</code>. Si la valeur de <code>"nom_marqueur"</code> est <code>None</code>, le marqueur est anonyme ; sinon, le marqueur peut être récupéré par son nom avec <code>get_mark()</code>. Si un marqueur possède la propriété left_gravity et que le texte est inséré à son emplacement actuel, alors le marqueur est déplacé à gauche du texte qui vient d'être inséré. Si la valeur <code>left_gravity</code> est omise, alors la valeur <code>False</code> est utilisée par défaut.

note: (itstool) path: item/p
en: To specify that some text in the buffer should have specific formatting, you must define a tag to hold that formatting information, and then apply that tag to the region of text using <code>create_tag("tag name", property)</code> and <code>apply_tag(tag, start_iter, end_iter)</code> as in, for instance:
fr: Pour indiquer qu'un morceau de texte du tampon doit être formatée spécifiquement, vous devez définir une étiquette contenant cette information de formatage et ensuite l'appliquer à la portion de texte en utilisant <code>create_tag("nom etiquette", propriété)</code> et <code>apply_tag(tag, start_iter, end_iter)</code>, par exemple comme ceci :

note: (itstool) path: item/code
en: 
    tag = textbuffer.create_tag("orange_bg", background="orange")
    textbuffer.apply_tag(tag, start_iter, end_iter)
fr: 
    etiquette = textbuffer.create_tag("fond_orange", background="orange")
    textbuffer.apply_tag(etiquette, start_iter, end_iter)

note: (itstool) path: item/p
en: The following are some of the common styles applied to text:
fr: Voici quelques styles les plus usuels appliqués à du texte :

note: (itstool) path: item/p
en: Background colour ("background" property)
fr: Couleur d'arrière-plan (propriété « background »)

note: (itstool) path: item/p
en: Foreground colour ("foreground" property)
fr: Couleur de premier plan (propriété « foreground »)

note: (itstool) path: item/p
en: Underline ("underline" property)
fr: Souligné (propriété « underline »)

note: (itstool) path: item/p
en: Bold ("weight" property)
fr: Gras (propriété « weight »)

note: (itstool) path: item/p
en: Italics ("style" property)
fr: Italique (propriété « style »)

note: (itstool) path: item/p
en: Strikethrough ("strikethrough" property)
fr: Barré (propriété « strikethrough »)

note: (itstool) path: item/p
en: Justification ("justification" property)
fr: Justifié (propriété « justification »)

note: (itstool) path: item/p
en: Size ("size" and "size-points" properties)
fr: Taille (propriétés « size » et « size-points »)

note: (itstool) path: item/p
en: Text wrapping ("wrap-mode" property)
fr: Césure (propriété « wrap-mode »)

note: (itstool) path: item/p
en: You can also delete particular tags later using <code>remove_tag()</code> or delete all tags in a given region by calling <code>remove_all_tags()</code>.
fr: Vous pouvez aussi supprimer par la suite certaines étiquettes en particulier avec <code>remove_tag()</code>, ou supprimer toutes celles d'une région donnée avec <code>remove_all_tags()</code>.

note: (itstool) path: section/p
en: Methods for a TextIter widget
fr: Méthodes pour un élément graphique TextIter

note: (itstool) path: item/p
en: <code>forward_search(needle, flags, limit)</code> searches forward for <code>needle</code>. The search will not continue past the <code>Gtk.TextIter</code> limit. The <code>flags</code> can be set to one of the following, or any combination of it by concatenating them with the bitwise-OR operator <code>|</code>: <code>0</code> (the match must be exact); <code>Gtk.TextSearchFlags.VISIBLE_ONLY</code> (the match may have invisible text interspersed in needle); <code>Gtk.TextSearchFlags.TEXT_ONLY</code> (the match may have pixbufs or child widgets mixed inside the matched range); <code>Gtk.TextSearchFlags.CASE_INSENSITIVE</code> (the text will be matched regardless of what case it is in). The method returns a tuple containing a <code>Gtk.TextIter</code> pointing to the start and to the first character after the match; if no match is found, <code>None</code> is returned.
fr: La méthode <code>forward_search(needle, flags, limit)</code> effectue une recherche en avant de <code>needle</code> (cible). La recherche ne s'effectue pas au delà de l'itérateur <code>Gtk.TextIter</code>. Les <code>flags</code> (drapeaux) peuvent être définis comme l'un des éléments suivants, ou comme n'importe quelle combinaison de l'un d'eux, en les concaténant avec l'opérateur binaire OR <code>|</code> : <code>0</code> (la correspondance doit être exacte) ; <code>Gtk.TextSearchFlags.VISIBLE_ONLY</code> (la correspondance peut contenir du texte invisible intercalé dans la sélection) ; <code>Gtk.TextSearchFlags.TEXT_ONLY</code> (la correspondance peut contenir des pixbufs ou des éléments graphiques enfants mélangés dans la sélection) ; <code>Gtk.TextSearchFlags.CASE_INSENSITIVE</code> (la correspondance n'est pas sensible à la casse). La méthode renvoie un tuple contenant un <code>Gtk.TextIter</code> qui pointe vers le début et vers le premier caractère après la correspondance ; s'il n'y a pas de correspondance, elle renvoie la valeur <code>None</code>.

note: (itstool) path: item/p
en: <code>backward_search(needle, flags, limit)</code> does the same as <code>forward_search()</code>, but moving backwards.
fr: La méthode <code>backward_search(needle, flags, limit)</code> effectue les même actions que <code>forward_search()</code>, mais en arrière.

note: (itstool) path: note/p
en: If we have a loooooooooooooooooooooooooooooooooooong word, a horizontal scrollbar will appear.
fr: Si nous avons un loooooooooooooooooooooooooooooooooooong mot, une barre de défilement horizontale apparaît.

note: (itstool) path: info/desc
en: A button which retains state
fr: Un bouton qui mémorise l'état

note: (itstool) path: page/p
en: When this ToggleButton is in an active state, the spinner spins.
fr: Quand ce ToggleButton est activé, l'indicateur d'activité tourne.

note: (itstool) path: info/desc
en: Stays pressed until you click it again
fr: Reste enfoncé jusqu'à ce que vous cliquiez dessus à nouveau

note: (itstool) path: page/p
en: A ToggleButton is like a normal <link xref="button.js">Button</link>, except that it stays pressed in when you click it. You can use it like an on/off switch, to control things like the <link xref="spinner.js">Spinner</link> in this example.
fr: Un ToggleButton ressemble à un <link xref="button.js">bouton</link> normal, sauf qu'il reste enfoncé après l'avoir cliqué. Vous pouvez l'utiliser comme un commutateur allumé/éteint pour contrôler des éléments comme l'<link xref="spinner.js">indicateur d'activité</link> de cet exemple.

note: (itstool) path: page/p
en: A ToggleButton's get_active method returns true if it's pressed in, and false if it's not. Its set_active method is used if you want to change its state without needing to click on it. When it changes state from pressed in to popped out and vice-versa, it sends out the "toggled" signal, which you can connect to a function to do something.
fr: La méthode get_active d'un ToggleButton renvoie « true » (vrai) s'il est enfoncé et « false » dans le cas contraire. Utilisez sa méthode set_active si vous souhaitez changer son état sans avoir besoin de cliquer dessus. Quand il passe de l'état « enfoncé » à « relâché » et vice versa, il envoie le signal « toggled » que vous pouvez connecter à une fonction afin d'effectuer une action.

note: (itstool) path: section/title
en: Creating the ToggleButton and other widgets
fr: Création du ToggleButton et des autres éléments graphiques

note: (itstool) path: section/p
en: We want this <link xref="spinner.js">Spinner</link> to expand vertically and horizontally, to take up as much space as possible inside the window.
fr: Nous voulons que cet <link xref="spinner.js">indicateur d'activité</link> puisse s'étendre verticalement et horizontalement pour prendre le maximum d'espace disponible dans la fenêtre.

note: (itstool) path: section/p
en: Creating a ToggleButton is a lot like creating a normal <link xref="button.js">Button</link>. The biggest difference is that you're handling a "toggled" signal instead of a "clicked" signal. This code binds the _onToggle function to that signal, so that it's called whenever our ToggleButton is toggled.
fr: La création d'un ToggleButton ressemble beaucoup à la création d'un <link xref="button.js">bouton</link> normal. La plus grosse différence réside dans le fait que vous manipulez un signal « toggled » au lieu d'un signal « clicked ». Ce code relie la fonction _onToggle à ce signal, de sorte qu'elle est appelée à chaque fois que le ToggleButton est commuté.

note: (itstool) path: section/p
en: Here we create a simple <link xref="grid.js">Grid</link> to organize everything in, then attach the Spinner and ToggleButton to it.
fr: Nous créons ici une simple <link xref="grid.js">grille</link> pour tout ranger dedans, puis nous lui attachons le Spinner (indicateur d'activité) et le ToggleButton.

note: (itstool) path: section/p
en: Now we add the Grid to the Window, and tell the Window to show itself and its child widgets when the application is started.
fr: Ensuite, nous ajoutons la grille à la fenêtre et demandons à celle-ci de s'afficher ainsi que ses éléments graphiques enfants quand l'application est démarrée.

note: (itstool) path: section/title
en: Making something happen when the ToggleButton is toggled
fr: Déclenchement d'une action quand le ToggleButton est commuté

note: (itstool) path: section/p
en: Whenever someone toggles the button, this function checks what its state is afterwards using get_active and starts or stops the spinner accordingly. We want it to spin only while the button is pressed in, so if get_active returns true we start the spinner. Otherwise, we tell it to stop.
fr: Chaque fois que quelqu'un commutte le bouton, cette fonction vérifie s'il est enfoncé ou non en utilisant get_active et, selon le cas, démarre ou arrête l'indicateur d'activité. Nous voulons qu'il ne tourne que lorsque le bouton est enfoncé, donc, si get_active renvoie la valeur true (vrai), nous démarrons l'indicateur, sinon, nous lui indiquons de s'arrêter.

note: (itstool) path: section/title
en: Useful methods for a ToggleButton widget
fr: Méthodes utiles pour un élément graphique ToggleButton

note: (itstool) path: info/desc
en: A bar of buttons
fr: Une barre de boutons

note: (itstool) path: page/title
en: Toolbar
fr: Barre d'outils

note: (itstool) path: page/p
en: Toolbar can contain either text or stock icons. In this sample we use stock icons. This example has fullscreen functionality.
fr: La barre d'outils peut contenir soit du texte, soit des icônes de la collection. Dans cet exemple, nous utilisons les icônes de la collection. Cet exemple possède la fonction plein écran.

note: (itstool) path: info/desc
en: A bar of tools
fr: Une barre d'outils

note: (itstool) path: page/p
en: This example uses SimpleActions (window and app). App actions can easily be added the the app menu.
fr: Cet exemple utilise SimpleActions (fenêtre et application). Les actions applications peuvent être facilement ajoutées au menu « Applications ».

note: (itstool) path: info/desc
en: A bar of buttons and other widgets
fr: Une barre de boutons et autres éléments graphiques

note: (itstool) path: page/p
en: An example of toolbar with buttons (from stock icons).
fr: Un exemple de barre d'outils avec des boutons (à partir des icônes de la collection).

note: (itstool) path: section/title
en: Useful methods for a Toolbar widget
fr: Méthodes utiles pour un élément graphique barre d'outils

note: (itstool) path: item/p
en: Use <code>insert(tool_item, position)</code> to insert the <code>tool_item</code> at <code>position</code>. If <code>position</code> is negative, the item is appended at the end of the toolbar.
fr: La méthode <code>insert(tool_item, position)</code> insère l'élément <code>tool_item</code> à sa place <code>position</code>. Si <code>position</code> est négatif, l'élément est ajouté à la fin de la barre d'outils.

note: (itstool) path: item/p
en: <code>get_item_index(tool_item)</code> retrieves the position of <code>tool_item</code> on the toolbar.
fr: La méthode <code>get_item_index(tool_item)</code> récupère la position de l'élément <code>tool_item</code> dans la barre d'outils.

note: (itstool) path: item/p
en: <code>get_n_items()</code> returns the number of items on the toolbar; <code>get_nth_item(position)</code> returns the item in position <code>position</code>.
fr: La méthode <code>get_n_items()</code> renvoie le nombre d'éléments de la barre d'outils ; <code>get_nth_item(position)</code> renvoie l'élément placé à <code>position</code>.

note: (itstool) path: item/p
en: If the toolbar does not have room for all the menu items, and <code>set_show_arrow(True)</code>, the items that do not have room are shown through an overflow menu.
fr: S'il n'y a pas assez de place dans la barre d'outils pour tous les éléments du menu, et si l'affichage de la flèche est sur <code>set_show_arrow(True)</code>, les éléments en surplus sont affichés dans un menu de dépassement.

note: (itstool) path: item/p
en: <code>set_icon_size(icon_size)</code> sets the size of icons in the toolbar; <code>icon_size</code> can be one of <code>Gtk.IconSize.INVALID, Gtk.IconSize.MENU, Gtk.IconSize.SMALL_TOOLBAR, Gtk.IconSize.LARGE_TOOLBAR, Gtk.IconSize.BUTTON, Gtk.IconSize.DND, Gtk.IconSize.DIALOG</code>. This should be used only for special-purpose toolbars, normal application toolbars should respect user preferences for the size of icons. <code>unset_icon_size()</code> unsets the preferences set with <code>set_icon_size(icon_size)</code>, so that user preferences are used to determine the icon size.
fr: La méthode <code>set_icon_size(icon_size)</code> définit la taille des icônes de la barre d'outils ; <code>icon_size</code> peut être : <code>Gtk.IconSize.INVALID, Gtk.IconSize.MENU, Gtk.IconSize.SMALL_TOOLBAR, Gtk.IconSize.LARGE_TOOLBAR, Gtk.IconSize.BUTTON, Gtk.IconSize.DND, Gtk.IconSize.DIALOG</code>. Cette option ne doit être utilisée que pour des barres d'outils spéciales. Les barres d'outils des applications normales doivent respecter le choix des préférences des utilisateurs en ce qui concerne la taille des icônes. La fonction <code>unset_icon_size()</code> désactive les préférences définies avec <code>set_icon_size(icon_size)</code> afin que les préférences de l'utilisateur soient utilisées pour déterminer la taille des icônes.

note: (itstool) path: item/p
en: <code>set_style(style)</code>, where <code>style</code> is one of <code>Gtk.ToolbarStyle.ICONS, Gtk.ToolbarStyle.TEXT, Gtk.ToolbarStyle.BOTH, Gtk.ToolbarStyle.BOTH_HORIZ</code>, sets if the toolbar shows only icons, only text, or both (vertically stacked or alongside each other). To let user preferences determine the toolbar style, and unset a toolbar style so set, use <code>unset_style()</code>.
fr: La méthode <code>set_style(style)</code>, où <code>style</code> peut être <code>Gtk.ToolbarStyle.ICONS, Gtk.ToolbarStyle.TEXT, Gtk.ToolbarStyle.BOTH, Gtk.ToolbarStyle.BOTH_HORIZ</code>, définit si la barre d'outils affiche seulement les icônes, seulement du texte ou les deux à la fois (placés verticalement ou les uns à côté des autres). Pour que les préférences utilisateur déterminent le style de la barre et annule un style de barre d'outils ainsi défini, utilisez <code>unset_style()</code>.

note: (itstool) path: page/title
en: Toolbar created using Glade
fr: Barre d'outils créée avec Glade

note: (itstool) path: page/p
en: This example is similar to <link xref="toolbar.py"/>, except we use Glade to create the toolbar in an XML .ui file.
fr: Cet exemple est identique à <link xref="toolbar.py"/>, sauf que nous utilisons Glade pour créer la barre d'outils dans un fichier XML .ui.

note: (itstool) path: section/title
en: Creating the toolbar with Glade
fr: Création de la barre d'outils avec Glade

note: (itstool) path: section/p (itstool) path: page/p
en: To create the toolbar using the <link href="http://glade.gnome.org/">Glade Interface Designer</link>:
fr: Pour créer la barre d'outils avec <link href="http://glade.gnome.org/">Glade</link> :

note: (itstool) path: item/p
en: Open Glade, and save the file as <file>toolbar_builder.ui</file>
fr: ouvrez Glade et enregistrez le fichier sous <file>toolbar_builder.ui</file>

note: (itstool) path: item/p
en: Under <gui>Containers</gui> on the left hand side, right click on the toolbar icon and select <gui>Add widget as toplevel</gui>.
fr: Au-dessous de <gui>Conteneurs</gui>, dans la partie gauche, faites un clic droit sur une icône de la barre d'outils et sélectionnez <gui>Ajouter un widget comme premier niveau</gui>.

note: (itstool) path: item/p
en: Under the <gui>General</gui> tab on the bottom right, change the <gui>Name</gui> to <input>toolbar</input> and <gui>Show Arrow</gui> to <gui>No</gui>.
fr: Dans l'onglet <gui>Général</gui>, dans la partie inférieure droite, modifiez le <gui>Nom</gui> en <input>toolbar</input> et mettez l'option <gui>Afficher la flèche</gui> à <gui>Non</gui>.

note: (itstool) path: item/p
en: Under the <gui>Common</gui> tab, set <gui>Horizontal Expand</gui> to <gui>Yes</gui>.
fr: Dans l'onglet <gui>Commun</gui>, définissez <gui>Extension horizontale</gui>à <gui>Oui</gui>.

note: (itstool) path: item/p
en: Right click on the toolbar in the top right and select <gui>Edit</gui>. The <gui>Tool Bar Editor</gui> window will appear.
fr: Faites un clic droit sur « toolbar » dans la partie en haut à droite et sélectionnez <gui>Éditer</gui>. La boîte de dialogue <gui>Éditeur de barre d'outils</gui> s'affiche.

note: (itstool) path: item/p
en: We want to add 5 ToolButtons: New, Open, Undo, Fullscreen and Leave Fullscreen. First, we will add the New ToolButton.
fr: Nous voulons ajouter 5 ToolButtons (boutons) : « Nouveau », « Ouvrir », « Mode plein écran » et « Quitter le mode plein écran ». Ajoutons d'abord le ToolButton « Nouveau ».

note: (itstool) path: item/p
en: Under <gui>Hierarchy</gui> tab, click <gui>Add</gui>.
fr: Dans l'onglet <gui>Hiérarchie</gui>, cliquez sur <gui>Ajouter</gui>.

note: (itstool) path: item/p
en: Change the name of the ToolItem to <input>new_button</input>.
fr: Modifiez le nom de l'élément outil (ToolItem) en <input>new_button</input>.

note: (itstool) path: item/p
en: Scroll down and set <gui>Is important</gui> to <gui>Yes</gui>. This will cause the label of the ToolButton to be shown, when you view the toolbar.
fr: Faites défiler vers le bas et définissez <gui>Est important</gui> à <gui>Oui</gui>. Ceci provoque l'affichage de l'étiquette du ToolButton quand vous affichez la barre d'outils.

note: (itstool) path: item/p
en: Enter the <gui>action name</gui>: <input>app.new</input>.
fr: Saisissez le <gui>nom de l'action</gui> : <input>app.new</input>.

note: (itstool) path: item/p
en: Change the <gui>Label</gui> to <input>New</input>.
fr: Modifiez le champ <gui>Étiquette</gui> en <input>New</input> (Nouveau).

note: (itstool) path: item/p
en: Select the <gui>New</gui> Stock Id from the drop down menu, or type <input>gtk-new</input>.
fr: Dans le menu déroulant « ID prédéfini », sélectionnez <gui>Nouveau</gui>, ou saisissez <input>gtk-new</input>.

note: (itstool) path: item/p
en: Repeat the above steps for the remaining ToolButtons, with the following properties:
fr: Répétez les étapes ci-dessus pour tous les autres ToolButtons en leur attribuant les propriétés suivantes :

note: (itstool) path: td/p
en: Is important
fr: Est important

note: (itstool) path: td/p
en: Action name
fr: Nom de l'action

note: (itstool) path: td/p
en: Stock Id
fr: ID prédéfini

note: (itstool) path: td/p
en: Yes
fr: Oui

note: (itstool) path: td/p
en: Open
fr: Open (Ouvrir)

note: (itstool) path: td/p
en: Undo
fr: Undo (Annuler)

note: (itstool) path: td/p
en: Fullscreen
fr: Fullscreen (Mode plein écran)

note: (itstool) path: td/p
en: Leave Fullscreen
fr: Leave Fullscreen (Quitter le mode plein écran)

note: (itstool) path: item/p
en: Close the <gui>Tool Bar Editor</gui>.
fr: Fermez l'<gui>Éditeur de barre d'outils</gui>.

note: (itstool) path: item/p
en: When our program will first start, we do not want the <gui>Leave Fullscreen</gui> ToolButton to be visible, since the application will not be in fullscreen mode. You can set this in the <gui>Common</gui> tab, by clicking the <gui>Visible</gui> property to <gui>No</gui>. The ToolButton will still appear in the interface designer, but will behave correctly when the file is loaded into your program code. Note that the method <code>show_all()</code> would override this setting - so in the code we have to use <code>show()</code> separately on all the elements.
fr: Au lancement du programme, nous ne voulons pas que le ToolButton <gui>Quitter le mode plein écran</gui> s'affiche, car nous ne sommes pas en mode plein écran. Dans l'onglet <gui>Commun</gui>, définissez la propriété <gui>Visible</gui> sur <gui>Non</gui>. Le ToolButton sera toujours présent dans le concepteur d'interface, mais se comportera comme souhaité quand le fichier sera chargé dans le code de votre programme. Notez que la méthode <code>show_all()</code> ne prend pas en compte ce réglage, de sorte qu'il nous faut utiliser <code>show()</code> séparément pour chaque élément.

note: (itstool) path: item/p
en: Save your work, and close Glade.
fr: Enregistrez votre travail et quittez Glade.

note: (itstool) path: item/p
en: The XML file created by Glade is shown below. This is the description of the toolbar. At the time of this writing, the option to add the class Gtk.STYLE_CLASS_PRIMARY_TOOLBAR in the Glade Interface did not exist. We can manually add this to the XML file. To do this, add the following XML code at line 9 of <file>toolbar_builder.ui</file>:
fr: Vous pouvez voir le fichier XML créé par Glade ci-dessous. C'est la description de la barre d'outils. Au moment de la rédaction de ces lignes, l'option pour ajouter la classe Gtk.STYLE_CLASS_PRIMARY_TOOLBAR dans l'interface de Glade n'existait pas. Mais nous pouvons le faire manuellement. Pour cela, ajoutez le code XML suivant à la ligne 9 du fichier <file>toolbar_builder.ui</file> :

note: (itstool) path: item/p
en: If you do not add this, the program will still work fine. The resulting toolbar will however look slightly different then the screenshot at the top of this page.
fr: Le programme fonctionnera malgré tout correctement si vous ne l'ajoutez pas, mais la barre d'outils que vous obtiendrez sera légèrement différente de celle de la capture d'écran en haut de cette page.

note: (itstool) path: section/p (itstool) path: page/p
en: We now create the code below, which adds the toolbar from the file we just created.
fr: Le code ci-dessous ajoute la barre d'outils du fichier que nous venons de finir.

note: (itstool) path: section/title
en: Useful methods for Gtk.Builder
fr: Méthodes utiles pour Gtk.Builder

note: (itstool) path: section/p
en: For the useful methods for a Toolbar widget, see <link xref="toolbar.py"/>
fr: Consultez <link xref="toolbar.py"/> pour connaître les méthodes utiles à un élément graphique de barre d'outils

note: (itstool) path: section/p
en: Gtk.Builder builds an interface from an XML UI definition.
fr: Gtk.Builder construit une interface à partir d'une définition XML d'une interface utilisateur.

note: (itstool) path: item/p
en: <code>add_from_file(filename)</code> loads and parses the given file and merges it with the current contents of the Gtk.Builder.
fr: La méthode <code>add_from_file(nomdufichier)</code> charge et analyse le fichier donné et le fusionne avec le contenu actuel de Gtk.Builder.

note: (itstool) path: item/p
en: <code>add_from_string(string)</code> parses the given string and merges it with the current contents of the Gtk.Builder.
fr: La méthode <code>add_from_string(chaîne)</code> charge et analyse la chaîne de caractères donnée et la fusionne avec le contenu actuel de Gtk.Builder.

note: (itstool) path: item/p
en: <code>add_objects_from_file(filename, object_ids)</code> is the same as <code>add_from_file()</code>, but it loads only the objects with the ids given in the <code>object_id</code>s list.
fr: La méthode <code>add_objects_from_file(nomdufichier, object_ids)</code> est identique à <code>add_from_file()</code>, mais elle ne charge que les objets qui possèdent les identifiants donnés par la liste <code>object_id</code>.

note: (itstool) path: item/p
en: <code>get_object(object_id)</code> retrieves the widget with the id <code>object_id</code> from the loaded objects in the builder.
fr: La méthode <code>get_object(object_id)</code> récupère l'élément graphique possédant l'identifiant <code>object_id</code> à partir des objets chargés dans le constructeur.

note: (itstool) path: item/p
en: <code>get_objects()</code> returns all loaded objects.
fr: La méthode <code>get_objects()</code> renvoie tous les objets chargés.

note: (itstool) path: page/p
en: This example is similar to <link xref="toolbar.vala"/>, except we use Glade to create the toolbar in an XML ui file.
fr: Cet exemple est identique à <link xref="toolbar.vala"/>, sauf que nous utilisons Glade pour créer la barre d'outils dans un fichier XML .ui.

note: (itstool) path: item/p
en: When our program will first start, we don't want the <gui>Leave Fullscreen</gui> ToolButton to be visible, since the application will not be in fullscreen mode. You can set this in the <gui>Common</gui> tab, by clicking the <gui>Visible</gui> property to <gui>No</gui>. The ToolButton will still appear in the interface designer, but will behave correctly when the file is loaded into your program code.
fr: Au lancement du programme, nous ne voulons pas que le ToolButton <gui>Quitter le mode plein écran</gui> s'affiche, car nous ne sommes pas en mode plein écran. Dans l'onglet <gui>Commun</gui>, définissez la propriété <gui>Visible</gui> sur <gui>Non</gui>. Le ToolButton sera toujours présent dans le concepteur d'interface, mais se comportera comme souhaité quand le fichier sera chargé dans le code de votre programme.

note: (itstool) path: info/desc
en: Add tips to your widgets
fr: Ajouter des infobulles à vos éléments graphiques

note: (itstool) path: page/title
en: Tooltip
fr: Infobulle

note: (itstool) path: page/p
en: A toolbar with a tooltip (with an image) for a button.
fr: Une barre d'outil avec une infobulle (une image) pour un bouton.

note: (itstool) path: section/title
en: Useful methods for a Tooltip widget
fr: Méthodes utiles pour un élément graphique infobulle (Tooltip)

note: (itstool) path: section/p
en: <code>set_tooltip_text(text)</code> and <code>set_tooltip_markup(text)</code> can be used to add a tooltip of plain text (or text in the Pango Markup Language) to a widget.
fr: Les fonctions <code>set_tooltip_text(text)</code> et <code>set_tooltip_markup(text)</code> peuvent être utilisées pour ajouter une infobulle textuelle (ou un texte dans le langage de balisage Pango) à un élément graphique.

note: (itstool) path: section/p
en: For more complex tooltips, for instance for a tooltip with an image:
fr: Pour des infobulles plus complexes, par exemple pour une infobulle sous la forme d'image :

note: (itstool) path: item/p
en: Set the <code>"has-tooltip"</code> property of the widget to <code>True</code>; this will make GTK+ monitor the widget for motion and related events which are needed to determine when and where to show a tooltip.
fr: Attribuez la valeur <code>True</code> (vrai) à la propriété <code>"has-tooltip"</code> de l'élément graphique ; de cette façon GTK+ surveille les événements liés aux mouvements de la souris et tous ceux qui sont nécessaires afin de déterminer quand et où afficher une infobulle.

note: (itstool) path: item/p
en: Connect to the <code>"query-tooltip"</code> signal. This signal will be emitted when a tooltip is supposed to be shown. One of the arguments passed to the signal handler is a GtkTooltip object. This is the object that we are about to display as a tooltip, and can be manipulated in your callback using functions like <code>set_icon()</code>. There are functions for setting the tooltip's markup (<code>set_markup(text)</code>), setting an image from a stock icon (<code>set_icon_from_stock(stock_id, size)</code>), or even putting in a custom widget (<code>set_custom(widget)</code>).
fr: Connectez le signal <code>"query-tooltip"</code>. Ce signal est émis lorsqu'une infobulle doit s'afficher. Un des arguments transmis au gestionnaire de signaux est un objet GtkTooltip. C'est l'objet que nous allons afficher comme infobulle et qui peut être manipulé dans votre fonction de rappel (callback) en utilisant des fonctions comme <code>set_icon()</code>. Ce sont des fonctions servant à paramétrer le balisage de l'infobulle (<code>set_markup(text)</code>), à définir une image à partir de la collection d'icônes (<code>set_icon_from_stock(stock_id, size)</code>), ou même à positionner un élément graphique personnalisé (<code>set_custom(widget)</code>).

note: (itstool) path: item/p
en: Return <code>True</code> from your query-tooltip handler. This causes the tooltip to be show. If you return <code>False</code>, it will not be shown.
fr: Renvoyez la valeur <code>True</code> à partir de votre gestionnaire query-tooltip. Cela provoque l'affichage de l'infobulle. Si vous renvoyez <code>False</code>, elle n'est pas affichée.

note: (itstool) path: section/p
en: In the probably rare case where you want to have even more control over the tooltip that is about to be shown, you can set your own GtkWindow which will be used as tooltip window. This works as follows:
fr: Dans le cas peut probable où vous voulez avoir plus de contrôle sur l'infobulle qui est sur le point d'être affichée, vous pouvez définir votre propre GtkWindow qui sera utilisée comme fenêtre d'infobulle. Cela fonctionne comme ceci :

note: (itstool) path: item/p
en: Set <code>"has-tooltip"</code> and connect to <code>"query-tooltip"</code> as before.
fr: Paramétrez <code>"has-tooltip"</code> et connectez le à <code>"query-tooltip"</code> comme auparavant.

note: (itstool) path: item/p
en: Use <code>set_tooltip_window()</code> on the widget to set a GtkWindow created by you as tooltip window.
fr: Utilisez <code>set_tooltip_window()</code> sur l'élément graphique pour définir un GtkWindow créé par vos soins comme fenêtre d'infobulle.

note: (itstool) path: item/p
en: In the <code>"query-tooltip"</code> callback you can access your window using <code>get_tooltip_window()</code> and manipulate as you wish. The semantics of the return value are exactly as before, return <code>True</code> to show the window, <code>False</code> to not show it.
fr: Dans la fonction de rappel <code>"query-tooltip"</code> vous pouvez accéder à votre fenêtre en utilisant <code>get_tooltip_window()</code> et la manipuler comme bon vous semble. La sémantiques pour la valeur retournée est exactement comme ci-dessus, renvoyez <code>True</code> pour afficher la fenêtre, <code>False</code> dans le cas contraire.

note: (itstool) path: info/desc
en: A TreeView displaying a ListStore (more complex example)
fr: Une TreeView affichant un ListStore (exemple plus complexe)

note: (itstool) path: page/p
en: This TreeView displays a simple ListStore with the selection "changed" signal connected.
fr: Ce Treeview affiche un ListStore tout simple avec le signal « changed » de la sélection connecté.

note: (itstool) path: section/title
en: Useful methods for a TreeView widget
fr: Méthodes utiles pour un élément graphique TreeView

note: (itstool) path: info/desc
en: A TreeView displaying a TreeStore (more complex example, with CellRendererToggle)
fr: Une TreeView affichant un TreeStore (exemple plus complexe avec CellRendererToggle)

note: (itstool) path: page/p
en: This TreeView displays a TreeStore with two columns, one of which is rendered as a toggle.
fr: Ce TreeView affiche un TreeStore de deux colonnes, dont l'une est affichée sous la forme d'un inverseur.

note: (itstool) path: info/desc
en: A widget that shows a separate list of items
fr: Un élément graphique qui affiche une liste séparée d'éléments

note: (itstool) path: page/title
en: TreeView with ListStore
fr: TreeView avec ListStore

note: (itstool) path: page/p
en: A TreeView is like a window onto the contents of either a ListStore or a TreeStore. A ListStore is like a spreadsheet: a "flat", two-dimensional list of things broken up into rows and columns. A TreeStore, meanwhile, can branch out in different directions like a tree can. In this example, we create a TreeView that shows the contents of a ListStore with (fictitious) names and phone numbers in it, and set it so that the <link xref="label.js">Label</link> at the bottom of the window shows more information about whichever name you click on.
fr: Un TreeView est une fenêtre affichant le contenu soit d'un ListStore, soit d'un TreeStore. Un ListStore peut être comparé à une feuille de calcul : une liste « plate », en deux dimensions, contenant des données réparties sur des lignes et dans des colonnes. Alors qu'un TreeStore peut déployer ses branches dans différentes directions, à la manière d'un arbre. Dans cet exemple, nous créons un TreeView qui affiche le contenu d'un ListStore contenant des noms et des numéros de téléphone (fictifs) et nous le paramétrons pour que l'<link xref="label.js">étiquette</link> en bas de la fenêtre affiche plus d'informations sur le nom qui a été cliqué.

note: (itstool) path: page/p
en: The TreeView is not just a single widget, but contains a number of smaller ones:
fr: Un TreeView n'est pas qu'un simple élément graphique, il contient aussi un certain nombre d'autres plus petits :

note: (itstool) path: item/p
en: TreeViewColumn widgets show each (vertical) column of information from the ListStore. Each one has a title which can be shown at the top of the column, like in the screenshot.
fr: Les éléments graphiques TreeViewColumn affichent chaque colonne d'informations contenue dans le ListStore. Chacune d'elle a un nom qui peut être affiché dans l'en-tête de la colonne, comme montré dans la capture d'écran.

note: (itstool) path: item/p
en: CellRenderer widgets are "packed" into each TreeViewColumn, and contain the instructions for how to display each individual "cell", or item from the ListStore. There are multiple different types, including the CellRendererText used here and the CellRendererPixbuf, which displays a picture ("pixel buffer").
fr: Les éléments graphiques CellRenderer sont « empilés » dans chaque TreeViewColumn et contiennent les instructions sur la manière d'afficher chaque « cellule » individuelle ou chaque élément du ListStore. Il en existe beaucoup de types différents, y compris le CellRendererText utilisé ici et le CellRendererPixbuf qui affiche une image « pixel buffer ».

note: (itstool) path: page/p
en: Finally, we're going to use an object called a TreeIter, which isn't a widget so much as an invisible cursor which points to a (horizontal) row in the ListStore. Whenever you click on a name in the phonebook, for instance, we create a TreeIter pointing to the row that's selected, and then use that to tell the ListStore which entry we want the Label to show more information about.
fr: Pour finir, nous allons utiliser un objet nommé TreeIter, qui n'est pas à proprement parler un élément graphique, mais plutôt un curseur invisible qui pointe vers une ligne horizontale du ListStore. Si vous cliquez par exemple sur un nom de la liste téléphonique, cela génère un TreeIter qui pointe vers la ligne sélectionnée et qui sert à indiquer au ListStore quelles informations supplémentaires l'étiquette doit afficher.

note: (itstool) path: note/p
en: The TreeView is probably the most complicated Gtk widget, because of how many parts it has and how they all have to work together. Give yourself time to learn how it works and experiment with it, or try something easier first if you're having trouble.
fr: Le TreeView est probablement l'élément graphique Gtk le plus compliqué, de par le nombre d'éléments qu'il contient et à cause de la façon dont ils sont imbriqués pour travailler ensemble. Prenez le temps d'apprendre et son fonctionnement en faisant des essais, ou alors essayez de commencer par quelque chose de plus facile si vous n'y arrivez pas.

note: (itstool) path: section/p
en: All the code for this sample goes in the TreeViewExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
fr: Tout le code utilisé pour cet exemple va dans la classe TreeViewExample. Le code ci-dessus crée une <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> pour nos éléments graphiques et la fenêtre qui les contient.

note: (itstool) path: section/p
en: We first create the ListStore like we would any widget. Then we call its set_column_types method, and pass it an array of GObject data types. (We could have put the types all on one line, but here we are breaking them up to make it easier to read.)
fr: Créons en premier le ListStore comme nous l'aurions fait pour n'importe quel élément graphique. Appelons ensuite sa méthode set_column_types et passons lui un tableau de types de données GObject (nous aurions pu placer tous les types sur une seule et même ligne, mais pour faciliter la lecture, nous les séparons).

note: (itstool) path: section/p
en: The GObject data types you can use include:
fr: Les types de données GObject que vous pouvez utiliser incluent :

note: (itstool) path: item/p
en: <file>gtk.gdk.Pixbuf</file> -- A picture
fr: <file>gtk.gdk.Pixbuf</file> -- une image

note: (itstool) path: section/p
en: In this case, we're making a ListStore of four columns, each one containing string values.
fr: Dans ce cas, nous créons un ListStore de quatre colonnes contenant chacune des valeurs de type chaînes de caractères.

note: (itstool) path: section/p
en: Here we have the information to go in the ListStore. It's an array of objects, each one corresponding to a single entry in our phone book.
fr: Voici les informations contenues dans le ListStore. C'est un assortiment d'objets, chacun correspondant à une entrée de notre répertoire téléphonique.

note: (itstool) path: section/p
en: Note that the TreeView in the screenshot doesn't actually show the data from the "description" properties. Instead, that information's shown in the Label beneath it, for whichever row that you click on. That's because the TreeView and ListStore are two separate things, and a TreeView can show all or part of a ListStore, and display what's in it in different ways. You can even have multiple widgets show things from the same ListStore, like the Label in our example or even a second TreeView.
fr: Notez que le TreeView de la capture d'écran n'affiche pas pour l'instant les données des propriétés « description ». Elles s'afficheront dans l'étiquette du dessous à chaque clic sur une ligne. C'est parce qu'un TreeView et un ListStore sont deux choses bien distinctes et qu'un TreeView peut afficher tout ou une partie du contenu d'un ListStore de différentes façons. Vous pouvez même posséder plusieurs éléments graphiques affichant des éléments d'un même ListStore, comme l'étiquette de notre exemple ou bien encore un second TreeView.

note: (itstool) path: section/p
en: This <file>for</file> loop puts the strings from our phonebook into our ListStore in order. In order, we pass the ListStore's set method the iter that points to the correct row, an array which says which columns we want to set, and an array which contains the data we want to put into those columns.
fr: Cette boucle <file>for</file> place les chaînes de caractères de notre répertoire téléphonique dans notre ListStore dans l'ordre. Pour ce faire, nous passons à la méthode set du ListStore le curseur qui pointe vers la bonne ligne, un tableau qui indique quelles colonnes nous voulons définir et un tableau qui contient les données que nous voulons y mettre.

note: (itstool) path: section/p
en: A ListStore's <file>append</file> method adds a horizontal row onto it (it starts out with none), and returns a TreeIter pointing to that row like a cursor. So by passing <file>this._listStore.append()</file> to the ListStore as a property, we're creating a new row and telling the <file>set</file> method which row to set data for at the same time.
fr: La méthode <file>append</file> du ListStore ajoute une ligne horizontale à celui-ci (au début, il n'y en a pas) et renvoie un TreeIter pointant vers cette ligne comme un curseur. Donc, en transmettant <file>this._listStore.append()</file> au ListStore comme propriété, nous créons une nouvelle ligne en indiquant en même temps à la méthode <file>set</file> à quelle ligne elle doit attribuer les données.

note: (itstool) path: section/title
en: Creating the TreeView
fr: Création du TreeView

note: (itstool) path: section/p
en: Here we create a basic TreeView widget, that expands both horizontally and vertically to use as much space as needed. We set it to use the ListStore we created as its "model", or the thing it'll show us stuff from.
fr: Ici, nous créons un élément graphique TreeView de base, qui s'étend à la fois horizontalement et verticalement pour utiliser autant d'espace que nécessaire. Nous le paramétrons pour utiliser le ListStore que nous avons créé comme étant son « modèle » et d'où proviendront les éléments qu'il affichera.

note: (itstool) path: section/p
en: Now we create each of the vertical TreeViewColumns we'll see in the TreeView. The title for each one goes at the top, as you can see in the screenshot.
fr: Nous créons maintenant chacun des TreeViewColumns vertical qui s'afficheront dans notre TreeView. Comme le montre la capture d'écran, chaque titre se situe respectivement en haut de sa colonne.

note: (itstool) path: section/p
en: Here we create the CellRenderers that we'll use to display the text from our ListStore, and pack them into the TreeViewColumns. Each CellRendererText is used for all the entries in that column. Our normal CellRendererText just creates plain text, while our bold one uses heavier-weight text. We put it into the first name column, and tell the other two to use copies of the normal one. The "true" used as the second parameter for the <file>pack_start</file> method tells it to expand the cells when possible, instead of keeping them compact.
fr: Ici, nous créons les CellRenderers que nous allons utiliser pour afficher le texte contenu dans notre ListStore et nous les positionnons dans les TreeViewColumns. Chaque CellRendererText est utilisé pour toutes les entrées de cette colonne. Notre CellRendererText normal (normal) ne génère que du texte brut, alors que celui en gras (bold) utilise du texte plus gras. Nous le mettons dans la première en-tête de colonne et nous indiquons aux deux autres d'utiliser des copies du normal. L'argument « true » utilisé comme second paramètre de la méthode <file>pack_start</file> lui indique d'agrandir les cellules quand cela est possible, au lieu de les laisser compactes.

note: (itstool) path: note/p
en: <link href="http://www.pygtk.org/docs/pygtk/pango-constants.html">Here is a list</link> of other text properties you can use. In order to use these Pango constants, make sure to put the line <file>const Pango = imports.gi.Pango;</file> at the beginning of your code like we did.
fr: <link href="http://www.pygtk.org/docs/pygtk/pango-constants.html">Voici iciune liste</link> d'autres propriétés de texte que vous pouvez utiliser. Pour pouvoir utiliser les constantes Pango, assurez-vous d'ajouter la ligne <file>const Pango = imports.gi.Pango;</file> au début de votre code comme nous l'avons fait.

note: (itstool) path: section/p
en: Now that we've put the CellRenderers into the TreeViewColumns, we use the <file>add_attribute</file> method to tell each column to pull in text from the model our TreeView is set to use; in this case, the ListStore with the phonebook.
fr: Après avoir placé les CellRenderers dans les TreeViewColumns, nous utilisons la méthode <file>add_attribute</file> pour indiquer à chaque colonne d'extraire du modèle le texte pour lequel notre TreeView est programmée ; dans ce cas, le ListStore contenant le répertoire téléphonique.

note: (itstool) path: item/p
en: The first parameter is which CellRenderer we're going to use to render what we're pulling in.
fr: Le premier paramètre indique quel CellRenderer nous allons utiliser pour restituer ce que nous extrayons.

note: (itstool) path: item/p
en: The second parameter is what kind of information we're going to pull in. In this case, we're letting it know that we're rendering text.
fr: Le second paramètre indique le type d'information que nous voulons extraire. Dans ce cas, nous lui indiquons que nous voulons du texte.

note: (itstool) path: item/p
en: The third parameter is which of the ListStore's columns we're pulling that information in from.
fr: Le troisième paramètre indique de quelle colonne du ListStore nous voulons extraire cette information.

note: (itstool) path: section/p
en: After we've set that up, we use the TreeView's <file>insert_column</file> method to put our TreeViewColumns inside it in order. Our TreeView is now complete.
fr: Après avoir paramétré ceci, nous utilisons la méthode <file>insert_column</file> pour trier le contenu de nos TreeViewColumns. Notre TreeView est à présent terminée.

note: (itstool) path: note/p
en: Normally, you might want to use a loop to initialize your TreeView, but in this example we're spelling things out step by step for the sake of making it easier to understand.
fr: Normalement, vous devriez utiliser une boucle pour initialiser votre TreeView, mais dans cet exemple, nous avons détaillé étape par étape ce qui ce passe afin de mieux comprendre.

note: (itstool) path: section/title
en: Building the rest of the UI
fr: Construction du reste de l'interface utilisateur

note: (itstool) path: section/p
en: The TreeView's <file>get_selection</file> method returns an object called a TreeSelection. A TreeSelection is like a TreeIter in that it's basically a cursor that points at a particular row, except that the one it points to is the one that's visibly highlighted as selected.
fr: La méthode <file>get_selection</file> du TreeView retourne un objet appelé un TreeSelection. Un TreeSelection est comme un TreeIter, tout simplement un curseur qui pointe vers une ligne particulière, à la différence que celui-ci pointe vers la ligne qui est marqué visuellement comme sélectionnée.

note: (itstool) path: section/p
en: After we get the TreeSelection that goes with our TreeView, we ask it to tell us when it changes which row it's pointing to. We do this by connecting its <file>changed</file> signal to the _onSelectionChanged function we wrote. This function changes the text displayed by the Label we just made.
fr: Une fois obtenu le TreeSelection qui va avec notre TreeView, nous lui demandons de nous indiquer vers quelle ligne il pointe quand il est modifié. Nous obtenons cela en connectant le signal <file>changed</file> à la fonction _onSelectionChanged que nous avons programmée. Cette fonction modifie le texte affiché par l'étiquette que nous venons de créer.

note: (itstool) path: section/p
en: After we've gotten that out of the way, we create a <link xref="grid.js">Grid</link> to put everything in, then add it to our window and tell the window to show itself and its contents.
fr: Ceci fait, nous créons une <link xref="grid.js">grille (grid)</link> pour y placer le tout, puis nous l'ajoutons à notre fenêtre et demandons à cette fenêtre de s'afficher avec son contenu.

note: (itstool) path: section/title
en: Function which handles a changed selection
fr: Fonction prenant en charge la modification de la sélection

note: (itstool) path: section/p
en: The line of code with the let statement is a little convoluted, but it's nonetheless the best way to get a TreeIter pointing to the same row as our TreeSelection. It has to create a couple of other object references, but <file>iter</file> is the only one we need.
fr: La ligne de code utilisant l'instruction « let » est quelque peu compliquée, mais c'est néanmoins la meilleure façon d'obtenir un TreeIter qui pointe vers la même ligne que notre TreeSelection. Elle doit créer quelques autres références d'objets, mais le seul qui nous intéresse est l'<file>iter</file>.

note: (itstool) path: section/p
en: After we've done that, we call the Label's <file>set_label</file> function, and use the ListStore's <file>get_value</file> function a handful of times to fill in the data we want to put in it. Its parameters are a TreeIter pointing to the row we want to get data from, and the column.
fr: Ceci fait, nous appelons la fonction <file>set_label</file> de l'étiquette et nous utilisons la fonction <file>get_value</file> du ListStore autant de fois que nécessaire pour la remplir de toutes les données que nous souhaitons y mettre. Ses paramètres sont un TreeIter pointant vers la ligne dont nous voulons extraire les données et la colonne.

note: (itstool) path: section/p
en: Here, we want to get data from all four columns, including the "hidden" one that's not part of the TreeView. This way, we can use our Label to show strings that are too large to fit in the TreeView, and that we don't need to see at a glance.
fr: Ici, nous voulons obtenir les données des quatre colonnes, y compris celles qui sont « masquées » et qui ne font pas partie du TreeView. De cette façon, nous pouvons utiliser notre étiquette pour afficher les chaînes de caractères qui sont trop longues pour tenir dans le TreeView et que nous n'avons pas besoin de voir au premier coup d'œil.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished TreeViewExample class, and set the application running.
fr: Enfin, nous créons une nouvelle instance de la classe TreeViewExample qui est terminée et nous démarrons l'application.

note: (itstool) path: info/desc
en: A TreeView displaying a ListStore (simpler example)
fr: Un TreeView affichant un ListStore (exemple le plus simple)

note: (itstool) path: page/title
en: Simple TreeView with ListStore
fr: TreeView tout simple avec ListStore

note: (itstool) path: info/desc
en: A widget can display any TreeModel implementation (lists and trees)
fr: Un composant graphique peut afficher n'importe quelle implémentation de TreeModel (en listes et arborescentes)

note: (itstool) path: page/title
en: Simple Treeview with ListStore
fr: Simple Treeview avec ListStore

note: (itstool) path: page/p
en: This TreeView displays a simple ListStore with the Selection "changed" signal connected.
fr: Ce Treeview affiche un ListStore tout simple avec le signal « changed » de la sélection connecté.

note: (itstool) path: info/desc
en: A TreeView displaying a TreeStore (simpler example)
fr: Un TreeView affichant un TreeStore (exemple le plus simple)

note: (itstool) path: page/p
en: This TreeView displays a TreeStore.
fr: Ce TreeView affiche un TreeStore.

note: (itstool) path: info/desc
en: A tutorial for beginners who want to learn how to program GUIs using GTK+ in Python.
fr: Un tutoriel pour les débutants souhaitant apprendre comment programmer des interfaces utilisateur graphiques en Python.

note: (itstool) path: synopsis/p
en: If you have never programmed before, or are not familiar with the concepts of object oriented programming, you may need to learn a few basics first. The book <link href="http://learnpythonthehardway.org/book/">Learn Python the Hard Way</link> or <link href="http://docs.python.org/tutorial/index.html">The Python Tutorial</link> may be a better place for you to start. You may also be interested in <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/index.html">The Python GTK+ 3 Tutorial</link>. Once you master the basics, be sure to come back and check out these tutorials.
fr: Si vous n'avez jamais programmé auparavant, ou si vous n'êtes pas à l'aise avec le concept de programmation orienté objets, il est préférable d'acquérir quelques bases avant toute chose. Vous pourriez par exemple commencer par lire les livres <link href="http://learnpythonthehardway.org/book/">Learn Python the Hard Way</link> ou <link href="http://docs.python.org/tutorial/index.html">The Python Tutorial</link>. Vous pourriez aussi être intéressé par <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/index.html">The Python GTK+ 3 Tutorial</link>. Dès que vous maîtrisez les bases, n'oubliez pas de revenir consulter ces tutoriels.

note: (itstool) path: section/title
en: To run the code samples
fr: Lancement des exemples de code

note: (itstool) path: item/screen
en: python <var>filename</var>.py
fr: python <var>nomdufichier</var>.py

note: (itstool) path: steps/title
en: Tutorial
fr: Tutoriel

note: (itstool) path: steps/title
en: Basic windows
fr: Fenêtres élémentaires

note: (itstool) path: steps/title
en: Images and labels
fr: Images et étiquettes

note: (itstool) path: steps/title
en: Other display widgets
fr: Autre éléments graphiques d'affichage

note: (itstool) path: steps/title
en: Dialogs
fr: Boîtes de dialogue

note: (itstool) path: steps/title
en: TreeViews and ComboBoxes (using the M/V/C design)
fr: Arborescences et boites combinées (utilisant la conception M/V/C)

note: (itstool) path: steps/title
en: Custom widget
fr: Élément graphique personnalisé

note: (itstool) path: page/title
en: Tutorials, code samples and platform demos in Vala
fr: Tutoriels, exemples de code et plateforme de démonstrations en vala

note: (itstool) path: section/title
en: Code samples and tutorial
fr: Exemples de code et tutoriel

note: (itstool) path: info/desc
en: How to plan an application that uses asynchronous calls. Asynchronous calls will be presented through a weather application.
fr: Comment planifier une application qui utilise des appels asynchrones. Les appels asynchrones sont présentés au travers d'une application météo.

note: (itstool) path: synopsis/p
en: In this guide well construct a weather application using asynchronous calls. Weather information in this example is fetched from geonames.org and the application is using the <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">ICAO codes </link> to place your weather request. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this guide we we'll go through the following parts:
fr: Dans cette partie du guide, nous allons construire une application météo utilisant des appels asynchrones. Dans cet exemple, les informations météorologiques sont récupérées sur geonames.org et l'application utilise les <link href="http://fr.wikipedia.org/wiki/Liste_des_codes_OACI_des_a%C3%A9roports">codes OACI</link> pour localiser les requêtes météo. Pour écrire et lancer tous les exemples de code, vous avez besoin d'un éditeur pour écrire le code, de l'application Terminal et d'un ordinateur sur lequel GNOME 3 ou supérieur est installé. Dans ce guide, nous illustrerons les éléments suivants :

note: (itstool) path: section/title
en: Planning the graphical user interface
fr: Organisation de l'interface graphique utilisateur

note: (itstool) path: section/p
en: Structuring an application for GNOME 3 means you will be using <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link>. The most important thing is to remember that the main window will only accept one widget. You must plan your structure accordingly (this example is using Gtk.Grid). A useful method is to draw out the main window and place every widget needed inside that box. By looking at an image of your future application it is easier to tell what are the relations between widgets. For example Gtk.Grid places your widgets in relation to other widgets, so after the first widget is in place, placing widgets can be done in relation to any widget on the grid.
fr: Pour structurer une application pour GNOME 3, vous devez utiliser <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link>. Vous devez aussi vous souvenir que la fenêtre principale ne peut comporter qu'un seul composant graphique, donc organisez votre structure en fonction de cet impératif (dans cet exemple, nous utilisons Gtk.Grid). Une bonne méthode consiste à dessiner la boîte « fenêtre principale » et d'y placer chaque composant graphique nécessaire. En regardant l'image de votre future application, vous pourrez plus facilement déceler les relations existantes entre les éléments graphiques. Par exemple, Gtk.Grid place vos éléments graphiques en fonction des autres, donc la position du premier sur la grille conditionne le placement des autres.

note: (itstool) path: section/title
en: Asynchronous calls
fr: Appels asynchrones

note: (itstool) path: section/p
en: With many programming languages, all operations are run synchronously - you tell the program to do something, and it will wait until that action completes before proceeding. This is however bad for graphical user interfaces, as then the whole application will be frozen while the program waits for the operation. Going asynchronous (async) helps here. With async calls, your UI won't be blocked with any requests. Async calls make your application more flexible and better equipped to handle situations when calls take more time than expected or for some reason get jammed. Async calls can be used for example file system I/O and for slower calculations in the background.
fr: Avec beaucoup de langages de programmation, toutes les opérations sont exécutées de manière synchrone : quand vous exécutez une action, le programme attend qu'elle soit terminée avant de continuer. Cependant, cette procédure est mal adaptée aux interfaces utilisateurs graphiques, car l'application devient inactive pendant ce temps. La méthode asynchrone (async) est donc beaucoup mieux adaptée dans notre cas, car elle ne bloque pas votre interface pour d'autres actions. Elle rend ainsi votre application plus flexible et mieux armée pour affronter des appels plus longs que prévus, ou qui parfois restent bloqués pour une raison ou une autre. Vous pouvez par exemple utiliser cette méthode pour des accès entrée/sortie de fichiers systèmes et des calculs lents en arrière-plan.

note: (itstool) path: section/p
en: In this example we have to get data from geonames.org. While we do that we want the rest of our program to continue. If we wouldn't get any information from geonames.org for the lack of internet connection and this would be a synchronous application we would never get to the point where our main_quit() is processed correctly and the application would have to killed from Terminal.
fr: Dans cet exemple, il nous faut obtenir des données de geonames.org. Pendant ce temps, nous voulons que le reste du programme continue à tourner. Si nous utilisions pour cela une application synchrone et que nous n'arrivions pas à avoir une connexion internet fonctionnelle avec le site geonames.org, nous n'obtiendrions aucune donnée et donc nous n'atteindrions jamais la ligne où l'instruction main_quit() est exécutée. Il faudrait alors « tuer » l'application à partir du Terminal.

note: (itstool) path: section/title
en: The different parts of the program
fr: Les différentes parties du programme

note: (itstool) path: page/title
en: The main program file
fr: Le fichier du programme principal

note: (itstool) path: synopsis/p
en: In this part of the guide well construct the main program file of the weather application. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this part we we'll go through the following parts:
fr: Dans cette partie du guide, nous allons construire le fichier du programme principal de l'application météo. Pour écrire et lancer tous les exemples de code, vous avez besoin d'un éditeur pour écrire le code, de l'application Terminal et d'un ordinateur sur lequel GNOME 3 ou supérieur est installé. Dans ce guide, nous illustrerons les éléments suivants :

note: (itstool) path: section/p
en: This line tells how to run the script. It needs to be the first line of the code and it needs to be executable. To get the execution rights go to Terminal and run in right folder: chmod +x scriptname. Or you can use the graphical filemanager. Just go to the right folder where your code is, right click you code file, choose properties, click the permissions tab and check the box for allow executing file as a program
fr: Cette ligne indique comment exécuter le script. Elle doit être la première ligne de code et le script doit être exécutable. Pour donner les bonnes permissions, allez dans Terminal et lancez dans le dossier correct la commande : chmod +x nomduscript. Vous pouvez aussi utiliser le gestionnaire de fichiers. Déplacez-vous dans le dossier où se trouve votre code, faites un clic-droit sur le fichier, sélectionnez Propriétés, cliquez sur l'onglet Permissions et cochez la case pour permettre l'exécution du fichier comme un programme.

note: (itstool) path: section/p
en: In order to have a working program we need to import a GObject Introspection -library to our use. For working UI, we need Gtk. Gtk is imported in the beginning so we have it in our use everywhere. We also import our own local JavaScript library geonames to our use here.
fr: Afin que le programme fonctionne, vous devez importer une bibliothèque d'introspection GObject à utiliser. Pour faire une interface graphique, nous avons besoin de Gtk. Gtk est importée au début afin de pouvoir l'utiliser partout ensuite. Nous importons également notre propre bibliothèque locale JavaScript geonames afin de pouvoir l'utiliser ici.

note: (itstool) path: section/title
en: Adding a grid and all the necessary widgets to it
fr: Ajout d'une grille et de tous les éléments graphiques nécessaires

note: (itstool) path: section/p
en: In this section we create the grid we are going to use for positioning the widgets. All the buttons, labels and entrys are initialized and placed on the grid. As seen from the placing of the different widgets, they don't need to be related only to one widget. At this point some of the labels don't have any content. The content for those widgets is applied later. If you run the application at this stage, you have the UI ready, but the widgets are not connected to anything. For this we need to first build the weather searching local library, and then get the information we need asynchronously. When we have our local library ready we can connect it to the necessary widgets.
fr: Dans cette section, nous créons la grille que nous allons utiliser pour positionner les éléments graphiques. Tous les boutons, étiquettes et champs de saisie sont initialisés et positionnés dans la grille. Comme vous pouvez le voir à partir du positionnement des différents éléments graphiques, ils ne sont pas nécessairement en relation avec un seul composant graphique. Pour l'instant, certaines étiquettes n'ont pas de contenu. Le contenu de ces éléments graphiques est appliqué plus tard. Si vous lancez l'application à cet instant, l'interface graphique est prête mais les éléments graphiques ne sont connectés à rien. Pour cela, nous avons besoin de construire d'abord la bibliothèque locale de recherche météorologique puis de récupérer les informations nécessaires de manière asynchrone. Lorsque notre bibliothèque locale est prête, nous pouvons la connecter aux éléments graphiques nécessaires.

note: (itstool) path: section/title
en: Requesting the weather information asynchronously
fr: Requête des informations météo de manière asynchrone

note: (itstool) path: section/p
en: This function is dedicated for calling for the weather information and updating labels and icons accordingly. In the beginning of the function we get the user input for the search. So here for the first time we use our own library and assign it to variable GeoNames. While assigning WeatherService we give it the station. The firs thing we do with GeoNames is to request weather. Everything after GeoNames.getWeather(function(error, weather) happens only if we either get an error message or weather information. If either doesn't come, the rest of the program works as normal, so main_Quit works.
fr: Cette fonction est dédiée à la recherche des informations météo et à la mise à jour des étiquettes et des icônes de manière adéquate. Au début de la fonction, nous récupérons la saisie de l'utilisateur pour la recherche. Ainsi, ici, pour la première fois, nous utilisons notre propre bibliothèque et l'attribuons à la variable GeoNames. Lors de l'attribution de WeatherService, nous lui fournissons la station. La première chose que nous faisons avec GeoNames est la requête météo. Tout ce qui se trouve derrière GeoNames.getWeather(function(error, weather)  ne se produit que si nous obtenons un message d'erreur ou des informations météo. Si aucun des deux ne se produit, le reste du programme fonctionne normalement, donc main_Quit  fonctionne.

note: (itstool) path: section/title
en: Connecting signals to button and entry.
fr: Connexion des signaux au bouton et champ de saisie.

note: (itstool) path: section/p
en: And finally we have the connections that make the whole application run as it should. We connect both the entry and the button to do the same thing, getting the weather. So it doesn't matter weather you press enter of click the search button.
fr: Enfin, nous avons les connexions qui permettent à l'application de fonctionner comme il se doit. Nous connectons à la fois le champ de saisie et le bouton afin qu'ils fassent la même chose : obtenir la météo. De cette manière, peu importe que l'utilisateur appuie sur la touche Entrée ou clique sur le bouton de recherche.

note: (itstool) path: section/p
en: Weatherapp.js file looks like this:
fr: Le fichier weatherapp.js ressemble à ceci :

note: (itstool) path: section/p
en: Running until you have all the autotools files ready. :
fr: Exécutez-le jusqu'à obtenir tous les fichiers autotools prêts.

note: (itstool) path: section/p
en: Use this command on terminal while developing your modules. When calling your program in this manner it knows where to find your custom JSlibraries, in this case geonames.js.
fr: Utilisez cette commande dans un terminal pendant le développement de votre module. En appelant votre programme de cette manière, il sait où trouver votre bibliothèques JavaScript personnalisées, dans ce cas geonames.js.

note: (itstool) path: page/title
en: Autotools and Icons
fr: Autotools et icônes

note: (itstool) path: synopsis/p
en: In this part of the guide well construct the autotools and custom icons needed for weather application to be a seamless part of your desktop. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this guide we we'll go through the following parts:
fr: Dans cette partie du guide, nous allons construire les « autotools » et personnaliser les icônes dont nous avons besoin pour que l'application météo fasse partie intégrante de notre bureau. Pour écrire et lancer tous les exemples de code, vous avez besoin d'un éditeur pour écrire le code, de l'application Terminal et d'un ordinateur sur lequel GNOME 3 ou supérieur est installé. Dans ce guide, nous illustrerons les éléments suivants :

note: (itstool) path: section/title
en: Autotools and necessary files
fr: Autotools et fichiers nécessaires

note: (itstool) path: section/p
en: The thing to notice in this file is that the Exec line will make this .desktop file work only after running all the other makefiles. Weatherapp.sh is a small shell script created with the weatherapp.sh.in.
fr: La chose à noter dans ce fichier est que la ligne « Exec » rendra fonctionnel ce fichier « desktop » seulement après avoir exécuté tous les autres « makefiles ». Weatherapp.sh est un petit script créé avec le weatherapp.sh.in.

note: (itstool) path: section/p
en: This file is a template to the file Makefile will do to be run from .desktop.
fr: Ce fichier est un modèle que le fichier Makefile va créer pour être lancé à partir de .desktop.

note: (itstool) path: section/p
en: This needs a bit more explaining. Compared to the HelloWorld Makefile.am this has changed quite a bit. Lets go through all the new blocks:
fr: Ceci nécessite un peu plus d'explications. Comparé au Makefile.am de Helloworld, celui-ci a été fortement modifié. Parcourons tous les nouveaux blocs :

note: (itstool) path: section/p
en: bin_scripts are the files that are needed to run your application. In thin case they are the first two files are the program itself and the third is the script that launches the application.
fr: « bin_scripts » sont les fichiers nécessaires pour exécuter votre application. Dans ce cas, les deux premiers fichiers sont les programmes eux-mêmes et le troisième est le script qui lance l'application.

note: (itstool) path: section/p
en: EXTRA_DIST are the files that are to be distributed
fr: EXTRA_DIST sont les fichiers qui doivent être distribués.

note: (itstool) path: section/p
en: do_subst block is bits and pieces that need to be where they are
fr: le bloc « do_subst » est quelque chose qui a besoin d'être là où il est.

note: (itstool) path: section/p
en: after the comment #icons in the application there are all the icons that are used by the program. For them to be useful you need to install the icons in correct places and that is done byt the install-icons: bit
fr: Après le commentaire « #icons in the application » se trouvent toutes les icônes qui sont utilisées par le programme. Pour qu'elles soient utiles, vous devez installer les icônes aux emplacements corrects, ce qui est réalisé par la partie « install-icons ».

note: (itstool) path: section/title
en: Custom icons for your application
fr: Icônes personnalisées pour votre application

note: (itstool) path: section/p
en: When thinking about custom icons a good rule of thumb is: do you expect to see that icon used elsewhere or is it private to your app? If the first (e.g. the icons in the desktop file that are shown by the shell) then you need /usr/share/hicolor, otherwise (e.g. the weather icons of your app) /usr/share/$application/bla/bla
fr: Lorsque vous pensez icônes personnalisées, une bonne règle est : souhaitez-vous que cette icône puisse être utilisée autre part ou est-elle privée ? Dans le premier cas (par ex. des icônes dans le fichier desktop qui sont affichées par le shell) alors vous avez besoin de /usr/share/hicolor sinon (par ex. les icônes météo de votre application) /usr/share/$application/bla/bla

note: (itstool) path: section/p
en: Using autotools you have to make some changes to your .desktop and Makefile.am files. In the desktop file you change the Icon's name Icon=weather-icon. In the Makefile.am file you add these two lines to the end of your application #the application icon
fr: Pour utiliser autotools, vous devez apporter quelques modifications à vos fichiers .desktop et Makefile. Dans le fichier desktop, modifiez le nom de l'icône Icon=weather-icon. Dans le fichier Makefile.am, ajoutez ces deux lignes à la fin de votre application #the application icon.

note: (itstool) path: page/title
en: Local library geoNames
fr: Bibliothèque locale geoNames

note: (itstool) path: synopsis/p
en: In this part of the guide we'll construct the local library geoNames using asynchronous calls. Weather information in this example is fetched from geonames.org and the application is using the <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">ICAO codes </link> to place your weather request. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this guide we'll go through the following parts:
fr: Dans cette partie du guide nous allons construire la bibliothèque locale geoNames en utilisant des appels asynchrones. Dans cet exemple, les informations météorologiques sont récupérés sur geonames.org et l'application utilise les <link href="http://fr.wikipedia.org/wiki/Liste_des_codes_OACI_des_a%C3%A9roports">codes OACI</link> pour localiser les requêtes météo. Pour écrire et lancer tous les exemples de code vous avez besoin d'un éditeur pour saisir le code, de l'application Terminal et d'un ordinateur sur lequel GNOME 3 ou supérieur est installé. Dans ce guide, nous illustrerons les éléments suivants :

note: (itstool) path: section/title
en: Local library for getting the weather
fr: Bibliothèque locale pour obtenir la météo

note: (itstool) path: section/p
en: For this we need a new file that will be our local library.
fr: Pour cela, nous avons besoin d'un nouveau fichier qui sera notre bibliothèque locale.

note: (itstool) path: section/p
en: In the first lines we'll import and initialize the libraries we need to use in this local library. Soup handles all the requests we have to make with http.
fr: Dès les premières lignes, nous importons et initialisons les bibliothèques dont nous avons besoin dans cette bibliothèque locale. « Soup » prend en charge toutes les requêtes que nous devons faire via http.

note: (itstool) path: section/title
en: Creating function GeoNames
fr: Création de la fonction GeoNames

note: (itstool) path: section/p
en: Here we create the function GeoNames that will handle getting weather for us. JavaScript allows us to create functions that have little inside at first and later expand them. This will be done inside the GeoNames.prototype curly braces{}
fr: Ici, nous créons la fonction GeoNames qui prend en charge l'obtention de la météo pour nous. Le JavaScript nous permet de créer des fonctions qui, au départ contiennent peu de code et de les étendre ensuite. Cela se fait à l'intérieur des accolades {} de GeoNames.prototype.

note: (itstool) path: section/title
en: Methods for GeoNames
fr: Méthodes pour GeoNames

note: (itstool) path: section/p
en: The first method for GeoNames is getWeather and the second getIcon. In getWeather we make a http request with soup, handle errors and then parse the information from the request to form we can use it. In getIcon we simply compare the results we got from getWeather to the switch we have in order to get the icon matching current weather. Now that we have our local library ready, it's time to make use of it.
fr: La première méthode de GeoNames est getWeather et la seconde getIcon. Dans getWeather, une requête http est effectuée avec « soup », nous prenons en charge les erreurs puis analysons (parse) les informations à partir de la requête vers une forme utilisable. Dans getIcon, nous comparons tout simplement les résultats obtenus avec getWeather à l'aide de l'instruction switch afin d'obtenir l'icône correspondant à la météo actuelle. Notre bibliothèque locale est prête et nous pouvons maintenant l'utiliser.

note: (itstool) path: section/p
en: Here is the entire code for our local library. The main program file calls this asynchronously.
fr: Voici le code complet pour notre bibliothèque locale. Le fichier principal du programme l'appelle de manière asynchrone.

note: (itstool) path: info/desc
en: A toplevel window which can contain other widgets
fr: Une fenêtre de niveau supérieur qui peut contenir d'autres éléments graphiques

note: (itstool) path: page/title
en: Window
fr: Fenêtre

note: (itstool) path: page/p
en: A minimal GtkApplication. Use <link xref="GtkApplicationWindow.c">Application Window</link> if you need GMenu support.
fr: Une GtkApplication minimale. Utilisez <link xref="GtkApplicationWindow.c">ApplicationWindow</link> si vous avez besoin de la prise en charge de GMenu.

note: (itstool) path: info/desc
en: A basic window which can contain other widgets
fr: Une fenêtre élémentaire qui peut contenir d'autres éléments graphiques

note: (itstool) path: td/p
en: A minimal GtkApplication
fr: Une GtkApplication minimale

note: (itstool) path: td/p
en: Use <link xref="GtkApplicationWindow.js">ApplicationWindow</link> if you need GMenu support.
fr: Utilisez <link xref="GtkApplicationWindow.js">ApplicationWindow</link> si vous avez besoin de la prise en charge de GMenu.

note: (itstool) path: page/p
en: In this example we used the following:
fr: Dans cet exemple, les éléments suivants sont utilisés :

note: (itstool) path: section/title
en: Useful methods for a Window widget
fr: Méthodes utiles pour un composant graphique fenêtre

note: (itstool) path: td/p
en: The simplest Gtk.Application
fr: L'application Gtk.Application la plus basique

note: (itstool) path: td/p
en: Use <link xref="GtkApplicationWindow.vala">Application Window</link> if you need GMenu support.
fr: Utilisez <link xref="GtkApplicationWindow.vala">Application Window</link> si vous avez besoin de la prise en charge de GMenu.

note: (itstool) path: item/p
en: The widget <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.html">Gtk.Window</link>
fr: Le composant graphique <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.html">Gtk.Window</link>

note: (itstool) path: item/p
en: The enum <link href="http://www.valadoc.org/gtk+-3.0/Gtk.WindowPosition.html">Gtk.WindowPosition</link>
fr: L'énumération <link href="http://www.valadoc.org/gtk+-3.0/Gtk.WindowPosition.html">Gtk.WindowPosition</link>

note: (itstool) path: item/p
en: The method <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.set_default_size.html">set_default_size</link>
fr: La méthode <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.set_default_size.html">set_default_size</link>
