Module 2

App Development

Note Maker

IM Happy Team

Page 1 of 12

Note Maker Tutorial

This tutorial will show you how to build a basic note maker. The note maker will allow you to enter a note and store what you have entered. It will display your notes along with the date and time that they were entered. It will also allow you to select the colour of text that your notes will appear in.

This tutorial will make use of Buttons, Labels, a Database and a textbox to create and store your notes.

Step 1: Build the User Interface

The user interface for this app will include the following components:

1) 2 Labelsa. Header Labelb. Notes List Label

2) 1 Horizontal Arrangement a. horizontal arrangement for three buttons

3) 4 Buttonsa. 3 Menu buttons for saving and showing and hiding the notesb. 1 button to remove notes

4) A textbox to allow a user to enter their note5) A database to store all of the information6) A clock so that a timestamp can be added to each note

Firstly rename the screen to NoteMaker.

Page 2 of 12

Secondly, set the AlignHorizontal property for screen 1 to ‘center’. This will align all your items to the centre of the screen.

Tick the ‘Display Hidden Components in Viewer’ box at the top of the screen

Select a textbox from the User Interface section of the palette and drag it onto the screen. Rename the textbox to NoteTxtBox and set the Hint to Enter Note.

Next select a HorizontalArrangement from the Layout section of the palette and drag it onto the screen below NoteTxtBox.

Now select and drag 3 buttons from the User Interface section of the palette and place them inside the HorizontalArrangement that you created in the last step.

Rename the 3 buttons saveBtn, showBtn and hideBtn. Change the saveBtn text property to Save, the showBtn text property to Show Notes and the hideBtn to Hide Notes.

Drag a ListPicker onto the screen and place it below the HorrizontalArrangement. Rename this to deleteListPicker and change its text property to Remove Note.

Next drag a label onto the screen below the deleteListPicker. Rename it HeadLabel and change its text property to ‘Notes:’. Also change the Font Size property to 20.0 and check the Font Bold box.

Now select another label and place it underneath the HeadLabel. Rename this label NotesListLabel and change its text property so that it is left blank.

Page 3 of 12

Now from the sensors section of the palette drag a clock onto the screen. Next drag a TinyDb from the storage section of the palette.

Your screen is now complete and should look like the one below. All of the components that you should have can be seen in the Components image below. If you cannot see all of your components on the screen select the ‘Display hidden components in Viewer’ check box at the top of your screen.

Page 4 of 12

Step 2: Adding functionality

Now that the user interface has been completed we can add functionality to the components.

The functionality can be added in the Blocks section. To find the blocks section click on the Blocks button at the top of your screen.

The first thing we need to do is to set the functionality for the Save button. The save button should get all of the text from the textbox, display the note in the notesListLabel and save the notes to the database.

In the built-in tab, click on Variables and drag piece to the

viewer and change its name to noteList. Click on Lists and drag onto the screen and connect it with the Name variable that we created previously.

Click on SaveBtn in the Blocks menu, select and place it on your screen.

When the Save button is clicked and the textbox is not empty we want the new note to be saved in a List with all of the other notes. To do this, select an Add Items To List block from the List menu. Now select a Get from the variables menu and attach it to the Add Items To List block. Change the Get so that it says get global noteList.

Next we need to add a Join to the item space on the Add Items To List block. You should set the join to have 4 attachment points.

The block should look like the one below:

Page 5 of 12

To complete the Join block add a NoteTxtBox.text block. Then add a text block with ‘\n’ in it which will add a new line to the text.

Next we need to add our timestamp, select the call Clock1 . FormatDateTime block from clock one in the blocks menu and attach call Clock1.Now.

Now add 1 more text block with ‘\n’ in it.

Your block should now look like the one below:

The next stage is to save our new note to the database.

Below the add items to list block we add a Tinydb1.StoreValue block. We now attach the text ‘notes’ to the tag space and place a get global noteList block to the valueToStore space. The blocks you have just created should look like the ones below.

Below this we add a set NoteTxtBox.Text block and attach a blank text block to it.

Your blocks should now look like the ones shown below:

Page 6 of 12

Now that the Save button functionality has been completed, we need to add the functionality for when the application is started.

Firstly select a Screen1.initialize block from Screen1 menu in the blocks section.

The first thing we need to do when the screen is initialized is to get all of our notes from the database and test if the database is empty or not. To do this we need an if block from the control menu, attached to this block we need to add a Not block from the Logic menu. We now need to attach an is empty block to the Not block, the is empty block can be found in the text menu. Attached to the is empty block we need a tinyDb.getValue block. For the tag space we need to add the text ‘notes’ and in the valueIfTagNotThere space we place an empty text block. We can then place these blocks inside the Screen1.Initialize block. The blocks should now look like the ones shown below.

In the then space of the If block we need to add a set global noteList to block. Attached to this is the tinyDb.getValue block with the same attachments as before. The blocks should now look like the ones shown below.

Page 7 of 12

At this stage we have completed all of the main functionality of the app. The only things left to do are to add functionality for the show notes and the hide notes buttons. As well as add functionality for the delete button.

The first button that we need to set functionality for is the showNotesButton. For this we need a showNotesButton.click block. Inside this block we need to place a set NotesListLabel.visible block and to this we attach a true block. Your blocks should now look like the ones shown below.

We now need to create a piece of functionality for when the notes label become visible.

First go to the procedures menu and select a to do block.

Inside this block add a set NotesListLabel.text block and attach a blank text block to it.

Below this place a for each item in list block from the Control menu and attach a get global NoteList variable.

Inside the for each block place a set noteListLabel.text block and attach a Join block to it with 5 free spaces. In the first space attach a get item variable, followed by a text block with ‘\n’ in it. After this attach a NoteListLabel.text block followed by 2 more text blocks with ‘\n’ in it.

Your blocks should now look like the ones below.

Now attach a call display block from the procedures menu and attach it to the showNotesButton.Click block as shown below.

Page 8 of 12

We now need to set the functionality for the hideNotesbutton. To do this select a hideNotesButton.click block and attach a NotesListLabel.visible block to it. Then attach a false block to the NotesListLabel.visible block. These blocks are shown below.

The final thing to do is set the functionality of removeListPicker. When the removeListPicker is selected we want a list of all the notes to appear and when we select one it will delete it from the database.

First we select a removeListPicker.BeforePicking block and place a removeListPicker.elements block inside it. Attach a get global noteList variable to the end of this block. This can be seen below.

Next we set what will happen once the user selects a note to delete.

Select a removeListPicker.AfterPicking block. Inside this block place a remove list item block. In the list space attach a get global noteList variable and in the index space place a removeListPicker.SelectionIndex block.

After this place a call Display block.

Then attach a tinyDb.StoreValue block and attach a text block with the word note in it. In the valueToStore space place a get global NoteList variable. These blocks are shown below.

Page 9 of 12

This completes the code blocks for the noteMaker app. The full code is shown on the next page.

Page 10 of 12

Page 11 of 12

You can now download your app onto you tablet or use the emulator to try it out!!

You have just created a functional ‘Note Maker’ App! Well Done

Are there any additions or changes that you would make to this app???

Page 12 of 12