Ë xhstalcy582636z ONTWIKKELEN. Handboek ONTWIKKELEN ONTWIKKELEN. Handboek. Handboek. Mark Aalderink. Mark Aalderink

Mark Aalderink

Mark Aalderink

Handboek

Handboek

ONTWIKKELEN Apps voor iPhone en Android zijn niet meer weg te denken. Handboek apps ontwikkelen geeft je alle benodigde achtergrondinformatie om complexe apps te bouwen voor iPhone, iPad en Android met het crossplatform-framework Titanium (van Appcelerator). Ook is het een naslagwerk met oplossingen voor veelvoorkomende problemen.

Mark Aalderink is auteur van de Basiscursus apps ontwikkelen. Hij is eigenaar van WorldWise Learning en heeft verschillende apps ontwikkeld voor iPhone, iPad en Android.

978 90 12 58263 6 988

Handboek apps ontwikkelen compleet.indd 1

Ten slotte bevat het boek uitvoerige beschrijvingen van de Titanium-API’s. Handboek apps ontwikkelen is een vervolg op Basiscursus apps ontwikkelen.

Ë|xHSTALCy582636z

ONTWIKKELEN

De volgende onderwerpen worden behandeld: - achtergrondgegevens over iOS, Android en BlackBerry OS - Titanium Studio: de ontwikkelomgeving - het succesvol opzetten van een Titanium-project - het documenteren, debuggen en testen van apps - de gebruikersinterface, locatiegegevens, push-berichten en media - het laten werken van apps op de achtergrond - werken met bestanden, netwerken en databases

Handboek

ONTWIKKELEN 3/28/2012 10:57:59 AM

Handboek apps ontwikkelen Mark Aalderink

Meer informatie over deze en andere uitgaven kunt u verkrijgen bij: Sdu Klantenservice Postbus 20014 2500 EA Den Haag tel.: (070) 378 98 80 www.sdu.nl/service

© 2012 Sdu Uitgevers, Den Haag Academic Service is een imprint van Sdu Uitgevers bv.

Zetwerk: Redactiebureau Ron Heijer, Markelo Omslagontwerp: MMX, Bergambacht ISBN 978 90 12 58263 6 NUR 988 Alle rechten voorbehouden. Alle intellectuele eigendomsrechten, zoals auteurs- en databankrechten, ten aanzien van deze uitgave worden uitdrukkelijk voorbehouden. Deze rechten berusten bij Sdu Uitgevers bv en de auteur. Behoudens de in of krachtens de Auteurswet gestelde uitzonderingen, mag niets uit deze uitgave worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand of openbaar gemaakt in enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door fotokopieën, opnamen of enige andere manier, zonder voorafgaande schriftelijke toestemming van de uitgever. Voor zover het maken van reprografische verveelvoudigingen uit deze uitgave is toegestaan op grond van artikel 16 h Auteurswet, dient men de daarvoor wettelijk verschuldigde vergoedingen te voldoen aan de Stichting Reprorecht (Postbus 3051, 2130 KB Hoofddorp, www.reprorecht.nl). Voor het overnemen van gedeelte(n) uit deze uitgave in bloemlezingen, readers en andere compilatiewerken (artikel 16 Auteurswet) dient men zich te wenden tot de Stichting PRO (Stichting Publicatie- en Reproductierechten Organisatie, Postbus 3060, 2130 KB Hoofddorp, www.cedar.nl/pro). Voor het overnemen van een gedeelte van deze uitgave ten behoeve van commerciële doeleinden dient men zich te wenden tot de uitgever. Hoewel aan de totstandkoming van deze uitgave de uiterste zorg is besteed, kan voor de afwezigheid van eventuele (druk)fouten en onvolledigheden niet worden ingestaan en aanvaarden de auteur(s), redacteur(en) en uitgever deswege geen aansprakelijkheid voor de gevolgen van eventueel voorkomende fouten en onvolledigheden. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, without the publisher’s prior consent. While every effort has been made to ensure the reliability of the information presented in this publication, Sdu Uitgevers neither guarantees the accuracy of the data contained herein nor accepts responsibility for errors or omissions or their consequences.

Inleiding De fragmentatie van platformen voor smartphones en tabletcomputers heeft geleid tot het ontstaan van crossplatform-ontwikkeltools. Op dit moment is Appcelerator Tita nium een van de populairste crossplatform-frameworks. Titanium kan apps bouwen voor iOS (iPhone en iPad), Android (zowel telefoons als tabletcomputers) en BlackBerry. Ten slotte kun je ook HTML5-webapps bouwen. Het landschap voor mobiele besturingssystemen ziet er op dit moment (december 2011) zo uit dat iOS en Android de grote overwinnaars lijken te worden van de smartphone- en tabletoorlogen. In de Verenigde Staten draait ongeveer de helft van alle smartphones Android en tussen 25 en 30 procent iOS. Op het gebied van tabletcomputers is de iPad koning, maar het ruime aanbod van goedkopere tablets zal ongetwijfeld Android tot een belangrijke speler op deze markt maken. Begin 2012 valt nog te bezien of Windowstablets en telefoons een succes zullen worden. BlackBerry lijkt zich niet te kunnen handhaven. Appcelerator Titanium 1.8 Titanium 1.8 is een volwassen ontwikkelsysteem voor zowel Android als iOS. Je schrijft de code in JavaScript, waarbij je gebruikmaakt van de Titanium-API’s die de meeste functionaliteit van beide platforms beschikbaar stelt en die zelf geschreven zijn in de platformeigen taal (Objective-C voor iOS of Java voor Android). Eventueel kun je deze API’s zelf uitbreiden met code in de platformeigen taal of met modules van derden. Omdat de native functionaliteit tot je beschikking staat, zijn Titanium-apps niet te onderscheiden van apps die met platformspecifieke ontwikkeltools zijn gemaakt. Ook is Titanium zo ontwikkeld dat apps zo snel mogelijk worden uitgevoerd. Vooral in recente versies is de snelheid drastisch verbeterd. Omdat de code door een JavaScriptinterpreter wordt geïnterpreteerd (als bytecode) kan het draaien van de code toch iets langzamer zijn dan code die geschreven is in de platformeigen taal. Maar inmiddels zijn de JavaScript-interpreters zo geoptimaliseerd dat het verschil nauwelijks merkbaar is. Sinds Titanium is overgestapt van de in Java draaiende interpreter Rhino op V8 (geschreven in C++) is in enkele gevallen Titanium-code zelfs sneller dan native Android Javacode. Kortom, Titanium is geschikt om ingezet te worden voor de meeste projecten voor mobiele toestellen. In sommige gevallen zul je de apps toch liever met de platformtools willen ontwikkelen, maar dat worden er steeds minder. Het handboek Vanaf het ontstaan van Titanium eind 2008 tot op dit moment (versie 1.8) is het aanzienlijk uitgebreid en daardoor complexer geworden. In 2011 is bijvoorbeeld een eigen ontwikkelomgeving, Titanium Studio, toegevoegd aan het pakket. Bovendien is het voor verschillende functies nodig om meer te weten over de platforms Android, iOS en BlackBerry OS. Daarom is het hebben van een handboek over Titanium zeer nuttig.

v

Handboek apps ontwikkelen

Dit handboek probeert twee taken te vervullen: 1) het bieden van de nodige achtergrondkennis over de platforms; 2) het geven van een grondig maar handig overzicht van de verschillende functies van Titanium, met tips om je uit veel voorkomende problemen te redden. Voor wie dit boek bedoeld is Dit boek is gericht op (web)ontwikkelaars en ervaren programmeurs die redelijke kennis van JavaScript en basiskennis van Titanium hebben. Om te leren ontwikkelen met Titanium is het boek Basiscursus apps ontwikkelen beschikbaar. Dit boek kan beschouwd worden als de inleiding op dit handboek. Diepgaande kennis van de besturingssystemen iOS, Android en BlackBerry wordt niet voorondersteld. Dit boek geeft juist de basale achtergrondkennis voor deze systemen. Mocht je jouw JavaScript-kennis willen verbeteren, gebruik dan de Basiscursus Java Script 1.5 (Den Haag: Sdu, 2008). Voor SQL kun je de Basiscursus SQL (Den Haag: Sdu, 2003) gebruiken. Wat je nodig hebt voor dit boek Je kunt zowel een computer met het Apple-, Windows- als Linux-systeem gebruiken. In het eerste hoofdstuk wordt uitgelegd hoe je Titanium kunt installeren op al deze drie systemen. Ontwikkelen voor iPhone en iPad (iOS) vereist een Apple-computer met OS X vanaf versie 10.6.4. Android-apps kunnen zowel op een Apple-, Windows- als Linuxcomputer gebouwd worden. Wij raden een snelle Apple-computer aan. Het ontwikkelen van apps voor Android is moeizaam door de traagheid van de Android-emulator. Veel Titanium-ontwikkelaars maken daarom eerst een app voor de iPhone en passen die daarna aan voor Android. Het ontwikkelen van BlackBerry-apps met Titanium is in een basaal stadium. Het valt te verwachten dat in de loop van 2012 ook dit tot een volwassen project gemaakt zal worden. Voor iOS-ontwikkeling heb je de iPhone SDK nodig. Daarvoor moet je een geregistreerde Apple Developer zijn (gratis). Hiermee kun je iPhone-apps ontwikkelen en uitproberen in de iPhone Simulator. Om de app te laten draaien op een toestel moet je meedoen met het iPhone Developer Program (kosten: 79 euro). Dan kun je de apps ook distribueren via de App Store. Deelname aan de programma’s van Android en BlackBerry en daarmee de Android en BlackBerry OS SDK’s is gratis. Wel kost registratie voor de Android Market eenmalig 25 dollar. Afspraken in dit boek Nieuwe termen, URL’s, e-mailadressen, bestandsnamen en code-elementen zoals namen van variabelen, functienamen, datatypen, omgevingsvariabelen, statements en keywords worden in de lopende tekst cursief weergegeven. Programmacode en commando’s die je letterlijk moet intypen staan in dit lettertype.

vi

Inleiding

Tabellen met methodes geven eerst de naam van de methode en tussen haakjes de argumenten voor die methode. Als er alleen haakjes staan, worden er geen argumenten verwacht. Als de methode een resultaat teruggeeft staat vóór de methodenaam het teruggegeven datatype. Als niet duidelijk is wat deze waarde representeert, staat dit in de kolom beschrijving. Navigatie in menu’s, mappen en schermen is meestal aangegeven met een pijl: -> Gebruik van voorbeeldcode Je mag code die je in dit boek vindt gebruiken in jouw eigen apps. Zelfs als je grote stukken code gebruikt, hoef je geen contact op te nemen voor toestemming. We stellen het uiteraard wel op prijs als je een verwijzing in jouw app opneemt naar dit boek. Daarbij geef je gewoonlijk de titel, auteur, uitgever en het jaar van uitgave op. Bijvoorbeeld Handboek apps ontwikkelen, Mark Aalderink. Den Haag: Sdu, 2012. Om te zorgen voor de nodige herkenning bij het lezen van Titanium-API’s en -gidsen zijn voorbeelden vaak overgenomen uit de Guides en API-documentatie die Appcelerator beschikbaar heeft gesteld op haar website. Al deze voorbeelden kunnen zonder problemen gebruikt worden voor alle mogelijke doeleinden. Feedback Wij hopen dat dit boek een dagelijkse partner voor je wordt bij het ontwikkelen van apps met Titanium en we houden ons aanbevolen voor suggesties en opmerkingen. Die nemen we dan mee in toekomstige edities. Stuur hiervoor een e-mailbericht naar [email protected]. Op www.worldwiselearning.org/handboek kun je links, literatuurverwijzen en mogelijke errata vinden. Ten slotte wens ik de lezer veel plezier met het ontwikkelen van apps! Februari 2012 Mark Aalderink

vii

Inhoud Inleiding

v

1

1 1 1 2 2 3 3 4 5

