--- title: "Verzamel handtekeningen in uw mobiele apps" date: "2015-12-23" categories: - "mobile" - "xquery" tags: - "mobile-development" - "mobiletogether" - "software-tools" description: Ontdek hoe u handtekeningen kunt integreren in mobiele apps met behulp van Altova MobileTogether 2.0. Leer meer over de functionaliteit die op verschillende platforms werkt en over hoe u handtekeningen kunt opslaan. --- Status: #blog Tags: #mobile-development #mobiletogether #software-tools Categories: [mobile-development](/blog/nl/category/mobile-development.md) | [xpath+xquery](/blog/nl/category/xpathxquery.md) # Verzamel handtekeningen in uw mobiele apps U heeft waarschijnlijk onlangs een elektronische handtekening gebruikt om een aankoop met een creditcard te doen of een pakketbezorging te accepteren. Nu stelt [Altova MobileTogether 2.0](https://www.altova.com/nl/whatsnew_mobiletogether.html) u in staat om handtekeningen te integreren in uw eigen mobiele apps, voor alle platformen. ![handtekening](/blog/images/signature.png) Mobiele apps die gegevens verzamelen van afgelegen locaties, een petitie verspreiden, een overeenkomst autoriseren of simpelweg een interactie in de echte wereld documenteren, kunnen allemaal gebruikmaken van handtekeningregistratie. De Altova Parcel Delivery voorbeeld-app, die GPS-functionaliteit laat zien, is bijgewerkt met handtekeningen voor het verifiëren van de levering. De Parcel Delivery-app is geïnstalleerd op de Altova MobileTogether Demo-server en u kunt deze uitvoeren op uw eigen mobiele apparaat via de [MobileTogether Client-app](https://www.altova.com/nl/mobiletogether/app.html). De Parcel Delivery-app simuleert de werking van een bezorgservice in een stad. Om de bezorging te bevestigen, wordt de ontvanger gevraagd een handtekening te zetten op het mobiele apparaat van de bezorger, zoals te zien is op de onderstaande screenshot, gemaakt op een kleine Android-tablet. ![Handtekeningen verzamelen in de Altova Parcel Delivery mobiele app](/blog/images/Screenshot-1.png) Nadat de volledige bezorgroute is afgelegd, toont de app voor pakketbezorging een overzicht van alle bezorgingen, inclusief de handtekeningen van de ontvangers ter controle. ![Handtekeningsverificatie in de Altova Parcel Delivery mobiele app](/blog/images/Screenshot-2.png) Deze screenshots illustreren de meest gebruikelijke werkwijze voor handtekeningen in mobiele apps: de handtekening wordt vastgelegd, opgeslagen en vervolgens op een later tijdstip en op een andere locatie opnieuw weergegeven. In de meeste toepassingen wordt de handtekening weergegeven op een ander apparaat dan waar de handtekening is verzameld. Bijvoorbeeld, een medewerker gebruikt een mobiele app om een ondertekend declaratieformulier in te dienen, dat een manager vervolgens bekijkt en goedkeurt, of een inkoper ondertekent elektronisch een bestelling en slaat een kopie op in de inkoopdatabase. MobileTogether bevat functies die ontwikkelaars helpen om handtekeningen op verschillende platforms weer te geven. Om deze functionaliteit te demonstreren, hebben we een eenvoudige app ontwikkeld waarmee handtekeningen kunnen worden opgeslagen in een bestand en vervolgens op verschillende apparaten kunnen worden weergegeven. Een handtekening die is vastgelegd op een Android-telefoon, kan bijvoorbeeld worden weergegeven op een iPad, of een handtekening die is vastgelegd vanuit een app die draait op Windows 10, kan worden weergegeven op elk mobiel apparaat. Hieronder is een gedeeltelijke weergave van de startpagina van de app voor handtekeningen te zien, waar de gebruiker kan kiezen om een nieuwe handtekening vast te leggen of handtekeningen te bekijken die al zijn opgeslagen. De knoppen "Vastleggen" en "Bekijken" openen elk een subpagina voor die respectievelijke bewerkingen. ![Startscherm van de demo-app voor mobiele apparaten, die op verschillende platforms werkt en handtekeningen ondersteunt](/blog/images/Screenshot-3.png) **Handtekeningregistratie** Het ontwerp van de subpagina voor het vastleggen van een handtekening is erg eenvoudig, met slechts vier elementen: een label bovenaan, het veld voor de handtekening, en twee knoppen waarmee de gebruiker de handtekening kan opslaan of deze kan verwijderen en het opnieuw kan proberen. ![Ontwerp van de landingspagina voor de demo-apps voor mobiele apparaten](/blog/images/Capture-Page-Design.png) Het veld voor handtekeningen wordt aan de subpagina toegevoegd door een pictogram vanuit het hulpprogramma "MobileTogether Controls" naar de pagina te slepen. Het veld wordt automatisch aangepast aan de breedte van het apparaat dat is geselecteerd voor de simulatie, en er hoeven geen speciale instellingen te worden gedefinieerd. De kleuren van het handtekeningveld zijn gebaseerd op de standaardinstellingen van het apparaat. In het bovenstaande voorbeeld is een iOS-apparaat geselecteerd voor het ontwerp, en de standaardkleuren zijn witte inkt op een zwarte achtergrond. Later, wanneer de app op Android wordt uitgevoerd, zullen de standaardkleuren zwarte inkt op een grijze achtergrond zijn, en voor Windows Phone, zwarte inkt op een witte achtergrond. Het helpervenster "Pagina-inhoud" hierboven toont het element dat we hebben gedefinieerd om het handtekeningafbeelding op te slaan, en elementen om de kleuren ervan en aanvullende gegevens over het apparaat vast te leggen. Deze informatie kan later nuttig zijn voor controle. Afhankelijk van de werking van uw eigen app, kunt u overwegen om de huidige datum en tijd, of eventueel geografische coördinaten, samen met de handtekeningen op te slaan. Onze app voegt elke nieuwe handtekening toe aan het einde van een bestand met de naam "signatures.xml" op de MobileTogether Server. Voor dit eenvoudige voorbeeld hebben alle gebruikers toegang tot hetzelfde bestand. Wanneer u een app ontwerpt waarin sommige gebruikers handtekeningen maken en anderen deze op een ander apparaat bekijken, is het gebruikelijk om de ingevoerde handtekeningen in de standaardgrootte en kleuren van het apparaat van de beoordelaar weer te geven. MobileTogether biedt hiervoor een speciale functie, genaamd "mt-change-image-colors", die u hierbij kan helpen. **Handtekeningweergave** De opgeslagen handtekening kan worden weergegeven in een handtekeningveld of als een afbeelding. Met beide opties wordt de originele handtekening automatisch aangepast aan de grootte van het weergeefapparaat, zodat een handtekening die op een tablet is gemaakt, automatisch past op een telefoon, of omgekeerd. De onderstaande screenshot is gemaakt met een iPhone en toont de subpagina "Beoordeling", waarop een handtekening wordt weergegeven in het standaard wit-op-zwart kleurenschema van iOS, hoewel de originele afbeelding is gemaakt met een Android-apparaat in het zwart-op-grijs kleurenschema. ![Bekijk de vastgelegde handtekening met behulp van de Altova Signatures demo-applicaties voor mobiele apparaten, die op verschillende platforms werken](/blog/images/Capture-Review-Signature-with-expression.png) Aan de rechterkant staat de formule die de kleuren omzet. Let op dat zowel de inkt- als de canvaskleur in één keer worden verwerkt. Dit is noodzakelijk als de omzetting vereist dat twee kleuren worden omgedraaid. Als u de omzetting in twee stappen uitvoert, kunt u bijvoorbeeld zwarte inkt veranderen in wit en de canvaskleur aanpassen. De tussenliggende omzetting zou dan een effen rechthoek opleveren, en de handtekening zou verloren gaan! **Aangepaste kleuren** U bent niet beperkt tot de standaardkleuren. In het hulpmenu voor de eigenschappen van elk handtekeningelement bepaalt het veld "Tekstkleur" de kleur van de handtekening en het veld "Achtergrondkleur" bepaalt de achtergrond. Gebruik XPath-variabelen om de waarden op te slaan, zodat u ze later kunt gebruiken voor conversie. ![Venster voor stijlinstellingen om kleuren te definiëren voor digitale handtekeningen](/blog/images/Styles-Helper-Window.png) We hebben de Signature Demo-app uitgebreid met een extra pagina waarmee de gebruiker aangepaste kleuren kan selecteren via keuzelijsten ![Aangepaste kleuropties voor handtekeningen in de demo-app voor mobiele apparaten van Altova](/blog/images/custom-colors-capture.png) [Download de gratis MobileTogether Designer](https://www.altova.com/nl/download/mobiletogether-designer.html) om razendsnel handtekeningfunctionaliteit toe te voegen aan uw eigen mobiele apps die op verschillende platforms werken. Uw installatie omvat de ontwerpen voor alle voorbeeld-apps die zijn geïnstalleerd op de MobileTogether Demo Server. Als u de handtekeningdemo-app wilt bekijken die in dit artikel wordt beschreven, is deze geüpload naar GitHub op: [https://github.com/altova/MobileTogether-signature-capture](https://github.com/altova/MobileTogether-signature-capture) **MobileTogether mobiele app** Bezoek de app-winkel voor uw apparaat om de **gratis** app te downloaden: [![Android-app beschikbaar op Google Play](/blog/images/googleplay.gif)](https://play.google.com/store/apps/details?id=com.altova.mobiletogether) [![iOS-app in de Apple App Store](/blog/images/Download_on_the_App_Store_Badge_US-UK_135x40.png)](https://itunes.apple.com/us/app/altova-mobiletogether/id904018222?) [![Een Windows Phone 8-app in de Windows Store](/blog/images/258x67_WPS_Download_cyan.gif)](http://www.windowsphone.com/s?appid=49ef6685-f3bc-4df3-ac2a-99ae567979ca) [![Een Windows 8-app in de Windows Store](/blog/images/Windows8_Green.png)](http://apps.microsoft.com/windows/en-us/app/altova-mobiletogether/9775f49c-3db4-4fe4-8e7b-19ae77f537bb)