You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Adam Zimowski <zi...@gmail.com> on 2008/03/22 19:59:23 UTC

[T5] Missing JavaScript for FormFragment, bug?

Per documentation, FormFragment decides if its content should be
submitted based on the hidden field [formfragmentname]:hidden:

// this is the relevant code from FormFragment source: void beginRender(..)
        writer.element("input",

                       "type", "hidden",

                       "name", _controlName,

                       "id", _clientId + ":hidden",

                       "value", String.valueOf(_visible));
        writer.end();


However, that field being generated at render time is fairly static,
which defeats the very purpose of dynamic behavior provided by
Tapestry.ElementEffect sidedown/slideup functions. The problem is that
when the silide function is invoked on the client (triggered by click
on the checkbox), that inherently means that FormFragment should be
submitted, but it won't be if the hidden field was generated with
false value.

The solution to this problem should be Tapestry dynamically changing
hidden field's value to true/false based on the client side state of
the checkbox tied to the FormFragment. For those who need a
workaround, I can share mine. In onclick of submit button one can
execute the following function:

function setupFragment(fragment, checkbox) {
 var checked = document.getElementById(checkbox).value;
 var advanced = (checked == 'on');
 document.getElementById(fragment + ':hidden').value=advanced;
}


<input t:id="submitButton"
onclick="setupFragment('advancedFragment','advancedCheckbox');"
type="submit" t:type="submit" value="Submit"/>

I believe this should be one of those "plumbing" tasks that Tapestry
should do for us. Should this be a JIRA improvement, or am I missing
something?

-adam

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: [T5] Missing JavaScript for FormFragment, bug?

Posted by Howard Lewis Ship <hl...@gmail.com>.
The hidden value is updated on form submit, after validation. It is
based on deepVisible(), meaning the element formfragment's <div> is
visible, and its container's are all visible.

