How to format the generated HTML by ZF ?

jameel.j2ee · #1 (**permalink**) 10-12-2008, 12:47 AM

Hello everybody

Pls forgive me if this question has already been answered. I searched the forum, but could not find what exactly I am looking for. I am very new to Zend Framework.

I am developing a complicated registration screen which has almost all kind of html controls in it (e.g text box, text area, drop downs , radio buttons,etc etc.)

I have created a SignupForm class by subclassing Zend_Form.

After that I instantiated various ZF's library classes which are responsible for creating such controls e.g Zend_Form_Element_Text, Zend_Form_Element_Submit etc.

Sample code is as follows :

PHP Code:


			
$profileId = new Zend_Form_Element_Text('profileId');

$profileId->setLabel('Profile ID')

->setRequired(true)

->addValidator('NotEmpty');

So when this text box is rendered on the browser, it is not exactly how I want it to be from the UI perspective.

Screenshot of such a text box (when it has been rendered on the browser) is attached:

Now what I want is the text Profile ID (text in the image) to be aligned with the text box. A little search with generated html (after the control has been rendered shows that Zend Frramework has used <dt> and <dd>. code snippet of the generated html is show below :

HTML Code:

..
..
..
   <tr>
        <td>Profile ID</td>
        <td><dt><label for="profileId" class="required">Profile ID</label></dt>
  </tr>
<dd>
..
..
..

While creating the ZF form (i.e SignupForm.php), I never used <dd> or <dt> tags. Apparently it is ZF who is generating such tags.

Question: How can I get rid of these tags or in otherwords how can I format my UI design in such a way that the text (i.e html control label is aligned with text box or any other control for that matter). I guess decorators are the answer for this. Any sample tutorial /url into this would be great. Anybody who has already resolved such kind of issues can share their exp.

Apart from this, in my registration form, I need to capture User's date of birth.
Question : Does ZF provides any Date of Birth control OOB (out-of-the-box)? If not, then is dropdowns (placing 3 dropdowns side by side, for day, month and year) the only way to create date of birth field?

Sorry for the long post.

Any help would highly be appreciated

Thanks
Jameel :-)

jameel.j2ee · #2 (**permalink**) 10-12-2008, 04:46 AM

Can we write custom decoder which prints html as follows (when a text box is rendered on the browser):

<input type="text" name="firstname" id="firstname" value="">

I just DO NOT want this piece of code to be embedded into any tag

If above is possible, then I can create the HTML page (.phtml rather as per my design) and the I can use ViewScript as follows :

Code:

$this->addElements(array($profileId, $email, $confirmEmail, $password, $confirmpassword, $submit));
            
//Set a html decorator form// 
$this->setDecorators ( array (array ('ViewScript', array ('viewScript' => 'signup/index.phtml' ) ) ) );

and then individual form elements can be reffered in .phtml (index.phtml in my case ) as shown below :

HTML Code:

<form  
    action="<?= $this->signupForm ->getAction() ?>" 
    method="<?= $this->signupForm->getMethod() ?>" 
    id="<?= $this->signupForm->getName() ?>"> 
<table border="1" width="100%"> 

    <tr>
        <td>Profile ID</td>
        <td><?= $this->signupForm->profileId ?> </td>
    </tr>    
        
    <tr>
        <td>Email</td>
        <td><?= $this->signupForm->email ?></td>
    </tr>
    
    <tr>
        <td>Confirm Email</td>
        <td><?= $this->signupForm->confirmEmail ?></td>
    </tr>


    <tr>
        <td>Password</td>
        <td><?= $this->signupForm->password ?></td>
    </tr>
  
      <tr>
        <td>Confirm Password</td>
        <td><?= $this->signupForm->confirmpassword ?></td>
    </tr>      
         
    <tr>    
        <td colspan="2"><?= $this->signupForm->submit ?></td>        
    </tr>    
</table>
</form>

So by above design, we can get the HTML page design the way we ideally want it to be without unnecessary markup.

Does this sound logical? Anybody?

Thanks
Jameel

Jobinma · #3 (**permalink**) 11-24-2008, 07:25 PM

To me, this sounds logical as I would like to do exactly the samething !!

There is surely an answer to this question... I hope.

Jobinma · #4 (**permalink**) 11-24-2008, 10:11 PM

Almost got it but there is a problem with the submit button :

My Form :

PHP Code:


			
<?php



class Form_Login extends Zend_Form {



    public function init() {

        

        // Action & Method

        $this->setAction("auth")->setMethod("post");

        

        

        // Fields

        $username = new Zend_Form_Element_Text('username');

        $password = new Zend_Form_Element_Password('password');

        $submit = new Zend_Form_Element_Submit('submit');

        

        // Add fields to form

        $this->addElements(array($username, $password, $submit));



        // Display *hack*     

        foreach ($this->getElements() as $e) {

            $e->addDecorator("HtmlTag", array("tag" => "span"));

            $e->removeDecorator("Label");

        }



    }



}



?>

My view :

PHP Code:


			
        <form name="frm_login" action="auth" method="post">

            Username:<?= $this->loginform->username ?>

            Password:<?= $this->loginform->password ?>

            <?= $this->loginform->submit ?>

        </form>

The text fields are displayed correctly but the tags are still present in the submit button... Probably a bug.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode