gnome-devel-docs master - en to ca translation catalogue (128 entries)

note: (itstool) path: credit/name
en: GNOME Documentation Project
ca: Projecte de documentació del GNOME

note: (itstool) path: item/p
en: Set up a basic project in Anjuta
ca: Creació d'un projecte a l'Anjuta

note: (itstool) path: section/title
en: Create a project in Anjuta
ca: Creació d'un projecte a l'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.
ca: Abans de començar a programar, heu de crear un projecte nou a l'Anjuta. L'Anjuta crearà tots els fitxers necessaris per, més endavant, construir i executar el codi. És molt útil per així mantenir-ho tot junt.

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.
ca: Inicieu l'Anjuta i feu clic a <guiseq><gui>Fitxer</gui><gui>Nou</gui><gui>Projecte</gui></guiseq> per obrir l'auxiliar de projectes.

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:
ca: Feu clic a <gui>Aplica</gui> i es crearà el projecte. Obriu <file>src/main.c</file> des de les pestanyes <gui>Projecte</gui> o <gui>Fitxer</gui>. Hauríeu de veure una mica de codi que comença amb les línies:

note: (itstool) path: section/title
en: Build and run the application
ca: Muntatge i execució de l'aplicació

note: (itstool) path: section/title
en: Reference Implementation
ca: Implementació de referència

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>.
ca: Si teniu algun problema amb el programa d'aprenentatge, compareu el codi amb el <link href="guitar-tuner/guitar-tuner.c">codi de referència</link>.

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.
ca: Trieu <gui>GTKmm (simple)</gui> a la pestanya <gui>C++</gui>, feu clic a <gui>Continua</gui> i empleneu les dades de les pàgines següents de l'auxiliar. Utilitzeu <file>guitar-tuner</file> com a nom de projecte i de directori.

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:
ca: Feu clic a <gui>Aplica</gui> i es crearà el projecte. Obriu el fitxer <file>src/main.cc</file> des de la pestanya de <gui>Projecte</gui> o de <gui>Fitxer</gui>. El fitxer ja conté unes línies de codi que comencen amb:

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>.
ca: Si teniu algun problema amb el programa d'aprenentatge, compareu el codi amb el <link href="guitar-tuner/guitar-tuner.cc">codi de referència</link>.

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:
ca: Feu clic a <gui>Aplica</gui> i es crearà el projecte. Obriu el fitxer <file>src/guitar_tuner.py</file> des de la pestanya de <gui>Projecte</gui> o de <gui>Fitxer</gui>. El fitxer ja conté unes línies de codi que comencen amb:

note: (itstool) path: section/title
en: Run the application
ca: Execució de l'aplicació

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>.
ca: Si teniu algun problema amb el programa d'aprenentatge, compareu el codi amb el <link href="guitar-tuner/guitar-tuner.py">codi de referència</link>.

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>.
ca: Si teniu algun problema amb el programa d'aprenentatge, compareu el codi amb el <link href="guitar-tuner/guitar-tuner.vala">codi de referència</link>.

note: (itstool) path: synopsis/p
en: In this tutorial, you will learn:
ca: En aquest programa d'aprenentatge aprendreu a:

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>.
ca: Si teniu algun problema amb el programa d'aprenentatge, compareu el codi amb el <link href="image-viewer/image-viewer.c">codi de referència</link>.

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.
ca: Trieu <gui>GTKmm (simple)</gui> a la pestanya <gui>C++</gui>, feu clic a <gui>Continua</gui> i empleneu les dades de les pàgines següents de l'auxiliar. Utilitzeu <file>image-viewer</file> com a nom de projecte i de directori.

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:
ca: Feu clic a <gui>Aplica</gui> i es crearà el projecte. Obriu el fitxer <file>src/main.cc</file> des de la pestanya de <gui>Projecte</gui> o de <gui>Fitxer</gui>. El fitxer ja conté unes línies de codi que comencen amb:

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>.
ca: Si teniu algun problema amb el programa d'aprenentatge, compareu el codi amb el <link href="image-viewer/image-viewer.cc">codi de referència</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>image-viewer</file> as project name and directory.
ca: Trieu <gui>JavaScript genèric</gui> a la pestanya <gui>JS</gui>, feu clic a <gui>Continua</gui> i empleneu les dades de les pàgines següents de l'auxiliar. Utilitzeu <file>image-viewer</file> com a nom de projecte i de directori.

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.
ca: Feu clic a <gui>Aplica</gui> i es crearà el projecte. Obriu el fitxer <file>src/main.js</file> des de la pestanya de <gui>Projecte</gui> o de <gui>Fitxer</gui>. El fitxer ja conté un exemple de codi molt bàsic.

