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.jumpst...@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 <abang...@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-unsubscr...@tapestry.apache.org > For additional commands, e-mail: users-h...@tapestry.apache.org > > -- http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/> twitter : @mreunionlabs page : https://plus.google.com/104168782385184990771
