Many apps use lists of data. For example, an catalog system might use lists to keep track of books. We use lists to create and manipulate different sets of values/elements.
Introduction
In this tutorial, we will create a Book Collection app. The app will show you how to:
⦁ Create List
⦁ Add items to List
⦁ Remove List Items
⦁ View all List Items
⦁ Search List and use index
⦁ Join text to create List item
⦁ Split List item
⦁ Store Lists in database (TinyDB)
⦁ Retrieve data from database
⦁ How to use procedures that return data
⦁ How to perform data validation
Image below shows how the app will look like:
The components in the Design Editor are shown in the below diagram:
The blocks are shown in the diagram below.
⦁ Initialize 3 variables as follows:
◦ TAG_BOOKS – used for storing book collection to database
◦ listBooks – used to store / manipulate List of book data (Title : Author)
◦ varTemp – a general purpose variable
⦁ initData procedure – On app start-up, it:
◦ Sets up ListPicker title
◦ Hides the ListPicker (we use a button to open it)
◦ Sets up initial demo data into our database (happens only on app initial install). This procedure uses attempts to get the data from database. If data does not exist, then it uses demo data in csv format, splits using comma (,) and assigns it to our temp
⦁ Screen.Initialize — used to check if first time installation. This is done by checking if any database table exists. If not, it will then invoke initDatabase procedure
We also define the following procedures:
isDataEntered – This procedure gets invoked when we try to add a book to the list. It performs validation to ensure data in both fields are entered. It returns false if either book name or book title is not entered.
isExistingBook – This procedure gets invoked when we try to add or delete a book to the list. It joins the book Title / Author in form of Title:Author and then checks our List to find out if exist or not. If it exists, it returns true, else false
Adding a book – when the button ‘Add’ is clicked, it invokes the procedure isDataEntered.
⦁ If a false is returned from the procedure (i.e. data was not entered in text fields), we display error message.
⦁ If true is returned, then we invoke procedure called isExistingBook. The procedure checks to see if data already exists in our list. If it does, we display error message otherwise a join title, author in format of Title:Author and stores it into our list. It also stores this latest data into our database using our TAG variable
Viewing books in ListPicker: When ‘View’ button is pressed, we invoke the ListPicker.Open to show data. This will cause the BeforePicking block of ListPicker to be triggered. Once triggered, we set its elements to listBooks which contains our book collection data. Next, the picker will open showing data:
Data in the picker (image above) is displayed in form of BookTitle:BookAuthor. When a selection is made, the AfterPicking will be invoked. At this time, we take data for the current select, split it at color (:) and assign it to a temporary variable (varTemp) as a list. The list will have 2 items with first item as BookTitle and 2nd item as BookAuthor. The next blocks take item 1 (BookTitle) and set it into text field (txtBookTitle) and will take 2nd item (BookAuthor) and set it into text field (txtBookAuthor).
Deleting books: To delete a book, user can select an existing book from the picker (see above). User can also manually enter title / author into text fields and then click the ‘Delete’ button. Once clicked, we invoke procedure isExistingBook. The procedure (see above) checks to see if book exist in the list and based on that returns true or false. If false (book not found), we display error message. If found, we join the data from text field using color (:). Next we check for this Title:Author and get its index from our list variable listBooks. The result (index) is saved into our temp var varTemp. Next using that index number, we remove the item from our list. We then save the updated list of books into database using the TAG we had defined as the key.
Resetting the database (book lists)
To re-initialize the database and remove all books (reset the list), we have provided a button btnClearList (Clear Book List). The blocks below show hot to reset the book list and re-init the database:
Variations:
Current code does not check for case. Update the code if mixed case is used for book title/author, it would perform proper validation. You could also store all data in upper case prior to storing into list and database.
Download
댓글 없음:
댓글 쓰기