4D Ajax Framework

Transcription

4D Ajax Framework

4D Ajax Framework : Ma première DataGrid
Par Add KOMONCHAROENSIRI, Manager of Internal Systems, 4D Inc.
Note technique 4D-200905-09-FR
Version 1 - Date 1 mai 2009
Résumé
Cet article est une première introduction à la DataGrid 2.0 du framework 4D Ajax. Si vous êtes développeur
d'une application Web qui affiche une sélection d'enregistrements et que vous vouliez y intégrer de la
technologie Web 2.0, cet article est pour vous. Dans cette note technique, vous apprendrez ce que le
framework 4D Ajax a à offrir de mieux concernant la visualisation des données, à la fois dans le client 4D
Ajax Framework et dans une page HTML personnalisée. La discussion portera sur l'intégration des données
dans une page HTML. Elle couvrira quelques techniques basiques sur la façon d'utiliser les API Javascript
du framework 4D Ajax pour manipuler l'objet DataGrid et contrôler certaines fonctionnalités qui sont en
standard dans l'objet DataGrid.
4D Notes techniques
Copyright © 1985-2009 4D SAS - Tous droits réservés
Tous les efforts ont été faits pour que le contenu de cette note technique présente le maximum de fiabilité possible.
Néanmoins, les différents éléments composant cette note technique, et le cas échéant, le code, sont fournis sans garantie d'aucune sorte.
L'auteur et 4D S.A. déclinent donc toute responsabilité quant à l'utilisation qui pourrait être faite de ces éléments, tant à l'égard de leurs
utilisateurs que des tiers.
Les informations contenues dans ce document peuvent faire l'objet de modifications sans préavis et ne sauraient en aucune manière engager 4D
SA. La fourniture du logiciel décrit dans ce document est régie par un octroi de licence dont les termes sont précisés par ailleurs dans la licence
électronique figurant sur le support du Logiciel et de la Documentation afférente. Le logiciel et sa documentation ne peuvent être utilisés, copiés
ou reproduits sur quelque support que ce soit et de quelque manière que ce soit, que conformément aux termes de cette licence.
Aucune partie de ce document ne peut être reproduite ou recopiée de quelque manière que ce soit, électronique ou mécanique, y compris par
photocopie, enregistrement, archivage ou tout autre procédé de stockage, de traitement et de récupération d'informations, pour d'autres buts que
l'usage personnel de l'acheteur, et ce exclusivement aux conditions contractuelles, sans la permission explicite de 4D SA.
4D, 4D Calc, 4D Draw, 4D Write, 4D Insider, 4ème Dimension ®, 4D Server, 4D Compiler ainsi que les logos 4e Dimension, sont des marques
enregistrées de 4D SA.
Windows,Windows NT,Win 32s et Microsoft sont des marques enregistrées de Microsoft Corporation.
Apple, Macintosh, Power Macintosh, LaserWriter, ImageWriter, QuickTime sont des marques enregistrées ou des noms commerciaux de Apple
Computer,Inc.
Mac2Win Software Copyright © 1990-2002 est un produit de Altura Software,Inc.
4D Write contient des éléments de "MacLink Plus file translation", un produit de DataViz, Inc,55 Corporate drive,Trumbull,CT,USA.
XTND Copyright 1992-2002 © 4D SA. Tous droits réservés.
XTND Technology Copyright 1989-2002 © Claris Corporation.. Tous droits réservés ACROBAT © Copyright 1987-2002, Secret Commercial
Adobe Systems Inc.Tous droits réservés. ACROBAT est une marque enregistrée d'Adobe Systems Inc.
Tous les autres noms de produits ou appellations sont des marques déposées ou des noms commerciaux appartenant à leurs propriétaires
respectifs.
1 / 20
4D Ajax Framework : Ma première DataGrid
Résumé
Cet article est une première introduction à la DataGrid 2.0 du framework 4D Ajax. Si vous êtes développeur
d'une application Web qui affiche une sélection d'enregistrement et que vous vouliez y intégrer de la
technologie Web 2.0, cet article est pour vous. Dans cette note technique, vous apprendrez ce que le
framework 4D Ajax a à offrir de mieux concernant la visualisation des données, à la fois dans le client 4D
Ajax Framework et dans une page HTML personnalisée. La discussion portera sur l'intégration des données
dans une page HTML. Elle couvrira quelques techniques basiques sur la façon d'utiliser les API Javascript
du framework 4D Ajax pour manipuler l'objet DataGrid et contrôler certaines fonctionnalités qui sont en
standard dans l'objet DataGrid.
Introduction
La DataGrid est l'objet le plus communément utilisé pour afficher les données et c'est le choix numéro un
pour la majorité des sites Web Ajax. En comparaison avec les objets 4D, la DataGrid est presque une
ListBox ou une zone 4D View. Dans 4D, les colonnes de listbox peuvent être reliées soit à un champ, soit à
un tableau. Le même comportement peut être trouvé dans la Datagrid. Le champ dans chaque table physique
ou vue sera automatiquement relié à chaque colonne dans la DataGrid. Quand la DataGrid est utilisée avec
une DCS (Developer Created Selections), chaque colonne sera automatiquement reliée à chaque tableau
spécifié pour la DCS.
Dans le framework 4D Ajax, la DataGrid fournit de nombreuses fonctionnalités qui donnent au développeur
beaucoup de contrôles sur le comportement et l'apparence. Avant de commencer à travailler sur la DataGrid
dans votre page HTML, il est important de se familiariser d'abord avec les fonctionnalités basiques de la
DataGrid dans le framework 4D Ajax. La meilleure façon d'appréhender ces fonctionnalités est de les voir à
partir d'un client 4D Ajax Framework.
Le client 4D Ajax Framework
Lors de l'installation initiale du 4D Ajax Framework, toutes les tables apparaitront dans le Client 4D Ajax
framework dans la fenêtre de la DataGrid. Ce type de visualisation peut être modifié au travers du panneau
de configuration.
Dans le Client 4D Ajax Framework, beaucoup de fonctionnalités et de comportements ont été prédéfinis.
Quelques fonctionnalités peuvent être activées ou désactivées par l'Administrateur grâce au panneau de
configuration. Certains peuvent être changés directement par l'utilisateur. La fonctionnalité par défaut de la
DataGrid est :
Barre d'outils
L'option de la barre d'outils se compose de boutons Barre latérale, Ajouter et Supprimer et l'option
Rechercher Basique ou Avancée
2 / 20
L'onglet de recherche ou barre latérale
L'onglet Recherche apparaît automatiquement quand la DataGrid apparaît dans le client 4D Ajax
Framework. Le nombre d'onglets dépend du nombre de recherches prédéfinies par le développeur dans le
gestionnaire de recherche ou par un Developer Hook (dans la base de données). Si aucune recherche
prédéfinie n'est définie pour la table, la DataGrid affichera seulement l'onglet "Tous" les enregistrements de
la table.
La barre latérale est une autre représentation de la recherche prédéfinie. Dans le 4D Ajax Framework,
l'utilisateur peut choisir d'afficher la recherche prédéfinie soit sous la forme d'un onglet soit sous forme d'une
barre latérale, à n'importe quel moment dans la session. Cette option pour changer l'apparence peut être
trouvée en haut de la fenêtre de la DataGrid (comme montré dans la copie d'écran précédente). Une fois que
vous avez cliqué, la barre latérale apparaît à gauche de la grille des données, et le titre du bouton devient
"Onglets", comme montré ci-dessous :
3 / 20
La zone de la grille
La zone de la grille consiste en l'en-tête de colonne, le pied, la colonne de contrôle (première colonne dans la
grille), et la zone de détail. L'en-tête de colonne est cliquable en donnant à l'utilisateur la possibilité de trier
la sélection en se basant sur le contenu de la colonne.
Lorsque une ligne est cliquée, l'icone d'édition en ligne apparaît dans la colonne de contrôle :
Pour modifier l'enregistrement dans l'éditeur plein écran, l'utilisateur peut double-cliquer sur une ligne et
l'éditeur d'enregistrement sera affiché en haut de la DataGrid :
4 / 20
Il y a plusieurs paramétrages dans le panneau de configuration qui affectent la façon dont apparaît et se
comporte la DataGrid.
Visibilité des champs
Dans la section "Propriétés" des "Contrôles d'accès", l'administrateur peut changer le mode de visibilité
pour un champ particulier dans la DataGrid à travers la case à cocher sous la colonne "S". Chaque champ qui
a cette option décochée sera exclu de la réponse retournée par le 4D AJax Framework Serveur (base de
données en backend) vers la DataGrid.
Zone de recherche
La case à cocher sous la colonne "R" représente la propriété de recherche. Cette option apparaît en haut de la
Datagrid seulement si un des champs dans la zone "Propriétés" possède la case "R" cochée :
Ajouter une DataGrid dans votre propre page HTML
Ajouter cette même fonctionnalité de Datagrid du Framework 4D Ajax dans votre propre page HTML peut
être fait en quelques lignes de code. En fonction de ce que vous souhaitez faire, la DataGrid peut être
manipulée par programmation au travers de l'API du 4D AJAX Framework et des CSS. Dans cette section,
nous parlerons des conditions basiques requises pour ajouter avec succès une DataGrid dans une page
HTML.
L'HTML basique qui suit indique ce qui doit être fait quand on intégre un objet du framework 4D Ajax dans
une page HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5 / 20
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<meta http-equiv="EXPIRES" content="-1" />
<title>Example 1</title>
<script language="javascript" type="text/javascript" charset="ISO-8859-1" src="/dax/dev/callbacks.js"></script>
<script language="javascript" type="text/javascript" charset="utf-8"
src="/dax/js/localization/resources_en.js"></script>
<script language="javascript" type="text/javascript" charset="ISO-8859-1" src="/dax/js/compile.js"></script>

