How to customize widgets to act like Onsen UI components

[Bernardo Leon]

I have been researching about UI Frameworks and stumbled upon Onsen UI. It seems easy and provides good results but to use this UI Framework I need to use their components which are html tags.

If I have a field that is rendered as an html input how can I customize its widget so I can use <ons-input> instead of <input> and so on? Thank you!

[Anthony]

If you are talking about using SQLFORM with a DAL table, when you define Field objects, you can specify a custom widget via the "widget" argument -- it must be a callable object that takes a Field object and a value. For more details, see http://web2py.com/books/default/chapter/29/07/forms-and-validators#Widgets.

Also, you can create any custom HTML tag using the TAG helper:

TAG['ons-input'](_type='text', _value='hello')

produces:

<onui-input type="text" value="hello"></onui-input>

Note, if you simply use the TAG helper to generate markup, you won't get the validation behavior of the standard INPUT helper. As an alternative, you can create a custom tag based on the INPUT helper:

class OnsInput(INPUT):
    tag = 'ons-input'

You could then do:

OnsInput(_type='text', _value='hello', requires=db.myfield.requires)

The above will produce the same HTML markup, but the resulting Python object will also be able to validate its input. You could do the same for the SELECT helper.

Based on the above, you could create custom widgets -- see the various widget classes in gluon.sqlhtml. Once you've got some custom widgets, you could then monkey patch SQLFORM.widgets by overwriting some or all of its items with your custom classes -- then your custom widgets will be the defaults used by SQLFORM.

Anthony

[Bernardo Leon]

Awesome as always Anthony Thank you!

Yes I am talking about the SQLFORM Field objects.

So I will need to create a Widget by subclassing FormWidget and return the Ons tag object and later monkey patch. I will try this way. Thank you for your ideas :)

[Anthony]

On Saturday, September 16, 2017 at 4:23:43 PM UTC-4, Bernardo Leon wrote:

Awesome as always Anthony Thank you!

Yes I am talking about the SQLFORM Field objects.

So I will need to create a Widget by subclassing FormWidget and return the Ons tag object and later monkey patch. I will try this way. Thank you for your ideas :)

Note, you don't have to monkey patch SQLFORM.widgets -- that's only if you want your custom widgets to be used by default without having to do:

Field(..., widget=my_custom_widget)

Anthony

[Bernardo Leon]

You are right, thank you!