XOJO. ios-schnellstart Release 3 Xojo, Inc.

Transkript

1 XOJO ios-schnellstart 2014 Release 3 Xojo, Inc.

2 Inhaltsverzeichnis Einführung 2 Über diese Schnellstartanleitung 3 Verwendete Konventionen 5 Erste Schritte 7 Der Arbeitsbereich (Workspace) 8 SimpleBrowser 10 App-Grundlagen 11 Gestaltung des Benutzerinterface 13 Eigenschaften (Properties) 15 Programmcode ergänzen 23 Programmtest 25 Index 26

3 Kapitel 1 Einführung Willkommen bei Xojo, dem einfachsten Weg zur Erstellung plattformübergreifender Desktop-,Web- und ios- Anwendungen.

4 Kapitel Über diese Schnellstartanleitung XOJO STARTEN 1. Laden Sie die Installationsdatei für Ihr Betriebssystem hier herunter: 2. Führen Sie das Installationsprogramm aus. 3. Starten Sie Xojo. 4. Wählen Sie in der Projektauswahl ios und klicken Sie auf OK. Über diese ios-schnellstartanleitung Willkommen bei Xojo, dem einfachsten Werkzeug zur Erstellung von plattformübergreifenden Desktop-, Web- und ios-anwendungen! Xojo besteht aus einer reichhaltigen Sammlung graphischer Steuerelemente für das Benutzerinterface, einer modernen, objektorientierten Programmiersprache, einem integrierten Debugger und einem plattformübergreifenden Compiler. Zusammen ergeben Sie die Integrierte Entwicklungsumgebung kurz IDE Xojo. In dieser IDE kreieren Sie das Benutzerinterface Ihrer App durch einfaches Drag & Drop von Steuerelementen auf die Views Ihres App-Layouts. Diese Schnellstartanleitung wird Ihnen zeigen, wie einfach das ist. Xojo stellt Ihnen alle Werkzeuge zur Verfügung, die Sie zur Programmierung annähernd jeder denkbaren App benötigen. Diese Anleitung wendet sich insbesondere an Programmieranfänger und Xojo-Einsteiger. Sie werden anhand des Beispiels einer funktionsfähigen ios- App (eines einfachen Webbrowsers) mit den Grundlagen der Xojo-IDE vertraut gemacht. Dies wird etwa Minuten benötigen. Copyright Aller Inhalte: Xojo, Inc., Alle Rechte vorbehalten. Kein Teil dieser Dokumentation oder der damit verbundenen Dateien darf ohne vorheriges schriftliches Einverständnis des Herausgebers reproduziert, kopiert oder versandt werden, was elektronische, photomechanische oder andere Aufzeichnungs- oder Übermittlungsverfahren einschließt.

5 Über diese Schnellstartanleitung 4 Eingetragene Marken und Lizenzen Xojo ist eine eingetragene Warenmarke von Xojo, Inc. Dieses Buch benennt Produktbezeichnungen und Dienstleistungen, die als registrierte und unregistrierte Warenmarken oder Service Marks Ihrer Rechteinhaber bekannt sind. In diesen Buch finden sie ausschließlich zu Lehrzwecken Erwähnung. Begriffe, die vermutlich als Warenzeichen oder Service Mark eingetragen sind, werden in Großschreibung wiedergegeben, obwohl Xojo, Inc. über ihren Markenzustand keine verbindliche Zusage treffen kann. Die Verwendung dieser Begriffe stellt keine Verletzung der zugehörigen Marken- oder Urheberrechte dar. Xojo, Inc. steht in keiner Verbindung zu den in diesem Buch erwähnten Produkten oder ihren Herstellern. Anmerkung des Übersetzers Zurzeit liegt Xojo nicht lokalisiert vor, das heißt die Programmumgebung erscheint in englischer Sprache. Deshalb werden in diesem Tutorial die englisch erscheinenden Begriffe auch englisch wiedergegeben, bei ihrer Ersterwähnung aber aus Verständnisgründen deutsch übersetzt. Sie können über das Index dieses Tutorials die Definitionen einiger Begriffe anzeigen lassen.

