Prototype UI

Library of UI components
http://prototype-ui.com

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.

Why?
• Prototype Window Class (PWC)
• Prototype Carousel
• Prototype Portal
• ...
• ‣And classcourse Prototype 1.6:
of
New 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 ﬁle or per component (will be
available with ﬁrst stable version)
• PackR integration (25Kb only)
• Active forum

Features
• Independent components
• Easy and fun to use
• Highly conﬁgurable
• 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
Method aliasing sample
UI.Window.addMethods({
methodsAdded: function(base) {
base.aliasMethodChain('destroy', 'buttons');
},
destroyWithButtons: function() {
this.buttons.stopObserving();
this.destroyWithoutButtons();
}
}

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 || {});
}

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);
}
}

UI.Options
And more!
UI.Window.optionsAccessor('top');

window.setTop(12);
// 12

window.getTop();
// => 12 (window.options.top)

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

<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>


<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>

Example
Simplify creation code by using Option class

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 });


new UI.URLWindow({url: $F('url')}).setHeader($F('url')).show().focus();
}

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
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

var win = new UI.URLWindow({url: $F('url')}).setHeader(url).show().focus();
win.observe(quot;hiddenquot;, hideWindow);
}

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;
}

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();
return this.fire('iconified');
}
});
var url = $('url').value;
var win = new UI.URLWindow({url: url, close: 'iconify'}).setHeader(url).show().focus();
}

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);
win.icon = icon;
}
}


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;
}

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

Prototype UI

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (7)

Semelhante a Prototype UI

Semelhante a Prototype UI (20)

Último

Último (20)

Prototype UI