PDA

View Full Version : YUI Logger and Basic Dialog



jbowman
17 Nov 2006, 2:06 PM
Originally, using borderlayout, I had my logger set a seperate tab to the main body of my pages, so I could switch back and forth to it. I decided I didn't like this, and instead, wanted to put the logger into a basic dialog so I could open and close it on demand. It wasn't that hard, and I learned how to set a global variable inside a function :)

Javascript


YAHOO.util.myLogger = {
init: function() {
window.myLoggerDialog = null;;

loggerDialog = document.createElement('div');
loggerDialog.id = 'loggerDialog';
loggerDialog.style.visibility = 'hidden';

document.body.appendChild(loggerDialog);

myLoggerDialog = new YAHOO.ext.BasicDialog("loggerDialog", {
modal:false,
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:300
});

myLoggerDialog.header.update('Logger');
loggerTabs = new YAHOO.ext.TabPanel(myLoggerDialog.body.dom);
loggerTab = loggerTabs.addTab('logger', 'Logger');
myLoggerDialog.tabs = loggerTabs;
myLoggerDialog.tabs.activate('logger');
var myLogReader = new YAHOO.widget.LogReader("logger");
}
};
YAHOO.ext.EventManager.onDocumentReady(YAHOO.util.myLogger.init, YAHOO.util.myLogger, true);


HTML to place in your page to trigger showing the dialog


<span onClick='myLoggerDialog.show(this);'>Logger</span>

tryanDLS
17 Nov 2006, 2:23 PM
You could streamline this further. Creating a BasicDialog will build the internal div (hd, bd, ft) and add the css classes also. Basically all you have to do is pass the div that will contain the dialog (e.g. loggerDialog in your case)

jbowman
17 Nov 2006, 2:41 PM
Your 100% correct, and as such, I've updated the block of code :)

jack.slocum
17 Nov 2006, 8:40 PM
Can someone give me an example link to this? It sounds sweet. :)

jbowman
18 Nov 2006, 12:02 AM
http://whasit.com/ci/

Actually, there you can see a bug in it too.. until you resize the logger box, it won't show a tabbar in the content panel?

jack.slocum
18 Nov 2006, 2:57 AM
Don't you want to wrap the logger?

jbowman
18 Nov 2006, 4:35 AM
ok, that post was made when I was still half asleep...

actually the logger does wrap.. after you resize the dialog it's in. Maybe I need a repaint or something after I insert the logger into the tab?

jack.slocum
18 Nov 2006, 12:23 PM
Ah that's a lot better. Now it's time to clean up that text and buttons hehe. I might actually use it myself. I am sick of alerting everything. :)

jbowman
18 Nov 2006, 2:45 PM
if you end up with a better one, let me know :) I'm playing around trying to integrate drupal 5 beta and yui-ext :D

jbowman
24 Nov 2006, 10:39 AM
I've updated my version to use layoutdialog cutting down a few lines of code. I also finally figured out a fix for the body of the dialog not displaying correctly until after a resize.



YAHOO.util.myLogger = {
init: function() {

window.myLoggerDialog = null;

loggerDialog = document.createElement('div');
loggerDialog.id = 'loggerDialog';
loggerDialog.style.visibility = 'hidden';

document.body.appendChild(loggerDialog);

myLoggerDialog = new YAHOO.ext.LayoutDialog("loggerDialog", {
modal:false,
autoScroll:true,
width:500,
height:300,
shadow:true,
minWidth:500,
minHeight:300,
center: {
autoScroll:true,
alwaysShowTabs: false
}
});

var layout = myLoggerDialog.getLayout();
myLoggerDialog.beginUpdate();
var loggerPane = layout.add('center', new YAHOO.ext.ContentPanel('logger', {
fitToFrame: true,
autoCreate: true }));
myLoggerDialog.endUpdate();

myLoggerDialog.header.update('Logger');
var myLogReader = new YAHOO.widget.LogReader("logger");
myLoggerDialog.syncBodyHeight();
}
};
YAHOO.ext.EventManager.onDocumentReady(YAHOO.util.myLogger.init, YAHOO.util.myLogger, true);

jbowman
26 Nov 2006, 9:04 PM
OK, I'm almost done with this. I've used the layoutdialog to seperate the header and footer into different regions to keep them displayed, and the logs now scroll in the center region. Only other thing I have to figure out is how I can float the buttons to the right, and ideally, hide the collapse button altogether, and I'll be calling this done. Definetly more useable in this state than it was before though.

Edit: I've also gotten rid of assigning it to the window object, per advice given to me by Jack :)



