GettingStarted

Desktop QuickStart
From Xojo Documentation

Welcome to Xojo, the easiest tool for creating your own apps. Xojo is made up of a rich set of
graphical user interface objects, a modern object-oriented language, an integrated debugger,
and a multi-platform compiler. Together they make up the Xojo Integrated Development
Environment or IDE.

With the IDE, you can build your app's interface simply by dragging and dropping interface
objects onto the apps’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 app you can imagine.

This QuickStart is for people who are new to programming or 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 app (a simple web browser). It may take you up to 15 minutes to complete
this QuickStart.
 Contents
1 Getting Started
2 Workspace
3 Making the Simple Browser App

3.1 Building the User Interface

3.2 Setting the Properties

3.2.1 What is a Property?

3.2.2 Inspector
3.2.3 Setting the Properties for the Window
3.2.4 Setting the Properties for the Text Field
3.2.5 Setting the Properties for the Button
3.2.6 Setting the Properties for the HTML Viewer

3.3 Adding Code

3.4 Running the App

4 Next Steps

Getting Started
If you haven’t done so already, now is the time to start Xojo.

1. Double-click the Xojo app icon to start Xojo. After it finishes loading, the Project Chooser
window appears.
2. Xojo lets you build several different types of apps (Desktop, Web, Console and iOS). For this
QuickStart, you are building a Desktop app, so click on Desktop.
3. You should now see three fields that need values: Application Name, Company Name and
Application Identifier.

1. Application Name is the name of your app. This will be the filename of the actual app file
that gets created.
2. Company Name is the name of your company. You may choose to leave this blank.
3. Application Identifier is a unique identifier for this app. It will automatically populate using
what you enter for the Application and Company Names, but you can also change it to
whatever you want.
4. Enter "SimpleBrowser" as the Application Name. You can leave Company Name as it is or
change it.
5. Click OK to open the main Xojo window (called the Workspace), where you will begin
designing your app.
Workspace
Xojo opens the Workspace with the default window for your app 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 selected), the App object and the MainMenuBar object. You use the
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 app. It shows the window and previews how it looks when the
app runs. In this illustration, the window is blank because you haven't yet added any user
interface 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.

If the Library is not visible, click the Library button on the toolbar to show it.

Inspector: Not shown in the above illustration is the Inspector, which allows you to see and
change the properties for the selected 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.

Making the Simple Browser App

The best way to quickly learn how to use Xojo is to create an app. For this QuickStart, you will
create a simple web browser.
A Xojo app consists of a collection of objects, called classes. Nearly everything in Xojo is a
class, including your windows and its controls. In the SimpleBrowser project, you use the default
Window class to create your window and you add controls (user interface classes) to the
window to create the design.

The app uses these 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 window.
Button: A Button is used to trigger an action. The user clicks 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 project, 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 app work.

Building the User Interface

You should have Xojo running and Window1 open in the Layout Editor. Now you are ready to
start adding controls to the window. You will add a Text Field, Button and HTML Viewer.
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 alignment indicators that help you position the control.
2. Next is the Button: In the Library, click on the Default Button icon and drag it to 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 controls to see it). Resize this
control (using the selection 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.
Your finished window layout should look like this:
Setting the Properties
What is a Property?
A property is a value of a class. Changing property values allows you to change the behavior of
the class. For this project, you want to change various properties for the view and the controls
you added. Some of the things you need to do are:

Rename all controls (and the window) so that they describe 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 view and control properties. It shares the same area on the right
of the Workspace 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).

Setting the Properties for the Window

If you haven’t already, display the Inspector by clicking the Inspector 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 “Window1” to
 “BrowserWindow”. Press Return to see the name change in the Navigator. Changing the
Name makes it easier to identify project items in the Navigator and is a good practice to start
doing.
3. In the Title field (located in the Frame group), change the name from “Untitled” to “Web
Browser”. Press Return and you will see the name change in the title bar of the window.

Setting the Properties for the Text Field

The Text Field is where your user enters the URL they want to see in the browser. You want to
change the following properties: Name and Locking

1. On the window, select the TextField1 control. The Inspector 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. Changing the Name makes it easier to identify controls in
the Navigator and when you are writing code. It is a good practice to start doing.
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 that shows 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 bottom is unlocked.
Setting the Properties for the Button
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 Inspector changes to show the Button
properties.
2. In the Name field, change the name from “PushButton1” to “GoButton”. Press Return to see
the name change in the Navigator. Changing the Name makes it easier to identify controls in
the Navigator and when you are writing code. It is a good practice to start doing.
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 locked icons for the top and left and small unlocked icons for bottom 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 Caption field (located in the Behavior
group), change the caption from “OK” to “Go”.
Setting the Properties for the HTML Viewer
The last user interface change you need to make is for the HTML Viewer. Here you need to
change these properties: Name and Locking

1. On the window, select the HTMLViewer1 control. The Inspector 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. Changing the Name makes it easier to identify
controls in the Navigator and when you are writing code. It is a good practice to start doing.
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 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, bottom, left and right are locked.
Adding Code
Your app is almost complete. Now it is time to add the code that will tell the HTML Viewer which
web page to display. 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, labelled “Go”. The Add Event Handler
window appears. When a user clicks on a Button, your app runs any code in its Action event
handler. This means you want to add your code to the Action event handler, so select Action
from the Event Handler list and click OK.
2. Notice the Navigator updates to show the Action event underneath 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.
3. 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:
AddressField.Text

4. 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)

5. 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 (for practice, be sure to type it rather than
copy and pasting it):
WebViewer.LoadURL(AddressField.Text)

That's it! Your first app is complete.

Running the App

You should save your work periodically and always before running your project. To do so:

1. Save the project by choosing File ↠ Save.

2. Name the project “SimpleBrowser” and click Save.
Now you can test your finished app:

1. Click the Run button in the toolbar to run your project. The app opens in its own window.
2. Type a URL of your choice, such as https://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 app, you can close the
window to return to Xojo. On macOS, choose SimpleBrowser.debug ↠ Quit to Quit the app.
Next Steps
This QuickStart has introduced you to Xojo and you’ve learned how to make your first app by
designing a window, adding controls and writing code. You should next work through the
Desktop Tutorial and then explore the User Guide and Desktop Language Reference to continue
learning how to create great apps using Xojo.

Retrieved from "http://docs.xojo.com/index.php?

title=GettingStarted:Desktop_QuickStart&oldid=56300"

This page was last edited on 9 November 2018, at 18:52.

Privacy policy About Xojo Documentation Disclaimers
Send Doc Feedback