Use a Travertino-based interface for style operations. #311

freakboy3742 · 2017-12-13T14:13:47Z

This PR removes the dependency on Colosseum, in favour of Travertino. Travertino contains only the primitive datatypes and operations for styles, which allows Toga to include a built-in simple style engine (called, for want of a better name, Flow).

Colosseum will remain a fully CSS compliant style engine, and will extend the interfaces and types defined by Travertino. Travertino and Colosseum will be "Toga independent", dealing purely with laying out boxes on a page. The process of applying that layout to an actual widget is the role of a new class called an "Applicator".

The "Flow" engine reduces layout to "boxes of boxes", where every box is a row of other boxes, or column of other boxes. Each box can have an intrinsic width and height (either "exactly X", or "at least X"), and may optionally specify an exact width or height as a style. Boxes can also specify a "flex" amount; all the flexes in a row/column are added, and after minimum space allocations have been met, any extra is allocated in proportion to the flex amounts. If a row/column requires more space than is available/allocated, the box will be expanded to the minimum possible size.

This patch makes one other notable change: Every widget is now expected to have a native object. This fixes the unusual handling of Box objects, which were widgets that didn't have a native object. As well as simplifying code, this has the added benefit of ensuring that methods like "set background color" will always have a widget that is appropriately scoped. The name container has been recycled to mean the "top level widget" (which is what it was really being used for anyway).

freakboy3742 · 2017-12-13T14:14:45Z

This is still a WIP; at present, tutorial 0, 1 and 2 work on Cocoa. There's also a big need for documentation, especially for the new Flow style engine.

goanpeca · 2017-12-13T14:28:47Z

Colosseum will remain a fully CSS compliant style engine, and will extend the interfaces and types defined by Travertino. Travertino and Colosseum will be "Toga independent", dealing purely with laying out boxes on a page. The process of applying that layout to an actual widget is the role of a new class called an "Applicator".

Applicator :-p ? really?... just trolling, this awesome work :0)

freakboy3742 · 2017-12-13T14:40:52Z

@goanpeca I'm open to suggestions for better names... :-)

goanpeca · 2017-12-13T15:35:02Z

LayoutConstructor, LayoutCreator, LayoutManager, LayoutHandler, LayoutBuilder, LayourApplicator XD... having the work Layout in it would really clarify the meaning from the start, don't you think?

freakboy3742 · 2017-12-13T23:28:21Z

Ok - except that it's not just about layout (at least, it won't be very soon). It also handles colors and fonts. It's about applying the style to the the objects in the layout. I dug through the Gang of Four "Patterns" book for a good name match, and didn't really find one; ended up using "makeup applicator" as the underlying idea.

goanpeca · 2017-12-13T23:33:46Z

Ok

danyeaw

This is looking really great! I like the change in name from Flow to Pack. I would say I made it through about 2/3 of the changes, I'll try to review the changes to the tests and some of the other platforms tomorrow.

It seems like there is an issue with the rehint / size allocation. Tutorial 4 doesn't display unless I resize the window.

One other minor thing: It doesn't look like the Cookcutter at examples/.template has been updated with the changes.

danyeaw · 2017-12-21T23:52:16Z

src/cocoa/toga_cocoa/widgets/splitcontainer.py


-        # Turn the autoresizing mask on the container widget
-        # into constraints. This makes the container fill the
+        # Turn the autoresizing mask on the widget widget


Is this supposed to say widget widget?

Widget? Widget! 😝

danyeaw · 2017-12-21T23:55:41Z

docs/tutorial/tutorial-0.rst


-.. literalinclude:: /tutorial/source/tutorial-0.py
+.. literalinclude:: /../examples/tutorial0/tutorial/app.py


Great change to get rid of duplicating the tutorial code!

danyeaw · 2017-12-21T23:58:06Z

src/cocoa/toga_cocoa/widgets/detailedlist.py

@@ -12,7 +14,7 @@ def attr_impl(value, attr, factory):
    # This will manifest any impl-specific attributes.
    impl = getattr(value, attr, None)
    try:


Renaming to bind really improved clarity here

danyeaw · 2017-12-22T01:10:31Z

examples/tutorial0/tutorial/app.py

@@ -9,7 +9,8 @@ def build(app):
    box = toga.Box()

    button = toga.Button('Hello world', on_press=button_handler)


I'm getting Gtk+ Warnings when running tutorial0: Allocating size to GtkButton 0x2e64180 without calling gtk_widget_get_preferred_width/height() and Negative content width -33 (allocation 1, extents 17x17) while allocating gadget (node button, owner GtkButton).

Hrm. That's odd - I'm not seeing this on my ubuntu 16.04 VM.

Can you confirm you've got travertino 0.1.2? I think I remember seeing something like this with 0.1.1...

Failing that - what OS are you running?

@DariusMontez Can you confirm if you're seeing this error?

@freakboy3742 I'm running Ubuntu 17.10. I cloned Travertino and then installed it with pip3 install -e.

