Desktop

QuickStart

2014 Release 3 Xojo, Inc.

Chapter 1

Introduction

Welcome to Xojo, the easiest way to create cross-

platform desktop and web applications.
Section 1

About the Desktop QuickStart

STARTING XOJO
About the Desktop QuickStart
1. Download the installer for your operating
Welcome to Xojo, the easiest tool for creating multi-platform desktop and web
system from:

http://www.xojo.com/download.
applications. Xojo is made up of a rich set of graphical user interface objects,
a modern object-oriented language, an integrated debugger, and a multi-
2. Run the installer.
platform compiler. Together they make up the Xojo Integrated Development
3. Run Xojo. Environment or IDE.
4. In the Project Chooser, select Desktop and With the IDE, you can build your application’s interface simply by dragging
click OK.
and dropping interface objects into the application’s 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 2014 by Xojo, Inc. All rights reserved. No part of this
document or the related files may be reproduced or transmitted in any form,

2
by any means (electronic, photocopying, recording, or other-
wise) without the prior written permission of the publisher.

Trademarks
Xojo is a registered 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
Section 2
Presentation Conventions
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 as
“GoButton”.
• 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.
Don’t try to fit two or more printed lines into the same line or
split a long line into two or more lines.
• Don’t 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.

4
Section 3
Getting Started
Start Xojo
If you haven’t 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.
Figure 1.1 Project Chooser Window
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: Application
Name, 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.
5
Section 4

Workspace

lected), the App object and the MainMenuBar object. You use
Overview
the Navigator to navigate within your project.
Xojo opens the Workspace with the default window for your
application selected in the Navigator and displayed in the Layout Editor: The center area is the Layout Editor. You use
Layout Editor. the Layout Editor to design the user interface for the windows
in your application. It shows the window and previews how it
Figure 1.2 The Xojo Workspace 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 different

setting.



Navigator: The area on the top left shows you all the items in Note: If the Library is not visible, click the Library button on
your project. By default you can see Window1 (which is se- the toolbar to show it.

6
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 of
the 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
Chapter 2

Simple
Browser
Application
Learn how to create a simple web browser
application.
Section 1

Overview

About the Application • Button: A Button is used to trigger an action. The user
The best way to quickly learn how to use Xojo is to create an clicks the button to load the web page at the URL into the
application. For this QuickStart, you will create a simple web HTML Viewer.
browser.
• HTML Viewer: An HTML Viewer is used to display HTML (a
A Xojo application consists of a col- web page). In this pro-
lection of objects, called classes. ject, it is what displays
Figure 2.1 The Completed Simple Web Browser Application the web site at the URL.
Nearly everything in Xojo is a class,
including your windows and its con-
The next sections walk
trols. In the SimpleBrowser project,
you through creating the
you use the default Window class to
user interface and adding
create your window and you add con-
the necessary code to
trols (user interface classes) to the
make the application
window to create the design.
work.
The application uses three controls:

• Text Field: A Text Field control is

used to enter text. In this project,
the URL to display is typed into a
Text Field at the top of the win-
dow.

9
Section 2

Building the User Interface

Designing the Window In the Library, click on the Default Button icon and drag it
You should have Xojo running and to the top-right corner of the window.
Window1 open in the Layout Editor. Figure 2.2 Choosing a 3. The final control is the HTML Viewer:

If not, please refer to the Preface, Text Field in the Library


Sections 3 and 4.
Drag the HTML Viewer
Now you are ready to start adding icon to the remaining Figure 2.3 Choose
empty area on the page HTMLViewer in the
controls to the window.
Library
(you may have to scroll
1. Starting with Text Field:
 down through the con-

 trols to see it).

In the Library, click on the Text 

Field icon and drag it to the top- Resize this control (using the selec-
left corner of the window in the tion handles so that it fills most of
Layout Editor.
 the window below the Text Field

 and Button).
As you get close to the edges of
the window, you will see align- 4. The final step is to resize the Text
ment indicators that help you po- Field so that it is larger. Click on it
sition the control. to show the selection handles.
Click the center-right handle and
2. Next is the Button:
 drag it to the right until the alignment guides tell you it is

 close enough to the Button.

10
Your finished window layout should look like this:

Figure 2.4 Finished Window Layout

11
Section 3

Properties

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.

Inspector
The 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).

12
Section 4

Window Properties

If you haven’t already, display the Inspector by clicking the In-

spector button on the toolbar.

You need to change the Name and Title

Figure 2.5 Window
properties: Inspector
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-
turn to 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.

13
Section 5

Text Field Properties

The Text Field is where your user enters the URL they want to Click the locks so that top, left and right are locked and bot-
see in the browser. You want to change the following proper- tom is unlocked.
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 Return to 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 Figure 2.6 Locking for
resizes.
 AddressField


In the Locking group
look at the image that
shows the window with
small locked icons for
the top and left and
small unlocked icons for
bottom and right.


14
Section 6

Button Properties

Your users click the button to display the web page. You need
to change these properties: Name, Locking and Caption.
1. On the window, select the PushButton1 control. The In-
spector changes to show the Button properties.
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”.

2. In the Name field, change the name from “PushButton1” to

“GoButton”. Press Return to 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
Figure 2.7 Locking for
when it is resized.

GoButton


In the Locking group look at
the image that shows the
window with small locked
icons 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.

15
Section 7

HTML Viewer Properties

The last user interface change you need to make is for the Click the locks so that top, bottom, left and right are
HTML Viewer. Here you need to change these properties: locked.
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 Return to 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 Figure 2.8 Locking for
is resized.
 WebViewer


In the Locking group look at
the image that shows the
window with small locked
icons for the top and left and
small unlocked icons for bot-
tom and right.


16
Section 8

Adding Code

Code Editor This means you want

to add your code to Figure 2.9 Add Event Handler
Your application is almost complete. Now it is time to add the Window
code that will tell the HTML Viewer which web page to dis- the Action event han-
play. Xojo uses an object-oriented programming language dler, so select Action
which is quite easy to learn. You need only one line of code to from the Event Han-
finish your project! dler list and click OK.



The steps you need to do are: Notice the Navigator
updates to show the
1. Figure out when your user clicks the GoButton, called
Action event under-
“Go” on the window.
neath the GoButton control and the Code Editor displays.

2. Get the URL that your user entered in AddressField. 

This step solves your first problem of when to know when
3. Have WebViewer display the location.
the user clicks on the GoButton.
Follow these steps to add the code:
2. Now you need to get the URL that the user typed.

1. On the window, double-click the GoButton control, la- 

belled “Go”. 
 The value that a user types into a Text Field is stored in the

 Text property of the Text Field.

The Add Event Handler window appears. When a user You access the Text property like this

clicks on a Button, your application runs any code in its Ac-
tion event handler.


17
 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 name
and 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
Section 9

Testing Simple Browser

WHAT’S NEXT? Saving Your Project

The QuickStart has introduced you to Xojo. You should save your work periodically and always before running your pro-
You’ve learned how to design a window, add ject.
controls, add code and then run your project.

You should next work through the Tutorial and

1. Save the project by choosing File ↠ Save.
then explore the Guide and Language
Reference to continue learning how to create
2. Name the project “SimpleBrowser” and click Save.
great applications using Xojo.
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.


19