dddomodossola
commented
1 year ago Hello @tellts ,
Here is an example for you. In the following code the application handles the window resize to adapt the layout on different screen resolutions. To verify its behaviour just resize the browser screen and you will see the layout change.
import remi.gui as gui
from remi import start, App
class MyApp(App):
def main(self):
#creating a container GridBox type
self.main_container = gui.GridBox(width='100%', height='100%', style={'margin':'0px auto'})
label = gui.Label('This is a label')
label.style['background-color'] = 'lightgreen'
button = gui.Button('A button', height='100%')
text = gui.TextInput()
#defining layout matrix, have to be iterable of iterable
self.main_container.define_grid(['ab',
'ac'])
self.main_container.append({'a':label, 'b':button, 'c':text})
#setting sizes for rows and columns
self.main_container.style.update({'grid-template-columns':'10% 90%', 'grid-template-rows':'10% 90%'})
# returning the root widget
return self.main_container
def onpageshow(self, emitter, width, height):
self.onresize(emitter, width, height)
def onresize(self, emitter, width, height):
#redefining grid layout
if float(width)<float(height):
self.main_container.define_grid(['c','a','b'])
self.main_container.style.update({'grid-template-columns':'100%', 'grid-template-rows':'33% 33% 33%'})
else:
self.main_container.define_grid(['ab',
'ac'])
self.main_container.style.update({'grid-template-columns':'10% 90%', 'grid-template-rows':'10% 90%'})
if __name__ == "__main__":
# starts the webserver
start(MyApp, address='0.0.0.0', port=0, start_browser=True)
tellts
Please give examples on how to use Remy to create apps for mobile devices.