Titanium Studio 1.1 Inleiding 1.2 Titanium 1.3 Installeren en updaten van Titanium Studio en de SDK’s 1.3.1 Inleiding 1.3.2 Verkrijgen van Titanium Studio 1.3.3 Installatie OS X 1.3.4 Installeren van de Android-SDK 1.3.5 Installatie op Linux 1.3.6 Installeren van de Java Development Tools (JDT) in Titanium Studio 1.3.7 Installeren Android Development Tools Plug-in (ADT) 1.3.8 Aanpassen config.ini van Titanium Studio 1.3.9 Updaten van de laatste Titanium-SDK en Titanium Studio 1.3.10 Standaardlocaties van de Titanium-SDK’s 1.3.11 De ontwikkelversie van Titanium verkrijgen: continuous builds 1.3.12 Problemen oplossen met proxyservers 1.4 Titanium Studio: De basisconcepten 1.4.1 Inleiding 1.4.2 Workspace 1.4.3 Workbench 1.4.4 Views 1.4.5 Editors 1.4.6 Menu’s 1.4.7 Perspectieven 1.5 Werken met projecten en bestanden 1.5.1 Projecten 1.5.2 De instellingen voor een Titanium-project: tiapp.xml 1.5.3 Draaien van projecten in de emulator 1.5.4 Schoonmaken van een project 1.5.5 Werken met bestanden 1.6 Content Assist 1.7 Navigeren 1.7.1 Algemeen 1.7.2 Het gebruiken van Open Resource om naar een bronlocatie te navigeren 1.7.3 Zoeken

6 6 7 7 8 8 8 9 9 9 10 10 12 13 13 14 14 15 15 16 16 17 18 18 18 19

ix


2

x

1.8 Debuggen 1.8.1 Inleiding 1.8.2 Loggen naar de console 1.8.3 Het Debug-perspectief 1.8.4 Expressies 1.8.5 Breakpoints en de uitvoering van code 1.8.6 Variabelen 1.9 Documenteren met ScriptDoc 1.9.1 Inleiding 1.9.2 De ordening van elementen 1.9.3 ScriptDoc-elementen 1.10 Versiebeheer: Git 1.10.1 Inleiding 1.10.2 Installatie 1.10.3 Gebruiken van Git in de terminal/opdrachtprompt 1.10.4 Git in Titanium Studio 1.11 Sneltoetsen 1.11.1 Inleiding 1.11.2 Bewerken 1.11.3 Werken met bestanden 1.11.4 Werken met schermen 1.11.5 Navigeren 1.11.6 Draaien en debuggen 1.11.7 Zoeken en vervangen 1.11.8 Code en commentaar 1.11.9 Views 1.12 Het script titanium 1.12.1 Inleiding 1.12.2 Wijzigen van de omgevingsvariabelen 1.12.3 Commando’s

19 19 20 20 21 22 22 23 23 23 24 26 26 27 28 32 33 33 33 35 35 36 36 37 37 37 38 38 38 38

Architectuur en instellingen van een Titanium-project 2.1 Inleiding 2.2 Projectstructuur van een Titanium-project 2.2.1 De projectmap 2.2.2 De voorbeeldapplicatie: KitchenSink 2.3 Architectuur van Titanium 2.3.1 Modules 2.3.2 Het ontwerppatroon achter Titanium: Het factory-pattern 2.3.3 Online documentatie: API Reference Documentation 2.4 JavaScript-modules in Titanium 2.4.1 Inleiding 2.4.2 De include-methode 2.4.3 CommonJS-modules 2.4.4 Native/gecompileerde modules installeren en gebruiken 2.5 Crossplatform ontwikkelen

41 41 41 41 43 43 43 45 46 46 46 47 47 51 52

Inhoud

2.6 Het Model-View-Controllermodel 2.6.1 Inleiding 2.6.2 De basis: een eigen MVC-structuur 2.6.3 PureMVC 2.7 Instellingen van de app: tiapp.xml 2.7.1 Inleiding 2.7.2 Elementen op het hoogste niveau 2.7.3 iOS-specifieke elementen 2.7.4 Android-specifieke elementen 3 JavaScript 3.1 Inleiding 3.2 JavaScript en Titanium 3.2.1 Inleiding 3.2.2 Titanium en ECMA-262 versie 5 3.2.3 Geheugenbeheer 3.2.4 Executiecontexten 3.2.5 Multithreading 3.2.6 Uitbreidingen van Titanium op standaard JavaScript 3.2.7 Titanium-proxies 3.3 Objectgeoriënteerd JavaScript 3.3.1 Inleiding 3.3.2 Datatypen 3.3.3 Klassen en objecten 3.3.4 Functies en scopes 3.3.5 Encapsulatie 3.3.6 Statische methodes en eigenschappen 3.3.7 Overerving 3.3.8 JavaScript-frameworks en objectgeoriënteerd programmeren 3.4 Ontwerppatronen (design patterns) 3.4.1 Inleiding 3.4.2 Singleton 3.4.3 Factory 3.4.4 Composite 3.4.5 Façade 3.4.6 Adapter 3.4.7 Decorator 3.4.8 Proxy 3.4.9 Observer 3.5 Events 3.5.1 Inleiding 3.5.2 Eventlisteners 3.5.3 Simuleren van een event 3.5.4 Eigen events 3.5.5 Eventpropagatie 3.6 Best practices 3.7 Literatuurverwijzingen

55 55 55 57 74 74 74 75 76 81 81 81 81 82 83 86 88 89 92 92 92 93 94 96 99 101 102 104 107 107 108 109 111 112 112 113 114 114 114 114 115 116 116 117 117 119 xi


xii

4 Android 4.1 In dit hoofdstuk 4.2 Het Android-besturingssysteem 4.2.1 Inleiding 4.2.2 Android-versies 4.2.3 De architectuur van het Android-systeem 4.3 Android-SDK’s en -tools 4.3.1 Inleiding 4.3.2 Android SDK and AVD Manager 4.3.3 Android-emulator 4.3.4 Android Debug Bridge (ADB) 4.3.5 Dalvik Debug Monitor Server (DDMS) 4.3.6 Draw 9-patch 4.3.7 Testen: UI/Application Exerciser Monkey 4.3.8 Titanium: Fastdev 4.3.9 Installatie van een app op het toestel 4.4 Android-applicaties 4.4.1 Inleiding 4.4.2 Applicatiearchitectuur 4.4.3 Activities 4.4.4 Intents 4.4.5 Achtergrondservices 4.4.6 Notificaties 4.4.7 Manifestbestand 4.4.8 Applicatie en systeem-resources 4.4.9 Installeren van Android-apps op de SD-kaart 4.5 Android-specifieke elementen van de gebruikersinterface 4.5.1 Inleiding 4.5.2 Android-menu’s 4.5.3 Het ondersteunen van meerdere schermtypen 4.5.4 Systeempictogrammen 4.5.5 Fysieke knoppen 4.5.6 Android-labels: HTML en links 4.5.7 Eigen lettertypen 4.6 Android Market 4.6.1 Inleiding 4.6.2 Publiceren in Android Market 4.7 Literatuurverwijzing

121 121 121 121 121 123 124 124 124 125 127 130 132 133 134 136 138 138 138 139 146 152 156 163 166 167 168 168 168 172 175 175 176 177 178 178 178 182

5

183 183 183 184 188 188 189

iOS: iPhone en iPad 5.1 Inleiding 5.2 Het besturingssysteem iOS 5.3 Draaien van apps in de simulator en op het toestel 5.4 Tools 5.4.1 Inleiding 5.4.2 Simulator

Inhoud

5.4.3 Instruments 5.4.4 Interface Builder 5.4.5 Icon Composer 5.4.6 Property List Editor 5.4.7 Logberichten van het toestel 5.5 iOS-specifieke functies 5.5.1 Inleiding 5.5.2 Applicatie-instellingen: het bestand Info.plist 5.5.3 Background-services 5.5.4 Lokale notificaties 5.5.5 Proximity 5.6 De gebruikersinterface 5.6.1 Inleiding 5.6.2 Adviews 5.6.3 Badges 5.6.4 De buttonbar 5.6.5 De coverflowview 5.6.6 Het dashboard 5.6.7 Het maskedimage 5.6.8 De navigationgroup 5.6.9 De statusbalk 5.6.10 De tabbedbar 5.6.11 De toolbar 5.6.12 Eigen lettertypen 5.6.13 Systeemknoppen en pictogrammen 5.6.14 Transities voor modale schermen 5.7 iPad 5.7.1 Inleiding 5.7.2 Modale schermen 5.7.3 De documentviewer 5.7.4 De popover 5.7.5 Het splitwindow 5.7.6 Universal apps 5.8 Publiceren in de App Store 6 BlackBerry 6.1 Inleiding 6.2 Installeren van de plug-in BlackBerry Eclipse in Titanium Studio 6.2.1 Voorvereisten 6.2.2 Installeren 6.3 BlackBerry-toestellen en OS-versies 6.4 De simulator 6.5 Bijzonderheden 6.6 Beschikbare Titanium-API’s

189 190 191 191 191 191 191 191 192 193 194 194 194 194 195 195 196 196 197 198 199 199 200 201 201 201 202 202 202 202 203 205 206 207 211 211 211 211 211 213 214 216 217

xiii


7

De gebruikersinterface 229 7.1 Inleiding 229 7.2 Views, widgets en windows 229 7.2.1 Inleiding 229 7.2.2 Het View-object 230 7.2.3 Het Window 235 7.3 Lay-out van views 239 7.3.1 Lay-out: positie en grootte van views 239 7.3.2 Schermoriëntaties 241 7.4 De tabgroep 244 7.5 De tableview 247 7.6 Overige componenten 254 7.6.1 Inleiding 254 7.6.2 Afbeeldingen 254 7.6.3 Presenteren van gegevens 255 7.6.4 Invoer van gegevens 255 7.6.5 Navigatiecomponenten 256 7.6.6 Scrollviews 256 7.7 De webview 257

8

Locaties en kaarten 8.1 Inleiding 8.2 GPS 8.2.1 Inleiding 8.2.2 Het kompas 8.2.3 De gyrometer 8.2.4 Locatiegegevens 8.2.5 Forward- en reverse-geocoding 8.3 Kaarten 8.3.1 Inleiding 8.3.2 De mapview 8.3.3 Annotaties 8.3.4 Routes 8.3.5 Afstandsberekening

9 Media 9.1 Inleiding 9.2 Overzicht van de Media-API’s 9.3 Afspelen van geluiden, muziek en video 9.3.1 Inleiding 9.3.2 Geluiden 9.3.3 De muziekbibliotheek (iOS) 9.3.4 Audio streamen: de audioplayer 9.3.5 Afspelen van video: de videoplayer

xiv

263 263 263 263 264 265 265 270 271 271 271 274 277 279 281 281 281 284 284 284 286 289 292

Inhoud

9.4 Opnemen van audio en video 9.4.1 Inleiding 9.4.2 Opnemen van audio: de audiorecorder 9.4.3 Opnemen van video 9.4.4 Bewerken van video’s (iOS) 9.5 De camera en fotogalerie (filmrol) 9.5.1 Inleiding 9.5.2 De camera 9.5.3 De galerie 9.6 Telefonie, SMS en e-mail 9.6.1 SMS’en en telefoneren 9.6.2 De emaildialog 10 Gegevens 10.1 Inleiding 10.2 Het bestandssysteem 10.3 Applicatie-properties 10.4 Database: SQLite 10.4.1 Inleiding 10.4.2 Titanium en SQLite-databases 10.4.3 De basis: tabellen 10.4.4 Transacties 10.4.5 Datatypen 10.4.6 SQL-opdrachten 10.4.7 Functies 10.4.8 Expressies 10.4.9 PRAGMA-statements 10.4.10 Het optimaliseren van een database 10.4.11 Encryptie 10.5 Gegevensstreams 10.5.1 Inleiding 10.5.2 Buffers 10.5.3 Codering van binaire gegevens 10.5.4 De bufferstream 10.5.5 De blobstream 10.5.6 De filestream 10.6 Lokalisatie 10.7 Utilities

296 296 296 298 298 299 299 299 301 302 302 302 305 305 305 310 312 312 312 316 316 317 317 320 321 322 323 324 324 324 325 325 328 330 331 332 335

11 Netwerkcommunicatie 337 11.1 Inleiding 337 11.2 Communicatie met internet: AJAX 337 11.2.1 Inleiding 337 11.2.2 XML-RPC en REST 338 11.2.3 Het HTTPClient-object 339 11.2.4 Headers 346

xv


11.2.5 Bestanden up- en downloaden 11.2.6 Cookies 11.3 Sockets 11.4 XML 11.5 JSON 11.6 Webservices 11.6.1 Inleiding 11.6.2 Facebook 11.6.3 Twitter

