gi0baro
commented
1 week ago Hi @barendburger, the idea behind the FormStyle class is to customise form items using Emmett's html builtin helpers.
In emmett form elements are divided by field type, so you have individual widget functions to return the relevant HTML. A very rough example of a bootstrap style for Emmett forms might look like this:
from emmett.forms import FormStyle
from emmett.html import tag
class BSFormStyle(FormStyle):
@staticmethod
def widget_bool(attr, field, value, _id=None):
return FormStyle.widget_bool(attr, field, value, _class="bool checkbox", _id=_id)
def on_start(self):
self.parent = tag.fieldset()
def style_widget(self, widget):
wtype = widget['_class'].split(' ')[0]
if wtype not in ["bool", "upload_wrap", "input-group"]:
widget['_class'] += " form-control"
def create_label(self, label):
wid = self.element.widget['_id']
return tag.label(label, _for=wid, _class='col-sm-2 control-label')
def create_comment(self, comment):
return tag.p(comment, _class='help-block')
def create_error(self, error):
return tag.p(error, _class='text-danger')
def add_widget(self, widget):
_class = 'form-group'
label = self.element.label
wrapper = tag.div(widget, _class='col-sm-10')
if self.element.error:
wrapper.append(self.element.error)
_class += ' has-error'
if self.element.comment:
wrapper.append(self.element.comment)
self.parent.append(tag.div(label, wrapper, _class=_class))
def add_buttons(self):
submit = tag.input(_type='submit', _value=self.attr['submit'], _class='btn btn-primary')
buttons = tag.div(submit, _class="col-sm-10 col-sm-offset-2")
self.parent.append(tag.div(buttons, _class='form-group'))
def render(self):
self.attr['_class'] = self.attr.get('_class', 'form-horizontal')
return super().render(self)this should give you an idea on how it works. The only widget implement here is for boolean fields, but you can use the same approach for, let's say, add date pickers implementing the relevant widget_date static method.
There's also a very old extension to Emmett pre-2.0 here (https://github.com/gi0baro/weppy-bs3). It won't work with Emmett directly, but should give you more details on how to put everything together!
barendburger
I'm at best an intermediate on the Python side. I'm busy doing an app using Bootstrap, and want to get my forms styled, but this section in the docs is just not giving me enough to make a start.
Customizing forms Good applications also need good styles. This is why Emmett forms allows you to set a specific style with the formstyle attribute. But how should you edit the style of your form?
Well, in Emmett, the style of a form is decided by the FormStyle class._
Can anyone please provide some code samples on how to get my forms styled with Bootstrap css classes at the highest possible level in the app, ie, I would rather specifiy things once, than having to inject every time I call a form. But at this point I won't be picky, either approach will work for me.
I'll commit to contribute my learnings to that section in the doicuments, if I can just get started. I've spent way too many hours at this point trying to get this done by myself.