Tree view: Difference between revisions

Content deleted Content added

Inline

Latest revision as of 11:23, 9 June 2023

A tree view is a graphical widget (graphical control element) within a graphical user interface (GUI) in which users can navigate and interact intuitively with concise, hierarchical data presented as nodes in a tree-like format.^[1]^[2] It can also be called an outline view.

Appearance

A tree view is usually a vertical list of nodes arranged in a tree-like structure.^[1]^[2] Each node represents a single data item, displayed as an indented line of text or a rectangular box. The indentation (and sometimes a line drawn between nodes) is used to indicate levels of hierarchy. Every treeview has a root node from which all nodes descend. Below the root node and indented to the right are its child nodes. Each node has exactly one parent node and can have zero or more child nodes. If a node (other than the root node) has a child or children, it is called a branch node. If it has no child, then it is a leaf node.^[3] This creates a hierarchical tree-like structure, with branches and subbranches emerging downward and rightwards. The nodes can be differentiated by different colors, icons and fonts to represent the nested relationship between parent nodes and child nodes.^[2] An item can be expanded to reveal subitems, if any exist, and collapsed to hide subitems.

Features

Interactivity

Tree view allows users to interact with hierarchical data in a variety of ways, such as :

expanding and collapsing nodes to reveal or to hide their child nodes and thus navigate through the tree structure according to one's needs.
search and filter nodes based on specific criteria such as date.
renaming or deleting using context menus.
copying and moving (dragging and dropping) nodes to other sections of the tree to rearrange them.
opening a node in a separate window.

Customizability

Tree views can be customized for visual appeal and efficiency in the following ways:

Input methods : Tree views can be customized to support various input methods such as mouse, keyboard, and touch input so that users can interact using their preferred method. Users can use their mouse to click on a node to select it, move their mouse to drag and then release the mouse button to drop nodes to rearrange them. They can also use keyboard shortcuts to navigate and interact with the tree.
Look and feel : Developers (and sometimes users) can tailor the look and feel of tree views as well to match specific visual requirements of certain applications. Icons, fonts and colors used to display nodes, animations and effects to represent node expansion and collapse, and custom behaviors for drag and drop actions can be implemented. The context menu options can be customized for an application so that users can only perform specific actions on nodes.
Accessibility : tree views can offer accessibility features for users with disabilities.

Advantages

Tree views offer the following advantages :

They display hierarchical data in a concise and easy-to-follow format, so that users can easily walk through and interact with the data.
They are customizable, so their appearance and behavior can be tailored to meet specific requirements of an application.
They are interactive and allow the use of different input methods.
They are flexible and potent navigational tools which can be used in a variety of applications (such as file managers)

Disadvantages

If the nested or hierarchical relationship of items is not to be emphasized, then tree view would not be the optimal choice. A regular list would be more appropriate.
For large amounts of data or deeply nested hierarchies, tree views can become visually disorderly and difficult to navigate, leading to inefficiency and productivity loss because users would spend more time walking through the structure than working with the data.
They are more complex and thus more difficult to maintain than simpler structures like lists and tables.
For the developers, customization options with animations and complex behaviors can increase time spent on implementation and debugging.

Application

Tree views are used in situations where hierarchical data needs to be displayed and navigated in a graphical interface. For example, they have been used in:

file managers to display the hierarchical structure of directories and files residing in a computer file system so that users can navigate the directory tree and open, close and manage their files more efficiently.
email clients to display the hierarchical structure of email folders and messages, helping users to view and reply to email messages, and manage their inbox.
organizational charts to display the hierarchical structure of an organization's employees and departments.
network topologies
programming frameworks for building graphical applications.
XML documents to present hierarchical data.
outliner applications (as extended tree view), where each node consists of editable text.

References

^ ^a ^b Alan D. Moore (2021), Python GUI Programming with Tkinter: Design and build functional and user-friendly GUI applications, Packt Publishing Ltd, p. 238
^ ^a ^b ^c "Tree view". Microsoft Learn. 16 March 2023. Retrieved 19 April 2023.
^ "How to Use Trees". The Java™ Tutorials. Retrieved 19 April 2023.

