7/29/2019 Quick Start Desktop
1/20
Desktop
QuickStart
2013 Release 1 Xojo, Inc.
7/29/2019 Quick Start Desktop
2/20
Chapter 1
Introduction
Welcome to Xojo, the easiest way to create cross-platform desktop and web applications.
7/29/2019 Quick Start Desktop
3/20
About the Desktop QuickStartWelcome to Xojo, the easiest tool for creating cross-platform desktop and web
applications. Xojo is made up of a rich set of graphical user interface objects,
a modern object-oriented language, an integrated debugger, and a cross-
platform compiler. Together they make up the Xojo Integrated Development
Environment or IDE.
With the IDE, you can build your applications interface simply by dragging
and dropping interface objects into the applications windows and dialogs. In
this QuickStart, you will see how easy it is. Xojo provides you with all the tools
you need to build virtually any application you can imagine.
This QuickStart is for people who are new to programming and new to Xojo. It
will give you a gentle introduction to the Xojo development environment and
lead you through the development of a working desktop application (a simple
web browser). It should take you about 15 to 20 minutes to complete this
QuickStart.
Copyright
All contents copyright 2013 by Xojo, Inc. All rights reserved. No part of this
document or the related files may be reproduced or transmitted in any form,
Section 1
STARTING XOJO
1. Download the installer for your operating
system from:http://www.xojo.com/downloads.
2. Run the installer.
3. Run Xojo.
4. In the Project Chooser, select Desktop and
click OK.
About the Desktop QuickStart
2
http://www.xojo.com/downloadshttp://www.xojo.com/downloads7/29/2019 Quick Start Desktop
4/20
by any means (electronic, photocopying, recording, or other-
wise) 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
been appropriately capitalized, although Xojo, Inc. cannot at-
test to the accuracy of this information. Use of a term in this
book should not be regarded as affecting the validity of any
trademark, registered trademark, or service mark. Xojo, Inc. is
not associated with any product or vendor mentioned in this
book.
3
7/29/2019 Quick Start Desktop
5/20
The QuickStart uses screen snapshots taken from the Windows,OS X and Linux versions of Xojo. The interface design and fea-
ture set are identical on all platforms, so the differences between
platforms are cosmetic and have to do with the differences be-
tween the Windows, OS X, and Linux graphical user interfaces.
Bold type is used to emphasize the first time a new term is
used and to highlight important concepts. In addition, titles of
books, such as Xojo User Guide, are italicized.
When you are instructed to choose an item from one of the
menus, you will see something like choose File New Pro-
ject. This is equivalent to choose New Project from the File
menu.
Keyboard shortcuts consist of a sequence of keys that should
be pressed in the order they are listed. On Windows and
Linux, the Ctrl key is the modifier; on OS X, the (Command)
key is the modifier. For example, when you see the shortcut
Ctrl+O or -O, it means to hold down the Control key on a
Windows or Linux computer and then press the O key or hold
down the key on OS X and the press the O key. You re-
lease the modifier key only after you press the shortcut key.
Something that you are supposed to type is quoted, such asGoButton.
Some steps ask you to enter lines of code into the Code Edi-
tor. They appear in a shaded box:
ShowURL(SelectedURL.Text)
When you enter code, please observe these guidelines:
Type each printed line on a separate line in the Code Editor.
Dont try to fit two or more printed lines into the same line or
split a long line into two or more lines.
Dont add extra spaces where no spaces are indicated in the
printed code.
Of course, you can copy and paste the code as well.
Whenever you run your application, Xojo first checks your code
for spelling and syntax errors. If this checking turns up an error,
an error pane appears at the bottom of the main window for you
to review.
Section 2
Presentation Conventions
4
7/29/2019 Quick Start Desktop
6/20
Start XojoIf you havent done so already, now is the time to start Xojo.
1. Double-click the Xojo application icon to start Xojo. After it
finishes loading, the Project Chooser window appears.
2. Xojo lets you build three different types of applications
(Desktop, Web and Console). For this QuickStart, you are
building a desktop application, so click on Desktop.
3. You should now see three fields to specify: ApplicationName, Company Name and Application Identifier.
Application Name is the name of your application. This
will be the filename of the actual application file that gets
created.
Company Name is the name of your company. You may
choose to leave this blank.Application Identifier is a unique identifier for this applica-
tion. It will automatically populate using what you enter for
the Application and Company Names, but you can also
change it to whatever you want.
Enter "SimpleBrowser" as the Application Name. You can
leave Company Name as it is or change it.
4. Click OK to open the main Xojo window (called the Work-
space), where you will begin designing your application.
Section 3
Getting Started
5
Figure 1.1
7/29/2019 Quick Start Desktop
7/20
OverviewXojo opens the Workspace with the default window for your
application selected in the Navigator and displayed in the
Layout Editor.
Navigator: The area on the top left shows you all the items in
your project. By default you can see Window1 (which is se-
lected), the App object and the MainMenuBar object. You usethe Navigator to navigate within your project.
Layout Editor: The center area is the Layout Editor. You use
the Layout Editor to design the user interface for the windows
in your application. It shows the window and previews how it
looks when the application runs. In this illustration, the win-
dow is blank because you haven't yet added any user inter-
face controls from the Library.
Library: The area on the right is the Library and shows the
controls and interface elements that you can add to a window
or to the project. You design the window by dragging controls
from the Library to the window. You can also add a control to
the window by double-clicking it.
You can change how the controls display in the Library by
clicking the small gear icon and choosing a differentsetting.
Note: If the Library is not visible, click the Library button on
the toolbar to show it.
Section 4
Workspace
6
Figure 1.2
7/29/2019 Quick Start Desktop
8/20
Inspector: Not shown in the above illustration is the Inspector,
which allows you to see and change the properties for the se-
lected control. This area of the Main window is shared with the
Library. You can show the Inspector by clicking the Inspector
button on the toolbar. The Inspector shows information about
the selected item in the Navigator or Editor. The contents ofthe Inspector changes as you click on different items. You
change an Inspector value by entering a new value in the field
to the right of the field label.
7
7/29/2019 Quick Start Desktop
9/20
Chapter 2
Simple
BrowserApplication
Learn how to create a simple web browserapplication.
7/29/2019 Quick Start Desktop
10/20
About the ApplicationThe best way to quickly learn how to use Xojo is to create an
application. For this QuickStart, you will create a simple web
browser.
A Xojo application consists of a col-
lection of objects, called classes.
Nearly everything in Xojo is a class,
including your windows and its con-trols. In the SimpleBrowser project,
you use the default Window class to
create your window and you add con-
trols (user interface classes) to the
window to create the design.
The application uses three controls:
Text Field: A Text Field control isused to enter text. In this project,
the URL to display is typed into a
Text Field at the top of the win-
dow.
Button: A Button is used to trigger an action. The userclicks the button to load the web page at the URL into the
HTML Viewer.
HTML Viewer: An HTML Viewer is used to display HTML (a
web page). In this pro-
ject, it is what displays
the web site at the URL.
The next sections walk
you through creating the
user interface and adding
the necessary code to
make the application
work.
Section 1
Overview
9
Figure 2.1
7/29/2019 Quick Start Desktop
11/20
Designing the WindowYou should have Xojo running and
Window1 open in the Layout Editor.
If not, please refer to the Preface,
Sections 3 and 4.
Now you are ready to start adding
controls to the window.
1. Starting with Text Field:
In the Library, click on the Text
Field icon and drag it to the top-
left corner of the window in the
Layout Editor.
As you get close to the edges of
the window, you will see align-
ment indicators that help you po-
sition the control.
2. Next is the Button:
In the Library, click on the Default Button icon and drag itto the top-right corner of the window.
3. The final control is the HTML Viewer:
Drag the HTML Viewer
icon to the remaining
empty area on the page
(you may have to scroll
down through the con-
trols to see it).
Resize this control (using the selec-
tion handles so that it fills most of
the window below the Text Field
and Button).
4. The final step is to resize the Text
Field so that it is larger. Click on it
to show the selection handles.
Click the center-right handle and
drag it to the right until the alignment guides tell you it is
close enough to the Button.
Section 2
Building the User Interface
10
Figure 2.2
Figure 2.3
7/29/2019 Quick Start Desktop
12/20
Your finished window layout should look like this:
11
Figure 2.4
7/29/2019 Quick Start Desktop
13/20
What is a Property?A property is a value of a class. Changing property values al-
lows you to change the behavior of the class.
For this project, you want to change various properties for the
window and its controls. Some of the things you need to do
are:
Rename all controls (and the window) so that they de-
scribe their behavior and are easy to refer to in code.
Add a Caption to the Button.
Set Locking properties so that the controls resize properly
when the window is resized.
InspectorThe Inspector is used to change the window and control
properties. It shares the same area on the right of the main
window as the Library. In order to show the Inspector, click
the Inspector button on the toolbar or press -I (Ctrl+I on
Windows and Linux).
Section 3
Properties
12
7/29/2019 Quick Start Desktop
14/20
If you havent already, display the Inspector by clicking the In-spector button on the toolbar.
You need to change the Name and Title
properties:
1. First, in the Layout Editor, click on the
title bar of the window to select it. The
Inspector now shows the properties
for the window.
2. In the Name field (located in the ID
group), change the name from Win-
dow1 to BrowserWindow. Press Re-
turnto see the name change in the
Navigator.
3. In the Title field (located in the Frame
group), change the name from Unti-
tled to Web Browser. Press Return
and you will see the name change in
the title bar of the window.
Section 4
Window Properties
13
Figure 2.5
7/29/2019 Quick Start Desktop
15/20
The Text Field is where your user enters the URL they want tosee in the browser. You want to change the following proper-
ties: Name and Locking
1. On the window, select the TextField1 control. The Inspec-
tor changes to show the Text Field properties.
2. In the Name field, change the name from TextField1 to
AddressField. Press Returnto see the name change in
the Navigator.
3. Now you need to make changes to the locking so that the
Text Field gets larger or
smaller as the window
resizes.
In the Locking group
look at the image thatshows the window with
small locked icons for
the top and left and
small unlocked icons for
bottom and right.
Click the locks so that top, left and right are locked and bot-tom is unlocked.
Section 5
Text Field Properties
14
Figure 2.6
7/29/2019 Quick Start Desktop
16/20
Your users click the button to display the web page. You needto change these properties: Name, Locking and Caption.
1. On the window, select the PushButton1 control. The In-
spector changes to show the Button properties.
2. In the Name field, change the name from PushButton1 to
GoButton. Press Returnto see the name change in the
Navigator.
3. Now you need to make changes to the locking so that the
Button stays attached to the
right side of the window
when it is resized.
In the Locking group look at
the image that shows the
window with small lockedicons for the top and left and
small unlocked icons for bot-
tom and right.
Click the locks so that top
and right are locked and left and bottom are unlocked.
4. Lastly, you want to give your button a caption. In the Cap-tion field (located in the Behavior group), change the cap-
tion from OK to Go.
Section 6
Button Properties
15
Figure 2.7
7/29/2019 Quick Start Desktop
17/20
The last user interface change you need to make is for theHTML Viewer. Here you need to change these properties:
Name and Locking
1. On the window, select the HTMLViewer1 control. The In-
spector changes to show the HTML Viewer properties.
2. In the Name field, change the name from HTMLViewer1
to WebViewer. Press Returnto see the name change in
the Navigator.
3. Finally, you need to make changes to the locking so that
the HTML Viewer continues
to fill the the window when it
is resized.
In the Locking group look at
the image that shows thewindow with small locked
icons for the top and left and
small unlocked icons for bot-
tom and right.
Click the locks so that top, bottom, left and right arelocked.
Section 7
HTML Viewer Properties
16
Figure 2.8
7/29/2019 Quick Start Desktop
18/20
Code EditorYour application is almost complete. Now it is time to add the
code that will tell the HTML Viewer which web page to dis-
play. Xojo uses an object-oriented programming language
which is quite easy to learn. You need only one line of code to
finish your project!
The steps you need to do are:
1. Figure out when your user clicks the GoButton, called
Go on the window.
2. Get the URL that your user entered in AddressField.
3. Have WebViewer display the location.
Follow these steps to add the code:
1. On the window, double-click the GoButton control, la-belled Go.
The Add Event Handler window appears. When a user
clicks on a Button, your application runs any code in its Ac-
tion event handler.
This means you wantto add your code to
the Action event han-
dler, so select Action
from the Event Han-
dler list and click OK.
Notice the Navigator
updates to show theAction event under-
neath the GoButton control and the Code Editor displays.
This step solves your first problem of when to know when
the user clicks on the GoButton.
2. Now you need to get the URL that the user typed.
The value that a user types into a Text Field is stored in the
Text property of the Text Field.
You access the Text property like this
Section 8
Adding Code
17
Figure 2.9
7/29/2019 Quick Start Desktop
19/20
AddressField.Text
3. The last step is to have WebViewer display the web page.
This is done by calling the LoadURL method of the control
and sending it the URL that the user typed.Your code now looks like this:
WebViewer.LoadURL(AddressField.Text)
4. Go ahead and add this code to the Code Editor. Start by
clicking in the white space below the Action() event nameand then type this code (do type it rather than copy and
pasting it):
WebViewer.LoadURL(AddressField.Text)
That's it! Your first application is complete.
18
7/29/2019 Quick Start Desktop
20/20
Saving Your ProjectYou should save your work periodically and always before running your pro-
ject.
1. Save the project by choosing File Save.
2. Name the project SimpleBrowser and click Save.
Running Your Project
Now you can test your finished application:
1. Click the Run button in the toolbar to run your project.
The application opens in its own window.
2. Type a URL of your choice, such as http://www.wikipedia.org, and click the
Go button.
3. You will see the web page.
4. When you are finished experimenting with the Simple Browser application,
you can close the window to return to Xojo.
On OS X, choose SimpleBrowser.debug Quit to Quit the application.
Section 9
WHATS NEXT?
The QuickStart has introduced you to Xojo.
Youve learned how to design a window, add
controls, add code and then run your project.
You should next work through the Tutorial and
then explore the Guide and Language
Reference to continue learning how to create
great applications using Xojo.
Testing Simple Browser
19
http://www.wikipedia.org/http://www.wikipedia.org/