Tutoriels sur Joomla et la création de site

Les layouts sont des blocs de codes qui contrôlent la structure HTML d'une partie particulière du rendu du template. Par défaut, Gaantry est livré avec plusieurs fichiers de layouts intégrés, ceux sont tous situés dans le dossier libraries/gantry/html/layouts/ :

• body_debugmainbody.php - une mise en page utilisée pour des configurations de mise en page principale en mode débugage.
• body_iphonemainbody.php - une mise en page utilisée pour les configurations de mise en page mainbody iphone - Obsolète -
  
• body_mainbody.php - la mise en page par défaut de mainbody. Il s'agit de la mise en page qui contrôle le mainbody vis à vis des barres latérales
• doc_body.php - une mise en page pour restituer la balise body, utilisée dans displayBodyTag()
• doc_tag.php - une mise en page utilisée dans le rendu générique d'une balise produite par la méthode  displayClassesByTag()
• feature_basic.php - une mise en page utilisée pour les rendus génériques des contenus des fonctionnalités (features)
• mod_basic.php - une structure de base pour les modules
• mod_sidebar.php - la mise en page des sidebars
• mod_standard.php - la disposition standard des modules
• orderedbody_mainbody.php - restitue mainbody et sidebars pour une utilisation avec des tables CSS

Etape 1: Objectif

Les mises en page par défaut qui sont fournis avec le Framework Gantry sont conçus pour être assez flexibles pour répondre aux besoins de 99 % de toutes les implémentations possibles. Cependant il y a des occasions où la structure HTML par défaut ne contient pas tous les éléments des blocs ou les noms de classe requis pour réaliser un design particulier. Dans ces rares cas, vous pouvez utiliser toute la puissance du framework Gantry pour remplacer la mise en page par défaut avec votre propre layout du template. Aussi, certaines mises en pages telles que les dispositions de module sont assez flexibles pour supporter vos propres layouts personnalisés et vous pouvez les appeler de la même façon on appelle les layouts par défaut.

Etape 2: Créer/Copier de nouveaux fichier de Layouts

La façon la plus simple de faire est de copier un layout existant. Dans cet exemple, nous allons copier le layout body_mainbody.php, et le modifier par la suite. Les fichiers sont situés dans:

[VOTRE_SITE]/libraries/gantry/html/layouts/

Cependant, vous ne voulez pas modifier les fichiers de base de Gantry. à la place, copiez le nouveau fichier de layout dans :

[VOTRE_SITE]/templates/VOTRE_TEMPLATE/html/layouts/

Vous devrez créer ce dossier layouts/ s'il n'existe pas déjà

Dans ce cas, copiez body_mainbody.php depuis l'emplacement de vos layouts de base vers l'emplacement des layouts du template.

Etape 3: Structure du Fichier

Après avoir copié le fichier body_mainbody.php, vous pouvez l'ouvrir et le modifier en fonction de vos besoins. Par défaut, il ressemble à ceci:

<?php
/**
* @version $Id: body_mainbody.php 2381 2012-08-15 04:14:26Z btowles $
* @author RocketTheme http://www.rockettheme.com
* @copyright Copyright (C) 2007 - ${copyright_year} RocketTheme, LLC
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
*
* Gantry uses the Joomla Framework (http://www.joomla.org), a GNU/GPLv2 content management system
*
*/
defined('GANTRY_VERSION') or die();
     
gantry_import('core.gantrylayout');
     
/**
*
* @package gantry
* @subpackage html.layouts
*/
class GantryLayoutBody_MainBody extends GantryLayout {
    var $render_params = array(
       'schema' => null,
       'pushPull' => null,
       'classKey' => null,
       'sidebars' => '',
       'contentTop' => null,
       'contentBottom' => null
    );
    function render($params = array()){
    /** @var $gantry Gantry */
       global $gantry;
     
       $fparams = $this->_getParams($params);
     
// logic to determine if the component should be displayed
    $display_component = !($gantry->get("component-enabled",true) == false && JRequest::getVar('view') == 'featured');
    ob_start();
    // XHTML LAYOUT
    ?> <div id="rt-main" class="<?php echo $fparams->classKey; ?>">
          <div class="rt-container">
             <div class="rt-grid-<?php echo $fparams->schema['mb']; ?> <?php echo $fparams->pushPull[0]; ?>">
             <?php if (isset($fparams->contentTop)) : ?>
                <div id="rt-content-top">
                   <?php echo $fparams->contentTop; ?>
                </div>
             <?php endif; ?>
             <?php if ($display_component) : ?>
                <div class="rt-block">
                    <div id="rt-mainbody">
                        <div class="component-content">
                            <jdoc:include type="component" />
                        </div>
                    </div>
                </div>
              <?php endif; ?>
              <?php if (isset($fparams->contentBottom)) : ?>
                <div id="rt-content-bottom">
                  <?php echo $fparams->contentBottom; ?>
                </div>
              <?php endif; ?>
            </div>
            <?php echo $fparams->sidebars; ?>
            <div class="clear"></div>
          </div>
        </div>
    <?php
    return ob_get_clean();
    }
    }