YAHOO.util.myLogger = {
init: function() {

loggerDialog = document.createElement('div');
loggerDialog.id = 'loggerDialog';
loggerDialog.style.visibility = 'hidden';

document.body.appendChild(loggerDialog);

myLoggerDialog = new YAHOO.ext.LayoutDialog("loggerDialog", {
modal:false,
autoScroll:true,
width:500,
height:300,
shadow:true,
minWidth:500,
minHeight:300,
center: {
autoScroll:true,
alwaysShowTabs: false
},
north: {
split: false,
initialSize: 40,
alwaysShowTabs: false
},
south: {
split: false,
initialSize: 65,
alwaysShowTabs: false
}
});

var layout = myLoggerDialog.getLayout();
myLoggerDialog.beginUpdate();
var loggerPane = layout.add('center', new YAHOO.ext.ContentPanel('logger', {
fitToFrame: true,
autoCreate: true }));
var loggerHeader = layout.add('north', new YAHOO.ext.ContentPanel('loggerHeader', {
fitToFrame: true,
autoCreate: true }));
var loggerFooter = layout.add('south', new YAHOO.ext.ContentPanel('loggerFooter', {
fitToFrame: true,
autoCreate: true }));
myLoggerDialog.endUpdate();

myLoggerDialog.header.update('Logger');
var myLoggerConfig = {
logReaderEnabled: true,
verboseOutput: true
};
var myLogReader = new YAHOO.widget.LogReader("logger", myLoggerConfig);
var myLogReaderFooter = YAHOO.util.Dom.getElementsByClassName("yui-log-ft", "div", "logger");
var myLogReaderHeader = YAHOO.util.Dom.getElementsByClassName("yui-log-hd", "div", "logger");
loggerHeader.getEl().appendChild(myLogReaderHeader[0]);
loggerFooter.getEl().appendChild(myLogReaderFooter[0]);
myLoggerDialog.syncBodyHeight();
}
};
YAHOO.ext.EventManager.onDocumentReady(YAHOO.util.myLogger.init, YAHOO.util.myLogger, true);

jbowman
27 Nov 2006, 5:32 PM
So.. now I've figured out how to add style elements to the header of the document, and even how to get it to work in firefox and ie both :D

This latest example looks a lot nicer, but also requires a version of yui-ext pulled from the svn repository newer that 11/26/2006, as it takes advantage of the new autoCreate feature for basicDialog (and layoutDialog in this case).

BUG NOTICE: In IE6, the checkboxs for the filter for some reason have ceased working, however they do work in Firefox 1.5 :? I'll try to come up with a patch for the yui logger when I have some time. I prefer to log everything, so really I'm not going to be in a hurry to fix this, sorry.

screenshot
http://whasit.com/images/yuiextlogger.jpg

code


YAHOO.util.myLogger = {
init: function() {

myLoggerDialog = new YAHOO.ext.LayoutDialog("loggerDialog", {
autoCreate: true,
modal:false,
autoScroll:true,
width:500,
height:300,
shadow:true,
minWidth:500,
minHeight:300,
center: {
autoScroll:true,
alwaysShowTabs: false
},
north: {
split: false,
initialSize: "1.5em",
alwaysShowTabs: false
},
south: {
split: false,
initialSize: "3em",
alwaysShowTabs: false
}
});

var layout = myLoggerDialog.getLayout();
myLoggerDialog.beginUpdate();
var loggerPane = layout.add('center', new YAHOO.ext.ContentPanel('logger', {
fitToFrame: true,
autoCreate: true }));
var loggerHeader = layout.add('north', new YAHOO.ext.ContentPanel('loggerHeader', {
fitToFrame: true,
autoCreate: true }));
var loggerFooter = layout.add('south', new YAHOO.ext.ContentPanel('loggerFooter', {
fitToFrame: true,
autoCreate: true }));
myLoggerDialog.endUpdate();

myLoggerDialog.header.update('Logger');
var myLoggerConfig = {
logReaderEnabled: true,
verboseOutput: true
};
var myLogReader = new YAHOO.widget.LogReader("logger", myLoggerConfig);
var myLogReaderFooter = YAHOO.util.Dom.getElementsByClassName("yui-log-ft", "div", "logger");
var myLogReaderHeader = YAHOO.util.Dom.getElementsByClassName("yui-log-hd", "div", "logger");
loggerHeader.getEl().appendChild(myLogReaderHeader[0]);
loggerFooter.getEl().appendChild(myLogReaderFooter[0]);
var newStyle = document.createElement('style');
newStyle.setAttribute("type","text/css");
var styleText = '#loggerFooter .yui-log-btns { float: right;}#loggerHeader {background-color: #6593cf; color: white;}#loggerHeader .yui-log-btns { display: none;}';
if (newStyle.styleSheet) {
newStyle.styleSheet.cssText = styleText;
} else {
var newStyleContent = document.createTextNode(styleText);
newStyle.appendChild(newStyleContent);
}
var hd = document.getElementsByTagName("head")[0];
hd.appendChild(newStyle);
myLoggerDialog.syncBodyHeight();
}
};
YAHOO.ext.EventManager.onDocumentReady(YAHOO.util.myLogger.init, YAHOO.util.myLogger, true);

jack.slocum
27 Nov 2006, 5:50 PM
Seems to work well. Very cool!