$overlay{_template.html#body} $begin{content}
Some nested gizmos, that interact via supported gizmo event. Notice the postponed rendering on the nested gizmo instances.
${% gizmo.Collapsable('c1', contents=[ html.format_p_obj(vars(hit.get_request())), ], title='Request', css_codes=[ "#%(get_id('status'))s { background-color: #cff; text-align: right; }", "#%(get_id('content'))s { padding: 0 0 0 11%%; }", ], onload_actions=[ # Example of Collapsable.set_status_text(), Collapsable.names on client "%(gizmoid)s.set_status_text('" + \ "Collapsable exposed names: '+ repr(%(gizmoid)s.get_elem_names()));", ], render=False, ) %} ${% gizmo.Collapsable('c2', contents=[ evoque('gizmos_stbl.html#stbl'), # defines dhi.gizmos.s ], title='Pulled Stbl', css_codes=[ "#%(get_id('status'))s { background-color: #ffc; text-align: right; }", "#%(get_id('content'))s { padding: 1em 1em 1em 15%%; }", ], onload_actions=[ # scrapeText is from MochiKit "%(gizmoid)s.set_status_text(scrapeText(" \ "%(gizmoid)s.get_elem('content')).substring(0,79)+' ...');", ], render=False, ) %} ${% gizmo.Collapsable('c3', contents=[ evoque('gizmos_tabbed.html#tabbed'), # defines dhi.gizmos.t ], title='Pulled Tabbed', css_codes=[ "#%(get_id('status'))s { background-color: #fcf; text-align: right; }", "#%(get_id('content'))s { padding: 1em 1em 1em 15%%; }", ], onload_actions=[ # Note the call to another Gizmo defined in page, t.get_elem_names() "%(gizmoid)s.set_status_text('Tabbed exposed names: '+ repr(t.get_elem_names()));", # Ensure initial state is expanded "%(gizmoid)s.toggle_expand();", ], render=False, ) %} ${% gizmo.Collapsable('c', contents=[ dhi.gizmos.c1.render(), dhi.gizmos.c2.render(), dhi.gizmos.c3.render(), ], title='Interacting', css_codes=[ "#%(get_id('box'))s { width: 80%%; border: 2px solid #f93; }", "#%(get_id('status'))s { color: #900; padding: 4px; font-weight: bold; text-align: right; }", "#%(get_id('content'))s { padding: 0; }", ], js_codes=[ ''' function _toggle_label(collapsable){ if (collapsable.is_expanded()) { return 'EXPANDED'; } else { return 'collapsed'; } } function update_c_status() { var txt = [_toggle_label(c1), _toggle_label(c2), _toggle_label(c3)]; txt[1] += ' ['+ s.sortOn +', '+ s.sortSense +'] '; txt[2] += ' ['+ t.sections[t.get_visible()] +'] '; c.set_status_text(txt.join(' -- ')); } c1.set_event_handler('toggle_expand', update_c_status); c2.set_event_handler('toggle_expand', update_c_status); s.set_event_handler('sort', update_c_status); c3.set_event_handler('toggle_expand', update_c_status); t.set_event_handler('show_section', update_c_status); ''' ], ) %} $end{content}