Outils pour utilisateurs

Outils du site


cours2007:poo1:cm:composants_mootools

Voir cette page sous forme de diaporama.~

Composant MooTools

Réutiliser le code

Mootools Modulaire

  • Choisir les composants :
  • Plusieurs types :
    • Fonctionnalité de base
    • Fonctionnalité optionnelle
    • Effet basic
    • Composants
  • Gestion automatique des dépendances

Compression JavaScript

Utiliser le code avec commentaires pour le développement, et la version compressée pour publication.

// code originel
var Native = function(options){
  options = options || {};
  ...
}
// code compressé
var Native=function(J){J=J||{};...};

Revue de package

Fonctionnalité de base

  • Core
  • Class
  • Class.Extra
  • Native
    • Array
    • Function
    • Number
    • String
    • Element

Fonctionnalité optionnelle

  • Element
    • Selectors
    • Filters
    • Form
    • Event
    • Dimensions
  • Window
    • DomReady
    • Size

Fonctionnalité optionnelle

  • Remote
    • XHR
    • Ajax
    • Assets
    • Cookie
    • Json
    • Json.Remote

Effet basic

  • Fx
    • Base
    • CSS
    • Style
    • Styles
    • Elements
    • Scroll
    • Slide
    • Transitions
  • Drag
    • Base
    • Move

Composants

  • Plugins
    • Hash
    • Hash.cookie
    • Color
    • Group
    • Scroller
    • Slider
    • SmoothScroll
    • Sortables
    • Tips
    • Accordion

Mootools 1.1 / 1.2b

Ce cours vaut pour MooTools 1.1, pour MooTools 1.2b :

  • Core
  • Native
  • Class
  • Element
  • Utilities
  • Fx
  • Request
  • Plugins

Sites Alternatifs

Utilisation d'autre composant

  • Utiliser une librairie compatible
    • Ne pas utiliser plusieurs librairies
  • Télécharger le composant
  • Écrire votre code
<script src="mootools.js" type="text/javascript"></script>
<script src="unPlugin.js" type="text/javascript"></script>
<script src="mon_code.js" type="text/javascript"></script>

Trouver des composants

Écriture de composant

clientside.cnet.com : How to write a Mootools Class

Mootools :

  • Composants basé sur Class
  • Modularité du code :
    • extend
    • implement
  • Fonction utiles :
    • Chain
    • Events
    • Options

MooTools : Class

Permet de développer comme dans un langage basé sur des classes.

var Cat = new Class({
    initialize: function(name){
        this.name = name;
    }
});
var myCat = new Cat('Micia');
alert(myCat.name); //alerts 'Micia'

Class : généralités

Comme dans les autres langages, une classe peut avoir des propriétés et méthodes.

var Cat = new Class({
  initialize: function(name){
    this.name = name;
  }
});
var myCat = new Cat(“Micia”);
alert(myCat.name); //alerts ”Micia”

Class : Création

On utilise l'objet Class à qui on passe un objet : le modèle de la classe.

var Cat = new Class({
  initialize: function(name){
    this.name = name;
  }
});
var myCat = new Cat(“Micia”);
alert(myCat.name); //alerts ”Micia”

Class : initialize

initialize : constructeur appelé lors de la création d'une instance.

var Cat = new Class({
  initializefunction(name){
    this.name = name;
  }
});
var myCat = new Cat(“Micia”);
alert(myCat.name); //alerts ”Micia”

Class : this

this : référence l'instance de la classe.

var Cat = new Class({
  initialize: function(name){
    this.name = name;
  }
});
var myCat = new Cat(“Micia”);
alert(myCat.name); //alerts ”Micia”

Class : extends

extends : permet de représenter une relation d'héritage.

Class : implement

implement : permet d'ajouter des fonctionnalité à une classe existante (Classe abstraite).

Class Extras : Options

var Widget = new Class({
    options: {width: 100, height: 100},
    initialize: function(options){
        this.setOptions(options);
    }
});
Widget.implement(new Options);
//later...
var myWidget = new Widget({width: 200}});
//myWidget.options = {width: 200, height: 100}

Trés utile pour les composants :

  • Permet de définir des valeurs par défaut
  • Exemple : Fx.Base
cours2007/poo1/cm/composants_mootools.txt · Dernière modification: 2008/08/30 22:00 (modification externe)