<html><head><meta http-equiv="Content-Type" content="text/html charset=utf-8"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class=""><br class=""><div><blockquote type="cite" class=""><div class="">On 10 Mar 2017, at 16:34, Mariano Martinez Peck <<a href="mailto:marianopeck@gmail.com" class="">marianopeck@gmail.com</a>> wrote:</div><br class="Apple-interchange-newline"><div class=""><span style="font-family: Helvetica; font-size: 12px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; float: none; display: inline !important;" class="">I haven't thought about that one. Seems like a good idea. Let me ask...when you need to open a new tab (say a main menu button was clicked), how do you avoid having to re-render all the "workspace" (all tabs) ? Do you only render the new one and do an append() or something?</span></div></blockquote></div><br class=""><div class="">The easiest is when you _can_ render all tabs at once, but if that gets to heavy (as Esteban is mentioning), you should do it lazily, which means doing ajax requests when necessary.</div><div class="">I cannot really copy/paste any code for this, but let me try to outline what I would do:</div><div class=""><br class=""></div><div class="">- Each of the tabs should be Seaside components, nested inside a ‘window’ component that holds onto all the tabs.</div><div class="">- When you render the page, the ‘window’ component renders the open tab and does not render anything for the others.</div><div class="">- The tab controls are implemented using javascript and when you click a new tab, this code checks if the tab is on the page and if it’s not it asks the server to render it via an ajax request and appends the generated html to the page in the correct location, followed by a hide() and show().</div><div class="">- One way we do this is generate <div> elements with a unique id that identifies the tab component. If the div is empty, we launch a callback with the id as an argument and our Seaside component then knows which component to render. That just requires you to keep a dictionary of components in the ‘window’ component with mappings id -> tab component.</div><div class=""><br class=""></div><div class="">So… basically what you already had in mind, but using the DOM as the place to store the tab html instead of somewhere else.</div><div class=""><br class=""></div><div class="">My guess is that the hardest problem is to know when you need to rerender a tab’s html (based on changes on the server…) instead of just showing the content already on the page.</div><div class=""><br class=""></div><div class="">Johan</div></body></html>