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.
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. 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();
}
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. 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. Next
• Stable version
• More tests, more documentation and more
demos
• Custom builds
• Dialog class
• New components (portal, layout manager,
tooltips ...)