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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (7)

Ähnlich wie Prototype UI

Ähnlich wie Prototype UI (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Prototype UI