RE: XAJAX Live Datagrid
Posted by Timothy on May 12, 2007 in Programming
First, I’d like to thank everyone for checking the small example that I’ve thrown together. Your comments have been great. Secondly, I’d like to restate somethings that have been fairly common amongst those of you who have downloaded or took the time to really look at the example.
I hear there’s some sort of flickering? I rarely, if EVER use IE, so I figured hey, that’d be a great way to test the example and see if there’s some sort of image loading issue (Kinda like you get with mouse-overs sometimes.) I’ve tested this example of mine on both Firefox, IE7 on my XP machine, and Firefox at work on my Ubuntu machine. I’ve even tested it with Firefox on my bastardized unstable-ready to explode Fedora Core 6 machine. The only thing that resembles this flicker, is when the new images have to be loaded since they’re not grayed out anymore. A co-worker of mine also loaded the example without flicker. Hrrrm?!? Must be one of those oddities.
Also, I’ve gotten a few comments about my use of inline CSS. I’ve actually stated in my original post that it’s not the most optimal way to do this, and the CSS should be broken out into a separate CSS file and called from there. Surely that’d be the cleaner way to do things.
I’m also not 100% sure about the issues with the archive. I specifically bundled it up and then extracted it in a totally separate location on my server to test and make sure all the files where intact. *Shrug* It seemed to work fine— Possibly had some images cached?! I dunno.
I’ve also gotten some flack about the amount of markup in the results. One of my co-workers keeps poking me about that since he’s a huge fan of JSON. I was planning on porting this example over to MooTools to see if I could get JSON working and do some benchmarking. Right now, the xAJAX library doesn’t support JSON yet. It’s in the work.
There are many ways this example could be optimized or even improved upon. Take it upon yourselves
The method/technology behind this is quite simple and easily extensible. Run with it! Be creative!
Thanks again to everyone for checking this out and your comments. (Creative criticism nurtures a better end product)
Read MoreUnofficial Off-The-Record (OTR) port to Pidgin 2 beta 7
Posted by Timothy on May 4, 2007 in Software
Unofficial Pidgin OTR plugin ported.
http://www.cyberdyne.org/~icebrkr/files/pidgin-otr-3.0.0.tar.gz
I’ve posted this up on the OTR mailing list and the authors will be reviewing it.
Read MoreXAJAX PHP Live Datagrid / Gridview
Posted by Timothy on May 3, 2007 in Programming
I’ve come across a lot of these ‘live’ datagrids / gridviews and I haven’t really found one I like. Mainly because they seem to only deal with a small bit of data or the code isn’t portable. So I figured I’d just have to code my own and here’s what I came up with.
I’ll start with the primary or main page of the live datagrid. As you see, it’s fairly simple. Oh and this is probably the time that you should visit http://www.xajaxproject.org/ and familiarize yourself with the XAJAX library. I found it to be very easy to work with dispite the lack of complete documentation. Moving on…
gridview.php
-
<?php
-
require_once(‘dgCommon.php’);
-
?>
-
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<title>iCE Breakers XAJAX Datagrid</title>
-
<?php
-
$xajax->printJavascript("/javascript/");
-
?>
-
</head>
-
-
<body>
-
<center>
-
<div id="dataGrid" align="center"></div>
-
<script type="text/javascript">
-
xajax_showDataGrid();
-
</script>
-
</center>
-
</body>
-
</html>
Now heres the glue that holds all this XAJAX stuff together and allows it to do it’s thing. Simply, include the XAJAX library and then register a callback function showDataGrid, which should be fairly self-explanatory.
dgCommon.php
-
<?php
-
require_once(‘includes/xajax.inc.php’);
-
-
$xajax = new xajax("callbacks/cbDataGrid.php");
-
$xajax->registerFunction("showDataGrid");
-
?>
Next for the meat, the actual work-horse of the whole live datagrid. This callback function is only able to sort, search and count our rows. I’ve tried to keep this as simple and basic as possible. I use my own home brewed database class, but you can use PEAR’s DB class if you like. You’ll notice I’m using clsDataGrid which I won’t include here since it’s rather long. The clsDataGrid class is basically a class that displays a HTML table. The methods/setters set up CSS styles and define how the datagrid is going to look.
callbacks/cbDataGrid.php
-
<?php
-
require(‘clsDB.php’);
-
require(‘clsDataGrid.php’);
-
require_once(‘../dgCommon.php’);
-
-
$commonDB = new clsDB($GLOBALS[‘DB’]);
-
-
/*
-
* getNumRows
-
*
-
*/
-
function getNumRows($strColumn=NULL,$strValue=NULL)
-
{
-
GLOBAL $commonDB;
-
-
// Possibly use memcache here?
-
$query = "SELECT COUNT(*) AS numrows FROM tblCustomer";
-
if ($commonDB->query($query))
-
{
-
$row = $commonDB->fetchRow();
-
}
-
return $row[‘numrows’];
-
} // END getNumRows
-
-
-
/**
-
*
-
* Primary Callback Function
-
*
-
*/
-
function showDataGrid($intStart=0, $intLimit=25, $strOrderCol=NULL, $strSortDir="ASC", $strWhere=NULL)
-
{
-
GLOBAL $commonDB;
-
-
$objResponse = new xajaxResponse();
-
$objDataGrid = new clsDataGrid();
-
-
$objDataGrid->setTableName(‘ibDataGrid’);
-
$objDataGrid->setTableStyle(‘style="width:80%; border: 2px solid #C3DAF9; color:#000; padding:0px; margin:0px;" cellspacing=0 cellpadding=0′);
-
$objDataGrid->setHeaderStyle(‘style="text-align: center; font-family: tahoma; font-size: 10px; border:0; margin:0; padding:3px; font-weight:bold; color:#000; background-image:url(images/mso-hd.gif); no-repeat; border-bottom: 1px solid #6593CF;"’);
-
$objDataGrid->setCellStyle(‘style="text-align: left; font-family: tahoma; font-size: 10px; color:#000; border:0; margin:0; padding:3px; border-bottom: 1px solid #DDECFE; border-left: 1px solid #F1EFE2"’);
-
$objDataGrid->setStyleEven(‘style="background: #F5F5F5; border:0; margin:0; padding:0;"’);
-
$objDataGrid->setStyleOdd(‘style="background: #fff; border:0; margin:0; padding:0;"’);
-
$objDataGrid->setNavRowStyle(‘style="font-family: tahoma; font-size: 10px; height: 20px; border:0; margin:0; padding:0px; font-weight:bold; color:#000; background-image:url(images/mso-hd.gif); no-repeat; border-top: 1px solid #6593CF;"’);
-
-
$objDataGrid->setLimit($intLimit);
-
$objDataGrid->setOffset($intStart);
-
$objDataGrid->setOrderCol($strOrderCol);
-
$objDataGrid->setSortDir($strSortDir);
-
-
$cols[‘customer_id’] = "Customer ID";
-
$cols[‘first_name’] = "First Name";
-
$cols[‘last_name’] = "Last Name";
-
$cols[‘email_address’] = "E-Mail Address";
-
$cols[‘phone_number’] = "Phone Number";
-
-
-
$query = ‘SELECT
-
FROM
-
tblCustomer’;
-
-
if ($strWhere != NULL)
-
{
-
$query .= ‘ WHERE ‘ . $strWhere;
-
}
-
-
if ($strOrderCol != NULL)
-
{
-
$query .= ‘ ORDER BY ‘ . $strOrderCol . ‘ ‘ . $strSortDir;
-
}
-
-
$query .= ‘ LIMIT ‘ . $intStart . ‘,’ . $intLimit;
-
-
if ($commonDB->query($query))
-
{
-
while($row = $commonDB->fetchRow())
-
{
-
$objDataGrid->addRow($row);
-
}
-
$objDataGrid->setTotalRows(getNumRows());
-
$objResponse->assign(‘dataGrid’, "innerHTML", $objDataGrid->renderDataGrid());
-
}
-
else
-
{
-
$objResponse->assign(‘dataGrid’, "innerHTML", "No results found.");
-
}
-
return $objResponse;
-
}
-
$xajax->processRequest();
-
?>
I hope a lot of this code is self explanatory. You don’t have to put your CSS inline like I did. You can use your own CSS files, just as long as you use proper CSS HTML tags in the setters. Update the column names to fit your database scheme. If you use my DB class, you’ll have to update config.php and setup the DB credentials there.
Download the example project here
Example Live Datagrid
Example Live Datagrid
Let me know if you use this in any of your projects.
Read More