Widgets : Différence entre versions

Version du 19 juin 2009 à 15:48

Cette librairie facilite la création des interfaces en proposant des objets associés à chaque élément connu d'une page Web : champ de formulaire, tableau, lien avec puce, popup calendrier de sélection d'un jour...

getDescription

Méthode commune à toutes les librairies pour obtenir la description de l'objet partagé.

$instance = bab_functionality::get('Widgets');

$description = $instance->getDescription();

Initialisation

Fichier addonini.php

Pour accéder aux widgets dans un module d'Ovidentia, il est nécessaire d'installer la librairie Widgets et le module jQuery.

De manière a éviter tout problème ces pré-requis devront être signalés dans le fichier addonini.php du module en y ajoutant quelques lignes :

<source lang="ini">

<?php/*

[general] name="my_addon" . . .

[addons] widgets="0.2.0"

[functionalities] jquery="Available"

• /?>

</source>

Utilisation de la librairie

Pour utiliser la librairie dans un code PHP, il est nécessaire d'utiliser la fonction bab_functionality(). Il est conseillé d'inclure les styles utiles à quelques widgets :

<source lang="php"> $W = bab_functionality::get('Widgets'); $W->includeCss(); </source>

Les pages

La page est le point de départ d'une interface. C'est elle qui contient tous les éléments.

On définit une page grâce à l'objet Widget_BabPage.

La page créée est insérée dans le corps du site Ovidentia : le bandeau et les sections du site apparaîtront autour de la page.

<source lang="php"> $page = $W->BabPage(); </source>

Il est possible de définir le positionnement des éléments à l'intérieur de chaque élément. Ici, on définit le positionnement pour la page en cours :

1. La méthode VBoxLayout() définit une mise en page verticale.
2. La méthode HBoxLayout() définit une mise en page horizontale.
3. La méthode FlowLayout() définit une mise en page horizontale en 'écoulement' : les éléments reviennent à la ligne automatiquement.

<source lang="php"> $page = $W->BabPage(); $page->setLayout($W->VBoxLayout()); </source>

Pour travailler avec des applications en pleine page ou avec des popups, vous pouvez désactiver le mode intégré avec la méthode setEmbedded(). Le bandeau et les sections du site n'apparaîtront pas :

<source lang="php"> $page = $W->BabPage(); $page->setLayout($W->VBoxLayout());

$page->setEmbedded(false); </source>

Pour afficher le contenu de la page, on utilise la méthode displayHtml() :

<source lang="php"> $page = $W->BabPage(); $page->setLayout($W->VBoxLayout());

$bonjourLabel = $W->Label('Bonjour'); $page->addItem($bonjourLabel);

$page->displayHtml(); </source>

Insérer des éléments

On ajoute des éléments via la méthode addItem() sur un élément conteneur (objet Widget_BabPage par exemple). Dans l'exemple ci-dessous, on ajoute un texte dans notre page.

<source lang="php"> $page = $W->BabPage(); $page->setLayout($W->VBoxLayout());

$bonjourLabel = $W->Label('Bonjour'); $page->addItem($bonjourLabel);

$page->displayHtml(); </source>

Navigation horizontale avec les onglets

La méthode addItemMenu() sur l'objet Widget_BabPage permet de définir un onglet. La méthode setCurrentItemMenu() permet de définir l'onglet courant.

Dans cet exemple, on affiche 2 onglets : configuration et droits. Droits est l'onglet en cours.

<source lang="php"> $page = $W->BabPage(); $page->setLayout($W->VBoxLayout());

$addon = bab_getAddonInfosInstance('monmodule'); $page->addItemMenu('configuration', 'Configuration', $addon->getUrl().'user&idx=config'); $page->addItemMenu('droits', 'Droits', $addon->getUrl().'user&idx=droits'); $page->setCurrentItemMenu('droits');

$page->displayHtml(); </source>

Exemples

Hello world !

Commençons par un exemple simple qui se contentera d'afficher le texte "Hello world !" sur une page. L'exemple contient un certain nombre d'opérations qui seront nécessaires pour toutes les pages utilisant les widgets.

<source lang="php"> // Ici on récupère l'objet Func_Widgets qui servira notamment à créer tous les widgets et layouts $W = bab_functionality::get('Widgets');

// On crée une page, qui sera le container principal. $page = $W->BabPage();

// On associe à la page une mise en page (layout) verticale : les éléments qu'on y ajoutera seront disposés les uns sous les autres. $page->setLayout($W->VBoxLayout());

// Création d'un simple texte (Label) $helloLabel = $W->Label('Hello world !');

// On ajoute ce texte à la page. $page->addItem($helloLabel);

// C'est fini, on affiche la page. $page->displayHtml(); </source>