Monthly Archives: May 2014

Tips&Tricks – Capitalizing 1st Letter of Every Word

It was asked how you could capitalize 1st letter of every word in a sentence.

Below is a procedure that can take any sentence and will capitalize first letter of every word. For this, I have created a procedure-with-return called “capitalize”. The procedure accepts an argument “text”, performs some functions and then returns a result. This means we can invoke the procedure and pass it some Text data, and then expect it to return a result. When invoked, the “capitalize” procedure

  1. Initializes a global variable “varTemp”
  2. It then uses the “split at spaces” block to split the Text into pieces separated by spaces (i.e. splits into words). Once split, it will assign the List to “item” variable
  3. Next, we use a for-each block to loop through the newly created list of words. For each word,
    1. Using “segment” we extract 1st letter of the word and convert it to upper case
    2. Using “segment” we extract rest of the word starting 2nd position
    3. We join (i.e. concatenate) varTemp (see 1)  + 3.i + 3.ii and add a blank space to the end
  4.  Once the loop is completed, we use “trim” to get rid of last blank space and then return the result to the caller





Update above procedure to use local-variable instead of global. For purpose of tutorial, to keep blocks presentation simpler, global variable was used. Try to use a local-variable for the procedure.


Mobile App Development


Posted by on May 20, 2014 in Uncategorized


Release – Offline version of MIT AI2 – May 18, 2014

Offline version of MIT AI2 was just released and can be found HERE This is the replica version of MIT App Inventor. However, it can be run offline It was built based on MIT latest version on May 18, 2014 It includes new components such as:

  • File,
  • ListView,
  • Spinner,
  • DatePicker,
  • TimePicker
  • YandexTranslator

This version also includes enhancements such as:

  • Button TouchDown / TouchUp
  • TextToSpeech: Added a pitch and rate control

Mobile App Development


Posted by on May 19, 2014 in Uncategorized


YandexTranslator translation of text strings

You can now translate text between languages using the YandexTranslator component. You can also use the TextToSpeech to have it spoken in the translated language.

For example, you can have a sentence translated from English to French and have it spoken in French using the TextToSpeech. The blocks below show how you can accomplish this translation service. The first block translates from English (en) to French (fre). Once the translation service is invoked, the GotTranslation block will be invoked. In that block, the language and country codes are setup and we then use the TextToSpeech component to speak the translation.


NOTE for AppyBuilder:


If you are using AppyBuilder, you’ll have to request an API key from Yandex HERE and. You will also note that for this platform, there is a property and blocks for specifying the key. If the key is not used, then translation will not go through and you will receive an error during translation. To specify key, use the property or the blocks like below:

Mobile App Development


Posted by on May 19, 2014 in Uncategorized


Tips&Tricks – If-Then-Else condition

There are times that you need to keep track of user response (e.g. score) and based on that determine if falls within certain range (e.g. min / max score) and then provide a result (e.g. grade). For example, based on below data, if user response is 85, his grade would B.