External links

This graphical user interface article is a stub. You can help Wikipedia by expanding it.

[Moore-1] Alan D. Moore (2021), Python GUI Programming with Tkinter: Design and build functional and user-friendly GUI applications, Packt Publishing Ltd, p. 238

[MSLearn-2] "Tree view". Microsoft Learn. 16 March 2023. Retrieved 19 April 2023.

[3] "How to Use Trees". The Java™ Tutorials. Retrieved 19 April 2023.

[1]

[2]

[3]

@@ Line 2: / Line 2: @@
 [[Image:Tree view example.png|thumb|188px|A generic tree view]]
 {{hatnote|"Treeview" redirects here. There is also a [[List of phylogenetic tree visualization software|phylogenetic tree visualization software]] named TreeView.}}
+A '''tree view''' is a [[graphical widget]] (graphical control element) within a [[graphical user interface]] (GUI) in which users can navigate and interact intuitively with concise, [[hierarchy#Containment hierarchy|hierarchical]] data presented as nodes in a tree-like format.<ref name=Moore>{{Citation |title=Python GUI Programming with Tkinter: Design and build functional and user-friendly GUI applications |author=Alan D. Moore |publisher=Packt Publishing Ltd |year=2021 |page=238}}</ref><ref name=MSLearn>{{Cite web |title=Tree view |url=https://learn.microsoft.com/en-us/windows/apps/design/controls/tree-view |website=Microsoft Learn |access-date=19 April 2023 |date=16 March 2023}}</ref> It can also be called an '''outline view'''.
-A '''tree view''' or an '''outline view''' is a [[graphical control element]] that presents a [[hierarchy#Containment hierarchy|hierarchical]] view of information. Each item (often called a ''branch'' or a ''[[node (computer science)|node]]'') can have a number of subitems. This is often visualized by indentation in a list.
+==Appearance==
-An item can be ''expanded'' to reveal subitems, if any exist, and ''collapsed'' to hide subitems.
+A tree view is usually a vertical list of [[node (computer science)|nodes]] arranged in a tree-like structure.<ref name=Moore/><ref name=MSLearn/> Each node represents a single data item, displayed as an indented line of text or a rectangular box. The indentation (and sometimes a line drawn between nodes) is used to indicate levels of hierarchy. Every treeview has a ''root node'' from which all nodes descend. Below the root node and indented to the right are its child nodes. Each node has exactly one parent node and can have zero or more child nodes. If a node (other than the root node) has a child or children, it is called a ''branch node''. If it has no child, then it is a ''leaf node''.<ref>{{Cite web |title=How to Use Trees |url=https://docs.oracle.com/javase/tutorial/uiswing/components/tree.html|website=The Java™ Tutorials |access-date=19 April 2023}}</ref> This creates a hierarchical tree-like structure, with branches and subbranches emerging downward and rightwards. The nodes can be differentiated by different colors, icons and fonts to represent the nested relationship between parent nodes and child nodes.<ref name=MSLearn/> An item can be ''expanded'' to reveal subitems, if any exist, and ''collapsed'' to hide subitems.
+==Features==
-Tree views are often seen in [[file manager]] [[software application|application]]s, where they allow the [[user (computing)|user]] to navigate the [[file system]] [[directory (file systems)|directories]]. They are also used to present hierarchical data, such as an [[XML]] document.
+===Interactivity===
+Tree view allows users to interact with hierarchical data in a variety of ways, such as :
+* expanding and collapsing nodes to reveal or to hide their child nodes and thus navigate through the tree structure according to one's needs.
+* search and filter nodes based on specific criteria such as date.
+* renaming or deleting using context menus.
+* copying and moving (dragging and dropping) nodes to other sections of the tree to rearrange them.
+* opening a node in a separate window.
+===Customizability===
-Extended tree view is the central component of [[outliner]] applications, where each node consists of editable text.
+Tree views can be customized for visual appeal and efficiency in the following ways:
+* Input methods : Tree views can be customized to support various input methods such as mouse, keyboard, and touch input so that users can interact using their preferred method. Users can use their mouse to click on a node to select it, move their mouse to drag and then release the mouse button to drop nodes to rearrange them. They can also use keyboard shortcuts to navigate and interact with the tree.
+* Look and feel : Developers (and sometimes users) can tailor the look and feel of tree views as well to match specific visual requirements of certain applications. Icons, fonts and colors used to display nodes, animations and effects to represent node expansion and collapse, and custom behaviors for drag and drop actions can be implemented. The context menu options can be customized for an application so that users can only perform specific actions on nodes.
+* Accessibility : tree views can offer accessibility features for users with disabilities.
+==Advantages==
+Tree views offer the following advantages :
+* They display hierarchical data in a concise and easy-to-follow format, so that users can easily walk through and interact with the data.
+* They are customizable, so their appearance and behavior can be tailored to meet specific requirements of an application.
+* They are interactive and allow the use of different input methods.
+* They are flexible and potent navigational tools which can be used in a variety of applications (such as file managers)
+==Disadvantages==
+* If the nested or hierarchical relationship of items is not to be emphasized, then tree view would not be the optimal choice. A regular list would be more appropriate.
+* For large amounts of data or deeply nested hierarchies, tree views can become visually disorderly and difficult to navigate, leading to inefficiency and productivity loss because users would spend more time walking through the structure than working with the data.
+* They are more complex and thus more difficult to maintain than simpler structures like lists and tables.
+* For the developers, customization options with animations and complex behaviors can increase time spent on implementation and debugging.
+==Application==
+Tree views are used in situations where hierarchical data needs to be displayed and navigated in a graphical interface. For example, they have been used in:
+* [[file manager]]s to display the hierarchical structure of [[directory (file systems)|directories]] and files residing in a computer [[file system]] so that users can navigate the directory tree and open, close and manage their files more efficiently.
+* email clients to display the hierarchical structure of email folders and messages, helping users to view and reply to email messages, and manage their inbox.
+* organizational charts to display the hierarchical structure of an organization's employees and departments.
+* network topologies
+* programming frameworks for building graphical applications.
+* [[XML]] documents to present hierarchical data.
+* [[outliner]] applications (as extended tree view), where each node consists of editable text.
 ==See also==
@@ Line 15: / Line 50: @@
 * [[Genealogy software]]
-==External links==
+==References==
+{{Reflist}}
+==External links==
-* [http://experiments.wemakesites.net/css3-treeview.html Treeview in pure HTML+CSS]
+* [https://iamkate.com/code/tree-views/ Treeview in pure HTML+CSS]
 * [http://developer.gnome.org/gtk/stable/TreeWidget.html Tree view widget in the GTK+ API]
 * [http://msdn2.microsoft.com/en-us/library/bb759988%28VS.85%29.aspx Tree view control in the Win32 API (MSDN)]

v t e Graphical control elements
Command input	Adjustment handle Button Context menu Drop-down list Hamburger button Menu Pie menu
Data input-output	Checkbox Color picker Combo box Cycle button Date picker Grid view Toggle switch List box List builder Radio button Scrollbar Search box Slider Spinner Text box
Informational	Balloon help Head-up display in computing HUD in video games Icon Infobar Label Loading screen Progress indicator Progress bar Splash screen Throbber Sidebar Status bar Toast Tooltip
Containers	Accordion Tree view Client-side decoration Disclosure widget Frame / Fieldset Menu bar Panel Popover Ribbon Tab Toolbar Window Window decoration Workspace
Navigational	Address bar Breadcrumb navigation Hyperlink Navigation bar Virtual desktop
Special windows	Alert dialog box Dialog box File dialog Inspector window Modal window Palette window
Related concepts	File viewer List of graphical user interface elements Layout manager Look and feel Mouseover Scrolling Widget toolkit WIMP Zoomable user interface