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:

Array Row Mayor

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:

Array in App Inventor

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:

getArrayItem

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:

replaceArrayItem

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:

App Inventor My Blocks

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

selectArrayItem

replaceArrayItem

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

Reacties

Populaire posts van deze blog

familie Braakman punt nl

Google Search Globe en WebGL

WIMP installatie op Windows Server 2012 (tutorial)