Framework de widgets

Pour utiliser les widgets d'IMu, nous devons d’abord inclure la bibliothèque de widgets IMu. Cela nécessite l’ajout d’un seul fichier JavaScript à la section <head> de la page :

<script type="text/javascript" src=".../imu.js"></script>

Note: Le ... dans l’attribut src doit en fait être le chemin d’accès au fichier imu.js par rapport à la page elle-même.

Note: Ce fichier contient le code source de plusieurs bibliothèques tierces dont dépend IMu. La plus importante d’entre elles est la bibliothèque jQuery. Cela signifie qu’il n’est pas nécessaire que la page charge jQuery séparément.

Chaque widget IMu prend le contrôle d’un élément HTML existant dans la page. Pour ajouter le navigateur d’enregistrements, nous devons créer un élément vide dans la page qu’IMu peut utiliser pour afficher les enregistrements EMu. L’élément vide est généralement un <div>. Pour que nous puissions faire référence à l’élément plus tard dans du JavaScript, nous donnons à l’élément un id :

<div id="example-widget"></div>

Pour contrôler l’espace que l’élément occupera sur la page, nous définissons sa hauteur. Nous ne définissons pas la largeur de l’élément, ce qui signifie que l’élément atteindra la largeur de son parent - dans ce cas, l’élément <body> de la page. La hauteur peut être réglée en ligne sur l’élément :

<div id="example-widget" style="height:400px"></div>

Ou, dans un exemple plus complet, dans une feuille de style CSS incluse en ligne dans l’en-tête de page ou dans un fichier CSS séparé :

 #example-widget {    height: 400px; }

La dernière étape (et la plus importante) consiste à indiquer au Framework de widgets de prendre le contrôle de l'élément et de l'utiliser pour afficher les enregistrements EMu. Pour ce faire, nous écrivons un petit morceau de JavaScript. Ce JavaScript peut être défini dans la section <head> après le chargement de la bibliothèque JavaScript IMu ou dans la section <body>. Dans cet exemple simple, nous allons placer le code dans le <body> juste après la définition de l’élément :

<div id="example-widget" style="height:400px"></div> <script type="text/javascript"> IMu.ready(function() {    $('#example-widget').IMu('record-browser'); }); </script> 

Le code est relativement simple. La méthode IMu.ready attend qu’IMu charge d’autres feuilles de style CSS ou fichiers JavaScript, puis appelle la fonction anonyme qui est passée comme argument. Ceci est très similaire à la méthode .ready de jQuery (en fait, IMu.ready appelle jQuery.ready).

La ligne de code unique de la fonction anonyme utilise le jQuery standard pour trouver l’élément HTML dont id est example-widget :

$('#example-widget')

puis appelle le plugin IMu jQuery, en passant le nom du widget (record-browser) que nous voulons afficher dans cet élément :

.IMu('record-browser')

C’est ce code qui prend le contrôle de l’élément et qui est responsable de l’affichage du ou des enregistrements EMu.

Tous les widgets d’IMu sont utilisés de manière similaire.

Voici le code d’une page HTML complète qui inclut le widget record-browser :

<html>

<head>

<title>Simple IMu Record Browser</title>

<script type="text/javascript" src="imu/imu.php"></script>

<style>

#example-widget

      {

border: 1px solid black;

height: 400px;

      }

</style>

</head>

<body>

<p>Below is a div which contains an IMu record-browser widget</p>

<div id="example-widget"/>

<script type="text/javascript">

IMu.ready(function()

         {

$('#example-widget').IMu('record-browser');

         });

</script>

</body>

</html>