T5.3.6 Fade-out/in a zone via Event/ActionLink by use of custom developed mixins‏

[Software Engineer]

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="theZone">Show 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