Plusieurs composants utiles sont disponibles pour personnaliser la représentation des contenus de l'application : ces composants sont utilisés dans les vues.
A faire : tous les exemples fournis dans ce document doivent être commentés.
Les données cartographiques ou géolocalisées d'une collection peuvent être affichées sur une carte à l'aide de la bibliothèque Javascript leaflet.js. Cette bibliothèque dont le code est ouvert est disponible à l'adresse https://leafletjs.com/ et peut utiliser les tuiles du projet OpenStreetMap comme fond cartographique. Ses fichiers se trouvent dans le dossier /assets/js/vendor/leaflet/.
La biblothèque leaflet.js peut être utilisée soit à travers une bibliothèque externe pour CodeIgniter (comme celle fournie à titre d'exemple dans libraries/ qui fait office de wrapper), soit directement à l'aide de code PHP+Javascript intégré aux fichiers contrôleur et vues de l'application.
La vue par défaut des contenus (/application/views/data/view.php) contient un exemple élaboré de ce type d'intégration : la carte des données géolocailsées de la collection, centrée sur le contenu affiché, est chargée grâce à un appel AJAX de la méthode localize() du contrôleur /application/controllers/Data.php. Cette fonction charge la vue /application/views/data/localize.php et affiche sa sortie au début la balise #body-data de la page grâce à la fonction jQuery prepend().
L'appel AJAX est déclenché automatiquement au chargement de la page lorsque le datatype du contenu est un lieu (Place) ou manuellement, en cliquant sur le bouton #localizeBtn, dans les deux cas par l'ajout de code Javascript à l'en-tête de la page (variable spéciale $additionalDocumentReadyJS).
En outre, un formulaire unique d'ajout/édition des propriétés cartographiques (Latitude, Longitude et Zoom) est proposé à l'utilisateur : celui-ci est généré par la méthode edit_geo_properties() du contrôleur /application/controllers/Data.php à l'aide de la vue /application/views/data/edit_geo_properties.php.
Un exemple plus simple est fourni dans la vue inutilisée /application/views/data/Minimap.php : celle-ci affiche les marqueurs des données géolocalisées de la collection d'un contenu sur une mini-carte à côté de l'icône du contenu. La carte est générée grâce à la vue /application/views/data/small_map.php.
Veuillez noter qu'une carte générée avec Leaflet peut poser des problèmes d'affichage lorsqu'elle se trouve dans un modal.
Les graphes utilisées dans l'application sont générées à l'aide de la bibliothèque de visualisation de données Open source vis.js Cette bibliothèque utilise le canevas HTML 5.
Elle est disponible sous licence MIT et Apache 2.0 à l'adresse http://visjs.org/
Pour inclure un graphe, vous devez commencer par charger les fichiers de vis dans l'en-tête :
$view_data['jsfiles']=array('vis.js');
$view_data['cssfiles']=array('vis.css');
$this->load->view('Head',$view_data);
Une fois cette opération effectuée, il reste à construire le graphe.
Il faut lui transmettre en paramètres un JSON spécialement formaté qui liste les contenus (nodes) et les relations (edges) à afficher.
Un tel JSON peut être obtenu pour une collection en faisant appel à la méthode view_as_json() du contrôleur /applications/controllers/Collections.php :
Dans le contrôleur lui-même (la méthode afifche directement le JSON en sortie) :
//Retrieve JSON of collection and assign it to $json for use in view:
ob_start();
$this->view_as_json($product->id_collection,0);
$this->view_data['json']=ob_get_contents();
ob_end_clean();
Dans une vue :
//Eviter les erreurs de certificat avec https
$arrContextOptions=array(
"ssl"=>array(
"verify_peer"=>false,
"verify_peer_name"=>false,
),
);
//Obtenir le JSON
$json=file_get_contents(base_url('collections/view_as_json/'.$id_collection.'/0/relations/'.$id_type_relation),false,stream_context_create($arrContextOptions));
//Eviter les erreurs dues à la présence de code HTML :
$json=strip_tags($json)
Les paramètres transmis pour construire le JSON d'une collection sont :
—l'identifiant de la collection (entier) ($id_collection)
—optionnel ; type de graphe (entier) : des relations (0) / de la hiérarchie (1)
—optionnel : objet à mettre en évidence (chaîne) (data|relations)
—optionnel : identifiant du datatype à mettre en évidence (entier) ($id_type_data)
Pour terminer, la construction d'un graphe minimal se fait dans la vue (après la balise <body>) à l'aide du code minimal suivant :
<!-- conteneur div du graphe -->
<div id="myNetwork" style="width:100%;height:475px;z-index:9999;"></div>
<script>
// Fonction à appeler quand l'API Vis.js est chargée :
function draw() {
var nodes = null;
var edges = null;
var DIR = '<?=base_url();?>assets/uploads/<?=ENVIRONMENT;?>/icons/'; //Dossier des icônes à utiliser (en option)
//Inclusion du JSON de la collection
<?=$json;?>
// Création et peuplement du graphe
var container = document.getElementById('myNetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
//Ajouter les options pour l'affichage du graphe ici...
}
myNetwork = new vis.Network(container, data, options);
}
//Affichage du graphe
draw();
</script>
La construction d'une graphe des relations est similaire à celle d'une graphe de la hiérarchie, avec une valeur de 0 pour le deuxième paramètre de la méthode view_as_json(). Pour un exemple complet, consultez le code de la vue /application/views/relations/view.php qui inclut une graphe mettant en évidence la relation affichée et ses termes.
La construction d'une graphe de la hiérarchie est similaire à celle d'une graphe des relations, avec une valeur de 1 pour le deuxième paramètre de la méthode view_as_json(). Consultez par exemple le code de la vue /application/views/collections/chora-documentation.php qui inclut une graphe de la hiérarchie des contenus de la collection contenant la présente documentation.
La liste des fichiers attachés est préparée dans les contrôleurs des collections, contenus, relations et événements.
Pour un exemple générique l'utilisant, référez-vous à la vue /application/views/data/view.php.
Pour un exemple complet (qui génère la liste dans la vue et formate celle-ci avec un affichage personnalisé (sous forme de vignettes), voyez /application/views/data/Product.php.
Note : il est recommandé d'afficher la liste des contenus cible des relations, plutôt que les relations elles-mêmes (celles-ci peuvent en effet ne pas avoir de libellé, de description ou de datatype définis, ces informations étant optionnelles).
Pour un exemple d'affichage de la liste des contenus en relation, veuillez vous référer à la vue /application/views/data/view.php
Dans l'exemple suivant, la liste des contenus enfants est générée en utilisant la vue /application/views/data/list_child_data_textonly.php :
<?php
$this->view_data['child']=$child=$this->DataModel->get_child($id_data);
$this->view_data['nb_children']=$nb_children=$this->DataModel->count_child($id_data);
if (isset($child) && $child!='' && $nb_children>=1) {
echo '<div class="clear">';
echo '<h2 id="children">'.$this->lang->line('lib_read_next');
echo ' <small><span class="badge badge-pill badge-info" title="Number
of child data"> '.$nb_children.' </span></small>';
echo '</h2>';
echo '<div class="container">';
$this->load->view('data/list_child_data_textonly.php',$this->view_data);
echo '<p><br/></p>';
echo '</div>';
echo '</div>';
}
?>
La liste des commentaires d'utilisateurs est générée dans les contrôleurs des collections, contenus, relations et événements.
Chaque commentaire d'utilisateur est attaché à un objet (une collection, un contenu, une relation ou un événement), identifié par un identifiant de type d'objet (10=collection, 11=data, 12=relation, 13=événement) et un identifiant d'objet (id_collection de la collection / id_data du contenu / id_relation de la relation / id_event de l'événement).
Ce système permet d'afficher tous les commentaires enregistrés dans une collection, ou seulement ceux d'un contenu/d'une relation.
La bibliothèque interne /application/libraries/Hierarchy.php est utilisée déterminer quelle est la position du commentaire dans les fils de discussion (commentaires de premier niveau, réponses à un commentaire...)
Par défaut, les commentaires de premier niveau (qui peuvent correspondre à un nouveau fil de discussion) possèdent un titre. Les réponses à des commentaires n'en ont pas.
Enfin, la liste des commentaires est accompagnée d'un formulaire d'ajout de commentaire qui tient compte de l'authentification (le droit d'ajout de commentaire / add_comment est requis). Ce formulaire utilise AJAX lorsque cela est possible.
Pour pouvoir ajouter un commentaire, l'utilisateur devra renseigner un CAPTCHA. Ce CAPTCHA est construit à partir d'une liste de questions/réponses éditables définie dans un tableau distinct pour chaque langue disponible dans l'application.
Les listes de questions-réponses se trouvent dans le fichier de configuration /application/config/captchas.php.
Pour voir un exemple complet de l'inclusion d'une liste des commentaires d'utilisateurs, vous pouvez consulter le code de la vue /application/views/data/view.php.
Un mini-chat écrit en Javascript est fourni avec les profils publics d'utilisateurs.
Pour inclure celui-ci dans une vue, il suffit de charger les fichiers Javascript, Css et de démarrer la session utilisateur comme suit (avant le chargement de la vue de l'en-tête) :
@session_start();
if( !isset( $_SESSION['chatusername'] ) || !isset( $_SESSION['username'] ) ){
$_SESSION['chatusername'] = $this->session->userdata('login');
$_SESSION['username'] = $this->session->userdata('id_user');
}
$this->view_data['css_files']=array (
base_url().'assets/css/chat/screen.css',
base_url().'assets/css/chat/chat.css'
);
$this->view_data['js_files']=array (
base_url().'assets/js/chat/chat.js',
);
$this->load->view('Head',$this->view_data);
Notez que la dernière ligne n'est présente que pour référence et se trouve probablement déjà dans le code de la vue que vous éditerez.
<a href="#" class="btn btn-info" onclick="javascript:chatWith('<id_user>','<usr_login>');">Chat</a>
La vue /application/views/data/view.php fait appel à un javascript qui génère un sommaire à partir des titres présents dans la description du contenu affiché.
Pour ce faire, la fonction toc.js(), présente dans le fichier /assets/js/vendor/aurorae/toc.js qui a été chargé dans l'en-tête, est appelée ainsi :
//Build toc of content only if there is at least a h2 element
if ($('#data').children('h2').html()!=undefined) {
toc('toc',2,2,6,'<?=$this->lang->line('lib_table_of_contents');?>','data');
} else {
$('#toc').hide();
}
Le sommaire est créé à l'intérieur de la balise identifiée par le premier paramètre transmis à la fonction : 'toc'
Cette balise doit donc être présente plus haut dans la vue :
<div id="toc"></div>
Voici la description de la fonction de génération du sommaire :
toc(id, niveau du sommaire, niveau de titre min.,niveau de titre max., libellé du sommaire, identifiant DOM du conteneur à parcourir pour générer le sommaire)
id (toc)
Obligatoire. Chaîne de caractères (String). Valeur de l'attribut id de l'élément où sera générée la table des matières.
niveau du sommaire
Entier compris entre 1 et 6 correspondant au niveau du titre (h1, h2, h3, etc.) du sommaire.
niveau de titre min
Entier compris entre 1 et 6 correspondant au niveau supérieur des titres (h1, h2, h3, etc.) à inclure dans le sommaire. Le titre de niveau 1 h1 est réservé au contenu par défaut.
niveau de titre min
Entier compris entre 1 et 6 correspondant au niveau inférieur des titres (h1, h2, h3, etc.) à inclure dans le sommaire. Le niveau minimum est égal à 6.
libellé du sommaire
Chaîne de caractères (en principe traduite) à afficher comme titre du sommaire.
identifiant DOM du conteneur à parcourir pour générer le sommaire
Chaîne de caractères qui correspond à l'attribut id de l'élément conteneur à parcourir pour extraire les titres du présents dans le sommaire. Par défaut, sa valeur est égale à data qui l'identifiant de la balise div stockant la description du contenu (par exemple, 'main_container' extraierait tous les titres de la page).
Ce document a été publié le 2019-01-10 14:27:12. (Dernière mise à jour : 2019-07-11 03:36:50.)
(Document) 
(Document)