danyeaw · 2017-12-22T01:12:43Z

examples/tutorial1/tutorial/app.py

@@ -1,4 +1,5 @@
 import toga
+from toga.style.pack import *


 def build(app):


Tutorials 1/2/3 are also getting Gtk+ warnings: Gtk+ Allocating size to GtkButton 0x2d40180 without calling gtk_widget_get_preferred_width/height().

danyeaw · 2017-12-22T01:27:17Z

src/core/toga/style/pack.py

+        else:
+            # If no width is specified, assume we're going to use all
+            # the available width. If there is an intrinsic width,
+            # use it to make user the width is at lea


Is part of the comment missing here?

What makes you sa

danyeaw · 2017-12-22T01:28:15Z

src/core/toga/style/pack.py

+
+        # Establish available height
+        if self.height:
+            # If width is specified, use it.


Did you mean if height is specified?

danyeaw · 2017-12-22T01:45:45Z

src/core/toga/widgets/button.py


    @property
    def on_press(self):
-        """ The callable function for when the button is pressed
+        """The handler to invoke when the button


Did you mean to delete "is pressed"?

danyeaw · 2017-12-22T01:47:47Z

src/core/toga/widgets/button.py

@@ -4,35 +4,34 @@


 class Button(Widget):
-    """ Button widget, a clickable button.
+    """A clickable button widget.

    Args:
        label (str): Text to be shown on the button.
        id (str): An identifier for this widget.
        style (:class:`colosseum.CSSNode`): An optional style object. If no style is provided then


Should this be style (:obj:Style)? Please check for the other widgets as well.

freakboy3742 · 2017-12-22T09:27:23Z

At this point, I think this patch is feature complete. Barring bugs and design criticisms, I'm ready to merge it.

goanpeca · 2017-12-22T16:06:02Z

src/cocoa/toga_cocoa/widgets/base.py

@@ -39,6 +39,7 @@ def set_enabled(self, value):
    ### APPLICATOR

    def set_bounds(self, x, y, width, height):
+        # print("SET BOUNDS ON", self.interface, x, y, width, height)


@freakboy3742 would not it be better to start using the logging module for this, e.g.

log.debug(("SET BOUNDS ON", self.interface, x, y, width, height))

?

I get what you're driving at; however, I've got three reasons for not using logging.

This is a set of messages that we really only care about during this initial debugging period for Pack. Once we've established that Pack is doing the right thing, we're unlikely to need to have debugging any more.

This is a code path that needs to be fast. Python function calls are one of the slower operations the VM can perform, so even if a function is a no-op, it can have a perceivable time lag.

I have a bit of a love-hate relationship with Log, mostly because it's really easy to use the wrong way. If it's used properly, it's great - but if it isn't... well, you spend your life trying to overcome the fact that some third party package is trying to wrest control of the logging configuration.

Signed-off-by: Dan Yeaw <dan@yeaw.me>

danyeaw · 2017-12-23T02:15:56Z

Attached are the changes made to fix the size_allocation problem, I also submitted a PR to your branch if that is easier 👍

Fix_size_allocation_errors_for_Gtk+.txt

I totally agree that this PR is ready to be merged.

Maybe for a future PR, how do you think the canvas widget should handle colors? Should we still allow a color passed in directly through fill_style and stroke_style? The style is applied to the widget, so these are more like per-method styles.

Fix size allocation errors for Gtk+

freakboy3742 · 2017-12-23T03:47:06Z

@danyeaw I'm not 100% sure what we should do with colors/styles on canvas. There's a certain simplicity to being able to just "draw a blue line"; but I can also see how being able to apply a "stylesheet" to a canvas and have all lines with a given ID or class be blue could also be useful. Definitely a topic for another PR discussion, though :-)

freakboy3742 added 16 commits December 2, 2017 19:32

Corrected reference to style on progress bars.

123d6d5

Defer resolution of path for icons.

1657dc3

Modified tables and trees to support multiple selection.

1e267a2

Make sure multilinetextinput passes the literal argument to the impl.

d6be814

Allow for missing icons.

42c5082

Correct multiline text input sizing on Cocoa.

9d1539a

Activate the app after launching finishes to ensure menus are available.

aaea7fb

Removed some stray whitespace.

9323b1f

Allow source listeners to *not* implement some methods.

3224a9b

Reworked layout of multiline tet input.

783297d

Corrected icon display in cocoa dialogs.

bb906d2

Added on_select listener for tab changes.

3998f8b

Ensure text input content is always selectable.

1a4c585

Add ability to set the initial weight of splitviews.

c54cc82

Merge branch 'master' into cricket

b3f3e52

Use a travertino-based interface for style operations.

df08a91

freakboy3742 changed the title ~~WIP: Use a Travertino-based interface for style operations.~~ [WIP] Use a Travertino-based interface for style operations. Dec 13, 2017