note: (itstool) path: section/title
en: Classes in JavaScript
ca: Classes a JavaScript

note: (itstool) path: section/title
en: A first Gtk application
ca: La primera aplicació amb GTK+

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>.
ca: Si teniu algun problema amb el programa d'aprenentatge, compareu el codi amb el <link href="image-viewer/image-viewer.js">codi de referència</link>.

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.
ca: Feu clic a <gui>Aplica</gui> i es crearà el projecte. Obriu el fitxer <file>src/image_viewer.py</file> des de la pestanya de <gui>Projecte</gui> o de <gui>Fitxer</gui>. El fitxer ja conté un exemple de codi molt bàsic.

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>.
ca: Si teniu algun problema amb el programa d'aprenentatge, compareu el codi amb el <link href="image-viewer/image-viewer.py">codi de referència</link>.

note: (itstool) path: credit/name
en: GNOME Documentation Team
ca: Equip de documentació del GNOME

note: (itstool) path: page/title
en: GNOME Developer Platform Demos
ca: Demostracions de la plataforma de desenvolupament del GNOME

note: (itstool) path: item/p
en: Create a GTK+ application
ca: Creació de l'aplicació de GTK+

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:
ca: Feu clic a <gui>Aplica</gui> i es crearà el projecte. Obriu el fitxer <file>src/magic_mirror.vala</file> des de la pestanya de <gui>Projecte</gui> o de <gui>Fitxer</gui>. El fitxer ja conté unes línies de codi que comencen amb:

note: (itstool) path: info/desc
en: A Clutter image viewer
ca: Un visualitzador d'imatges fet amb Clutter

note: (itstool) path: synopsis/p
en: For this example we will build a simple image viewer using Clutter. You will learn:
ca: En aquest exemple es construirà un visualitzador d'imatges senzill amb la Clutter. Aprendreu a:

note: (itstool) path: item/p
en: How to size and position <code>ClutterActor</code>s
ca: Com dimensionar i posicionar els <code>ClutterActor</code>

note: (itstool) path: item/p
en: How to place an image in a <code>ClutterActor</code>
ca: Com posar una imatge en un <code>ClutterActor</code>

note: (itstool) path: item/p
en: How to do simple transitions using Clutter's animation framework
ca: Com fer transicions senzilles utilitzant l'entorn de treball d'animacions de la Clutter

note: (itstool) path: item/p
en: How to make <code>ClutterActor</code>s respond to mouse events
ca: Com fer que els <code>ClutterActor</code> responguin a esdeveniments del ratolí

note: (itstool) path: item/p
en: How to get file names from a directory
ca: Com obtenir els noms dels fitxers d'un directori

note: (itstool) path: section/title
en: Introduction
ca: Introducció

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.
ca: Assegureu-vos que <gui>Utilitza el GtkBuilder per a la interfície d'usuari</gui> està desactivat ja que en aquest programa d'aprenentatge es crearà la interfície d'usuari manualment. Doneu una ullada al programa d'aprenentatge <link xref="guitar-tuner.c">Afinació de guitarres</link> que utilitza el constructor d'interfícies (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.
ca: Habiliteu <gui>Configura els paquets externs</gui>. A la llista de la pàgina següent seleccioneu <em>clutter-1.0</em> per incloure la biblioteca Clutter al projecte.

