Code nesting

In order to compose pages one can parse html or one can manually create instances of JustPy classes and connect them together with the add method or with the a=comp_ref construct (the docs prefer the latter). eg:

        c3 = jp.QItem(clickable=True, v_ripple=True, a=c2, click=button_click)
        c3.user_name = u['name']

        c4 = jp.QItemSection(avatar=True, a=c3)
        c5 = jp.QAvatar(size='100px',
                        font_size='52px',
                        color=color_from_state(u['state']),
                        text_color='white',
                        icon=icon_from_state(u['state']),
                        a=c4)
        c3.avatar = c5

        c6 = jp.QItemSection(a=c3)
        c7 = jp.QItemLabel(a=c6, classes=['text-h3'], text=u['name'])
        c8 = jp.QItemLabel(caption=True, a=c6, text=u['state'])
        c3.state_label = c8

        c9 = jp.QSeparator(spaced=True, inset=True, a=c2)

When using this manual construction method one gives up the visual nesting that is clear in HTML code. This makes it harder to see the page’s structure (IMHO). Maybe an alternative construction method could be useful:

        c3 = jp.QItem([ 
                jp.QItemSection(avatar=True),
                jp.QAvatar(size='100px',
                        font_size='52px',
                        color=color_from_state(u['state']),
                        text_color='white',
                        icon=icon_from_state(u['state'])),
                jp.QItemSection( [
                        jp.QItemLabel(classes=['text-h3'], text=u['name'])
                        jp.QItemLabel(caption=True, a=c6, text=u['state'])),
                ],
                jp.QSeparator(spaced=True, inset=True, a=c2)
          ],
          clickable=True, v_ripple=True, a=c2, click=button_click)
       )

or with a kwarg ‘children=[]’. I agree that this could get messy as well (just look at JS code), but it does make the structure clearer. What do you think?

[elimintz]

Got it. I added the children kwarg, it will be in the next version.

[knoxvilledatabase]

Although I’ve now gotten used to writing JustPy code without nesting, before switching to JustPy we wrote a ReactJS solution similar (yet not nearly as powerful) using code nesting:

Div(     Span(         text='Hello World',         classnames='test',         style='margin-top:50px',     ),     classnames='test_div',     style='margin-bottom:10px', )

This nesting concept originally came from https://github.com/django-crispy-forms/django-crispy-forms