Ontwerpsjablonen voor mobiele apps

In een eerdere post hebben we geschreven over het gebruik van softwareontwerpsjablonen voor mobiele apps om hergebruik van ontwerpen te bevorderen en het eenvoudig te maken om efficiënte en flexibele oplossingen te ontwikkelen voor verschillende app-eisen. We beschreven een voorbeeld van een controle-sjabloon dat is ontworpen om meerdere niveaus van hiërarchische gegevens weer te geven, afhankelijk van de selectie van de gebruiker tijdens runtime.

Ons voorbeeld is ontwikkeld met MobileTogether, het RMAD (Rapid Mobile App Development) platform van Altova, om ontwikkelaars te helpen applicaties te bouwen die op verschillende platforms werken en die dynamische, geavanceerde prestaties leveren die gebruikers tevreden stellen.

U kunt ook controle-templates maken voor mobiele apps die op verschillende platforms werken, door meerdere controles te combineren tot een grotere eenheid, vergelijkbaar met een complexe sub-assemblage die is opgebouwd uit individuele onderdelen. Dit creëert ontwerpmodellen voor mobiele apps die eenvoudig in elk project kunnen worden geïmporteerd, waardoor de ontwikkeling versnelt en consistentie wordt gewaarborgd.

MobileTogether Designer, het hulpmiddel van Altova voor mobiele ontwikkeling op verschillende platforms, combineert visuele lay-outtools met drag-and-drop functionaliteit met programmeertechnieken. Het bevat voorbeeldapplicaties om verschillende mogelijkheden te illustreren. De applicatie "CompanySales" raadpleegt een orderdatabase om een real-time mobiel rapport te genereren voor het management van een fictief bedrijf. Het rapport bevat informatie over de totale omzet, evenals de omzet per product, regio of individuele verkoper. De gebruiker kan de rapportagespecificaties, zoals de rapportagedatum en vergelijkingen met eerdere periodes, zelf instellen.

Hieronder ziet u afbeeldingen van de overzichtspagina die de verkoopcijfers in real-time weergeeft voor 15 februari, en de pagina "Verkoop per product", die een gedetailleerde uitsplitsing per product voor die dag toont.

Elke pagina in de app bevat functies voor het selecteren van een datum, zodat gebruikers naar elke gewenste datum in het verleden kunnen navigeren om historische verkoopgegevens te bekijken.

In het hoofdvenster van de ontwerper kunnen we zien dat de functies voor het selecteren van een datum zijn opgebouwd door het combineren van drie knoppen en één datumkiezer

De datumkiezer toont de datum van het rapport en stelt de gebruiker in staat om elke datum in het verleden te selecteren. De pijltjes aan de linker- en rechterkant navigeren één dag terug of vooruit, en de actie die aan de knop "Vandaag" is toegewezen, selecteert de huidige datum.

Wanneer het rapport is ingesteld op de huidige datum, zijn zowel de knop "Vandaag" als de pijl-naar-rechts-knop uitgeschakeld.

Ontwerpvoorbeelden voor de gebruikersinterface van mobiele apps

Voordat de bovenstaande besturingselementen worden aangemaakt, wordt eerst een beheersjabloon toegevoegd in het hulpmenu "Pagina's". Nieuwe pagina's en beheersjablonen kunnen worden toegevoegd door op de groene plusknop linksboven te klikken:

Alternatief kunt u een controle-sjabloon maken door bestaande controles op een pagina te selecteren en vervolgens een optie te kiezen in het contextmenu dat verschijnt wanneer u met de rechtermuisknop klikt

Binnen de geavanceerde datumkiezer worden de acties die worden uitgevoerd door de "Vandaag"-knop, de pijlknoppen en de datumkiezer zelf ook gedefinieerd in de controle-sjabloon. Hieronder staan de acties voor de "Vandaag"-knop en de linker pijlknoop:

