First feedback and many questions

[xoolive]

I treated myself with a Textual morning just to see how things feel with the new version, and wanted to report about fresh impressions before I forget them 😄

The objective is to construct a small app to explore Pocket bookmarks (I have a basic ncurses equivalent that I don't want to maintained), and in few hours I managed to reach the screenshot below.
I'll keep playing when I have some time, but although things are quite different from my first experiences, things are really easy to put in place now!

So, just in random orders, things I found easily, not so easily, not at all, etc.:

• It was not so direct to think about how to clip some text on one line (found with height: 1 in the CSS) => see URL field
  In the end, I also added some width limitation, but I couldn't find a way to display that the URL has been clipped or not (like maybe add some ... sign after? is it possible in the CSS?)

• Also, not so easy to find out how to put two elements on the same line: the title and the date on the screenshot. I always had one field or the other, until I understood I had to constrain their width; otherwise they overlap and you don't get how things are doing...

• I didn't get whether I should use Button or not for each entry; in the end I did when I tried to handle focus and clicks, but maybe it was not necessary; that's still blurry for me here

• I am also a bit confused between :hover and :focus ; the thing in the end is that I would like to move the focus on each "button"/entry with the keyboard as well, but I am not sure how to do so; I don't know whether I get the id of the entry who got the focus from the Python code and move it programmatically when the mouse is not moving any more. That's the next thing on my todo list; all actions I want to implement next are based on the entry which got the focus (mouse or keyboard)
  edit: found about .has_focus and .focus() to do the job (through autocompletion...)

• I couldn't find how to force buttons to get the focus and hover when the mouse is over the text in the button (I can only gain focus/hover when the pointer is not on sub-elements of the widget)

• I couldn't find how to hide some bindings from the footer, tried None, False, etc. naturally, but it didn't work (for example, I planned to hide down/up)

• I also don't like the way text in buttons which got the focus has this background colour, but couldn't find how to deactivate it :/

• When I go further and implement actions, some of them will require http queries; should I use an async library or can I stick with requests?

• I found about poetry run textual run --dev path.to.module:Class but it's not documented (only the foo.py:Class is, but it doesn't work if you have relative imports in your .py)

• Are logs stored somewhere when you self.log? Couldn't find out...

[davep]

I couldn't find a way to display that the URL has been clipped or not (like maybe add some ... sign after? is it possible in the CSS?)

I don't believe there's a good solution for that within Textual at the moment, but I seem to recall it's something we'd like to address at some point. However, Textual is built on top of Rich and Rich does have a solution for that.

Also, not so easy to find out how to put two elements on the same line: the title and the date on the screenshot. I always had one field or the other, until I understood I had to constrain their width; otherwise they overlap and you don't get how things are doing...

If I'm understanding what you're asking here, I suspect the layout guide will be of help with this.

I am also a bit confused between :hover and :focus ;

As you may have seen mention of in the docs, they're both pseudo-classes in CSS. :hover is used to style an element when the house cursor is over it. :focus is about styling the element that current has focus.

the thing in the end is that I would like to move the focus on each "button"/entry with the keyboard as well, but I am not sure how to do so;

In a Textual application focus is moved around the focusable widgets using Tab (to move focus forward through the focusable widgets) and Shift+Tab (to move backwards through the focusable widgets). The user can also, of course, move focus to another widget by clicking on it with the mouse (or other pointing device), but that's also potentially going to perform that widget's main action too (if it has one -- think tabbing into a button vs clicking on a button, in a GUI UI).

All of this comes out of the box with a Textual app; you don't need to do anything to allow or enable it. And the :hover and :focus pseudo-classes don't really come into it, they just give you the flexibility to style how your app looks.

I couldn't find how to force buttons to get the focus and hover when the mouse is over the text in the button (I can only gain focus/hover when the pointer is not on sub-elements of the widget)

From this, and other things you've said, I sense you maybe running into some confusion about how widgets and focus in general work. It's worth keeping in mind that most things in Textual are a Widget, but not all Widgets can be focused. Rather than try and dive into all the details here, as a starting point you might find having a read over this app I wrote towards the end of last year a useful read. It looks like the layout you're going for is every similar:

