Flexibel app-ontwerp met een gebruikersinterface, ondersteund door gestructureerde stijlbestanden met meerdere niveaus

Het gebruik van een cross-platform ontwikkelingsframework voor mobiele apps, zoals MobileTogether, is een uitstekende keuze voor het ontwikkelen van native apps, omdat de ontwikkelomgeving ervoor zorgt dat de gebruikersinterface van de app correct wordt weergegeven, met behulp van de specifieke visuele stijl van elk besturingssysteem. U hoeft slechts één ontwerp te maken.

Dit geeft app-ontwikkelaars de mogelijkheid om snel geavanceerde, data-gedreven apps te bouwen voor alle gebruikers. Om dit te ondersteunen, maakt MobileTogether gebruik van een RMAD-aanpak, samen met flexibele opties voor het ontwerpen van een aantrekkelijke gebruikerservaring. Om specifiek te helpen bij dit laatste punt, worden er meerlagige stijlbladen gebruikt waarmee u stijlen kunt aanpassen en toepassen – zowel statisch als dynamisch – op verschillende niveaus van het app-interfaceontwerp, met slechts een paar klikken.

Ontwerp een aantrekkelijke gebruikersinterface

In versie 3.0 van MobileTogether zijn meerlagige opmaakbladen geïntroduceerd. Hiermee kunnen app-ontwikkelaars globale opmaakstijlen definiëren die op verschillende niveaus kunnen worden toegepast: projectniveau, paginaniveau, tabelniveau en controle-niveau. Dit biedt een centrale verzameling opmaakstijlen die u op verschillende niveaus binnen het app-ontwikkelingsproject kunt gebruiken.

Waarom stijlen aanpassen? Ten eerste wil ik benadrukken dat dit optioneel is. MobileTogether past automatisch de standaardstijlen, knopuitvoeringen, enzovoort toe voor elk besturingssysteem (iOS, Android, Windows, enz.), waardoor u een overzichtelijke en functionele gebruikersinterface kunt creëren zonder dat er wijzigingen nodig zijn. Soms zijn echter aangepaste stijlen vereist om te voldoen aan bedrijfsrichtlijnen, specifieke functionaliteiten of om creativiteit tot uiting te brengen. De nieuwe, meerlagige stijlbladen van MobileTogether zijn ontworpen om dit proces eenvoudiger en sneller te maken.

Om te beginnen, opent u het dialoogvenster "Stijlbladen" vanuit het menu "Project". Hiermee kunt u twee soorten stijlbladen maken: projectspecifieke stijlbladen en door de gebruiker aangemaakte stijlbladen.

Het projectstijlsheet is waar u uw belangrijkste aanpassingen definieert. De stijlen die u hier definieert, worden automatisch toegepast in het hele project. Dit is ideaal als u projectbreed wijzigingen wilt aanbrengen in de uitstraling van alle knoppen, de lettergrootte voor alle tekst wilt instellen, of de achtergrondkleuren projectbreed wilt beheren.

Het tweede type zijn door de gebruiker aangemaakte opmaakbestanden, die door de ontwikkelaar een naam krijgen en indien nodig kunnen worden toegepast op individuele pagina's, tabellen en elementen. Met andere woorden, deze opmaakstijlen worden niet projectbreed toegepast. In de onderstaande screenshot is een door de gebruiker aangemaakt opmaakbestand te zien, genaamd "MijnStijlen", dat bepaalde opmaak definieert voor knoppen, grafieken en labels.

Bij het definiëren van stijlen in het rechterpaneel van het dialoogvenster "Stijlbladen" kunt u een statische waarde selecteren of invoeren, of u kunt een XPath-expressie invoeren die resulteert in een bepaalde waarde. Een voorbeeld van een dynamische toewijzing is het instellen van een waarde op basis van een bepaald criterium, zoals de schermbreedte van het mobiele apparaat van de eindgebruiker, of op basis van gebruikersvoorkeuren. Bijvoorbeeld, u kunt de gebruiker de mogelijkheid geven om de lettergrootte aan te passen via een instellingenpagina in uw app, en vervolgens diezelfde lettergrootte toepassen op alle tekstelementen.

In het volgende MyStyles-stijlblad heb ik XPath gebruikt om de hoogte en breedte van grafieken dynamisch aan te passen, zodat ze perfect geschikt zijn voor het apparaat dat de gebruiker op dit moment gebruikt.

U kunt zoveel van deze door gebruikers aangemaakte stijlbladen definiëren als u wilt, om opties te bieden voor de opmaak van verschillende elementen.

Tijdens de ontwikkeling van een app is het toepassen van een door de gebruiker aangemaakte stijl op een ontwerpcomponent net zo eenvoudig als het selecteren van de naam van de stijl in het venster "Stijlen en eigenschappen".

U kunt ook dynamisch de selectie van het stylesheet bepalen met behulp van XPath, bijvoorbeeld om de keuze van het stylesheet afhankelijk te maken van het type mobiele apparaat. Een groot voordeel van het gebruik van een XPath-expressie om een door de gebruiker aangemaakt stylesheet te selecteren, is dat de selectie voorwaardelijk kan worden gemaakt op basis van dynamische omgevingscriteria. Bijvoorbeeld, als u een specifiek stylesheet wilt gebruiken voor iOS-apparaten en een ander voor alle andere apparaten, kunt u de volgende XPath-expressie gebruiken: "als ($MT_iOS gelijk is aan waar) dan 'iOSStyleSheet', anders 'GeneralStyleSheet'".

Zodra u een door de gebruiker aangemaakte opmaakregel hebt gedefinieerd voor een pagina of element, overschrijft deze alle overeenkomstige waarden in de opmaakregel van het project. Hierdoor kunt u zowel algemene als gedetailleerde aanpassingen maken.

Gestructureerde opmaakbladen (style sheets) besparen een enorme hoeveelheid tijd en bieden ongeëvenaarde flexibiliteit bij het aanpassen van de uitstraling van apps op alle platforms. Zoals ik al in de inleiding aangaf, als u ervoor wilt zorgen dat alle knoppen in uw app er hetzelfde uitzien op iOS, Android en Windows (in plaats van de standaard knopstijl van elk platform te gebruiken), kunt u dat nu eenmaal per project (of op een ander niveau, indien nodig) definiëren.

Bekijk deze functionaliteit door een app te maken met de gratis MobileTogether Designer. U kunt de designer hier downloaden: https://www.altova.com/download/mobiletogether.html.