On Sat, Mar 22, 2008 at 1:04 PM, Adam Zimowski <zi...@gmail.com> wrote:
> It is in tapestry.js ? I was looking for it because for me (5.0.11) it
>  wasn't dynamicall setting the hidden value upon click on the checkbox.
>
>  <html t:type="website/selfhelp/Layout"
>  xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
>
>  <style>
>  div.w-label, div.w-tlabel {
>   width: 135px;
>   float: left;
>  }
>  div.w-tlabel {
>   position: relative;
>   top: 7px;
>  }
>  div.w-row {
>   margin-bottom: 5px;
>  }
>  </style>
>
>  <div class="w-title">Create New Block</div>
>
>  <t:form t:id="addBlock" clientValidation="false">
>
>  <div class="border">
>  <div class="borderSpacer">
>
>  <t:errors/>
>
>  <div class="w-row">
>  <div class="w-tlabel">Image:</div>
>  <input t:id="image" type="text" t:type="textfield"
>  t:value="block.imgSrc" t:validate="required"/>
>  </div>
>
>  <div class="w-row">
>  <div class="w-tlabel">Name:</div>
>  <input t:id="name" type="text" t:type="textfield" t:value="block.note"
>  t:validate="required"/>
>  </div>
>  <p/>
>  <div class="w-row">
>  <div class="w-label">Advanced Options:</div>
>  <input t:id="advancedCheck" type="checkbox" t:type="checkbox"
>  t:mixins="triggerfragment" t:fragment="advancedSection"
>  value="advanced"/>
>  </div>
>
>  <t:formfragment t:id="advancedSection" t:visible="advanced">
>
>  <div class="w-row">
>  <div class="w-tlabel">Image ID:</div>
>  <input t:id="imageId" type="text" t:type="textfield" t:value="block.imgId"/>
>  </div>
>
>  <div class="w-row">
>  <div class="w-tlabel">Image Name:</div>
>  <input t:id="imageName" type="text" t:type="textfield" t:value="block.imgName"/>
>  </div>
>
>  <div class="w-row">
>  <div class="w-tlabel">Image Text:</div>
>  <input t:id="imageText" type="text" t:type="textfield" t:value="block.imgAlt"/>
>  </div>
>
>  <div class="w-row">
>  <div class="w-tlabel">Image CSS Class:</div>
>  <input t:id="imageCssClass" type="text" t:type="textfield"
>  t:value="block.imgClass"/>
>  </div>
>
>  <div class="w-row">
>  <div class="w-tlabel">Image Width:</div>
>  <input t:id="imageWidth" type="text" t:type="textfield"
>  t:value="block.imgWidth" size="5" t:validate="required,min=50"/>
>  </div>
>
>  <div class="w-row">
>  <div class="w-tlabel">Image Height:</div>
>  <input t:id="imageHeight" type="text" t:type="textfield"
>  t:value="block.imgHeight" size="5" t:validate="required,min=15"/>
>  </div>
>
>  </t:formfragment>
>  <p/>
>  <div style="float:left;margin-right:10px;">
>   <input t:id="submitButton"
>  onclick="setupFragment('advancedSection','advancedCheck');"
>
> type="submit" t:type="submit" value="Submit"/>
>  </div>
>   <input t:id="resetButton" type="submit" t:type="submit" value="Reset"/>
>
>   </div>
>   </div>
>
>  </t:form>
>  </html>
>
>  package com.kkamerica.workbench.pages.website.selfhelp;
>
>  import org.apache.tapestry.Asset;
>  import org.apache.tapestry.PageRenderSupport;
>  import org.apache.tapestry.annotations.BeginRender;
>  import org.apache.tapestry.annotations.Component;
>  import org.apache.tapestry.annotations.Environmental;
>  import org.apache.tapestry.annotations.OnEvent;
>  import org.apache.tapestry.annotations.Path;
>  import org.apache.tapestry.annotations.Persist;
>  import org.apache.tapestry.annotations.Service;
>  import org.apache.tapestry.corelib.components.Form;
>  import org.apache.tapestry.ioc.annotations.Inject;
>  import org.slf4j.Logger;
>  import org.zimowski.azdao.wrapper.DaoVoidResult;
>
>  import com.kkamerica.workbench.apps.website.selfhelp.beans.SelfHelpBlockBean;
>  import com.kkamerica.workbench.apps.website.selfhelp.dao.SelfHelpBlockDao;
>
>  public class AddBlock {
>
>         @Inject
>         private Logger _log;
>
>         @Inject
>         @Path("context:js/formutils.js")
>         private Asset _formUtilsJs;
>
>         @Environmental
>         private PageRenderSupport _pageRenderSupport;
>
>         @Inject
>         @Service("selfHelpBlockDao")
>         private SelfHelpBlockDao _selfHelpBlockDao;
>
>         @Component(id="addBlock")
>         private Form _form;
>
>         @Persist
>         private SelfHelpBlockBean _block;
>
>         @Persist
>         private boolean _advanced;
>
>         @Persist
>         private boolean _visible;
>
>
>         @BeginRender
>         void pageSetup() {
>                 if(_block == null) {
>                         _block = new SelfHelpBlockBean();
>                 }
>                 _pageRenderSupport.addScriptLink(_formUtilsJs);
>         }
>
>         @OnEvent("activate")
>         void pageActivated() {
>                 _log.debug(new Integer(_block.hashCode()).toString());
>         }
>
>         @OnEvent(value="selected",component="resetButton")
>         void resetForm() {
>                 _block = new SelfHelpBlockBean();
>                 _advanced = false;
>                 _form.clearErrors();
>         }
>
>         @OnEvent(value="success",component="submitButton")
>         Class createBlock() {
>                 DaoVoidResult result = _selfHelpBlockDao.add(_block);
>                 if(!result.isInError()) resetForm();
>                 return Blocks.class;
>         }
>
>         public SelfHelpBlockBean getBlock() {
>                 return _block;
>         }
>
>         public boolean isAdvanced() {
>                 return _advanced;
>         }
>
>         public void setAdvanced(boolean aAdvanced) {
>                 _advanced = aAdvanced;
>         }
>
>         public boolean isVisible() {
>                 return _visible;
>         }
>
>         public void setVisible(boolean aVisible) {
>                 _visible = aVisible;
>
>
>         }
>  }
>
>  On Sat, Mar 22, 2008 at 2:56 PM, Howard Lewis Ship <hl...@gmail.com> wrote:
>  > The code is already in place to set the hidden field to the correct
>  >  value when the form is submitted.
>  >
>  >
>  >
>  >  On Sat, Mar 22, 2008 at 11:59 AM, Adam Zimowski <zi...@gmail.com> wrote:
>  >  > Per documentation, FormFragment decides if its content should be
>  >  >  submitted based on the hidden field [formfragmentname]:hidden:
>  >  >
>  >  >  // this is the relevant code from FormFragment source: void beginRender(..)
>  >  >         writer.element("input",
>  >  >
>  >  >                        "type", "hidden",
>  >  >
>  >  >                        "name", _controlName,
>  >  >
>  >  >                        "id", _clientId + ":hidden",
>  >  >
>  >  >                        "value", String.valueOf(_visible));
>  >  >         writer.end();
>  >  >
>  >  >
>  >  >  However, that field being generated at render time is fairly static,
>  >  >  which defeats the very purpose of dynamic behavior provided by
>  >  >  Tapestry.ElementEffect sidedown/slideup functions. The problem is that
>  >  >  when the silide function is invoked on the client (triggered by click
>  >  >  on the checkbox), that inherently means that FormFragment should be
>  >  >  submitted, but it won't be if the hidden field was generated with
>  >  >  false value.
>  >  >
>  >  >  The solution to this problem should be Tapestry dynamically changing
>  >  >  hidden field's value to true/false based on the client side state of
>  >  >  the checkbox tied to the FormFragment. For those who need a
>  >  >  workaround, I can share mine. In onclick of submit button one can
>  >  >  execute the following function:
>  >  >
>  >  >  function setupFragment(fragment, checkbox) {
>  >  >   var checked = document.getElementById(checkbox).value;
>  >  >   var advanced = (checked == 'on');
>  >  >   document.getElementById(fragment + ':hidden').value=advanced;
>  >  >  }
>  >  >
>  >  >
>  >  >  <input t:id="submitButton"
>  >  >  onclick="setupFragment('advancedFragment','advancedCheckbox');"
>  >  >  type="submit" t:type="submit" value="Submit"/>
>  >  >
>  >  >  I believe this should be one of those "plumbing" tasks that Tapestry
>  >  >  should do for us. Should this be a JIRA improvement, or am I missing
>  >  >  something?
>  >  >
>  >  >  -adam
>  >  >
>  >  >  ---------------------------------------------------------------------
>  >  >  To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>  >  >  For additional commands, e-mail: users-help@tapestry.apache.org
>  >  >
>  >  >
>  >
>  >
>  >
>  >  --
>  >  Howard M. Lewis Ship
>  >
>  >  Creator Apache Tapestry and Apache HiveMind
>  >
>  >  ---------------------------------------------------------------------
>  >  To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>  >  For additional commands, e-mail: users-help@tapestry.apache.org
>  >
>  >
>
>  ---------------------------------------------------------------------
>  To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>  For additional commands, e-mail: users-help@tapestry.apache.org
>
>



