Textual is a Python framework for creating Textual content Primarily based person interfaces (TUIs). You may create graphical person interfaces in your terminal with Textual.
If you happen to haven’t heard of Textual earlier than, try An Intro to Textual – Creating Textual content Person Interfaces with Python
On this tutorial, you’ll discover ways to create and magnificence a type. The shape received’t do something, however this tutorial teaches how one can add widgets, lay them out, after which give them some type.
Getting Began
If you happen to don’t have Textual but, you will need to set up it. Textual will not be built-in to Python, so you need to use pip to get it in your machine.
Open up your terminal and run the next command to put in Textual:
python -m pip set up textual
Now you’re able to rock!
Making a Type in Textual
You at the moment are prepared to begin coding with Textual. Open up your favourite Python editor and create a brand new file named type.py.
Then enter the next code:
# type.py
from textual.app import App, ComposeResult
from textual.containers import Heart
from textual.display screen import Display
from textual.widgets import Button, Footer, Header, Enter, Static
class Type(Static):
def compose(self) -> ComposeResult:
"""
Creates the principle UI components
"""
yield Enter(id="first_name", placeholder="First Title")
yield Enter(id="last_name", placeholder="Final Title")
yield Enter(id="tackle", placeholder="Deal with")
yield Enter(id="metropolis", placeholder="Metropolis")
yield Enter(id="state", placeholder="State")
yield Enter(id="zip_code", placeholder="Zip Code")
yield Enter(id="e-mail", placeholder="e-mail")
with Heart():
yield Button("Save", id="save_button")
class AddressBookApp(App):
def compose(self) -> ComposeResult:
"""
Lays out the principle UI elemens plus a header and footer
"""
yield Header()
yield Type()
yield Footer()
if __name__ == "__main__":
app = AddressBookApp()
app.run()
Right here, you import all the fine details you’ll have to create your type. You should use the Static class to group collectively a number of widgets. Consider it as a container-widget.
You create the Type() class to comprise most of your type’s widgets. You’ll compose a sequence of textual content enter widgets the place customers can fill of their title and tackle data. There’s additionally a reference to one thing referred to as Heart(), an precise container in Textual that helps you align widgets.
Subsequent, within the AddressBookApp() class, you create a header, the shape, and a footer. Now you might be able to run can run your code.
Open up your terminal once more and use the next command:
python type.py
Once you run your code, you will note one thing like the next:
The default colours work, however you might need to change them to provide your utility a distinct look.
You’ll discover ways to do this by utilizing CSS!
CSS Styling
Textual helps a restricted subset of CSS that you need to use to type your widgets.Create a brand new file and title it type.css.
Subsequent, add the next code:
Enter {
background: white;
}
Button {
background: blue;
}
The Enter parameter tells Textual to type all of the widgets which are of the Enter kind. On this instance, you might be setting the background coloration white.
The Button line merchandise will set all of the Button widget’s background coloration to blue. In fact, on this instance, there is just one Button.
Now it’s essential to replace your code to inform Textual that you just need to load a CSS file:
from textual.app import App, ComposeResult
from textual.containers import Heart
from textual.display screen import Display
from textual.widgets import Button, Footer, Header, Enter, Static
class Type(Static):
def compose(self) -> ComposeResult:
"""
Creates the principle UI components
"""
yield Enter(id="first_name", placeholder="First Title")
yield Enter(id="last_name", placeholder="Final Title")
yield Enter(id="tackle", placeholder="Deal with")
yield Enter(id="metropolis", placeholder="Metropolis")
yield Enter(id="state", placeholder="State")
yield Enter(id="zip_code", placeholder="Zip Code")
yield Enter(id="e-mail", placeholder="e-mail")
with Heart():
yield Button("Save", id="save_button")
class AddressBookApp(App):
CSS_PATH = "type.css"
def compose(self) -> ComposeResult:
"""
Lays out the principle UI elemens plus a header and footer
"""
yield Header()
yield Type()
yield Footer()
if __name__ == "__main__":
app = AddressBookApp()
app.run()
One-line change is all you want and that change is the primary line in your AddressBookApp() class the place you set a CSS_PATH variable. You may provide a relative or an absolute path to your CSS file right here.
If you wish to modify the type of any of the widgets in your TUI, you solely want to enter the CSS file.
Strive re-running the appliance and also you’ll see a right away distinction:
If you happen to’d prefer to be extra particular about which widgets you need to type, change your CSS to the next:
Enter {
background: white;
}
#first_name {
background: yellow;
coloration: crimson
}
#tackle {
background: inexperienced;
}
#save_button {
background: blue;
}
Right here, you allow the Enter widgets the identical however add some hash-tag gadgets to the CSS. These hash-tagged names should match the id you set for the person widgets you need to type.
If you happen to specify incorrect id names, these type blocks might be ignored. On this instance, you explicitly modify the first_name and tackle Enter widgets. You additionally name out the save_button Button,. This doesn’t actually change the look of the button because you didn’t change the colour, however in case you add a second Button, it received’t get any particular styling.
Here’s what it seems to be like once you run it now:
It’s possible you’ll not like these colours, so be happy to check out a few of your personal. That’s a part of the enjoyable of making a TUI.
Wrapping Up
Now you understand the fundamentals of utilizing CSS together with your Textual functions. CSS will not be my favourite method of making use of styling, however this appears to work fairly effectively with Textual. The opposite good factor about Textual is that there’s a developer mode which you can allow the place you may edit the CSS and watch it change the person interface dwell.
Give Textual a attempt to see what you may make!
