2017년 7월 27일 목요일

How to make an expandable view in a label


Abe Getzler
2/19/2017

Motivation
This is in response to a request on the MIT App Inventor board …


Sample Data
/
/Fruit/
/Fruit/Apples
/Fruit/Oranges
/Cars/
/Cars/Toyotas/
/Cars/Toyotas/Camrys
/Cars/Toyotas/Corollas
/Cars/Hyundais/
/Cars/Hyundais/Sonatas
/Cars/Hyundais/Elantras
/Countries/
/Countries/Azerbaijan
/Countries/Turkey
/Countries/Spain
/Cities/
/Cities/New York
/Cities/Chicago


This data was prepared in a Windows Notepad file, to take advantage of Copy and Paste and to make loading the data easy without much cleanup.
It was modelled after a typical directory listing, with “/” as the root.


Sample Run
Capture.PNG


A monospace label is used as the display, with [] as the cursor marker, blank level indentation, and “+”, “-”, as collapse indicators, plus “_” to indicate twigs, the deepest levels.


Four buttons are used, for navigation (up and down) and to collapse (“<”) and expand (“>”) the level at the cursor.


Designer

Data Structures

The text basis for the expandable view is loaded into global example_text and then split at \n into the list example_list, which is used for access by line number.  Matching lists visibility and collapsed hold true/false values to indicate whether or not that line number is collapsed and visible, respectively.


The global cursor_index is used to point to the line number that the four buttons will work on.


Two globals are there for convenience, slash to hold the level splitter character (in case of MSDOS, use \) and blanks to help generate indentation for display of lines.


Processing
Initialization
Screen1.Initialize

This sample data is loaded from file example.txt, in the Media drawer.


When File1.GotText
When the file contents arrive, they are split and loaded into global example_list, and sent into routine initialize_expandable_view to set up collapsed and visibility states for all the lines.
The expandable_view routine generates the visible representation of the list for the display label.


initialize_expandable_view

This sets all lines invisible except the first, and all lines collapsed.
It leaves both lists fully populated, so they only need item replacement from here on.


Expandable_view

This routine generates a multiline text with only the visible lines, each appropriately indented and formatted in routine displayable.


Displayable

The displayable lines consist of the concatenation of their indentation (dependent on how many “/” separated parts in that line), the appropriate collapse marker, an optional highlight to show the cursor, and the end of the line.


Parts

The slash-delimited parts list is needed for indentation and level management.
Line
This routine filters out double quotes, which interfere with parent/child matching by content.


Level
The root line is anomalous, hence the level is forced to at least 1.


Indent
Indentation is at two spaces per level.


Marker
The choice of marker in front of a display line depends on whether or not the line is a twig (no descendants) and whether or not it is collapsed if it isn’t a twig.


Highlight
This optionally wraps its input with square brackets if it is the cursor line.


End


This returns the last item in the slash-delimited parts of a line, or “/” if empty.


Is_twig
A line is a twig if it has no children.


Children
This returns a (possibly empty) list of line numbers of lines in the base list that are immediate descendants of this line number, as judged by the is_parent routine.


Is_parent


For example, is_parent(“/Cars/”, “/Cars/Toyotas”) = true.


Navigation
When btnDown.Click
The cursor is moved to the next visible line number.
Next_visible_line_number
This routine walks from the end of the list to just before the cursor, keeping the last visible index encountered, as marked in the global visibility list.


When btnUp.Click
This works like the down button, but in the opposite direction.


Prev_visible_line_number
We search for the last visible line found walking from line 1 to just before the cursor line.
btnExpand.Click
If the cursor line is collapsed, then:

⦁ Mark it expanded (not collapsed)
⦁ For each of its children, set them visible.


btnCollapse.Click

If we try to collapse a twig (end point), we move the cursor up to its parent line.
Either way, we set the (new) cursor line as collapsed, then turn visibility off for each of its immediate children.  


All the movement buttons refresh the display with a new expandable_view value.


Parent_index
This slow routine searches line by line to see if one is a parent to this line.
Orphans are marked as their own parent.


The AI2 code


More Projects

댓글 없음:

댓글 쓰기