xvi

348 350 350 356 357 358 358 358 362

Appendices I. iOS-lettertypen II. MIME-types

365 365 366

Register

369

Hoofdstuk 1

Titanium Studio 1.1 Inleiding Titanium Studio is een ontwikkelomgeving, IDE (Integrated Development Environment) waarmee je Titanium-projecten kunt aanmaken, bewerken, debuggen en draaien, in de simulator of op het toestel. Ook kun je hiermee het eindpakket voor distributie genereren. De IDE heeft veel functies die het ontwikkelen vergemakkelijken zoals het oplichten van syntaxiselementen, contextafhankelijke hulp voor Titanium API-elementen en JavaScript en het valideren van JavaScript-code. Bovendien zorgt Titanium Studio ervoor dat altijd de laatste officiële Titanium-SDK (Software Development Kit) is geïnstalleerd. Titanium Studio is gebouwd op Eclipse, een ontwikkelomgeving die vooral wordt gebruikt door Java-ontwikkelaars. Eclipse is oorspronkelijk ontwikkeld door IBM, maar is sinds november 2001 open source en gratis verkrijgbaar. Sindsdien wordt het onderhouden door The Eclipse Foundation. Meer specifiek is Titanium Studio een aangepaste versie van Aptana Studio, het belangrijkste product van het bedrijf Aptana. Appcelerator heeft Aptana eind 2010 overgenomen om Aptana Studio te gebruiken als IDE voor Titanium. Aptana Studio is een populaire open-source-IDE voor webontwikkeling, die door miljoenen webontwikkelaars wordt gebruikt. Titanium Studio is voortdurend in ontwikkeling. Nieuwe functies en verbeteringen worden dagelijks opgeleverd en van tijd tot tijd wordt een nieuwe officiële versie beschikbaar gesteld. Het grafisch ontwerpen van de gebruikersinterface is helaas nog niet mogelijk, maar dat zal in de toekomst ongetwijfeld deel uitmaken van Titanium Studio. Verder is Titanium Studio een volwassen IDE voor Titanium: het bevat alle benodigde functies voor Titanium-ontwikkeling. Hoewel het mogelijk is om met andere editors te werken, en goed leren werken met Titanium Studio een flinke klus is, is het aan te bevelen om dit te leren. Het gebruiken van de geïntegreerde debugger is bijvoorbeeld essentieel voor softwareontwikkeling. In dit hoofdstuk wordt ingegaan op het installeren van Titanium Studio en de TitaniumSDK, iOS-SDK en Android-SDK’s. Je krijgt bovendien een overzicht van de basiselementen van Titanium Studio, leert hoe je Titanium-projecten debugt en hoe je ze documenteert. Ten slotte gaan we in op versiebeheer met de populaire tool Git.

1.2 Titanium Zoals je ongetwijfeld weet, is Titanium een crossplatform-ontwikkeltool voor apps. Oorspronkelijk bevatte het ook een product om desktopapplicaties te ontwikkelen voor

1


Windows, OS X en Linux, maar inmiddels is dat afgestoten. Op dit moment is het mogelijk om apps te maken voor iOS (iPhone en iPad), Android, BlackBerry (bèta) en voor de browser (HTML5-webapps). Titanium-apps schrijf je in JavaScript, waarbij je gebruikmaakt van de uitvoerige Titanium-API’s die toegang geven tot de platformbibliotheken. Titanium optimaliseert de JavaScript-code van het Titanium-project en combineert die met native applicatiecode. Vervolgens gebruikt het de tools van het geselecteerde platform (iOS, Android of BlackBerry) om het eindpakket te maken. Meer specifiek start Titanium achtereenvolgens de volgende drie componenten: 1 de pre-compiler; 2 de front-end-compiler; 3 de platform-compiler en packager. In de pre-compiler-fase optimaliseert Titanium de JavaScript-code en bepaalt het welke modules van de Titanium-API’s opgenomen worden in het eindpakket. Op deze manier wordt het pakketbestand zo klein mogelijk gehouden. Omdat Titanium de JavaScriptcode optimaliseert, is het niet nodig om een minifier te gebruiken zoals JSMin of YUI Compressor. De code is ook niet zichtbaar voor de eindgebruiker. Daarna produceert de front-end-compiler de platformspecifieke native code en het native project, en produceert het de extra code die nodig is om Titanium te kunnen compileren door de platformcompiler. Ten slotte gebruikt Titanium Studio de tools van het geselecteerde platform om het eindpakket te compileren met de platform-compiler. Daarna wordt de app op de emulator geïnstalleerd en opgestart of op het toestel geïnstalleerd. De JavaScript-code wordt ingesloten bij het eindpakket en bij uitvoering van de app geïnterpreteerd door de JavaScript-engine van het platform. Voor iOS wordt gebruikgemaakt van de JavaScriptCore-interpreter (die ook gebruikt wordt door Safari) en voor Android van Mozilla Rhino of V8 JavaScript Engine van Google. V8 is de JavaScript-inter preter die gebruikt wordt door Chrome. Al deze engines verschaffen een standaard Java Script-interpreter die vrijwel alle functionaliteit biedt die je verwacht bij een webbrowser. Alleen heb je geen beschikking over functies die specifiek zijn voor browsers zoals de DOM.

1.3

Installeren en updaten van Titanium Studio en de SDK’s

1.3.1 Inleiding Het installeren van Titanium Studio en de Titanium-SDK’s is eenvoudig. Het is noodzakelijk om Oracle’s Java Development Kit (JDK) te installeren voor Android- en BlackBerry-ontwikkeling. De Java Runtime Environment (JRE) is nodig om Titanium Studio te kunnen draaien (Eclipse is geschreven in Java) en de Java-compiler voor het compileren

2

Hoofdstuk 1 – Titanium Studio

van de Android Java-code. In de meeste gevallen is JRE al geïnstalleerd op het besturingssysteem. Linux gebruikt een andere Java-runtime, die niet vlekkeloos werkt met Titanium Studio. Daarom moet je Oracle’s Java afzonderlijk installeren. Het installeren van Oracle’s Java en Android is ingewikkelder dan de tools voor iOS. Daarom besteden we hieraan meer aandacht. 1.3.2 Verkrijgen van Titanium Studio Doorloop de volgende stappen om Titanium Studio te installeren: V Ga naar https://my.appcelerator.com en maak zo nodig een account aan. V Voer nu jouw gegevens in, vink aan dat je het eens bent met de voorwaarden en druk op de knop Sign Up. V Wacht totdat je de activeringsmail hebt gekregen en activeer jouw account via de gegeven link. V Vul de gegevens en druk op Continue. V Nu kom je in een dashboard met verschillende opties terecht. Om Titanium Studio te downloaden ga je naar Downloads en daarna kies je het besturingssysteem waarvoor je Titanium Studio wilt downloaden. Als je dit gedaan hebt, begint het downloaden vanzelf. V Start het gedownloade bestand. In het geval van Windows start je hiermee het installatieprogramma en op een Apple-computer open je het diskimage en sleep je Titanium Studio naar de applicatiemap. V Na het installeren verschijnt in het geval van Windows een snelkoppeling naar Titanium Studio op het bureaublad en bij een Mac ga je naar de applicatiefolder. Klik op het pictogram om het programma te starten. V Na het starten geef je eerst een locatie op de schijf op voor jouw projecten, de zogenaamde workspace. Daarna geef je jouw accountgegevens op om in te loggen bij App celerator. V Titanium Studio downloadt vervolgens de laatste Titanium-SDK en pakt deze uit. Dit kan even duren. V Vaak zal Titanium Studio aangeven dat er updates beschikbaar zijn via een waarschuwingsscherm rechtsonder. Het is aan te raden om regelmatig te updaten. Meestal moet je Titanium Studio opnieuw starten na installatie van de updates. Titanium Studio onthoudt onder welke accountnaam je de laatste keer bent ingelogd. Wil je uitloggen en onder een andere naam inloggen, klik dan op jouw naam rechtsonder. Titanium Studio vraagt vervolgens of je wilt uitloggen. Het programma wordt afgesloten en je moet het zelf opnieuw starten en de nieuwe accountgegevens invoeren. 1.3.3 Installatie OS X Op de Mac kun je mobiele apps maken voor iPhone, iPad, iPod en Android. Hiervoor heb je minimaal OS X Snow Leopard 10.6.4 nodig. Installeer de iOS-SDK door de volgende stappen te doorlopen: V Ga naar developer.apple.com. V Registreer je als een Apple Developer als je dat nog niet bent (gratis). Het kan enkele

uren duren voordat de registratie in orde is.

3


V Als de registratie is afgerond is, kun je inloggen en de laatste versie van Xcode en

de iOS-SDK (één bestand) downloaden. Dat downloaden kan lang duren omdat het bestand enkele gigabytes groot is. Zorg ook voor voldoende ruimte op de harde schijf (ongeveer 10 gigabyte). V Installeer de SDK op de standaardlocatie en verplaats deze nooit. Het installatieproces spreekt voor zich. 1.3.4

Installeren van de Android-SDK

V Voordat de Android-SDK kan worden geïnstalleerd, moet de Java Development Kit 6

(JDK) op de computer staan. Android gebruikt de Java-ontwikkelomgeving. Dit is niet de Java-runtime die op de meeste computers is geïnstalleerd. V Kijk voordat je overgaat op het installeren van de JDK of deze al op jouw computer is geïnstalleerd. Dit doe je door naar de opdrachtsprompt/terminal te gaan en daar de commando’s java -version en javac –version uit te voeren. Het versienummer moet 1.6.0_21 of hoger zijn. Als dit het geval is, kun je doorgaan met de Android-installatie. V Het is niet nodig om Java te installeren op een Mac-computer. Java is standaard geïnstalleerd en wordt regelmatig geüpdatet. Oracle’s Java 6-JDK installeren Doorloop voor het installeren van de Java 6-JDK de volgende stappen: V Ga naar: www.oracle.com/technetwork/java/javase/downloads. V Zoek naar de Java SE 6 Update (30 of hoger) en klik op de downloadknop. Selecteer als platform Windows (let op: kies niet de versie voor 64-bit processoren maar de x86-versie), accepteer de licentieovereenkomst en klik op de juiste link. Vervolgens wordt het installatiebestand gedownload (ca. 80 MB). V Start het installatieprogramma. Verander de installatiemap in C:\Java\jdk1.6.0_21\ en ga verder. Het is niet nodig om de Java-runtimemap te veranderen. V Nadat de JDK is geïnstalleerd moet deze beschikbaar gesteld worden in de omgeving (environment). Daarvoor moeten de omgevingsvariabelen aangepast worden. Ga hiervoor naar Configuratiescherm -> Systeem -> Geavanceerde systeeminstellingen. Klik dan op Omgevingsvariabelen. (Zie voor het wijzigen van omgevingsvariabelen onder Linux, paragraaf 1.3.5.) V Voeg bij Systeemvariabelen aan de Path-variabele %JAVA_HOME%\bin; toe. Vergeet de puntkomma’s niet om deze waarde van andere te onderscheiden. V Maak ook binnen systeemvariabelen de nieuwe variabele JAVA_HOME aan en geef die de waarde C:\Java\jdk1.6.0_[versienummer]. Je kunt nu proberen of JDK voor de omgeving beschikbaar is door een opdrachtsprompt te openen en het commando javac –version uit te voeren. Als de omgeving in orde is, verschijnt na enige tijd het versienummer op het scherm. Android-SDK en Google Maps API’s installeren Doorloop de volgende stappen: V Ga naar developer.android.com/sdk om de Android-SDK te installeren.

4


V Kies voor het downloaden van het Windows-, Linux- of Mac OS X-pakket. Download