6 Kapitel Verwendete Konventionen Bedeutung von Abkürzungen, Zeichen und Schriftarten Dieses Tutorial verwendet Screenshots der Xojo-OS X-Version. Aufbau des Benutzerinterfaces und Funktionalität sind auf allen Plattformen identisch. Abweichungen in der Darstellung ergeben sich aus den unterschiedlichen graphischen Benutzerinterfaces der Betriebssysteme. Fettschrift wird sowohl zur Markierung der Einführung eines neuen Begriffs verwendet als auch zur Hervorhebung wichtiger Konzepte. Buchtitel und GUI-Beschriftungen wie Xojo-Benutzerhandbuch und OK sind kursiv geschrieben. Angaben zur Verwendung eines Eintrags aus den Programm- Menüs werden in der Form Wählen Sie Datei à Neues Projekt gegeben. Dieses Beispiel ist die Kurzform von Wählen Sie Neues Projekt aus dem Datei-Menü. Tastaturkürzel bestehen aus einer Reihe von Tasten, die in der angegebenen Reihenfolge gedrückt und gehalten werden sollten. Unter Windows und Linux wird die STRG- Taste als Steuerungstaste verwendet, unter OS X dient dazu die (Befehl)-Taste. Das Kürzel STRG+O oder -O bedeutet also, die STRG-Taste auf Windows- oder Linux- Rechnern oder die -Taste auf OS X gedrückt zu halten und dann zusätzlich die O -Taste zu drücken. Heben Sie den Finger von der STRG- bzw. Befehl-Taste erst, wenn Sie die O -Taste nicht mehr drücken. In Anführungszeichen stehen Begriffe, die Sie eingeben sollten, wie StartKnopf. Mitunter wird von Ihnen erwartet, Programmbefehle in den Code-Editor einzugeben. Diese werden in grauen Kästen angezeigt: ShowURL(GewählteURL.Text) Bitte beachten Sie bei der Codeeingabe folgendes: Geben Sie jede vorgegebene Zeile als einzelne Zeile in den Code-Editor ein. Versuchen Sie nicht, mehrere Programmzeilen zu einem Satz zusammenzufassen oder eine lange Zeile mittels Zeilenschaltungen (Return) zu unterteilen. Fügen Sie keine weiteren Leerzeichen ein, wenn in den Programmierzeilen im Tutorial keine stehen.

7 Verwendete Konventionen 6 Sie können die Codezeilen natürlich auch über die Zwischenablage aus dem Tutorial in den Code-Editor kopieren. Wenn Sie Ihre Anwendung kompilieren, überprüft Xojo zunächst Ihren Code auf Tipp- und Syntaxfehler. Sollte dabei ein Fehler erkannt werden, erscheint eine Fehlerliste zur Überprüfung am Fuß des Xojo-Hauptfenst

8 Kapitel Erste Schritte Programmstart Falls Sie das noch nicht getan haben, sollten Sie jetzt Xojo starten. 1. Doppelklicken Sie das Xojo-Programmsymbol, um Xojo zu starten. Nach Abschluss des Ladevorgangs erscheint das Projektauswahl-Fenster. 3. Sie sehen nun drei Texteingabefelder: Anwendungsname (Application Name), Firmenname (Company Name) und Anwendungs-ID (Application Identifier). Application Name ist der Name Ihrer Anwendung. Der hier eingegebene Begriff bestimmt den Dateinamen Ihrer Anwendung. Company Name ist der Name Ihres Unternehmens. Sie können dieses Feld auch leer lassen. Application Identifier stellt eine eindeutige Kennung Ihrer Anwendung dar. Aus den Eingaben der Felder Application Name und Company Name wird eine Vorgabe für dieses Feld erzeugt. Sie können sie aber beliebig verändern. Geben Sie SimpleBrowser als Application Name ein und verändern Sie die Vorgabe für den Company Name ganz nach Lust und Laune oder lassen Sie sie so wie vorgegeben. Abb. 1.1.: Das Projektauswahlfenster (Projekt Chooser) 2. Xojo erlaubt die Erzeugung verschiedener verschiedener Anwendungsarten (Desktop, Web, Kommandozeile und ios). In diesem Tutorial erstellen wir eine ios-applikation. Klicken Sie also auf ios. 4. Klicken Sie auf OK, um das Hauptfenster von Xojo zu öffnen den Arbeitsbereich / Workspace, in dem Sie Ihre Anwendung erstellen.