Dans le framework Gantry nous utilisons le terme Feature pour signifier un morceau spécifique de fonctionnalité. Les Features sont suffisamment souples pour qu'ils puissent être utilisés pour exécuter presque n'importe quel type de fonctionnement logique dont vous auriez besoin. La classe d'origine GantryFeature contient des méthodes qui peuvent être implémentées pour contrôler comment votre fonctionnalité se comporte.

Le framework Gantry est livré avec un système AJAX intégré qui agit comme une passerelle entre le client et le framework Gantry.

Chaque appel Ajax est dirigé vers un "modèle Ajax" qui reçoit des paramètres Ajax et après ses opérations est capable de retourner une réponse avec ce que la demande d'appel d'origine Ajax attend. Ci-dessous vous pouvez voir un résumé schématique du processus.

La puissance réelle du système ajax intégré dans le framework gantry réside dans les modèles. Chaque développeur peut créer ses propres modèles personnalisés Ajax et utiliser les appels Ajax côté client afin de récupérer des types de données spécifiques.

There are 2 Ajax systems in the Gantry framework that actually work exactly the same with one exception: restrictions. In fact the first can be used for everything regarding the template while the second can only be used admin side. The restriction makes it so that even by error you cannot use the admin Ajax System on the frontend.

Il y a 2 systèmes Ajax dans le framework Gantry qui fonctionnent exactement pareil à une exception près : les restrictions. En fait le premier peut être utilisé pour tout ce qui concerne le template tandis que le second ne peut être utilisé que côté admin. La restriction fait en sorte que même par erreur, vous ne pouvez pas utiliser l'admin système Ajax sur le frontend.

l'URL Ajax

Pour commencer avec un appel Ajax côté client, vous devez appeler l'URL correcte afin de déclencher le mécanisme du modèle Ajax de gantry.

L'URL est le même pour le Frontend et Backend avec, bien sûr, l'ajout du chemin /administrator/  lorsque nous traitons dans le Backend et il ressemble à /index.php?option=com_gantry&task=ajax&format=raw&template=[nom_de_votre_template]

Si nous décomposons la requète, vous remarquerez que cela ressemble à un appel de composant Joomla!, et c'est effectivement ce que c'est :

• option → com_gantry
• task → ajax
• format → raw
• template → [nom_de_votre_template]

Tous ces morceaux sont fondamentaux pour que le mécanisme Ajax de Gantry puisse travailler.

nom_de_votre_template fait réference au nom du template frontend que vous utilisez actuellement. Par exemple si nous étions en train d'utiliser le template par défaut Gantry, ce serait template=gantry

Gantry est livré avec une méthode qui rend plus facile la construction et le rendu de l'URL Ajax. En PHP, vous pouvez exécuter $gantry->getAjaxUrl() et la même chaîne d'URL que ci-dessus sera retournée.

Ceci est particulièrement utile si vous souhaitez copier l'URL dans une variable globale de JavaScript que vous pourrez ensuite référencer dans votre propre script.

Par exemple, dans le index.php de votre template, vous pourriez produire une déclaration de script inline similaire à :

    <?php
    // location: /templates/gantry/index.php
    ...
    $gantry->addInlineScript("var GantryAjaxURL = '".$gantry->getAjaxUrl()."';");
    // GantryAjaxURL => '/index.php?option=com_gantry&task=ajax&format=raw&template=gantry'

De cette façon, vous pouvez accéder à la variable GantryAjaxURL à partir de vos propres scripts.

Les modèles Ajax

Les modèles sont des fonctions Ajax PHP efficace où participe toute la logique d'un modèle spécifique.