het zip-bestand en pak dit uit. Verplaats het pakket naar de root van jouw harde schijf of naar jouw thuismap en wijzig, indien nodig, de naam in android-sdk. V Navigeer naar deze map en dan naar de submap tools en voer android uit. Wacht even en de Android SDK Manager wordt zichtbaar. V Je ziet nu een lijst met pakketten die geïnstalleerd kunnen worden. In deze lijst staan alle Android-SDK-versies. Je mag meerdere pakketten selecteren, maar je hebt in ieder geval SDK Platform Android 2.2, API 8 nodig. Selecteer ook Android SDK Platform Tools en indien beschikbaar Android SDK Tools. Vink daarna ook Google APIs by Google Inc., Android API 8 aan. Installeer deze pakketten. Accepteer de voorwaarden. Na het downloaden en uitpakken kun je bij Installed Packages zien of dit gelukt is. V Na het installeren van de Android-SDK is het nodig om in Windows de omgevingsvariabelen te wijzigen. Voer de stappen uit die bij de installatie van Java zijn beschreven en voeg aan de systeemvariabele Path de volgende waarde toe: ;C:\android-sdk\ tools;C:\android-sdk\platform-tools;. V Op de Mac voeg je als volgt de Android-tools toe aan de variabele PATH. Open terminal en type cd ~. Vervolgens open je of maak je het bestand .profile aan met de teksteditor Pico: type pico .profile. Als er al een regel in dit bestand bestaat die begint met ‘export PATH =’ moet je daaraan het pad toevoegen van de Android-tools (/android-sdk/tools). Anders moet je dit zelf intypen op een nieuwe regel: de regel wordt dan export PATH=/ android-sdk/tools:/android-sdk/platform-tools:$PATH. Als je de Android-SDK in jouw thuismap hebt geïnstalleerd, laat je het pad voorafgaan door ~/. Sla het bestand op en sluit terminal af. Als je terminal nu opnieuw start, zijn de Android-tools beschikbaar. Je kunt kijken of de PATH-variabele in orde is door echo $PATH in te typen. V Open de opdrachtsprompt of terminal om te kijken of de installatie gelukt is. Geef de volgende commando’s: aapt v en daarna android list. 1.3.5 Installatie op Linux Het kan nodig zijn om ingelogd te zijn als root. Dit kun je doen door in terminal su - uit te voeren. Appcelerator ondersteunt alleen Ubuntu. Maar Titanium Studio werkt ook op onder andere Linux distro’s. Ik heb het met succes geïnstalleerd op Fedora en Arch OS. Voor installatie download je het zip-bestand vanaf de downloadpagina (zie paragraaf 1.3.2). Daarna pak je het uit in de gewenste map. Vervolgens start je Titanium Studio door TitaniumStudio uit te voeren in de hoofdmap van het uitgepakte bestand. Installeer de 32-bit versie van Sun Java (in Ubuntu: sudo aptitude install ia32-libs ia32-sun-java-6-bin) of download het vanaf de Oracle-website. Het is belangrijk om te controleren welke Virtuele Machine van Java gebruikt wordt. Daarvoor open je terminal en type je java -version in. Het is het beste om de Sun VM te gebruiken.

5


In Ubuntu kun je de standaard Java VM als volgt wijzigen: sudo update-alternatives --config java (selecteer 32-bit versie)

Om te zorgen dat ook de Java-compiler van de Oracle gebruikt wordt, gebruik je: sudo update-alternatives --config javac

Je voegt het pad naar Android toe aan het bestand .bash_profile of .bashrc in jouw thuismap. Gebruik de volgende syntaxis: PATH=$PATH:~/android-sdk/tools;~/android-sdk/platform-tools export PATH

1.3.6 Installeren van de Java Development Tools (JDT) in Titanium Studio De Java Development Tools plug-in is noodzakelijk om Java-code te kunnen schrijven in Titanium Studio. Je hebt dit nodig als je modules wilt schrijven voor Android. Ook kan de BlackBerry-SDK en -plug-in niet geïnstalleerd worden als de JDT niet beschikbaar is. Het is dus aan te raden om de JDT-plug-in meteen te installeren. Er is geen enkele reden om dit niet te doen. Doorloop voor installatie van de JDT de volgende stappen: V Ga naar Help -> Install New Software. V Selecteer de Eclipse Helios Update Site bij het Work with-veld. V Mocht deze bron zich niet in de lijst bevinden, voeg die dan toe via Find more software by working with the “Available Software Sites” preferences. V In de lijst met beschikbare pakketten, zie je de subgroep Programming Languages. In deze groep bevindt zich de optie Eclipse Java Development Tools. Selecteer deze en klik dan twee keer op de Next-knop. V Accepteer de overeenkomt en klik op de Finish-knop. V Herstart Titanium Studio als het pakket geïnstalleerd is. 1.3.7 Installeren Android Development Tools Plug-in (ADT) De Android Development Tools zijn handig bij Android-ontwikkeling. Je hoeft dan essentiële Android-tools niet via de terminal/opdrachtsprompt te starten. Om de Android Development Tools (ADT) in Titanium Studio te installeren, doorloop je de volgende stappen: V Help -> Install New Software. V Klik op de Add-knop rechtsboven. V Voer als titel ‘ADT Plug-in’ in bij Name en de volgende URL bij Location: https://dl-ssl .google.com/android/eclipse/ en klik op de OK-knop. V Vervolgens selecteer je ADT Plugin in het Work width-veld. V Klik op OK en wacht op de pakkettenlijst (mocht dit niet werken, dan kun je in de URL https vervangen door http). V Selecteer de Developer Tools en klik op Next en nogmaals Next. V Lees en accepteer de licentieovereenkomst en klik op Finish. V Herstart Titanium Studio na het beëindigen van de installatie. 6


Nu moet je de locatie naar de Android-SDK’s opgeven: V Blader naar de locatie van de Android-SDK’s. V Klik op Apply en OK. Je kunt de configuratie van de ADT Plug-in wijzigen via Window/Titanium Studio (Mac) -> Preferences -> Android. Je ziet dan een overzicht met tabbladen waarin je de instellingen kunt wijzigen. 1.3.8 Aanpassen config.ini van Titanium Studio In enkele gevallen moet je de configuratie van Titanium Studio wijzigen via het initialisatiebestand. Hier wordt beschreven waar je die kunt vinden. Windows V Ga naar de locatie van jouw Titanium Studio-installatie en open AptanaStudio3.ini of TitaniumStudio.ini. V Bewerk de opties en sla het bestand op. Mac OS X V Ga naar /Applications/Aptana Studio 3 of Titanium Studio. V Rechtsklik op AptanaStudio3.app of TitaniumStudio.app en kies Show package contents. V Navigeer naar Contents/MacOS. V Bewerk AptanaStudio3.ini (of TitaniumStudio.ini) en sla het bestand op.

Linux V Navigeer naar de locatie van de Titanium Studio-applicatie. V Open het ini-bestand.

1.3.9 Updaten van de laatste Titanium-SDK en Titanium Studio Titanium Studio controleert automatisch of de laatste Titanium-SDK geïnstalleerd is. Als er geen enkele SDK is geïnstalleerd, downloadt Titanium Studio de laatste versie automatisch. De beschikbaarheid van nieuwe versies wordt aangegeven met een notificatie rechtsonder. Als je hierop klikt, wordt de SDK geïnstalleerd. Je kunt ook checken of er updates zijn via Help -> Check for Titanium SDK Updates. Je kunt ook zelf een URL opgeven waarvan een SDK wordt gedownload via Help -> Install Titanium SDK from URL. Dan verschijnt er een wizard die je vraagt naar de URL. Vul dit veld in en klik op de Finish-knop om het te downloaden en te installeren. Wanneer een nieuwe versie van Titanium Studio beschikbaar is, wordt dit ook met een notificatie aangegeven. Nadat de update is geïnstalleerd, word je gevraagd of je Titanium Studio wilt herstarten. Doe dit altijd, want de updates worden vaak pas geactiveerd na een herstart. Automatische updates in- of uitschakelen: open het Preferences-scherm via Window/Titanium Studio (Mac) -> Preferences -> Install/Updates -> Automatic Updates. Helemaal bovenaan geef je aan of je automatisch wilt updaten.

7


Je kunt ook de allerlaatste wijzigingen (nightly updates) van Titanium Studio ontvangen. De URL hiervan is http://download.appcelerator.com/appcelerator/studio/standalone/update/ nightly/. Als je deze toevoegt via Help -> Install New Software -> Add… dan worden de laatste verbeteringen dagelijks geïnstalleerd. 1.3.10 Standaardlocaties van de Titanium-SDK’s Je kunt de locatie van de Titanium-SDK vinden in Titanium Studio via Window/Titanium Studio (Mac) -> Preferences -> Titanium Studio -> Titanium. Hier kun je ook zelf een aangepaste locatie opgeven. De standaardlocaties kun je vinden in tabel 1.1. De SDK’s bevinden zich in de submap mobilesdk. besturingssysteem

locatie

Windows XP

C:\Documents and Settings\[gebruikersnaam]\Application Data\Titanium of C:\Documents and Settings\All Users\Application Data\Titanium

Windows 7

C:\Users\[gebruikersnaam]\AppData\Roaming\Titanium of C:\ProgramData\ Titanium

OS X

/Library/Application Support/Titanium of ~/Library/Application Support/ Titanium

Linux

~/.titanium

Tabel 1.1 Standaardlocaties van de Titanium-SDK’s

1.3.11 De ontwikkelversie van Titanium verkrijgen: continuous builds Hoewel continuous builds vaak instabiel zijn, is het soms handig om te kijken of een bug al is opgelost of een functie geïmplementeerd in de laatste ontwikkelversie van Titanium. De ontwikkelaars van Titanium bouwen vrijwel elke werkdag de laatste versie en stellen die beschikbaar via build.appcelerator.net. Op dit adres kun je een ingepakte versie van de laatste build downloaden. Als je het bestand gedownload hebt, pak je het uit en kopieer je de submap met het versienummer naar de map voor Titanium-SDK’s op jouw systeem (zie de vorige paragraaf). Sluit Titanium Studio af als je deze open had staan en start het opnieuw op. Nu kun je in de editor van tiapp.xml de nieuwe ontwikkelversie opgeven voor een project. 1.3.12 Problemen oplossen met proxyservers De eerste keer dat Titanium Studio wordt opgestart, moet je verbonden zijn met internet. Dit is nodig omdat de gebruiker verbonden wordt met de Appcelerator-cloud. Bovendien wordt internet gebruikt voor het downloaden van de Titanium-SDK, voor updates en voor documentatie. Deze verbinding kan problematisch zijn als je je bevindt achter een proxyserver. Dit probleem kun je oplossen door op het scherm waar je jouw gebruikersnaam en wachtwoord invoert, te klikken op Proxy Setup… Vervolgens kun je de technische details invoeren: het proxyschema (HTTP, HTTPS of SOCKS), de servernaam of het IP-adres, het poortnummer

8


en eventuele gegevens voor authenticatie. Als je deze gegevens niet hebt, moet je contact opnemen met jouw netwerkbeheerder. Als je eenmaal bent ingelogd in Titanium Studio, kun je deze gegevens wijzigen via Titanium Studio -> General -> Network Connections. Hier kun je Proxy entries bewerken (Edit). Na het herstarten van Titanium Studio wordt internetverkeer herleid via de opgegeven proxy.

1.4

Titanium Studio: De basisconcepten

1.4.1 Inleiding De basale elementen van Titanium Studio zijn dezelfde als die van Eclipse. Titanium Studio is in wezen niets anders dan Eclipse uitgebreid met specifieke functies voor Titanium-ontwikkeling. In deze paragraaf gaan we in op de basisconcepten van Eclipse: de workspace, workbench, views, editors, menu’s en perspectieven. 1.4.2 Workspace De workspace is een plaats op de harde schijf waar instellingen en projecten, met alle daarbijbehorende bestanden, worden opgeslagen. Hoewel het mogelijk is om een project buiten een workspace te bewaren, is dit niet aan te raden. Met Eclipse kun je namelijk de workspace opruimen en andere bewerkingen hierop uitvoeren. Ook wordt de workspace automatisch geïndexeerd, waardoor je er goed in kunt zoeken. Ten slotte kun je makkelijk een back-up maken van de workspace, omdat het een bepaalde plaats op de schijf beslaat. Encodering van de workspace en bestanden Je kunt instellen welke encodering, zoals UTF-8, wordt gebruikt voor de tekstbestanden. De encodering kan betrekking hebben op de hele workspace of op individuele bestanden. Doorloop de volgende stappen om de encodering van de workspace te wijzigen: V Ga naar Window/Titanium Studio (Mac) -> Preferences -> General -> Workspace. V Navigeer naar het Text File Encoding-gebied . V Zorg ervoor dat de Other-radioknop geselecteerd is en kies een nieuwe codering uit de lijst. V Klik op de OK-knop. Van een bestand: V Selecteer een bestand in de Project/App Explorer View. V Rechtsklik op het bestand of kies File -> Properties. V Onder het Resource-tabblad vind je het Text File Encoding-gebied. V Zorg ervoor dat de Other-radioknop is geselecteerd en kies een nieuwe codering uit de