note: (itstool) path: section/title
en: A look at Photo Wall
ca: Una mirada al Mur de Fotografies

note: (itstool) path: section/p
en: Our image viewer presents the user with a wall of images.
ca: El visualitzador d'imatges mostra un mur d'imatges a l'usuari.

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.
ca: Quan es fa clic a una imatge, aquesta s'anima per cobrir l'àrea de visualització. Quan es fa clic a la imatge que té el focus, aquesta retorna a la seva posició original amb una animació que dura exactament 500 mil·lisegons.

note: (itstool) path: section/title
en: Initial setup
ca: Configuració inicial

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>:
ca: El segment de codi que ve a continuació conté la majoria de definicions i variables que utilitzarem en les seccions següents. Podeu utilitzar-ho com a referència per a les seccions posteriors. Copieu aquest codi a l'inici de <file>src/main.c</file>:

note: (itstool) path: section/title
en: Jumping into the code
ca: Primers passos en el codi

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.
ca: Es donarà primer una ullada general a la funció <code>main()</code>. Després es mirarà la resta de seccions del codi en més profunditat. Canvieu el fitxer <file>src/main.c</file> perquè contingui aquesta funció <code>main()</code>. Podeu esborrar la funció <code>create_window()</code> perquè no fa falta per aquest 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.
ca: Línia 4: el <code>ClutterColor</code> es defineix establint els valors del vermell, el verd, el blau i de la transparència (alfa). El rang de valors és de 0 a 255. Per la transparència un valor de 255 és opac.

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.
ca: Línia 7: heu d'inicialitzar la Clutter. Si us en descuideu, obtindreu errors molt estranys. Tingueu-ho en compte.

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.
ca: Un <code>ClutterStage</code> és el <code>ClutterActor</code> de més alt nivell on es posen d'altres <code>ClutterActor</code>.

note: (itstool) path: section/title
en: Setting up our image actors
ca: Configuració dels actors d'imatges

note: (itstool) path: note/p
en: In Clutter, an actor is the most basic visual element. Basically, everything you see is an actor.
ca: A la Clutter un actor és l'element visual bàsic. Tot el que es veu és un actor.

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.
ca: En aquesta secció, es farà una repassada amb més detall al bucle que s'utilitza per definir els <code>ClutterActor</code> que mostraran les imatges.

note: (itstool) path: section/title
en: Loading the images
ca: Càrrega de les imatges

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.
ca: Abans de continuar amb la Clutter s'explica a continuació com es poden obtenir els noms dels fitxers del directori d'imatges de l'usuari.

note: (itstool) path: section/title
en: Set up the actors
ca: Configuració dels actors

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.
ca: En aquesta secció es descriu com dimensionar i posicionar els <code>ClutterActor</code> i com preparar-los per la interacció amb l'usuari.

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.
ca: Línia 7: establir un actor en mode reactiu significa que reaccionarà als esdeveniments, com ara el <code>button-press-event</code> de l'exemple que segueix. Pel mur de fotografies, tots els <code>ClutterActor</code> del mur s'han d'establir com a reactius inicialment.

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.
ca: Línia 9 a 12: es connecta el <code>button-press-event</code> a la crida de retorn <code>actor_clicked_cb</code>, que es detallarà tot més endavant.

note: (itstool) path: section/p
en: At this point we've got a wall of images that are ready to be viewed.
ca: En aquest moment ja s'ha obtingut un mur de fotografies a punt per visualitzar-se.

