Skip to content

Commit 7055535

Browse files
FeodorFitsnerFeodorFitsner
committed
Python: Grid, Icon, Image, Stack and Text examples
1 parent 8bf8c71 commit 7055535

5 files changed

Lines changed: 328 additions & 0 deletions

File tree

‎python/controls/grid_control.py‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import pglet
2+
from pglet import Text, Stack, Grid, Column, Textbox, Checkbox, Button, Toolbar
3+
from pglet import toolbar
4+
5+
class Person():
6+
def __init__(self, first_name: str, last_name: str, age: int = None, employee: bool = False):
7+
self.first_name = first_name
8+
self.last_name = last_name
9+
self.age = age
10+
self.employee = employee
11+
12+
def main(page):
13+
page.title = "Grid example"
14+
page.update()
15+
16+
# Basic grid
17+
page.add(
18+
Text("Basic grid", size='large'),
19+
Stack(width='50%', controls=[
20+
Grid(columns=[
21+
Column(name="First name", field_name="first_name"),
22+
Column(name="Last name", field_name="last_name"),
23+
Column(name="Age", field_name="age")
24+
], items=[
25+
Person(first_name='John', last_name='Smith', age=30),
26+
Person(first_name='Samantha', last_name='Fox', age=43),
27+
Person(first_name='Alice', last_name='Brown', age=25)
28+
])
29+
])
30+
)
31+
32+
# Sortable grid
33+
page.add(
34+
Text("Sortable grid with resizable columns and selectable rows", size='large'),
35+
Grid(selection_mode='single', preserve_selection=True, columns=[
36+
Column(resizable=True, sortable='string', name="First name", field_name="first_name"),
37+
Column(resizable=True, sortable='string', sorted='asc', name="Last name", field_name="last_name"),
38+
Column(resizable=True, sortable='number', name="Age", field_name="age")
39+
], items=[
40+
Person(first_name='John', last_name='Smith', age=30),
41+
Person(first_name='Samantha', last_name='Fox', age=43),
42+
Person(first_name='Alice', last_name='Brown', age=25)
43+
])
44+
)
45+
46+
# Compact grid
47+
page.add(
48+
Text("Compact grid with no header and multiple selection", size='large'),
49+
Grid(compact=True, header_visible=False, selection_mode='multiple', preserve_selection=True, columns=[
50+
Column(max_width=100, field_name="first_name"),
51+
Column(max_width=100, field_name="last_name"),
52+
Column(max_width=100, field_name="age")
53+
], items=[
54+
Person(first_name='John', last_name='Smith', age=30),
55+
Person(first_name='Samantha', last_name='Fox', age=43),
56+
Person(first_name='Alice', last_name='Brown', age=25)
57+
])
58+
)
59+
60+
# Dynamic grid
61+
grid = None
62+
63+
def delete_records(e):
64+
for r in grid.selected_items:
65+
grid.items.remove(r)
66+
page.update()
67+
68+
delete_records = toolbar.Item(text="Delete records", icon='Delete', disabled=True, on_click=delete_records)
69+
grid_toolbar = Toolbar(items=[
70+
delete_records
71+
])
72+
73+
def grid_items_selected(e):
74+
delete_records.disabled = (len(e.control.selected_items) == 0)
75+
delete_records.update()
76+
77+
grid = Grid(selection_mode='multiple', compact=True, header_visible=True, columns=[
78+
Column(name='First name', template_controls=[
79+
Textbox(value="{first_name}")
80+
]),
81+
Column(name='Last name', template_controls=[
82+
Textbox(value="{last_name}")
83+
]),
84+
Column(name='Age', template_controls=[
85+
Text(value="{age}")
86+
]),
87+
Column(name='Is employee', template_controls=[
88+
Checkbox(value_field="employee")
89+
])
90+
], items=[
91+
Person(first_name='John', last_name='Smith', age=30, employee=False),
92+
Person(first_name='Jack', last_name='Brown', age=43, employee=True),
93+
Person(first_name='Alice', last_name='Fox', age=25, employee=False)
94+
], margin=0, on_select=grid_items_selected)
95+
96+
first_name = Textbox('First name')
97+
last_name = Textbox('Last name')
98+
age = Textbox('Age')
99+
100+
def add_record(e):
101+
grid.items.append(Person(first_name=first_name.value, last_name=last_name.value, age=age.value, employee=True))
102+
first_name.value = ''
103+
last_name.value = ''
104+
age.value = ''
105+
page.update()
106+
107+
page.add(
108+
Text("Dynamic grid with template columns", size='large'),
109+
grid_toolbar,
110+
grid,
111+
Text("Add new employee record", size='medium'),
112+
Stack(horizontal=True, controls=[
113+
first_name,
114+
last_name,
115+
age
116+
]),
117+
Button("Add record", on_click=add_record)
118+
)
119+
120+
pglet.app("python-grid", target=main)

