Your SlideShare is downloading. ×
Prototype UI
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Prototype UI

2,991
views

Published on

Presentation done after Paris On Rails in december 2007 in France

Presentation done after Paris On Rails in december 2007 in France

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,991
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
59
Comments
0
Likes
1
Embeds 0
No embeds

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