You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by abangkis <ab...@gmail.com> on 2014/03/25 09:18:56 UTC
Rendering multiple zone in nested component.
Hello,
I have 3 nested object. A survey, a section and a question. A survey will
contain sections and a section will contain questions. I want to create a
single page editor for this nested object using ajax.
In add survey page i have created two zone, survey zone and
sectionListZone. The survey zone content will depend on a flag. It can show
an input form for the survey or a view of the survey data. The
sectionListZone content is a SectionHolder component (custom component for
handling the section).
The SectionHolder component also contains two zone, sZone and qZone. The
sZone content also depend on a flag, to show an input form for the section
or to view the section data. The qZone content is a QuestionHolder
component (custom component for handling the questions).
I've managed to create the add survey page to add & view the survey data. I
also manage to create the section holder component by using the same
pattern as the add survey page (using ajax response renderer to render both
zone when the form is submitted). The problem is in the SectionHolder
component i can't render multiple zone using ajax renderer. Returning a
block from onSuccess will work. But using ajax renderer to render the zone
will result this error :
Element 'sZone' does not have an associated Tapestry.ZoneManager object.
Communication with the server failed: TypeError: Cannot call method
'getStorage' of null
Here's my code for the Add Survey page & the Section Holder.
Thanks
=== Add Survey TML ===
<t:zone t:id="surveyZone" id="surveyZone">
<form t:type="form" t:id="frmCreateSurvey" t:zone="^">
<div>
<t:delegate to="surveyBlock"/>
</div>
<div>
<t:errors/>
</div>
</form>
<hr/>
</t:zone>
<div>
<t:zone t:id="sectionListZone" id="sectionListZone">
<t:delegate to="sectionListBlock"/>
</t:zone>
</div>
<t:block id="addSurveyBlock">
<t:label for="title"/>
<t:textfield t:id="title" value="survey?.title" t:validate="required,
maxlength=35" size="35"/>
<input type="submit" value="Save"
class="btn btn-sm btn-primary"/>
</t:block>
<t:block id="viewSurveyBlock">
SURVEY BLOCK <br/>
Title : ${survey?.title}
<a t:type="actionlink" t:id="editSurvey" t:zone="surveyZone" href="#"
class="btn btn-sm btn-primary">Edit</a>
</t:block>
<t:block id="viewSectionListBlock">
<t:section.SectionHolder t:id="sectionHolder"/>
</t:block>
<t:block t:id="emptyBlock"/>
====== Add Survey.Java =========
@Inject
private AjaxResponseRenderer ajaxRenderer;
@Inject
private Block addSurveyBlock, viewSurveyBlock, viewSectionListBlock,
emptyBlock;
@Inject
private Request request;
@InjectComponent
private Zone surveyZone, sectionListZone;
@Property
@Persist // TODO erase this when we use database
private Survey survey;
@Persist
private boolean isReadyToPublish;
@Persist
private boolean isEditSurvey;
@Persist
private boolean isSectionShown;
void onSuccess() {
isEditSurvey = false;
isSectionShown = true;
if(request.isXHR()) {
ajaxRenderer.addRender(surveyZone).addRender(sectionListZone);
}
}
public Object getSurveyBlock() {
return isEditSurvey ? addSurveyBlock : viewSurveyBlock;
}
public Object getSectionListBlock() {
return isSectionShown? viewSectionListBlock : emptyBlock;
}
void onActionFromEditSurvey() {
isEditSurvey = true;
if(request.isXHR()) {
ajaxRenderer.addRender(surveyZone);
}
}
=== SectionHolder Component tml ===
<t:content>
<h4>Section</h4>
<t:zone t:id="sZone" id="sZone">
<form t:type="form" t:id="frmCreateSection" t:zone="^">
Section 1
<div id="sectionDiv">
<t:label for="name"/>
<t:textfield t:id="name" value="name" />
<input class="btn btn-sm btn-primary" type="submit" value="Save"/>
</div>
<div>
<t:errors/>
</div>
</form>
</t:zone>
<div>
<t:zone t:id="qZone" id="qZone">
Question Block
</t:zone>
</div>
</t:content>
=== Section Holder.java ===
@Inject
private Request request;
@Inject
private AjaxResponseRenderer ajaxRenderer;
@InjectComponent
private Zone sZone, qZone;
@Property
private String name;
void onSuccess() {
System.out.println("Success!");
if(request.isXHR()) {
ajaxRenderer.addRender(sZone).addRender(qZone);
}
}
--
http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
twitter : @mreunionlabs
page : https://plus.google.com/104168782385184990771
Re: Rendering multiple zone in nested component.
Posted by abangkis <ab...@gmail.com>.
Hi Geoff, thanks for your response.
I'm not really sure. Since I already move the code from the component to
the page . But as I recall the sZone div is there, only it didn't attached
to the Tapestry.ZoneManager. Yes, it could be the problem. We have zone
that contain blocks and then inside the blocks there will be other zone
with their own block (for editing the section & question). I'll try
experimenting on it again when some free time opens up. It feels
really-really close to solving it. Thanks Geoff.
On Thu, Mar 27, 2014 at 10:08 PM, Geoff Callender <
geoff.callender.jumpstart@gmail.com> wrote:
> Right before you send the request that fails, if you use your browser's web
> inspect the page DOM, can you see the sZone div? If not, then that's the
> problem: the failing response would be referring to a zone that the client
> doesn't know about. This looks quite likely since your conditional blocks
> contain zones, as opposed to having your zones contain conditional blocks.
>
> On Friday, 28 March 2014, Geoff Callender <
> geoff.callender.jumpstart@gmail.com> wrote:
>
> > I see nothing wrong with your nested components approach, and there is
> > nothing wrong with having a component render multiple zones as you are
> > doing. I don't know the cause of your client-side exception, but I think
> > your code must be very, very close to correct.
> >
> > On Thursday, 27 March 2014, abangkis <abangkis@gmail.com
> <javascript:_e(%7B%7D,'cvml','abangkis@gmail.com');>>
> > wrote:
> >
> >> Hai Geoff thanks a lot for trying :)
> >>
> >> I try to explain it better. Basically I have a survey object, that
> >> contains
> >> survey info and list of section object. The section object contains
> >> section
> >> info and list of question object. What we want to do is give the user
> the
> >> ability to fill the survey info, section info and question info in a
> >> single
> >> page (not moving between pages).
> >>
> >> What the user will see is this. When the user first open the page, it
> will
> >> only show the survey info form. After the user submit the survey form.
> >> Then
> >> the form fields will change to read only mode and the sections info form
> >> will be shown. We do this by using 3 block and 2 zone. Survey Input
> block
> >> and Survey view block for the survey zone. And Section Input block for
> the
> >> section zone. Rendering multiple zone when the Survey info form is
> >> submitted is done using the ajax renderer. It's pretty simple.
> >>
> >> Filling the section and the question info will follow the same pattern.
> So
> >> we create a SectionHolder component and Question Holder component. Using
> >> the same code as the page (2 zone that will render 3 block using ajax
> >> renderer). Hoping that with a component the code will be modular and
> >> easier
> >> to maintain. There is where we found the problem. It seems we can't use
> >> nested component with the ajax renderer. Yes probably tapestry 5.4 will
> >> handle this better, but unfortunately we're still stuck with Tap 5.3.
> >>
> >> As a workaround we put all of the code in a single page. So far the code
> >> seems to work. But we still think that separating the editor into its
> own
> >> component is the better approach. So let us know if anyone succeeded
> >> implementing this :)
> >>
> >> Thanks.
> >>
> >>
> >>
> >>
> >> On Thu, Mar 27, 2014 at 5:52 AM, Geoff Callender <
> >> geoff.callender.jumpstart@gmail.com> wrote:
> >>
> >> > Sorry, I tried to draw a model of your page but I don't quite get it.
> >> >
> >> > The techniques used in that JumpStart page's components may have a
> >> problem
> >> > when they're nested deeper. They're done better in the JumpStart
> preview
> >> > for T5.4:
> >> >
> >> >
> >> >
> >>
> http://jumpstart.doublenegative.com.au/jumpstart7/together/ajaxcomponentscrud/persons
> >> >
> >> > A key improvement is the passing of the component's context in each
> >> > request, and using them to restore the component's parameters, rather
> >> than
> >> > relying on the page context and @ActivationRequestParameter.
> >> >
> >> > I don't know if these thoughts are addressing the source of your
> >> problem,
> >> > but I hope they help.
> >> >
> >> > Cheers,
> >> >
> >> > Geoff
> >> >
> >> > On 27/03/2014, at 1:42 AM, abangkis wrote:
> >> >
> >> > > Or maybe someone has an example of a single page site made with
> >> tapestry.
> >> > > I've tried jumpstart
> >> > >
> >> >
> >>
> http://jumpstart.doublenegative.com.au/jumpstart/together/ajaxcomponentscrud/personsit's
> >> > > something similar but able to be nested 3-4 component deep.
> >> > >
> >> > > Thanks for any clue.
> >> > >
> >> > > Cheers.
> >> > >
> >> > >
> >> > > On Tue, Mar 25, 2014 at 3:18 PM, abangkis <ab...@gmail.com>
> wrote:
> >> > >
> >> > >> Hello,
> >> > >>
> >> > >> I have 3 nested object. A survey, a section and a question. A
> survey
> >> > will
> >> > >> contain sections and a section will contain questions. I want to
> >> create
> >> > a
> >> > >> single page editor for this nested object using ajax.
> >> > >>
> >> > >> In add survey page i have created two zone, survey zone and
> >> > >> sectionListZone. The survey zone content will depend on a flag. It
> >> can
> >> > show
> >> > >> an input form for the survey or a view of the survey data. The
> >> > >> sectionListZone content is a SectionHolder component (custom
> >> component
> >> > for
> >> > >> handling the section).
> >> > >>
> >> > >> The SectionHolder component also contains two zone, sZone and
> qZone.
> >> The
> >> > >> sZone content also depend on a flag, to show an input form for the
> >> > section
> >> > >> or to view the section data. The qZone content is a QuestionHolder
> >> > >> component (custom component for handling the questions).
> >> > >>
> >> > >> I've managed to create the add survey page to add & view the survey
> >> > data.
> >> > >> I also manage to create the section holder component by using the
> >> same
> >> > >> pattern as the add survey page (using ajax response renderer to
> >> render
> >> > both
> >> > >> zone when the form is submitted). The problem is in the > >>
> >> <t:delegate to="sectionListBlock>
> >> ---------------------------------------------------------------------
> >> > To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> >> > For additional commands, e-mail: users-help@tapestry.apache.org
> >> >
> >> >
> >>
> >>
> >> --
> >> http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
> >> twitter : @mreunionlabs
> >> page : https://plus.google.com/104168782385184990771
> >>
> >
>
--
http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
twitter : @mreunionlabs
page : https://plus.google.com/104168782385184990771
Re: Rendering multiple zone in nested component.
Posted by Geoff Callender <ge...@gmail.com>.
Right before you send the request that fails, if you use your browser's web
inspect the page DOM, can you see the sZone div? If not, then that's the
problem: the failing response would be referring to a zone that the client
doesn't know about. This looks quite likely since your conditional blocks
contain zones, as opposed to having your zones contain conditional blocks.
On Friday, 28 March 2014, Geoff Callender <
geoff.callender.jumpstart@gmail.com> wrote:
> I see nothing wrong with your nested components approach, and there is
> nothing wrong with having a component render multiple zones as you are
> doing. I don't know the cause of your client-side exception, but I think
> your code must be very, very close to correct.
>
> On Thursday, 27 March 2014, abangkis <abangkis@gmail.com<javascript:_e(%7B%7D,'cvml','abangkis@gmail.com');>>
> wrote:
>
>> Hai Geoff thanks a lot for trying :)
>>
>> I try to explain it better. Basically I have a survey object, that
>> contains
>> survey info and list of section object. The section object contains
>> section
>> info and list of question object. What we want to do is give the user the
>> ability to fill the survey info, section info and question info in a
>> single
>> page (not moving between pages).
>>
>> What the user will see is this. When the user first open the page, it will
>> only show the survey info form. After the user submit the survey form.
>> Then
>> the form fields will change to read only mode and the sections info form
>> will be shown. We do this by using 3 block and 2 zone. Survey Input block
>> and Survey view block for the survey zone. And Section Input block for the
>> section zone. Rendering multiple zone when the Survey info form is
>> submitted is done using the ajax renderer. It's pretty simple.
>>
>> Filling the section and the question info will follow the same pattern. So
>> we create a SectionHolder component and Question Holder component. Using
>> the same code as the page (2 zone that will render 3 block using ajax
>> renderer). Hoping that with a component the code will be modular and
>> easier
>> to maintain. There is where we found the problem. It seems we can't use
>> nested component with the ajax renderer. Yes probably tapestry 5.4 will
>> handle this better, but unfortunately we're still stuck with Tap 5.3.
>>
>> As a workaround we put all of the code in a single page. So far the code
>> seems to work. But we still think that separating the editor into its own
>> component is the better approach. So let us know if anyone succeeded
>> implementing this :)
>>
>> Thanks.
>>
>>
>>
>>
>> On Thu, Mar 27, 2014 at 5:52 AM, Geoff Callender <
>> geoff.callender.jumpstart@gmail.com> wrote:
>>
>> > Sorry, I tried to draw a model of your page but I don't quite get it.
>> >
>> > The techniques used in that JumpStart page's components may have a
>> problem
>> > when they're nested deeper. They're done better in the JumpStart preview
>> > for T5.4:
>> >
>> >
>> >
>> http://jumpstart.doublenegative.com.au/jumpstart7/together/ajaxcomponentscrud/persons
>> >
>> > A key improvement is the passing of the component's context in each
>> > request, and using them to restore the component's parameters, rather
>> than
>> > relying on the page context and @ActivationRequestParameter.
>> >
>> > I don't know if these thoughts are addressing the source of your
>> problem,
>> > but I hope they help.
>> >
>> > Cheers,
>> >
>> > Geoff
>> >
>> > On 27/03/2014, at 1:42 AM, abangkis wrote:
>> >
>> > > Or maybe someone has an example of a single page site made with
>> tapestry.
>> > > I've tried jumpstart
>> > >
>> >
>> http://jumpstart.doublenegative.com.au/jumpstart/together/ajaxcomponentscrud/personsit's
>> > > something similar but able to be nested 3-4 component deep.
>> > >
>> > > Thanks for any clue.
>> > >
>> > > Cheers.
>> > >
>> > >
>> > > On Tue, Mar 25, 2014 at 3:18 PM, abangkis <ab...@gmail.com> wrote:
>> > >
>> > >> Hello,
>> > >>
>> > >> I have 3 nested object. A survey, a section and a question. A survey
>> > will
>> > >> contain sections and a section will contain questions. I want to
>> create
>> > a
>> > >> single page editor for this nested object using ajax.
>> > >>
>> > >> In add survey page i have created two zone, survey zone and
>> > >> sectionListZone. The survey zone content will depend on a flag. It
>> can
>> > show
>> > >> an input form for the survey or a view of the survey data. The
>> > >> sectionListZone content is a SectionHolder component (custom
>> component
>> > for
>> > >> handling the section).
>> > >>
>> > >> The SectionHolder component also contains two zone, sZone and qZone.
>> The
>> > >> sZone content also depend on a flag, to show an input form for the
>> > section
>> > >> or to view the section data. The qZone content is a QuestionHolder
>> > >> component (custom component for handling the questions).
>> > >>
>> > >> I've managed to create the add survey page to add & view the survey
>> > data.
>> > >> I also manage to create the section holder component by using the
>> same
>> > >> pattern as the add survey page (using ajax response renderer to
>> render
>> > both
>> > >> zone when the form is submitted). The problem is in the > >>
>> <t:delegate to="sectionListBlock>
>> ---------------------------------------------------------------------
>> > To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>> > For additional commands, e-mail: users-help@tapestry.apache.org
>> >
>> >
>>
>>
>> --
>> http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
>> twitter : @mreunionlabs
>> page : https://plus.google.com/104168782385184990771
>>
>
Re: Rendering multiple zone in nested component.
Posted by Geoff Callender <ge...@gmail.com>.
I see nothing wrong with your nested components approach, and there is
nothing wrong with having a component render multiple zones as you are
doing. I don't know the cause of your client-side exception, but I think
your code must be very, very close to correct.
On Thursday, 27 March 2014, abangkis <ab...@gmail.com> wrote:
> Hai Geoff thanks a lot for trying :)
>
> I try to explain it better. Basically I have a survey object, that contains
> survey info and list of section object. The section object contains section
> info and list of question object. What we want to do is give the user the
> ability to fill the survey info, section info and question info in a single
> page (not moving between pages).
>
> What the user will see is this. When the user first open the page, it will
> only show the survey info form. After the user submit the survey form. Then
> the form fields will change to read only mode and the sections info form
> will be shown. We do this by using 3 block and 2 zone. Survey Input block
> and Survey view block for the survey zone. And Section Input block for the
> section zone. Rendering multiple zone when the Survey info form is
> submitted is done using the ajax renderer. It's pretty simple.
>
> Filling the section and the question info will follow the same pattern. So
> we create a SectionHolder component and Question Holder component. Using
> the same code as the page (2 zone that will render 3 block using ajax
> renderer). Hoping that with a component the code will be modular and easier
> to maintain. There is where we found the problem. It seems we can't use
> nested component with the ajax renderer. Yes probably tapestry 5.4 will
> handle this better, but unfortunately we're still stuck with Tap 5.3.
>
> As a workaround we put all of the code in a single page. So far the code
> seems to work. But we still think that separating the editor into its own
> component is the better approach. So let us know if anyone succeeded
> implementing this :)
>
> Thanks.
>
>
>
>
> On Thu, Mar 27, 2014 at 5:52 AM, Geoff Callender <
> geoff.callender.jumpstart@gmail.com> wrote:
>
> > Sorry, I tried to draw a model of your page but I don't quite get it.
> >
> > The techniques used in that JumpStart page's components may have a
> problem
> > when they're nested deeper. They're done better in the JumpStart preview
> > for T5.4:
> >
> >
> >
> http://jumpstart.doublenegative.com.au/jumpstart7/together/ajaxcomponentscrud/persons
> >
> > A key improvement is the passing of the component's context in each
> > request, and using them to restore the component's parameters, rather
> than
> > relying on the page context and @ActivationRequestParameter.
> >
> > I don't know if these thoughts are addressing the source of your problem,
> > but I hope they help.
> >
> > Cheers,
> >
> > Geoff
> >
> > On 27/03/2014, at 1:42 AM, abangkis wrote:
> >
> > > Or maybe someone has an example of a single page site made with
> tapestry.
> > > I've tried jumpstart
> > >
> >
> http://jumpstart.doublenegative.com.au/jumpstart/together/ajaxcomponentscrud/personsit's
> > > something similar but able to be nested 3-4 component deep.
> > >
> > > Thanks for any clue.
> > >
> > > Cheers.
> > >
> > >
> > > On Tue, Mar 25, 2014 at 3:18 PM, abangkis <ab...@gmail.com> wrote:
> > >
> > >> Hello,
> > >>
> > >> I have 3 nested object. A survey, a section and a question. A survey
> > will
> > >> contain sections and a section will contain questions. I want to
> create
> > a
> > >> single page editor for this nested object using ajax.
> > >>
> > >> In add survey page i have created two zone, survey zone and
> > >> sectionListZone. The survey zone content will depend on a flag. It can
> > show
> > >> an input form for the survey or a view of the survey data. The
> > >> sectionListZone content is a SectionHolder component (custom component
> > for
> > >> handling the section).
> > >>
> > >> The SectionHolder component also contains two zone, sZone and qZone.
> The
> > >> sZone content also depend on a flag, to show an input form for the
> > section
> > >> or to view the section data. The qZone content is a QuestionHolder
> > >> component (custom component for handling the questions).
> > >>
> > >> I've managed to create the add survey page to add & view the survey
> > data.
> > >> I also manage to create the section holder component by using the same
> > >> pattern as the add survey page (using ajax response renderer to render
> > both
> > >> zone when the form is submitted). The problem is in the SectionHolder
> > >> component i can't render multiple zone using ajax renderer. Returning
> a
> > >> block from onSuccess will work. But using ajax renderer to render the
> > zone
> > >> will result this error :
> > >>
> > >> Element 'sZone' does not have an associated Tapestry.ZoneManager
> object.
> > >>
> > >> Communication with the server failed: TypeError: Cannot call method
> > >> 'getStorage' of null
> > >>
> > >> Here's my code for the Add Survey page & the Section Holder.
> > >> Thanks
> > >>
> > >> === Add Survey TML ===
> > >>
> > >> <t:zone t:id="surveyZone" id="surveyZone">
> > >> <form t:type="form" t:id="frmCreateSurvey" t:zone="^">
> > >> <div>
> > >> <t:delegate to="surveyBlock"/>
> > >> </div>
> > >> <div>
> > >> <t:errors/>
> > >> </div>
> > >> </form>
> > >>
> > >> <hr/>
> > >> </t:zone>
> > >>
> > >> <div>
> > >> <t:zone t:id="sectionListZone" id="sectionListZone">
> > >> <t:delegate to="sectionListBlock>
> ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org<javascript:;>
> > For additional commands, e-mail: users-help@tapestry.apache.org<javascript:;>
> >
> >
>
>
> --
> http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
> twitter : @mreunionlabs
> page : https://plus.google.com/104168782385184990771
>
Re: Rendering multiple zone in nested component.
Posted by abangkis <ab...@gmail.com>.
Hai Geoff thanks a lot for trying :)
I try to explain it better. Basically I have a survey object, that contains
survey info and list of section object. The section object contains section
info and list of question object. What we want to do is give the user the
ability to fill the survey info, section info and question info in a single
page (not moving between pages).
What the user will see is this. When the user first open the page, it will
only show the survey info form. After the user submit the survey form. Then
the form fields will change to read only mode and the sections info form
will be shown. We do this by using 3 block and 2 zone. Survey Input block
and Survey view block for the survey zone. And Section Input block for the
section zone. Rendering multiple zone when the Survey info form is
submitted is done using the ajax renderer. It's pretty simple.
Filling the section and the question info will follow the same pattern. So
we create a SectionHolder component and Question Holder component. Using
the same code as the page (2 zone that will render 3 block using ajax
renderer). Hoping that with a component the code will be modular and easier
to maintain. There is where we found the problem. It seems we can't use
nested component with the ajax renderer. Yes probably tapestry 5.4 will
handle this better, but unfortunately we're still stuck with Tap 5.3.
As a workaround we put all of the code in a single page. So far the code
seems to work. But we still think that separating the editor into its own
component is the better approach. So let us know if anyone succeeded
implementing this :)
Thanks.
On Thu, Mar 27, 2014 at 5:52 AM, Geoff Callender <
geoff.callender.jumpstart@gmail.com> wrote:
> Sorry, I tried to draw a model of your page but I don't quite get it.
>
> The techniques used in that JumpStart page's components may have a problem
> when they're nested deeper. They're done better in the JumpStart preview
> for T5.4:
>
>
> http://jumpstart.doublenegative.com.au/jumpstart7/together/ajaxcomponentscrud/persons
>
> A key improvement is the passing of the component's context in each
> request, and using them to restore the component's parameters, rather than
> relying on the page context and @ActivationRequestParameter.
>
> I don't know if these thoughts are addressing the source of your problem,
> but I hope they help.
>
> Cheers,
>
> Geoff
>
> On 27/03/2014, at 1:42 AM, abangkis wrote:
>
> > Or maybe someone has an example of a single page site made with tapestry.
> > I've tried jumpstart
> >
> http://jumpstart.doublenegative.com.au/jumpstart/together/ajaxcomponentscrud/personsit's
> > something similar but able to be nested 3-4 component deep.
> >
> > Thanks for any clue.
> >
> > Cheers.
> >
> >
> > On Tue, Mar 25, 2014 at 3:18 PM, abangkis <ab...@gmail.com> wrote:
> >
> >> Hello,
> >>
> >> I have 3 nested object. A survey, a section and a question. A survey
> will
> >> contain sections and a section will contain questions. I want to create
> a
> >> single page editor for this nested object using ajax.
> >>
> >> In add survey page i have created two zone, survey zone and
> >> sectionListZone. The survey zone content will depend on a flag. It can
> show
> >> an input form for the survey or a view of the survey data. The
> >> sectionListZone content is a SectionHolder component (custom component
> for
> >> handling the section).
> >>
> >> The SectionHolder component also contains two zone, sZone and qZone. The
> >> sZone content also depend on a flag, to show an input form for the
> section
> >> or to view the section data. The qZone content is a QuestionHolder
> >> component (custom component for handling the questions).
> >>
> >> I've managed to create the add survey page to add & view the survey
> data.
> >> I also manage to create the section holder component by using the same
> >> pattern as the add survey page (using ajax response renderer to render
> both
> >> zone when the form is submitted). The problem is in the SectionHolder
> >> component i can't render multiple zone using ajax renderer. Returning a
> >> block from onSuccess will work. But using ajax renderer to render the
> zone
> >> will result this error :
> >>
> >> Element 'sZone' does not have an associated Tapestry.ZoneManager object.
> >>
> >> Communication with the server failed: TypeError: Cannot call method
> >> 'getStorage' of null
> >>
> >> Here's my code for the Add Survey page & the Section Holder.
> >> Thanks
> >>
> >> === Add Survey TML ===
> >>
> >> <t:zone t:id="surveyZone" id="surveyZone">
> >> <form t:type="form" t:id="frmCreateSurvey" t:zone="^">
> >> <div>
> >> <t:delegate to="surveyBlock"/>
> >> </div>
> >> <div>
> >> <t:errors/>
> >> </div>
> >> </form>
> >>
> >> <hr/>
> >> </t:zone>
> >>
> >> <div>
> >> <t:zone t:id="sectionListZone" id="sectionListZone">
> >> <t:delegate to="sectionListBlock"/>
> >> </t:zone>
> >> </div>
> >>
> >> <t:block id="addSurveyBlock">
> >> <t:label for="title"/>
> >> <t:textfield t:id="title" value="survey?.title" t:validate="required,
> >> maxlength=35" size="35"/>
> >> <input type="submit" value="Save"
> >> class="btn btn-sm btn-primary"/>
> >> </t:block>
> >> <t:block id="viewSurveyBlock">
> >> SURVEY BLOCK <br/>
> >> Title : ${survey?.title}
> >> <a t:type="actionlink" t:id="editSurvey" t:zone="surveyZone" href="#"
> >> class="btn btn-sm btn-primary">Edit</a>
> >> </t:block>
> >>
> >> <t:block id="viewSectionListBlock">
> >> <t:section.SectionHolder t:id="sectionHolder"/>
> >> </t:block>
> >>
> >> <t:block t:id="emptyBlock"/>
> >>
> >> ====== Add Survey.Java =========
> >> @Inject
> >> private AjaxResponseRenderer ajaxRenderer;
> >> @Inject
> >> private Block addSurveyBlock, viewSurveyBlock, viewSectionListBlock,
> >> emptyBlock;
> >>
> >> @Inject
> >> private Request request;
> >>
> >> @InjectComponent
> >> private Zone surveyZone, sectionListZone;
> >>
> >> @Property
> >> @Persist // TODO erase this when we use database
> >> private Survey survey;
> >>
> >> @Persist
> >> private boolean isReadyToPublish;
> >> @Persist
> >> private boolean isEditSurvey;
> >> @Persist
> >> private boolean isSectionShown;
> >>
> >> void onSuccess() {
> >> isEditSurvey = false;
> >> isSectionShown = true;
> >> if(request.isXHR()) {
> >> ajaxRenderer.addRender(surveyZone).addRender(sectionListZone);
> >> }
> >> }
> >> public Object getSurveyBlock() {
> >> return isEditSurvey ? addSurveyBlock : viewSurveyBlock;
> >> }
> >> public Object getSectionListBlock() {
> >> return isSectionShown? viewSectionListBlock : emptyBlock;
> >> }
> >>
> >> void onActionFromEditSurvey() {
> >> isEditSurvey = true;
> >> if(request.isXHR()) {
> >> ajaxRenderer.addRender(surveyZone);
> >> }
> >> }
> >>
> >>
> >> === SectionHolder Component tml ===
> >> <t:content>
> >> <h4>Section</h4>
> >> <t:zone t:id="sZone" id="sZone">
> >> <form t:type="form" t:id="frmCreateSection" t:zone="^">
> >> Section 1
> >> <div id="sectionDiv">
> >> <t:label for="name"/>
> >> <t:textfield t:id="name" value="name" />
> >> <input class="btn btn-sm btn-primary" type="submit" value="Save"/>
> >> </div>
> >> <div>
> >> <t:errors/>
> >> </div>
> >> </form>
> >> </t:zone>
> >>
> >> <div>
> >> <t:zone t:id="qZone" id="qZone">
> >> Question Block
> >> </t:zone>
> >> </div>
> >> </t:content>
> >>
> >> === Section Holder.java ===
> >>
> >> @Inject
> >> private Request request;
> >>
> >> @Inject
> >> private AjaxResponseRenderer ajaxRenderer;
> >>
> >> @InjectComponent
> >> private Zone sZone, qZone;
> >>
> >> @Property
> >> private String name;
> >> void onSuccess() {
> >> System.out.println("Success!");
> >> if(request.isXHR()) {
> >> ajaxRenderer.addRender(sZone).addRender(qZone);
> >> }
> >> }
> >>
> >> --
> >> http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
> >> twitter : @mreunionlabs
> >> page : https://plus.google.com/104168782385184990771
> >>
> >
> >
> >
> > --
> > http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
> > twitter : @mreunionlabs
> > page : https://plus.google.com/104168782385184990771
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
--
http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
twitter : @mreunionlabs
page : https://plus.google.com/104168782385184990771
Re: Rendering multiple zone in nested component.
Posted by Geoff Callender <ge...@gmail.com>.
Sorry, I tried to draw a model of your page but I don't quite get it.
The techniques used in that JumpStart page's components may have a problem when they're nested deeper. They're done better in the JumpStart preview for T5.4:
http://jumpstart.doublenegative.com.au/jumpstart7/together/ajaxcomponentscrud/persons
A key improvement is the passing of the component's context in each request, and using them to restore the component's parameters, rather than relying on the page context and @ActivationRequestParameter.
I don't know if these thoughts are addressing the source of your problem, but I hope they help.
Cheers,
Geoff
On 27/03/2014, at 1:42 AM, abangkis wrote:
> Or maybe someone has an example of a single page site made with tapestry.
> I've tried jumpstart
> http://jumpstart.doublenegative.com.au/jumpstart/together/ajaxcomponentscrud/personsit's
> something similar but able to be nested 3-4 component deep.
>
> Thanks for any clue.
>
> Cheers.
>
>
> On Tue, Mar 25, 2014 at 3:18 PM, abangkis <ab...@gmail.com> wrote:
>
>> Hello,
>>
>> I have 3 nested object. A survey, a section and a question. A survey will
>> contain sections and a section will contain questions. I want to create a
>> single page editor for this nested object using ajax.
>>
>> In add survey page i have created two zone, survey zone and
>> sectionListZone. The survey zone content will depend on a flag. It can show
>> an input form for the survey or a view of the survey data. The
>> sectionListZone content is a SectionHolder component (custom component for
>> handling the section).
>>
>> The SectionHolder component also contains two zone, sZone and qZone. The
>> sZone content also depend on a flag, to show an input form for the section
>> or to view the section data. The qZone content is a QuestionHolder
>> component (custom component for handling the questions).
>>
>> I've managed to create the add survey page to add & view the survey data.
>> I also manage to create the section holder component by using the same
>> pattern as the add survey page (using ajax response renderer to render both
>> zone when the form is submitted). The problem is in the SectionHolder
>> component i can't render multiple zone using ajax renderer. Returning a
>> block from onSuccess will work. But using ajax renderer to render the zone
>> will result this error :
>>
>> Element 'sZone' does not have an associated Tapestry.ZoneManager object.
>>
>> Communication with the server failed: TypeError: Cannot call method
>> 'getStorage' of null
>>
>> Here's my code for the Add Survey page & the Section Holder.
>> Thanks
>>
>> === Add Survey TML ===
>>
>> <t:zone t:id="surveyZone" id="surveyZone">
>> <form t:type="form" t:id="frmCreateSurvey" t:zone="^">
>> <div>
>> <t:delegate to="surveyBlock"/>
>> </div>
>> <div>
>> <t:errors/>
>> </div>
>> </form>
>>
>> <hr/>
>> </t:zone>
>>
>> <div>
>> <t:zone t:id="sectionListZone" id="sectionListZone">
>> <t:delegate to="sectionListBlock"/>
>> </t:zone>
>> </div>
>>
>> <t:block id="addSurveyBlock">
>> <t:label for="title"/>
>> <t:textfield t:id="title" value="survey?.title" t:validate="required,
>> maxlength=35" size="35"/>
>> <input type="submit" value="Save"
>> class="btn btn-sm btn-primary"/>
>> </t:block>
>> <t:block id="viewSurveyBlock">
>> SURVEY BLOCK <br/>
>> Title : ${survey?.title}
>> <a t:type="actionlink" t:id="editSurvey" t:zone="surveyZone" href="#"
>> class="btn btn-sm btn-primary">Edit</a>
>> </t:block>
>>
>> <t:block id="viewSectionListBlock">
>> <t:section.SectionHolder t:id="sectionHolder"/>
>> </t:block>
>>
>> <t:block t:id="emptyBlock"/>
>>
>> ====== Add Survey.Java =========
>> @Inject
>> private AjaxResponseRenderer ajaxRenderer;
>> @Inject
>> private Block addSurveyBlock, viewSurveyBlock, viewSectionListBlock,
>> emptyBlock;
>>
>> @Inject
>> private Request request;
>>
>> @InjectComponent
>> private Zone surveyZone, sectionListZone;
>>
>> @Property
>> @Persist // TODO erase this when we use database
>> private Survey survey;
>>
>> @Persist
>> private boolean isReadyToPublish;
>> @Persist
>> private boolean isEditSurvey;
>> @Persist
>> private boolean isSectionShown;
>>
>> void onSuccess() {
>> isEditSurvey = false;
>> isSectionShown = true;
>> if(request.isXHR()) {
>> ajaxRenderer.addRender(surveyZone).addRender(sectionListZone);
>> }
>> }
>> public Object getSurveyBlock() {
>> return isEditSurvey ? addSurveyBlock : viewSurveyBlock;
>> }
>> public Object getSectionListBlock() {
>> return isSectionShown? viewSectionListBlock : emptyBlock;
>> }
>>
>> void onActionFromEditSurvey() {
>> isEditSurvey = true;
>> if(request.isXHR()) {
>> ajaxRenderer.addRender(surveyZone);
>> }
>> }
>>
>>
>> === SectionHolder Component tml ===
>> <t:content>
>> <h4>Section</h4>
>> <t:zone t:id="sZone" id="sZone">
>> <form t:type="form" t:id="frmCreateSection" t:zone="^">
>> Section 1
>> <div id="sectionDiv">
>> <t:label for="name"/>
>> <t:textfield t:id="name" value="name" />
>> <input class="btn btn-sm btn-primary" type="submit" value="Save"/>
>> </div>
>> <div>
>> <t:errors/>
>> </div>
>> </form>
>> </t:zone>
>>
>> <div>
>> <t:zone t:id="qZone" id="qZone">
>> Question Block
>> </t:zone>
>> </div>
>> </t:content>
>>
>> === Section Holder.java ===
>>
>> @Inject
>> private Request request;
>>
>> @Inject
>> private AjaxResponseRenderer ajaxRenderer;
>>
>> @InjectComponent
>> private Zone sZone, qZone;
>>
>> @Property
>> private String name;
>> void onSuccess() {
>> System.out.println("Success!");
>> if(request.isXHR()) {
>> ajaxRenderer.addRender(sZone).addRender(qZone);
>> }
>> }
>>
>> --
>> http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
>> twitter : @mreunionlabs
>> page : https://plus.google.com/104168782385184990771
>>
>
>
>
> --
> http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
> twitter : @mreunionlabs
> page : https://plus.google.com/104168782385184990771
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: Rendering multiple zone in nested component.
Posted by abangkis <ab...@gmail.com>.
Or maybe someone has an example of a single page site made with tapestry.
I've tried jumpstart
http://jumpstart.doublenegative.com.au/jumpstart/together/ajaxcomponentscrud/personsit's
something similar but able to be nested 3-4 component deep.
Thanks for any clue.
Cheers.
On Tue, Mar 25, 2014 at 3:18 PM, abangkis <ab...@gmail.com> wrote:
> Hello,
>
> I have 3 nested object. A survey, a section and a question. A survey will
> contain sections and a section will contain questions. I want to create a
> single page editor for this nested object using ajax.
>
> In add survey page i have created two zone, survey zone and
> sectionListZone. The survey zone content will depend on a flag. It can show
> an input form for the survey or a view of the survey data. The
> sectionListZone content is a SectionHolder component (custom component for
> handling the section).
>
> The SectionHolder component also contains two zone, sZone and qZone. The
> sZone content also depend on a flag, to show an input form for the section
> or to view the section data. The qZone content is a QuestionHolder
> component (custom component for handling the questions).
>
> I've managed to create the add survey page to add & view the survey data.
> I also manage to create the section holder component by using the same
> pattern as the add survey page (using ajax response renderer to render both
> zone when the form is submitted). The problem is in the SectionHolder
> component i can't render multiple zone using ajax renderer. Returning a
> block from onSuccess will work. But using ajax renderer to render the zone
> will result this error :
>
> Element 'sZone' does not have an associated Tapestry.ZoneManager object.
>
> Communication with the server failed: TypeError: Cannot call method
> 'getStorage' of null
>
> Here's my code for the Add Survey page & the Section Holder.
> Thanks
>
> === Add Survey TML ===
>
> <t:zone t:id="surveyZone" id="surveyZone">
> <form t:type="form" t:id="frmCreateSurvey" t:zone="^">
> <div>
> <t:delegate to="surveyBlock"/>
> </div>
> <div>
> <t:errors/>
> </div>
> </form>
>
> <hr/>
> </t:zone>
>
> <div>
> <t:zone t:id="sectionListZone" id="sectionListZone">
> <t:delegate to="sectionListBlock"/>
> </t:zone>
> </div>
>
> <t:block id="addSurveyBlock">
> <t:label for="title"/>
> <t:textfield t:id="title" value="survey?.title" t:validate="required,
> maxlength=35" size="35"/>
> <input type="submit" value="Save"
> class="btn btn-sm btn-primary"/>
> </t:block>
> <t:block id="viewSurveyBlock">
> SURVEY BLOCK <br/>
> Title : ${survey?.title}
> <a t:type="actionlink" t:id="editSurvey" t:zone="surveyZone" href="#"
> class="btn btn-sm btn-primary">Edit</a>
> </t:block>
>
> <t:block id="viewSectionListBlock">
> <t:section.SectionHolder t:id="sectionHolder"/>
> </t:block>
>
> <t:block t:id="emptyBlock"/>
>
> ====== Add Survey.Java =========
> @Inject
> private AjaxResponseRenderer ajaxRenderer;
> @Inject
> private Block addSurveyBlock, viewSurveyBlock, viewSectionListBlock,
> emptyBlock;
>
> @Inject
> private Request request;
>
> @InjectComponent
> private Zone surveyZone, sectionListZone;
>
> @Property
> @Persist // TODO erase this when we use database
> private Survey survey;
>
> @Persist
> private boolean isReadyToPublish;
> @Persist
> private boolean isEditSurvey;
> @Persist
> private boolean isSectionShown;
>
> void onSuccess() {
> isEditSurvey = false;
> isSectionShown = true;
> if(request.isXHR()) {
> ajaxRenderer.addRender(surveyZone).addRender(sectionListZone);
> }
> }
> public Object getSurveyBlock() {
> return isEditSurvey ? addSurveyBlock : viewSurveyBlock;
> }
> public Object getSectionListBlock() {
> return isSectionShown? viewSectionListBlock : emptyBlock;
> }
>
> void onActionFromEditSurvey() {
> isEditSurvey = true;
> if(request.isXHR()) {
> ajaxRenderer.addRender(surveyZone);
> }
> }
>
>
> === SectionHolder Component tml ===
> <t:content>
> <h4>Section</h4>
> <t:zone t:id="sZone" id="sZone">
> <form t:type="form" t:id="frmCreateSection" t:zone="^">
> Section 1
> <div id="sectionDiv">
> <t:label for="name"/>
> <t:textfield t:id="name" value="name" />
> <input class="btn btn-sm btn-primary" type="submit" value="Save"/>
> </div>
> <div>
> <t:errors/>
> </div>
> </form>
> </t:zone>
>
> <div>
> <t:zone t:id="qZone" id="qZone">
> Question Block
> </t:zone>
> </div>
> </t:content>
>
> === Section Holder.java ===
>
> @Inject
> private Request request;
>
> @Inject
> private AjaxResponseRenderer ajaxRenderer;
>
> @InjectComponent
> private Zone sZone, qZone;
>
> @Property
> private String name;
> void onSuccess() {
> System.out.println("Success!");
> if(request.isXHR()) {
> ajaxRenderer.addRender(sZone).addRender(qZone);
> }
> }
>
> --
> http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
> twitter : @mreunionlabs
> page : https://plus.google.com/104168782385184990771
>
--
http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
twitter : @mreunionlabs
page : https://plus.google.com/104168782385184990771