BBj 24.02+ DWC Training

See the DWCTraining/04_ExtendedAttributes/Exercise-SearchBBjTree.bbj program for the exercise source code.

This exercise for Chapter 4 - Extended Attributes consists of a window that contains a tree control and an exit button.  The window uses a CSS Grid layout with a single column and two rows.  Row 1 = the Tree Control, Row 2 = the Exit Button.  The program populates the tree control with all the artists and albums in the CDStore database's CDInventory table.  This ends up creating a tree with a lot of nodes, making the tree very tall.

Exercise Goals:

1) Prevent the tree control from being too tall for the browser.  To accomplish this goal, you'll want to set the CSS "max-height" property to a pixel value like "500px" or another length, like "75vh" which means 75% of the viewport height.

2) After limiting the tree's display height, we want the user to be able to scroll to see the rest of the tree.  To do this, you'll want to set the CSS "overflow" or "overflow-y" property to "auto" or "scroll".

3) We want to customize the BBjTree by adding in a search mechanism.  This can be done by setting the "search-input" attribute to "true" as covered in the documentation: https://basishub.github.io/basis-next/docs/#/dwc/BBjTree

4) We also want to change the leaf node icons on the tree to compact discs.  This can be done by setting the "icon-leaf" attribute to an icon, such as the disc icon in the tabler pool, e.g. "tabler:disc".  Documentation: https://basishub.github.io/basis-next/docs/#/dwc/BBjTree