Optimizing Zend Layout

Question

i am using the layouts in zend framework. as if now it looks ugly with lots and lots of code. i would like to know with reference to below code. is it possible for me to make give it a cleaner approach. here is my code.

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
        <title>Administrative Panel</title>
        <link href="/css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="/js/jquery.min.js"></script>
        <script type="text/javascript" src="/js/plugins/spinner/ui.spinner.js"></script>
        <script type="text/javascript" src="/js/plugins/spinner/jquery.mousewheel.js"></script>
        <script type="text/javascript" src="/js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="/js/plugins/forms/uniform.js"></script>
        <script type="text/javascript" src="/js/custom.js"></script>
    </head>
    <body>
        <!-- Left side content -->
        <div id="leftSide">
            <div class="logo"><a href="<?php echo $this->url(array(), 'admin-dashboard'); ?>"><img src="/images/logo.png" alt="" /></a></div>
            <!-- Divider Decorator -->
            <div class="sidebarSep mt0"></div>
            <!-- Search widget -->
            <form action="" class="sidebarSearch">
                <input type="text" name="search" placeholder="search…" id="ac" />
                <input type="submit" value="" />
            </form>
            <!-- Divider Decorator -->
            <div class="sidebarSep"></div>
            <!-- Statistics -->
            <div class="numStats">
                <ul>
                    <li><?php echo $this->itemCount; ?><span>Items</span></li>
                    <li><?php echo $this->categoryCount; ?><span>Categories</span></li>
                    <li class="last"><?php echo $this->userCount; ?><span>Users</span></li>
                </ul>
                <div class="clear"></div>
            </div>
            <!-- Divicer Decorator -->
            <div class="sidebarSep"></div>
            <!-- Sidebar buttons -->
            <a href="#" title="" class="sButton sBlue"><img src="/images/icons/sPlus.png" alt="" /><span>Add new item</span></a>
            <a href="#" title="" class="sButton sRed" style="margin-top: 12px;"><img src="/images/icons/sPlus.png" alt="" /><span>Add new user</span></a>
            <!-- Divider Decorator -->
            <div class="sidebarSep"></div>
            <!-- Left navigation -->
            <?php $this->navigation()->menu()->setPartial(array('partials/sidebar.phtml', 'admin')); echo $this->navigation()->menu()->render(); ?>
        </div>
        <!-- Right side -->
        <div id="rightSide">
            <!-- Top fixed navigation -->
            <?php echo $this->render('topnav.phtml') ?>
            <!-- Title area --> 
            <div class="titleArea"></div>
            <!-- Action Navigation -->
            <?php echo $this->placeholder('action-navigation'); ?>
            <!-- Main content wrapper -->
            <div class="wrapper">
                <?php echo $this->layout()->content ?>
            </div>
            <!-- Footer line -->
            <?php echo $this->render('footer.phtml') ?>
        </div>
        <div class="clear"></div>
    </body>
</html>

i have seen many times, most people uses some helper methods to clean the layout file. from the very own example of zend framework

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <?php echo $this->headTitle() ?>
    <?php echo $this->headScript() ?>
    <?php echo $this->headStyle() ?>
</head>
<body>
    <?php echo $this->render('header.phtml') ?>

    <div id="nav"><?php echo $this->placeholder('nav') ?></div>

    <div id="content"><?php echo $this->layout()->content ?></div>

    <?php echo $this->render('footer.phtml') ?>
</body>
</html>

they uses some helper methods like

$this->docType()
$this->headTitle()
$this->headScript()
$this->headStyle()

this approach looks lot more cleaner to me. since they haven't said much about this in the same documentation. i was wondering what is the exact purpose of that helper methods?. and how can i make use of it in my layout file?

Liyali · Accepted Answer · 2012-04-12 16:02:23Z

4

You will find everything you need about View helpers and Placeholders in the manual, especially in this section about concrete implementation of Placeholders.

Refer to this section of the manual to create your own view helper. A custom view helpers will basically allow you to render some content in HTML using just echo $this->myViewHelperName(); in your layout or any view where you need this content.

edited Apr 12, 2012 at 16:02

answered Apr 12, 2012 at 14:53

Liyali

5,6832 gold badges29 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

aporat · Accepted Answer · 2012-04-12 15:13:36Z

The most useful layout view helpers I'm using are the helpers for managing the styles & javascript assets:

$this->headScript()
$this->headStyle()

Basically these helpers allow you to mange your stylesheets & javascript assets from any view or layout by calling:

$this->headLink()->prependStylesheet($this->baseUrl('/media/css/shared.css'));

or

$this->headScript()->prependFile('https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js');

It's really useful if you have a specific stylesheet for every module in your application. You can call the prependStylesheet / prependFile from a different view, and the final echo call in the layout will print the files that you loaded.

To print out the html head tags, use the same code you have in the example layout:

<?php echo $this->headScript() ?>
<?php echo $this->headStyle() ?>

Note there are there's a function that prepend the stylesheet and function that append the stylesheet:

$this->headLink()->prependStylesheet($this->baseUrl('/media/css/shared.css'));
$this->headLink()->appendStylesheet($this->baseUrl('/media/css/shared.css'));

The order you load the stylesheet will determine the order of the assets. This is especially important, as usually you need to load the jquery javascript asset before any other plugins.

I agree, ZF's manual barely mention any usage of these helpers. (http://framework.zend.com/manual/en/zend.view.helpers.html#zend.view.helpers.initial.headstyle)

Collectives™ on Stack Overflow

Optimizing Zend Layout

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related