def _render_dom(self):
# Use this to determine the content. This method may return a
# string, a list of virtual nodes, or a single virtual node
# (which must match the type produced in _create_dom()).
return [
flx.create_element('span', {}, 'Hello',
flx.create_element('b', {}, self.name), '! '),
flx.create_element(
'span', {},
'I happen to know that your age is %i.' % self.age),
flx.create_element('br'),
flx.create_element('button', {'onclick': self.increase_age},
'Next year ...')
]
def _render_dom(self):
global window
node = [
flx.create_element(
"div",
{
"id": self.echart_id,
"style": self.echart_div_style
},
"",
),
flx.create_element(
"script",
{"type": "text/javascript"},
f"""
// based on prepared DOM, initialize echarts instance
var myChart_{self.echart_id} = echarts.init(
document.getElementById('{self.echart_id}'));
""",
),
]
self.show_chart()
return node
def _create_dom(self):
# Use this method to create a root element for this widget.
# If you just want a <div> you don't have to implement this.
return flx.create_element('div') # the default is <div>
def _render_dom(self):
""" This function gets automatically called when needed; Flexx is aware
of what properties are used here.
"""
# Create form elements
form_nodes = [
flx.create_element(
'div', {'class': 'form-group mb-2'},
flx.create_element(
'input', {
'class': 'form-control',
'id': 'inputFirstName',
'oninput':
lambda e: self.set_first_name(e.target.value)
}, 'First name')),
flx.create_element(
'div', {'class': 'form-group mx-sm-3 mb-2'},
flx.create_element(
'input', {
'class': 'form-control',
'id': 'inputLastName',
'oninput': lambda e: self.set_last_name(e.target.value)
}, 'Last name')),
flx.create_element('button', {
'class': 'btn btn-primary mb-2',
'onclick': self._button_clicked
}, 'Submit'),
]
# Create virtual DOM nodes for all persons. We use bootstrap cards
card_nodes = []
for name, info in self.persons:
person_node = flx.create_element(
'div', {'class': 'card'},
flx.create_element(
'div',
{'class': 'card-body'},
flx.create_element('h5', {'class': 'card-title'}, name),
flx.create_element('p', {'class': 'card-text'}, info),
))
card_nodes.append(person_node)
# Compose finaly DOM tree
return flx.create_element(
'div', {},
flx.create_element('div', {'class': 'form-inline'}, form_nodes),
*card_nodes)
def _render_dom(self):
""" This function gets automatically called when needed; Flexx is aware
of what properties are used here.
"""
# Create form elements
form_nodes = [
flx.create_element('div',
{'class': 'form-group mb-2'},
flx.create_element('input',
{'class': 'form-control',
'id': 'inputFirstName',
'oninput': lambda e: self.set_first_name(e.target.value)
},
'First name'
)
),
flx.create_element('div',
{'class': 'form-group mx-sm-3 mb-2'},
flx.create_element('input',
{'class': 'form-control',
'id': 'inputLastName',
'oninput': lambda e: self.set_last_name(e.target.value)
},
'Last name'
)
),
flx.create_element('button',
{'class': 'btn btn-primary mb-2',
'onclick': self._button_clicked
},
'Submit'
),
]
# Create virtual DOM nodes for all persons. We use bootstrap cards
card_nodes = []
for name, info in self.persons:
person_node = flx.create_element('div', {'class': 'card'},
flx.create_element('div', {'class': 'card-body'},
flx.create_element('h5', {'class': 'card-title'}, name),
flx.create_element('p', {'class': 'card-text'}, info),
)
)
card_nodes.append(person_node)
# Compose finaly DOM tree
return flx.create_element('div', {},
flx.create_element('div',
{'class': 'form-inline'},
form_nodes
),
*card_nodes)
def _create_dom(self):
return flx.create_element('input', {
'type': 'file',
'onchange': self.emit_change,
})
def _create_dom(self):
return flx.create_element('iframe', {'srcdoc': self.srcdoc})