Prototype UI

2,363 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,363
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Prototype UI

  1. 1. Librairie de composants d’interface graphique http://prototype-ui.com
  2. 2. 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.com Créateur de PWC, nombreuses contributions open-source en composants basés sur Prototype. • Vincent Le Moign, http://www.webalys.com Designer.
  3. 3. 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
  4. 4. 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é
  5. 5. 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
  6. 6. Description • Composants indépendants • Simple d’utilisation • Très configurable • Totalement skinnable • API Cohérente
  7. 7. Composants • Core (Ajout de fonctionnalités à Prototype) • Window • Carousel • Shadow • Dock (expérimental) • Context Menu
  8. 8. 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.
  9. 9. Class.Methods Exemple d’aliasing de méthode UI.Window.addMethods({ methodsAdded: function(base) { base.aliasMethodChain('destroy', 'buttons'); }, destroyWithButtons: function() { this.buttons.stopObserving(); this.destroyWithoutButtons(); } }
  10. 10. UI.Options Avant Effect.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 || {}); }
  11. 11. UI.Options Après 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); } }
  12. 12. UI.Options Et plus encore! UI.Window.optionsAccessor('top'); window.setTop(12); // 12 window.getTop(); // => 12 (window.options.top)
  13. 13. Window • Design et Ombre skinnable • Mode modal • HTML et Ajax content • Toutes les options de PWC et plus
  14. 14. Carousel • Horizontal et Vertical • Toujours 100% skinnable
  15. 15. Context Menu • Encore et toujours skinnable • Utilise la classe Shadow
  16. 16. Exemple Création d’un comportement destkop
  17. 17. Exemple Quelques includes <!-- Javascripts --> <script src=quot;../lib/prototype.jsquot; type=quot;text/javascriptquot;></script> <script src=quot;../lib/effects.jsquot; type=quot;text/javascriptquot;></script> <script src=quot;../dist/window.jsquot; type=quot;text/javascriptquot;></script> <!-- CSS --> <link href=quot;../themes/window/window.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot;> <link href=quot;../themes/window/mac_os_x.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot;> <link href=quot;../themes/shadow/mac_shadow.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot;> 1 Et 3 ligne de code Javascript! <body> URL: <input type=quot;textquot; id=quot;urlquot;/> <input type=quot;buttonquot; value=quot;openquot; onclick=quot;openWindow()quot;/> <script type=quot;text/javascriptquot;> function openWindow() { new UI.URLWindow({url: $F('url'), theme: quot;mac_os_xquot;, shadow:true}).setHeader($F('url')).show().focus(); } </script> </body>
  18. 18. Exemple Simplifions la création function openWindow() { var url = $('url').value; new UI.URLWindow({url: url, theme: quot;mac_os_xquot;, shadow: true}).setHeader(url).show().focus(); } UI.Window.setOptions({theme: quot;mac_os_xquot;, shadow: true, top: 40, left: 100, width: 700, height: 400 }); function openWindow() { new UI.URLWindow({url: $F('url')}).setHeader($F('url')).show().focus(); }
  19. 19. Exemple Créons un icône quand on ferme une fenêtre
  20. 20. Exemple Action sur hide • Changeons le comportement par défaut de close en hide UI.Window.setOptions({theme: quot;mac_os_xquot;, shadow: true, top: 40, left: 100, width: 700, height: 400, close: quot;hidequot; }); • Et ajoutons un événement sur le hide de la fenêtre function openWindow() { var url = $('url').value; var win = new UI.URLWindow({url: url}).setHeader(url).show().focus(); win.observe(quot;hiddenquot;, hideWindow); }
  21. 21. Exemple Ajoutons la fonction hideWindow function hideWindow(data) { var win = data.memo.window; // Create a icon on desktop var icon = new Element(quot;divquot;, {class: quot;iconquot;}).update(win.header.innerHTML); icon.observe(quot;dblclickquot;, function(){ win.show(); icon.remove(); }); document.body.appendChild(icon); } Avec un peu de CSS pour les icônes .icon { position: absolute; top: 40px; left: 20px; background: url(quot;safari.pngquot;) no-repeat top center; width: 128px; height: 64px; text-align:center; padding-top: 64px; font-size: 12px; }
  22. 22. Exemple Autre méthode Utilisons addMethods pour ajouter iconify à la class UI.Window UI.Window.addMethods({ iconify: function() { var icon = new Element(quot;divquot;, {class: quot;iconquot;}).update(this.header.innerHTML); icon.observe(quot;dblclickquot;, 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(); }
  23. 23. Exemple plus complet avec drag des icônes UI.Window.setOptions({theme: quot;mac_os_xquot;, shadow: true, width: 700, height: 400, close: quot;hidequot;}); 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(quot;divquot;, {className: quot;iconquot;, style: style}).update(win.header.innerHTML); // Observe double click to hide icon and show window icon.observe(quot;dblclickquot;, 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(quot;hiddenquot;, hideWindow); windowPosition.top += 40; windowPosition.left += 40; }
  24. 24. 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 ...)
  25. 25. A vous! • Des questions? C’est le moment :) • Et à bientôt sur http://prototype-ui.com

×