Prototype UI
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Prototype UI

  • 5,874 views
Uploaded on

Presentation done after Paris On Rails in december 2007 in France

Presentation done after Paris On Rails in december 2007 in France

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,874
On Slideshare
5,855
From Embeds
19
Number of Embeds
1

Actions

Shares
Downloads
59
Comments
0
Likes
1

Embeds 19

http://www.slideshare.net 19

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Library of UI components http://prototype-ui.com
  • 2. Who? • Samuel Lebeau, http://i.gotfresh.info/ French student, JS/Rails developer, prototype contributor. Change Class.extend to allow for superclass method resolution and remove Class.inherit. Closes #9274. [Samuel Lebeau] • Juriy Zaytsev (kangax), http://thinkweb2.com/ New York based JS developer, UI expert. • Sébastien Gruhier, http://www.xilinus.com PWC creator, creator of many prototype-based open-source projects. • Vincent Le Moign, http://www.webalys.com Designer.
  • 3. Why? • Prototype Window Class (PWC) • Prototype Carousel • Prototype Portal • ... • ‣And classcourse Prototype 1.6: of New architecture (true inheritance) ‣ New event model ‣ ...
  • 4. How? • Same license as Prototype (MIT). • ‣Same approach as Prototype: Subversion repository ‣ Functionals and unit tests ‣ Trac ‣ Core Team + contributions from community
  • 5. How? • Documentation (automatic with NaturalDocs) that can be installed locally • Full distrib file or per component (will be available with first stable version) • PackR integration (25Kb only) • Active forum
  • 6. Features • Independent components • Easy and fun to use • Highly configurable • Fully skinnable • Coherent API and documentation • Most of the methods are chainable
  • 7. Components • Core (Adds methods to String, Array, etc.) • Window • Carousel • Shadow • Dock (experimental) • Context Menu (experimental)
  • 8. Core • Adds core level methods (DOM, String, Array, etc. ) • UI.Option class to handle options of all components easily.
  • 9. Class.Methods Method aliasing sample UI.Window.addMethods({ methodsAdded: function(base) { base.aliasMethodChain('destroy', 'buttons'); }, destroyWithButtons: function() { this.buttons.stopObserving(); this.destroyWithoutButtons(); } }
  • 10. UI.Options Before 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. UI.Options After 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. UI.Options And more! UI.Window.optionsAccessor('top'); window.setTop(12); // 12 window.getTop(); // => 12 (window.options.top)
  • 13. Window • Skinnable Design and Shadow • Modal mode • HTML and Ajax content • All PWC options and more
  • 14. Carousel • Horizontal and Vertical • Always 100% skinnable
  • 15. Context Menu • One more time: skinnable • Uses Shadow class
  • 16. Example Let’s create a desktop behavior
  • 17. Example Some 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 And 3 line of Javascript code! <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. Example Simplify creation code by using Option class function openWindow() { new UI.URLWindow({url: $F('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. Example Let’s create an desktop icon when closing a window
  • 20. Example Add action on hide • Let's change default closing behavior from destroy to hide UI.Window.setOptions({theme: quot;mac_os_xquot;, shadow: true, top: 40, left: 100, width: 700, height: 400, close: quot;hidequot; }); • And add an event when a window is hidden function openWindow() { var win = new UI.URLWindow({url: $F('url')}).setHeader(url).show().focus(); win.observe(quot;hiddenquot;, hideWindow); }
  • 21. Example Now the hideWindow function function hideWindow(data) { var win = data.memo.window; // Create a icon on desktop var icon = new Element(quot;divquot;, {className: quot;iconquot;}).update(win.header.innerHTML); icon.observe(quot;dblclickquot;, function(){ win.show(); icon.remove(); }); document.body.appendChild(icon); } And some CSS for icon .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. Example Ohter method Using addMethods toadd iconify to UI.Window class 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. Full sample with icon dragging 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 = 'top: #{top}px; left:#{left}px'.interpolate(pos); var icon = new Element(quot;divquot;, {className: quot;iconquot;, style: style}) icon.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 win = new UI.URLWindow(Object.extend({url: $F('url')}, windowPosition)).setHeader(url).show().focus(); win.observe(quot;hiddenquot;, hideWindow); windowPosition.top += 40; windowPosition.left += 40; }
  • 24. Next • Stable version • More tests, more documentation and more demos • Custom builds • Dialog class • New components (portal, layout manager, tooltips ...)
  • 25. • Questions? • And see you soon on http://prototype-ui.com