def init(self): with ui.BoxPanel(): with ui.FormLayout() as self.form: self.b1 = ui.Button(title='Name:', text='Hola') self.b2 = ui.Button(title='Age:', text='Hello world') self.b3 = ui.Button(title='Favorite color:', text='Foo bar') with ui.FormLayout() as self.form: self.b4 = ui.Button(title='Name:', text='Hola') self.b5 = ui.Button(title='Age:', text='Hello world') self.b6 = ui.Button(title='Favorite color:', text='Foo bar') ui.Widget(flex=1) # Add a flexer
def init(self): with ui.HFix(): with ui.FormLayout() as self.form: self.b1 = ui.LineEdit(title='Name:', text='Hola') self.b2 = ui.LineEdit(title='Age:', text='Hello world') self.b3 = ui.LineEdit(title='Favorite color:', text='Foo bar') ui.Button(text='Submit') with ui.FormLayout() as self.form: self.b4 = ui.LineEdit(title='Name:', text='Hola') self.b5 = ui.LineEdit(title='Age:', text='Hello world') self.b6 = ui.LineEdit(title='Favorite color:', text='Foo bar') ui.Button(text='Submit') ui.Widget(flex=1) # Add a spacer
def init(self): # Two ways to add assets if True: # The client will load these assets from the URL's. Good for web apps. self.session.use_remote_asset( "http://code.jquery.com/jquery-1.10.2.js") self.session.use_remote_asset( "http://code.jquery.com/ui/1.11.4/jquery-ui.js") self.session.use_remote_asset( "http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" ) else: # Flexx will download the assets and serve them to the client. Good for desktop/exported apps. self.session.add_global_asset( "jquery.js", "http://code.jquery.com/jquery-1.10.2.js") self.session.add_global_asset( "jquery-ui.js", "http://code.jquery.com/ui/1.11.4/jquery-ui.js") self.session.add_global_asset( "jquery-ui.css", "http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" ) with ui.FormLayout(): self.start = DatePicker(title='Start date') self.end = DatePicker(title='End date') ui.Widget(flex=1)
def init(self): with ui.SplitPanel(): self.plot1 = ui.BokehWidget(plot=p1, title='Scatter') with ui.VBox(title='Sine'): with ui.FormLayout(): self.amp = ui.Slider(title='Amplitude', max=2, value=1) self.freq = ui.Slider(title='Frequency', max=10, value=5) self.phase = ui.Slider(title='Phase', max=3, value=1) with ui.Widget(style='overflow-y:auto;', flex=1): self.plot2 = ui.BokehWidget(plot=p2) self.plot3 = ui.BokehWidget(plot=p3)
def init(self): with ui.VBoxLayout(): with ui.FormLayout(spacing=1): ui.Label(self, 'Name') self._name = ui.TextInput(self) ui.Label(self, 'Age') self._age = ui.IntInput(self) with ui.HBoxLayout(): ui.Widget(self, flex=1) # spacer ui.Button(self, 'Cancel', on_click=self.close, flex=0) ui.Button(self, 'Ok', on_click=self.process, flex=0)
def init(self): with ui.HBox(spacing=20): with ui.FormLayout() as self.form: # todo: can this be written with one line per row? # e.g. self.b1 = ui.Button(label='Name', text='Hola') ui.Label(text='Name:') self.b1 = ui.Button(text='Hola') ui.Label(text='Age:') self.b2 = ui.Button(text='Hello world') ui.Label(text='Favorite color:') self.b3 = ui.Button(text='Foo bar') #ui.Widget(flex=1) with ui.FormLayout() as self.form: # e.g. self.b1 = ui.Button(label='Name', text='Hola') ui.Widget(flex=1) # Add a flexer ui.Widget() ui.Label(text='Pet name:') self.b1 = ui.Button(text='Hola') ui.Label(text='Pet Age:') self.b2 = ui.Button(text='Hello world') ui.Label(text='Pet\'s Favorite color:') self.b3 = ui.Button(text='Foo bar') ui.Widget(flex=2)
def init(self): with ui.DockPanel(): self.plot1 = ui.BokehWidget(plot=p1, title='Scatter') with ui.VBox(title='Sine'): with ui.FormLayout(): self.amp = ui.Slider(title='Amplitude', max=2, value=1) self.freq = ui.Slider(title='Frequency', max=10, value=5) self.phase = ui.Slider(title='Phase', max=3, value=1) with ui.Widget(style='overflow-y:auto;', flex=1): self.plot2 = ui.BokehWidget(plot=p2) self.plot3 = ui.BokehWidget(plot=p3) # Add some colorful panels just for fun ui.Label(title='Info', text='Source is <a href="%s">%s</a>' % (src, src)) ui.Widget(style='background:#0a0;', title='green') ui.Widget(style='background:#00a;', title='blue')
def init(self): with ui.TabLayout(): self.encrypt = ui.Widget(title='加密') with self.encrypt: with ui.FormLayout(): self.l1 = ui.Label(text='请输入需加密的文本:') self.e1 = ui.LineEdit(title='', text='') self.l2 = ui.Label(text='请输入加密密匙:') self.e2 = ui.LineEdit(title='', text='', password_mode=True) self.l3 = ui.Label(text='请再输入一次加密密匙:') self.e3 = ui.LineEdit(title='', text='', password_mode=True) self.b1 = ui.Button(text='提交') self.l4 = ui.Label(text='') self.l5 = ui.Label(text='') ui.Widget(flex=1) self.decrypt = ui.Widget(title='解密') with self.decrypt: pass
def init(self): with ui.FormLayout(): self.start = DatePicker(title='Start date') self.end = DatePicker(title='End date') ui.Widget(flex=1)
def init(self): #self.b0 = ui.Button(self, 'This is behind the box layout') TEST = 11 if TEST == 0: ui.Button(text='Hola', flex=1) if TEST == 1: with ui.BoxPanel(flex=1) as self.hbox1: # self.b1 = ui.Widget(flex=1, style='background: #a22;', min_size=(100, 100), max_size=(500,0)) # self.b2 = ui.Widget(flex=0, style='background: #2a2;', min_size=(100, 0), max_size=(500,0)) # self.b3 = ui.Widget(flex=0, style='background: #22a;', min_size=(100, 0), max_size=(500,0)) # self.b4 = ui.Widget(flex=1, style='background: #aaa;', min_size=(100, 0), max_size=(500,0)) self.b1 = ui.Widget(flex=1, style='background: #a22; min-width:100px; max-width:500px') self.b2 = ui.Widget(flex=0, style='background: #2a2; min-width:100px; max-width:500px') self.b3 = ui.Widget(flex=0, style='background: #22a; min-width:100px; max-width:500px') self.b4 = ui.Widget(flex=1, style='background: #aaa; min-width:100px; max-width:500px') if TEST == 2: with self: with ui.HBox(): ui.Widget(flex=1) with ui.VBox(flex=1) as self.vbox: ui.Label(text='Flex 0 0 0', flex=0) with ui.HBox(flex=0) as self.hbox1: self.b1 = ui.Button(text='Hola', flex=0) self.b2 = ui.Button(text='Hello world', flex=0) self.b3 = ui.Button(text='Foo bar', flex=0) ui.Label(text='Flex 1 0 3', flex=0) with ui.HBox(flex=0) as self.hbox2: self.b1 = ui.Button(text='Hola', flex=1) self.b2 = ui.Button(text='Hello world', flex=0) self.b3 = ui.Button(text='Foo bar', flex=3) ui.Label(text='margin 20 (around layout)', flex=0) with ui.HBox(flex=0, margin=20) as self.hbox3: self.b1 = ui.Button(text='Hola', flex=1) self.b2 = ui.Button(text='Hello world', flex=1) self.b3 = ui.Button(text='Foo bar', flex=1) ui.Label(text='spacing 20 (inter-widget)', flex=0) with ui.HBox(flex=0, spacing=20) as self.hbox3: self.b1 = ui.Button(text='Hola', flex=1) self.b2 = ui.Button(text='Hello world', flex=1) self.b3 = ui.Button(text='Foo bar', flex=1) ui.Widget(flex=1) ui.Label(text='Note the spacer Widget above', flex=0) if TEST == 3: with ui.HBox(spacing=20): with ui.FormLayout() as self.form: # e.g. self.b1 = ui.Button(label='Name', text='Hola') self.b1 = ui.Button(title='Name:', text='Hola') self.b2 = ui.Button(title='Age:', text='Hello world') self.b3 = ui.Button(title='Favorite color:', text='Foo bar') with ui.FormLayout() as self.form: # e.g. self.b1 = ui.Button(label='Name', text='Hola') ui.Widget(flex=1) # Add a flexer self.b1 = ui.Button(title='Name:', text='Hola') self.b2 = ui.Button(title='Age:', text='Hello world') self.b3 = ui.Button(title='Favorite color:', text='Foo bar') ui.Widget(flex=1) if TEST == 4: with ui.GridPanel() as self.grid: self.b1 = ui.Button(text='No flex', pos=(0, 0)) self.b2 = ui.Button(text='Hola', pos=(1, 1), flex=(1, 1)) self.b3 = ui.Button(text='Hello world', pos=(2, 2), flex=(2, 1)) self.b4 = ui.Button(text='Foo bar', pos=(4, 4), flex=(1, 2)) self.b5 = ui.Button(text='no flex again', pos=(5, 5)) if TEST == 5: with ui.SplitPanel(): ui.Widget(style='background:#aaa;') with ui.PinboardLayout() as self.grid: self.b1 = ui.Button(text='Stuck at (20, 20)', pos=(20, 30)) self.b2 = ui.Button(text='Dynamic at (20%, 20%)', pos=(0.2, 0.2)) self.b3 = ui.Button(text='Dynamic at (50%, 70%)', pos=(0.5, 0.7)) with ui.DockPanel(pos=(0.5, 0.5), size=(0.3, 0.3)) as self.d: self.a = ui.Widget(style='background:#a00;') self.b = ui.Widget(style='background:#0a0;') self.c = ui.Widget(style='background:#00a;') if TEST == 6: with ui.SplitPanel(): self.a = ui.Button(text='Right A', style='min-width:120px') self.b = ui.Button(text='Right B', style='min-width:70px') with ui.SplitPanel(orientation='v'): self.c = ui.Button(text='Right C') self.d = ui.Button(text='Right D') with ui.DockPanel(): ui.Slider(title='slider') ui.LineEdit(title='edit', text='AAA') self.g = ui.ProgressBar(title='progress', value=0.4) if TEST == 7: with ui.HBox(): ui.Button(text='Button in hbox', flex=0) with ui.SplitPanel(flex=1, orientation='v'): ui.Button(text='Button in splitter', style='min-width:100px') with ui.HBox(style='min-width:100px'): ui.Button(text='Right A', flex=0, style='background:#f00; padding:2em;') ui.Button(text='Right B', flex=1) ui.Button(text='Right C', flex=2) if TEST == 8: with ui.MenuBar(self): with ui.MenuItem(text='File'): ui.MenuItem(text='New') ui.MenuItem(text='Open') ui.MenuItem(text='Save') with ui.MenuItem(text='Edit'): ui.MenuItem(text='Cut') ui.MenuItem(text='Copy') ui.MenuItem(text='Paste') if TEST == 9: with ui.VBox(): ui.Button(text='AAA', flex=0) with ui.SplitPanel(flex=1, orientation='v'): ui.Button(text='CCC') ui.Button(text='DDD') self.e = ui.Button(text='EEE') ui.Button(text='BBB', flex=1) if TEST == 10: with ui.TabPanel(): self.a = ui.Widget(title='red', style='background:#a00;') self.b = ui.Widget(title='green', style='background:#0a0;') self.c = ui.Widget(title='blue', style='background:#00a;') if TEST == 11: with ui.BoxPanel(spacing=10): with ui.GridPanel() as self.g1: self.a = ui.Widget(style='background:#a00;', pos=(0, 0), flex=1) self.b = ui.Widget(style='background:#0a0;', pos=(1, 0)) self.c = ui.Widget(style='background:#00a; min-width:200px; min-height:200px', pos=(1, 1)) with ui.GridPanel() as self.g2: self.a = ui.Widget(style='background:#a00;', pos=(0, 0), flex=2) self.b = ui.Widget(style='background:#0a0; max-width:100px;', pos=(1, 0), flex=1) self.c = ui.Widget(style='background:#00a;', pos=(1, 1), flex=1) if TEST == 12: with ui.HBox(): with ui.VBox(): self.buta = ui.Button(text='red') self.butb = ui.Button(text='green') self.butc = ui.Button(text='blue') with ui.StackedPanel(flex=1) as self.stack: self.a = ui.Widget(style='background:#a00;') self.b = ui.Widget(style='background:#0a0;') self.c = ui.Widget(style='background:#00a;')
def init(self): #self.b0 = ui.Button(self, 'This is behind the box layout') TEST = 3 if TEST == 1: with ui.VBox(self, flex=1) as self.hbox1: self.b1 = ui.Button(text='Hola', flex=1) self.b2 = ui.Button(text='Hello world', flex=0) self.b2 = ui.Button(text='Hello world', flex=0) self.b2 = ui.Button(text='Hello world', flex=0) self.b3 = ui.Button(text='Foo bar', flex=1) if TEST == 2: with self: with ui.HBox(): ui.Widget(flex=1) with ui.VBox(flex=0) as self.vbox: ui.Label(text='Flex 0 0 0', flex=0) with ui.HBox(flex=0) as self.hbox2: self.b1 = ui.Button(text='Hola', flex=0) self.b2 = ui.Button(text='Hello world', flex=0) self.b3 = ui.Button(text='Foo bar', flex=0) ui.Label(text='Flex 1 0 3', flex=0) with ui.HBox(flex=0) as self.hbox1: self.b1 = ui.Button(text='Hola', flex=1) self.b2 = ui.Button(text='Hello world', flex=0) self.b3 = ui.Button(text='Foo bar', flex=3) ui.Label(text='margin 10 (around layout)', flex=0) with ui.HBox(flex=0, margin=10) as self.hbox2: self.b1 = ui.Button(text='Hola', flex=0) self.b2 = ui.Button(text='Hello world', flex=0) self.b3 = ui.Button(text='Foo bar', flex=0) ui.Label(text='spacing 10 (inter-widget)', flex=0) with ui.HBox(flex=0, spacing=10) as self.hbox2: self.b1 = ui.Button(text='Hola', flex=0) self.b2 = ui.Button(text='Hello world', flex=0) self.b3 = ui.Button(text='Foo bar', flex=0) ui.Widget(flex=1) ui.Label(text='Note the spacer Widget above', flex=0) if TEST == 3: with ui.HBox(self, spacing=20): with ui.FormLayout() as self.form: # todo: can this be written with one line per row? # e.g. self.b1 = ui.Button(label='Name', text='Hola') ui.Label(text='Name:') self.b1 = ui.Button(text='Hola') ui.Label(text='Age:') self.b2 = ui.Button(text='Hello world') ui.Label(text='Favorite color:') self.b3 = ui.Button(text='Foo bar') with ui.FormLayout() as self.form: # e.g. self.b1 = ui.Button(label='Name', text='Hola') ui.Widget(flex=1) # Add a flexer ui.Widget() ui.Label(text='Pet name:') self.b1 = ui.Button(text='Hola') ui.Label(text='Pet Age:') self.b2 = ui.Button(text='Hello world') ui.Label(text='Pet\'s Favorite color:') self.b3 = ui.Button(text='Foo bar') ui.Widget(flex=1) ui.Widget() if TEST == 4: with ui.GridLayout(self) as self.grid: self.b1 = ui.Button(text='No flex', pos=(0, 0)) self.b2 = ui.Button(text='Hola', pos=(1, 1), flex=(1, 1)) self.b3 = ui.Button(text='Hello world', pos=(2, 2), flex=(2, 1)) self.b4 = ui.Button(text='Foo bar', pos=(4, 4), flex=(1, 2)) self.b5 = ui.Button(text='no flex again', pos=(5, 5)) if TEST == 5: with ui.PinboardLayout(self) as self.grid: self.b1 = ui.Button(text='Stuck at (20, 20)', pos=(20, 30)) self.b2 = ui.Button(text='Dynamic at (20%, 20%)', pos=(0.2, 0.2)) self.b3 = ui.Button(text='Dynamic at (50%, 70%)', pos=(0.5, 0.7)) if TEST == 6: with ui.HSplitter(self): ui.Button(text='Right A', min_size=(120, 0)) ui.Button(text='Right B', min_size=(70, 0)) ui.Button(text='Right C') # ui.Button(text='Right D', flex=2) # ui.Button(text='Right E', flex=2) # ui.Button(text='Right F', flex=2) if TEST == 7: with ui.HBox(self): ui.Button(text='Button in hbox', flex=0) with ui.HSplit(flex=1): ui.Button(text='Button in splitter', min_size=(100, 0)) with ui.HBox(min_size=(100, 0)): ui.Button(text='Right A', flex=0, css='background:#f00; padding:2em;') ui.Button(text='Right B', flex=1) ui.Button(text='Right C', flex=2) if TEST == 8: with ui.MenuBar(self): with ui.MenuItem(text='File'): ui.MenuItem(text='New') ui.MenuItem(text='Open') ui.MenuItem(text='Save') with ui.MenuItem(text='Edit'): ui.MenuItem(text='Cut') ui.MenuItem(text='Copy') ui.MenuItem(text='Paste')
def init(self): def head_table(table): with table: with ui.html.thead(): with ui.html.tr(): ui.html.th(text="track") ui.html.th(text="title") ui.html.th(text="album") ui.html.th(text="artist") with ui.html.tfoot(): with ui.html.tr(): ui.html.th(text="track") ui.html.th(text="title") ui.html.th(text="album") ui.html.th(text="artist") self.progress = ui.ProgressBar(value=0, flex=0, style="display: none;") with ui.TabPanel(flex=0.9) as self.tab: with ui.HBox(title="Search") as self.search_widget: with ui.VBox(flex=0.3): ui.Label(style="font-size: 0.5em;", text="A and B => A/B; A or B => A , B") with ui.HBox(flex=0.1): ui.Label(text="Query", flex=0) self.search_query = ui.LineEdit(text="", flex=1) self.search_button = ui.Button(text="Search", flex=0.5) with ui.HBox(flex=0.5): self.put_to_cache = ui.Button(text="Put to cache") self.select_all = ui.Button(text="Select all") self.select_none = ui.Button(text="Select none") with ui.Layout(css_class="table", flex=0.7): self.search_results = ui.html.table() head_table(self.search_results) with ui.HBox(title="Play"): with ui.VBox(flex=0.1): with ui.HBox(): ui.Label(text="cache", flex=0) self.cache_list = ui.ComboBox(editable=True, flex=1) with ui.HBox(flex=0.1): self._reset_cache = ui.Button(text="↻", flex=0.2) self.remove = ui.Button(text="🗑", flex=0.1) with ui.HBox(flex=1): self.play_button = ui.Button(text="▶☛", flex=0.2) self.show_button = ui.Button(text="☝", flex=0.1) with ui.HBox(flex=0.1): self.toggle_button = ui.ToggleButton(text="▶", flex=0.2) self.shuffle_button = ui.ToggleButton(text="🎲", flex=0.2) self.repeat_button = ui.ToggleButton(text="🔁", flex=0.1) with ui.HBox(flex=0.2): self.prev_button = ui.Button(text="⏮", flex=0.7) self.seekbackward_button = ui.Button(text="⏪", flex=0.2) self.seekforward_button = ui.Button(text="⏩", flex=0.2) self.next_button = ui.Button(text="⏭", flex=0.7) ui.Label(text="Speed") with ui.HBox(flex=0.2): self.slower = ui.Button(text="-", flex=0.7) self.playback_rate = ui.LineEdit(text="1", style="width: 2em;") self.faster = ui.Button(text="+", flex=0.7) with ui.Layout(css_class="table", flex=0.6): self.cache = ui.html.table(flex=0.5) head_table(self.cache) with ui.FormLayout(title="Cache"): self.clear_cache = ui.Button(text="Clear cache", flex=0) self.remove_cache = ui.Button(text="Remove cache", flex=0) with ui.HBox(flex=0): self.estimate = ui.Label() self.update_estimate = ui.Button(text="Update estimate") self.quota_request = ui.LineEdit(text="100") self.quota_request_button = ui.Button(text="Request quota") with ui.HBox(flex=0): self.cache_old_name = ui.Label() self.cache_new_name = ui.LineEdit(text="") self.rename_cache = ui.Button(text="Rename cache", flex=0) with ui.FormLayout(title="Config"): self.update = ui.Button(text="Update", flex=1) self._beet_url = ui.LineEdit(title="Beet url") self._beet_username = ui.LineEdit(title="Username") self._beet_password = ui.LineEdit(title="Password", password_mode=True) with ui.HBox(flex=0): self.audio = ui.html.audio(flex=1) with ui.HBox(flex=0): self.time_min = ui.Label(text="15", flex=0.1) ui.Label(text="min", flex=0.1) self.time_sec = ui.Label(text="00", flex=0.1) ui.Label(text="s", flex=0.1) self.timeminus = ui.Button(text="-1", flex=0.5) self.timeplus = ui.Button(text="+1", flex=0.5) self.run_timer = ui.ToggleButton(text="Run", flex=0.5) self.timereset = ui.Button(text="Reset", flex=0.5)