-- 
Howard M. Lewis Ship

Creator Apache Tapestry and Apache HiveMind

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: [T5] Missing JavaScript for FormFragment, bug?

Posted by Adam Zimowski <zi...@gmail.com>.
It is in tapestry.js ? I was looking for it because for me (5.0.11) it
wasn't dynamicall setting the hidden value upon click on the checkbox.

<html t:type="website/selfhelp/Layout"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">

<style>
div.w-label, div.w-tlabel {
 width: 135px;
 float: left;
}
div.w-tlabel {
 position: relative;
 top: 7px;
}
div.w-row {
 margin-bottom: 5px;
}
</style>

<div class="w-title">Create New Block</div>

<t:form t:id="addBlock" clientValidation="false">

<div class="border">
<div class="borderSpacer">

<t:errors/>

<div class="w-row">
<div class="w-tlabel">Image:</div>
<input t:id="image" type="text" t:type="textfield"
t:value="block.imgSrc" t:validate="required"/>
</div>

<div class="w-row">
<div class="w-tlabel">Name:</div>
<input t:id="name" type="text" t:type="textfield" t:value="block.note"
t:validate="required"/>
</div>
<p/>
<div class="w-row">
<div class="w-label">Advanced Options:</div>
<input t:id="advancedCheck" type="checkbox" t:type="checkbox"
t:mixins="triggerfragment" t:fragment="advancedSection"
value="advanced"/>
</div>

<t:formfragment t:id="advancedSection" t:visible="advanced">

<div class="w-row">
<div class="w-tlabel">Image ID:</div>
<input t:id="imageId" type="text" t:type="textfield" t:value="block.imgId"/>
</div>

