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

listview position


When i use Listview it display list elements from first element...
I would like Listview dysplay from sectected index but i don't succed to do it :
I tryied to set Listview.SelectionIndex and Listview.Selection but without any effect !
I don't understand what those 2 instructions do because it seems to change nothing !

--
I tried to use VerticalScrollArrangement to do this but i can't define display position either...

--
The secret is to cheat.

Use a second list, built up from empty,
copied from the first list starting at the selected index
to the end, and set the ListView Elements from the second list.

--
I thought about it but in this case i will be able to scroll down but no to scroll up !

--
Oh Thanks...I will have a look !

--
Now i have a solution not exactly what i wanted but an interresting one.





--
Labelling the canvas was interesting.

Watch out for font size mismatches if you switch to Responsive design.

--

search results for listview position


... also the documentation http://appinventor.mit.edu/explore/ai2/support/blocks/ lists.html. insert list item. Inserts an item into the list at the given position ...
Hello, When i use Listview it display list elements from first element... I would like Listview dysplay from sectected index but i don't succed to do it :
The problem is not just limited to the SelectionIndex, when the Listview is filtered it returns the wrong Selection Value. The SelectionIndex is set to the position in the filtered list, but the Selection Value is the item in that positionfrom the full list... Simon.
I met the same problem, both the listview.selection and listview.selectionIndex blocks point the item in the filtered list, not the whole list you build. Thus, we can't get the exact item and its index position in the whole list. That is too bad.
For each item (waypoint , wpt) a calculation should be performed (distance, using the current position lon/lat and the lon/lat from the waypoint) and the result and also the ... The new list should then be sorted by the calculated distance and the top-30 elements of the list should be displayed in a listview.
Label1—which displays Slider1 thumb position (a number between 1 to 5 as selected above). • Label2—which ... ListView component with 2 items.
Also consider keeping a rolling log of your incoming buffers that you can display in a label or listview. As each buf arrives, insert it at position 1 of a global LOG list initialized to make-list("End of List"). That way, you will always see the ...position: absolute;. top: 50%;. left: 50%;. z-index: 99999;. } .SeçiliBar {. position: absolute;. width: 100%;. border: none;. min-height: 64px;. z-index: 5;. background -color: #1e1e1e; .... AKTİF PERSONELLER -->. <ul id="AktifPersonelListe" data- role="listview" data-inset="false" data-icon="false">. <li>.