Hallo guys,
I am trying to fade-out/in a zone via link. So
developed a mixins like the triggerFragement, which fades out a
formfragment by checking a checkBox or radioButton.
On runtime the
mixins behaviour is not as expected. Clicking the link, it shortly fades
out the zone and then it appears normal. Debugging this on client-side
and server-side shows me that the persistent boolean flag 'showMe'
alternates and the fired event are catched up the right way I suppose
something is still wrong in JavaScript of my mixins, maybe the extension
of the initialization of the component (in this case the zone). Or am I
on the wrong box fading a component via mixins?
The source code of mixins java part TriggerElement.java :
@Import(library = { scripts/triggerelement.js })
public class TriggerElement {
// injects the component to which the mixin is attached.
@InjectContainer
private ClientElement triggerElement;
/**
* The {@link org.apache.tapestry5.corelib.components.FormFragment}
instance to make dynamically visible or hidden.
*/
@Parameter(required = true, defaultPrefix = BindingConstants.COMPONENT,
allowNull = false)
private ClientElement element;
@Persist
private boolean showMe;
@Environmental
private JavaScriptSupport javascriptSupport;
@HeartbeatDeferred
void beginRender()
{
// alternate value on click -- hold the state in the session
showMe= !showMe;
JSONObject spec = new JSONObject(triggerElementId,
triggerElement.getClientId(), elementId,
element.getClientId()).put(showMe, showMe);
javascriptSupport.addInitializerCall(linkTriggerToElement, spec);
}
}
Source of triggerelement.js:
T5.extendInitializers(function() {
function init(spec) {
var element = $(spec.element);
function updateUI(makeVisible) {
if(makeVisible){
element.style.display = block;
element.className = t-zone;
} else {
element.style.display = none;
element.className = t-invisible;
}
element.visible = makeVisible;
return effect(element);
}
element.observe(Tapestry.ZONE_UPDATED_EVENT, function(event) {
// Since events propagate up, you have to call event.stop()
// here to prevent hiding/revealing any container elements.
event.stop();
var makeVisible = event.memo.visible;
updateUI(makeVisible);
});
}
/**
* Links a ClientElement (in this case a zone) to a trigger (also
ClientElement in this case a link), such
* that clicking the trigger will hide or show the zone.
*
*/
function linker(spec) {
var trigger = $(spec.triggerElementId);
function update() {
var makeVisible =!spec.showMe;
$(spec.elementId).fire(Tapestry.ZONE_UPDATED_EVENT, {
visible : makeVisible
}, true);
}
// Normal trigger is a ClientElement; listen just to it.
trigger.observe(click, update);
}
return {
zone : init,
linkTriggerToElement : linker
};
});
And now the way I use it in the TML:
a t:type=eventlink t:event=refreshZone href=# t:mixins=triggerelement
element=theZoneShow the zone/a
t:zone t:id=theZone id=theZone t:hide=fade
!-- some elements to render --
/t:zone
If you need further information don't hesitate to geet in contact with me.
Cheers Sven