‎python/controls/icon_control.py‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import pglet
2+
from pglet import Stack, Icon
3+
4+
def main(page):
5+
page.title = "Icons example"
6+
page.gap = 20
7+
page.update()
8+
9+
page.add(
10+
Stack(horizontal=True, controls=[
11+
Icon("ChangeEntitlements", color='Magenta20'),
12+
Icon("shop", color='CyanBlue10'),
13+
Icon("TrainSolid")
14+
]),
15+
Stack(horizontal=True, vertical_align='center', controls=[
16+
Icon("BlockedSite", color='Orange20', size=25),
17+
Icon("settings", color='Gray20', size=50),
18+
Icon("save", color='Blue10', size=100)
19+
])
20+
)
21+
22+
pglet.app("python-icon", target=main)

‎python/controls/image_control.py‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import pglet
2+
from pglet import Text, Image
3+
4+
def main(page):
5+
page.title = "Images example"
6+
page.gap = 20
7+
page.update()
8+
9+
page.add(
10+
Image(src='http://placehold.it/350x150', title='sample image', alt='Example with no image fit value and no height or width is specified.'),
11+
Image(src='http://placehold.it/350x150', width=600, title='sample image', alt='Example with no image fit value and only width is specified.'),
12+
Image(src='http://placehold.it/350x150', height=100, title='sample image', alt='Example with no image fit value and only height is specified.'),
13+
Image(src='http://placehold.it/350x150', width=100, height=100, title='sample image', alt='Example with no image fit value and height or width is specified.')
14+
)
15+
16+
pglet.app("python-image", target=main)

‎python/controls/stack_control.py‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import pglet
2+
from pglet import Stack, Text, Textbox, Slider, Message
3+
4+
def main(page):
5+
6+
page.title = "Stack example"
7+
page.horizontal_align = 'stretch'
8+
page.update()
9+
10+
bg_color = '#ddddee'
11+
12+
def items(count):
13+
items = []
14+
for i in range(1, count + 1):
15+
items.append(Text(value=i, align='center', vertical_align='center', width=30, height=30, bgcolor='CyanBlue10', color='white', padding=5))
16+
return items
17+
18+
def create_horizontal_stack(horiz_align):
19+
return Stack(controls=[
20+
Text(value=horiz_align),
21+
Stack(horizontal=True, horizontal_align=horiz_align, vertical_align='center', gap=20, bgcolor=bg_color, controls=items(3))
22+
])
23+
24+
def create_vertical_stack(vert_align):
25+
return Stack(width='20%', controls=[
26+
Text(value=vert_align),
27+
Stack(vertical_align=vert_align, horizontal_align='center', height=300, gap=20, bgcolor=bg_color, controls=items(3))
28+
])
29+
30+
# Gap, padding
31+
spacing_stack = Stack(horizontal=True, bgcolor=bg_color, gap=0, controls=items(5))
32+
33+
def gap_slider_change(e):
34+
spacing_stack.gap = int(e.control.value)
35+
spacing_stack.update()
36+
gap_slider = Slider("Gap between items", min=0, max=50, step=1, value=0, show_value=True, on_change=gap_slider_change)
37+
38+
def padding_slider_change(e):
39+
spacing_stack.padding = e.control.value
40+
spacing_stack.update()
41+
padding_slider = Slider("Stack padding", min=0, max=50, step=1, value=0, show_value=True, on_change=padding_slider_change)
42+
43+
page.add(
44+
Text("Horizontal stack - Gap and Padding", size='xLarge'),
45+
gap_slider,
46+
padding_slider,
47+
spacing_stack
48+
)
49+
50+
# Wrapping
51+
wrap_stack = Stack(horizontal=True, wrap=True, bgcolor=bg_color, gap=20, controls=items(10))
52+
def wrap_slider_change(e):
53+
width = int(e.control.value)
54+
wrap_stack.width = f"{width}%"
55+
wrap_stack.update()
56+
wrap_slider = Slider("Change the stack width to see how child items wrap onto multiple rows:",
57+
min=0, max=100, step=10, value=100, show_value=True, value_format='{value}%', on_change=wrap_slider_change)
58+
59+
page.add(
60+
Text("Horizontal stack - Wrapping", size='xLarge'),
61+
wrap_slider,
62+
wrap_stack
63+
)
64+
65+
# Horizontal stack
66+
page.add(
67+
Text("Horizontal stack - Horizontal Alignments", size='xLarge'),
68+
create_horizontal_stack('start'),
69+
create_horizontal_stack('center'),
70+
create_horizontal_stack('end'),
71+
create_horizontal_stack('space-between'),
72+
create_horizontal_stack('space-around'),
73+
create_horizontal_stack('space-evenly'),
74+
75+
Text("Horizontal stack - Vertical Alignments", size='xLarge'),
76+
Text('start'),
77+
Stack(horizontal=True, vertical_align='start', height=100, bgcolor=bg_color, gap=20, controls=items(3)),
78+
Text('center'),
79+
Stack(horizontal=True, vertical_align='center', height=100, bgcolor=bg_color, gap=20, controls=items(3)),
80+
Text('end'),
81+
Stack(horizontal=True, vertical_align='end', height=100, bgcolor=bg_color, gap=20, controls=items(3))
82+
)
83+
84+
# Vertical stack
85+
page.add(
86+
Text("Vertical stack - Vertical Alignments", size='xLarge'),
87+
Stack(horizontal=True, horizontal_align='space-between', width='100%', controls=[
88+
create_vertical_stack('start'),
89+
create_vertical_stack('center'),
90+
create_vertical_stack('end'),
91+
create_vertical_stack('space-between'),
92+
create_vertical_stack('space-around'),
93+
create_vertical_stack('space-evenly')
94+
])
95+
)
96+
97+
# Stack submit
98+
def stack_on_submit(e):
99+
stack = e.control
100+
stack.controls.insert(0, Message("Form has been submitted!", type='success', dismiss=True))
101+
stack.update()
102+
103+
form1 = Stack(padding=10, width='50%', border='2px solid #eee', border_radius=5, controls=[
104+
Text("Pressing ENTER inside the stack will fire 'submit' event."),
105+
Textbox("First name"),
106+
Textbox("Last name")
107+
], on_submit=stack_on_submit)
108+
109+
page.add(
110+
Text("Stack with Submit event", size='xLarge'),
111+
form1
112+
)
113+
114+
pglet.app("python-stack", target=main)