9 Kapitel Der Arbeitsbereich (Workspace) Xojo öffnet den Arbeitsbereich (Workspace) mit dem Standardview ihrer App im Navigator und im Layout-Editor. Abb. 1.2.: Der Xojo-Workspace Navigator: Das Panel am linken Bildschirmrand listet alle Bestandteile Ihres Projekts auf. Standardmäßig sehen Sie hier View1 (das ausgewählt ist), das App-Objekt und die iphoneund ipad-bildschirme. Mittels des Navigators bewegen Sie sich innerhalb Ihres Projekts. Layout-Editor: Das mittlere Gebiet des Workspace ist der Layout-Editor. Mit diesem erstellen Sie das Benutzerinterface für die Views Ihrer Anwendung. Der Layout-Editor liefert eine Vorschau auf das Erscheinungsbild Ihres Views während der Programmausführung. In der Abbildung ist das View leer, weil noch keine Steuerelemente aus der Bibliothek (Library) hinzugefügt wurden. Bibliothek (Library): Das Gebiet am rechten Rand des Hauptfensters stellt die Library dar, in der Sie die Steuer- und Interface-Elemente finden, die Sie zu einem View oder zum Projekt hinzufügen können. Sie gestalten Ihr Fenster, indem Sie die Elemente aus der Library auf das View hinüberziehen oder indem Sie auf ein Element in der Library doppelklicken. Sie können das Erscheinungsbild der Elemente in der Library verändern, indem Sie auf das kleine Zahnradsymbol klicken und eine andere Einstellung auswählen. Aufgemerkt: Sollte die Library nicht sichtbar sein, klicken Sie auf das Library-Symbol in der Werkzeugleiste. Inspector: In der Abbildung nicht sichtbar ist der Inspector, in dem Sie die Eigenschaften des ausgewählten Steuerelements sehen und verändern können. Der Inspector teilt sich das rechte Panel des Hauptfensters mit der Library.

10 Der Arbeitsbereich (Workspace) 9 Sie können sich den Inspector anzeigen lassen, indem Sie auf das Inspector-Symbol in der Werkzeugleiste klicken. Der Inspector liefert Informationen über das im Navigator oder Editor ausgewählte Element. Das Aussehen des Inspectors wird dem gerade gewählten Element angepasst. Sie verändern eine Eigenschaft des angezeigten Elements, indem Sie einen Wert in das Texteingabefeld rechts der Feldbezeichnung eingeben.

11 Kapitel 2 SimpleBrowser Hier lernen Sie, eine einfache ios-app zu entwickeln.

12 Kapitel App-Grundlagen Am schnellsten lernt man oft am praktischen Beispiel, so auch in Xojo. Wir werden deshalb zum Einstieg einen einfachen Webbrowser programmieren. Eine Xojo-App besteht im Entwurfsstadium aus einer Reihe von Objekten, die auf Klassen beruhen. Sie können sich eine Klasse als ein Vervielfältigungsschema für ein Programmobjekt vorstellen, als Bauplan oder Blaupause also. Annähernd alles in Xojo beruht auf einer Klasse, einschließlich der Views und Steuerelemente. So wie ein Bauplan nicht das eigentliche Haus darstellt, muss zum Verwenden einer Klasse ein Objekt dieser Klasse gebaut werden in korrekter Terminologie: Es wird eine Instanz dieser Klasse erzeugt sie wird instantiiert. Im SimpleBrowser-Projekt verwenden Sie das standardmäßig schon instantiierte View-Objekt View1 der Klasse ios- View als Hintergrund, auf dem Sie einige Steuerelemente (engl. Controls, beruhend auf Benutzerinterface-Klassen) positionieren. Die Positionierung einer Steuerelementklasse auf einem View erzeugt dementsprechend eine Instanz dieser Klasse. Ein View selbst ist dabei auch ein Steuerelement, das einen rechteckigen Bildschirmbereich und ein Behältnis für die dort anzuzeigenden weiteren Steuerelemente darstellt. Die App verwendet über das View hinaus drei Steuerelemente: TextField (Textfeld): Ein TextField-Steuerelement wird verwendet, um Texteingaben des Benutzers entgegenzunehmen. In diesem Projekt wird die anzuzeigende URL in ein TextField am Kopf des Views eingegeben. Button (Knopf): Mit einem Button wird eine Aktion ausgelöst. Tippt der Benutzer auf den Button neben dem Text- Field, wird die Webseite der eingegebenen URL geladen und dargestellt. HTMLViewer: In einem HTMLViewer kann, wie der Name vermuten lässt, HTML dargestellt werden. In diesem Projekt also die gewünschte Website. In den nun folgenden Unterkapiteln werden Sie lernen, wie Sie das Benutzerinterface in Xojo erstellen und den nötigen Programmcode hinzufügen, um eine funktionsfähige App zu erzeugen.