lijst. V Klik op de OK-knop.

9


1.4.3 Workbench Het hoofdscherm van Eclipse wordt de workbench genoemd. Het bevat een aantal veelgebruikte gebruiksinterface-elementen, zoals views en editors. Zie figuur 1.1 voor een overzicht van de workbench.

Figuur 1.1 De workbench van Titanium Studio

1.4.4 Views Een view is een scherm waarmee je een bepaalde taak kunt uitvoeren, zoals het schrijven van code of het inspecteren van variabelen tijdens het debuggen. Eclipse heeft veel soorten views. Hiervan is slechts een deel van belang voor Titanium-ontwikkelaars. Om een view te openen gebruik je Window -> Show View. Veelgebruikte views zijn al zichtbaar in het menu, andere views kun je openen via de optie Other… Naast het werkgebied hebben de meeste views een titelbalk, een pictogram, een menu en een werkbalk. De knoppen op de werkbalk hebben hulpteksten (tooltips), die verschijnen als je met de muiscursus boven de knop zweeft.

10


Je kunt meerdere views stapelen in één scherm. Elke view krijgt dan een eigen tabblad, waarvan de titel zichtbaar is in de titelbalk. Hieronder vind je een overzicht van views waarvan de betekenis niet onmiddellijk duidelijk is. Bookmarks View De Bookmarks View geeft een overzicht van alle bookmarks – zelfgemaakte verwijzingen naar codeplaatsen – in de geopende projecten. Voeg bookmarks toe op plaatsen in jouw code die je makkelijk wilt vinden. Dubbelklik op een bookmark in de Bookmarks View om naar de gewenste plaats in jouw code te springen. Titanium Studio opent het bestand als het nog niet geopend is. De Bookmarks View kun je openen via Window -> Show View -> Other -> General -> Book marks. Toevoegen van een bookmark V Klik op de coderegel waar je een bookmark wilt toevoegen. V Kies Edit -> Add bookmark of gebruik het contextmenu (rechtermuisknop) in de linkermarge. V Type de gewenste naam in van de bookmark. V Klik op de OK-knop. Console View De Console View toont de uitvoer naar de console van draaiende programma’s. Opties voor de Console View vind je via Window/Titanium Studio (Mac) -> Preferences -> Run/ Debug -> Console. Navigator View/Project Explorer De Navigator View toont alle projecten in de workspace. Gebruik deze view om alle mappen en bestanden van projecten te zien. De Project Explorer geeft een ander overzicht waarin bijvoorbeeld de build-folder van een Titanium-project niet zichtbaar is. Outline View De Outline View toont code-elementen zoals variabelen en functies in een hiërarchische ordening. Je kunt dubbelklikken op een element om ernaar te springen in de code. Openen met: Window -> Show View -> Outline. Problems View Deze view toont de problemen die opgespoord worden tijdens indexen validatieprocessen. Ook waarschuwingen (warnings) en foutmeldingen (errors) worden getoond. Je kunt gebruikmaken van eigen filters (custom filters) voor de Validation View om bepaalde foutmeldingen of waarschuwingen te verbergen. De Validation View zal de fout-

11


meldingen en waarschuwingen niet tonen die voldoen aan de reguliere expressies die je hebt opgegeven in de filters. De HTML-, CSS- en JavaScript-editors controleren of de code die je schrijft valide is. Ze maken daarbij gebruik van specificaties die gedefinieerd zijn in HTMLTidy, W3C Stylesheet Validator en JSLint. Code die niet gevalideerd kan worden met deze validators levert een foutmelding op in de Problems View. Je kunt de instellingen hiervoor wijzigingen via Window/Titanium Studio (Mac) -> Preferences -> Studio -> Validation. Kies vervolgens de taal waarin je geïnteresseerd bent en vink al dan niet de validator aan. Properties View De Properties View toont informatie over de plaats waar jouw cursor is in de editor of wat je hebt geselecteerd. Deze informatie bestaat grotendeels uit metadata voor de selectie. Open deze view via Windows -> Show View -> Other... Tasks View Openen met: Window -> Show View -> Tasks. Het gebruiken van taken is een eenvoudige wijze om bij te houden welke onderdelen van jouw code je nog moet implementeren of verbeteren. Om een overzicht te krijgen van alle taken gebruik je de Tasks View. Deze geeft je een lijst van de taken in projecten van jouw workspace. Je kunt een taak handmatig toevoegen via Edit -> Add Task. Maar het is makkelijker om in commentaren bijzondere woorden te gebruiken. Je kunt deze woorden wijzigen of nieuwe toevoegen via Window/Titanium Studio (Mac) -> Preferences -> Titanium/Aptana Studio -> Tasks. Met de standaardinstellingen worden taken automatisch aangemaakt als je een van de volgende woorden gebruikt in een commentaar: TODO, XXX of FIXME. De prioriteit van de eerste twee is normaal en van de laatste hoog. 1.4.5 Editors In een editor bewerk en bewaar je bestanden. Editors verschillen per gebruikte programmeertaal of bestandstype (bijvoorbeeld een XML- of tekstbestand). Het oplichten van syntaxiselementen en contextafhankelijke hulp zijn bijvoorbeeld afhankelijk van de gekozen programmeertaal. In tegenstelling tot views hebben editors geen werkbalken. Bovendien kun je meerdere editors open hebben staan. Deze editors kun je binnen de editorruimte op verschillende wijzen ordenen. Een sterretje in de titelbalk van de editor geeft aan dat er onbewaarde gegevens zijn. Je kunt deze gegevens bewaren met de sneltoets Ctrl/S (Windows/Linux) of Cmd-S (Apple) of met de menuoptie File -> Save.

12


1.4.6 Menu’s Titanium Studio heeft op veel plaatsen uitgebreide menu’s. Het hoofdmenu is natuurlijk het meest in het oog springend. Daarnaast kun je menu’s openen door te klikken op de rechtermuisknop. Zo hebben pictogrammen op de werkbalk van de view vaak een eigen menu: viewmenu’s. Deze menu’s verschijnen als je op de rechtermuisknop drukt terwijl je met de muiscursor boven het pictogram zweeft. Ook zijn er contextmenu’s voor elementen. Die verschijnen als je op de rechtermuisknop klikt terwijl je een element hebt geselecteerd of erboven zweeft met de muiscursor. Het is aan te raden om hiervan gebruik te maken als je een bewerking zoekt die betrekking heeft op een element. Je kunt ook een snelmenu krijgen als je met de muiscursor boven de marge van een editor zweeft. Hiermee kun je bijvoorbeeld regelnummering aan- of uitzetten. Het valt aan te bevelen om op verschillende elementen en plaatsen in Titanium Studio een context/snelmenu op te roepen met de rechtermuisknop. Op deze manier leer je de verschillende mogelijkheden van Titanium Studio goed kennen. 1.4.7 Perspectieven Een perspectief is een verzameling views die specifiek zijn geordend voor een bepaalde taak. Zo opent het debug-perspectief een aantal views dat belangrijk is voor het debuggen, zoals een variabelenview waarin je de toestand van een variabele kunt onderzoeken. Ook is de ordening van deze views geoptimaliseerd voor het debuggen. In een perspectief kun je de vensters herordenen en nieuwe views openen. De standaard ordening en views van het perspectief krijg je dan terug via Window -> Reset Perspective. Een eigen ordening kun je bewaren als een perspectief via Window -> Save Perspective As. Tussen perspectieven schakel je met Window -> Open Perspective, door te klikken op het Open Perspective-pictogram rechtsboven in de hoofdwerkbalk of je ziet ze in de meest linkse view. Dan krijg je de lijst met de belangrijkste perspectieven en de mogelijkheid om een perspectief, dat niet in de lijst is opgenomen, te selecteren via Other .... Standaardperspectieven Zie tabel 1.2 voor een overzicht van de standaardperspectieven. perspectief

beschrijving

Debug

Voor het debuggen van jouw applicatie.

Resource

Voor het ordenen van bestanden en projecten.

Web

Voor het bewerken van een webapplicatie en Titanium-projecten. Kies dit perspectief om jouw project te bewerken.

Tabel 1.2 Standaardperspectieven

13


Ordenen van views en editors Je kunt views en editors verplaatsen door het scherm naar een nieuwe plaats te slepen. Klik daarvoor op de titelbalk van de view/editor en houd de muisknop vast. Vervolgens kun je de view/editor verslepen met de muis. Views kunnen ook buiten het hoofdscherm van Titanium Studio gesleept worden: ze worden dan zelfstandig. Editors daarentegen moeten binnen het gebied voor editors blijven en kunnen niet vermengd worden met views. Binnen het editorgebied kun je de editors wel herordenen. Je kunt ze bijvoorbeeld niet als tabbladen in één tabgroep laten bestaan, maar ze naast elkaar te tonen. Dit is handig als je code wilt vergelijken. Het pictogram van de muiscursor geeft, door te wijzigen in een pijl met een bepaalde richting, aan waar de view of editor wordt geplaatst als je de knop loslaat. Oefen hiermee om te kijken wat er gebeurt en om het onder de knie te krijgen. Je kunt een view inklappen en vervolgens plaatsen onder een pictogram in de hoek van het scherm. Dit wordt een fast view genoemd. Elke view is te verkleinen tot een fast view. Het scherm kun je maximaliseren door twee keer te klikken op de titelbalk. Minimali seren doe je via het pictogram daarvoor.

1.5

Werken met projecten en bestanden

1.5.1 Projecten Een project is een folder die alle bronnen, zoals broncode en afbeeldingen, voor jouw applicatie bevat. Nieuw project Om een nieuw project aan te maken kies je File -> New en daarna het projecttype. Om een project aan te maken voor Titanium kies je Titanium Mobile Project. Ook kun je in de hoofdwerkbalk rechts een pictogram vinden om een nieuw project aan te maken. Na het aanmaken van het project, wordt het toegevoegd aan de Project Explorer-view. Deze view geeft een overzicht van alle projecten in de workspace. Importeren van een bestaand project Je kunt een bestaande set van bestanden importeren in Titanium Studio door een nieuw project aan te maken en daarna dit project te laten verwijzen naar de thuismap van het bestaande project. Door het volgen van de onderstaande procedure verwijs je jouw nieuwe project naar de folder van het bestaande project: V File -> New -> Titanium Mobile Project ... om het New Project-pop-upscherm te openen. V Project Name: type hier de naam in van het nieuwe project. V Vink de Use default location uit. V Location: blader naar de folder die jouw project bevat. V Druk op de Finish-knop. 14


Het is echter handiger om de Import Wizard te gebruiken via File -> Import. De procedure wijst zich vanzelf. Veranderen van het projecttype Projecttypen zorgen ervoor dat bestanden van het project op de juiste manier worden geïdentificeerd. Daardoor wordt bijvoorbeeld een js-bestand als een JavaScript-bestand gezien en de JavaScript-editor geopend als je een js-bestand opent. Sommige project typen zijn combinaties van andere projecttypen. In een Titanium-project worden bijvoorbeeld CSS-, HTML- en JavaScript-bestanden gebruikt. Doorloop de volgende stappen om het projecttype van een project te wijzigen: V Rechtsklik op het project in kwestie in de Project Explorer View. V Kies Properties -> Project Natures. V Selecteer de naturen (natures) die het meest geschikt zijn voor jouw project. V Klik op de OK-knop. 1.5.2 De instellingen voor een Titanium-project: tiapp.xml De instellingen van een Titanium-project worden bijgehouden in het bestand tiapp.xml. Dit bestand vind je in de hoofdmap van jouw project. Voor dit bestand is een speciale editor beschikbaar. Ook kun je de onderliggende XML-code bekijken om opties toe te voegen en te wijzigen die niet toegankelijk zijn via de tiapp-editor. Onder aan de editor zie je de tabbladen Overview en tiapp.xml. Overview representeert de tiapp-editor. Klik op tiapp.xml om de XML-code van het bestand te zien. Een van de belangrijke zaken die je kunt, en vaak zult wijzigen is de te gebruiken Titanium-SDK. Je kunt met een dropdown-menu kiezen tussen de verschillende geïnstalleerde SDK’s. Via de link configure... kun je kiezen welke Android-versie standaard wordt gebruikt. Je kunt dit ook opgeven bij de launch configuration van het project, waarover meer in de volgende paragraaf. Een uitvoerige beschrijving van tiapp.xml vind je in hoofdstuk 2.7. 1.5.3 Draaien van projecten in de emulator Je compileert en draait een project door op de Run-knop – de groene afspeelknop in de hoofdwerkbalk – te drukken. Naast deze knop vind je een pijltje naar beneden: als je hierop klikt krijg je een lijst met de verschillende emulatoren waarop je het project kunt draaien. Ook vind je onder aan de lijst de optie Run Configurations..., waarover hieronder meer. In de App/Project Explorer vind je ook een startknop: als je hierop drukt, krijg je meteen een lijst met doelen. Een andere manier om een project te starten is door in de App/ Project Explorer op een bestand de rechtermuisknop in te drukken. In het contextmenu zie je dan de optie Run As. Als de emulator nog niet geopend is, zal Titanium het, in het geval van Android, eerst opstarten. Dit kost enige tijd – hold tight. Daarna worden de benodigde bestanden voor

