Επιφάνεια εργασίας με το YUI

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Επιφάνεια εργασίας με το YUI

Δημοσίευση από ThyClub » 03 Οκτ 2009 12:54

Όταν πρωτοείδα το jQuery desktop έμεινα με το στόμα ανοιχτό. Έτσι αποφάσισα να κάνω κάτι παρόμοιο με το YUI. Μου πήρε 2 μέρες ώστε να κάνω τα παραδείγματα του YUI να δουλέψουν για μένα και μόλις χτές το κατάφερα:
Εικόνα

Mock Dock
Πρώτα απ όλα ήθελα να εμφανίζω μια μπάρα όπως των Mac στο κάτω μέρος της οθόνης. Έτσι χρησιμοποιήσα τον κώδικα απο το http://www.cssstickyfooter.com/ . Μετά ήθελα να προσθέσω ένα εφέ στα εικονίδια ώστε να φαίνονται και να "φέρνουν" στο mock dock των mac. Πρόσθεσα ένα event listener στο mouseover+mouseout σε κάθε εικόνα που είχε όνομα class = link και ένα easing effect στο resize των εικονιδίων. Ο κώδικας:

Κώδικας: Επιλογή όλων

window.onload=function() {
YAHOO.namespace("example.container");
//menu();
YAHOO.example.container.manager = new YAHOO.widget.OverlayManager();
 var as = document.getElementsByTagName("img");
 for&#40;var i=0; i<as.length; i++&#41; &#123;
 var a = as&#91;i&#93;;
 if&#40;a.className.indexOf&#40;"link"&#41;>=0&#41;&#123;
 YAHOO.util.Event.addListener&#40;a.id, "mouseover", setupAnim&#41;;
 YAHOO.util.Event.addListener&#40;a.id, "mouseout", unsetupAnim&#41;;
 &#125;
 &#125;
&#125;

var setupAnim = function&#40;e&#41;&#123;
 var move = new YAHOO.util.Anim&#40;e.target.id, &#123;
 height&#58; &#123; to&#58; 64 &#125;,
 width&#58; &#123; to&#58; 64 &#125;
 &#125;,0.3,YAHOO.util.Easing.easeBoth&#41;;
 move.animate&#40;&#41;;
&#125;

var unsetupAnim = function&#40;e&#41;&#123;
 var unmove = new YAHOO.util.Anim&#40;e.target.id, &#123;
 height&#58; &#123; to&#58; 36 &#125;,
 width&#58; &#123; to&#58; 36 &#125; ,
 &#125;, 1,YAHOO.util.Easing.easeOut&#41;;
 unmove.animate&#40;&#41;;
&#125;
Τώρα χρειαζόμουν μια εικόνα όπου τα εικονίδια θα "κάθονται":
Εικόνα
και όταν προσθέτω τα εικονίδια να γίνεται έτσι:
Εικόνα

Το μενού επιλογών

Το μενού είναι απλή αντιγραφή και επικόλληση απο τα παραδείγματα του YUI, με μερικές αλλαγές πάντα:

Κώδικας: Επιλογή όλων

YAHOO.util.Event.onContentReady&#40;"topmenu", function &#40;&#41; &#123;

 /*
 Instantiate a MenuBar&#58;  The first argument passed to the constructor
 is the id for the Menu element to be created, the second is an
 object literal of configuration properties.
 */

 var oMenuBar = new YAHOO.widget.MenuBar&#40;"topmenu", &#123;
 autosubmenudisplay&#58; true,
 hidedelay&#58; 750,
 lazyload&#58; true &#125;&#41;;

 /*
 Define an array of object literals, each containing
 the data necessary to create a submenu.
 */

 var aSubmenuData = &#91;

 &#123;
 id&#58; "file",
 itemdata&#58; &#91;
 &#123;
 text&#58; "New",
 submenu&#58; &#123;
 id&#58; "new",
 itemdata&#58; &#91;
 &#123; text&#58; "File", onclick&#58;&#123; fn&#58; newfile &#125; &#125;,
 &#123; text&#58; "Application", url&#58;"#" &#125;,
 &#123; text&#58; "Shortcut",  url&#58; "#" &#125;,
 &#123; text&#58; "Desktop", url&#58; "#" &#125;
 &#93;
 &#125;

 &#125;,
 &#123; text&#58; "Open", onclick&#58;&#123; fn &#58; openfile &#125; &#125;,
 &#123; text&#58; "Save", url&#58; "#" &#125;,
 &#123; text&#58; "Save as...", url&#58; "#" &#125;,
 &#123; text&#58; "Exit", url&#58; "#" &#125;
 &#93;
 &#125;,

 &#123;
 id&#58; "edit",
 itemdata&#58; &#91;
 &#123; text&#58; "Undo", url&#58; "#" &#125;,
 &#123; text&#58; "Copy", url&#58; "#" &#125;,
 &#123; text&#58; "Paste", url&#58; "#" &#125;,
 &#123; text&#58; "Select All", url&#58; "#" &#125;
 &#93;
 &#125;,

 &#123;
 id&#58; "view",
 itemdata&#58; &#91;
 &#123; text&#58; "HTML Source", url&#58; "view-source&#58;"+document.location &#125;,
 &#123; text&#58; "Javascript Source", url&#58; "view-source&#58;"+document.location+"k800.js" &#125;,
 &#123; text&#58; "CSS Source", url&#58; "view-source&#58;"+document.location+"css/style.css" &#125;
 &#93;
 &#125;,

 &#123;
 id&#58; "go",
 itemdata&#58; &#91;
 &#123; text&#58; "Google", url&#58; "http&#58;//www.google.com" &#125;,
 &#123; text&#58; "Yahoo!", url&#58; "http&#58;//www.yahoo.com" &#125;,
 &#123; text&#58; "Jeez Tech", url&#58; "http&#58;//jeez.eu" &#125;,
 &#123; text&#58; "Reddit", url&#58; "http&#58;//reddit.com" &#125;
 &#93;
 &#125;
 &#93;;

 /*
 Subscribe to the "beforerender" event, adding a submenu
 to each of the items in the MenuBar instance.
 */

 oMenuBar.subscribe&#40;"beforeRender", function &#40;&#41; &#123;

 var nSubmenus = aSubmenuData.length,
 i;

 if &#40;this.getRoot&#40;&#41; == this&#41; &#123;

 for &#40;i = 0; i < nSubmenus; i++&#41; &#123;
 this.getItem&#40;i&#41;.cfg.setProperty&#40;"submenu", aSubmenuData&#91;i&#93;&#41;;
 &#125;

 &#125;

 &#125;&#41;;

 /*
 Call the "render" method with no arguments since the
 markup for this MenuBar instance is already exists in
 the page.
 */

 oMenuBar.render&#40;&#41;;
 &#125;&#41;;
και το HTML:

Κώδικας: Επιλογή όλων

<div id="doc">
 <div id="hd">
 <!-- start&#58; your content here -->

 <!-- end&#58; your content here -->
 </div>

 <div id="bd">

 <!-- start&#58; primary column from outer template -->
 <div id="yui-main">
 <div>
 <!-- start&#58; stack grids here -->

 <div id="topmenu">
 <div>

<ul>

 <li>
 <a href="#">File</a>
 </li>
 <li>
 <a href="#">Edit</a>
 </li>
 <li>
 <a href="#">View</a>

 </li>
 <li>
 <a href="#">Go</a>
 </li>
</ul>
</div>
</div>

 </div>
 </div>
 <!-- end&#58; primary column from outer template -->

 <!-- start&#58; secondary column from outer template -->
 <div>

 </div>
 <!-- end&#58; secondary column from outer template -->
 </div>
 <div id="ft">

 </div>
 </div>
Τώρα η επιφάνεια εργασίας έχει mock dock + top menu.

Λειτουργίες
Ήθελα επίσης να προσθέσω λίγη λειτουργικότητα. Πρώτα απ όλα να μπορεί να δημιουργεί παράθυρα απο τα εικονίδια στο κάτω μέρος της οθόνης. Να είναι μετακινήσιμα, να υποστηρίζουν resize και focus. Επίσης ήθελα να δώσω την ικανότητα στο μενού επιλογών να εμφανίζει ένα επεξεργαστή κειμένου όταν πατάμε File->New->File καθώς και έναν διάλογο όταν πατάμε Open File.

Παράθυρα
Εικόνα
Αυτό ήταν πιο εύκολο απ ότι νόμιζα στην αρχή. Χρησιμοποίησα τα παραδείγματα του container utility του YUI :

Κώδικας: Επιλογή όλων

var openPanel = function&#40;e&#41;&#123;

 var pano = new YAHOO.widget.Panel&#40;"pano"+e.target.id, &#123; xy&#58;&#91;250*&#40;e.target.id/3&#41;,100*&#40;e.target.id/3&#41;&#93;, width&#58;"600px", height&#58;"300px", visible&#58;false, draggable&#58;false, close&#58;true&#125; &#41;;
 pano.setHeader&#40;e.target.title+"<span id='max' class='container-max'></span><span id='min' class='container-min'></span>"&#41;;
 pano.setBody&#40;"You clicked on the "+e.target.src+" image with id "+e.target.id+""&#41;;
 pano.setFooter&#40;"End of Panel #"+e.target.id&#41;;
 pano.render&#40;"wrap"&#41;;

 pano.cfg.setProperty&#40;"draggable",true&#41;;

 var resize = new YAHOO.util.Resize&#40;"pano"+e.target.id, &#123;
 handles&#58; &#91;'br'&#93;,
 autoRatio&#58; true,
 minWidth&#58; 300,
 minHeight&#58; 100,
 status&#58; false,
 proxy&#58; true
 &#125;&#41;;

 resize.on&#40;"resize", function&#40;args&#41; &#123;
 var D = YAHOO.util.Dom;

 var clientRegion = D.getClientRegion&#40;&#41;;
 var elRegion = D.getRegion&#40;this.element&#41;;

 resize.set&#40;"maxWidth", clientRegion.right - elRegion.left - YAHOO.widget.Overlay.VIEWPORT_OFFSET&#41;;
 resize.set&#40;"maxHeight", clientRegion.bottom - elRegion.top - YAHOO.widget.Overlay.VIEWPORT_OFFSET&#41;;

 pano.cfg.setProperty&#40;"height",args.panelHeight+"px"&#41;;
 &#125;, pano, true&#41;;

YAHOO.example.container.manager.register&#40;&#91;pano&#93;&#41;;

 pano.show&#40;&#41;;
 YAHOO.util.Event.addListener&#40;'max', "click", function&#40;e&#41;&#123;
 pano.cfg.setProperty&#40;'width',screen.width+100&#41;;
 pano.cfg.setProperty&#40;'height',YAHOO.util.Dom.getViewportHeight&#40;&#41;-30&#41;;
 &#125;,pano,true&#41;;
 YAHOO.util.Event.addListener&#40;'min', "click", function&#40;e&#41;&#123;
 pano.cfg.setProperty&#40;'width',600&#41;;
 pano.cfg.setProperty&#40;'height',300&#41;;
 &#125;,pano,true&#41;;
&#125;
Νέο αρχείο
Εικόνα
Αυτό ήταν λίγο πιο δύσκολο. Έπρεπε να ορίσω στην δημιουργία του επεξεργαστή την ιδιότητα focusAtStart: true για να δουλεύει σωστά ο επεξεργαστής μέσα στον διάλογο.

Κώδικας: Επιλογή όλων

function newfile&#40;&#41;&#123;
 if&#40;document.getElementById&#40;'dialogContainer'&#41;&#41;&#123;
 dlg.destroy&#40;&#41;;
 &#125;
 var results = document.getElementById&#40;'menuresult'&#41;;
 var newdiv = document.createElement&#40;'div'&#41;;
 newdiv.setAttribute&#40;'id', 'dialogContainer'&#41;;
 newdiv.innerHTML = "<div class='hd'>Enter Title and Contents&#58;</div><div class='bd'><form id='dialogForm' name='dialogForm' method='post' action='#'><p><label for='title'>Title&#58;</label> <input name='title' id='title' /></p><p><label for='description'>Contents&#58;</label></p><textarea name='editor' id='editor'></textarea><div id='descriptionContainer'></div></form></div>";
 results.appendChild&#40;newdiv&#41;;

 //create the RTE&#58;
 var editor = new YAHOO.widget.Editor&#40;'editor', &#123;
 width&#58; '702px',
 height&#58; '200px',
 focusAtStart&#58; true
 &#125;&#41;;

 //After the Editor renders it, we will hide it
 //so the iframe doesn't bleed through
 //editor.on&#40;'afterRender', editor.hide&#41;;

 //render the editor explicitly into a container
 //within the Dialog's DOM&#58;
 editor.render&#40;&#41;;

 //create Dialog&#58;
 var dlg = new YAHOO.widget.Dialog&#40;"dialogContainer", &#123;
 width&#58;"725px",
 fixedcenter&#58;false,
 modal&#58;false,
 close&#58;false,
 visible&#58;false
 &#125;&#41;;

 //event handlers for our Dialog buttons&#58;

 //if the user clicks "save", then we save the HTML
 //content of the RTE and submit the dialog&#58;
 function handleSave&#40;&#41; &#123;
 alert&#40;"You pressed on Save"&#41;;
 &#125;

 //if the user clicks cancel, we call Dialog's
 //cancel method&#58;
function handleCancel&#40;&#41; &#123;
 this.destroy&#40;&#41;;
&#125;

 //set up buttons for the Dialog and wire them
 //up to our handlers&#58;
 var myButtons = &#91; &#123; text&#58;"Save",
 handler&#58;handleSave &#125;,
 &#123; text&#58;"Cancel",
 handler&#58;handleCancel,
 isDefault&#58;true &#125; &#93;;
 dlg.cfg.queueProperty&#40;"buttons", myButtons&#41;;

 var onSuccess = function&#40;o&#41; &#123;

 &#125;
 var onFailure = function&#40;o&#41; &#123;

 &#125;
 dlg.callback.success = onSuccess;
 dlg.callback.failure = onFailure;

 //Now that our Dialog is fully configured, we can
 //render it&#58;
 dlg.render&#40;&#41;;
 dlg.showEvent.subscribe&#40;editor.show, editor, true&#41;;
 dlg.hideEvent.subscribe&#40;editor.hide, editor, true&#41;;

 //instantiate button to show Dialog&#58;
 //
 dlg.show&#40;&#41;;
&#125;

Άνοιγμα αρχείου

Εικόνα
Όπως και με την δημιουργία:

Κώδικας: Επιλογή όλων

function openfile&#40;&#41;&#123;
 if&#40;document.getElementById&#40;'dialogContainer'&#41;&#41;&#123;
 dlg.destroy&#40;&#41;;
 &#125;
 var results = document.getElementById&#40;'menuresult'&#41;;
 var newdiv = document.createElement&#40;'div'&#41;;
 newdiv.setAttribute&#40;'id', 'dialogContainer'&#41;;
 newdiv.innerHTML = "<div class='hd'>Open File...</div><div class='bd'><input type='file'></div>";

 results.appendChild&#40;newdiv&#41;;

 var handleYes = function&#40;&#41; &#123;
 alert&#40;"Opening file..."&#41;;
 this.destroy&#40;&#41;;
 &#125;;
 var handleNo = function&#40;&#41; &#123;
 this.destroy&#40;&#41;;
 &#125;;

 var dlg1 = new YAHOO.widget.Dialog&#40;"dialogContainer",
 &#123; width&#58; "300px",
 fixedcenter&#58; true,
 visible&#58; false,
 draggable&#58; true,
 icon&#58; YAHOO.widget.SimpleDialog.ICON_HELP,
 close&#58; false,
 constraintoviewport&#58; true,
 buttons&#58; &#91; &#123; text&#58;"Open File", handler&#58;handleYes, isDefault&#58;true &#125;,
 &#123; text&#58;"Cancel",  handler&#58;handleNo &#125; &#93;
 &#125; &#41;;

 // Render the Dialog
 dlg1.render&#40;results&#41;;
 dlg1.show&#40;&#41;;

&#125;

Μενού δεξί κλίκ

Σαν bonus, έβαλα και μια λειτουργία για το δεξί κλίκ:

Κώδικας: Επιλογή όλων

var oFieldContextMenuItemData = &#91;
 &#123; text&#58; "Visit Jeez Tech", url&#58; "http&#58;//jeez.eu" &#125;,
 &#123; text&#58; "About", onclick&#58; &#123; fn&#58; about &#125; &#125;
 &#93;;

 /*
 Instantiate a ContextMenu&#58;  The first argument passed to the constructor
 is the id for the Menu element to be created, the second is an
 object literal of configuration properties.
 */

var oFieldContextMenu = new YAHOO.widget.ContextMenu&#40;
 "fieldcontextmenu",
 &#123;
 trigger&#58; "wrap",
 itemdata&#58; oFieldContextMenuItemData,
 lazyload&#58; true
 &#125;
&#41;;
Μπορείτε να το δείτε ζωντανά εδώ ή να το κατεβάσετε απο εδώ.

Το άρθρο δημοσιεύτικε στο http://jeez.eu/2009/10/03/yui-mac-like-style-desktop/ στα Αγγλικά

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Επιφάνεια εργασίας με το YUI

Δημοσίευση από dimsis » 03 Οκτ 2009 17:22

Άψογος!
Οδεύουμε ολοένα και περισσότερο σε OO web και έτοιμα κοντρολάκια ή μου φαίνεται; :) keep coding!

Άβαταρ μέλους
Rapid-eraser
WebDev Moderator
Δημοσιεύσεις: 6851
Εγγραφή: 05 Απρ 2003 17:50
Τοποθεσία: Πειραιάς
Επικοινωνία:

Επιφάνεια εργασίας με το YUI

Δημοσίευση από Rapid-eraser » 05 Οκτ 2009 10:44

νομίζω η extjs έχει δείξει εδώ και πολύ καιρό τον δρόμο ε;
Cu, Rapid-eraser, Tα αγαθά copies κτώνται.
Love is like oxygen, You get too much you get too high
Not enough and you're gonna die, Love gets you high

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Επιφάνεια εργασίας με το YUI

Δημοσίευση από dimsis » 05 Οκτ 2009 11:06

Ε ναι για αυτό ενσωματώθηκε και στο Coldfusion από την Adobe :)
Αν και έχουμε δει και σε πολλά άλλα frameworks να κυκλοφορούν "πακέτα" με διάφορα controls για πιο εύκολο χτίσιμο του UI μας.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες