The design has two pages: (i) a top page named Main Page, and (ii) a sub page named Edit Book.
•Main Page displays the books, either (i) unfiltered, or (ii) filtered according to a search term. On Main Page, the end user can also: (i) click a record in order to edit it, and (ii) click a button to add a new record. The click in both cases accesses the Edit Book sub page. Main Page has four page sources (see screenshot below): $PERSISTENT, $BOOKS, $BOOKS-SEARCH, $EDIT-BOOK.
•The Edit Book sub page contains a template containing the fields of the record. If a record is being edited, the template contains the book details. If a record is being added, the template is empty. Edit Book has two page sources: $PERSISTENT and $EDIT-BOOK. It shares $EDIT-BOOK with Main Page.
The $PERSISTENT page source is used to store dynamic data. It has a single element named Root that has a number of attributes (see screenshot below), the values of which are determined by user actions. For example, the attribute show-as-list takes a value of 1 or 0, depending on whether the user selects, respectively, the List or Table radio button.
The values in the $PERSISTENT page source are used to conditionally determine various aspects of the design. For example, when the value of show-as-list is 1, then the book catalog is displayed as a list, and not as a table.
The $BOOKS page source selects the Books table from the SQLite DB Books.sqlite. Each book record corresponds to a Row element in the page source, with the fields (or columns) of each DB row corresponding to the attributes of the respective Row element. This is shown in the screenshots below of the page source in the design (left) and in a simulation (right).
The $BOOKS page source is used to display the entire catalog of books.
The $BOOKS-SEARCH page source (screenshot below left) filters the Books table from the SQLite DB Books.sqlite to select books where the value of any field in the record matches the search term at least partially. In the screenshot below left, notice the filter, which is defined in the page source on the root element DB. The SQL SELECT statement of the filter is shown in the screenshot below right. The :SearchLike parameter in the SELECT statement resolves to the search term that the end user enters.
The $BOOKS-SEARCH tree replaces the $BOOKS tree in the display of the top page during a search.
The $EDIT-BOOK page source is similar to the $BOOKS-SEARCH page source in that it filters the Books table from Books.sqlite. The SQL SELECT statement of the filter is shown in the screenshot below. The :iD parameter in the SELECT statement resolves to the value in the node $PERSISTENT/Root/@edit-book-id, which is the ID of the book record being edited or added.
The $EDIT-BOOK page source is used as the data link of the editing template in the Edit Book sub page. The $EDIT-BOOK page source also contains an OriginalRowSet node (which must be created, via the context menu) to hold the original data while RowSet holds the current (edited) data (see screenshot below).