Array in App Inventor for Android

De laatste tijd ‘s wat zitten spelen met App Inventor for Android. App Inventor stelt je op een laagdrempelige manier in staat om simpele applicaties te ontwikkelen die je kunt laten draaien op je Android telefoon. Het is een online programmeeromgeving uit de Labs van Google. Met deze IDE kan je via drag en drop de componenten voor een GUI en de achterliggende logica middels puzzelstukjes in elkaar klikken.

Om te kijken wat er mogelijk is, wilde ik een simpel bordspelletje ontwikkelen. De bordopstelling zou dan in een 2D array kunnen worden opgeslagen. Helaas blijkt het Array type op dit moment niet aanwezig te zijn in de App Inventor building blocks. Wel handig om te hebben, dus tijd om hier zelf iets voor te maken!

Het gaat erom een twee dimensionele matrix te hebben. Deze bevat elementen die addresseerbaar zijn via rij en kolom (row en column). En gezien mijn vroegere liefde gebruiken we het Row Mayor principe en beginnen de index met 1. Zie onderstaande plaatje:

App inventor kent dan geen Array, maar wel een list type. Door een lijst (als vector) in een lijst te maken, kunnen we een twee-dimensionale matrix, dus onze array, construeren. In “code” ziet dat er als soort van constructor als volgt uit. Hierbij vullen we de array direct maar met wat initieele waarden, 1 tot en met 9:

Om tijdens de programma uitvoering waarden in en uit het array te plaatsen hebben we nog een getter en een setter functie nodig.

Om een waarde uit het array te lezen, aan de hand van zijn row en column. Ook het betreffende array geef ik als argument mee, zodat deze functie binnen het programma generiek voor meerdere verschillende arrays te gebruiken is. De return value van deze functie is de waarde uit het array die je zocht:

En de andere kant op, replaceArrayItem om een waarde in het array te plaatsen. Zelfde argumenten met als extra uiteraard nog de waarde die je wilt plaatsen:

Voor de naamgeving van getArrayItem en replaceArrayItem heb ik me laten inspireren door het al aanwezig List component. (getListItem en replaceListItem) Op deze manier krijg je in je palette met eigen definities een uniform gevoel:

Als laatste nog een tweetal screenshots van het gebruik van bovenstaande definities:

Wil je alles zelf nog eens nakijken en uitproberen, dan kan je de broncode met daaromheen een GUI (het speelbord) als een soort van proof of concept hier downloaden: Row_Mayor_2D_Array.zip