<div class="w-row">
<div class="w-tlabel">Image Name:</div>
<input t:id="imageName" type="text" t:type="textfield" t:value="block.imgName"/>
</div>

<div class="w-row">
<div class="w-tlabel">Image Text:</div>
<input t:id="imageText" type="text" t:type="textfield" t:value="block.imgAlt"/>
</div>

<div class="w-row">
<div class="w-tlabel">Image CSS Class:</div>
<input t:id="imageCssClass" type="text" t:type="textfield"
t:value="block.imgClass"/>
</div>

<div class="w-row">
<div class="w-tlabel">Image Width:</div>
<input t:id="imageWidth" type="text" t:type="textfield"
t:value="block.imgWidth" size="5" t:validate="required,min=50"/>
</div>

<div class="w-row">
<div class="w-tlabel">Image Height:</div>
<input t:id="imageHeight" type="text" t:type="textfield"
t:value="block.imgHeight" size="5" t:validate="required,min=15"/>
</div>

</t:formfragment>
<p/>
<div style="float:left;margin-right:10px;">
 <input t:id="submitButton"
onclick="setupFragment('advancedSection','advancedCheck');"
type="submit" t:type="submit" value="Submit"/>
</div>
 <input t:id="resetButton" type="submit" t:type="submit" value="Reset"/>

 </div>
 </div>

</t:form>
</html>

package com.kkamerica.workbench.pages.website.selfhelp;

import org.apache.tapestry.Asset;
import org.apache.tapestry.PageRenderSupport;
import org.apache.tapestry.annotations.BeginRender;
import org.apache.tapestry.annotations.Component;
import org.apache.tapestry.annotations.Environmental;
import org.apache.tapestry.annotations.OnEvent;
import org.apache.tapestry.annotations.Path;
import org.apache.tapestry.annotations.Persist;
import org.apache.tapestry.annotations.Service;
import org.apache.tapestry.corelib.components.Form;
import org.apache.tapestry.ioc.annotations.Inject;
import org.slf4j.Logger;
import org.zimowski.azdao.wrapper.DaoVoidResult;

import com.kkamerica.workbench.apps.website.selfhelp.beans.SelfHelpBlockBean;
import com.kkamerica.workbench.apps.website.selfhelp.dao.SelfHelpBlockDao;

public class AddBlock {

	@Inject
	private Logger _log;
	
	@Inject
	@Path("context:js/formutils.js")
	private Asset _formUtilsJs;
	
	@Environmental
	private PageRenderSupport _pageRenderSupport;
	
	@Inject
	@Service("selfHelpBlockDao")
	private SelfHelpBlockDao _selfHelpBlockDao;
	
	@Component(id="addBlock")
	private Form _form;
	
	@Persist
	private SelfHelpBlockBean _block;
	
	@Persist
	private boolean _advanced;
	
	@Persist
	private boolean _visible;

	
	@BeginRender
	void pageSetup() {
		if(_block == null) {
			_block = new SelfHelpBlockBean();
		}
		_pageRenderSupport.addScriptLink(_formUtilsJs);
	}
	
	@OnEvent("activate")
	void pageActivated() {
		_log.debug(new Integer(_block.hashCode()).toString());
	}
	
	@OnEvent(value="selected",component="resetButton")
	void resetForm() {
		_block = new SelfHelpBlockBean();
		_advanced = false;
		_form.clearErrors();
	}
	
	@OnEvent(value="success",component="submitButton")
	Class createBlock() {
		DaoVoidResult result = _selfHelpBlockDao.add(_block);
		if(!result.isInError()) resetForm();
		return Blocks.class;
	}
	
	public SelfHelpBlockBean getBlock() {
		return _block;
	}

	public boolean isAdvanced() {
		return _advanced;
	}

	public void setAdvanced(boolean aAdvanced) {
		_advanced = aAdvanced;
	}

	public boolean isVisible() {
		return _visible;
	}

	public void setVisible(boolean aVisible) {
		_visible = aVisible;
	}
}

