Build a File Browser
Build a small Windows application that lists the files in any folder you type. About 50 lines, and it uses windows, rows, text boxes, buttons, scrolling, a click event, error handling and file listing.
What you will learn
- Laying out a window with a row and a column.
- Setting several properties at once with has.
- Reading a text box, listing a folder with get files in, and adding controls while the program runs.
- Recovering from a bad folder name with try and otherwise.
Before you start
You need Otter on Windows and a folder where you can save a .ot file. This is a Windows application, so run it with otter run.
1. The window and its heading
A window holds the whole application. has sets several properties in one line.
Otter
create window into app
app has title "Otter File Utility", width 800, height 550, background "#111827", spacing 12
create text into heading
heading has text "Folder Browser", foreground "white"
2. A text box and a button, side by side
The person types a folder path and presses Load Files. A row places the two next to each other; spacing sets the gap.
Otter
create text box into folderBox
folderBox has width 500
create button into loadButton
loadButton has text "Load Files", width 120, background "#2563EB", foreground "white"
create row into toolbar
toolbar has spacing 10
put folderBox, loadButton in toolbar
3. A status line and a scrolling list
The results go in a column, and the column goes inside a scroll so the list stays reachable however many files there are.
Otter
create text into statusText
statusText has text "Enter a folder path.", foreground "white"
create column into resultsColumn
resultsColumn has spacing 4
create scroll into fileArea
fileArea has width 760, height 350
put resultsColumn in fileArea
put heading, toolbar, statusText, fileArea in app
4. Load the files when the button is clicked
Inside the event, get files in reads the folder. try ... otherwise keeps a mistyped path from stopping the program. Each file gets its own text control, added to the column.
Otter
when loadButton is clicked
try
folder is text of folderBox
get files in folder into files
total is length of files
text of statusText is total
for each file in files
create text into fileLabel
fileLabel has text name of file, foreground "#94a3b8"
put fileLabel in resultsColumn
.
otherwise
text of statusText is "Could not load that folder."
.
5. Show the window
Otter
show app
Run it
PowerShell
otter run file-browser.ot
Expected result
A dark 800 by 550 window titled Otter File Utility with a Folder Browser heading, a text box and a Load Files button. Type a folder such as C:\Users\you\Documents and press Load Files: the status line shows how many files there are, and their names fill the scrolling list. A path that does not exist shows "Could not load that folder."
Common problems
- Nothing happens: check the path. A relative path is relative to the folder you ran otter from.
- The window does not open: this is a Windows application. Run it with otter run, not otter web.
- Otter says a name is not defined: create every control before you use it, and create it with the exact name you use later.
Challenges
- Show only files that end with .txt: test extension of file inside the loop.
- Show the file sizes beside the names (size of file).
- Clear the list before loading a new folder.
The complete program
View the complete file-browser.ot on GitHub
Controls
Events
Files and folders