15


de emulator aangemaakt (eenmalig per telefoontype). Dit duurt even en daarom zal het installeren van de app in de emulator de eerste keer soms niet lukken (hoewel dit bij Titanium Studio zelden het geval is). Als het na enige tijd nog niet lukt, compileer de app dan opnieuw. Bij Android kun je de emulator beter open laten staan nadat je die hebt opgestart: je kunt dan veel sneller wijzigingen van jouw project uitproberen. Je kunt de instellingen wijzigen voor de wijze waarop een project wordt gedraaid wijzigen via Run -> Run Configurations… Vervolgens kies je de juiste configuratie uit de lijst: je vindt de projecten onder een bepaalde emulator. Klik op de configuratie om alle opties te tonen aan de rechterzijde van het scherm. Je kunt hier ook nieuwe configuraties aanmaken. Bij de iPhone kun je het toestel, de iOS-versie en het log-niveau wijzigen. In het geval van Android kun je de Android-SDK kiezen (kies minimaal versie 2.2 en als je Google Maps gebruikt de Google APIs-versie van de SDK), het schermtype van de emulator en het logniveau. Na het wijzigen van de Run Configuration kun je de app starten met de knop Run of de wijzigen toepassen (Apply) en het scherm afsluiten. Daarna kun je via Run -> Run of via een run-knop in een van de werkbalken de app opnieuw compileren en draaien. 1.5.4 Schoonmaken van een project Soms moet je ervoor zorgen dat je met een schone lei begint. Als onverhoopt jouw project onverklaarbare runtime-fouten oplevert of in het geheel niet meer wordt gecompileerd, moet je het project schoonmaken. Dit houdt in dat er geen bestanden meer aanwezig zijn in de build-folders van het project. Dit doe je met de optie Clean... in het Project-menu. Daarna kun je kiezen of je alle projecten wilt opruimen of alleen geselecteerde projecten. 1.5.5 Werken met bestanden Een nieuw projectbestand maken V Gebruik de Project/App Explorer en navigeer naar het gewenste project. V Rechtsklik op een map en selecteer New -> File of open het New File-scherm. V Specificeer eventueel in het New File-scherm de map waarin het bestand wordt aangemaakt. V Voer in het tekstveld File name de naam van het nieuwe bestand in en voeg de juiste extensie toe. V Druk op de knop Finish. Mocht je een bestaande template willen kiezen, klik dan op de Next-knop en selecteer een template naar keuze. Vergelijken van verschillende versies van een bestand Je kunt versies vergelijken door gebruik te maken van de functie Local History. Met deze functie kun je de geschiedenis van een bestand zien. Elke keer als een bestand bewaard wordt, wordt de vorige toestand bewaard voor een periode die je opgeeft bij de instellingen voor Local History. Zo kun je de ene versie met de andere vergelijken. Gebruik hiervoor de History view met de optie Compare Mode ingeschakeld.

16


Vergelijken doe je als volgt: V Gebruik de Project Explorer View en rechtsklik op het bestand dat je wilt vergelijken. V Kies in het contextmenu dat verschijnt Compare Width -> Local History om de History View te openen. V De History View toont op welke data en tijden het bestand is bewaard met veranderingen. V Om de veranderingen te zien tussen versies dubbelklik je op een revisie in de view. Vervolgens wordt er een editor geopend waarin de wijzigingen tussen de versies zijn opgelicht. V Rechtsboven vind je een aantal pictogrammen om tussen wijzigingen te bladeren of een wijziging te kopiëren. Instellingen voor de geschiedenis van bestanden kun je wijzigen via Window/Titanium Studio (Mac) -> Preferences -> General -> Workspace -> Local History. Het terughalen van een oudere versie van het bestand V Gebruik hiervoor de Project Explorer View en rechtsklik op het bestand waarvan je de

geschiedenis wilt zien. V Selecteer Replace Width -> Local History in het contextmenu om een scherm met de

geschiedenis van het bestand te openen (selecteer Replace Width -> Previous from Local History om alleen de vorige versie terug te rollen). V Selecteer de datum/tijd die overeenkomt met de versie waarmee je de huidige versie wilt vervangen. Je kunt de veranderingen previewen door te dubbelklikken op date/ time: Titanium Studio zal de veranderingen dan tonen in het onderste deel van het scherm. V Klik op de Replace-knop. Herstellen van een verwijderd bestand met Local History Daarvoor moet je aan jouw project hebben gewerkt met de Project Explorer View. Herstellen doe je als volgt: V Ga in Project Explorer View naar het project en de map waar het bestand oorspronkelijk

was, maak hier een leeg bestand aan met dezelfde naam als het verwijderde bestand. V Rechtsklik op het lege bestand en selecteer Replace Width -> Previous from Local History.

1.6

Content Assist

Content Assist geeft je onmiddellijk feedback over beschikbare eigenschappen en methodes van een module terwijl je de code schrijft. Gebruik Content Assist ook om statements af te maken. Als je de naam van een object intypt krijg je, wanneer je even pauzeert na het typen van een punt (.), een dropdownlijst met alle beschikbare methodes, objecten en eigenschappen van dat object. Je kunt ook Ctrl/Cmd-Space indrukken om Content Assist op elk gewenst moment op te roepen.

17


Wanneer het hulpscherm tevoorschijn komt, dubbelklik je op een eigenschap of methode die je wilt gebruiken voor dat object. Titanium Studio zal de term dan automatisch afmaken. Als je een methode van het object intypt, maakt Studio de sluitende haakjes aan en toont Content Assist een klein pop-upscherm met de parameters van de methode. Content Assist toont automatisch een contextmenu of notificatievak terwijl je de naam van een object of functie intypt waarop Content Assist van toepassing is. Druk op F2 om een grotere tooltip te tonen terwijl jouw cursor op een methode of object staat. Je kunt deze tip ook activeren via Edit -> Show Tooltip Description. Quick Fixes Als je een fout in de syntaxis maakt, kun je die soms met een druk op de knop verhelpen: dit worden quick fixes genoemd. Om een quick fix toe te passen, selecteer je Edit -> Quick Fix of druk je op Ctrl/Cmd+1. Als je dit doet krijg je een overzicht van de mogelijke verbeteringen: kies de juiste verbetering uit de lijst als die beschikbaar is. Toevoegen van eigen code aan Content Assist Je kunt Content Assist met eigen objecten en functies uitbreiden. Daarvoor moet je jouw code op de juiste wijze documenteren met ScriptDoc. In paragraaf 1.9 gaan we hier nader op in.

1.7 Navigeren 1.7.1 Algemeen Gebruik Ctrl-Tab en Ctrl-Shift-Tab om te navigeren tussen geopende bestanden in de editor. Andere wijzen van navigatie zijn de vooruit- en terugknop in de werkbalk en de menuopties Navigate -> Back en Forward. 1.7.2 Het gebruiken van Open Resource om naar een bronlocatie te navigeren Met Open Resource kun je springen naar de coderegel van een element waarnaar je verwijst, bijvoorbeeld een functie. Als je een functie in jouw code aanroept, kun je snel springen naar de plaats waar deze functie wordt gedeclareerd. Zo heb je makkelijk toegang tot de code van die functie, ook al is die niet gedocumenteerd. Als je een functie aanroept die oorspronkelijk was gedeclareerd in een ander bestand of zelfs in een ander project, kun je toch Open Resource gebruiken mits je een referentie naar het project dat de functie bevat hebt toegevoegd aan jouw project. Dit doe je in de properties van jouw project. Rechtsklik daarvoor op het project waaraan je de referenties wilt toevoegen in de Project Explorer View en kies dan Project References. Selecteer de projecten waaraan je wilt refereren.

18


Om te springen naar de bronlocatie in jouw code doe je het volgende: V Plaats de cursor op het element waarvan je de bron wilt inspecteren. V Druk op F3 om naar de bron te springen of gebruik hiervoor Open Resource uit het Navigate-menu of Ctrl/Cmd-T. 1.7.3 Zoeken In Titanium Studie zijn er twee belangrijke zoekfuncties: Find (Ctrl/Cmd-F of Edit -> Find/ Replace) en Search (Ctrl-H of Search -> Search). Find zoekt alleen in het geopende bestand, Search in meerdere bestanden of zelfs meerdere projecten. Met Find kun je naar eenvoudige strings zoeken of volledige reguliere expressies. Ook kun je teksten vervangen. Je gaat naar de volgende plaats door op Ctrl/Cmd-K te drukken. Een variant op Find is Incremental find: met deze zoekfunctie spring je meteen naar de ingetypte tekst. Hiervoor druk je op Ctrl/Cmd-J (Edit -> Incremental Find Next) en begin je met het intypen van de tekst waarnaar je zoekt. De editor springt automatisch naar de volgende plaats waar de tekst gevonden wordt. Met Search kun je ook een eenvoudige string of reguliere expressie gebruiken. In tegenstelling tot Find kun je in meerdere bestanden, een geselecteerd project of zelfs in de hele workspace zoeken. Ook kun je een eigen verzameling van bestanden aanmaken: de working set. Om alle verwijzingen naar een tekst te vinden, selecteer je de tekst en druk je op Ctrl/Cmd+Shift+G (of Search -> Declarations -> Workspace). Om alleen die plaatsen te vinden waar de tekst is gewijzigd, kies je Search -> Text -> Workspace. Alle resultaten worden gepresenteerd in de Search View. Met het dubbelklikken op een plaats wordt een editor geopend met het bestand waar de plaats in voorkomt. De regel in kwestie is opgelicht.

1.8 Debuggen 1.8.1 Inleiding Titanium Studio heeft een ingebouwde debugger, zowel voor Android als iOS-ontwikkeling. Het debuggen is volledig operationeel, hetgeen inhoudt dat je breakpoints kunt instellen op coderegels en dat je de toestand van variabelen kunt inzien of een expressie kunt uitvoeren. Het tijdens het debuggen wijzigen van code die nog niet uitgevoerd is, is helaas onmogelijk. Het draaien van een programma met de debugger is eenvoudig. Je klikt op een bestand van jouw project in de Project/App Explorer en selecteert dan de menuoptie Debug As. Daarna kies je de te gebruiken emulator. Als je een app al eerder hebt gedebugd kun je F11 indrukken. Bovendien is er een debug-pictogram aanwezig in de werkbalk van de Project/ App Explorer en heb je de menuoptie Run -> Debug.

19


1.8.2 Loggen naar de console Als alternatief voor de debugger kun je berichten of waarden van variabelen naar de console loggen. Deze loggegevens zijn dan zichtbaar in de Console View. Titanium heeft verschillende methodes om te loggen in de module Titanium.API, zoals de methode Tita nium.API.info(boodschap). Let erop dat je de log-statements verwijdert in de distributieversie: gebruikers zouden zo aan belangrijke informatie kunnen komen die je niet op straat wilt hebben! Veranderen van het logniveau Het logniveau is van belang voor het debuggen. Er zijn vijf logniveaus: trace, debug, info, warn en error. Trace is het meest gedetailleerd en error toont alleen foutmeldingen. Elke app kan zijn eigen logniveau hebben. Pas deze als volgt aan: V Klik op de Run-knop en dan op Run Configurations... V Klik op het gewenste project in de lijst van iOS- en Android-projecten. V Selecteer het gewenste logniveau in de dropdown-lijst bij Log level. V Klik op de Apply-knop.