That's made up of a growing list of containers, which show when focus is within them, and with buttons for actions that relate to the main thing being displayed, and also pulling the content from a third party API.

I couldn't find how to hide some bindings from the footer, tried None, False, etc. naturally, but it didn't work (for example, I planned to hide down/up)

If you're using the list-of-tuples approach there's no support for that. For bindings you don't want to appear in the footer, use the Binding class and set show to False.

I also don't like the way text in buttons which got the focus has this background colour, but couldn't find how to deactivate it :/

By default Button has this style for focus:

Button:focus {
    text-style: bold reverse;
}

You could override that in your own app's stylesheet.

When I go further and implement actions, some of them will require http queries; should I use an async library or can I stick with requests?

You'll likely find your application is more responsive if you use async. I've personally found HTTPX to be a good drop-in replacement for requests that supports async.

Are logs stored somewhere when you self.log? Couldn't find out...

No. self.log is purely for logging to the Textual devtools console. If you want logging to a file you're better off using Python's own tried-and-tested logging facility.

[xoolive]

Thank you, I think I have most of what I need to come back to a nice v0.

Some additions:

• Is there a natural way to put aliases to TAB S-TAB ? Well in the end, I reimplemented it as I wanted to be able to go down by more than one widget (I picked C-U, C-D, vim-style...), also top/botton (picked g and G) but I am still curious :)
• Is it possible to override the behaviour of "arrow-up" and "arrow-down" keys?
• Some of the squares are not really well rendered on regular MacOS terminal, but I assume that's not Textual, just the terminal...
• If I need some async code in the action_ or on_ methods, how does it go? I remember everything was async before, but now it's a bit confusing which methods are async and which are not.

[davep]

Is there a natural way to put aliases to TAB S-TAB ? Well in the end, I reimplemented it as I wanted to be able to go down by more than one widget (I picked C-U, C-D, vim-style...), also top/botton (picked g and G) but I am still curious :)

Sure, you could add extra bindings for app.focus_previous and app.focus_next. For example:

from textual.app        import App, ComposeResult
from textual.containers import Grid
from textual.widgets    import Header, Footer, Button
from textual.binding    import Binding

class FocusTester( App[ None ] ):

    CSS = """
    Grid {
        grid-size: 5;
        align: center middle;
    }

    Button {
        width: 90%;
        height: 90%;
    }
    """

    BINDINGS = [
        Binding( "d", "focus_next", "Focus Next", show=False ),
        Binding( "a", "focus_previous", "Focus Previous", show=False ),
    ]

    def compose( self ) -> ComposeResult:
        yield Header()
        yield Grid(
            *[ Button( f"Button {n}" ) for n in range( 25 ) ]
        )
        yield Footer()

if __name__ == "__main__":
    FocusTester().run()

Is it possible to override the behaviour of "arrow-up" and "arrow-down" keys?

Up and down arrow hold a slightly special status in Textual apps as they're a keyboard navigation method for navigating scrollable containers. But if that isn't going to be an issue for you then, yes, you can bind them too, see this example from one of our example apps.

Some of the squares are not really well rendered on regular MacOS terminal, but I assume that's not Textual, just the terminal...

Correct, that sort of thing is going to be down to terminal and font choices, amongst other things. See the note about platforms near the start of the Textual docs.

If I need some async code in the action_ or on_ methods, how does it go? I remember everything was async before, but now it's a bit confusing which methods are async and which are not.

I'm not really quite sure what the question is here, but.... An action_ or a on_ method can be non-async if if it doesn't need to be async, or it can be async if it needs to be -- in terms of calling the method Textual will do the right thing. If you mean what do you do inside those methods: that really does depend on what you want to do and what tools you're using.

In case it helps any (I don't offer this as a good example, just as an example of some code I've written that does the sort of thing you seem to want to do), here's some code I wrote that takes input, uses HTTPX to get the data from an API, and then displays the result -- using async/await along the way.

Also, one of the example Textual apps does async while getting data from an API.