Displaying application screens

As mentioned earlier, we’ll be building an application to manage a list of elements. Before writing the source code of our application, let’s show the different screens of the application by explaining their sequence.

Initially, the list is empty. The Add Element button allows, on each click, to insert a new element in the list.

Figure 5.1 – Screen when launching the application

Let’s click the Add Element button several times (here, three times):

Figure 5.2 – After three clicks on the Add Element button

Each element inserted has the index (starting from 1) of the element in the list. A Remove button and a Modify button are inserted after the item in the list.

Let’s click on the Modify button on the second line. The item text is replaced by an input field, in which the cursor flashes to allow editing.

Figure 5.3 – The second item...