Loggen van het beschikbare geheugen naar de console Je kunt het beschikbare geheugen loggen met de eigenschap Titanium.Platform.available Memory. Met behulp van een timer (interval) kun je om een bepaalde tijd de beschikbare hoeveelheid geheugen loggen naar de console. Zie hiervoor de volgende code: setInterval(function() { Titanium.API.info(Titanium.Platform.availableMemory); }, 1000);

1.8.3 Het Debug-perspectief Het Debug-perspectief bevat verschillende views die je niet vindt in het standaard webperspectief dat je gebruikt om je project te bewerken. In tabel 1.3 vind je een overzicht van deze views. view

beschrijving

Debug View

Toont de debugdoelen en de draaiende processen.

Variables View

Toont de variabelen die gedeclareerd zijn in de executiecontext van de positie waar de uitvoering wordt opgeschort.

BreakPoints View

Geeft een lijst van de breakpoints voor de bestanden die je aan het debuggen bent.

Expressions View

Toont de waarde van de beschikbare expressies. Je kunt hier ook expressies verwijderen of toevoegen.

AJAX Monitor View

Toont de huidige AJAX-verzoeken binnen de browser tijdens de debug-sessie.

Tabel 1.3 Debug-views

20


Daarnaast zijn in het Debug-perspectief de Editor, Outline View en Console View beschikbaar. De Console View is belangrijk voor logberichten. Je kunt natuurlijk ook zelf views toevoegen aan het Debug-perspectief. De Debug View toont alle draaiende processen en de debugdoelen voor het Debug-perspectief. Hiermee kun je alle executiethreads beheren van programma’s die je aan het debuggen bent. Gebruik de Debug View om draaiende code op te schorten, te hervatten of te beëindigen en te stappen in coderegels.

Figuur 1.2 Het Debug-perspectief van Titanium Studio

1.8.4 Expressies De Expressions View geeft een opsomming van de huidige waarde van de expressies die je hebt toegevoegd. Daarmee kun je jouw code nauwkeuriger bekijken en testen. Je kunt in een expressie ook de gebruikersinterface van een app manipuleren. Rechtsklik in de Expressions View en selecteer Add Watch Expression uit het contextmenu om een pop-upscherm te openen. Type hier de expressie die je wilt evalueren. Zorg

21


ervoor dat het vak Enabled is aangevinkt. Klik ten slotte op OK om de expressie toe te voegen aan de view. De expressie wordt meteen geëvalueerd. Je kunt de waarde van een expressie in jouw programmacode zien door de expressie te selecteren in de editor en dan te klikken op Ctrl/Cmd+Shift+D of met rechtsklikken het contextmenu te openen en dan Display te selecteren uit het menu. Je krijgt de waarde van de expressie te zien in een pop-upscherm. 1.8.5 Breakpoints en de uitvoering van code Een breakpoint pas je toe op een coderegel. Daar stopt dan de uitvoering van de code als je de applicatie debugt. Als de uitvoering opgeschort is, kun je de waarde van variabelen of expressies inzien en wijzigen. Je kunt ook breakpoints toevoegen als de code wordt uitgevoerd. De Breakpoints View geeft een lijst met alle breakpoints. Je kunt deze vervolgens in- of uitschakelen of er een voorwaarde (expressie) aan toevoegen. Voeg een breakpoint toe door in de Editor of Outline View naar de plaats in jouw code te gaan waar je een breakpoint wilt toepassen en klik dan in de linkermarge van de Editor, dubbelklik of gebruik de rechtermuisknop en selecteer Toggle Breakpoint uit het contextmenu. Dan verschijnt er een indicator voor het breakpoint in de marge, een open bolletje. Als de code is opgeschort, klik je op de Resume-knop om de uitvoering van de code te hervatten. De uitvoering wordt opnieuw opgeschort als er code wordt bereikt waarop je een breakpoint hebt toegepast. Je kunt ook een exception breakpoint toevoegen door het gewenste bestand in de Editor te openen. Selecteer daarvoor Run -> Add JavaScript Exception Breakpoint. Vervolgens verschijnt er een pop-upscherm waarin je de gewenste exceptie typt. Ten slotte draai je de debugger. In of over een functie stappen en terugkeren uit een functie In Titanium Studio kun je vanaf een breakpoint van regel naar regel stappen om te kijken wat er gebeurt. Daarvoor heb je twee commando’s: step into (F5) en step over (F6). Om in een functie te stappen (step into) of eroverheen te stappen (step over) gebruik je de debugger. Het verschil tussen beide wordt gauw duidelijk als je ermee werkt. Als de coderegel een functie betreft, kun je met step into in de functie stappen en dan elke regel uit de functie afzonderlijk laten uitvoeren. Wil je van de aanroep van de functie meteen overgaan op de volgende regel, dan gebruik je step over. Ben je eenmaal in een functie, dan kun je er direct uitstappen met het step return-commando (F7). De debugger gaat dan onmiddellijk naar de regel die volgt op de functieaanroep. 1.8.6 Variabelen De Variables View toont alle variabelen, met hun waarden, die bij de huidige executiecontext horen. Als het gaat om verwijzingsvariabelen (objecten), kun je deze uitklappen om

22

Index A accelerometer zie gyrometer activityindicator 255 advertenties 194 afbeeldingen 254 9-patch 132 aanpassen grootte 91 achtergrond 255 alfakanaal 91 imageviews 255 knippen 91 thumbnails 91 afstandsberekening 279 AJAX zie netwerk alert 89, 255 alertdialogs 255 Android achtergrond services 89 actions 148 activities 138, 139, 141, 142, 269 activities levenscyclus 140, 141 Activity Manager 140 afsluiten app 165 Android AVD Manager 124 Android Debug Bridge 127, 137 Android Market 178 Android SDK Manager 5, 124 API-niveaus 121, 123 API-updates 123 applicatiearchitectuur 138 applicatiebronnen 166 applicatiecontext 139 applicatiepictogram 175 applicatie-resources 166 AVD’s 123, 125 bestandssysteem 129, 307 bibliotheken 123 bytecode 138 categories 148, 150 certificaten 179 content providers 138, 143

content-URI’s 143 contextmenu’s 168 Dalvik 81, 124, 138 data-URI’s 148 DDMS 130, 307 debuggen 125, 130, 133 diskimage 126 distributie 179 dpi 174 draaien op toestel 128 Draw 9-Patch 132 emulator 15, 125, 130, 173 emulator-instellingen 126 emulator-toetscombinaties 127 emuleren SD-kaart 125 Exerciser Monkey 133 Fastdev 134 File Explorer 130 gebruikersinterface 168 Google Maps sleutels 179 installatie 4 installeren Android Development Tools Plug-in 6 installeren door testers 137 installeren op SD-kaart 167 installeren op toestel 136 intentfilters 147 intentresultaten 149 intents 143, 146, 148 Java 121, 124, 138 JavaScript-engines 81 klassenaam 148 knoppen 175 labels 176 lettertypen 177 Linux 121, 123 locatiebepaling 263, 269 logcat 130 manifest 123, 163, 178 manifestbestand 76 menu’s 168

369

Leerboek Oracle PL/SQL

mksdcard 126 Native Development Kit 121 notificaties 156, 157, 159 opstartprobleem 78 optiemenu’s 168 pending-intents 150 permissies 165 publiceren Android Market 178 putExtra 149 registreren Android Market 178 remoteviews 159 resultaten activities 142 runtime 124 schermdichtheden 54, 164, 173, 174 schermoriëntaties 242 schermtypen 172 SD-kaart 305 SDK’s 124 services 139, 152 shell 127, 128 shell-commando’s 129 simuleren GPS 130 simuleren netwerk 130 simuleren SMS-berichten 127, 130 simuleren telefoonoproepen 127, 130 sleutels 179 SQLite 129 starten activities 142 statusbalknotificaties 156 systeemarchitectuur 123 systeempictogrammen 175 systeem-resources 166 tiapp.xml 164, 181 toast-notificaties 156 tonen PDF-bestanden 152 tools 124 updaten Android Market 182 uploaden APK 181 versies 121 video afspelen 292 voorgrondactivity 140 voorvertonen afbeelding 282 windows 239 Android Market 178 animatie 232

370

app afsluiten 165 applicatiebronnen 166 applicatiepictogram 43, 175 architectuur 41 compileren 16 configureren 74 databases 313 debuggen 19 distributie 179 draaien in de emulator 15 draaien op toestel 128 eindpakket 179 geheugenbeheer 83 installeren door testers 137 installeren op toestel 136 instellingen voor het draaien 15 loggen naar de console 20 SD-kaart 167 splash-scherm 42 updates 313 versiebeheer 178 app.js 47 applicatieontwerp 43, 53 commands 65 CommonJS-specificatie 47 controller 41, 55, 65 domeinlogica 59 eigen MVC-structuur 55 façade 58, 67 mediator 61 model 41, 55, 58 modules 41, 46 MVC-model 41, 55 notificaties 69 ontwerppatronen 45 projectstructuur 72 proxies 58 publieke interface (API) 59 PureMVC 57 singleton 61 view 41, 55, 61 applicatiepictogram 175 applicatie-properties 75, 77, 310 ARM-processor 125 audio afspelen zie media augmented reality 264

Register

B BackBone.js 73 Base64 335 bestanden 305 afkortingen 306 Android 307 applicatiedata 306 applicatiedata map 308 bestandssysteem 305 eigenschappen 310 filestreams 331 iCloud 313 lees- en schrijfmodi 308 mappen 306 methodes 309 protocollen 306 resourcesmap 306, 308 sandbox 305, 307 SD-kaart 305, 306, 308 thuismap 308 tijdelijk 308 tijdelijke map 306, 308 best practices 117 BirdHouse 362 BlackBerry 211 databases 216 distributie 213 draaien op het toestel 213 draaien project 212 Eclipse plug-ins 211 filepickers 220, 221 gebruikersinterface 216 installeren 211 installeren Titanium SDK 212 kaarten 216 lettertypen 217 menu’s 216, 224 OS-versies 213 simulatoren 214 simulatorfuncties 215 simulatortoetsen 215 sleutels 211 Titanium API’s 217 toestellen 213 transitiestijlen 223 Blob-object 91

buffers 325 codering 328 buttons 256 C callback-functies 96 camera zie media clipboard 255 codering 335 crossplatform ontwikkelen 52 D databases BlackBerry 216 blobs 314 databasebestand 315 datatypen 315, 317 encryptie 324 execute 314 indexen 318, 319 installeren 312 openen 313 optimaliseren 323 PRAGMA-statements 322 queries 319 resultaten 315 rijen 319 SD-kaart 313 SQL 317 SQL-commando’s 317 SQL-expressies 321 SQL-functies 320 SQLite 305, 312 tabellen 318 transacties 316 documenteren 118 elementen 24 ordening van elementen 23 ScriptDoc 23 E Eclipse 1 e-mail 302 dialoogscherm 302 events 88, 114, 234 eventlisteners 115, 116 eventobject 115 371


eventpropagatie 117 simuleren 116 executiecontext 47, 86 uitwisselen van gegevens 87 Extanium 73 F Facebook 358 Graph API 360 Ferretti’s MVC 73 G gebruikersinterface 229 componenten 254 gegevens 305 best practices 119 codering 325 geheugen 83 garbage collection 84 lekken 86, 130 loggen 20 null-toekenningen 85 referenties 84 scopes 85 geheugenlekken 190 geluid opnemen zie media geocoder 267, 270 Git 26 App Explorer 32 branching 29, 32, 33 clonen repository 28, 32 commit 26, 31 Git-folder 27 GitHub 43 gitignore-bestand 27, 31 HEAD-pointer 30 initialiseren project 28 installeren 27 merge 28, 30 push/pull 33 remote repositories 28 repository 26 snapshots 26 staged 27 staging area 27 tags 30

372

Titanium Studio 32 unstagen bestand 29 werkmap 27 Google Maps zie kaarten places 278 GPS 263 lengte- en breedtecoördinaten 264 gradiënten 232 GSM 263 gyrometer 265 kallibratie 270 H HTML 257 HTTP zie netwerk HTTPClient zie netwerk I imageviews 255 include-methode 47 invoer van gegevens 255 iOS 183 adviews 194 app ID’s 187 applicatie-instellingen 191 App Store 207 audiosessies 283 backgroundservices 192 badges 195 bestandssysteem 189, 307 Bundle Identifier 187 Bundle Seed 187 certificaten 184, 185, 186, 208 Cocoa Touch 183 coverflowviews 196 dashboards 196 Developer Program 184 distribueren naar testers 188 documentviewers 202 draaien in de simulator 184 draaien op de achtergrond 192 draaien op het toestel 184, 188 frameworks 183 GameKit 183 gebruikersinterface 194 geheugenlekken 190

