Skip to content
Snippets Groups Projects
Commit 79f2339e authored by Armand Bahi's avatar Armand Bahi
Browse files

Indexation

parent f5776d11
No related branches found
No related tags found
No related merge requests found
Showing with 2167 additions and 2 deletions
# Onglet Evénements
Documentation en cours de rédaction..
Mode développement
==================
Le mode développement permet de créer des objets métiers pour rendre les calques interrogeables
.. toctree::
:maxdepth: 2
objets_metiers
rapports
evenements
# Onglet objets métiers
![](../../images/liste_objets_metier.png)
## 1. Définition
Un objet métier est une entité qui associe à un calque, les attributs
d’une table ou vue de base de données. De la sorte, les attributs
associés au calque sont affichables et éditables, dans le requêteur et
dans le formulaire de création d’objet, accessibles dans le mode Carte.
Un objet métier permet donc de gérer des données vectorielles stockées
en base.
Le mode Développement permet l’ajout, l’édition et la suppression
d’objets métier.
La création d’un objet métier s’opère en deux temps :
- La déclaration de l’objet et des paramètres d’affichage
du requêteur.
- La construction des formulaires d’affichage, de création, d’édition
et de recherche de l’objet métier via le studio.
## 2. Création d’un objet métier
![](../../images/creation_objet_metier.png)
Renseigner les champs suivants :
- **Titre :** nom de l’objet métier tel qu’il apparaîtra dans le requêteur
et dans le formulaire de création d’objet
![](../../images/lampe_requeteur.png)
![création d'objet](../../images/lampe_creation.png)
- **Titre des formulaires :** le titre qui va apparaître dans les formulaires,
vous pouvez y intégrer le résultat d'un des attributs du formulaire en le
mettant entre accolades (ex: Commune n°{{id_com}})
- **Titre des infobulles :** le titre qui va apparaître dans les infobulles,
vous pouvez y intégrer le résultat d'un des attributs de la requête SQL Summary
en le mettant entre accolades (ex: Commune n°{{ID commune}})
- **Champs id :** champ identifiant de la table.
- **Base de données :** nom de la base de données à laquelle se connecter
- **Schéma :** schéma de la base de données
- **Table :** table de la base de données
- **SQL Summary :** requête SQL pour définir les champs à afficher dans
l’infobulle d’un objet, il est possible depuis la version 2018.01
d'intégrer des liens et des images en utilisant les balises HTML `<a>` et `<img>`
![](../../images/infobulle.png)
- **SQL List :** requête SQL pour définir les champs à afficher dans la
liste des objets sélectionnés du requêteur, il est possible depuis la
version 2018.01 d'intégrer des liens et des images en utilisant les balises
HTML `<a>` et `<img>`
![](../../images/liste_requeteur.png)
## 3. Formulaires
### 3.1. Définitions
Pour chaque objet métier, plusieurs formulaires sont utilisables et
paramétrables :
#### 3.1.1. Formulaire de recherche de l’objet métier (search)
Utilisable dans le requêteur et disponible pour les utilisateurs ayant
des **droits en consultation** sur la table liée, il permet de faire des
recherches filtrées sur les enregistrements de l'objet métier.
![](../../images/formulaire_search.png)
#### 3.1.2. Formulaire d’affichage de l’objet métier (display)
Utilisable par les personnes ayant des **droits en consultation** sur la
table liée, il permet d'afficher des informations en consultation pour
l'enregistrement sélectionné.
![](../../images/formulaire_display.png)
#### 3.1.3. Formulaire de mise à jour de l’objet métier (update)
Utilisable par les personnes ayant des **droits de mise à jour** sur la
table liée, il permet de mettre à jour les attributs de l'enregistrement
en édition.
![](../../images/formulaire_update.png)
#### 3.1.4. Formulaire de création de l’objet métier (insert)
Utilisable par les personnes ayant des **droit en insertion** sur la
table liée et accessible par le bouton **"Éditer les attributs"**, il
permet à l'utilisateur de créer un objet et de renseigner ses attributs.
![](../../images/formulaire_insert.png)
### 3.2 Studio
Un studio a été developpé pour gérer graphiquement les différents
formulaires des objets métier.
Le studio est accessible via la section Formulaire après avoir édité un
objet métier.
![](../../images/formulaire_studio.png)
#### 3.2.1. Génération automatique des formulaires
La première chose à faire lorsqu'on veut créer un ensemble de
formulaires est de demander à l'application de les générer en fonction
des colonnes présentes sur la table liée. Si le typage en base de
données est bien fait et que cela est possible, le type de champ affiché
dans le formulaire sera également implémenté (texte, nombre, date
etc...).
Pour cela, il suffit de cliquer sur **confirmer** lors de l'affichage du
message suivant :
![](../../images/formulaire_message_creation.png)
On peut également cliquer dans le **formulaire par défaut** sur
**Régénérer le formulaire par défaut**.
![](../../images/formulaire_reset_default_button.png)
La fenêtre suivante apparaît et l'utilisateur peut :
- Sélectionner les arguments à afficher
- Changer pour chaque champ, le nom qui sera affiché dans le
formulaire
![](../../images/formulaire_selection_colonnes.png)
#### 3.2.2. Utilisation du studio
Le studio est divisé en quatre principales zones de gestion des
formulaires :
![](../../studio_4_zones.png)
##### 3.2.2.1. La zone d'administration du fichier
Il s'agit d'une des zones fondamentales car elle permet la sauvegarde et
l'affichage des fichiers.
Il existe trois types de formulaires :
- le **formulaire par défaut**, formulaire généré automatiquement. Le
développeur peut choisir de conserver en l'état ce formulaire ou de
le personnaliser.
- le **formulaire publié**, formulaire en cours d'utilisation dans
l'application
- le **formulaire personnalisé**, formulaire en cours d'édition.
![](../../images/formulaire_zone_fichier.png)
Pour modifier un formulaire, l'administrateur clique sur le bouton
**Perso** puis sélectionne le type de formulaire sur lequel il veut
travailler (display, search, update, insert). Il édite ce dernier et
**publie le formulaire personnalisé** car sans cela les modifications ne
seraient pas visibles par les utilisateurs finaux.
Le menu déroulant **Fichier** permet de gérer les versions des
formulaires (publier le formulaire personnalisé, régénérer le formulaire
par défaut etc..)
Le menu déroulant **Édition> Gestion des onglets** permet d'agencer
le formulaire en répartissant les attributs sur plusieurs onglets.
##### 3.2.2.2. La zone de prévisualisation
La zone de prévisualisation permet à l'administrateur de visualiser en
direct le formulaire en cours.
![](../../images/formulaire_zone_previsualisation.png)
Le menu déroulant **Prévisualisation** permet l'affichage et la
modification de la définition du formulaire au format JSON ainsi que
l'ajout de JavaScript au formulaire.
> **note**
>
> Les onglets ne sont volontairement pas affichés dans cette zone. Ils
> sont affichés lors de l'utilisation réelle du formulaire.
##### 3.2.2.3. La zone de gestion de mise en page
Dans cette zone, l'administrateur peut modifier l'ordre d'affichage des
attributs, et via la case "Voir / modifier les lignes", il peut
regrouper plusieurs éléments sur une même ligne.
![](../../images/formulaire_zone_attributs.png)
Le bouton **Sources de données** en bas de zone, permet la configuration
des attributs de type liste. En savoir plus sur le [Gestionnaire de
source de données](cas_utilisation_studio.html)
##### 3.2.2.4. La zone de définition de l'attribut sélectionné
Dans cette zone, l'administrateur pourra gérer le type de saisie qui
sera faite, le libellé à afficher sur le formulaire, le nom de la
colonne auquel il est lié et bien d'autres paramètres en fonction du
type d'attribut.
![](../../images/formulaire_zone_definition.png)
#### 3.2.3. Utilisation du studio
Pour comprendre comment utiliser le studio consulter le
document [Cas concrets d'utilisation du studio dans
vMap](cas_utilisation_studio.md)
# Onglet rapports
![](../../images/liste_rapports_objets_metier.png)
## 1. Définition
Un rapport sur un objet métier permet de générer des fichiers au format
.pdf ou .doc sur les informations relative à un un objet sélectionné
dans le panier.
Deux types de rapports sont à distinguer :
- Les rapports sur un élément ![logo rapport
simple](../../images/logo_rapport_simple.png)
- Les rapports sur plusieurs éléments ![logo rapport
multi](../../images/logo_rapport_multi.png)
Si un utilisateur sélectionne plusieurs entités et lance un rapport sur
un élément, alors plusieurs fichiers sont générés. Inversément, si il
lance un rapport sur plusieurs éléments, un seul fichier contenant les
informations de chacun des éléments est généré.
![](../../images/exemple_rapport_pdf.png)
## 2. Utilisation
Pour générer un rapport sur objet métier, sélectionner un objet sur la
carte en cliquant dessus, l'ajouter au panier, puis sélectionner les
objets dans le panier et enfin à l'aide du bouton "Rapports", générer le
rapport voulu.
![](../../images/creation_rapport_vmap.png)
## 3. Administration
L'onglet Rapports du menu Développement permet la création, l'édition et
la suppression de rapports.
Dans l'interface d'administration renseigner les éléments suivants :
- Nom : nom affiché dans l'interface
- Format d'impression : A4/A3
- Orientation : portrait/paysage
- Format de sortie : pdf/doc
- Objet métier : objet métier sur lequel le rapport doit être associé
- Rapport sur plusieurs éléments : pour générer un ou plusieurs
documents lors de sélections multiples
- Définition HTML : permet de configurer la mise en page
- Objets JSON : permet une configuration plus avancée
![](../../images/administration_rapports.png)
### 3.1. Configuration de la définition HTML
Le bloc de défintion HTML permet de configurer la mise en page du
rapport. Il est recommandé de procéder en trois parties :
- le style : balise style qui contiend la définition CSS à utiliser.
- le corps : balises HTML de mise en page.
- le script : balise script qui lance du JavaScript lors de la
génération (gestion des sauts de page, par exemple).
#### 3.1.1. Utilisation des variables
Dans le corps, la librairie AngularJS est accessible, c'est à dire que
l'on peut utiliser la syntaxe suivante pour afficher le contenu d'une
variable :
``` html
<label class="fichelabel">Nom: {{BO.nom}}</label>
```
Dans l'exemple ci-dessus, la variable BO est présente par défaut et
contient les attributs de l'objet résultant (notez que pour un rapport à
plusieurs éléments, elle se compose d'un tableau contenant les divers
objets retournés).
Avec la librairie AngularJS, on peut facilement effectuer des boucles,
des conditions, des changements de style etc..
Ci-après, un exemple permettant de faire une boucle et lister les lampes
d'une route :
``` html
<!--Description des lampes de la route-->
<div ng-repeat="oLampe in aLampes" ng-if="oLampe.lampe_id!=undefined" class="description_box border_container">
<label class="fiche_label">Lampe: {{oLampe.nom}}</label>
<label class="fiche_label">Id: {{oLampe.lampe_id}}</label>
<label class="fiche_label">Puissance: {{oLampe.puissance}}</label>
<label class="fiche_label">Allumée: {{oLampe.allume ? 'Oui' : 'Non'}}</label>
</div>
```
#### 3.1.2. Affichage de la carte dans un rapport
Si on veut afficher une ou plusieurs cartes dans un rapport, créer dans
une première partie, une balise image avec l'"id" de son choix (il est
conseillé d'utiliser un fond transparent au cas où les tuiles ne se
chargent pas lors de l'impression) :
``` html
<img id="map_image" src="images/transparent.png">
```
La seconde partie de la manipulation consiste à paramétrer un objet JSON
pour indiquer à vMap la carte à utiliser et la façon dont l'utiliser. Se
référer à la partie [3.2.1. Configuration des cartes à utiliser dans le
template
HTML](#3.2.1-configuration-des-cartes-a-utiliser-dans-le-template-html)
### 3.2. Configuration des objets JSON
Pour bien configurer un rapport, il est utile de configurer la partie
Objets JSON. Le but est de pouvoir ajouter des cartes au rapport,
interroger des webservices ou afficher des images. Pour cela, créer en
JSON, un tableau contenant les différentes configurations. Chacune
d'elle est typée avec l'argument "type".
Exemple:
``` json
[{
"type":"map",
"target":"#map_image",
"map_id":120,
"resolution_coeff":1,
"scale_target":"map_scale"
}, {
"type":"webservice",
"ressource":"vitis/genericquerys",
"params":{
"schema":"sig",
"table":"lampe",
"filter":"{\"column\":\"route_id\", \"compare_operator\":\"=\", \"value\": \"{{BO.route_id}}\"}"
},
"target": "aLampes"
}, {
"type":"object",
"content":{
"company":"Veremes"
},
"target": "scope"
}]
```
#### 3.2.1 Configuration des cartes à utiliser dans le template HTML
On peut inclure des cartes dans les formulaires en utilisant des objets
de type "map" avec les paramètres suivants :
- target : cible sur laquelle doit se poser la carte ("\#" +
l'identifiant de votre balise image)
- map_id : identifiant de la carte à utiliser
- resolution_coeff : coefficient de résolution
- scale_target : nom de la variable qui contiend l'échelle de la
carte dans le template HTML
Exemple:
``` json
{
"type":"map",
"target":"#map_image",
"map_id":120,
"resolution_coeff":1,
"scale_target":"map_scale"
}
```
Ici on vient afficher le(s) objets métier sur la carte 120 dans la
balise image "\#map_image" tout en mettant son échelle dans la variable
"map_scale".
#### 3.2.2. Configuration des webservices
On peut demander à effectuer des requêtes vers des webservices vMap
(PHP) pour afficher le résultat dans la vue HTML au travers de variables
nommées. Il faut, pour cela, utiliser le type "webservice" et utiliser
les paramètres suivants :
- ressource : ressource à interroger
- params : paramètres à utiliser lors de l'interrogation
- target : nom de la variable créée qui contiend les informations
retournées
**Important**: tout comme dans la Définition HTML, on peut utiliser des
doubles accolades pour utiliser une variable BO.
Exemple:
``` json
{
"type":"webservice",
"ressource":"vitis/genericquerys",
"params":{
"schema":"sig",
"table":"lampe",
"filter":"{\"column\":\"route_id\", \"compare_operator\":\"=\", \"value\": \"{{BO.route_id}}\"}"
},
"target": "aLampes"
}
```
Dans cet exemple, une requête au webservice vitis/genericquerys permet
d'interroger de façon générique des tables. Avec cet appel et en
utilisant les doubles accolades {{BO.route_id}}, l'ensemble des lampes
contenues dans la route sont affichées.
#### 3.2.2. Configuration des images
On peut afficher des images pré-définies en utilisant le type image et
les paramètres suivants :
- imageUrl : URL de l'image (peut être une définition base-64)
- target : cible sur laquelle doit se poser l'image ("\#" +
l'identifiant de votre balise image)
Exemple :
``` json
{
"type":"image",
"imageUrl":"data:image/png;base64,iVBORw0KGgoAAAANSUh...",
"target":"#img1"
}
```
## 4. Exemple complet
Ci-dessous un exemple complet actuellement visible sur
[https://demo.veremes.net/vmap/?map_id=29](https://demo.veremes.net/vmap/?map_id=29).
Dans cet exemple, un projet d'éclairage public contient deux entités :
- les routes
- les lampes
Chaque lampe est associée à une route
### 4.1 Définition HTML
``` html
<!--Style-->
<style>
.A4_landscape_page {
width: 29.7cm;
height: 21cm;
padding: 40px;
}
#map_legend{
margin-left: 25px;
text-align: left;
}
#map_image {
background-color: #DFDFDF;
width: 100%;
height: 100%;
}
#map_image2 {
background-color: #DFDFDF;
width: 100%;
height: 100%;
}
#map_overview {
background-color: #DFDFDF;
height: 4cm;
width: 4cm;
}
.border_container{
border: 1px solid black;
}
.description_box{
text-align: left;
padding: 5px;
margin-bottom: 10px;
}
.fiche_urb_label {
font-size: 10px;
width: 100%;
margin-bottom: 0px;
}
#img1{
height: 1cm;
margin-top: 10px;
margin-bottom: -10px;
}
.main_infos_column{
height:100%;
width:100%;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.infos_column {
height: 100%;
border: 1px solid black;
}
</style>
<!-- A4 print Template -->
<div id="A4_landscape_template" class="A4_landscape_page" style="text-align: center">
<div class="row" style="padding-left: 10px;">
<div class="col-xs-4">
<div class="border_container main_infos_column infos_column">
<img id="img1" src="images/transparent.png">
<hr>
<h4>Fiche Route</h4>
<hr>
<!--Description de la route-->
<div class="description_box border_container">
<label class="fiche_urb_label">Nom: {{BO.nom}}</label>
<label class="fiche_urb_label">Id: {{BO.route_id}}</label>
<label class="fiche_urb_label">Auteur: {{BO.auteur}}</label>
<label class="fiche_urb_label">Date d'édition: {{BO.date_maj}}</label>
<label class="fiche_urb_label">Echelle: {{map_scale}}</label>
</div>
<br>
<!--Description des lampes de la route-->
<div ng-repeat="oLampe in aLampes" ng-if="oLampe.lampe_id!=undefined" class="description_box child_description_box border_container">
<label class="fiche_urb_label">Lampe: {{oLampe.nom}}</label>
<label class="fiche_urb_label">Id: {{oLampe.lampe_id}}</label>
<label class="fiche_urb_label">Puissance: {{oLampe.puissance}}</label>
<label class="fiche_urb_label">Allumée: {{oLampe.allume ? 'Oui' : 'Non'}}</label>
</div>
</div>
</div>
<div class="col-xs-8" style="height: 710px">
<div style="height: 100%; border: 1px solid black;">
<img id="map_image" src="images/transparent.png">
</div>
</div>
</div>
</div>
<script>
setTimeout(function () {
var aElems = $('.child_description_box');
var aPages = [$('#A4_landscape_template')];
var currentPage = 0;
var aBottom = [];
var iTotalHeight = 0;
var createPage = function() {
// Page
var newPage = document.createElement("div");
$(newPage).addClass('A4_landscape_page');
// Zone d'informations
var newInfosColumn = document.createElement("div");
$(newInfosColumn).addClass('infos_column');
$(newInfosColumn).css({
"padding": "15px"
});
// Ajout des éléments
$(newPage).append(newInfosColumn);
$('#A4_landscape_template').parent().append(newPage);
// Sauvegarde de la page
aPages.push($(newPage));
currentPage++;
// Mise à jour de iTotalHeight
iTotalHeight = getPagesHeight();
return newPage;
}
var getBottomPositions = function(aElems) {
var aBottoms = [];
for (var i = 0; i < aElems.length; i++) {
var iTop = $(aElems[i]).position().top;
var iHeight = $(aElems[i]).height();
var iBottom = iTop + iHeight;
aBottoms.push(iBottom);
}
return aBottoms;
}
var getPagesHeight = function() {
var aPagesBotomPositions = getBottomPositions(aPages);
return aPagesBotomPositions[aPagesBotomPositions.length -1];
}
var moveElements = function(aElemsToMove, iPage) {
for (var i = 0; i < aElemsToMove.length; i++) {
$(aElemsToMove[i]).appendTo($(aPages[iPage]).find('.infos_column'));
}
}
var pagineChilds = function(){
aBottom = getBottomPositions(aElems);
iTotalHeight = getPagesHeight();
for (var i = 0; i < aElems.length; i++) {
// Quand un élément est plus bas que la dernière page
if (aBottom[i] > iTotalHeight - 20) {
// Crée une nouvelle page
var newPage = createPage();
// Déplace les éléments qui suivent sur la nouvelle page
var aElemsToMove = [];
for (var ii = i; ii < aElems.length; ii++) {
aElemsToMove.push(aElems[ii]);
}
moveElements(aElemsToMove, aPages.length - 1);
// Relance la fonction
pagineChilds();
return 0;
}
}
}
pagineChilds();
});
</script>
```
### 4.2. Objets JSON
``` json
[{
"type":"map",
"target":"#map_image",
"map_id":120,
"resolution_coeff":1,
"scale_target":"map_scale"
}, {
"type":"webservice",
"ressource":"vitis/genericquerys",
"params":{
"schema":"sig",
"table":"lampe",
"filter":"{\"column\":\"route_id\", \"compare_operator\":\"=\", \"value\": \"{{BO.route_id}}\"}"
},
"target": "aLampes"
}, {
"type":"image",
"imageUrl":"data:image/png;base64,iVBORw0KGgoAAAANSUhE...",
"target":"#img1"
}, {
"type":"object",
"content":{
"company":"Veremes"
},
"target": "scope"
}]
```
This diff is collapsed.
Guide du développeur
====================
.. toctree::
:maxdepth: 2
utilisation_studio
web_services
exemples_objets_metier
# Utilisation du studio
Documentation en cours de rédaction..
This diff is collapsed.
# Mode impressions
Documentation en cours de rédaction..
......@@ -7,5 +7,8 @@ Administration de vMap
calques_cartes
mapserver/index.rst
impressions
developpement/index.rst
configuration
module_cadastre
guide_developpeur/index.rst
# Flux publics
# Flux public
Documentation en cours de rédaction..
......@@ -10,5 +10,5 @@ Le mode MapServer permet la publication de flux WMS avec MapServer.
couches
connexion
flux_prives
flux_publics
flux_prives
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment