Tree and JsonBasedTree Example Private

This is a demo of the two trees of ui-components, showing the files of antilia-widgets itself, the folder frontend expanded.

• On the left, Tree: a tree of Wicket components, a NestedTree of wicket-extensions whose nodes render the icons of ui-components, inline SVG drawn for the trees, instead of the images of the extensions' themes. Expanding a folder repaints it through Ajax
• In the middle, JsonBasedTree: a single component without children, whose nodes are rendered in the browser from JSON with a template, as the rows of the JSON table are. The roots and the children of the folders expanded come with the page; the children of another folder come from the tree's own endpoint the first time it is expanded. The tree is told what the user expands, so it shows the same folders when it is rendered again
• Only files, the leaves, are selected: click one, in either tree, and it is shown on the right, repainted through Ajax by onSelect. A click on a folder expands or collapses it
• JsonBasedTree is a WAI-ARIA tree: Tab to it, then Up and Down move between the nodes, Right expands a folder or moves to its first child, Left collapses it or moves to its parent, Home and End go to the first and the last node, and Enter or Space selects a file. In Tree, Tab moves between the nodes, which are buttons telling whether their folder is expanded
• The kinds of files, their sizes and the days they were changed are written in the language of the session; switch to German or Spanish to see them change, together with the texts of the trees, which are in the bundles of ui-components
• Both trees are private components: without a license key activating them they render a placeholder instead
• "Icons" above the trees chooses their icons: their own, the Font Awesome icons as inline SVG (SvgIcon), or the same drawn by the Font Awesome font (FontAwesomeIcon), given to the trees with setIcon(TreeIcon, IIcon). The arrows of the folders turn whatever icon they are; the React and Svelte tabs choose them the same way, through the icons of their trees

The React and Svelte tabs show the same files in the Tree of @antilia/react and @antilia/svelte, which check the license key in the browser. The files come from the mounted resource /api/files, the children of a folder from /api/files?parent=id, and the file selected is shown by the app itself.