Un modèle peut avoir n'importe quel genre de but. Par exemple, dans l'Admin du portique, nous utilisons des modèles Ajax pour

• Vider le cache
• Supprimmer des fichiers compilés LESS
• Sauvegarde Ajax
• Créer des presets
• ...

Comme vous pouvez le voir, un modèle peut être quelque chose que vous pouvez penser et dont le mécanisme fonctionne dans les coulisses, en fait un moyen très puissant pour contrôler quoi que ce soit via Ajax si vous le souhaitez.

Les modèles Ajax sont situés dans le dossier Library de Gantry sous [votre_site]/library/gantry/. Les modèles frontend sont à la racine ajax-models/ tandis que les modèles de backend sont dans le dossier admin admin/ajax-models/

En raison de la capacité du Framework gantry d'overrider, vous n'aurez jamais besoin de jamais aller éditer les modèles contenus dans les endroits mentionnés ci-dessus. En fait, il vous suffit de travailler au niveau du dossier template, en gardant la même structure.

Ainsi, vos modèles personnalisés de tempalte Ajax doivent être stockés dans le dossier [votre_site]/templates/[votre_template]/ajax-models/ tandis que vos modèles personnalisés administrateur Ajax doivent être stockés dans le dossier [votre_site]/templates/[votre_template]/admin/ajax-models/.

Ci-dessous un exemple de modèle qui retournera toutes les requêtes POST en retour à l'Ajax :

    <?php
    // location: /templates/gantry/ajax-models/example.php
    defined('JPATH_BASE') or die();
    global $gantry;
    print_r(JRequest::get('post'));
     
    ?>

Il est important de noter que le nom de fichier du modèle Ajax est ce qui identifie le modèle lui-même.Le nom, dans ce cas, example est ce que nous allons utiliser dans l'appel Ajax côté client, pour récupérer les données dont nous avons besoin pour ce modèle particulier.

La syntaxe d'appel Ajax

Maintenant que nous avons un modèle, nous sommes prêts à créer l'appel JavaScript Ajax. Gantry est basé sur MooTools 1.4, donc les exemples suivants sont écrits dans la syntaxe de MooTools. Cela ne signifie pas que vous ne pouvez pas utiliser JavaScript natif ou tout autre framework pour effectuer la même opération.

Supposons que notre index.php du template charge un fichier js nommé ajax-call.js, fournissant ainsi une variable GantryAjaxURL comme décrit dans la section L'URL Ajax.

<?php
// location: /templates/gantry/index.php
    ...
    $gantry->addInlineScript("var GantryAjaxURL = '".$gantry->getAjaxUrl()."';");
    $gantry->addScript('ajax-call.js'); // /templates/gantry/js/ajax-call.js
 ...

Le template est maintenant configuré pour charger votre script personnalisé d'appel ajax, nous pouurons également nous appuyer sur lavariable JavaScript GantryAjaxURL qui contient l'url ajax en tant que chaîne.

Maintenant la partie amusante, le JavaScript :

((function(){
 
window.addEvent('domready', function(){
// Request Object
var request = new Request({
url: GantryAjaxURL, // <r;- remember, this is the ajax url, explained in The Ajax URL section.
onSuccess: function(response){
console.log(response);
}
});
// Request post
request.post({
model: 'example', // <r;- the model must always be passed in
animal: 'Cat',
name: 'Pixel'
});
});
 
})());

C'est très simple. Comme vous pouvez le voir, nous créons un objet de requête que nous utilisons ensuite pour demander un POST. Il est obligatoire que le modèle (model: 'example') soit toujours présent lors d'une requète, c'est ce qui identifie quel modèle le système Ajax Gantry doit charger et exécuter.

Voila ce qui est produit par l'exemple ci-dessus

    Array
    (
    [model] => example
    [animal] => Cat
    [name] => Pixel
    )

Le modèle que nous avons utilisée est un exemple très basique et simple, mais c'est un bon point de départ. Vous pouvez voir des modèles beaucoup plus sophistiqués si vous explorez le référentiel de bibliothèque de Gantry.

Le Framework Gantry est capable de charger différents fichiers CSS selon le navigateur et le système d'exploitation qui est en train de visionner le template. Cela permet un contrôle complet sur la façon dont un site est affiché même au plus pointilleux des navigateurs !