Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
clients:scrutarijs [2014/10/20 13:56]
vincent [Configuration]
clients:scrutarijs [2017/07/11 15:11]
vincent
Ligne 1: Ligne 1:
 ====== ScrutariJs ====== ====== ScrutariJs ======
  
-//ScrutariJs// est un projet de client ​javascript complexe pour le moteur ​de recherche ​Scrutari. ​Son but est double ​montrer toutes les possibilités offertes par l'API Json (et identifier ainsi les manques et les améliorations possibles) et proposer des composants réutilisables et adaptables à d'autres contextes.+ScrutariJs est un client de Scrutari ​écrit en JavascriptIl est déposé sur Framagit ​https://​framagit.org/​Scrutari/​scrutarijs. Le wiki du dépôt indique notamment [[https://​framagit.org/​Scrutari/​scrutarijs/​wikis/​installation|la procédure d'installation]] ​et comment [[https://​framagit.org/​Scrutari/​scrutarijs/​wikis/​adaptation|l'adapter]].
  
-ScrutariJS peut être vu en action ​aux adresses suivantes ​(la recherche ​porte sur la Coredem) :+Il est possible de le voir en action ​à l'​adresse [[http://​client.scrutari.net/​|client.scrutari.net]] ​(avec une recherche sur la Coredem). client.scrutari.net est constitué d'une série de scripts PHP qui organise l'​appel du client ScrutariJs avec notamment une variante pour grand écran qui divise la fenêtre en deux cadres : un pour la recherche proprement dite et l'​autre pour la consultation : [[http://​client.scrutari.net/?​page=frame|client.scrutari.net/?​page=frame]]. Le code de ce mini site est aussi hébergé sur Framagit : [[https://​framagit.org/​Scrutari/​scrutarijs-standalone|Scrutari/​scrutarijs-standalone]].
  
-  * [[http://​scrutarijs.coredem.info/?​engine=coredem]] +ScrutariJs est conçu pour s'intégrer dans des sites existants, comme le montre les exemples suivants ​:
-  * [[http://​scrutarijs.coredem.info/?​engine=coredem&​page=frame&​width=md]] : avec décomposition de l'écran en deux : à gauche l'​interface de recherche à droite l'​affichage ​des résultats +
-  * [[http://​scrutarijs.coredem.info/?​engine=coredem&​page=frame&​width=lg]] : même chose que précédent pour les écrans vraiment larges (plus de place est donnée au départ à l'​interface de recherche)+
  
-ScrutariJs est en HTML 5 et se base sur les bibliothèques ​[[http://jquery.com|JQuery]] (requêtes Ajax et manipulation du DOM) et [[http://​getbootstrap.com|Bootstrap]] (pour la définition des composants et l'​adaptation aux tailles d'​écran). Les traitements du côté serveur sont fait en PHP. +  * [[http://www.films-luttes-mouvements.net/​scrutarijs|Films en Luttes ​et en Mouvement]] 
- +  ​[[http://www.socioeco.org/scrutarijs_fr.html|Socioeco.org]] 
-Pour le moment, ScrutariJs n'a pas de version empaquetée. Le code source est disponible via le dépôt Subversion : +  * [[http://www.autourdu1ermai.fr/​scrutarijs|Autour du 1er mai]] 
- +  * [[http://www.citego.org/scrutarijs_fr.html|Citego]]
-  ​svn co http://​depot.exemole.fr/​svn/​web/​apps/​coredem.info/​scrutarijs +
-   +
-Comme JQuery et Bootstrap, ScrutariJs est sous licence ​[[http://en.wikipedia.org/wiki/​MIT_License|MIT]]. +
- +
-ScrutariJs est composée de deux parties principales : le répertoire lib/ qui contient le cœur de l'​interaction avec l'API Json et le répertoire engigine/ qui contient les fichiers construisant l'​interface finale. +
- +
- +
-===== À propos du répertoire lib/ ===== +
- +
-La souplesse du langage Javascript conduit rapidement à un code difficilement lisible. Pour essayer d'​éviter ce phénomène,​ les principes suivant ont été appliqués au code javascript des fichiers contenus dans le répertoire lib/ : +
- +
-  - Minimum de dépendance : seule la bibliothèque JQuery est utilisée pour les requêtes Ajax et la manipulation du DOM; aucune extension JQuery n'est utilisée et aucune extension n'est faite de JQuery (ni d'​éléments natifs de Javascript)  +
-  - Utilisation du mécanisme Javascript classique de prototypage pour les objets (une fonction de construction plus des déclarations de prototypes)  +
-  - Aucune utilisation de variables globales, les éléments nécessaires à une fonction ou une méthode sont tous passés en argument (à l'​exception bien sûr des propriétés de l'​objet en question lorsqu'​il s'agit d'une méthode) +
-  - À une exception près (les fonctions de tri), les arguments sont toujours obligatoires,​ aucune fonction n'a donc de comportement différent suivant la présence ou non d'un argument +
-  - Les objets passés en argument ne sont jamais altérés directement ; s'il subissent une modification,​ c'est par le biais d'une méthode spécifique à l'​objet (par exemple, la méthode addBase dans Scrutari.Filter) +
-  - Une fonction //Scrutati = fonction ();// sert de racine à l'​ensemble : tous les objets et fonctions commencent par //​Scrutari.//​ qui sert ainsi d'​espace de noms à l'​ensemble +
-  - Aucun mécanisme d'​extension n'est mis en place +
-  - Les variables correspondant aux objets JQuery commençent toutes par //$// (On aura par exemple var $this = $(this)) +
- +
-Ces différents principes conduisent à un code volontairement verbeux en espérant qu'il soit le plus lisible possible. +
- +
-Les différents fichiers du répertoire lib/ sont les suivants : +
- +
-  * //​scrutari-core.js//​ : contient les appels Ajax et la définition de classes de paramétrage (Scrutari.Loc pour la langue et Scrutari.Engine pour le moteur) +
-  * //​scrutari-utils.js//​ : contient des fonctions utilitaires +
-  * //​scrutari-meta.js//​ : définit l'​objet //​Scrutari.Meta//​ qui encapsule l'​objet //​engineInfo//​ renvoyé par la requête //​json?​type=engine//​ +
-  * //​scrutari-result.js//​ : définit l'​objet //​Scrutari.Result//​ qui encapsule l'​objet //​ficheSearchResult//​ renvoyé par la requête //​json?​type=q-fiche//​ +
-  * //​scrutari-filter.js//​ : définit l'​objet //​Scrutari.Filter//​ servant à construire le filtre appliqué à une recherche +
-  * //scrutari-html.js// : série de fonctions traduisant en HTML des objets (provenant en particulier de l'API Json), ce sont ces fonctions qui sont à remplacer en premier pour l'​adaptation du code HTML généré (en particulier +
- +
- +
-===== À propos du répertoire engine/ ===== +
- +
-Les fichiers de ce répetoire assurent l'​affichage final et l'​interaction entre les éléments de l'​interface. //​html.php//​ contient la structure HTML qui suit le modèle Bootstrap (notamment pour la disposition en colonnes). //​script.php//​ contient du code Javascript inclus générés dynamiquement et inclus directement dans le fichier PHP, il contient également l'​initialisation des différents éléments HTML ainsi que les fonctions principales,​ ce sont ces fonctions qui sont les plus à même d'​évoluer (le fichier //​static/​engine.js//​ contient les fonctions utilisées par l'​interface « stabilisées ». +
- +
-Pour distinguer les classes Bootstrap de celles propres à l'​application,​ ces dernières commencent toujours par le préfixe //​scrutari-//​. +
- +
-Pour les identifiants d'​éléments HTML, la convention de nommage choisie est de les nommmer comme s'il s'​agissait de noms de variable classique (commençant en minuscules avec des majuscules pour marquer le type, exemple : categoryPanelBody). Lorsque l'​élement est transformé est manipulé sous forme JQuery, la variable est préfixé avec //$//. cela donne ce type de formulation qui facilite la correspondance entre code HTML et Javascript : +
- <​code javascript>​var $ficheDisplayBlock = $("#​ficheDisplayBlock"​)</​code>​ +
- +
-//​script.php//​ est le fichier à lire pour voir les possibilités offertes par les fichiers Javascript de lib/ +
- +
- +
- +
-===== Invocation ===== +
- +
-Comme le fichier //​index.php//​ à la racine de l'​application sert d'​aiguillage,​ il suffit de passer des paramètres à l'​adresse du répertoire dans lequel est l'​application (exemple : http://​scrutarijs.coredem.info/?​engine=coredem). En cas d'​absence du paramètre //engine//, c'est le premier moteur défini qui est pris. Les autres paramètres possibles sont : +
-  * q: recherche initiale appliqué au moment du chargement +
-  * page=frame: disposition à base de cadres (<​frameset>​),​ un paramètre supplémentaire //width// peut être ajouter pour la largeur consacrée à l'​interface (une valeur en pixels ou les valeurs //md// (pour « medium ») ou //lg// (pour « large ») +
- +
- +
-===== Autres fichiers et répertoires ===== +
- +
-  * //​index.php//​ : fichier à la racine qui se charge de gérer les paramètres transmis et sert ainsi d'​aiguillage. De fait toutes les URLs de Scrutari sont sous la forme « /?​engine={nom du moteur}&​{autres paramètres} +
-  * //frame/// : répertoire qui contient les fichiers nécessaires pour afficher le moteur au sein d'un système de cadres HTML (//​frameset//​) +
-  * //static/// : répertoire contenant des fichiers statiques, notamment //​engine.css//​ et //​engine.js//​ qui jouent un rôle important dans la construction de l'​interface finale, //​engine.css//​ sert principalement à surcharger les classes par défaut de Bootstrap +
-  * //l10n/// : traductions de l'​interface +
-  * //​scrutarijs-conf_example.php//​ : exemple de fichier de configuration +
- +
-===== Configuration ===== +
- +
-Une même instance de ScrutariJs peut appeler des moteurs différents. C'est le rôle du paramètre //engine// qui indique le nom du moteur à utiliser. Les moteurs disponibles sont indiqués dans un fichier de configuration. //​index.php//​ considère que ce fichier de configuration s'​appelle //​scrutarijs-conf.php//​ et se situe au niveau en dessous du répertoire d'​installation de ScrutariJs. Le fichier //​scrutarijs-conf_example.php//​ compris dans le dépôt est un exemple de configuration. Un fichier de configuration doit définir un tableau associatif stocké dans $GLOBALS['​scrutari'​]['​conf'​]. Ce tableau associatif a les deux clés suivantes : +
-  * //'​origin-prefix'//​ : Ce préfixe est collé avant le nom du moteur pour indiquer au moteur Scrutari l'​origine de l'​appel (le moteur Scrutari stocke cette information dans son journal des recherches +
-  * //'​engines'//​ : tableau associatif des moteurs, chaque clé correspondant au nom d'un moteur ; la valeur associée à chaque clé est un tableau associatif dont les clés sont les suivantes : +
-    * //url// : (obligatoire) url du moteur (ne pas oublier la barre oblique / finale) +
-    * //corpus// : (facultatif) valeur booléenne indiquant si c'est le filtre par corpus qui doit être utilisé plutôt que le filtre par base ; le filtre par corpus est adapté au moteur centré sur un site +
-    * //​css-links//​ : (facultatif) tableau d'URL de fichiers CSS (permettant de surcharger le CSS), sa valeur par défaut est array("​static/​engine.css"​) +
-    * //​js-links//​ : (facultatif) tableau d'URL de fichiers Javascript qui seront mis en lien après les autres déclarations (permettant de surcharger le Javascript, de réécrire des fonctions, etc.) +
-    * //​base-sort//​ : (facultatif) règle pour le classement des bases, les valeurs possibles sont //​fiche-count//​ (valeur par défaut, les bases sont classées par le nombre de fiches) ou //none// (pas de classement, c'est l'​ordre des bases dans le fichier de configuration sources.xml) +
-    * //​corpus-sort//​ : (facultatif) règle pour le classement des corpus, les valeurs possibles sont //​fiche-count//​ (valeur par défaut, les corpus sont classées par le nombre de fiches) ou //none// (pas de classement, c'est l'​ordre des corpus dans le fichier ScrutariData qui compte) +
- +
-Exemple : +
- +
-<code php> +
-<?php +
-$GLOBALS['​scrutari'​]['​conf'​] = array( +
-    '​origin-prefix'​ => "​coredemjs-",​ +
-    '​engines'​ => array( +
-        "​coredem"​ => array( +
-            "​url"​ => "http://sct1.scrutari.net/​sct/​coredem/",​ +
-            "​corpus"​ => false +
-            ), +
-        "​irenees"​ => array( +
-            "​url"​ => "​http://​sct1.scrutari.net/​sct/​irenees/",​ +
-            "​corpus"​ => true, +
-            "​corpus-sort"​ => "​none"​ +
-            ), +
-        "​socioeco"​ => array( +
-            "​url"​ => "​http://​sct1.scrutari.net/​sct/​socioeco/",​ +
-            "​corpus"​ => false +
-            ), +
-        "​premiermai"​ => array( +
-            "​url"​ => "​http://​sct1.scrutari.net/​sct/​premiermai/",​ +
-            "​corpus"​ => true, +
-            "​css-links"​ => array( +
-                "​static/​engine.css",​ +
-                "​http://​static.autourdu1ermai.fr/​new/​css/​main.css",​ +
-                "​http://​static.autourdu1ermai.fr/​new/​css/​scrutari.css"​ +
-                ), +
-            "​js-links"​ => array("​http://​static.autourdu1ermai.fr/​new/​js/​scrutari.js"​) +
-            ) +
-    ) +
-); +
-</​code>​ +
- +
-Dans cet exemple, le moteur de la Coredem (« coredem ») propose un filtre sur les bases alors que celui d'​Irénées (« irenees ») propose un filtre sur les corpus. +
- +
-Le moteur d'Autour du 1er mai (« premiermai ») est allé plus loin dans la personnalisation. Les feuilles de styles font que l'​aspect du moteur respecte la charte graphique du site et ne jure pas avec le reste. ​http://static.autourdu1ermai.fr/new/​js/​scrutari.js fait deux choses : d'une part, il réécrit la fonction //​Scrutari.Html.initFicheHtmlFunction//​ pour que l'​aspect des blocs de résultat soit plus proches des autres listes (par exemple, l'​année est placée juste après le titre du film) et d'​autre part, il définit un mode « iframe » qui lui permet d'​adopter un comportement particulier correspondant à l'​insertion de la page dans une balise <​iframe>​.+
  
 +Une extension pour Spip est également développée pour faciliter son intégration dans un site Spip, comme le montre le [[http://​www.coredem.info/​spip.php?​page=recherche_scrutari&​moteur=coredem|site de la Coredem]]. Le code de cette extension est également déposé sur Framagit : [[https://​framagit.org/​Scrutari/​scrutari_client|Scrutari/​scrutari_client]].
clients/scrutarijs.txt · Dernière modification: 2017/07/11 15:11 par vincent
CC Attribution-Share Alike 4.0 International
Driven by DokuWiki Recent changes RSS feed Valid CSS Valid XHTML 1.0