2013 Release 4 Xojo, Inc.
Contents
1. beschriftete GoButton Steuerelement aus Es erscheint das Fens ter Add Event Hand ler Beim Klick auf ei nen Button wird des sen Action Event an Handler ausgef hrt oe Deshalb m ssen Sie Ihren Programmcode in den Action Event Handler einfugen Wahlen Sie also Action aus der Event Handler Liste und klicken Sie auf OK Figure 2 9 Add Event Handler Fenster Add Event Handler to PushButtoni The button has been clicked A right or middle click does not trigger the Action event Achten Sie darauf dass der Action Event im Navigator un terhalb des GoButton Steuerelements eingeblendet und der Code Editor angezeigt wird Dieser Schritt lost das erste Problem herauszufinden wann der Anwender auf den GoButton klickt Als n chstes m ssen Sie sich um die eingegebene URL k mmern 19 Der Text den der Anwender in ein Text Field eingibt wird in der Text Eigenschaft des Text Field abgelegt So k nnen Sie auf die Text Eigenschaft zugreifen AddressField Text Im letzten Schritt soll im WebViewer Steuerelement die Web Seite angezeigt werden Dazu wird die LoadURL Me thode der Klasse aufgerufen und die vom Anwender einge gebene URL an diese bergeben Der Quelltext sieht nun folgenderma en aus WebViewer LoadURL AddressField Text Geben Sie diesen Code in den Code Editor ein Klicken Sie dazu zun chst in den leeren Bereich unterhalb des Acti on Event Namens und tippen Sie diesen Code2. Chapter 1 Einleitung Willkommen bei Xojo dem einfachsten Werkzeug zum Entwickeln von Cross Plattform Desktop und Web Anwendungen Section 1 Uber den Desktop QuickStart XOJO STARTEN 1 Laden Sie das Installationsprogramm fur Ihr Betriebssystem unter http www xojo com download 2 F hren Sie das Installationsprogramm aus 3 Starten Sie Xojo 4 W hlen Sie in der Projektauswahl Desktop aus und klicken Sie auf OK Uber den Desktop QuickStart Willkommen bei Xojo dem einfachsten Werkzeug zum Entwickeln von Cross Plattform Anwendungen f r den Desktop und das Web Xojo bietet eine gro e Sammlung von grafischen Elementen fur Benutzeroberflachen eine moderne objektorientierte Programmiersprache einen integrierten Debugger und einen Cross Plattform Compiler Alles zusammen bildet die integrierte Entwicklungs umgebung von Xojo kurz IDE Mit der IDE erzeugen Sie die Benutzeroberflache Ihrer Anwendung durch ein faches Drag amp Drop von Interface Elementen auf die Fenster und Dialoge der Anwendung Dieser QuickStart wird Ihnen zeigen wie einfach das ist Xojo Stellt alle Werkzeuge bereit mit denen Sie nahezu jedes denkbare Programm entwickeln konnen Dieser QuickStart ist f r Anwender gedacht die Xojo noch nicht kennen und auch noch nie programmiert haben Er vermittelt Ihnen einen behutsamen Ein stieg in die Xojo Entwicklungsumgebung und fuhrt Sie durch die Entwicklung einer funktionsfahigen Desktop Anw
3. betrifft den HTML Viewer Hier m ssen fol gende Eigenschaften modifiziert werden Name und Locking 1 W hlen Sie im Fenster das HTMLViewer1 Steuerelement aus Der Inspector zeigt nun die Eigenschaften des HTML Viewers 2 ndern Sie den Inhalt des Feldes Name von HTMLVie wer1 in WebViewer Dr cken Sie Return damit die nde rung im Navigator sichtbar wird 3 Im letzten Schritt m ssen wir das Locking bearbeiten Figure 2 8 Locking f r damit der HTML Viewer WebViewer auch dann das Fenster aus f llt wenn die Fenstergr e ge ndert wird Sorgen Sie also daf r dass im Locking Bereich des Inspectors die Schl sser f r oben unten links und rechts geschlos sen sind 18 Section 8 Programmcode schreiben Code Editor Ihre Applikation ist fast fertig Es fehlt nur noch der Programm code der dem HTML Viewer mitteilt welche Web Seite ange zeigt werden soll Xojo verwendet eine objektorientierte Pro grammiersprache die leicht zu erlernen ist Sie m ssen nur eine einzige Quelltextzeile eingeben um Ihr Projekt abzu schlie en Folgende Schritte sind n tig 1 Registrieren Sie wenn der Anwender den mit Go beschrif teten GoButton anklickt 2 Ubernehmen Sie die in das AddressField eingegebene URL 3 Lassen Sie WebViewer die entsprechende Web Seite an zeigen So geben Sie den passenden Code ein 1 F hren Sie im Fenster einen Doppelklick auf das mit Go
4. ein zum Ausprobieren sollten Sie ihn nicht einfach kopieren WebViewer LoadURL AddressField Text Das war alles Ihre erste Anwendung ist fertig 20 Section 9 Testen der Anwendung WIE GEHT ES WEITER Der QuickStart hat Sie in Xojo eingef hrt Sie haben gelernt wie Sie ein Fenster gestalten Steuerelemente hinzuf gen Code eingeben und das Projekt starten Als n chstes sollten Sie das Tutorial durcharbeiten und sich danach dem Entwicklerhandbuch und der Sprachreferenz widmen um Ihre Kenntnisse weiter zu vertiefen Sichern Ihres Projekts Sie sollten Ihre Arbeit in regelm igen Abst nden sichern vor allem bevor Sie das Programm ausf hren 1 Sichern Sie das Projekt durch Aufruf von File gt Save 2 Nennen Sie das Projekt SimpleBrowser und klicken Sie auf Save Starten des Projekts Jetzt k nnen Sie Ihr Programm testen 1 Klicken Sie auf den Starten Knopf in der Symbolleiste Das Programm ffnet sich in seinem eigenen Fenster 2 Geben Sie in das Adressfeld eine vollst ndige URL wie z B http www wikipedia org ein und klicken Sie auf den Go Knoptf 3 Die Web Seite wird angezeigt 4 Wenn Sie genug mit Ihrer SimpleBrowser App experimentiert haben k n nen Sie das Fenster schlie en um zu Xojo zur ckzukehren Unter OS X m ssen Sie den Men punkt SimpleBrowser debug gt Quit aufrufen 21
5. Library am rechten Fensterrand enth lt die Steuerelemente und Interface Elemente die Sie in ein Fenster oder in das Projekt bernehmen k nnen Sie gestalten den Fensterinhalt indem Sie Steuerelemente per Drag amp Drop aus der Library auf das Fenster bewegen oder einen Doppelklick auf ein Steuerelement ausf hren Mit Klick auf das kleine Zahnrad Symbol k nnen Sie festlegen wie die Elemente in der Library dargestellt werden Hinweis Falls die Library nicht angezeigt wird klicken Sie auf den Library Button rechts oben in der Symbolleiste Inspector In der Abbildung nicht dargestellt ist der Inspector mit dessen Hilfe Sie die Eigenschaften eines ausgew hlten Steuerelements anzeigen und ndern k nnen Library und In spector nutzen denselben Bereich am rechten Rand des Hauptfensters Klicken Sie auf das Inspector Symbol in der Symbolleiste um den Inspector einzublenden Der Inspector zeigt dann Informationen zu dem im Navigator bzw Editor aus gew hlten Element an Der Inhalt des Inspectors ndert sich je nachdem welches Element Sie aktivieren Eine Eigen schaft k nnen Sie im Inspector bearbeiten indem Sie einen neuen Wert in das Feld rechts neben dem Namen der Eigen schaft eingeben Chapter 2 Ein einfacher Webbrowser Erfahren Sie wie Sie mit Xojo einen einfachen Webbrowser realisieren k nnen Section 1 bersicht ber das Programm ren Fensterrand eingegeben Am besten lernen Sie Xojo ken
6. e legt die aus den Feldern Application Name und Company Name generiert werden Sie k nnen diese Vorgabe aber auch berschreiben Geben Sie SimpleBrowser in das Feld Application Name ein Behalten Sie den Inhalt von Company Name bei oder ndern Sie ihn falls erw nscht 4 Mit Klick auf OK ffnen Sie das Xojo Hauptfenster das auch als Workspace bezeichnet wird Hier werden Sie jetzt mit dem Design Ihrer Anwendung beginnen Section 4 Workspace berblick Xojo ffnet den Workspace Das Standard Fenster Ihrer An wendung ist im Navigator ausgew hlt und wird im Layout E ditor angezeigt Figure 1 2 Der Xojo Workspace Layout Editor oO o Oo 800 Untitled 4 gt lt gt ee o 2 Label 0 5 o ru 4 reef a Bi Dane amp O Navigator Der linke obere Bereich des Haupitfensters listet alle Bestandteile Ihres Projekts auf Standardm ig sind dies Window1 dieses ist ausgew hlt das App Objekt und das MainMenuBar Objekt Der Navigator erleichtert es Ihnen sich in Ihrem Projekt zurechtzufinden Layout Editor Der zentrale Fensterbereich wird vom Layout Editor eingenommen Hier gestalten Sie die Benutzerschnittstelle der Fenster Ihrer Anwendung Aktuell sehen Sie eine Vorschau dessen wie Ihr Hauptfenster bei gestartetem Programm aussehen wird Das abgebildete Fenster ist leer da Sie noch keine Steuerelemente aus der Library hinzugef gt haben Library Die
7. ehen Sie ein Piktogramm des Fensters mit verschlossenen Vorh ngeschl ssern oben und links und ge ffneten unten und rechts Sorgen Sie da f r dass das obere das linke und das rechte Schloss ge schlossen und das untere ge ffnet ist 16 Section 6 Button Properties Ihre Anwender klicken auf den Button um die Web Seite an zuzeigen Hier sollen folgende Eigenschaften angepasst wer den Name Locking und Caption 1 W hlen Sie im Fenster das PushButton1 Steuerelement aus Im Inspector werden die Eigenschaften des Buttons angezeigt 2 ndern Sie das Name Feld von PushButton1 in GoBut ton Dr cken Sie Return um die Namens nderung in den Navigator zu bernehmen 3 Als n chstes passen Sie das Locking an damit der Button bei nderungen der Fenster gr e in der rechten oberen Fensterecke verbleibt Figure 2 7 Locking f r GoButton In der Locking Gruppe des Inspectors sehen Sie ein Pik togramm des Fensters mit verschlossenen Vorhange schl ssern oben und links und ge ffneten unten und rechts Sorgen Sie daf r dass das obere und das rechte Schloss geschlossen und das linke und das untere ge ff net sind lt Schlie lich wollen Sie Ihren Button beschriften ndern Sie das Caption Feld in der Behavior Gruppe von Untitled auf Go 17 Section 7 HTML Viewer Properties Die letzte nderung die Sie an der Benutzerschnittstelle vor nehmen m ssen
8. endung eines einfachen Webbrowsers Planen Sie 15 bis 20 Minuten dafur ein diesen QuickStart durchzuarbeiten Copyright All contents copyright 2013 by Xojo Inc All rights reserved No part of this document or the related files may be reprodu ced or transmitted in any form by any means electronic pho tocopying recording or otherwise without the prior written permission of the publisher Trademarks Xojo is a trademark of Xojo Inc This book identifies product names and services known to be trademarks registered trademarks or service marks of their respective holders They are used throughout this book in an editorial fashion only In addition terms suspected of being trademarks registered trademarks or service marks have be en appropriately capitalized although Xojo Inc cannot attest to the accuracy of this information Use of a term in this book should not be regarded as affecting the validity of any trade mark registered trademark or service mark Xojo Inc is not associated with any product or vendor mentioned in this book Section 2 Darstellungskonventionen Der QuickStart verwendet Bildschirmfotos die mit den Windows OS X und Linux Versionen von Xojo entstanden sind Das De sign der Benutzeroberfl che und die verf gbaren Funktionen sind auf allen Plattformen identisch so dass Unterschiede zwischen den Plattformen lediglich kosmetischer Natur und durch die Unter schiede der grafischen Benutzerober
9. ertige Fenster sehen Sie in der Abbildung Figure 2 4 Fertiges Fensterlayout o N EEE 13 Section 3 Properties Was ist eine Property Eine Property deutsch Eigenschaft ist ein Wert einer Klas se Sie k nnen das Verhalten einer Klasse steuern indem Sie Eigenschaftswerte ndern F r dieses Projekt m ssen Sie einige Eigenschaften des Fensters und der platzierten Steuerelemente bearbeiten Fol gende Dinge m ssen Sie u a erledigen e Umbenennen aller Steuerelemente und des Fensters ent sprechend ihrer Funktion Das erleichtert sp ter die Ver wendung im Programmcode Beschriften des Buttons e Anpassen der Locking Eigenschaften damit sich die Steu erelemente beim ndern der Fenstergr e automatisch an passen Inspector Der Inspector wird verwendet um die Eigenschaften des Fensters und der Steuerelemente anzupassen Der Inspector verwendet denselben Fensterbereich wie die Library Zwi schen Library und Inspector k nnen Sie mit den entsprechen den Symbolen in der Symbolleiste hin und herschalten Alternativ k nnen Sie die Tastenkombination Command K OS X oder Control K Windows und Linux verwenden 14 Section 4 Window Properties Falls nicht bereits angezeigt ffnen Sie den Inspector indem Sie das Inspector Symbol in der Symbolleiste anklicken Hier m ssen Sie die Eigenschaften Name und Title ndern 1 Klicken Sie im Layout Editor auf die Titelzeile des Fenste
10. fl chen von Windows OS X und Linux bedingt sind Fettdruck zeigt die erste Verwendung eines neu eingef hrten Begriffs an und hebt wichtige Konzepte hervor Buchtitel wie z B Xojo Benutzerhandbuch werden kursiv dargestellt Wenn Sie ein Element aus einem der Men s von Xojo aufru fen sollen hei t dies im Text w hlen Sie File gt New Project Dies ist quivalent zu w hlen Sie New Project aus dem File Men Elemente in Anf hrungsstrichen sind Abk rzungstasten und f hren eine Reihe von Tasten auf die in dieser Reihenfolge ge dr ckt werden sollen Unter Windows und Linux wird die Ctrl bzw Strg Taste als Hilfstaste verwendet auf dem Mac die cmd Taste Wenn Sie z B die Abkurzungstaste CtrI O oder 6 O lesen bedeutet dies dass Sie auf einem Windows bzw Linux Rechner die ctrl strg Taste halten und dann die O Taste dr cken sollen auf einem Mac aber halten und O dr cken sollen Lassen Sie die Hilfstaste erst los wenn Sie die Eingabe der Abk rzungstaste abgeschlossen haben Alles was Sie eintippen sollen wird in Anf hrungsstrichen dar gestellt z B GoButton Manchmal sollen Sie Quelltextzeilen eingeben diese erschei nen in einem grauen Kasten ShowURL SelectedURL Text Beim Eingeben von Programmcode beachten Sie bitte folgende Regeln Geben Sie jede gedruckte Zeile in eine separate Zeile in den Code Editor ein Versuchen Sie nicht zwei oder mehr ged
11. igure 2 2 Text Field in Klicken Sie in der Library auf das Default Button Symbol dies nicht der Fall ist lesen Sie bitte der Library ausw hlen und ziehen Sie es in die rechte obere Ecke des Fensters in der Einleitung die Abschnitte 3 m Calgon 3 Der HTML Viewer Draggen Sie das HTML Figure 2 3 lt A gt Viewer Symbol inden HTMLViewer in der Library ausw hlen und 4 Jetzt k nnen Sie damit beginnen Steuerelemente in das Fenster zu bernehmen freien Bereich des Fens ters Sie m ssen in der Library m glicherweise nach unten scrollen um es zu sehen Passen Sie dieses Steuerelement mit Hilfe der Angreifecken so an dass es den gr ten Teil des Fens ters unter dem Text Field und dem Button ausf llt vE lt URAC ii 1 Das Text Field p s 4 Klicken Sie in der Library auf das Text Field Symbol und ziehen Sie es in die obere linke Ecke des EEE Fensters im Layout Editor Wenn Sie sich dabei der Fens Oy terecke nahern werden Ausrich tungshilfen eingeblendet die Ih 4 Im letzten Schritt verbreitern Sie das Text Field Klicken Sie darauf Text Field nen die Positionierung erleich BE Tees nennen um die Angreifecken einzublenden text with one font font s Klicken Sie dann auf die mittlere rechte Angreifecke und ziehen Sie sie so weit nach rechts bis Ihnen die Ausrich tern 12 tungshilfen zeigen dass der optimale Abstand zum Button erreicht ist Das f
12. nen indem Sie ein Programm mit Xojo schreiben In diesem QuickStart werden Sie einen einfachen Webbrowser realisieren e Button Ein Button dient zum Ausl sen einer Aktion Der Anwender klickt auf den Button um die Web Seite unter der eingegebenen URL in den HTML Viewer zu laden Eine Xojo Anwendung besteht aus einer Sammlung von Objekten Klassen Nahezu alle Elemente in Xojo sind Klassen einschlie lich der Fenster und Steuerelemente In HTML Viewer Der Figure 2 1 So sieht der fertige Webbrowser aus HTML Viewer kann HTML also Web Seiten darstellen In diesem Bei spiel soll er die Web Site http www wikipedia org unserem SimpleBrowser Projekt WIKIPEDIA unter der eingegebenen werden Sie die Window Klasse f r ner Eat pyem URL anzeigen das Fenster verwenden und Espa ol on Deutsch Steuerelemente User Interface Kl me x Im Folgenden werden Sie Klassen hinzuf gen nn ena Schritt fur Schritt durch cca u das Design der Benutzer Die PRATER verwendet drei Steu u a ee anal be Ei ereiomenie euere gabe des notwendigen Text Field Das Text Field wird Sn nn Sn Sn ae Programmcodes gef hrt zur Texteingabe ben tigt In die ise o sem Projekt wird die anzuzeigen de URL in ein Text Field am obe 11 Section 2 Erzeugen der Benutzerschnittstelle Design des Fensters 2 Der Button Xojo sollte gestartet und Window1 im Layout Editor ge ffnet sein Falls F
13. rs um dieses Zu selektieren Der Inspector zeigt nun die Eigenschaften von Window1 ndern Sie im ID Bereich den Inhalt des Name Feldes von Window1 in BrowserWindow Drucken Sie Re turn damit die Namensanderung in den Navigator Ubernommen wird Im Frame Bereich ndern Sie den Na men von Untitled in Web Browser Dr cken Sie Return damit der neue Name in der Titelzeile des Fensters erscheint Figure 2 5 Window Inspector Name Windowl Super Window v sw Interfaces Behavior Pace Visible FullScreen Live Resize Implicit Instance Size Width 600 Height 400 Minimum Size Width 64 Height 64 Maximum Size Width 3200 Height 32000 Frame Type Document st 15 Section 5 Text Field Properties In das Text Field gibt der Anwender die URL ein die im Browser angezeigt werden soll Hier wollen Sie die Name und Locking Eigenschaften modifizieren 1 Selektieren Sie im Fenster das TextField1 Steuerelement Im Inspector werden die Eigenschaften des Text Field an gezeigt 2 ndern Sie den Inhalt des Felds Name von TextField1 auf AdressField Dr cken Sie Return um die nderun gen zu bernehmen 3 Als n chstes m ssen Sie das Locking anpas Figure 2 6 Locking f r sen damit sich die Gr AddressField Be des Text Field auto Locking matisch anpasst wenn die Fenstergr e ge n dert wird In der Locking Gruppe des Inspectors s
14. ruck te Zeilen in dieselbe Zeile einzugeben oder lange Zeilen in zwei oder mehr Zeilen aufzuteilen Geben Sie keine zus tzlichen Leerzeichen ein wo im gedruck ten Quelltext keine Leerzeichen enthalten sind e Nat rlich k nnen Sie die Quelltexte auch Uber die Zwischenab lage kopieren und einsetzen Immer wenn Sie Ihre Anwendung starten berpr ft Xojo den Quelltext auf Schreib und Syntaxfehler Falls dabei ein Fehler ge funden wird erscheint zu Ihrer Information eine Fehlermeldung am unteren Fensterrand Section 3 Los geht s Starten Sie Xojo Falls nicht bereits geschehen starten Sie bitte Xojo jetzt 1 F hren Sie einen Doppelklick auf das Xojo Programmsym bol aus um Xojo zu starten Nachdem Xojo geladen wur de erscheint der Project Chooser zur Projektauswahl Figure 1 1 Project Chooser Fenster 2 Mit Xojo k nnen Sie drei verschiedene Anwendungstypen entwickeln Desktop Web und Console Anwendungen In diesem QuickStart programmieren Sie eine Desktop An wendung kicken Sie also auf Desktop 3 Es erscheinen drei Eingabefelder Application Name Com pany Name und Application Identifier Application Name ist der Name Ihres Programms und wird auch als Dateiname der erzeugten Programmdatei ver wendet Company Name ist Ihr Firmenname Dieser Eintrag muss nicht ausgef llt werden Application Identifier ist eine eindeutige Kennung f r die se Anwendung Das Feld wird automatisch mit Daten b
Download Pdf Manuals
Related Search