13 App-Grundlagen 12 Abb. 2.1.: Das fertige Projekt im ios Simulator

14 Kapitel Gestaltung des Benutzerinterface Gestaltung des Views Sie sollten nun Xojo vor sich haben mit dem geöffneten View1 im Layout-Editor. Falls nicht, schauen Sie sich bitte noch einmal Kapitel 1.3 und Kapitel 1.4 an. Jetzt können Sie Steuerelemente zum View hinzufügen. 1. Das TextField: Klicken Sie in der Library auf das TextField-Icon und ziehen Sie es mit gedrückter Maustaste in den Layout-Editor in die obere linke Ecke von View1. Sie werden bemerken, dass Hilfslinien erscheinen, um Ihnen die Ausrichtung des Steuerelements zu erleichtern. Lassen Sie die Maustate los, wenn Ihnen die Position zusagt. 2: Button 1: TextField 2. Der Button: Klicken Sie nun in der Library auf das Button-Symbol und ziehen Sie den Knopf in die rechte obere Ecke des Views auf Höhe des gerade angelegten Textfields. 3: HTMLViewer 3. Der HTMLViewer: Wählen Sie aus der Library das HTMLViewer-Symbol und ziehen Sie es in den freien Bereich des Views unter die beiden anderen Steuerelemente. Klicken Sie auf die Seiten oder Ecken des Viewers und vergrößern Sie ihn mithilfe der Hilfslinien, sodass er den ganzen Bereich des Views nach unten ausfüllt. Abb. 2.2.: Steuerelemente der ios-library

15 Gestaltung des Benutzerinterface Zuletzt sollten Sie das TextField noch etwas größer ziehen. Klicken Sie dazu auf seinen rechten Anfasser und ziehen Sie diesen weiter nach rechts, bis die Hilfslinien Ihnen signalisieren, dass es nah genug am Button positioniert ist. Ihre App sollte nun in etwa so aussehen: Abb. 2.3.: View-Layout mit Steuerelementen

16 Kapitel Eigenschaften (Properties) Was ist eine Eigenschaft? Eine Eigenschaft (Property) stellt ganz wortwörtlich eine Eigenschaft einer Klasseninstanz dar wie etwa Hintergrundfarbe, Position, Textinhalt Durch Verändern des Werts einer Property können Aussehen oder Verhalten der Instanz beeinflusst werden. In diesem Projekt müssen wir einige Eigenschaften der soeben instantiierten Objekte verändern, z.b. Der Inspector Mithilfe des Inspectors können Sie die Eigenschaften von Steuerelementen verändern. Er teilt sich den rechten Bildschirmbereich mit der Library. Klicken Sie auf den Inspector- Button in der Werkzeugleiste rechts oder drücken Sie auf der Tastatur -I (STRG + I auf Windows und Linux). alle Steuerelemente (einschließlich des View-Objekts) umbenennen, damit Sie im Programmcode eindeutiger ansprechbar sind, dem Button einen Text geben und Auto-Layout-Properties einstellen, damit sich die Steuerelemente an verschiedene ios-bildschirmgrößen und -lagen automatisch anpassen.

17 Eigenschaften (Properties) 16 Eigenschaften des Views Falls noch nicht getan: Rufen Sie wie auf der Vorseite erwähnt den Inspector auf und wählen Sie View1 im Navigator aus. Sie sollten nun die Eigenschaften Name, NavigationBarVisible und Title ändern: 1. Ändern Sie im Feld Name (ganz oben in der Gruppe ID) den Namen des Views von View1 in BrowserView. Drücken Sie Return, um die Veränderung im Navigator angezeigt zu bekommen. Abb. 2.4.: Inspectorwerte für View1 2. Stellen Sie den Schalter NavigationBarVisible auf ON. Damit wird die Navigationsleiste des Views angezeigt. Allerdings werden damit auch das TextField und der Button überdeckt. Dies korrigieren wir in einem Folgeschritt. 3. Schreiben Sie in das Feld Title SimpleBrowser. Drücken Sie Return, um die Veränderung im Navigator angezeigt zu bekommen.

