def __init__(self, view):
super().__init__(view, 'aform')
self.use_layout(
GridFormLayout(ResponsiveSize(lg=4), ResponsiveSize(lg=8)))
self.layout.add_input(TextInput(
self, fixture.domain_object.fields.an_attribute),
help_text='some help')
def customise_widget(self):
self.container = self.widget.add_child(Div(self.view))
self.container.use_layout(Container(fluid=False))
self.centre = self.container.add_child(Div(self.view))
column_layout = ColumnLayout(('left', ResponsiveSize(md=4)),
('right', ResponsiveSize(md=8)))
self.centre.use_layout(column_layout)
def __init__(self, view):
super(CommentForm, self).__init__(view, 'myform')
comment = Comment()
layout = ColumnLayout(
ColumnOptions('left', size=ResponsiveSize(lg=6)),
ColumnOptions('right', size=ResponsiveSize(lg=6)))
# .add_child() returns the added child here:
row = self.add_child(Div(view).use_layout(layout))
left_column = row.layout.columns['left']
# ... and .use_layout() returns the Widget it is called on
section = Div(view).use_layout(FormLayout())
left_column.add_child(section)
email_input = TextInput(self, comment.fields.email_address)
section.layout.add_input(email_input)
inline_section = Div(view).use_layout(InlineFormLayout())
left_column.add_child(inline_section)
text_input = TextInput(self, comment.fields.text)
inline_section.layout.add_input(text_input)
right_column = row.layout.columns['right']
right_column.add_child(
LiteralHTML.from_restructured_text(
view, '''
This form has two columns. Inputs go
into the left one and this text into the right one.
Some inputs are stacked and others are inlined.
Arbitrarily complicated layouts can be created like this.'''))
def __init__(self, view):
super(AddressBookPage, self).__init__(view)
self.use_layout(PageLayout(document_layout=Container()))
contents_layout = ColumnLayout(('secondary', ResponsiveSize(md=3)),
('main', ResponsiveSize(md=9))).with_slots()
self.layout.contents.use_layout(contents_layout)
nav = Nav(view).use_layout(PillLayout(stacked=True))
contents_layout.columns['secondary'].add_child(nav.with_languages())
def __init__(self, view, bookmarks):
super(MyCustomPage, self).__init__(view)
self.use_layout(PageLayout(document_layout=Container()))
contents_layout = ColumnLayout(ColumnOptions('secondary', size=ResponsiveSize(md=3)),
ColumnOptions('main', size=ResponsiveSize(md=9))).with_slots()
self.layout.contents.use_layout(contents_layout)
menu = Nav(view).use_layout(TabLayout()).with_bookmarks(bookmarks)
self.layout.header.add_child(menu)
def add_two(self):
layout = ColumnLayout(('left', ResponsiveSize(md=4)),
('right', ResponsiveSize(md=8)))
div = Div(self.view).use_layout(layout)
self.body.add_child(div)
div.layout.columns['left'].add_child(
P(self.view, text='4/12ths on md and larger'))
div.layout.columns['right'].add_child(
P(self.view, text='8/12ths on md and larger'))
def add_four(self):
layout = ColumnLayout(ColumnOptions('first', ResponsiveSize(md=6)),
ColumnOptions('second', ResponsiveSize(md=6)),
ColumnOptions('third', ResponsiveSize(md=6)),
ColumnOptions('fourth', ResponsiveSize(md=6)))
div = Div(self.view).use_layout(layout)
self.body.add_child(div)
message = '6/12ths on md and larger, else defaults to 12/12ths'
div.layout.columns['first'].add_child(P(self.view, text=message))
div.layout.columns['second'].add_child(P(self.view, text=message))
div.layout.columns['third'].add_child(P(self.view, text=message))
div.layout.columns['fourth'].add_child(P(self.view, text=message))
def column_layout_basics(fixture):
"""The bootstrap.ColumnLayout adds the correct classes for Bootstrap to lay out its Widget as a row with columns."""
layout = ColumnLayout(('column_a', ResponsiveSize(lg=4)), ('column_b', ResponsiveSize(lg=8)))
widget = Div(fixture.view)
vassert( not widget.has_attribute('class') )
widget.use_layout(layout)
vassert( widget.get_attribute('class') == 'row' )
column_a, column_b = widget.children
vassert( 'col-lg-4' in column_a.get_attribute('class') )
vassert( 'col-lg-8' in column_b.get_attribute('class') )
def test_column_layout_unspecified_size(web_fixture):
"""Specifying a size of True for a device class means that the size is automatically computed by dividing available
space equally amongst all the columns so specified."""
layout = ColumnLayout(
ColumnOptions('column_a', size=ResponsiveSize(lg=True)),
ColumnOptions('column_b', size=ResponsiveSize(lg=True)))
widget = Div(web_fixture.view)
widget.use_layout(layout)
column_a, column_b = widget.children
assert 'col-lg' in column_a.get_attribute('class')
assert 'col-lg' in column_b.get_attribute('class')
def __init__(self, view):
super(PageLayoutPage, self).__init__(view)
self.body.use_layout(Container())
column_layout = ColumnLayout(
ColumnOptions('left', ResponsiveSize(md=4)),
ColumnOptions('right', ResponsiveSize(md=8)))
self.use_layout(PageLayout(contents_layout=column_layout))
self.layout.header.add_child(P(view, text='The header'))
self.layout.footer.add_child(P(view, text='The footer'))
left = column_layout.columns['left']
left.add_child(P(view, text='To the left'))
right = column_layout.columns['right']
right.add_child(P(view, text='To the right'))
def add_twelve(self):
div = Div(self.view).use_layout(ColumnLayout())
self.body.add_child(div)
for i in range(1, 13):
column = div.layout.add_column(str(i), size=ResponsiveSize(md=1))
column.add_child(P(self.view, text='1/12th on md and larger'))
def assemble(self):
self.define_page(HTML5Page).use_layout(
PageLayout(document_layout=Container(),
contents_layout=ColumnLayout(
('main', ResponsiveSize(lg=6))).with_slots()))
home = self.define_view('/', title='File upload demo')
home.set_slot('main', CommentPostPanel.factory())
def assemble(self):
self.define_page(HTML5Page).use_layout(
PageLayout(document_layout=Container(),
contents_layout=ColumnLayout(
('main', ResponsiveSize(lg=6))).with_slots()))
home = self.define_view('/', title='Basic HTML Inputs demo')
home.set_slot('main', ExampleForm.factory('myform'))
def __init__(self, view, main_bookmarks):
super().__init__(view)
self.use_layout(PageLayout(document_layout=Container()))
contents_layout = ColumnLayout(ColumnOptions('main', ResponsiveSize(lg=6))).with_slots()
self.layout.contents.use_layout(contents_layout)
menu = Nav(view).use_layout(TabLayout()).with_bookmarks(main_bookmarks)
self.layout.header.add_child(menu)
def assemble(self):
page_layout = PageLayout(document_layout=Container(),
contents_layout=ColumnLayout(('main', ResponsiveSize(lg=6))).with_slots())
self.define_page(HTML5Page).use_layout(page_layout)
account_user_interface_factory = self.define_user_interface('/a_ui', AccountUI, {'main_slot': 'main'}, name='test_ui',
bookmarks=fixture.bookmarks)
fixture.account_user_interface_factory = account_user_interface_factory
def assemble(self):
contents_layout = ColumnLayout(
('main', ResponsiveSize(lg=6))).with_slots()
page_layout = PageLayout(contents_layout=contents_layout,
document_layout=Container())
self.define_page(HTML5Page).use_layout(page_layout)
comment = Comment()
home = self.define_view('/', title='Page flow demo')
home.set_slot('main', CommentForm.factory(comment))
thanks = self.define_view('/thanks', title='Thank you!')
thanks_text = 'Thanks for submitting your comment'
thanks.set_slot('main', P.factory(text=thanks_text))
none_submitted = self.define_view('/none', title='Nothing to say?')
none_text = 'Mmm, you submitted an empty comment??'
none_submitted.set_slot('main', P.factory(text=none_text))
self.define_transition(comment.events.submit,
home,
thanks,
guard=Action(comment.contains_text))
self.define_transition(comment.events.submit,
home,
none_submitted,
guard=Not(Action(comment.contains_text)))
def assemble(self):
page_layout = PageLayout(document_layout=Container(),
contents_layout=ColumnLayout(
('main',
ResponsiveSize(lg=6))).with_slots())
self.define_page(HTML5Page).use_layout(page_layout)
find = self.define_view('/', title='Refreshing widget')
find.set_slot('main', HomePanel.factory())
def assemble(self):
page_layout = PageLayout(
document_layout=Container(),
contents_layout=ColumnLayout(
ColumnOptions('main', size=ResponsiveSize(lg=6))).with_slots())
self.define_page(HTML5Page).use_layout(page_layout)
find = self.define_view('/', title='Addresses')
find.set_slot('main', AddressBookPanel.factory())
def __init__(self, view, main_bookmarks):
super(MenuPage, self).__init__(view)
self.use_layout(PageLayout(document_layout=Container()))
contents_layout = ColumnLayout(
('main', ResponsiveSize(md=4))).with_slots()
self.layout.contents.use_layout(contents_layout)
self.layout.header.add_child(
Nav(view).use_layout(TabLayout()).with_bookmarks(main_bookmarks))
def test_column_layout_basics(web_fixture):
"""A ColumnLayout turns its Widget into a sequence of columns, each of which is a Div laid with the given width per device class."""
layout = ColumnLayout(ColumnOptions('column_a', size=ResponsiveSize(lg=4)),
ColumnOptions('column_b', size=ResponsiveSize(lg=8)))
widget = Div(web_fixture.view)
assert not widget.has_attribute('class')
assert not widget.children
widget.use_layout(layout)
assert widget.get_attribute('class') == 'row'
column_a, column_b = widget.children
assert 'col-lg-4' in column_a.get_attribute('class')
assert 'col-lg-8' in column_b.get_attribute('class')
def test_column_offsets(web_fixture):
"""You can optionally specify space to leave empty (an offset) before a column at specific device sizes."""
layout = ColumnLayout(
ColumnOptions('column_a',
size=ResponsiveSize(xl=2),
offsets=ResponsiveSize(xs=2, sm=4, md=6, lg=3, xl=1)))
widget = Div(web_fixture.view).use_layout(layout)
[column_a] = layout.columns.values()
assert 'col-xl-2' in column_a.get_attribute('class')
assert 'offset-lg-3' in column_a.get_attribute('class')
assert 'offset-2' in column_a.get_attribute('class')
assert 'offset-sm-4' in column_a.get_attribute('class')
assert 'offset-md-6' in column_a.get_attribute('class')
assert 'offset-xl-1' in column_a.get_attribute('class')
def assemble(self):
self.define_page(HTML5Page).use_layout(
PageLayout(
document_layout=Container(),
contents_layout=ColumnLayout(
ColumnOptions('main',
size=ResponsiveSize(lg=6))).with_slots()))
home = self.define_view('/', title='Themed example')
home.set_slot('main', SomeWidget.factory())
def assemble(self):
self.define_page(HTML5Page).use_layout(
PageLayout(
document_layout=Container(),
contents_layout=ColumnLayout(
ColumnOptions('main',
size=ResponsiveSize(lg=6))).with_slots()))
home = self.define_view('/', title='Dynamic content demo')
home.set_slot('main', AllocationDetailForm.factory())
def test_responsive_size():
"""A ResponsiveSize is a way to state what size something should be on each mentioned DeviceClass."""
responsive_size = ResponsiveSize(xs=1, sm=2, lg=None)
specified_sizes = responsive_size.device_options
assert DeviceClass('lg') not in specified_sizes
assert specified_sizes == {DeviceClass('xs'): 1, DeviceClass('sm'): 2}
def assemble(self):
self.define_page(HTML5Page).use_layout(
PageLayout(
document_layout=Container(),
contents_layout=ColumnLayout(
ColumnOptions('main',
size=ResponsiveSize(lg=6))).with_slots()))
home = self.define_view('/', title='Responsive disclosure demo')
home.set_slot('main', NewInvestmentForm.factory())
def __init__(self, view):
super(CommentForm, self).__init__(view, 'myform')
self.use_layout(FormLayout())
comment = Comment()
email_input = TextInput(self, comment.fields.email_address)
self.layout.add_input(email_input)
text_input = TextInput(self, comment.fields.text)
self.layout.add_input(text_input)
layout = ColumnLayout(('left', ResponsiveSize(lg=6)),
('right', ResponsiveSize(lg=6)))
row = self.add_child(Div(view).use_layout(layout))
left_p = P(view, text='This is in the left column of the row')
row.layout.columns['left'].add_child(left_p)
right_p = P(view, text='This is in the right column of the row')
row.layout.columns['right'].add_child(right_p)
def assemble(self):
contents_layout = ColumnLayout(
ColumnOptions('main', ResponsiveSize(lg=6))).with_slots()
page_layout = PageLayout(contents_layout=contents_layout,
document_layout=Container())
self.define_page(HTML5Page).use_layout(page_layout)
self.define_user_interface('/',
PageFlowExampleUI,
name='pageflow',
slot_map={'main': 'main'})
def __init__(self, view):
super().__init__(view)
self.use_layout(
PageLayout(
document_layout=Container(),
contents_layout=ColumnLayout(
ColumnOptions('main',
size=ResponsiveSize(lg=6))).with_slots()))
navbar = Navbar(view).use_layout(NavbarLayout())
navbar.layout.set_brand_text('My Site')
self.layout.header.add_child(navbar)
def test_allowed_sizes():
"""The device classes for which sizes can be specified."""
size = ResponsiveSize(xs=1, sm=2, md=3, lg=4, xl=5)
assert size.device_options == {
DeviceClass('xs'): 1,
DeviceClass('sm'): 2,
DeviceClass('md'): 3,
DeviceClass('lg'): 4,
DeviceClass('xl'): 5
}
def adding_columns(fixture):
"""You can add additional columns after construction."""
widget = Div(fixture.view).use_layout(ColumnLayout())
vassert( not widget.children )
widget.layout.add_column(ResponsiveSize(lg=4))
[added_column] = widget.children
vassert( added_column.get_attribute('class') == 'col-lg-4' )