YUI Coder

Mike Plate, a freelance web and mobile developer has created a really useful web app perfect for playing around with CSS3. This will be surely something to bookmark under development tools. Check it out at CSS3 Playground

From Ajaxian

Update: Here is a full set of release notes on the platform preview (called that as it is more of a shell than a browser.

Rey Bango (Ajaxian and now Microsoft employee) will do a post that rounds up the news from MIX today where the IE9 team shared a first preview release of IE9 that comes with new features from HTML5+ (video, SVG, CSS3, addEventListener, JavaScript compilation spread across multicore, and more). All of this is hardware accelerated. Yum. Missing was news on canvas and I didn’t see deets on CSS transforms and the like (which would be awesome with hardware acceleration too).

John Resig just got on stage to talk about the collaboration between jQuery and Microsoft and how Microsoft is now contribution resources and code. For example, templates (all on GitHub which gives you:….MORE

Andy from Coderfoo.com created this excellent example and code sniplet to demo a function he created that uses a context menu to select and deselect all rows from a YUI datatable. At first I simply thought he was just accessing a regular function within YUI but he soon corrected me. He explained that while YUI has a deselect function for all rows a select all function did not exist. So knowing Andy he took on the challenge of creating this function. Thanks again Andy for sharing your code with us.
Working Example on CoderFoo.com http://www.coderfoo.com/examples/datatable-multi-row-select.html

Get the code

YAHOO.lang.augmentObject(
  YAHOO.widget.DataTable.prototype, {
    _selectAllTrEls : function() {
      var selectedRowsEven = YAHOO.util.Dom.getElementsByClassName(YAHOO.widget.DataTable.CLASS_EVEN, "tr",this._elTbody);
      YAHOO.util.Dom.addClass( selectedRowsEven , YAHOO.widget.DataTable.CLASS_SELECTED);
      var selectedRowsOdd = YAHOO.util.Dom.getElementsByClassName(YAHOO.widget.DataTable.CLASS_ODD, "tr",this._elTbody);
      YAHOO.util.Dom.addClass( selectedRowsOdd, YAHOO.widget.DataTable.CLASS_SELECTED);
    },
  /* Selects all rows. * * @method selectAllRows */
  selectAllRows : function() {
    // Remove all rows from tracker
    var tracker = this._aSelections || [];
    for(var j=tracker.length- 1; j>-1; j--) {
      if(YAHOO.lang.isString( tracker[j] )){
        tracker.splice( j,1);
      }
    }
    // Update tracker
    this._aSelections = tracker;
    // Update UI
    this._selectAllTrEls();
    // Get all highlighted rows and make yahoo aware they are selected
    var selectedRowsEven = YAHOO.util.Dom.getElementsByClassName(YAHOO.widget.DataTable.CLASS_SELECTED, "tr",this._elTbody);
    for (i=0;i
<selectedRowsEven.length; i++){
      this.selectRow(i);
    }
  }
});

JavaScript [login.js]

// set up YUI loader
var loader = new YAHOO.util.YUILoader({
    require: ["container","connection",
              "cookie",
              "animation",
              "button",
              "dom","event"
              ],
   loadOptional: true,
   onSuccess: function() {
	Yevent = YAHOO.util.Event;
	Yconnect = YAHOO.util.Connect;
	Ydom = YAHOO.util.Dom;
	Ycook = YAHOO.util.Cookie;
// fire of init() function once the document has finished loading and the dom is ready
    YAHOO.util.Event.onDOMReady(init);
	},
	timeout: 10000,
	allowRollup: true,
	base: '/scripts/yui/build/',
	combine: false
});
loader.insert();

function init() {

 // Create a dialog box to put the login form into
  	    stdDialog = new YAHOO.widget.SimpleDialog("dlgstd", {
	    width: "auto",
	    fixedcenter:true,
	    modal:false,
	    visible:false,
	    close: false,
	    constraintoviewport: true
	  });
	     stdDialog.setHeader("Login:");
	     stdDialog.render(document.body);

  var buttons=[{ text:"Login", handler: function(){
  var loginCallback = {
       cache:false,
       success: function(o){
         response = o.responseText.split(",");
         if(response[0] == "ok"){
          stdDialog.setHeader("Login: Success");
          YAHOO.util.Cookie.set(response[1], response[2], {});
document.location.href = "dashboard.pl";
						}
						else {
							stdDialog.setHeader("Login: Failed, Please Try Again");
						}
	    				},
	    				failure: function(o){
	    					alert('ERROR! Connection to server failed! Please try again.');
	    					}
	    		    };
		var formObject = document.getElementById('login');
		YAHOO.util.Connect.setForm(formObject);
		var username = formObject.username.value;
		var password = formObject.password.value;
		if(username == ""){
			stdDialog.setHeader("Login: Username field is empty");
			var error = 1;
		}
		else if(password == ""){
			stdDialog.setHeader("Login: Password field is empty");
			var error = 1;
		}
		if(!error){
		var cObj = YAHOO.util.Connect.asyncRequest('POST', 'login.pl', loginCallback);
		}

	}, isDefault:true }];
		stdDialog.cfg.setProperty("buttons", buttons);
		stdDialog.cfg.setProperty("postmethod", 'async');
	    stdDialog.cfg.setProperty("text",'
<form id=login method=post action=login.pl>
<table>
<tr>
<td><b>Username:</b></td>
<td>
<input type=text name=username id=username></td>
</tr>
<tr>
<td><b>Password:</b></td>
<td>
<input type=password name=password id=pass>
<input type=hidden name=action value=login></td>
</tr>
</table>
</form>

');

		stdDialog.show();

}

Perl Script [login.pl]

#!/usr/bin/perl
use CGI qw(:standard);
$query = new CGI;

if($query->param('action') eq 'login'){
print "Context-type: text/html \n\n";
# Here is where we define the username and password for authent
 if($query->param('username') eq 'username' && $query->param('password') eq 'password'){
 print "ok,someRandomKeyShouldGoHere," . $query->param('username');
 }
 else {
  print "no";
 }
 exit;
}

  print header;
  print start_html(-title=>'Login',
                   -style=>{src=>'/scripts/yui/build/fonts/fonts.css'},
                   -script=>[{-type => 'text/javascript',-src =>'yui/build/yuiloader/yuiloader-min.js'},
{-type => 'text/javascript',-src =>'login.js'}],
                   -class=>'yui-skin-sam'
                   );
 print end_html;

Andy created a very and useful advanced example of using the Yahoo! User Interface TreeView with the capabilites of drag and drop of child nodes to other parent nodes. Here is an exert of his blog and the link.