Zendcasts Forum

A community of developers who work with the Zend Framework and other enterprise PHP technologies

You are not logged in.

#1 2010-08-30 16:54:16

jc
Member
Registered: 2009-08-13
Posts: 11

dynamic css in view helper

It's been a while since I've posted here.  Thought I'd share an approach that I am using for css in the view helper.  If you've read any of my other posts you know that I use view helpers for form layout in the action view.  One of these days I may try to figure out how to use decorators, till then I find this approach easier.

For this example my action view script might look something like:

[code=php]
<div style="position:center;">
<h2><?php echo $this->title ?></h2>
</div>  <!-- end div: title_container -->

<?php  //echo $this->form;die; ?>
<?php  echo $this->Addexptform1( $this->form, 'add' ); ?>
<hr />
[/code]

I could accomplish the desired form layout design in the view script, but putting it in a view helper makes is easier to use the same form in other view scripts.  When adding or editing a form, two different actions and view scripts, the same form layout (view helper) can be used.  So where the above view script might be used to add a new experiment, The following might be used to edit the information

[code=php]
<div style="position:center;">
<h2><?php echo $this->title ?></h2>
</div>  <!-- end div: title_container -->

<?php  //echo $this->form;die; ?>
<?php  echo $this->Addexptform1( $this->form, 'edit' ); ?>
<hr />
[/code]

... the only difference is the value for the second view helper argument.  The first view script does not display the end date field on the displayed form, the second view script does.


[code=php]
# filename: Addexptform1.php

class Main_View_Helper_Addexptform1 extends Zend_View_Helper_Abstract
{
    /**
     * Description: accepts form object of type Main_Form_ExptForm and returns form html text
     * @param $form
     * @return text
     */
    public function Addexptform1( Main_Form_ExptForm $form, $formDisplayMode='default' )
    {

        switch ($formDisplayMode) {
            case 'add':   //
                $strBackgroundColor = 'background: #DDC0C0;';
                $strVisibilityHidden = 'visibility: hidden;';
                break;
            case 'edit':  //
                $strBackgroundColor = 'background: #C0DDC0;';
                $strVisibilityHidden = '';
                break;
            case 'view':  //
                $strBackgroundColor = 'background: #C0C0DD;';
                $strVisibilityHidden = '';
                break;
            default:
                break;
        }
       
   
$strBbColor='#0000ff';  //example of dynamic changes of values.
$this->view->headStyle()->captureStart("APPEND");
echo<<<_CSS_
table.nospacing {
background: {$strBbColor};
border-collapse: collapse;
border: 0px;
margin: 0px;
padding: 0px;
border: solid black 1px;
}
td.nospacing {
border-collapse: collapse;
border: 0px;
margin: 0px;
padding: 0px;
}
div.floatleft {
float: left;
}

div.floatleftwrap {
clear: both;
float: left;
width: 100%;
padding-left: 20px;
{$strBackgroundColor}
padding-top: 5px;
padding-right: 0px;
}
div.floatleftlabel {
float: left;
padding-left: 20px;
color: #000000;
align-vertical: middle;
}
div.floatleftfield {
float: left;
padding-left: 4px;
color: #00ff00;
align-vertical: top;
}
div.floatleftlabelhide {
float: left;
padding-left: 20px;
color: #000000;
align-vertical: middle;
{$strVisibilityHidden}
}
div.floatleftfieldhide {
float: left;
padding-left: 4px;
color: #00ff00;
align-vertical: top;
{$strVisibilityHidden}
}
thisVHsubmit {
color: #00ff00;
}
_CSS_;
$this->view->headStyle()->captureEnd();
       
       
       
$content=<<<_HTML_
<!-- START: Form Element -->

<form name="{$form->getAttrib('name')}"
     class="{$form->getAttrib('class')}"
        id="{$form->getAttrib('id')}"
   enctype="{$form->getAttrib('enctype')}"
    action="{$form->getAttrib('action')}"
    method="{$form->getAttrib('method')}" >


   
<div class="floatleftwrap">
  <div class="floatleftlabel">{$form->getElement("expt_number")->getLabel()} :</div>
  <div class="floatleftfield">{$form->getElement("expt_number")}</div>
</div>

<div class="floatleftwrap">
  <div class="floatleftlabel">{$form->getElement("title")->getLabel()} :</div>
  <div class="floatleftfield">{$form->getElement("title")}</div>
</div>


<div class="floatleftwrap">
  <div class="floatleftlabel">{$form->getElement('start_date')->getLabel()} :</div>
  <div class="floatleftfield">{$form->getElement("start_date")}</div>

  <div class="floatleftlabelhide">{$form->getElement("end_date")->getLabel()} :</div>
  <div class="floatleftfieldhide">{$form->getElement("end_date")}</div>
</div>

<div class="floatleftwrap">
  <div class="floatleftlabel">{$form->getElement("protocol")->getLabel()} :</div>
  <div class="floatleftfield">{$form->getElement("protocol")}</div>
</div>

<div class="floatleftwrap">
  <div class="floatleftlabel">{$form->getElement('num_animals_m')->getLabel()} :</div>
  <div class="floatleftfield">{$form->getElement("num_animals_m")}</div>

  <div class="floatleftlabel">{$form->getElement("num_animals_f")->getLabel()} :</div>
  <div class="floatleftfield">{$form->getElement("num_animals_f")}</div>
</div>

<div class="floatleftwrap">
  <div class="floatleftlabel">{$form->getElement("remarks")->getLabel()} :</div>
  <div class="floatleftfield">{$form->getElement("remarks")}</div>
</div>
_HTML_;

if ($form->getElement("id")) {
    $content.=<<<_HTML_
{$form->getElement("id")}
_HTML_;
}

$content.=<<<_HTML_
<div class="floatleftwrap">
  <div class="thisVHsubmit">{$form->getElement("submit")}</div>
</div>
</form><!-- end form -->
_HTML_;
        return $content;
    }

