OOUI/Exemples PHP

OOUI
Introduction
A propos de la bibliothèque OOjs entrée en matière
Pour commencer
Créer les interfaces par programme Exemples PHP Utiliser OOUI dans MediaWiki
Travailler avec les widgets
Eléments Eléments groupés Eléments marqués Recherche d'éléments Eléments déplaçables Widgets Icônes, indicateurs et étiquettes Boutons et bascules Sélecteurs et options Entrées Fenêtres spontanées Barres de progression Affichages Champs et groupes de champs Formulaires Piles et panneaux Menus Livrets et pages Index et éléments d'onglet Fenêtres Messages simples Dialogues Gérer les dialogues Messages de dialogue Gestionnaires de fenêtres Barres d'outils Thèmes Autres concepts
Voir aussi
Corriger les scripts et les gadgets

Si vous utilisez OOUI :

• dans une extension MediaWiki, voir OOUI/Utiliser OOUI dans MediaWiki .
• dans un projet PHP indépendant, exécutez composer require oojs/oojs-ui.

Un ensemble plus large de la plupart des exemples de widgets PHP est disponible dans le dépôt de code source. Quand vous clonez le dépôt et / ou que vous l'installez en utilisant composer, consultez aussi /demos/widgets.php.

Configurer la bibliothèque

Avant d'afficher un quelconque widget OOUI, vous devez configurer la bibliothèque en appelant les fonctions suivantes :

OOUI\Theme::setSingleton( new WikimediaUITheme() ); // ou: new ApexTheme()
OOUI\Element::setDefaultDir( 'ltr' );               // ou: 'rtl'

Il faut aussi charger le CSS :

<!-- Utilisez 'wikimediaui' ou 'apex' -->
<link rel="stylesheet" href="dist/oojs-ui-core-wikimediaui.css">   <!-- ou: .rtl.css -->
<link rel="stylesheet" href="dist/oojs-ui-images-wikimediaui.css"> <!-- ou: '.rtl.css'-->

Créer un bouton

Pour créer un bouton, utilisez la classe OOUI\ButtonWidget. Le premier argument du constructeur pour un bouton (et le seul) est sa configuration.

$btn = new OOUI\ButtonWidget( [
    'label' => 'Click me!'
] );

Avant que le bouton ne soit converti en HTML et émis, le libellé, la cible et href peuvent être modifiés en utilisant les méthodes setTarget et setHref.

$btn
    ->setLabel( 'Still click me!' )
    ->setTarget( 'blank' )
    ->setHref( 'https://mediawiki.org/' );

Le bouton est maintenant créé avec le texte « Still click me! » mais il n'est pas encore visible par l'utilisateur, car il doit d'abord être converti en HTML et affiché (echo) dans le document :

echo $btn;

Ajouter des comportements JavaScript

En initialisant la propriété href, vous êtes certain qu'en cliquant sur le bouton vous chargerez une nouvelle page PHP. Mais si vous souhaitez utiliser la technique d'avancement progressif pour ajouter au bouton des comportements JavaScript côté client, vous pouvez infuser l'objet côté client avec la méthode JavaScript OO.ui.infuse. Vous devez initialiser la propriété infusable lors de la configuration du widget :

<?php
$btn = new OOUI\ButtonWidget( [
    'infusable' => true,
    'label' => 'Click me!',
    'target' => 'blank',
    'href' => 'https://www.mediawiki.org/'
] );
echo $btn;

Ensuite il faut charger le JavaScript côté client pour enrichir ce widget :

// L'argument ici doit être soit une chaîne correspondant à l'id que vous avez fourni au widget dans le code PHP,
// ou le noeud jQuery représentant le widget que vous avez créé dans le code PHP.
var myButton = OO.ui.infuse( 'my-button' );
// ajoutez les nouvelles actions côté client
myButton.on( 'click', function () {
    window.alert( 'I was clicked!' );
} );

Utilisation sécurisée

Pour les types supplémentaires de sécurité, vous pouvez utiliser la méthode infuse du type spécifique de widget que vous souhaitez. Ce qui donne :

var myButton = OO.ui.ButtonWidget.static.infuse( 'my-button' );

Ceci va produire une exception à l'exécution si PHP et JavaScript ne sont pas compatibles pour le type de widget de my-button (depuis mai 2015 cela n'est pas encore implémenté, mais le sera à l'avenir).