Getting Started With Lively: How to Create a Simple Todo App

In this tutorial we describe how to build the classic todo list example application with Lively. A perfect place to get started with Lively and its tool set. Just perform the steps described and you will soon have a very good idea on what Lively can offer you. You can of course also directly take a look at the final result when you scroll down to the bottom of the page.

Let's start by setting up our environment:

+

Open a new empty world and save it to your user directory

● Go to http://lively-kernel.org/repository/webwerkstatt/empty.xhtml (You don't have an account?) ● Right click in the background, then select Save world as … ● Choose users/YOUR_USERNAME/todolist.xhtml as the world’s filename ● When asked whether you want to visit the world now, choose YES.

● Right click in the world and choose PartsBin ● On the Basic page, grab a rectangle (simply left-click and drag it) and place it in your world ● Open the Halos of the rectangle by right-clicking it ● Click and hold the D symbol at the top to drag the rectangle in a suitable position and use the R-symbol to resize the rectangle to a size large enough to be able to show a list of todos (600 × 600 px should be a reasonable size). Hold down the ALT key to let the dragging or resizing happen in 10px steps.Rename the rectangle to TodoPane by clicking on its name (Rectangle) which is displayed below it. ● Click the S symbol the open the style editor of the rectangle. Here you can adjust the color and border of the rectangle as you prefer. ● At this point it may be a good idea to save our work. So right-click in the world (outside of your rectangle) to bring up the world menu and choose Save world. When you now reload the page in your browser, it will be in the same state it was when you saved it.

Create a rectangle which will build the basis of our todo list

...

... ...

... ... a

... ... a ...