--- title: "Softwareontwerpsjablonen in mobiele ontwikkelingsprojecten" date: "2020-01-21" categories: - "app-development" - "mobile" - "tools" tags: - "app-design" - "app-development" - "mobile-development" - "mobiletogether" description: Ontdek hoe softwareontwerpsjablonen in MobileTogether de ontwikkeling van mobiele apps verbeteren door hergebruik van ontwerpen te bevorderen en updates te vereenvoudigen, met name voor dynamische gebruikersinterface-elementen. --- Status: #blog Tags: #app-design #app-development #mobile-development #mobiletogether Categories: [mobile-development](/blog/nl/category/mobile-development.md) | [low-code+no-code](/blog/nl/category/low-codeno-code.md) # Softwareontwerpsjablonen in mobiele ontwikkelingsprojecten Softwareontwerpsjablonen [vereenvoudigen de ontwikkeling van mobiele apps](https://www.altova.com/nl/mobiletogether) door het implementeren van repetitieve componenten te vermijden. Het maken van een ontwerpsjabloon maakt bovendien revisies en updates eenvoudiger, omdat een wijziging in de sjabloon doorgevoerd kan worden in een heel project. MobileTogether biedt softwareontwerpsjablonen voor gebruikersinterface-elementen in mobiele apps die op verschillende platforms werken. Dit maakt het mogelijk om ontwerpen hergebruiken en maakt het eenvoudig om efficiënte en flexibele oplossingen te ontwikkelen die voldoen aan verschillende app-eisen. Een controle-sjabloon in MobileTogether is een ontwerpcomponent waarmee ontwikkelaars gebruikerscontroles kunnen specificeren en groeperen, zodat ze gemakkelijk hergebruikt kunnen worden. Controle-sjabloonen ondersteunen parameters, en elk sjabloon kan worden aangepast op basis van parameterwaarden tijdens runtime. Laten we eens een voorbeeld bekijken. ![](/blog/images/MT_control_templates.jpg) De MobileTogether Designer bevat verschillende voorbeeldprojecten die Control Templates illustreren. We zullen de app "Cities4-DynamicSelection" beschrijven. De onderstaande screenshot toont een gedeelte van de app die op een Android-telefoon draait: [![Voorbeeld van software-ontwerpmodellen in een app op een Android-telefoon](/blog/images/screenshot-landscape-2-1030x286.png)](screenshot-landscape-2.png) Deze app illustreert een veelvoorkomend probleem bij het weergeven van hiërarchische gegevens. Uiteindelijk wil de app dat de gebruiker een stad selecteert. Om dit efficiënter te maken, is de volledige lijst met steden georganiseerd per continent, aangeboden in een keuzelijst, waarna deze wordt gefilterd op landen binnen het geselecteerde continent, weergegeven in een reeks radiobuttons. Vervolgens worden de steden binnen het land getoond in een tweede reeks radiobuttons. In horizontale weergave worden de radiobuttons horizontaal weergegeven (zoals hierboven getoond), terwijl ze in verticale weergave verticaal worden weergegeven [![Softwareontwerpsjablonen kunnen automatisch worden aangepast aan de oriëntatie van het mobiele apparaat](/blog/images/screenshot-portrait-2.png)](screenshot-portrait-2.png) Het zou een complex programma zijn om te ontwikkelen als de radiobuttons voor elke combinatie van gebruikerskeuzes handmatig geprogrammeerd moesten worden. Bovendien staan de namen van landen en steden in een XML-bestand, en we willen het programma eenvoudig kunnen bijwerken door simpelweg het bronbestand te bewerken. [![Hiërarchische gegevens in een XML-bestand, bedoeld voor gebruik in softwareontwerpsjablonen ](/blog/images/cities-list.png)](cities-list.png) Wanneer we de app openen in de MobileTogether Designer, zien we de paginalay-out in het hoofdvenster van het ontwerp. [![Plaatsvervangers voor softwareontwerpsjablonen in het ontwerpvenster van de MobileTogether-app](/blog/images/page-design-1.png)](page-design-1.png) Bovenaan de pagina bevindt zich een keuzelijst waarmee u een continent kunt selecteren. Vervolgens volgen twee tabellen met ingebouwde placeholder-elementen. Tijdens de uitvoering genereert de eerste tabel de lijst met landen, en de tweede tabel genereert de lijst met steden. De MobileTogether Designer bevat een hulpmiddelvenster dat een overzicht toont van alle pagina's, subpagina's en controletemplates in elke applicatie. In dit voorbeeld accepteert elke template twee parameters die tijdens de uitvoering worden doorgegeven door de placeholder. [![Het Pages-hulpmenu, dat de app-componenten in MobileTogether weergeeft](/blog/images/pages-window-1.png)](pages-window-1.png) Het selecteren van een van de controle-templates toont de componenten ervan in het hoofdvenster van het ontwerp. [![Weergave van een controle-sjabloon in MobileTogether](/blog/images/template-design-view.png)](template-design-view.png) Voor de verticale versie gebruikt de sjabloon een tabel met dynamische rijen, terwijl de horizontale versie een tabel met dynamische kolommen gebruikt. In beide gevallen wordt de tabel die door de sjabloon wordt gegenereerd, ingebed in een enkele cel van de bovenliggende tabel die op de eerste pagina is gedefinieerd. Hierdoor wordt het selectievakje voor sorteren verticaal gecentreerd in elke kolom met radiobuttons, ongeacht het aantal rijen. Een placeholder bepaalt de positie van een controle-sjabloon op een pagina. Het hulpmiddelvenster "Stijlen en eigenschappen" voor de placeholder identificeert welk controlesjabloon gebruikt moet worden en geeft de parameterwaarden weer. De placeholder voor de lijst met landen definieert beide eigenschappen als XQuery-expressies: [![Eigenschappen van een placeholder voor softwareontwerpsjablonen](/blog/images/control-template-properties.png)](control-template-properties.png) Zelfs bij een gedeeltelijke weergave van de interface kunnen we zien dat de specifieke controle-sjabloon die op de pagina wordt weergegeven, wordt bepaald door de oriëntatie van het apparaat tijdens de uitvoering. We kunnen de MobileTogether Simulator gebruiken om softwareontwerpmodellen tijdens de uitvoering te bekijken en de plaatsvervangers en controlemodellen in actie te zien. In de volgende screenshots gebruiken we een iPhone in horizontale oriëntatie als preview-apparaat. Omdat deze app geen apparaat-specifieke of besturingssysteem-specifieke functies bevat, is het exacte preview-apparaat niet relevant. De keuzemogelijkheden voor continent, land en stad worden in de app gedefinieerd zonder vooraf ingestelde waarden. Daarom zien we bij het starten van de applicatie alleen de paginakop en een lege combobox voor de selectie van het continent: [![Een weergave van de app in de MobileTogether-simulator](/blog/images/simulation-1.png)](simulation-1.png) Het venster "Berichten" toont de uitgevoerde acties terwijl we een continent selecteren. De geselecteerde acties worden hieronder gemarkeerd in het groen [![Interactie met de app in de simulator](/blog/images/simulation-1.5.png)](simulation-1.5.png) [![Het venster "Berichten" geeft aan dat er een continent is geselecteerd in het keuzelijstmenu](/blog/images/sim-message-1.png)](sim-message-1.png) Het simulatievenster toont nu de juiste lijst met landen voor Europa, maar er worden geen plaatsnamen vermeld [![Landen in het geselecteerde continent, gegenereerd tijdens de uitvoering door softwareontwerpsjablonen](/blog/images/simulation-2.png)](simulation-2.png) Op dit moment wacht de app op de gebruiker om een land te selecteren. In plaats van verder te gaan, kunnen we de XQuery-editor openen binnen de simulator en de parameters evalueren die door de eerste placeholder aan de controletemplate zijn doorgegeven. We kopiëren eenvoudig de expressie voor de templateparameters uit het venster "Stijlen en eigenschappen" en plakken deze in het XQuery-venster. De expressie evalueert naar een array die de lijst met landen voor Europa en de sorteerstatus bevat: [![De XQuery-evaluator stelt ons in staat om de exacte parameters te zien die aan de controle-sjabloon worden doorgegeven ](/blog/images/sim-evaluate-1.png)](sim-evaluate-1.png) Maar waarom toont de app geen lijst met steden op de gesimuleerde pagina? We kunnen de parameteruitdrukking die door het tweede placeholder-element wordt doorgegeven voor steden evalueren: [![Parameters die aan de tweede controle-sjabloon worden doorgegeven ](/blog/images/sim-evaluate-2.png)](sim-evaluate-2.png) De functie ontving een lege lijst met plaatsnamen. Omdat de radiobuttons voor de plaatsen zich bevinden in een tabel met dynamische kolommen, werden er geen kolommen weergegeven! De selectievakje-functionaliteit om de sorteervolgorde te kiezen bevindt zich niet in een dynamische kolom, maar wordt ook niet weergegeven. De zichtbaarheidseigenschap van het selectievakje is gedefinieerd als "$PERSISTENT/Root/@Country != ''", wat betekent dat het selectievakje en de bijbehorende tekstlabel pas zichtbaar worden nadat de gebruiker een stad heeft geselecteerd. Samenvattend laat het voorbeeld "Cities4-DynamicSelection" zien hoe verschillende componenten gecombineerd kunnen worden in aangepaste softwareontwerpmodellen en in een mobiele app-ontwerp kunnen worden geplaatst, om zo een elegante oplossing te creëren die het juiste resultaat weergeeft op basis van de keuzes van de gebruiker tijdens het gebruik of andere externe omstandigheden. De demo-app en het bijbehorende databestand zijn opgenomen in de MobileTogether Designer, zodat u de bovenstaande stappen kunt volgen of zelf verder kunt experimenteren. De MobileTogether Designer is een gratis te gebruiken tool om [Maak snel mobiele apps voor verschillende platforms, allemaal gebaseerd op één enkel ontwerp.](https://www.altova.com/nl/mobiletogether/app-development#designer) Kijk [videodemonstraties](https://www.altova.com/nl/mobiletogether/demos) om te zien welke soorten apps gebruikers van MobileTogether dagelijks ontwikkelen, en [Download de installatiebestanden](https://www.altova.com/nl/mobiletogether/download) Om zelf aan de slag te gaan met softwareontwerpsjablonen!