Library of UI components
 http://prototype-ui.com
Who?
• Samuel Lebeau, http://i.gotfresh.info/
  French student, JS/Rails developer, prototype contributor.
  Change Class....
Why?
• Prototype Window Class (PWC)
• Prototype Carousel
• Prototype Portal
• ...
• ‣And classcourse Prototype 1.6:
      ...
How?
• Same license as Prototype (MIT).
• ‣Same approach as Prototype:
    Subversion repository
 ‣ Functionals and unit t...
How?
• Documentation (automatic with NaturalDocs)
  that can be installed locally
• Full distrib file or per component (wil...
Features
• Independent components
• Easy and fun to use
• Highly configurable
• Fully skinnable
• Coherent API and document...
Components
• Core (Adds methods to String, Array, etc.)

• Window
• Carousel
• Shadow
• Dock (experimental)
• Context Menu...
Core
• Adds core level methods (DOM, String,
  Array, etc. )


• UI.Option class to handle options of all
  components eas...
Class.Methods
      Method aliasing sample
UI.Window.addMethods({
  methodsAdded: function(base) {
     base.aliasMethodCh...
UI.Options
                 Before
Effect.DefaultOptions = {
  transition: Effect.Transitions.sinoidal,
  duration:   1.0,...
UI.Options
                After
UI.Window = Class.create(UI.Options, {
  // Options by default
  options: {
     theme:  ...
UI.Options
       And more!
UI.Window.optionsAccessor('top');

window.setTop(12);
// 12

window.getTop();
// => 12 (window...
Window
• Skinnable Design and Shadow


• Modal mode
• HTML and Ajax content
• All PWC options and more
Carousel
• Horizontal and Vertical



• Always 100% skinnable
Context Menu

• One more time: skinnable


• Uses Shadow class
Example
Let’s create a desktop behavior
Example
                                     Some includes
          <!-- Javascripts -->
          <script src=quot;../li...
Example
               Simplify creation code by using Option class
function openWindow() {

    new UI.URLWindow({url: $F...
Example
Let’s create an desktop icon when closing a window
Example
                             Add action on hide

• Let's change default closing behavior from destroy to hide
    ...
Example
                    Now the hideWindow function
function hideWindow(data) {
    var win = data.memo.window;

     ...
Full sample with icon dragging
UI.Window.setOptions({theme: quot;mac_os_xquot;, shadow: true, width:    700, height: 400, ...
Next
• Stable version
• More tests, more documentation and more
  demos
• Custom builds
• Dialog class
• New components (p...
• Questions?
• And see you soon on http://prototype-ui.com
Upcoming SlideShare
Loading in …5
×

Prototype UI Intro

2,178 views

Published on

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,178
On SlideShare
0
From Embeds
0
Number of Embeds
68
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Prototype UI Intro

  1. 1. Library of UI components http://prototype-ui.com
  2. 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. 3. Why? • Prototype Window Class (PWC) • Prototype Carousel • Prototype Portal • ... • ‣And classcourse Prototype 1.6: of New architecture (true inheritance) ‣ New event model ‣ ...
  4. 4. How? • Same license as Prototype (MIT). • ‣Same approach as Prototype: Subversion repository ‣ Functionals and unit tests ‣ Trac ‣ Core Team + contributions from community
  5. 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. 6. Features • Independent components • Easy and fun to use • Highly configurable • Fully skinnable • Coherent API and documentation • Most of the methods are chainable
  7. 7. Components • Core (Adds methods to String, Array, etc.) • Window • Carousel • Shadow • Dock (experimental) • Context Menu (experimental)
  8. 8. Core • Adds core level methods (DOM, String, Array, etc. ) • UI.Option class to handle options of all components easily.
  9. 9. Class.Methods Method aliasing sample UI.Window.addMethods({ methodsAdded: function(base) { base.aliasMethodChain('destroy', 'buttons'); }, destroyWithButtons: function() { this.buttons.stopObserving(); this.destroyWithoutButtons(); } }
  10. 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. 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. 12. UI.Options And more! UI.Window.optionsAccessor('top'); window.setTop(12); // 12 window.getTop(); // => 12 (window.options.top)
  13. 13. Window • Skinnable Design and Shadow • Modal mode • HTML and Ajax content • All PWC options and more
  14. 14. Carousel • Horizontal and Vertical • Always 100% skinnable
  15. 15. Context Menu • One more time: skinnable • Uses Shadow class
  16. 16. Example Let’s create a desktop behavior
  17. 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(url).show().focus(); } </script> </body>
  18. 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(url).show().focus(); }
  19. 19. Example Let’s create an desktop icon when closing a window
  20. 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. 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. 22. 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; }
  23. 23. Next • Stable version • More tests, more documentation and more demos • Custom builds • Dialog class • New components (portal, layout manager, tooltips ...)
  24. 24. • Questions? • And see you soon on http://prototype-ui.com

×