prototype ui
DESCRIPTION
Presentation done after Paris On Rails in december 2007 in FranceTRANSCRIPT
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.comPWC creator, creator of many prototype-based open-source projects.
• Vincent Le Moign, http://www.webalys.comDesigner.
Why?
• Prototype Window Class (PWC)
• Prototype Carousel
• Prototype Portal
• ...
• And of course Prototype 1.6: ‣New class architecture (true inheritance) ‣New event model‣ ...
How?
• Same license as Prototype (MIT).
• Same approach as Prototype:‣ Subversion repository‣ Functionals and unit tests‣Trac‣Core Team + contributions from community
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
Features
• Independent components
• Easy and fun to use
• Highly configurable
• Fully skinnable
• Coherent API and documentation
• Most of the methods are chainable
Components
• Core (Adds methods to String, Array, etc.)
• Window
• Carousel
• Shadow
• Dock (experimental)
• Context Menu (experimental)
Core
• Adds core level methods (DOM, String, Array, etc. )
• UI.Option class to handle options of all components easily.
Class.Methods
UI.Window.addMethods({ methodsAdded: function(base) { base.aliasMethodChain('destroy', 'buttons'); }, destroyWithButtons: function() { this.buttons.stopObserving(); this.destroyWithoutButtons(); }}
Method aliasing sample
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 || {});}
Before
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); }}
After
UI.Options
UI.Window.optionsAccessor('top');
window.setTop(12);// 12
window.getTop();// => 12 (window.options.top)
And more!
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
ExampleLet’s create a desktop behavior
<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>
ExampleSome includes
And 3 line of Javascript code!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">
ExampleSimplify creation code by using Option class
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();}
function openWindow() { new UI.URLWindow({url: $F('url'), theme: "mac_os_x", shadow: true}).setHeader(url).show().focus();}
ExampleLet’s create an desktop icon when closing a window
function openWindow() {
var win = new UI.URLWindow({url: $F('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" });
• Let's change default closing behavior from destroy to hide
• And add an event when a window is hidden
ExampleAdd action on hide
ExampleNow the hideWindow function
function hideWindow(data) { var win = data.memo.window; // Create a icon on desktop var icon = new Element("div", {className: "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;}
And some CSS for icon
ExampleOhter method
Using addMethods toadd iconify to UI.Window classUI.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();}
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 = 'top: #{top}px; left:#{left}px'.interpolate(pos); var icon = new Element("div", {className: "icon", style: style}) icon.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 win = new UI.URLWindow(Object.extend({url: $F('url')}, windowPosition)).setHeader(url).show().focus(); win.observe("hidden", hideWindow); windowPosition.top += 40; windowPosition.left += 40;}
Full sample with icon dragging
Next
• Stable version
• More tests, more documentation and more demos
• Custom builds
• Dialog class
• New components (portal, layout manager, tooltips ...)
• Questions?
• And see you soon on http://prototype-ui.com