18 Eigenschaften (Properties) 17 Eigenschaften des TextFields Im TextField1 gibt der Benutzer die anzuzeigende URL ein. Sie sollten hier die Eigenschaften Name, KeyboardType, Text und Auto-Layout ändern: 1. Wählen Sie im Navigator das Objekt TextField1 durch Klick darauf aus. 1. Ändern Sie im Feld Name den Namen des Felds von Text- Field1 in AdressField. Drücken Sie Return, um die Veränderung im Navigator angezeigt zu bekommen. 2. Wählen Sie im Feld KeyboardType den Wert URL aus dem auf Klick erscheinenden Popup-Menü. Damit wird bei einem Tap des Benutzers in das Feld die ios-tastatur für URL-Eingaben eingeblendet. 3. Ändern Sie den Eintrag im Feld Text von Untitled in Wenn Sie das TextField nicht mithilfe der Hilfslinien exakt positioniert haben, müssen Sie evtl. Einstellungen des Auto- Layouts verändern, damit sich das Feld an das Gerätedisplay anpasst. Sie sehen in der Rubrik Auto-Layout eine Auflistung der für das Objekt gültigen Layoutregeln. Es sollte insbesondere beim Drehen des Geräts ein einheitlicher Abstand nach oben eingehalten werden. Um diesen zu kontrollieren: Abb. 2.5.: Inspectorwerte für TextField1

19 Eigenschaften (Properties) 18 Klicken Sie auf die Regel Top, um sie auszuwählen, und dann auf den Edit -Button. Stellen Sie die Werte so wie hier angezeigt ein. Damit wird ein Standardabstand zum oberen Layoutrand eingehalten. Klicken Sie auf Done. Abb. 2.6.: Auto-Layout-Werte für den Wert Top des TextFields

20 Eigenschaften (Properties) 19 Eigenschaften des Buttons Auf Betätigung des Buttons soll die eingegebene URL angezeigt werden. Für den Button sollten die Eigenschaften Name, Caption und Auto-Layout geändert werden: 1. Wählen Sie im Navigator das Objekt Button1 durch Klick darauf aus. Der Inspector stellt jetzt die Eigenschaften des Buttons dar. 1. Ändern Sie im Feld Name den Namen des Buttons von Button1 in AnzeigenButton. Drücken Sie Return, um die Veränderung im Navigator angezeigt zu bekommen. 2. Ändern Sie die Beschriftung des Buttons, indem Sie den Text im Feld Caption von Untitled in Anzeigen ändern. 3. Wenn Sie den Button nicht mithilfe der Hilfslinien exakt positioniert haben, müssen Sie evtl. Einstellungen des Auto- Layouts verändern, damit sich das Feld an das Gerätedisplay anpasst. Sie sehen in der Rubrik Auto-Layout eine Auflistung der für das Objekt gültigen Layoutregeln. Der Button sollte stets in der rechten oberen Bildschirmecke angezeigt werden. Um dies zu kontrollieren: Abb. 2.7.: Inspectorwerte für Button1

21 Eigenschaften (Properties) 20 Klicken Sie auf die Regel Top, um sie auszuwählen, und dann auf den Edit -Button. Stellen Sie die Werte so wie hier angezeigt ein. Damit wird ein der obere Rand des Buttons auf der gleichen Höhe wie das TextField gehalten. Klicken Sie auf Done. Abb. 2.8.: Auto-Layout-Werte für den Wert Top des Buttons Klicken Sie auf die Regel Right, um sie auszuwählen, und dann auf den Edit -Button. Stellen Sie die Werte so wie hier angezeigt ein. Damit wird ein der Rechte Rand des Buttons im Standardabstand zum rechten Rand des Views gehalten. Klicken Sie auf Done. Abb. 2.9.: Auto-Layout-Werte für den Wert Right des Buttons

