Hi Alfie
It looks like we are doing very similar things. I have chosen to implement
Tapestry versions on the YUi components to I am creating ca component which
will drop out a YUI overlay.
I have done exactly the same as you in that my component accepts a block as
a parameter with the intention of using the block as the overlay body.
Working within the restrictions of the YUI Overlay API I have two options
for rendering.
a) Use Tapestry to render the block into a hidden div in the HTML ()
equivalent to your and then pass the contents of the DIV to YUI at the
appropriate time for rendering as an overlay.
b)
On Thu, Jun 18, 2009 at 12:31 PM, Alfie Kirkpatrick <
alfie.kirkpatr...@ioko.com> wrote:
> Hi Steve, I wrote an overlay component using JQuery which does just
> that... in fact you can choose whether the block is rendered initially
> or as a result of an AJAX request if you want to delay the evaluation of
> what is in the overlay.
>
> You don't need any JSON magic, you just render the block from the
> component in a hidden div and expose it from Javascript in your event
> handler.
>
> Most of the work for my component was supporting both modes, but it goes
> something like the below. If you omit the body parameter, you must
> provide an event handler in your page which returns the block to render
> on the AJAX call.
>
> IMHO it's pretty elegant... and shows how easy it is to do clever
> AJAX/rendering tricks in T5. I can't imagine a framework making it much
> easier than this ;-)
>
> Reading the original post am not sure this answers it, but does meet
> your objective I think.
>
> Hope it helps,
> Alfie.
>
> page.tml
> <t:overlay t:id="o" body="popup">Click Me</t:overlay>
>
> <t:block id="popup">This is my overlay block</t:block>
>
> overlay.java
> @Parameter
> private Object body; // the block to render if immediate (non-AJAX)
>
> @SetupRender
> public void setup() {
> // allocate the ids we will need
> overlayClientId = renderSupport.allocateClientId("overlay");
> linkClientId = renderSupport.allocateClientId("overlayLink");
> }
>
> @BeginRender
> public Object begin(MarkupWriter writer) {
> // we render in two phases... the first is the link and the
> second
> // is the overlay div itself
> if (renderOverlayDivPhase) {
> writer.element("div", "class", "overlay", "id",
> overlayClientId);
> if ( body == null ) { // ajax style
> String innerId =
> renderSupport.allocateClientId("overlayInnerDiv");
>
> // render an inner div where we'll attach the zone for
> update
> writer.element("div", "id", innerId);
> writer.end();
> clientBehaviorSupport.addZone(innerId, "show", "show");
>
> // create the dynamic update link
> Link link =
> resources.createEventLink(EventConstants.ACTION, context);
> // ... and link the onclick to the zone via the update
> link
> clientBehaviorSupport.linkZone(linkClientId, innerId,
> link);
> return false; // do not render body
> }
> // a body is supplied so render it
> return body;
> } else { // just render the link
> writer.element("a", "href", "#", "id", linkClientId);
> renderSupport.addInit("overlayLoad", overlayClientId,
> linkClientId, expose ? exposeColour : "none");
> return null; // render the link text (component body)
> }
> }
>
> @BeforeRenderBody
> public boolean body() {
> // only render the default body if it's the link phase
> return !renderOverlayDivPhase;
> }
>
> @AfterRender
> public boolean after(MarkupWriter writer) {
> writer.end();
> if ( !renderOverlayDivPhase) {
> renderOverlayDivPhase=true;
> return false;
> }
> return true;
> }
>
> overlay.js
> Tapestry.Initializer.overlayLoad = function(overlayId, linkId,
> exposeColour) {
> var overlay=jQuery(document.getElementById(overlayId));
> var link=jQuery(document.getElementById(linkId));
> var expose=(exposeColour != 'none');
>
> jQuery(function() {
> overlay.overlay({
> onBeforeLoad: function() {
> if ( expose ) {
> this.getBackgroundImage().expose({color:
> exposeColour});
> }
> },
>
> onClose: function() {
> jQuery.expose.close();
> },
>
> speed: 'fast',
> fadeInSpeed: 'fast'
> });
> link.click(function(event) {
> overlay.overlay().load();
> Event.stop(event);
> });
> });
> };
>
> -----Original Message-----
> From: Stephen Cowx [mailto:steve.c...@gmail.com]
> Sent: 18 June 2009 09:20
> To: Tapestry users
> Cc: users@tapestry.apache.org
> Subject: Re: How to render a page as JSON-formatted AJAX response?
>
> I also have an interest in this.
>
> I would like a way of pre-rendering a Block on the server (as if it
> was rendered by an Ajax request handler), storing the rendered block
> as a JS variable in the page HTML and then injecting it into the DOM
> client side when it suits me. I don't want to have to make a new trip
> to the server to fetch the block via Ajax this is just a means of
> allowing a developer of parameterising his use of my overlay component.
>
> As far as I can tell this requires two things:
>
> 1) a way of invoking the Ajax renderer programmatically on the server.
> 2) a way of invoking the Tapestry.init() function on the client with
> the pre-generated response which is stored in a javascript variable as
> an argument (similar to the updateFromUrl() function but with a client
> side variable instead). This will ensure that the content gets loaded
> into the client properly.
>
> Steve
>
> On 17 Jun 2009, at 21:42, Renger Wilde <busanalys...@yahoo.com> wrote:
>
> >
> > On my client, I have a tabview.
> >
> > When the user navigates to one of the tabs on the tabview, I trigger
> > an AJAX
> > request to obtain the content of that tab. The AJAX request is sent
> > to a
> > Tapestry component event handler.
> >
> > I want that event handler to invoke some other page or component,
> > and cause
> > the rendered output of that other page/component to be captured into a
> > JSON-array, and sent back to the client as the reply to the AJAX
> > request.
> >
> > What is the best way to do this?
> >
> > thanks.
> >
> > Renger
> >
> >
> > --
> > View this message in context:
> http://www.nabble.com/How-to-render-a-page-as-JSON-formatted-AJAX-respon
> se--tp24081692p24081692.html<http://www.nabble.com/How-to-render-a-page-as-JSON-formatted-AJAX-respon%0Ase--tp24081692p24081692.html>
> > Sent from the Tapestry - User mailing list archive at Nabble.com.
> >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
> > For additional commands, e-mail: users-h...@tapestry.apache.org
> >
>
>
--
Kind regards
Stephen Cowx
0+44 (0) 7748 490 323
+44 (0) 1306 740 523