   /*
    * NOTES: related to this page...
    *      {$form->getElement("cmc_id")}
    * and  {$form->cmc_id->renderViewHelper()}
    * render to identical html code. The former may be a more direct route.
    * reference:  http://weierophinney.net/matthew/archiv … ually.html
    * for example of use of later method.
    */

} // end class.
[/code]


One thing I am doing in this example is assigning css code to variables in a case switch.  When I create a new experiment I want to show the start date field, but not the end date field in the form.  Rather than design a separate form, I can pass a string as a view helper argument which sets the value for $formDisplayMode in the view helper.  Based on the value of this variable, certain css code is assigned to variables.  These  variables are then interpreted inside the css area which follows.

Another thing I do in this example is to use $this->view->headStyle()->captureStart("APPEND") to define the css for this form.  The benefit of this approach is that the css is contained within the same script that it is used rather than have to write/maintain css for this form in a separate file.  For the layout to use this css, inside the layout script you need to echo $this->headStyle(); see following code.

[code=php]
// code snippet from layout.phtml script
    <?php
      $this->headLink()->appendStylesheet($baseURL.'/css/blueprint_27-4x24/screen.css', 'screen, projection')
                       ->appendStylesheet($baseURL.'/css/blueprint_27-4x24/ie.css', 'screen, projection', 'IE')
                       ->appendStylesheet($baseURL.'/css/blueprint_27-4x24/print.css', 'print')
                       ->appendStylesheet($baseURL.'/css/blueprint_27-4x24/uu_custom.css');

      if ( PAGE_TIMEOUT && !$this->ignorePageTimeout ) {  // css scripts specific for page timeout
         $this->headLink()->appendStylesheet($baseURL.'/css/jqueryui/smoothness/jquery-ui-1.7.2.custom.css');   
      }
   
      echo $this->headLink();
      echo $this->headStyle();
    ?>

[/code]

Well,  I hope that someone finds this approach helpful in their own coding.  Maybe it has sparked some ideas for more ingenious code.

jim

Offline

Board footer

Powered by FluxBB