freakboy3742 added the work-in-progress label Dec 13, 2017

Corrected set_enabled implementations on backends.

7458171

freakboy3742 added 5 commits December 16, 2017 12:40

Corrected flow layout to handle tutorial 3 layout.

91b6eb3

Added initial documentation on flow layout.

3e11561

Add cocoa support for text alignment.

68eb1db

Refactored Command to make it a deferred widget.

3a399bb

Force a rehint at the interface level when a button label changes.

c9f0353

freakboy3742 added 3 commits December 21, 2017 23:24

Updated examples to use Pack rather than Colosseum

3ae58a3

Removed the gtk-only label from the tutorial 4 title.

34186c1

Modify toga_demo to use new tree/table data APIs.

b1112b6

danyeaw reviewed Dec 22, 2017

View reviewed changes

freakboy3742 added 10 commits December 22, 2017 14:06

Merge remote-tracking branch 'upstream/master' into travertino

7867d5a

Cleaned up some comments following review from @danyeaw

63c8240

Ensure the optioncontainer has viewports set on child widgets.

9b31cb6

Correct the handling of selections on Cocoa Tree and Table.

be565c5

Updated toga_demo to use Pack.

5cb9266

Updated tree and table examples to fix some API drift.

a83bd9e

Corrected GTK tests because of callback naming.

88dac0a

Corrected Gtk OptionContainer.

a10281c

Port Windows backend to use Travertino layout.

b15838f

Port Android backend to use Travertino.

0ccb919

freakboy3742 changed the title ~~[WIP] Use a Travertino-based interface for style operations.~~ Use a Travertino-based interface for style operations. Dec 22, 2017

freakboy3742 added 7 commits December 22, 2017 19:15

Merge branch 'master' into cricket

1b95ce3

Merge branch 'cricket' into travertino

d74c654

Corrected some icon binding on cocoa Trees.

f67b823

Corrected a variable initialization.

322ffcf

Added missing color import for boxes.

2bb18c3

Add mechanism to recursively find and layout sublayouts.

bbc62f5

Ensure option, scroll and split layouts are laid out.

1b97a1d

goanpeca reviewed Dec 22, 2017

View reviewed changes

Fix size allocation errors for Gtk+

2baf712

Signed-off-by: Dan Yeaw <dan@yeaw.me>

Merge pull request #2 from danyeaw/travertino-fix

cbb911f

Fix size allocation errors for Gtk+

freakboy3742 merged commit dcf2db3 into beeware:master Dec 23, 2017

freakboy3742 deleted the travertino branch December 23, 2017 03:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use a Travertino-based interface for style operations. #311

Use a Travertino-based interface for style operations. #311

freakboy3742 commented Dec 13, 2017

freakboy3742 commented Dec 13, 2017

goanpeca commented Dec 13, 2017 •

edited

freakboy3742 commented Dec 13, 2017

goanpeca commented Dec 13, 2017 •

edited

freakboy3742 commented Dec 13, 2017

goanpeca commented Dec 13, 2017

danyeaw left a comment •

edited

danyeaw Dec 21, 2017

freakboy3742 Dec 22, 2017

danyeaw Dec 21, 2017

danyeaw Dec 21, 2017

danyeaw Dec 22, 2017

freakboy3742 Dec 22, 2017

danyeaw Dec 22, 2017

danyeaw Dec 22, 2017

danyeaw Dec 22, 2017

freakboy3742 Dec 22, 2017

freakboy3742 Dec 22, 2017

danyeaw Dec 22, 2017

danyeaw Dec 22, 2017

danyeaw Dec 22, 2017

freakboy3742 commented Dec 22, 2017

goanpeca Dec 22, 2017 •

edited

freakboy3742 Dec 22, 2017

danyeaw commented Dec 23, 2017

freakboy3742 commented Dec 23, 2017


		.. literalinclude:: /tutorial/source/tutorial-0.py
		.. literalinclude:: /../examples/tutorial0/tutorial/app.py

		@@ -9,7 +9,8 @@ def build(app):
		box = toga.Box()

		button = toga.Button('Hello world', on_press=button_handler)

Use a Travertino-based interface for style operations. #311

Use a Travertino-based interface for style operations. #311

Conversation

freakboy3742 commented Dec 13, 2017

freakboy3742 commented Dec 13, 2017

goanpeca commented Dec 13, 2017 • edited

freakboy3742 commented Dec 13, 2017

goanpeca commented Dec 13, 2017 • edited

freakboy3742 commented Dec 13, 2017

goanpeca commented Dec 13, 2017

danyeaw left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

freakboy3742 commented Dec 22, 2017

goanpeca Dec 22, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danyeaw commented Dec 23, 2017

freakboy3742 commented Dec 23, 2017

goanpeca commented Dec 13, 2017 •

edited

goanpeca commented Dec 13, 2017 •

edited

danyeaw left a comment •

edited

goanpeca Dec 22, 2017 •

edited