This application presents a table of filenames, modified timestamps, sizes, and a rename button. Pressing the button causes a dialog box to display that allows the filename to be changed. If the dialog is OK'd with a non-empty name, then the name is updated. Another little component watches the data underlying the table and outputs a log of how the data was changed. This demonstrates the underlying data is actually changed, not just what is on the screen.
The program demonstrates several Backdraft features. First, it demonstrates how declarative composition is used to build complex components from simple components. In particular, when you look at the code for the rename dialog box, it is obvious how the rename dialog works. Also notice how the FileList component is composed of a data-dependent set of File components. Each component is trivial, yet the combined result is quite powerful.
Second, the data displayed in the table is Backdraft watchable data . This means that any changes to the data can be detected and side-effects applied as required. For example, the rename dialog box changes the filename by changing the underlying data and both the File component and the Log component notice the change and update their presentations accordingly.
Lastly, this application uses the Dialog, Labeled, and Input components from the bd-widgets project, a set of standard widgets built with Backdraft.
This page loads the source version (not aggregated or minimized) of Backdraft and, as you can see, the page is very minimal. Open the debugger and explore! The code for the program is in the github repo altoviso/backdraft-examples.