‎python/controls/text_control.py‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import pglet
2+
from pglet import Stack, Text
3+
4+
def main(page):
5+
6+
page.add(
7+
Text('Squares', size='large'),
8+
Stack(horizontal=True, controls=[
9+
Text('left top', align='left', vertical_align='top', width=100, height=100, bgcolor='salmon', color='white', padding=5),
10+
Text('center top', align='center', vertical_align='top', width=100, height=100, bgcolor='salmon', color='white', padding=5, size='large', border='1px solid #555'),
11+
Text('right top', align='right', vertical_align='top', width=100, height=100, bgcolor='salmon', color='white', padding=5, border='2px solid #555')
12+
]),
13+
Stack(horizontal=True, controls=[
14+
Text('left center', align='left', vertical_align='center', width=100, height=100, bgcolor='PaleGoldenrod', padding=5),
15+
Text('center center', align='center', vertical_align='center', width=100, height=100, bgcolor='PaleGoldenrod', padding=5, size='large', border='1px solid #555'),
16+
Text('right center', align='right', vertical_align='center', width=100, height=100, bgcolor='PaleGoldenrod', padding=5, border='2px solid #555')
17+
]),
18+
Stack(horizontal=True, controls=[
19+
Text('left bottom', align='left', vertical_align='center', width=100, height=100, bgcolor='PaleGreen', padding=5),
20+
Text('center bottom', align='center', vertical_align='center', width=100, height=100, bgcolor='PaleGreen', padding=5, size='large', border='1px solid #555'),
21+
Text('right bottom', align='right', vertical_align='center', width=100, height=100, bgcolor='PaleGreen', padding=5, border='2px solid #555')
22+
]),
23+
Text('Circles', size='large'),
24+
Stack(horizontal=True, controls=[
25+
Text('regular', align='center', vertical_align='center', width=100, height=100, border_radius=50, bgcolor='salmon'),
26+
Text('bold italic', bold=True, italic=True, align='center', vertical_align='center', width=100, height=100, border_radius=50, bgcolor='PaleGoldenrod', size='large', border='1px solid #555'),
27+
Text('bold', bold=True, align='center', vertical_align='center', width=100, height=100, border_radius=50, bgcolor='PaleGreen', border='2px solid #555')
28+
]),
29+
Text('Markdown', size='large'),
30+
Text('''
31+
# GitHub Flavored Markdown
32+
33+
## Autolink literals
34+
35+
www.example.com, https://example.com, and contact@example.com.
36+
37+
## Strikethrough
38+
39+
~one~ or ~~two~~ tildes.
40+
41+
### Code sample
42+
43+
```
44+
import pglet
45+
page = page.page()
46+
```
47+
48+
## Table
49+
50+
| a | b | c | d |
51+
| - | :- | -: | :-: |
52+
53+
''', markdown=True)
54+
)
55+
56+
pglet.app("python-text", target=main)

0 commit comments

Comments
 (0)