note: (itstool) path: section/title
en: Reacting to the clicks
ca: Reacció als 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.
ca: Línies 1 a 4: assegureu-vos que la funció de crida de retorn coincideix amb la signatura del senyal <code>button_clicked_event</code>. A l'exemple només es fa servir el primer argument, el <code>ClutterActor</code> al que es fa clic.

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.
ca: Un breu resum sobre els arguments que no s'utilitzen en aquest exemple. El <code>ClutterEvent</code> és diferent depenent de quin esdeveniment es gestiona. Per exemple, un esdeveniment de tecla produeix un <code>ClutterKeyEvent</code> del qual podeu obtenir la tecla premuda a més d'altra informació. Pels esdeveniments de ratolí obteniu un <code>ClutterButtonEvent</code> del qual obtindreu els valors <code>x</code> i <code>y</code>. Vegeu la documentació de la Clutter per altres tipus de <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.
ca: Línia 7: s'estableix un indicador estàtic per fer un seguiment de l'estat d'execució: en mode mur o en mode focus. A l'inici s'està en mode mur i per tan cap imatge té el focus. Així, s'estableix l'indicador a <code>FALSE</code>.

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.
ca: Línia 24: si s'arriba a aquesta línia de codi és que ens l'aplicació està en l'estat de mur i s'ha de donar el focus a un <code>ClutterActor</code>. Es desa la posició inicial per poder tornar-hi més endavant.

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.
ca: Línia 25: s'estableix la propietat <code>reactive</code> del <code>ClutterActor</code> a <code>TRUE</code> permetent que reaccioni als esdeveniments. En el mode focus l'únic <code>ClutterActor</code> que ha de rebre esdeveniments és el <code>ClutterActor</code> que es visualitza. Fent-li clic tornarà a la seva posició inicial.

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.
ca: Com s'ha comentat més amunt, els <code>ClutterActor</code> amb el valor de <code>depth</code> més alt rebran els esdeveniments però poden passar-lo als <code>ClutterActor</code> de sota seu. Si retorna <code>TRUE</code> no es passarà l'esdeveniment als <code>ClutterActor</code> de sota, mentre que si es retorna <code>FALSE</code> es passarà.

note: (itstool) path: note/p
en: Remember, however, that to receive events the <code>ClutterActor</code>s must be set <code>reactive</code>.
ca: Recordeu, però, que per rebre esdeveniments els <code>ClutterActor</code> s'han d'establir com a <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!
ca: Tot el codi hauria d'estar llest per funcionar. Només fan falta les imatges per carregar. Per defecte, les imatges es carreguen des del directori <file>berlin_images</file>. Si voleu, podeu canviar-lo a línia <code>#define IMAGE_DIR_PATH</code> que està al principi del fitxer perquè apunti al directori de fotos de l'usuari, o podeu crear un directori <file>berlin_images</file> fent clic a <guiseq><gui>Projecte</gui><gui>Directori nou...</gui></guiseq>. El directori <file>berlin_images</file> serà un subdirectori del directori <file>photo-wall</file>. Comproveu que poseu com a mínim dotze imatges en el directori.

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.
ca: Un cop ho hàgiu fet, feu clic a <guiseq><gui>Munta</gui><gui>Munta el projecte</gui></guiseq> per tornar-ho a muntar tot, llavors seleccioneu <guiseq><gui>Executa</gui><gui>Executa</gui></guiseq> per iniciar l'aplicació.

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!
ca: Si encara no ho heu fet, seleccioneu l'aplicació <file>Debug/src/photo-wall</file> en el diàleg que apareix. Per acabar, premeu <gui>Executa</gui> i ja podreu provar l'aplicació.

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>.
ca: Si teniu algun problema amb el programa d'aprenentatge, compareu el codi amb el <link href="photo-wall/photo-wall.c">codi de referència</link>.

note: (itstool) path: info/desc
en: Create a small database application for ordering your music collection
ca: Creació d'una aplicació amb una base de dades per ordenar una col·lecció de música

note: (itstool) path: item/p
en: How to connect to a database using libgda
ca: Connectar-se a una base de dades amb la libgda