<link rel="stylesheet" href="/dax/themes/leopard/leopard_gz.css" media="all" type="text/css" />
<!-// -->
</script
</head>
<body>
</body>
</html>
Ce code HTML peut être coupé en 4 parties :
1. Les instructions d'analyse XML
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML
1.0
Transitional//EN"
Ces deux lignes indiquent au navigateur d'analyser les entrées XML avec un certain encodage et valide la
structure XML avec la DTD indiquée.
2. Référence au fichier CSS
<link rel="stylesheet" href="/dax/themes/leopard/leopard_gz.css" media="all" type="text/css" />
De façon à afficher correctement l'objet 4D Ajax Framework tel qu'une DataGrid, un des fichiers CSS
prédéfinis doit être référencé dans la page HTML. Cette CSS sera utilisée pour imposer l'apparence de l'objet
4D Ajax Framework.
3. Référence aux fichiers JavaScript
<script language="javascript" type="text/javascript" charset="ISO-8859-1" src="/dax/dev/callbacks.js">
</script>
<script language="javascript" type="text/javascript" charset="utf-8" src="/dax/js/localization/resources_fr.js">
</script>
<script language="javascript" type="text/javascript" charset="ISO-8859-1" src="/dax/js/compile.js">
</script>
<!-// -->
6 / 20
</script>
Note du traducteur :
Pour utiliser le fichier de ressources en français par exemple, ne pas oublier de modifier le code dans la
méthode Developer Hook DAX_DevHook_Preferences :
C_ENTIER LONG($charSet_l)
`langage à utiliser pour l'interface DAX
DAX_Dev_SetPreference (1;"fr")
`◊DAX_Language_t:="fr"
` doit correspondre à un langage valide dans les fichiers d'erreurs xml
sinon, laissez
<script language=... /... /resources_en.js">
dans la page HTML.
*** fin de la note du traducteur.
Les trois premières lignes sont obligatoires. Elles sont utilisées pour référencer les API Javascript nécessaires
pour le 4D Ajax Framework. La référence à "resources_fr.js" garantit que tous les messages du framework
apparaîtront en français. Vous pouvez choisir d'appeler la ressource rédigée en français, allemand, espagnol
ou japonais simplement en changeant les deux caractères dans le nom du fichier. Voici un exemple :
Anglais
<script ... src="/dax/js/localization/resources_en.js"></script>
Allemand
<script ... src="/dax/js/localization/resources_de.js"></script>
Espagnol
<script ... src="/dax/js/localization/resources_es.js"></script>
Japonais
<script ... src="/dax/js/localization/resources_ja.js"></script>
La place entre “” est réservée pour vous permettre de mettre votre propre code.
4. Emplacement de la DataGrid
C'est la zone dans la balise <Body>. Vous devez simplement traiter cette zone si vous voulez placer la
DataGrid directement dans un endroit précis de la page. Si tel est le cas, vous aurez besoin de créer une
balise <Div> avec un id spécifique ainsi le framework 4D Ajax connaîtra exactement l'endroit où la
DataGrid doit apparaître.
Pour construire une DataGrid, vous devez exécuter du Javascript pour la créer puis du JavaScript pour la
charger dans la page HTML.
7 / 20
Construction de la DataGrid
var myGrid = new dax_dataGrid(
selection,
location,
headerRows,
lockedLeftColumns,
useControlColumn);
selection
nom de la sélection (Table, vues ou DCS)
location
à omettre ou spécifier null si vous souhaitez afficher la DataGrid en fenêtre flottante, ou faites référence à
une notation en noeud ; vous devez indiquer la largeur et la hauteur en pixels.
headerRows (optionnel)
nombre de lignes d'en-tête. La première ligne d'en-tête est automatiquement renseignée par les titres et
permet le redimensionnement de la colonne, le tri, et la sélection. Par défaut : 1 (la ligne de titre compte
comme un en-tête).
lockedLeftColumns (optionnel)
nombre de colonnes verrouillées à gauche.
useControlColumn (optionnel)
montre la colonne de contrôle sur la gauche. True par défaut. Utilisée pour l'édition en ligne.
Affichage de la DataGrid
myGrid.go();
Une fois que la DataGrid est construite, la fonction go() lancera l'objet DataGrid sur le navigateur.
La DataGrid accède directement aux données d'un table spécifique. Ainsi, il est obligatoire que la connexion
web soit authentifiée. Chaque page HTML doit lancer une connexion avant la construction de la DataGrid et
chaque vue d'objet avec données.
La connexion 4D Ajax Framework
dax_login(Username, Password);
Une fois que la connexion a été correctement validée, vous devez procéder à la création de la DataGrid à
l'intérieur de la fonction nommée dax_loginSuccess().
Maintenant que vous avez vu les bases, vous pouvez commencer à ajouter votre DataGrid dans la page
HTML.
8 / 20
1. en utilisant la même page HTML, nous allons ajouter la fonction de connexion durant l'événement de
onload de la fenêtre :
<!DOCTYPE html PUBLIC "-//W3C// ... xhtml1-transitional.dtd">
<html>
<head>
<link .../leopard.css" media="all" type="text/css" />
<script ... src="/dax/js/compile.js"></script>
<script type="text/javascript">
<!-window.onload = dax_login('User1', 'UserPass');
// -->
</script>
</head>
2. Une fois la connexion réussie, construisez et affichez la DataGrid "Contacts". L'exemple suivant montre
comment construire une DataGrid flottante à l'intérieur d'une page HTML. En appelant la fonction nommée
dax_dataGrid sans référence à une balise <Div>, on affichera automatiquement la DataGrid en fenêtre
flottante :
<html>
<head>
<!-window.onload = dax_login('Guest', '');
function dax_loginSuccess(){
myGrid = new dax_dataGrid('Contacts', null, 1, 0, false);
myGrid.go();
}
// -->
</script>
</head>
9 / 20
3. En remplaçant la valeur null dans la fonction dax_dataGrid par une référence DIV, la DataGrid est
intégrée directement dans la page HTML.
<html>
<head>
myGrid = new dax_dataGrid('Contacts', $('mydiv'), null, null, false);
myGrid.go();
}
// -->
</script>
</head>
<body>
<div id="mydiv" style="width: 800px; height: 290px; border: 1px solid #CCCCCC;"></div>
</body>
</html>
Changer l'apparence de la DataGrid
Changer l'apparence de la DataGrid peut se faire à tout moment. Dans cette section nous allons survoler
quelques modifications d'apparence basiques que vous pouvez appliquer aux API JavaScript de la DataGrid
10 / 20
Changer la hauteur de ligne
La hauteur de la ligne de la grille peut être changée en une hauteur spécifique en pixels grâce à une fonction
nommée setRowHeightInPx(). Cette fonction doit être exécutée pour une DataGrid spécifique. Le résultat
de l'exécution affecte toutes les lignes de la DataGrid, les lignes d'en-tête et de pied incluses.
myGrid = new dax_dataGrid('Artist', $('myDiv'), 0, 0, false);
myGrid.go();
myGrid.setRowHeightInPx(50);
}
// -->
</script>
Changer la largeur de colonne
La largeur de la colonne peut être modifiée comme la hauteur de ligne. La modification de la taille d'une
colonne se fait sur une colonne à la fois. La fonction qui fait cela s'appelle setColumnWidth(column,
pixel).
myGrid = new dax_dataGrid('Contacts', $('mydiv'), 0, 0, false);
myGrid.go();
myGrid.setColumnWidth(0, 40);
}
// -->
</script>
Notez que la numérotation des colonnes commencent par 0 pour finir à N-1.
Mise en place du nombre de lignes d'en-têtes et de leur hauteur
Le nombre de lignes d'en-tête doit être prédéfini dans la fonction dax_dataGrid.
Voici un exemple de différents résultats pour différentes valeurs de lignes d'en-têtes :
// Ne pas afficher d'en-tête
11 / 20
// Afficher une ligne d'en-tête
// Afficher deux lignes d'en-tête
Une fois que toutes les lignes d'en-tête ont été construites, vous pouvez appliquer une nouvelle hauteur pour
chacune d'elle avec la fonction nommée setHeaderHeight(header-rowindex, header-unit). En voici la syntaxe :
myGrid.setHeaderHeight(header-row-index, header-unit);
L'exemple suivant montre comment doubler la hauteur de la seconde ligne d'en-tête.
12 / 20
<!-window.onload = dax_login('User1', 'UserPass');
myGrid.go();
myGrid.setHeaderHeight(1, 2);
}
// -->
</script>
Mise en place du nombre de zone de pieds et leur hauteur
Par défaut, la zone de pied n'est pas visible dans la DataGrid. Vous devez l'activer avec la fonction
setFooterRows(). Cette fonction vous permet de spécifier le nombre de zone de pieds qui apparaîtront dans
la DataGrid. Notez que l'exécution de setFooterRows() doit être faite avant l'exécution de la commande
go().
<!-window.onload = dax_login('Guest', ' ');
myGrid.setFooterRows(2);
myGrid.go();
}
// -->
</script>
13 / 20
Dans cet exemple, les deux lignes de pied sont ajoutées à la DataGrid. La hauteur de chaque ligne est la
même que celle des lignes de détail.
Pour changer la hauteur de ligne de pied, la fonction setFooterHeight() doit être exécutée pour une ligne de
pied particulière. Dans la DataGrid, la ligne de pied commence à 0 jusqu'à N-1.
Exemple : mise en place du premier pied de page à 3 :
myGrid.go();
myGrid.setFooterHeight(0, 3);
}
// -->
</script>
Exemple : mise en place du second pied de page à 3 :
myGrid.go();
14 / 20
}
// -->
</script>
Fonctionnalités de contrôle
Lorsque l'on intégre une DataGrid dans une page HTML personnalisée, toutes les fonctionnalités ne sont pas
automatiquement disponibles. Le développeur devra décider si ces fonctionnalités sont utiles et si elles
doivent être autorisées. Les fonctionnalités comme les barres d'outils, recherches prédéfinies, et options
d'édition seront autorisées ou pas par programmation au travers des API JavaScript.
Barre d'outils
La barre d'outils consiste en quatre options :
1. Bouton de création d'enregistrement
2. Bouton de suppression d'enregistrement
3. Option de recherche
4. Bouton DDW (seulement si un bouton est assigné à la sélection)
Les trois premières options peuvent être disponibles grâce à la fonction showToolbar().
La fonction peut être exécutée pour activer toutes ces options par un simple appel. Elle peut aussi être
exécutée pour activer chaque option. Lorsque showToolbar() est exécutée, la barre d'outils apparaîtra en
haut de la DataGrid.
Exemple 1 : affichage du bouton de création.
window.onload = dax_login('Guest', '');
15 / 20
myGrid.go();
myGrid.showToolbar(['createrecord']);
}
</script>
Exemple 2 : Affichage du bouton de création et de suppression.
myGrid.go();
myGrid.showToolbar(['deleterecords']);
}
</script>
Exemple 3 : affichage des options de création, suppression et recherche :
myGrid.go();
myGrid.showToolbar(['deleterecords']);
myGrid.showToolbar(['search']);
}
// -->
</script>
16 / 20
Exemple 4 : affichage des options d'ajout, de suppression et de recherche en une seule ligne de code :
myGrid.go();
myGrid.showToolbar(['createrecord', 'deleterecords', 'search']);
}
</script>
Recherche prédéfinies
La DataGrid offre deux façons d'afficher une recherche prédéfinie dans une zone DataGrid.
En fonction des préférences, le développeur peut choisir d'afficher la recherche prédéfinies d'une (ou des
deux) façon(s).
1. Onglet de recherche
Les onglets apparaîtront au-dessus de la zone DataGrid. Le nombre d'onglets dépend du nombre de valeurs
renvoyées par la recherche spécifiée par l'administrateur. Pour afficher les onglets, la fonction
showQueryTabs() doit être exécutée. Notez que cette commande peut être exécutée avant ou après
l'exécution de la fonction go().
17 / 20
myGrid.go();
myGrid.showToolbar(['createrecord', 'deleterecords', 'search']);
myGrid.showQueryTabs();
}
// -->
</script>
Les onglets de recherche peuvent aussi être cachés en exécutant la fonction hideQueryTabs().
2. Barre latérale
La barre latérale de recherche peut être affichée en appelant la fonction showQuerySidebar(). La barre
latérale apparaîtra automatiquement sur le côté gauche de la DataGrid si on appelle showQuerySidebar()
sans paramètres.
Sinon le développeur peut passer soit ‘left’ soit ‘right’ pour préciser la position de la barre latérale.
Exemple 1 : Affichage de la barre latérale à gauche :
myGrid.go();
myGrid.showQuerySidebar('left');
}
// -->
</script>
Exemple 2 : Affichage de la barre latérale à droite
18 / 20
myGrid.go();
myGrid.showQuerySidebar('right');
}
</script>
Mode Edition
Par défaut, l'édition standard (dans le formulaire de saisie) est opérationnelle. Lorsque l'utilisateur doubleclique sur un enregistrement, l'éditeur apparaît en tant que fenêtre flottante permettant à l'utilisateur de faire
des modifications dans l'enregistrement. L'éditeur est le même que l'éditeur du client 4D Ajax Framework. Il
ne peut pas être personnalisé.
La DataGrid aussi possède une fonctionnalité d'édition en ligne. Cette fonctionnalité est indisponible par
défaut. Le développeur peut l'autoriser en mettant en place le 5ème paramètre de la fonction dax_dataGrid
à true. La valeur true indique au constructeur de la DataGrid d'afficher la colonne de contrôle dans la
DataGrid. Une fois que la colonne de contrôle est active, la fonction allowInlineEditing() doit être exécutée
de façon à afficher l'option d'édition en ligne dans la colonne de contrôle.
myGrid.allowInlineEditing(true)
19 / 20
Pour éditer un enregistrement, l'utilisateur doit cliquer sur l'icône d'édition et la modification de champ sera
disponible. Notez que l'icône d'édition est alors changée en icône de validation.
Conclusion
Cette note technique a abordé les bases de la DataGrid du 4D Ajax Framework et montré ce que vous
pouvez en attendre en intégrant cet objet dans vos propres pages HTML.
Note du traducteur
Base Exemple :
La base exemple est ajoutée à la version française de la note. Il s'agit simplement d'une base "Contacts".
C'est la page html "exemple1.html" qui est chargée automatiquement. Vous pouvez aussi tester d'autres
fonctionnalités de la DataGrid que celles montrées dans cette note, avec les pages "exemple2.html" et
"exemple3.html".
Attention : ne pas oublier d'installer au préalable, dans le dossier "Components", le Framework 4D Ajax.
**** fin de la note du traducteur
20 / 20

4D Ajax Framework

Transcription

Documents pareils

PROFESSIONNEL

PARTENAIRES HEBERGEMENT

Sous Préfecture de Dax

• Habitat Collectif • • Equipement de Loisir •

FINALE CNI Gym masculine Chambéry 11 mai

Annonce Chargé de mission Innovation

Hôtels partenaires autour du lac de Christus, à SAINT PAUL LÉS

Chère(s) Amie(s), Cher(s) Ami(s), Notre pèlerinage à LOURDES

Collecte des déchets Au service des habitants au quotidien

Eco-citoyen