Register

iAd 194 iCloud 313 Icon Composer 191 Info.plist 191 Instruments 189 Interface Builder 190 iTunes Artwork 207 iTunes Connect 209 lettertypen 201, 365 locatiebepaling 263, 268 logberichten 191 lokale notificaties 193 maskedimages 197 modale windows 202 muziekbibliotheek zie media navigatiegroep 198 netwerk 340 ontwikkelen voor 52 pictogrammen 191, 201, 207 popovers 203 profielen 186, 187, 208 Program Portal 184 Property List Editor 191 proximity 194 publiceren in de App Store 207 schermoriëntaties 242 schermresoluties 184 simulator 184, 189 Sleutelhangertoegang 185, 186 sleutels 185 splashschermen 243 splitwindow 205 statusbalk 199 systeemknoppen 201 tabbedbar 199 toestellen toekennen 186 toolbars 200, 238 tools 188 transities 201 UDID 186 universal apps 206 updates 209 versies 183 video’s bewerken 298 Xcode 188

iPad 183, 202 documentviewers 202 lettertypen 365 popovers 203 splitwindow 205 iPhone retina-scherm 54 J Java installatie 4 JavaScript 81 alert 89 anonieme functies 96 Array 82 best practices 117 bibliotheken 112, 113 branching 53 bytecode 82 callback-functies 96 closures 97 codeconventies 117 constructor 98, 99 constructor stealing 102 datatypen 93 Date 82 ECMA-262 81, 82 ECMA Harmony 81 eigenschappen 94 engines 81 frameworks 104 functies 83, 96 garbage collection 84 getters/setters 83 global scope 47 interpreters 81 in Titanium 81 JavaScriptCore 81 klassen 94 lazy loading 109 methodes 94 minifier 2 module pattern 108 namespaces 95 null 93 Object 83, 95

373


objecten 83, 94 objectgeoriënteerd 92 object literal notation 94 overerving 102 primitieve datatypen 93 private eigenschappen 99 private methoden 99 prototype 98 prototype chaining 102 reference types 93 Rhino 81 scopes 49, 85, 86, 87, 96, 97 singleton 108 SquirelFish Extreme 81 statische eigenschappen 101 statische methoden 101 String 83, 90 strings 83, 93 this-object 102 timers 89 undefined 93 V8 81 value types 93 JSON 90, 311, 338, 340, 357 K kaarten 271 annotaties 272, 274 routes 272, 277 typen 273 KitchenSink 43 klassen 94 constructor 45, 98, 99 Ext Core 105 instantie-eigenschappen 99 instantie-methoden 99 MooTools 106 overerving 102 private leden 99 prototype 98 prototype-eigenschappen 99 PrototypeJS 104 prototype-methoden 99 klembord 255 kleuren 240 kompas 264, 269

374

L labels 255 lay-out 239 modi 240 lettertypen 365 Linux 137 locatiebepaling 265 afstandsberekening 279 Android 269 beschikbaar 268 geocoder 264, 267, 270 iOS 268 lengte- en breedtecoördinaten 273 nauwkeurigheid 267 provider 266, 267 logniveau 16, 20 lokalisatie 332 afbeeldingen 333 appnaam 334 functies 334 i18n-map 332 strings 332 M MD5 335 media 281 achtergrondgeluid 285 afspelen 284 afspelen video 292 API’s 281 audio opnemen 296 audiosessies 283, 290 audiostreams 289 blieb 282 camera 299 camera switchen 282 filmrol 301 flits 283 flitsmodes 283 galerie 301 geluid afspelen 284 microfoonniveau 297 muziekbibliotheek 286, 287 muziekspeler 287 nummers 289 opnemen 283

Register

streams 289 systeembibliotheek 286 typen 282, 283 video opnemen 298 video’s bewerken 298 videostreams 292 volume 283 media opnemen 296 MIME-types 366 modules 41, 43, 46 CommonJS-specificatie 47 exports-object 49 gebruiken 51 gecompileerde 51 installeren 51 JavaScript 46, 49 module.exports-object 50 native 49, 51 staat 50 multithreading 88 webworkers 89 muziek afspelen zie media muziekbibliotheek zie media muziek opnemen zie media MVC-model 55 BackBone.js 73 controller 55, 56, 65 eigen structuur 55 Extanium 73 Ferretti’s MVC 73 model 55, 57, 58 projectstructuur 55 PureMVC 57 TiMVC 74 view 55, 56, 61 N namespace 43, 95 navigatiebalk 245 navigatiecomponenten 256 netwerk 337 AJAX 337 authenticatie 343 beschikbaarheid 344 bestanden up- en downloaden 348 BirdHouse 362

coderen URL’s 343 cookies 258, 345, 350 headers 339, 342, 345, 346 HTTP 306, 337, 338, 339, 341 HTTPClient 339 HTTP-methodes 342 HTTPS 343 HTTP-streaming 289 OAuth 359, 362 poort 339 query-strings 342 readystate 342 Remote Procedure Calls 338 respons 339 REST 338 sockets 350 statuscodes 341 streams 351 verzoek 339 webservices 338, 358 XML-RPC 338 O OAuth 359, 362 objectgeoriënteerd 92 encapsulatie 99 overerving 102 omgevingsvariabelen 38 wijzigen 5 online documentatie 46 ontwerppatronen 107 adapter 112 commands 65 composite 111 decorator 113 façade 58, 67, 112 factory 45, 109 lazy-loading 109 mediator 61 observer 69, 114 proxy 58, 92, 114 singleton 61, 108 optiondialogs 256

375


P pickers 256 platformmappen 54 platforms runtime 82 progressbars 255 project draaien 15 platformmappen 43 projectmap 41 schoonmaken 16 PureMVC 57 applicationfaçade 68 application-singleton 70 bootstrappen applicatie 71 commands 65 controller 65 façade 67 installatie 72 macrocommand 65 mediators 61 model 58 notificaties 69 projectstructuur 72 proxies 58 simplecommand 65 view 61 view-componenten 70 R Remote Procedure Calls zie netwerk require-functie 47, 48 Resources-map 42 REST zie netwerk S sandbox zie bestanden schermafbeelding 282 schermdichtheid 54 schermoriëntaties 241, 243 schermtypen 172 scopes 85, 87, 96, 97 global 86 global 47 scrollableviews 257 scrollviews 256

376

SHA 335 sliders 256 SMS 302 sockets zie netwerk SQL zie databases SQLite 129 streams 305, 307, 324, 351 blobstreams 330 buffers 325 bufferstreams 328 codering 325 filestreams 331 methoden 328 switches 256 T tabgroepen 244 iOS 244 navigatieknoppen 245 tabbladen 244, 245 windows 245 tableviews 247 best practices 118 classname 248 data-eigenschap 247, 248 eenvoudig en flexibel 247 eigenschappen 250 events 248, 252 methoden 249 rijen 253 secties 248, 254 stijlen (iOS) 249 tabelindex 248 zoekbalk 249 talen zie lokalisatie telefoneren 302 textareas 256 textfields 256 tiapp.xml 15, 42, 74, 147, 153, 164, 181 Android applicatie-eigenschappen 77 Android-elementen 76 editor 15 iOS-elementen 75 timers 89 TiMVC 74

Register

Titanium 1 9-patch-afbeeldingen 132 activities 141, 142, 145 alert 89 API-documentatie 46 best practices 117 Blob-object 91 commandline 38 compilatieproces 2 continuous builds 8 desktopversie 1 eventlisteners 115, 116 eventobject 115 eventpropagatie 117 events 88, 114 executiecontext 86 inladen bestanden 47 installatie 2 intentfilters 147 intents 143, 146, 148 locatie SDK’s 8 modules 43 multithreading 88 pending-intents 150 platformgegevens 53 platformspecifieke bronnen 54 projectinstellingen 15 projectstructuur 41, 55 Proxy 92 script 38 selecteren Android-versie 15 simuleren events 116 ti-afkorting 43 updaten SDK’s 7 voorbeeldproject 43 webworkers 89 zwaar window 86 zware windows 141 Titanium Studio aanmaken projectbestand 16 Aptana 1 bewerken 33 Bookmarks View 11 breakpoints 22 Breakpoints View 22 codevalidatie 12

commentaar toevoegen 37 configuratie wijzigen 7 Console View 11 contentassistentie 17 contextmenu’s 13 DDMS-perspectief 130 debuggen 19 debuggen project 36 debug-perspectief 20 draaien project 36 editors 12 encodering bestanden 9 Expressions View 21 fast views 14 Git-instellingen 33 herstellen bestand 17 installeren Java Development Tools 6 installeren op toestel 136 menu’s 13 Navigator View 11 navigeren 18, 36 nieuw project aanmaken 14 open resource 18 ordenen views en editors 14 Outline View 11 perspectieven 13 problemen met proxyservers 8 Problems View 11 Project Explorer 11 project importeren 14 projecttype wijzigen 15 Properties View 12 quick fixes 18 regelnummering 13 schoonmaken project 16 ScriptDoc 23 snelmenu’s 13 sneltoetsen 33 Tasks View 12 terughalen bestand 17 toevoegen taken 12 uitloggen 3 Variables View 22 vergelijken bestandsversies 16 versiebeheer 32 viewmenu’s 13

377


views 10, 37 werken met bestanden 35 werken met projecten 14 werken met schermen 35 workbench 10 workspace 9 zoeken 19 zoeken en vervangen 37 Twitter 362 U URI’s 306, 341 codering 90, 343 V vibreren 282 video afspelen zie media video opnemen zie media views 229, 230 animeren 232, 235 best practices 119 eigenschappen 232 events 234 gespecialiseerd 230 kinderen 233 lay-out 239 lay-out modi 240 methoden 230 stapelen 234, 241 subviews 233 transities 235 verwijderen 231

378

W webservices zie netwerk webviews 257 best practices 119 cookies 258 gegevensuitwisseling 258 widgets 229 wifi 263 windows 230, 235 Android 239 eigenschappen 237 events 239 methoden 236 modaal 202, 236, 238 navigatieknoppen 239, 245 rootwindow 236 schermoriëntaties 238, 243 splitwindow 205 stapelen 244 tabgroepen 245 transities 201 volledig scherm 238 zwaar 86, 87, 238 X XML 332, 338, 340, 356 XML-RPC zie netwerk Z zoekbalk 249

Mark Aalderink

Mark Aalderink

Handboek

Handboek

ONTWIKKELEN Apps voor iPhone en Android zijn niet meer weg te denken. Handboek apps ontwikkelen geeft je alle benodigde achtergrondinformatie om complexe apps te bouwen voor iPhone, iPad en Android met het crossplatform-framework Titanium (van Appcelerator). Ook is het een naslagwerk met oplossingen voor veelvoorkomende problemen.

Mark Aalderink is auteur van de Basiscursus apps ontwikkelen. Hij is eigenaar van WorldWise Learning en heeft verschillende apps ontwikkeld voor iPhone, iPad en Android.

978 90 12 58263 6 988

Handboek apps ontwikkelen compleet.indd 1

Ten slotte bevat het boek uitvoerige beschrijvingen van de Titanium-API’s. Handboek apps ontwikkelen is een vervolg op Basiscursus apps ontwikkelen.

Ë|xHSTALCy582636z

ONTWIKKELEN

De volgende onderwerpen worden behandeld: - achtergrondgegevens over iOS, Android en BlackBerry OS - Titanium Studio: de ontwikkelomgeving - het succesvol opzetten van een Titanium-project - het documenteren, debuggen en testen van apps - de gebruikersinterface, locatiegegevens, push-berichten en media - het laten werken van apps op de achtergrond - werken met bestanden, netwerken en databases

Handboek

ONTWIKKELEN 3/28/2012 10:57:59 AM

Ë xhstalcy582636z ONTWIKKELEN. Handboek ONTWIKKELEN ONTWIKKELEN. Handboek. Handboek. Mark Aalderink. Mark Aalderink

Recommend Documents