Tony Thomas

Father to two, husband to one, web developer and musician.

Archive for December, 2008

When Using a Grid Layout CSS Framework, Do the Math

Tuesday, December 16th, 2008

I recently spent an entire weekend trying to troubleshoot why Internet Explorer 6 kept wrapping the rightmost DIV in my design to the bottom of the page when no other browser did. In my case, I was using the Blueprint CSS framework that creates twenty-four 30 pixel columns, each with a 10 pixel right margin (except the 24th column, which has no right margin), to make a nice 950-pixel wide grid. The whole purpose of using a CSS framework is that it’s supposed to protect me from exactly the sort of problem I was having where different browsers display the page differently. I spent hours trying to figure out why Blueprint was failing in this case. Finally, on Sunday evening I figured it out. The enemy was not Blueprint. The enemy was me.

Blueprint Grid

Above is an approximation of the Blueprint grid. (The thirty-pixel columns are in gray and the ten-pixel right margins in white.) Read the tutorial file for details, but basically, by defining “span-16″ as the class of your DIV, you wind up with a 630 pixel DIV with a ten-pixel right margin for a total of 640 pixels. Nice and neat, and it seemed perfect in my case since the photo I wanted to place on the right was 300 pixels wide. I even had ten pixels to spare. You’re probably a lot smarter than me, so you’ve already figured it out. Unfortunately, I spent the better part of a weekend working in this problem. Finally I was reduced to counting columns and I realized there’s no way to get a 300-pixel DIV using 40 pixel columns! Firefox, Safari & higher versions of Internet Explorer were more forgiving and formatted the page as I wanted. Only Internet Explorer 6 interpreted the code strictly in this case. The other browsers corrected for my math error. I blamed Blueprint for failing and Internet Explorer 6 for misinterpreting my CSS when I was at fault all along.

Forty X 7 (span-7) = 280. Just short of my needed 300 pixels. Forty X 8 = 320. Twenty pixels too wide which left an unwanted margin on the right of my photo. When I finally figured all of this out, I was able to use a combination of Blueprint classes and my own classes to consistently format the page the way I wanted.

Lesson learned: Leverage your CSS grid framework as much as possible, but also add up your columns to your page elements don’t get pushed around the page. It may still be necessary to define your own DIVS outside of the framework.

Tags: , ,
Posted in Blueprint Framework, css, web development | Comments Off

Use Functions from Other Controllers While Maintaining MVC Architecture in CakePHP

Wednesday, December 10th, 2008

UPDATE (7/22/2009)

requestionAction may not be the best solution. Read this.

At my day job, I’m working on an application to keep track of specimens for our lab. A specimen is sent to the lab, then divided into aliquots which are put into boxes and stored in freezers. The previous sentence ought to give you some idea of the architecture of the database, which in turn drives the Model for my application.

To take a step back for a second, I’m developing the application using the CakePHP framework which uses MVC architecture.

As you may have guessed I have specimen, aliquot, boxes and freezers tables. In turn then, I have Specimen, Aliquot, Box and Freezer Models.

The trick here is that I want to alert users when there are aliquots in the system that have not yet been assigned to boxes. It’s a simple query:

SELECT COUNT(aliquot.id)
FROM aliquots
WHERE aliquots.box_id IS NULL

The problem is that I want the number of unstored aliquots to be displayed on every page in the left column as a persistent reminder that there are are aliquots that need to be put away. I want to do that in a way that maintains the MVC architecture and doesn’t violate the DRY philosophy.

Since the query is run on the aliquots table and each view is generally specific to it’s own model, I either have to run a recursive query to access data across models–which adds overhead–or implement the solution below which lightens the load a bit and is a more elegant bit of code. (Tip of the hat to Jon Bennet for offering the solution.)

The solution involves CakePHP’s requestAction().

I can define the method in my aliquots controller and call it from anywhere. So if aliquots_controller.php has a method that retrieves the data from the model (in this case called ‘unstored’) I can simply put the following code into my layout:

$unstored = $this->requestAction('aliquots/unstored');
if(!empty($unstored)) {
echo $html-&gt;link('<strong>' . $unstored['unstored'] . ' aliquots have not been stored.</strong>', '/aliquots/store');
}

I only have to define the method once to use it throughout my application. Problem solved.

Tags: , , , ,
Posted in About the Author, CakePHP, PHP, This Site, web development | Comments Off