--- title: "Visuele feedback in mobiele applicaties" date: "2019-04-04" categories: - "app-development" - "mobile" - "mobile-development" - "mobiletogether" - "tools" tags: - "cross-platform-mobile-development" - "mobile-development" - "mobile-development-tools" - "mobiletogether" - "visual-feedback" description: Ontdek hoe u visuele feedback in mobiele applicaties kunt implementeren met behulp van MobileTogether, waardoor de gebruikersinteractie wordt verbeterd door middel van dynamische knopreacties en visuele signalen. --- Status: #blog Tags: #cross-platform-mobile-development #mobile-development #mobile-development-tools #mobiletogether #visual-feedback Categories: [mobile-development](/blog/nl/category/mobile-development.md) # Visuele feedback in mobiele applicaties Visuele feedback in mobiele applicaties zorgt voor een aangenamere gebruikerservaring, en mobiele apps die leuk zijn om te gebruiken, worden vaker gelanceerd dan statische, saaie apps. MobileTogether, [het framework voor snelle mobiele app-ontwikkeling (RMAD)](https://www.altova.com/nl/mobiletogether) van Altova, bevat alle tools die u nodig heeft om cross-platform mobiele apps te ontwikkelen met aantrekkelijke visuele feedbackfuncties. De palet met bedieningselementen voor slepen en neerzetten in MobileTogether Designer bevat een knop die automatisch van uiterlijk verandert wanneer erop wordt geklikt. U kunt ook voorwaarden definiëren die tekst, afbeeldingen of andere elementen van een knop toevoegen of wijzigen tijdens de uitvoering van de app. Daarnaast kunnen veel andere elementen ook als knoppen worden gedefinieerd, waarbij bij een klik op het element één of meerdere acties worden uitgevoerd. We hebben eerder geschreven over het [gebruik van pictogrammen als knoppen](https://www.altova.com/blog/images-as-tool-buttons-in-mobile-apps/) in mobiele apps om een stijlvol en elegant menu met tools te creëren. In dit artikel gaan we interactie toevoegen aan onze toolafbeeldingen om aantrekkelijke visuele feedback te geven bij elke klik. ![](/blog/images/wai_700x335_2.jpg) De onderstaande screenshot toont een pagina van de "Waar ben ik?" app die we hebben gemaakt om te laten zien hoe afbeeldingen als knoppen kunnen worden gebruikt. [![Afbeeldingen als knoppen in een mobiele app.](/blog/images/tool-images.png)](tool-images.png) Elke blauwe afbeelding in het onderste gedeelte van het scherm is een knop die extra informatie over de locatie kan weergeven. Dit gebeurt ofwel door gegevens op te halen via een API, of door een externe webpagina te openen. Een korte klik op een knop voert de bijbehorende actie uit, terwijl een lange klik een venster opent met informatie over de knop [![Voorbeeld van visuele feedback in mobiele applicaties: een lange aanraking op een afbeelding](/blog/images/image-long-click-515x1030.png)](image-long-click.png) De knop voor het weer, die zich linksonder in de screenshot bevindt, is gekleurd om aan te geven dat deze is ingedrukt. Bij een korte klik wordt het beeld kortstondig gekleurd voordat de actie wordt uitgevoerd. Een korte klik op de knop voor het weer genereert een verzoek aan de OpenWeather API en opent een subpagina die weersgegevens weergeeft in grafische en tekstuele formaten: [![Het weerbericht wordt weergegeven nadat op een afbeelding is geklikt](/blog/images/weather-subpage.jpg)](weather-subpage.jpg) ### **Visuele feedback in mobiele applicaties: een definitie** Visuele feedback voor een klik van de gebruiker op een afbeelding wordt gerealiseerd door de achtergrondkleur achter de afbeeldingsknop kortstondig te veranderen. De afbeeldingen in onze app zijn georganiseerd in tabellen, zoals te zien is in dit gedeelte van de MobileTogether Designer: [![De weergave van afbeeldingen in tabellen, zoals te zien is in de MobileTogether Designer](/blog/images/buttton-layout.png)](buttton-layout.png) Elke cel in een tabel heeft een reeks eigenschappen die individueel kunnen worden ingesteld, waaronder de achtergrondkleur van de cel. Elke afbeelding heeft ook een unieke definitie van acties die worden uitgevoerd wanneer op de afbeelding wordt geklikt. [![Definitie van de achtergrondkleur van tabelcellen om visuele feedback in mobiele applicaties te realiseren](/blog/images/table-cell-background.png)](table-cell-background.png) We kunnen een indexnummer opslaan in het element met de naam "userButton" wanneer op de afbeelding van de weersvoorspelling wordt geklikt. Vervolgens kunnen we de achtergrondkleur van de cel aanpassen op basis van de inhoud van het "userButton"-element, zoals gedefinieerd in de XQuery-expressie in de eigenschap "Achtergrondkleur". Hieronder staat de lijst met acties voor de tool om het weerbericht op te vragen: [![Acties die worden uitgevoerd bij een klik op een afbeelding om visuele feedback te geven in mobiele applicaties](/blog/images/image-click-actions.png)](image-click-actions.png) Allereerst wordt de waarde van het element met de naam "userButton" bijgewerkt. Vervolgens worden de acties uitgevoerd die daadwerkelijk het uiterlijk van de afbeelding veranderen. Omdat deze acties nodig zijn telkens wanneer op een afbeelding wordt geklikt, worden ze opgeslagen in een speciale actiegroep met de naam "Button Flash". MobileTogether voert automatisch de actie "Scherm bijwerken" één keer uit aan het einde van elke reeks acties. Om visuele feedback te realiseren, willen we "Scherm bijwerken" vroeg in de reeks uitvoeren om de achtergrondkleur te veranderen, kort te pauzeren, de waarde van de knop "userButton" te resetten en vervolgens "Scherm bijwerken" opnieuw uit te voeren om de achtergrondkleur te verwijderen. De XQuery-functie `sleep()` bepaalt de duur van de pauze in milliseconden. Nadat de knop is verlicht, wordt de uitvoering voortgezet met de actiegroep "Weersvoorspelling ophalen". Deze actiegroep genereert een query naar een weer-API om de voorspelling voor de komende 5 dagen op te halen voor elke breedte- en lengtegraad, waarna de weer-subpagina wordt geopend, zoals hierboven getoond. We willen ook visuele feedback krijgen wanneer er lang op een afbeelding wordt geklikt. Met MobileTogether kunnen we afzonderlijke acties definiëren voor een lange klik, zoals hieronder te zien is: [![Acties die worden uitgevoerd bij een lange aanraking, om visuele feedback te geven in mobiele applicaties](/blog/images/long-click-actions.png)](long-click-actions.png) Het resultaat van het lange drukken wordt weergegeven op de tweede screenshot hierboven, waar het berichtvenster de functie van de knop "Weer opvragen" beschrijft. Voor de lange klik hebben we slechts één "Scherm bijwerken"-actie nodig om de achtergrondkleur te veranderen, en we hebben de functie "wachten()" niet nodig voor een expliciete pauze. Een "Scherm bijwerken"-actie wordt automatisch uitgevoerd wanneer de gebruiker het berichtvenster sluit, waardoor de oorspronkelijke achtergrond van de afbeelding wordt hersteld. ### **Visuele feedback in mobiele applicaties waarin tabellen rijen met herhaalde gegevens bevatten** We kunnen dezelfde indexeermethode niet gebruiken om pictogrammen van tools te identificeren op pagina's waar we lijsten presenteren die gebaseerd zijn op gegevens die we ontvangen via API-verzoeken. Zoals te zien is op de onderstaande screenshot, toont deze de zoekresultaten voor hotels en motels in de buurt van een bepaalde locatie: [![Een tabel met herhalende rijen in een mobiele applicatie](/blog/images/search-results-515x1030.png)](search-results.png) Vergelijkbare pagina's worden getoond voor verkeersmeldingen en culturele evenementen in de buurt, en we willen visuele feedback voor de afbeeldingen die bij elke vermelding worden gebruikt. Zoals hier te zien is, bij een langere klik op een van de telefoonafbeeldingen: [![Lang indrukken op een afbeelding in een herhalende rij](/blog/images/search-results-click-515x1030.png)](search-results-click.png) Voor elke pagina wordt de weergave gedefinieerd als een scrollbare tabel met herhalende rijen, waarin we informatie tonen die is opgehaald via API-verzoeken: [![Een tabel met herhalende rijen, zoals aangemaakt in de MobileTogether Designer](/blog/images/repeating-rows.png)](repeating-rows.png) MobileTogether bevat een XQuery-extensiefunctie genaamd `mt-rowgroup-index()`, die een handige oplossing biedt om de afbeeldingen in elke rij te identificeren. We kunnen deze functie combineren met een waarde om de kolom binnen de tabel te identificeren, waardoor we elke afbeelding individueel kunnen bewerken. De telefoonafbeelding die hierboven wordt weergegeven, heeft de volgende achtergrondkleurinstelling: [![Achtergrondkleurinstelling voor een cel in een rij die zich herhaalt.](/blog/images/rowgroup-background-definition.png)](rowgroup-background-definition.png) Wanneer de gebruiker op het telefoonpictogram klikt om een resultaat bij te werken, worden de volgende acties uitgevoerd: de waarde van het element "userButton" wordt bijgewerkt en de actiegroep "Button Flash" wordt uitgevoerd We hebben 300 bij de rijgroepindex opgeteld om de derde kolom met afbeeldingen in de rij aan te duiden. Onze query naar de zoek-API vraagt maximaal 50 resultaten op, dus afhankelijk van het rijnummer van het geselecteerde resultaat, kan de waarde van het element "userButton" voor deze afbeelding variëren van 301 tot 350. Visuele feedback wordt alleen toegepast op deze ene afbeelding, zoals bepaald door de functie mt-rowgroup-index() in de definitie van de achtergrondkleur van de tabelcel. MobileTogether bevat vele andere [aanvullende functies](https://www.altova.com/nl/mobiletogether/features) die gebruikt kunnen worden in XPath/XQuery-expressies, waardoor ontwikkelaars niet meer zelf gebruikersfuncties hoeven te maken om de standaard XPath-, XQuery- en XSLT-bibliotheken uit te breiden voor veelvoorkomende taken in mobiele apps. ### Lees meer en probeer het zelf Als u klaar bent om te beginnen met het toevoegen van visuele feedback in mobiele applicaties, download dan de gratis te gebruiken [MobileTogether Designer](https://www.altova.com/nl/mobiletogether/download). Bekijk ook de pagina [MobileTogether Demos](https://www.altova.com/nl/mobiletogether/demos) met links naar video's, tutorials en meer demo-applicaties. U kunt de applicatie die in dit artikel wordt beschreven, bekijken door een kopie te downloaden van GitHub in [deze repository](https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I).