beeware / beeware/toga

Add a mobile Tree widget

Open
#4,302 0 comments 0 reactions 0 assignees View on GitHub
android enhancement iOS
Dominant language
Python
Stars
5.4k
Forks
827
Avg merge
9h 45m
Merged PRs (30d)
58

Description

### What is the problem or limitation you are having?

Neither iOS nor Android have a Tree widget.

### Describe the solution you'd like

We should add a "mobile native" Tree widget for both iOS and Android.

The implementation will be very similar to the approach used for Table (#4301); it would make sense to complete mobile Table first.

On desktop platforms, a spreadsheet-like UI makes sense for tree, because there is ample horizontal and vertical real estate. However, this isn't the case for mobile platforms. Mobile platforms need to take advantage of limited screen real-estate and provide a mobile-optimized UX.

On Mobile, the root level of the tree will be rendered using the same underlying widget as DetailedList - each node and leaf at the root level of a Tree will be visualized with a primary title and icon coming from the first column of the data, and secondary title coming from the second column of the data.

We should also add a "summary" attribute to Tree's constructor, accepting a list of Column objects; this would allow the user to override the default "first two columns" rendering on mobile rendering.

If the user selects a *node* from the Tree, the navigation context of the widget's scaffold is pushed, and the user is shown a DetailList style view of the children of the selected node.

If the user selects a *leaf* from the Tree, the navigation context of the widget's scaffold is pushed, and the user is shown a "form"-like view of the leaf's data - a label / value display of each column.

The navigation context uses the same primary title as is used on the full Tree view, and the back arrow to pops the navigation stack to return to the full Tree view.

### Describe alternatives you've considered

It would conceptually be possible to support the display of more than just "primary and secondary" content. We could extend the widget to allow an arbitrary number of summary content rows, and potentially allow different styling of each of those rows.

We could also allow larger tablet screens to display summary content all in one row.

However, these options would complicate the initial implementation, so we'll stick with just "primary and secondary" for now.

### Additional context

See discussions on #4271 for background.

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the mobile Table approach in #4301 and the background discussion in #4271, then compare the existing Tree and DetailedList behavior. Done means a mobile-native Tree for both iOS and Android, including summary columns and navigation from nodes to children and leaves to label/value details.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
mobile
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.