25
Librairie de composants d’interface graphique http://prototype-ui.com

Prototype UI

Embed Size (px)

DESCRIPTION

Présentation faîte après Paris On Rails 2007

Citation preview

Page 1: Prototype UI

Librairie de composants d’interface graphique

http://prototype-ui.com

Page 2: Prototype UI

Qui?• Samuel Lebeau, http://i.gotfresh.info/

Etudiant à Montpellier, Développeur JS/Rails, contributeur prototype.Change Class.extend to allow for superclass method resolution and remove Class.inherit. Closes #9274. [Samuel Lebeau]

• Juriy Zaytsev (Kangax), http://thinkweb2.com/Développeur New-Yorkais très actif sur la mailing-list.

• Sébastien Gruhier, http://www.xilinus.comCréateur de PWC, nombreuses contributions open-source en composants basés sur Prototype.

• Vincent Le Moign, http://www.webalys.comDesigner.

Page 3: Prototype UI

Pourquoi?

• Prototype Window Class (PWC)

• Prototype Carousel

• Prototype Portal

• ...

• Et surtout Prototype 1.6: ‣Nouvelle architecture de classe (véritable héritage) ‣Nouveau modèle d’événement

Page 4: Prototype UI

Comment?

• Même licence que Prototype (MIT).

• Même principe que Prototype:‣Repository SVN‣Tests fonctionnels et unitaires‣Trac‣Core Team + contributions de la communauté

Page 5: Prototype UI

Comment?

• Documentation (automatique avec NaturalDocs) qui peut être installée en local

• Distribution globale ou par composant (dès la version stable)

• Intégration de PackR (25Ko)

• Forum

Page 6: Prototype UI

Description

• Composants indépendants

• Simple d’utilisation

• Très configurable

• Totalement skinnable

• API Cohérente

Page 7: Prototype UI

Composants

• Core (Ajout de fonctionnalités à Prototype)

• Window

• Carousel

• Shadow

• Dock (expérimental)

• Context Menu

Page 8: Prototype UI

Core

• Ajouts de fonctions supplémentaires aux classes de Prototype (DOM, String ...)

• La classe UI.Options pour mieux gérer les options de chaque composant.

Page 9: Prototype UI

Class.Methods