We willen niet dat de knop "Vandaag" actief is wanneer de geselecteerde datum de huidige datum is, en we willen ook niet dat de gebruiker verder in de toekomst kan navigeren. We kunnen instellen wanneer deze knoppen actief zijn in het hulpmiddelvenster "Stijlen en eigenschappen". Hieronder een gedeeltelijke weergave van de instellingen voor de knop "Vandaag":

De knop "Vandaag" is uitgeschakeld wanneer de geselecteerde datum van het rapport is ingesteld op de huidige datum. We hebben ook verschillende kleuren gedefinieerd om aan te geven of de knop klikbaar is of niet.

De kleuraanpassingen zijn optioneel. Een vereiste voor de CompanySales-app was dat dezelfde kleuren op alle apparaten werden weergegeven, om een consistente huisstijl te simuleren. Als u de kleuraanpassingen leeg laat, gebruikt MobileTogether automatisch standaardkleuren voor elk platform: Android, iOS, Windows 10, enzovoort.

Een controle-sjabloon toevoegen aan een pagina

De verbeterde datumkiezer-sjabloon wordt gebruikt op de pagina "Executive Sales Report" van de app, en op drie van de vier subpagina's. We hebben simpelweg de verbeterde datumkiezer vanuit het hulpmiddelvenster "Pagina's" naar elke pagina gesleept waar deze nodig was. Dit bespaart verschillende stappen, omdat het sjabloon automatisch wordt geïnstalleerd in een "Placeholder Control", zoals hier te zien is:

Het aanpassen van de functionaliteit van ontwerpvoorbeelden voor mobiele apps

We hebben nog een punt om te overwegen. Wanneer de gebruiker een nieuwe rapportdatum selecteert, willen we dat de app automatisch de verkoopdatabase raadpleegt om unieke rapporten en grafieken voor elke pagina weer te geven. De acties die tot nu toe zijn gedefinieerd in de geavanceerde datumkiezer selecteren alleen een datum.

We hebben drie opties voor het verder verwerken van een beheersjabloon: u kunt alleen de acties toepassen die in de beheersjabloon zelf zijn gedefinieerd, de acties in de beheersjabloon vervangen door alle nieuwe acties die in de placeholder zijn gedefinieerd, of de acties van de beheersjabloon combineren met aanvullende acties die in de placeholder zijn gedefinieerd.

Onze bedrijfsapp maakt gebruik van de derde optie. De verbeterde datumkiezer stelt de gebruiker in staat om een datum te selecteren. De "placeholder" op elke pagina voegt unieke acties toe om databasevragen uit te voeren en grafieken bij te werken, passend bij die specifieke pagina.

We hebben event-overrides toegevoegd aan de template-controle op elke pagina, via het contextmenu dat verschijnt wanneer u met de rechtermuisknop klikt

Dit opent het dialoogvenster "Acties". Hieronder wordt de set acties weergegeven die beschikbaar is voor de pagina "Verkoop per product".

De eerste actie is een speciale, ingebouwde actiegroep genaamd "Template Event Callback". Het opnemen van "Template Event Callback" betekent dat alle acties die zijn gedefinieerd in het sjabloon van de "Enhanced Date Picker" eerst worden uitgevoerd, waarna de aanvullende acties die zijn gedefinieerd in de "Placeholder" worden uitgevoerd.

De laatste actiegroep in de afbeelding hierboven is uitgebreid om de acties weer te geven die de rapportage "Verkoop per product" bijwerken. De eerste twee acties voeren databasequery's uit, en de laatste twee acties tekenen de grafieken opnieuw op basis van de resultaten van die query's.

Probeer het zelf

U kunt de gratis MobileTogether Designer downloaden en de voorbeeldtoepassing "CompanySales" openen om dieper in te gaan op ontwerpmodellen voor mobiele apps in deze demo-tool voor verkooprapportage. Of, download de mobiele app en start de "CompanySales"-app op uw eigen mobiele apparaat. Ondersteuning voor ontwerpmodellen in mobiele apps is slechts één van de vele functies in MobileTogether die ontwikkelaars in staat stellen om geavanceerde, native apps te bouwen met een low-code aanpak die snel en eenvoudig is.