note: (itstool) path: item/p
en: How to insert and browse records in a database table
ca: Inserir i navegar registres a una taula d'una base de dades

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.
ca: Aquesta demostració utilitza el llenguatge JavaScript. Es mostrarà com connectar-se i utilitzar una base de dades des d'un programa escrit amb la GTK+ a través de la biblioteca GDA (Accés a dades del GNOME). Haureu d'instal·lar-la per poder seguir aquesta demostració.

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>.
ca: El propòsit de la biblioteca GDA (Accés a dades del GNOME) és proporcionar un accés universal a diferents estils i tipus de fonts de dades. Això compren des dels sistemes tradicionals de bases de dades relacions fins a qualsevol tipus de font de dades imaginable com ara un servidor de correu, un directori d'LDAP, etc. Per més informació i la documentació completa de l'API, aneu al <link href="http://library.gnome.org/devel/libgda/stable/">lloc web de la 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.
ca: Tot i que una gran part del codi està dedicat a la interfície d'usuari (GUI), el programa d'aprenentatge està centrat en les parts relacionades amb la base de dades (es farà menció d'altres parts si es consideren rellevants). Per veure més programes escrits en JavaScript pel GNOME, vegeu el programa d'aprenentatge del <link xref="image-viewer.js">programa de visualització d'imatges</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.
ca: Trieu <gui>JavaScript genèric</gui> a la pestanya <gui>JS</gui>, feu clic a <gui>Continua</gui> i empleneu les dades de les pàgines següents de l'auxiliar. Utilitzeu <file>record-collection</file> com a nom de projecte i de directori.

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.
ca: Feu clic a <gui>Aplica</gui> i es crearà el projecte. Obriu el fitxer <file>src/main.js</file> des de la pestanya de <gui>Projecte</gui> o de <gui>Fitxer</gui>. El fitxer ja conté un exemple de codi molt bàsic.

note: (itstool) path: section/title
en: Program Structure
ca: Estructura del programa

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.
ca: Aquesta demostració és una aplicació de GTK+ senzilla (amb una sola finestra) que permet inserir registres a una taula d'una base de dades, així com navegar pels registres d'aquesta. La taula conté dos camps: <code>id</code>, per desar nombres enters i <code>name</code> per desar text de llargada variable. La primera secció (al principi) de l'aplicació permet inserir registres a la taula. La secció de baix (al final) permet veure tots els registres de la taula. S'actualitza el contingut de la taula cada vegada que s'afegeix un registre nou i també quan s'inicia l'aplicació.

note: (itstool) path: section/title
en: Starting the fun
ca: Ara comença lo bo

note: (itstool) path: section/p
en: Let's start by examining the skeleton of the program:
ca: Primera ullada a l'esquelet del programa:

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.
ca: Línies 1 a 4: importacions inicials. Mireu-vos bé la línia 3 que li diu al JavaScript que importi la biblioteca GDA, la biblioteca central d'aquest programa d'aprenentatge.

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.
ca: Línies 6 a 17: defineixen la classe <code>Demo</code>. Mireu-vos bé les línies 13 a 15, on es criden als 3 mètodes que faran tota la feina i que es descriuran tot seguit.

note: (itstool) path: item/p
en: Lines 19‒23: Start the application.
ca: Línies 19 a 23: inicien l'aplicació.

note: (itstool) path: section/title
en: Designing the application
ca: Disseny de l'aplicació

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.
ca: Doneu una ullada al mètode <code>setupWindow</code>. És el responsable de crear la interfície d'usuari (UI). Com que la interfície no és l'eix principal del programa d'aprenentatge només es comenta per sobre.

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.
ca: Línies 22 i 27: creen dues entrades (per als dos camps) on els usuaris de l'aplicació escriuran alguna cosa per inserir-la a la base de dades.

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.
ca: Línies 31 a 34: creen el botó d'inserció. Es connecta el seu senyal <code>clicked</code> al mètode de classe privat <code>_insertClicked</code>. Aquest mètode es descriu més endavant.

note: (itstool) path: item/p
en: Line 39: Create the widget (<code>TextView</code>) where we will show the contents of the table.
ca: Línia 30: crea el giny (<code>TextView</code>) on es mostrarà el contingut de la taula.

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.
ca: Línia 44: crea l'etiqueta on es mostrarà el nombre de registres de la taula. Inicialment serà buit, s'actualitzarà més endavant.

note: (itstool) path: section/title
en: Connecting to and initializing the database
ca: Connexió i inicialització de la base de dades

note: (itstool) path: section/p
en: The code which makes the connection to the database is in the <code>setupDatabase</code> method below:
ca: El codi per connectar a la base de dades és en el mètode <code>setupDatabase</code> que segueix:

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:
ca: Línies 2 i 3: creen l'objecte <code>Connection</code> de la GDA. S'han de proporcionar unes quantes propietats en el seu constructor:

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).
ca: <code>provider</code>: un dels proveïdors amb els que la GDA permet treballar. Són: SQLite, MySQL, PostgreSQL, Oracle i molts d'altres. Per aquesta demostració utilitzarem la base de dades SQLite ja que ve per defecte en la majoria de distribucions i és senzilla de treballar-hi (només fa servir un fitxer com a base de dades).

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).
ca: <code>cnc_string</code>: la cadena de connexió. Pot canviar segons el proveïdor. La sintaxi per a l'SQLite és: <code>DB_DIR=<var>CAMÍ</var>;DB_NAME=<var>NOM_DE_FITXER</var></code>. En aquesta demostració farem servir una base de dades anomenada gnome_demo a la carpeta de l'usuari (adoneu-vos de la crida a la funció <code>get_home_dir</code> de la 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>.
ca: Si la GDA no sap treballar amb el proveïdor o si a la cadena de connexió li manca algun element, la línia 2 generarà una excepció, de manera que en codi real hauríem de gestionar-ho amb la sentència de 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.
ca: Línia 4: obre la connexió. Si no existeix la base dades el proveïdor de SQLite la crearà en aquest moment.

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).
ca: Línies 6 a 10: es realitza un «SELECT» simple per comprovar si existeix la taula (línia 7). Si no existeix (perquè s'acaba de crear la base de dades), aquesta línia generarà una excepció que es gestionarà en el bloc de codi <code>try</code>...<code>catch</code>. Si és el cas, s'executa la sentència per crear la taula (línia 9).

note: (itstool) path: section/p
en: At this point we have the database set up, and are ready to use it.
ca: En aquest punt d'execució la base de dades ja està configurada i a punt per utilitzar-se.

note: (itstool) path: section/title
en: Selecting
ca: Selecció

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:
ca: Després de connectar-se a la base de dades, el constructor de la demostració crida el mètode <code>selectData</code>. Aquest mètode és el responsable d'obtenir els registres de la taula i mostrar-los en el giny <code>TextView</code>. Ara es comentarà amb més detall:

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.
ca: Línia 3: crea l'objecte <code>Iter</code> que s'utilitza per iterar sobre els registres 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.
ca: Línia 7: itera sobre tots els registres, els recupera amb l'ajuda de l'objecte <code>Iter</code>. En aquest punt la variable <code>iter</code> conté les dades actuals recuperades de la base de dades. El seu mètode <code>move_next</code> retorna <code>false</code> quan arriba a l'últim registre.

note: (itstool) path: item/p
en: Lines 8‒9: We do two things in each line:
ca: Línies 8 i 9: es fan dues coses a cada línia:

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.
ca: S'utilitza el mètode <code>get_value_at</code> d'<code>Iter</code> que només necessita un paràmetre: el número de la columna a recuperar, començant a partir de zero. Com que el <code>SELECT</code> que s'ha fet només retorna dues columnes, els índexs de les columnes són el 0 i l'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>.
ca: El mètode <code>get_value_at</code> retorna el camp en el format <code>GValue</code> de la GLib. Una manera senzilla de convertir aquest format a una cadena és utilitzant la funció global de la GDA <code>value_stringify</code>. Això és el que es fa aquí i després es desa el resultat a les variables <code>id_field</code> i <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.
ca: Línia 11: es concatenen els dos camps per fer una sola línia de text separada per <code>"=&gt;"</code> i desada a 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.
ca: Línia 14: quan s'acaba la iteració, hi ha tots els registres formatats a la variable <code>text</code>. En aquesta línia només s'estableix que el contingut de <code>TextView</code> sigui el d'aquesta variable.

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.
ca: Línia 15: mostra el nombre de registres de la taula amb el mètode <code>get_n_rows</code> de <code>DataModel</code>.

note: (itstool) path: section/title
en: Inserting
ca: Inserció

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.
ca: Fins ara s'ha connectat a la base de dades i s'ha mostrat com seleccionar les files de la taula. Ara només falta fer un <code>INSERT</code> a la taula. Recordeu que abans en el mètode <code>setupWindow</code> s'ha connectat el senyal <code>clicked</code> del botó <gui>Insert</gui> amb el mètode <code>_insertClicked</code>? Ara se'n mostra la implementació.

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.
ca: Línies 2 i 3: comproven que l'usuari hagi emplenat tots els camps. El codi del mètode privat <code>_validateFields</code> és molt senzill i li podeu fer una ullada en el codi font sencer de la demostració.

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.
ca: Línia 5: la forma ràpida de fer un <code>INSERT</code>. Està comentat perquè es vol mostrar com utilitzar l'objecte <code>SqlBuilder</code> per construir una ordre SQL que sigui vàlida per qualsevol base de dades.

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>.
ca: Línia 7: crea l'objecte <code>SqlBuilder</code>. S'ha d'informar del tipus d'ordre que es vol construir. Pot ser un <code>SELECT</code>, un <code>UPDATE</code>, un <code>INSERT</code> o bé un <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>)
ca: Línia 8: estableix el nom de la taula on s'efectuarà l'ordre (generarà un <code>INSERT INTO demo</code>)

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.
ca: Línies 9 i 10: estableix els camps i els valors que formaran part de l'ordre. El primer argument és el nom del camp (tal i com està definit a la taula). El segon argument és el valor que li volem donar.