22 Eigenschaften (Properties) 21 Eigenschaften des HTMLViewers Zu guter Letzt sollten auch noch die Eigenschaften Name und Auto-Layout des HTMLViewers, in dem ja die Website angezeigt werden soll, geändert werden: 1. Wählen Sie im Navigator oder im Layout-Editor den HTMLViewer1 durch Klick darauf aus. Der Inspector stellt jetzt die Eigenschaften des Viewers dar. 1. Ändern Sie im Feld Name den Namen des Viewers von HTMLViewer1 in WebViewer. Drücken Sie Return, um die Veränderung im Navigator angezeigt zu bekommen. 2. Wenn Sie den Viwer nicht mithilfe der Hilfslinien exakt positioniert haben, müssen Sie evtl. Einstellungen des Auto- Layouts verändern, damit sich das Objekt an das Gerätedisplay anpasst. Sie sehen in der Rubrik Auto-Layout eine Auflistung der für das Objekt gültigen Layoutregeln. Der Viewer sollte in einem gleichbleibenden Abstand zu den obigen Steuerelemente positioniert werden und und die restliche Displayfläche ausfüllen. Sie haben ja bereits kennengelernt, wie Sie dies kontrollieren. Eventuell müssen Sie diesmal aber noch Layoutregeln hinzufügen oder löschen. Ersteres können Sie durch Klick auf das Dreieck unter den Layoutregeln im Inspector, und letzteres durch Klick auf das Minus -Feld daneben. Am Ende sollten Ihre Einstellungen wie auf der Folgeseite aussehen. Abb : Inspectorwerte für HTMLViewer1

23 Eigenschaften (Properties) 22 Abb : Auto-Layout-Werte für den Wert Top des HTMLViewers Abb : Auto-Layout-Werte für den Wert Bottom des HTMLViewers Abb : Auto-Layout-Werte für den Wert Left des HTMLViewers Abb : Auto-Layout-Werte für den Wert Right des HTMLViewers

24 Kapitel Programmcode ergänzen Ihre App ist nun schon fast fertig. Jetzt muss nur noch der Programmcode hinzugefügt werden, mit dem dem Objekt WebViewer gesagt wird, welche Website dargestellt werden soll. Sie benötigen dazu wirklich nur eine einzige Zeile Code! Was muss das Programm können? 1. Herausfinden, wann der Benutzer den AnzeigenButton antippt, 2. Die URL entgegennehmen, die in das AdressField eingegeben wurde und 3. diese dann im WebViewer anzeigen. Eventhandler können Sie als vorgefertigte Programm-- Methoden ansehen, die so mit Programmcode füllen können und die bei einem entsprechenden Event aufgerufen werden. Im Add Event Handler-Fenster wird ihnen die Liste der für das jeweilige Steuerelement verfügbaren Events aufgelistet. Anmerkung des Übersetzers: Sollte sich das Fenster leer öffnen, wählen Sie stattdessen bei ausgewähltem AnzeigenButton den Menüeintrag Insert/Event Handler aus der Menüzeile, klicken Sie mit rechter Maustaste auf den AnzeigenButton und wählen Sie Add to AnzeigenButton/ Event Handler oder, sollte dies nicht fruchten, speichern Sie das Projekt, schließen Sie es und laden Sie es neu. Gehen Sie dazu wie folgt vor: 1. Doppelklicken Sie im Layout-Editor auf den Anzeigen- Button. Das Add Event Handler-Fenster (Eventhandler hinzufügen) erscheint. Events Ereignisse werden bei bestimmten Geschehnissen in einer App erzeugt, wie etwa beim Antippen eines Buttons. Abb : Add Action Event-Fenster für den AnzeigenButton