On Sat, Mar 22, 2008 at 2:56 PM, Howard Lewis Ship <hl...@gmail.com> wrote:
> The code is already in place to set the hidden field to the correct
>  value when the form is submitted.
>
>
>
>  On Sat, Mar 22, 2008 at 11:59 AM, Adam Zimowski <zi...@gmail.com> wrote:
>  > Per documentation, FormFragment decides if its content should be
>  >  submitted based on the hidden field [formfragmentname]:hidden:
>  >
>  >  // this is the relevant code from FormFragment source: void beginRender(..)
>  >         writer.element("input",
>  >
>  >                        "type", "hidden",
>  >
>  >                        "name", _controlName,
>  >
>  >                        "id", _clientId + ":hidden",
>  >
>  >                        "value", String.valueOf(_visible));
>  >         writer.end();
>  >
>  >
>  >  However, that field being generated at render time is fairly static,
>  >  which defeats the very purpose of dynamic behavior provided by
>  >  Tapestry.ElementEffect sidedown/slideup functions. The problem is that
>  >  when the silide function is invoked on the client (triggered by click
>  >  on the checkbox), that inherently means that FormFragment should be
>  >  submitted, but it won't be if the hidden field was generated with
>  >  false value.
>  >
>  >  The solution to this problem should be Tapestry dynamically changing
>  >  hidden field's value to true/false based on the client side state of
>  >  the checkbox tied to the FormFragment. For those who need a
>  >  workaround, I can share mine. In onclick of submit button one can
>  >  execute the following function:
>  >
>  >  function setupFragment(fragment, checkbox) {
>  >   var checked = document.getElementById(checkbox).value;
>  >   var advanced = (checked == 'on');
>  >   document.getElementById(fragment + ':hidden').value=advanced;
>  >  }
>  >
>  >
>  >  <input t:id="submitButton"
>  >  onclick="setupFragment('advancedFragment','advancedCheckbox');"
>  >  type="submit" t:type="submit" value="Submit"/>
>  >
>  >  I believe this should be one of those "plumbing" tasks that Tapestry
>  >  should do for us. Should this be a JIRA improvement, or am I missing
>  >  something?
>  >
>  >  -adam
>  >
>  >  ---------------------------------------------------------------------
>  >  To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>  >  For additional commands, e-mail: users-help@tapestry.apache.org
>  >
>  >
>
>
>
>  --
>  Howard M. Lewis Ship
>
>  Creator Apache Tapestry and Apache HiveMind
>
>  ---------------------------------------------------------------------
>  To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>  For additional commands, e-mail: users-help@tapestry.apache.org
>
>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: [T5] Missing JavaScript for FormFragment, bug?

Posted by Howard Lewis Ship <hl...@gmail.com>.
The code is already in place to set the hidden field to the correct
value when the form is submitted.

On Sat, Mar 22, 2008 at 11:59 AM, Adam Zimowski <zi...@gmail.com> wrote:
> Per documentation, FormFragment decides if its content should be
>  submitted based on the hidden field [formfragmentname]:hidden:
>
>  // this is the relevant code from FormFragment source: void beginRender(..)
>         writer.element("input",
>
>                        "type", "hidden",
>
>                        "name", _controlName,
>
>                        "id", _clientId + ":hidden",
>
>                        "value", String.valueOf(_visible));
>         writer.end();
>
>
>  However, that field being generated at render time is fairly static,
>  which defeats the very purpose of dynamic behavior provided by
>  Tapestry.ElementEffect sidedown/slideup functions. The problem is that
>  when the silide function is invoked on the client (triggered by click
>  on the checkbox), that inherently means that FormFragment should be
>  submitted, but it won't be if the hidden field was generated with
>  false value.
>
>  The solution to this problem should be Tapestry dynamically changing
>  hidden field's value to true/false based on the client side state of
>  the checkbox tied to the FormFragment. For those who need a
>  workaround, I can share mine. In onclick of submit button one can
>  execute the following function:
>
>  function setupFragment(fragment, checkbox) {
>   var checked = document.getElementById(checkbox).value;
>   var advanced = (checked == 'on');
>   document.getElementById(fragment + ':hidden').value=advanced;
>  }
>
>
>  <input t:id="submitButton"
>  onclick="setupFragment('advancedFragment','advancedCheckbox');"
>  type="submit" t:type="submit" value="Submit"/>
>
>  I believe this should be one of those "plumbing" tasks that Tapestry
>  should do for us. Should this be a JIRA improvement, or am I missing
>  something?
>
>  -adam
>
>  ---------------------------------------------------------------------
>  To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>  For additional commands, e-mail: users-help@tapestry.apache.org
>
>



-- 
Howard M. Lewis Ship

Creator Apache Tapestry and Apache HiveMind

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org