Search code examples
phpzend-frameworkzend-view

How to reference CSS Classes via headLink in Zend_View?

I've added a number of CSS and JS files to my /public directory under /css and /js respectively. In my Bootstrap.php file, I'm using the following initializer:

protected function _initPlaceholders() {
    $view = new Zend_View($this->getOptions());
    $view->headLink()->appendStylesheet('/css/themes/gray/style.css');
    $view->headScript()->prependFile('/js/global.js');
    return $view;
}

In my view, I'm referencing the CSS and scripts as follows:

<?php

echo "Employee Pay Stub Summary";
echo $this->headLink();
echo $this->headScript();
?>

The wrapper DIV in my view is:

<div id="wrapper">

<?php if(count($this->PayStub)): ?>
<table>
    <tr>
    <th>Employee ID</th>
    <th>PayStub ID</th>
    <th>Earning Type</th>
    <th>Total Hours</th>
    <th>Hourly Rate</th>
    <th>Total Earnings</th>
    <th>Total Witholding</th>
    <th>Start Date</th>
    <th>End Date</th>
    </tr>


    <?php foreach ($this->PayStub as $key => $values):?>
        <tr>
        <td><?php echo $values['EmployeeID'];?></td>
        <td><?php echo $values['PayStubID']; ?></td>
        <td><?php echo $values['EarningType']; ?></td>
        <td><?php echo $values['TotalHours']; ?></td>
        <td><?php echo $values['HourlyRate']; ?></td>
        <td><?php echo $values['TotalEarnings'];?></td>
        <td><?php echo $values['TotalWitholding']; ?></td>
        <td><?php echo $values['StartDate']; ?></td>
        <td><?php echo $values['EndDate']; ?></td>
        </tr>
    <?php endforeach;?>

</table>

<a href="/index">Logout</a>
<?php else: ?>
    <p>There are no Paystubs available</p>
<?php endif; ?>
</div>

Part of my CSS theme is as follows:

#wrapper > header {
background-color: #ABCEEE;
background-image: url(../../svg1910.svg?from=%23ABCEEE&amp;to=%238AA8CA);
background-image: -o-linear-gradient(top, #ABCEEE, #8AA8CA);
background-image: -ms-linear-gradient(top, #ABCEEE, #8AA8CA);
background-image: -moz-linear-gradient(top, #ABCEEE, #8AA8CA);
background-image: -webkit-gradient(linear, left top, left bottom, from(#ABCEEE), to(#8AA8CA));
background-image: -webkit-linear-gradient(top, #ABCEEE, #8AA8CA);
background-image: linear-gradient(top, #ABCEEE, #8AA8CA);
-pie-background: linear-gradient(top, #ABCEEE, #8AA8CA);
}

#main-navigation > li.active {
background-color: #abceee;
background-image: -o-linear-gradient(#ABC, rgba(234, 238, 243, 0.2) 10%, #ABCEEE), -o-
linear-gradient(left, #ABC, #ABCEEE 3%, #ABCEEE 97%, #ABC);
background-image: -ms-linear-gradient(#ABC, rgba(234, 238, 243, 0.2) 10%, #ABCEEE), -ms-
linear-gradient(left, #ABC, #ABCEEE 3%, #ABCEEE 97%, #ABC);
background-image: -moz-linear-gradient(#ABC, rgba(234, 238, 243, 0.2) 10%, #ABCEEE), -moz-    linear-gradient(left, #ABC, #ABCEEE 3%, #ABCEEE 97%, #ABC);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ABC), 
color-stop(10%, rgba(234, 238, 243, 0.2)), color-stop(100%, #ABCEEE)), -webkit-gradient(linear, 
left 
center, right center, color-stop(0%, #ABC), color-stop(3%, #ABCEEE), color-stop(97%, #ABCEEE),   
color-stop(100%, #ABC));
background-image: -webkit-linear-gradient(#ABC, rgba(234, 238, 243, 0.2) 10%, #ABCEEE), -
webkit-linear-gradient(left, #ABC, #ABCEEE 3%, #ABCEEE 97%, #ABC);
background-image: linear-gradient(#ABC, rgba(234, 238, 243, 0.2) 10%, #ABCEEE), linear-
gradient(left, #ABC, #ABCEEE 3%, #ABCEEE 97%, #ABC);
}

/**
* Contents
*/
#wrapper > section > section > header h1,
#wrapper > section > section > .viewport > header h1{
color: #567;
line-height: 30px;
margin: 0;
text-shadow: #FFF 0 1px 2px;
}

Here's the View Source output from FireFox:

Employee Pay Stub Summary
<div id="wrapper">

<table>
    <tr>
    <th>Employee ID</th>
    <th>PayStub ID</th>
    <th>Earning Type</th>
    <th>Total Hours</th>

    <th>Hourly Rate</th>
    <th>Total Earnings</th>
    <th>Total Witholding</th>
    <th>Start Date</th>
    <th>End Date</th>
    </tr>



                <tr>
        <td>1</td>
        <td>1</td>
        <td>0</td>
        <td>40</td>
        <td>25</td>

        <td>1000</td>
        <td>100</td>
        <td>07/01/2011</td>
        <td>07/14/2011</td>
        </tr>
                <tr>
        <td>1</td>

        <td>5</td>
        <td>1</td>
        <td>80</td>
        <td>40</td>
        <td>3200</td>
        <td>320</td>

        <td>07/15/2011</td>
        <td>07/31/2011</td>
        </tr>

</table>

<a href="/index">Logout</a>
</div>

Since I'm new to ZF, I'm unsure how I reference the header and wrapper class in my view? Similarly, how do I call a JS function from one of the files in that directory? How do I ensure that the #wrapper CSS snippet above is correctly referenced by the DIV in my view?

Thanks!!

Solution

  • You can reference the CSS classes in your view the same way you would in a normal HTML page, same with the javascript.

    Using headScript() and headLink() helpers are just aids to append or prepend files that you want included.

    For example, in my layout script, I prepend a number of css and javascript files that are used EVERYWHERE in my site, and in the tag in my layout, I echo headLink() and headScript(), but this gives me the ability to add additional css and javascript files from individual views that may require additional code. By appending extra files from my view, when my layout echoes headScript and headLink, I get the additional files included that I added from my views.

    They are just helpers, but they don't change the way you call normal javascript code, or reference CSS.

    So you can still use anywhere in your views if you included the css files that contained those classes.

    Here is a snippet from my layout script:

    <?php echo $this->doctype() ?>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<?php echo $this->headTitle() ?>

<?php 
$this->headLink()
     ->prependStylesheet($this->baseUrl('css/master.css'))
     ->prependStylesheet($this->baseUrl('css/application.css'));

echo $this->headLink();
?>

<?php
$this->headScript()
     ->prependFile($this->baseUrl('js/prototype.js'), 'text/javascript');
echo $this->headScript();
?>
</head>

    Then from another view script that needs a special javascript and css file, I add

    <?php
$this->headScript->appendFile($this->baseUrl('js/prototip.js'), 'text/javascript');
$this->headLink->appendStylesheet($this->baseUrl('css/prototip.js'));
?>

    Now my layout has those additional files. Once the layout and views are rendered, I end up with

    <!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" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Site Title</title>
<link href="/css/application.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/master.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/prototip.css" media="screen" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/prototip.js"></script>
</head>

    They don't at all change how html and javascript works within your browser.