25 Programmcode ergänzen Wie Sie der Beschreibung rechts neben der Liste entnehmen können, wird der Action-Event bei Tap auf einen Button aufgerufen. Wählen Sie ihn daher an und klicken Sie auf OK. Sie sehen, dass in der Navigatorliste unterhalb des Anzeigen- Buttons-Objekts nun ein Symbol für den Action-Event angezeigt wird. Darüberhinaus hat sich die Ansicht Xojos jetzt verändert, und statt des Layout-Editors wird im Arbeitsbereich nun der Code-Editor angezeigt. Hier werden Sie gleich den Programmcode ergänzen. Jetzt kann die App also bestimmen, wann der Button aktiviert wird. Nun muss das Programm die Benutzereingabe aus dem AdressField einlesen. 3. Der Wert, der in ein TextField eingegeben wird, wird in dessen Property Text abgelegt. Dieser Wert selbst ist vom Typ Text. Sie können diesen Wert wie folgt ansprechen: AdressField.Text Falls Sie schon über Programmiererfahrung in Xojo oder Sprachen ähnlicher Syntax verfügen, wundern Sie sich vielleicht, warum vom Typ Text und nicht vom altbekannten Typ String die Rede ist. Technisch gesehen ist ein String nur eine Reihe von Bytes, die eventuell einen Text darstellen. Während dies in früheren Zeiten keine Hürde darstellte, ist dies im Zeitalter mehrsprachiger Betriebssysteme und unterschiedlichster Zeichencodierungen ein nicht unbeträchtliches Problem. Sollte Ihnen schon einmal ein übersetztes Programm untergekommen sein, bei dem statt der Umlaute Rauten oder andere, aber in keinem Fall sinnvolle Zeichen erschienen, haben Sie damit ein gutes Beispiel vor Augen. Der Datentyp Text ersetzt also String dahingehend, dass er einen Text mit einer definierten Zeichencodierung verwendet und diese Probleme vermeiden hilft. 5. Verbinden wir also die Punkte 3. und 4. und man erhält: WebViewer.LoadURL (AdressField.Text) 4. Ein HTMLViewer besitzt die Methode LoadURL, um eine Website anzuzeigen. LoadURL erwartet dabei einen Eingabewert des Typs Text. Geben sie diese Zeile in den CodeEditor des ActionEventhandlers ein. 6. Kein 6. mehr! Ihre App ist fertig!

26 Kapitel Programmtest Speichern Sie sollten sich angewöhnen, Ihr Projekt regelmäßig, auf jeden Fall aber vor einem probeweisen Ausführen zu sichern. In der Regel geht Xojo sehr gutmütig mit Programmierfehlern um und fängt Abstürze des Programms ab, aber sicher ist sicher: 1. Speichern Sie das Projekt durch Anwahl des Menüzeileneintrags File à Save. 2. Geben Sie dem Projekt den Namen SimpleBrowser und klicken Sie auf Speichern. UND WEITER? Diese Schnellstartanleitung hat Ihnen einen ersten Einblick in die ios-app-entwicklung mit Xojo vermittelt. Wir empfehlen Ihnen, als nächstes das Tutorial zu bearbeiten und das Benutzerhandbuch sowie die Sprachreferenz zu konsultieren. Im Xojo-Programmordner finden Sie darüberhinaus viele Beispielprojekte, und unsere wöchentlichen Webinare vermitteln Wissen live. Programmausführung Jetzt können Sie Ihre fertige App testen: 1. Um eine ios-app im Debug-Modus auf dem Mac auszuführen, benötigen Sie den ios Simulator, der Teil von Apples Entwicklungspaket XCode ist. Sie können XCode kostenlos aus dem Mac App Store herunterladen. 2. Nachdem Sie XCode installiert haben, müssen Sie es einmalig starten, um die Lizenzbedingungen zu akzeptieren. Danach können Sie es sofort wieder beenden, es wird nicht für die ios-entwicklung mit Xojo benötigt. 3. Klicken Sie in Xojo auf den Run-Button in der Mitte der Werkzeugleiste. Das Programm wird kompiliert, der ios Simulator wird gestartet und Ihr Programm darin ausgeführt. Sollten Sie bei der Codeeingabe Fehler gemacht haben, wird Ihnen stattdesen der Xojo-Debugger einen Hinweis auf diese(n) anzeigen. 4. Geben Sie in der App eine URL ein (oder belassen Sie es bei der voreingestellten) und klicken Sie auf den Anzeigen- Button: Voilà! 5. Beenden Sie den Simulator, um zurück zu Xojo zu gelangen.

27 Anhang 26 Index A Action-Event 23 Add Event Handler 22 Arbeitsbereich 7 B Bibliothek 7 Button 12 C Control 10 E Eigenschaft 14 Event 22 H HTMLViewer 12 I Inspector 7, 14 Instanz 10 ios Simulator 24 K Klasse 10 L Layout-Editor 7 Library 7, 12 M Methode 22 N Navigator 7 P Property 14 S Steuerelement 10 String 23 T Text 23 TextField 12 V View 10 W Workspace 7 X XCode 24