Learn the Basics: Xojo Web Quickstart

Welcome to Xojo, the easiest tool for creating your own web 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 app's web pages and dialogs. In this QuickStart, you will see how easy it is. Xojo provides you with the tools you need to build the apps you want.

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 web app (an app that uses a web service to search country flags). It may take you up to 15 minutes to complete this QuickStart.

Getting Started

If you haven’t done so already, now is the time to start Xojo. When it finishes launch, the Project Chooser appears.

Xojo Project Chooser

Xojo lets you build several different types of apps (Desktop, Web, Console and iOS). For this QuickStart, you are building a Web app, so click on Web.

You will now see three fields that need values: Application Name, Company Name and Application Identifier.

In this QuickStart, you will build a web application that makes use of a web service that lets you search for and display flags of various nations around the world.

Using the Workspace

Xojo opens a Workspace window displaying your project with the default Webpage displayed in the Layout Editor.

IDE Layout Editor

Navigator: The area on the top left shows you all the items in your project. By default you can see WebPage1 (which is selected), the App object and the Session 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.

Creating the Flag Search App

The best way to quickly learn how to use Xojo is to create a simple app. For this QuickStart, you will create a web app that accesses a web service that returns a picture of the flag of the country whose name you provide it.

A Xojo app consists of a collection of objects, called classes. Nearly everything in Xojo is a class, including your web pages and the controls on the web page. In the Flag Search project, you will use the default WebPage class to create your web page and you will add controls (user interface classes) to the web page to create the design.

Flag Search uses these controls:

TextField: A TextField control is used to enter text. In this project, the user will enter the country name into a TextField at the top of the window.

Button: A Button is used to trigger an action. The user presses the button to initiate the search.

ImageViewer: An ImageViewer control is used to view images. In this project, it will display the flag whose name is entered in the Text Field.

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 WebPage1 open in the Layout Editor. Now you are ready to start adding controls to the web page. You will add a TextField, a Default Button and an ImageViewer to your webpage by dragging the from the Library on the right side of the Workspace and dropping them on your webpage.

Web QuickStart controls

Your finished layout will look like this:

Finished Layout

Let’s get started.

Finally, let’s resize the controls to best utilize the space.

Editing Controls

There’s more to creating a nice user interface than just dragging and dropping controls of course. You’ll need to make a few changes to finish your interface. Next you will change the default button’s caption from OK to Search and make the TextField and ImageViewer controls automatically resize themselves based upon the size of the window in which the webpage is displayed. These changes are done using the Inspector.

Xojo Inspector

Let’s start with the Default Button’s caption:

We will want the Button to stay on the right side of the page should the user make the page wider or narrower. To do this, we need to tell Xojo that distance from the edge of the control to the edge of the page should always stay the same. That way when the window in which the page is displayed is made larger or smaller, the control will stay locked to the right side automatically. This is done with a control’s locking properties.

In the Inspector notice that the Locking section shows four locks. The top and left are already locked indicating that the Button’s top and left sides are locked by default.

Now let’s change the TextField and ImageViewer to use all the available space on the webpage.

Getting Ready For Code

When you start writing code you will sometimes need to refer to the webpage or controls on the webpage. Xojo gives them default names such as WebPage1, Button1, TextField1 and ImageViewer1 but those names are not particularly descriptive. Giving webpages and controls sensible names will help make your code easier to read. Let’s do it.

Adding Code

Your application is almost complete. Now it is time to add the code that will find the flag based upon the country name the user enters and display it in the FlagViewer control. Xojo uses an object-oriented programming language that is quite easy to learn. You need only three simple lines of code to finish your project!

The code you will write needs to:

Let’s get started.

That’s it. Your first web application is complete.

Saving Your Project

Before we run the app to test it, it’s a good idea to save your project so should something go wrong you don’t lose your work:

Running Your App

Now that’s test your finished web application:

The flag of the country of Spain should appear. If it doesn’t make sure you spelled it correctly. Try searching for the flags of other countries as well. When you’re done, close the tab or browser window then return to Xojo. It may take a few minutes for Xojo to realize you have closed the browser so click the Stop sign button in the Xojo window to stop execution of your app.

Next Steps

The QuickStart has introduced you to Xojo. You’ve learned how to make your first app by designing a web page, adding controls and writing code. You should next work through the Web Tutorial and then explore the Introduction to Programming with Xojo book if you are new to programming.

Be sure to also read the User Guide and Web Language Reference to continue learning how to create great web apps using Xojo.