Introduction

In this activity we are going to work on an application with the following features: the user should be able to add as many elements (tasks) as he wants. The user will be able to mark the element as being completed by clicking on that element. The user will be notified how many ongoing tasks he has and he will be informed when he will add or complete a task.

The design of the application

In order to interact with the users, we will need a single screen, on which we will add the following components:

• Label as a title, in order to share the number of active tasks and in order to notify the user when he adds or finishes a task.
• List Viewer in order to display the ongoing tasks
• Text Input in order to create the content of a new task
• Button in order to add the new task to the list

 

 

Programming the application

initialize (app) variable (variableName) to (value) helps us to initialize a few variables: myList is a list which will contain the active tasks. Optionally, we can initialize 3 variables to represent colors, in order to mark the background of the Label depending on the type of message the user has received.

when (Screen1) (starts): in our case, when Screen1 starts we would like to:

• from (Label1) set (Color) to (White) configure the text of the Label to be white (in order to be visible when we will change the background color)
• from (List_Viewer1) set (text items) to app myList tell our app that the elements from the List_Viewer1 should vorrespond to the myList variable
• Refresh Title use a function in order to update the title of the page (Label1). We used a function which we have developed so that we do not need to repeat the code in multiple sections of the code.

when (List_Viewer1) (Item Click): when we click on one of the elements of the list we will want to:

• in list app myList (remove) # index: delete the element from the list with the index identifier (a number which represents the position of the element in the list).
• from (Label1) set (Background Color) to app bgSuccess configure the background color suitable for the success messages (the initial colors of the variable)
• from (Label1) set (Text) to Task finalizat cu succes! update the text from Label1 with a confirmation message for the action of the user
• wait (1) seconds wait one second till the next command
• Refresh Title use a function to update the title of the page.

when (Button1) (Click): when the user clicks on Button1, we would like to check if the text is empty. We will use a command like this one: if (condition) do ... else .... In our case, we check if the text is different from null and from " " (empty text).

• if ... if the condition is true (if the text is valid):
  • in list app myList (insert at) (last) as from Text_Input1 get Text add the text from Text_Input1 as a new element on the last position in myList list
  • from (Label1) set (Background Color) to app bgSuccess configure the background color to be suitable for the success messages (the initial defined color in variables)
  • from (Label1) set (Text) to Task-ul a fost adăugat! modify the text from Label1 with a confirmation message for the user's action
  • from (Text_Input1) set (Text) to " " empty the content of the Text_Input1 component, so that the user can type in a new task
  • wait (1) seconds wait one second till the next command
  • Refresh Title use a function to update the title of the page.
• else ... else, if the text is empty:
  • from (Label1) set (Background Color) to app bgError configure the background color to be suitable for error messages (color initially defined in variables)
  • from (Label1) set (Text) to Task-ul nu poate fi gol! modify the text from Label1 with a warning message for the user's action
  • wait (1) seconds wait one second till the next command
  • Refresh Title use a function to update the title of the page.

to (Refresh Title) is a function in which we have added multiple commands which we need in order to update the title (Label1 component). Depending on the number of the elements of the list, we print an error message in which we explain that there do not exist any elements or we display the number of elements of the lisst, if the list has at least one element. All these commands are executed each time we call (we use) the nameof the function.

Final version of the code