Part 2: Storing and accessing user interface components as variables

Part 1 showed how to reference and store user interface components as a variable. That tutorial used this method to easily change the background colors of six buttons on screen.

In Part 2, we use this technique to simplify a past tutorial about using a Bluetooth link between and Android device and two Arduino devices.

In the tutorial on connecting to two Arduino devices, the app has two buttons – one button to send data to device #1 and a second button to send data to device #2. The code to handle each sending routine is nearly identical and looked like this:

The code for btnSendNumeric1 and btnSendNumeric2 is nearly identical except for the BluetoothClient and the text box input.

By using references, we can simplify this and move the identical code into a procedure that we will call SendBTData.

SendBTData copies the duplicate code from above and adds two parameter variables: BTDevice and DataValue.

When the procedure is called, we pass to the procedure the Bluetooth device component to use and the value to send.  For sending to device #1, we use the reference to BluetoothClient1 and pass that as our selected BTDevice. The DataValue is set to the input text box for the first device.

For device #2, we reference BluetoothClient2.

Consider if you had an app that linked to multiple Bluetooth devices. (I have an app that communicates with six different Bluetooth devices simultaneously.) Without references we need to duplicate our reading and writing code six times!

By using references to components, we implement a single procedure. This saves code space in our app and makes future maintenance easier. If we need to change our SendBTData routine, or fix a problem, we need only modify a single procedure – versus changing six pieces of code using the old method!

For example, we can make a simplification to our simple SendBTData routine by changing the two separate calls to .Send1ByteNumber to a single call to .SendBytes:

.SendBytes takes its input as a list of values and sends them at once, instead of making separate calls to the BluetoothClient.

Now that our code is in one procedure, we need make this change in one place – not in several different locations in our code.

Using references to App Inventor components is an advanced programming method. As your skills develop and the size and scope of your programs grow and become more complex, “tricks” such as the use of references and consolidating common code into procedures will make your programs smaller, simpler and easier to debug and maintain.


One thought on “Part 2: Storing and accessing user interface components as variables

  1. Pingback: Part 1: Storing and accessing user interface components as variables – App Inventor 2 – Learn to Code!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s