Approach 1 – A simple approach would be to create a if-then-else blocks that includes hard-coded data and the related grade (see below). However, here are some disadvantageous of this approach:

  • Long list of if-then-else
  • Hard-coded data
  • Possible blocks performance issues
  • Difficult to maintain (e.g. you want to add some additional condition in between; e.g. 70 to 75 would be C- and 76 to 79 a C+



Approach 2 –An alternative would be to create a data structure (List) that contains your data. Next, create a procedure that loops through the List and checks data. The procedure below (checkResponse) uses a for-loop to loop through each row of our list (scores). For each row, it splits that row into a List. For example, it converts 90,100,A into a List. It next checks to see if user-response falls within index 1 (min) and index 2 (max) of the list. If so, it prints index 3 (grade).


Above reduces the number of blocks that were used in Approach 1. It provides ability to add items to the list WITHOUT affecting the logic of the procedure. However, data is still hard-coded. Let’s say that we want to include ability to retrieve data from server and then have the logic use the new data WITHOUT updating code! This could be accomplished using Approach3 below:

Approach 3 – This approach will take 2nd approach a bit further and will make it one-step closer to remove the hard-coding of data. For example, let’s say that you have published your app. After sometime, you wish to change the scores; for example change 70,79,C as follows:

  • Score of 70 to 75 would be C-
  • Score of 76 to 79 would be C+

To make this happen, instead of initializing our data structure (global variable “scores”) with “make a list” in Approach 2, we create a procedure that splits a long text data by certain delimiters. Once split, we set that into our List data structure like below.


Where does the dynamic portion come in? This can be simply done using Web component that on application start-up, retrieves data from the server (as text) and then invokes the loadScores procedure once data is returned from server.


Mobile App Development


Posted by on May 17, 2014 in Uncategorized


List & List Manipulation

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.



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:




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.



  • Click HERE to download .apk


Mobile App Development


Posted by on May 12, 2014 in Uncategorized


SQLite Bulk Data Load

In this post, I’ll show you how your Android app could include ability to perform bulk data load into device SQLite database.

Platform: Ai2LiveComplete

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.

  • 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
  • btnDropTable.Click – used to drop mytable. It also checks to see if it exist or not. If so, it drops table (NOTE: All data will be deleted)
  • btnInitDb – once clicked, it will invoke initDatabase to re-create table and re-populate data
  • initDtabase procedure – First it creates mytable Table and then it will bulk load data in one-shot. Please note that in one call, 4 rows are inserted into database table
  • lpShowData.BeforePicking – Once this ListPicker is clicked, a query is executed to retrieve all data. Once retrieved, it will show data in a separate screen
  • lpShowTables – Once this ListPicker is clicked, it will retrieve result from SQLite.DisplayTables blocks and will then show result in the ListPicker


Image below shows data once lpShowData is clicked. The first row is the column names and subsequent rows are the data in csv format



  •  Bulk insert into SQLite database has a limit of 500 rows. If you intend to insert over 500 rows, you’ll have to break your insert statements.
  • You can easy convert a csv file into SQL CRUD (Create, Read, Update, Delete) statements using THIS online conversion tool


If your SQL data is large, you can create variance of this app that pull data from your server.

Download apk

  • Click HERE to download .apk


Mobile App Development


Posted by on May 6, 2014 in Uncategorized


Developing Slideshow App

In this tutorial I’ll cover how you can develop a a simple Slideshow app that will rotate over set of images.


This tutorial introduces:

  • Canvas
  • Checkbox
  • Slider
  • Clock
  • List
  • Procedure

The completed app will look like the following allowing you to create a slideshow rotating between selected images. It will contain a checkbox that when checked, will start the slideshow and when unchecked, will stop it. It will also include a slider allowing you to change the delay between slides.

We will be working toward the design shown in figure blow:


The figure below shows how the components are arranged in the design editor. It also shows you the non-visible component (Clock):



We define 2 global variables.

  • listImages– a list variable to hold list of images for the slideshow
  • index – a variable that holds the current slide indexes. We default it to 1; first image in the list

We now create a procedure that can be invoked when the app is started (initialized). The procedure is called “setCanvasImage” and as argument, it takes slideNumber. This procedure sets the background of the canvas to the slideNumber (index of the list). We also invoke this procedure from screen initialization so that first image is set into canvas background. Also, in our initialize block, we convert the initial value of Slider thumbPosition to millisecond by multiplying it by 1000.


Next, we implement ability to allow user to indicate start or stopping of the slideshow by use of a Checkbox. For this, we have created a procedure (resetTimer) that starts or stops a timer (Clock). The procedure takes accepts a boolean parameter that we use to start or stop our timer. Whenever the status of checkbox is changed, we pass the status ( checked (true) or unchecked (false) )  to our procedure.


When the timer is enabled, in the Timer event, we check to see if the last picture is shown. If so, we loop to first image. This is accomplished by adding 1 to our variable (index) and checking to see if it is greater than our list of image size. If so, we reset our index to 1. After our index check, we invoke setCanvasImage procedure (see above) to change the Canvas background to the new image.


Lastly, we have used a Slider component with following values of min=1, max=5, thumbPosition=3. We use these values for our slideshow delay (in seconds), allowing user to change delay by dragging the slider thumb. Since values are in seconds, we convert to Milliseconds and then change TimerInterval using below block.


What’s Next?

You can use TinyDB component to store last image shown, slider position, image description text

Mobile App Development


Posted by on May 5, 2014 in Uncategorized

%d bloggers like this: