Web applications
otter web compiles an Otter program into a standalone HTML, CSS and JavaScript application. You write the page in Otter: no HTML, no build tool.
PowerShell
otter web app.ot
Describing a page
Each part of the page is a named resource. is a declares it, with lets you set properties on the same line, and put places it inside another.
Otter
app is a page with title "Greeter", width 560, background "#0f172a", spacing 14
nameBox is a text box with placeholder "Your name"
helloButton is a button with text "Say hello", background "#6366f1", foreground "white"
message is a text with value "Waiting...", foreground "#a7f3d0"
when helloButton is clicked
entered is text of nameBox
text of message is entered
.
put nameBox, helloButton, message in app
show app
Resources include page, text, text box, button, image, link, card, row, column, badge and more. Layout words such as spread, align middle and spacing arrange rows and columns. customstyle passes raw CSS for anything else. scroll true on a page lets it scroll like an ordinary website.
Stylesheets and projects
To style a page with your own CSS, put a stylesheet named after the program beside it: app.css for app.ot, or main.css for a project's main.ot. otter web, otter build and otter publish include it in the page; otter new web creates main.css for you. It is the only stylesheet Otter 1.0 picks up. The generated page uses the computer's own fonts and needs no internet connection or other service.
A web or game project runs with otter web . (console and automation projects use otter run .). Keep the entry point at the project root: when it is in a subfolder, relative paths to images and other assets break after otter build (to be fixed after 1.0).
A compiled page loads nothing from other hosts: it uses the system's fonts, needs no internet connection, and opens straight from the file. Add an outside stylesheet or script yourself only when you want one.
Several pages and routes
Otter
homePage is a page with title "Home"
aboutPage is a page with title "About"
notFoundPage is a page with title "Not Found"
route "/" shows homePage
route "/about" shows aboutPage
route "/users/:id" shows userPage
route otherwise shows notFoundPage
go to "/about"
go back
Drag and drop
Make things draggable, mark where they can be dropped, and react:
Otter
card is panel with draggable is true
board is panel with accepts drops is true
on drag of card
set drag data to "task-42"
.
on drop on board
say drag data
say drop x
say drop y
.
on files dropped on board gives you dropped files, a list of file values. Drag and drop is available in web applications.
What the web target leaves out
Raw sockets (TCP, UDP, TLS), file watching, the credential vault and databases need the operating system, so the web target reports them as unsupported rather than pretending. Files are read and written through the desktop application (otter desktop); in a page opened in a plain browser, read, write, get files in and get folders in stop with an error that says so, which try ... otherwise can catch. Cryptography works on the web through the browser's Web Crypto API, with results that match the console.
Everything else works the same way as in the console, and say formats values the same way on both. A few results still differ: comparing two lists with is (the console compares their items, the web only whether they are the same list), the layout of convert ... to json text, contains on a list of numbers given a number written as text, ordering comparisons on text, repeat with a fractional count, when x changes, if x is empty, stop at the top of a program, and the wording of some error messages.
Next: state and reactivity