2. Qui?
• Samuel Lebeau, http://i.gotfresh.info/
Etudiant à Montpellier, Développeur JS/Rails, contributeur prototype.
Change Class.extend to allow for superclass method resolution and remove Class.inherit. Closes
#9274. [Samuel Lebeau]
• Juriy Zaytsev (Kangax), http://thinkweb2.com/
Développeur New-Yorkais très actif sur la mailing-list.
• Sébastien Gruhier, http://www.xilinus.com
Créateur de PWC, nombreuses contributions open-source en
composants basés sur Prototype.
• Vincent Le Moign, http://www.webalys.com
Designer.
3. Pourquoi?
• Prototype Window Class (PWC)
• Prototype Carousel
• Prototype Portal
• ...
• ‣Et surtout Prototype 1.6:
Nouvelle architecture de classe (véritable héritage)
‣ Nouveau modèle d’événement
4. Comment?
• Même licence que Prototype (MIT).
• ‣Même principe que Prototype:
Repository SVN
‣ Tests fonctionnels et unitaires
‣ Trac
‣ Core Team + contributions de la communauté
5. Comment?
• Documentation (automatique avec NaturalDocs)
qui peut être installée en local
• Distribution globale ou par composant (dès la
version stable)
• Intégration de PackR (25Ko)
• Forum
7. Composants
• Core (Ajout de fonctionnalités à Prototype)
• Window
• Carousel
• Shadow
• Dock (expérimental)
• Context Menu
8. Core
• Ajouts de fonctions supplémentaires aux
classes de Prototype (DOM, String ...)
• La classe UI.Options pour mieux gérer les
options de chaque composant.
9. Class.Methods
Exemple d’aliasing de méthode
UI.Window.addMethods({
methodsAdded: function(base) {
base.aliasMethodChain('destroy', 'buttons');
},
destroyWithButtons: function() {
this.buttons.stopObserving();
this.destroyWithoutButtons();
}
}
17. Exemple
Quelques 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
Et 3 ligne de code Javascript!
<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>
18. Exemple
Simplifions la création
function openWindow() {
var url = $('url').value;
new UI.URLWindow({url: 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($F('url')).show().focus();
}
20. Exemple
Action sur hide
• Changeons le comportement par défaut de close en hide
UI.Window.setOptions({theme: quot;mac_os_xquot;,
shadow: true,
top: 40,
left: 100,
width: 700,
height: 400,
close: quot;hidequot;
});
• Et ajoutons un événement sur le hide de la fenêtre
function openWindow() {
var url = $('url').value;
var win = new UI.URLWindow({url: url}).setHeader(url).show().focus();
win.observe(quot;hiddenquot;, hideWindow);
}
21. Exemple
Ajoutons la fonction hideWindow
function hideWindow(data) {
var win = data.memo.window;
// Create a icon on desktop
var icon = new Element(quot;divquot;, {class: quot;iconquot;}).update(win.header.innerHTML);
icon.observe(quot;dblclickquot;, function(){
win.show();
icon.remove();
});
document.body.appendChild(icon);
}
Avec un peu de CSS pour les icônes
.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. Exemple
Autre méthode
Utilisons addMethods pour ajouter iconify à la class
UI.Window
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();
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();
}
23. Exemple plus complet avec drag des icônes
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 = new Template('top: #{top}px; left:#{left}px').evaluate(pos);
var icon = new Element(quot;divquot;, {className: quot;iconquot;, style: style}).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 url = $('url').value;
var win = new UI.URLWindow(Object.extend({url: url}, windowPosition)).setHeader(url).show().focus();
win.observe(quot;hiddenquot;, hideWindow);
windowPosition.top += 40;
windowPosition.left += 40;
}
24. Futur
• Version stable avec distrib par composant
• Plus de tests, plus de documentation et plus
de demo
• Custom build
• Dialog
• Nouveaux composants (portail, layout
manager, tooltips ...)
25. A vous!
• Des questions? C’est le moment :)
• Et à bientôt sur http://prototype-ui.com
![Qui?
• Samuel Lebeau, http://i.gotfresh.info/
Etudiant à Montpellier, Développeur JS/Rails, contributeur prototype.
Change Class.extend to allow for superclass method resolution and remove Class.inherit. Closes
#9274. [Samuel Lebeau]
• Juriy Zaytsev (Kangax), http://thinkweb2.com/
Développeur New-Yorkais très actif sur la mailing-list.
• Sébastien Gruhier, http://www.xilinus.com
Créateur de PWC, nombreuses contributions open-source en
composants basés sur Prototype.
• Vincent Le Moign, http://www.webalys.com
Designer.](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)