note: (itstool) path: item/p
en: Line 11: Get the dynamically generated <code>Statement</code> object, which represents a SQL statement.
ca: Línia 11: s'obté l'objecte generat dinàmicament <code>Statement</code> que representa una ordre SQL.

note: (itstool) path: item/p
en: Line 12: Finally, execute the SQL statement (<code>INSERT</code>).
ca: Línia 12: ara ja sí, s'executa l'ordre SQL (un <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.
ca: Línia 14: es netegen els camps id i nom de la pantalla. El codi del mètode privat <code>_clearFields</code> és molt senzill i es pot trobar en el codi font sencer de la demostració.

note: (itstool) path: item/p
en: Line 15: Refresh the view on the screen by doing another <code>SELECT</code>.
ca: Línia 15: actualitza la vista de la pantalla fent un altre <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.
ca: També es poden utilitzar paràmetres mentre construïu l'ordre. Pel fet d'utilitzar objectes <code>SqlBuilder</code> i els seus paràmetres es poden evitar atacs d'injecció d'SQL. Per més informació sobre els paràmetres mireu-vos la <link href="http://library.gnome.org/devel/libgda/stable/">documentació de la GDA</link>.

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!
ca: Ja s'ha vist tot el codi que fa falta, així que ja es pot executar el codi. S'acaba de crear una aplicació per la gestió d'una col·lecció de música!

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>.
ca: Si teniu algun problema amb el programa d'aprenentatge, compareu el codi amb el <link href="record-collection/record-collection.js">codi de referència</link>.
