PEAR::HTML_QuickForm and custom templates 1

[Stretchwickster]

Hi there,

I've recently been getting to grips with HTML_QuickForm and have the basics sorted. What I'm looking to do is sneak in an anchor tag to appear immediately to the right of an input tag of type "file".

Currently, I use the following code to add the input tag to the form:

$form->addElement('file','pre-image-upload1','Upload pre-collection image:','class="image-upload" id="image-upload1"');

I'm using the following element template:

$renderer->setElementTemplate('
    <tr valign="top">
      <td class="sample-label">
      {label}
      </td>
      <td class="sample-field">
      <!-- BEGIN error --><span class="sample-error">{error}</span><br><!-- END error -->
      {element}
      <!-- BEGIN required --><span class="sample-required">*</span><!-- END required -->
      </td>
    </tr>');

The above template works nicely for all but a few of the elements of my form. However, because the template wraps a table row around the input tag, I cannot insert the anchor tag where I want to. Ideally, I would like to be able to use a different element template just for a few items of the form e.g.

$renderer->setElementTemplate('
    <tr valign="top">
      <td class="sample-label">
      {label}
      </td>
      <td class="sample-field">
      <!-- BEGIN error --><span class="sample-error">{error}</span><br><!-- END error -->
      {element}[COLOR=red]{anchorTagGoesHere}[/color]
      <!-- BEGIN required --><span class="sample-required">*</span><!-- END required -->
      </td>
    </tr>');

How would I go about achieving this?

By the way, in a css file I have made the input tag an inline element so that a line break won't exist between the input and anchor tags.

Your advice would be much appreciated!

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[jpadie]

try using the new tableless renderer for a start.

http://pear.php.net/search.php?q=html+quickform+renderer+tableless

what anchor tag do you actually want to insert? can you give an example of the resultant html you expect?

 

[Stretchwickster]

Thanks for your response jpadie.

The following was the resultant html I was hoping to produce:

<tr valign="top">
  <td class="sample-label">
    Upload pre-collection image:
  </td>
  <td class="sample-field">
    <input class="image-upload" id="image-upload1" name="pre-image-upload1" type="file" />
    [COLOR=red]<a id="remove-upload1" href="javascript:removeControl('remove-upload1')">remove</a>[/color]
  </td>
</tr>

I've been doing a bit of reading and have seen the Smarty Template Engine mentioned, it seems like overkill for this particular problem, but in terms of customising the layout of the form further down the line would you recommend this approach or should I just read up on the tableless renderer?

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[jpadie]

no no! it's really easy to customise the element template. I prefer not using tabular forms hence the pointer to the tableless renderer.

however, what you are trying to do is not something achievable by customising the template as the renderer does not have access to the id of the element. You either need to
(a) write an explicit extension to the input type=file class or
(b) (i think better) would be to write a custom element class for the element you are talking about.
(c) (best) build an element group and attach that instead.

for solution (c) I have posted some code below:

<?
$counter = 0;
$num_image_upload_boxes = 5;

for ($i=0; $i<$num_image_upload_boxes; $i++){
	$element = array();
	$element[] = &HTML_QuickForm::createElement(	"file",	//element type
													"pre-image-upload[$counter]", //element name
													"", //element label
													array (		"id"=>"image-upload".$counter,
																"class"=>"image-upload")
												);
	$element[] = &HTML_QuickForm::createElement(	"link",
													"remove_upload_link[$counter]",
													"",
													"javascript:removeControl('remove-upload".$counter."')",
													"remove",
													array (		"id"=>"remove-upload".$counter,
																"class"=>"remove-upload-link")
												);
													
	$form->addGroup($element, "f_upload".$counter, "Upload pre-collection image", "&nbsp;"); 
	$counter = $counter + 1;
}
?>

 

[Stretchwickster]

Many thanks jpadie - that is exactly what I was trying to achieve.

For custom positioning of form elements, would you recommend just utilising element grouping or would you advocate the use of the Smarty engine for that? Or should I steer clear of the Smarty engine altogether?

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[jpadie]

i've never needed to use smarty and so have not used its renderer in quickform.

for custom positioning, i'd almost certainly use a tableless renderer and css. if i needed more than that i'd either go for element groups (but they can complicate validation rules) or for a custom element template.

i've also noticed that in the code above you don't need a counter as you can use $i instead.

 

[Stretchwickster]

i've also noticed that in the code above you don't need a counter as you can use $i instead.

Thanks for pointing that out. I had already made that correction, but didn't want to pick holes in what was an excellent solution!

I've tried installing the tableless renderer but it keeps failing:

Failed to download pear/HTML_QuickForm_Renderer_Tableless within preferred state "stable", latest release is version 0.3.4, stability "alpha", use "channel://pear.php.net/HTML_QuickForm_Renderer_Tableless-0.3.4" to install
Cannot initialize 'HTML_QuickForm_Renderer_Tableless', invalid or missing package file

install failed

I can confirm that I have the pre-requisite packages (and versions) installed - so I'm not really sure why that's happening!

I'm gonna give Smarty a try and see if that's any good.

Thanks for all your input jpadie!

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[jpadie]

smarty is a very steep learning curve...

try this at a command prompt or terminal

pear channel-update pear.php.net
pear config-set preferred_state alpha
pear install --alldeps HTML_Quickform_Renderer_Tableless
pear install --alldeps HTML_QuickForm_DHTMLRulesTableless

once you have these you might consider this further tweak that i use to make the html a bit more malleable

	$html = <<<STR
<div class="formrow">
	<span class="formlabel">
		<!-- BEGIN required --><span style="color: #ff0000">*</span><!-- END required -->
		{label}
	</span><br class="form_inlinebreak" />
	<span class="formelement<!-- BEGIN error -->_error<!-- END error -->">
		<!-- BEGIN error -->
		<span class="error">{error}</span>
		<br />
		<!-- END error -->
		{element}
	</span>	
</div>

STR;
$rn = <<<EOL
<div class="formrow">
	<span class="formlabel">
		<span style="font-size:80%; color:#ff0000;">
		*
		</span>
		<span style="font-size:80%;">
		 denotes required field
		</span>
	</span>
</div>

EOL;

$form = new HTML_QuickForm_DHTMLRulesTableless('form1', 'post', $_SERVER['PHP_SELF'],"",NULL,TRUE); 
$renderer =& new HTML_QuickForm_Renderer_Tableless();	
	$renderer->_elementTemplate = $html;
	$renderer->setOpenFieldsetTemplate("\n\t<fieldset{id} class=\"formfieldset\">");
$form->setrequirednote($rn);

and some css to go with it

form {
	padding:		0; 
	margin:			0;
	
}
.formrow{
	clear:			both;
}
.formlabel{
	width:			30%;
	text-align:		right;
	float:			left;
	font-size:		0.8em;
}
.formelement{
	width:			65%;
	text-align:		left;
	float:			right;
}
.formelement input, .formelement select, .formelement textarea {
	font-size:		0.8em;
}
.formfieldset{
	width:			70%;
	margin-left:	5%;
	border:0;
}
.formfieldset:after, .formrow:after, #mastercontent:after {
    content: 		" "; 
    display: 		block; 
    height: 		0px; 
    clear: 			both; 
    visibility: 	hidden;
}

 

[Stretchwickster]

Many thanks jpadie. I don't have access to the command line prompt, so I downloaded the packages you recommended, unzipped them and uploaded them to the appropriate places and all is working nicely now. I really like the DHTML package - very nice indeed. Cheers for all the assistance.

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[jpadie]

my pleasure.

if you don't have access to a shell you might consider using gopear. go-pear.org it's a bit slow but there is a value to using a centralised installer for pear packages.

 

[Stretchwickster]

Yes, it was go-pear that was failing to install the tableless renderer, hence having to revert to a manual upload. Go-pear works very nicely for installing all the other packages I'm using for my current project.

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[jpadie]

just change the package preference to alpha in the config panel.

 

[Stretchwickster]

Cheers jpadie.

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096