UI.Window.addMethods({ methodsAdded: function(base) { base.aliasMethodChain('destroy', 'buttons'); }, destroyWithButtons: function() { this.buttons.stopObserving(); this.destroyWithoutButtons(); }}

Exemple d’aliasing de méthode

Page 10: Prototype UI

UI.OptionsEffect.DefaultOptions = { transition: Effect.Transitions.sinoidal, duration: 1.0, // seconds fps: 100, // 100= assume 66fps max. sync: false, // true for combining from: 0.0, to: 1.0, delay: 0.0, queue: 'parallel'}

initialize: function(element) { this.options = Object.extend(Object.extend({ from: this.element.getOpacity() || 0.0, to: 1.0 },Effect.DefaultOptions), options || {});}

Avant

Page 11: Prototype UI

UI.Options

UI.Window = Class.create(UI.Options, { // Options by default options: { theme: null, id: null, top: null, left: null, width: 200, height: 300 }, initialize: function(options) { this.setOptions(options); }}

Après

Page 12: Prototype UI

UI.Options

UI.Window.optionsAccessor('top');

window.setTop(12);// 12

window.getTop();// => 12 (window.options.top)

Et plus encore!

Page 13: Prototype UI

Window

• Design et Ombre skinnable

• Mode modal

• HTML et Ajax content

• Toutes les options de PWC et plus

Page 14: Prototype UI

Carousel

• Horizontal et Vertical

• Toujours 100% skinnable

Page 15: Prototype UI

Context Menu

• Encore et toujours skinnable

• Utilise la classe Shadow

Page 16: Prototype UI

ExempleCréation d’un comportement destkop

Page 17: Prototype UI

ExempleQuelques includes

Et 3 ligne de code Javascript!1

<!-- Javascripts --> <script src="../lib/prototype.js" type="text/javascript"></script> <script src="../lib/effects.js" type="text/javascript"></script> <script src="../dist/window.js" type="text/javascript"></script>

<!-- CSS --> <link href="../themes/window/window.css" rel="stylesheet" type="text/css"> <link href="../themes/window/mac_os_x.css" rel="stylesheet" type="text/css"> <link href="../themes/shadow/mac_shadow.css" rel="stylesheet" type="text/css">

<body> URL: <input type="text" id="url"/> <input type="button" value="open" onclick="openWindow()"/>

<script type="text/javascript"> function openWindow() { new UI.URLWindow({url: $F('url'), theme: "mac_os_x", shadow:true}).setHeader($F('url')).show().focus(); } </script></body>

Page 18: Prototype UI

ExempleSimplifions la création

function openWindow() { var url = $('url').value;

new UI.URLWindow({url: url, theme: "mac_os_x", shadow: true}).setHeader(url).show().focus();}

UI.Window.setOptions({theme: "mac_os_x", shadow: true, top: 40, left: 100, width: 700, height: 400 }); function openWindow() {

new UI.URLWindow({url: $F('url')}).setHeader($F('url')).show().focus();}

Page 19: Prototype UI

ExempleCréons un icône quand on ferme une fenêtre

Page 20: Prototype UI

function openWindow() { var url = $('url').value;

var win = new UI.URLWindow({url: url}).setHeader(url).show().focus(); win.observe("hidden", hideWindow);}

UI.Window.setOptions({theme: "mac_os_x", shadow: true, top: 40, left: 100, width: 700, height: 400, close: "hide" });

• Changeons le comportement par défaut de close en hide

• Et ajoutons un événement sur le hide de la fenêtre

ExempleAction sur hide

Page 21: Prototype UI

ExempleAjoutons la fonction hideWindow

function hideWindow(data) { var win = data.memo.window; // Create a icon on desktop var icon = new Element("div", {class: "icon"}).update(win.header.innerHTML); icon.observe("dblclick", function(){ win.show(); icon.remove(); }); document.body.appendChild(icon);}

.icon { position: absolute; top: 40px; left: 20px; background: url("safari.png") no-repeat top center; width: 128px; height: 64px; text-align:center; padding-top: 64px; font-size: 12px;}

Avec un peu de CSS pour les icônes

Page 22: Prototype UI

ExempleAutre méthode

Utilisons addMethods pour ajouter iconify à la class UI.Window

UI.Window.addMethods({ iconify: function() { var icon = new Element("div", {class: "icon"}).update(this.header.innerHTML); icon.observe("dblclick", function() { this.show(); icon.remove(); }.bind(this)); this.hide(); document.body.appendChild(icon); return this.fire('iconified'); }});function openWindow() { var url = $('url').value; var win = new UI.URLWindow({url: url, close: 'iconify'}).setHeader(url).show().focus();}

Page 23: Prototype UI

UI.Window.setOptions({theme: "mac_os_x", shadow: true, width: 700, height: 400, close: "hide"});var windowPosition = {top: 40, left: 100};

function hideWindow(data) { var win = data.memo.window; if (win.icon) win.icon.show(); else { var pos = win.getPosition(); // Create a icon on desktop at window position var style = new Template('top: #{top}px; left:#{left}px').evaluate(pos); var icon = new Element("div", {className: "icon", style: style}).update(win.header.innerHTML);

// Observe double click to hide icon and show window icon.observe("dblclick", function(){ win.show(); icon.hide(); }); new Draggable(icon); document.body.appendChild(icon); win.icon = icon; }}

function openWindow() { var url = $('url').value; var win = new UI.URLWindow(Object.extend({url: url}, windowPosition)).setHeader(url).show().focus(); win.observe("hidden", hideWindow); windowPosition.top += 40; windowPosition.left += 40;}

Exemple plus complet avec drag des icônes

Page 24: Prototype UI

Futur

• Version stable avec distrib par composant

• Plus de tests, plus de documentation et plus de demo

• Custom build

• Dialog

• Nouveaux composants (portail, layout manager, tooltips ...)

Page 25: Prototype UI

A vous!

• Des questions? C’est le moment :)

• Et à bientôt sur http://prototype-ui.com