Learn the Basics: Xojo Web Tutorial

This Web Tutorial is for people who are new to programming and new to Xojo. It is an introduction to the Xojo development environment and will lead you through the development of a real web app. It should take you about an hour to complete this tutorial.

If you are already familiar with Xojo and would like a shorter introduction to making web apps with Xojo, jump to the Web QuickStart.

Getting Started

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

Xojo lets you build several different types of apps (Desktop, Web, Console and iOS). For this Tutorial, 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.

Workspace

Xojo opens the Workspace with the default web page 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 WebPage1 (which is selected), the App object and the Session object. 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 web pages in your app. It shows the web page and previews how it looks when the app runs in a web browser. In this image, the web page 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 web page or to the project. You design the web page by dragging controls from the Library to the web page. You can also add a control to the web page 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 image is the Inspector, which allows you to see and change the properties for the selected control. This area of the Workspace 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.

About the App

In this tutorial you will create an app to track tasks.

Task Manager

For the Task manager app, you enter tasks in the text field and then click the Add button to add them to the list. You can click on individual tasks in the list to delete them or mark them as complete.

Task Manager uses three controls:

The next sections walk you through creating the user interface and adding the necessary code to make the app work.

Designing the User Interface

Task List

You should have WebPage1 open in the Layout Editor. You are now going to add a Listbox to the web page. The Listbox is used for storing the tasks.

Buttons

Now you will add the three buttons needed by Task Manager to the web page.

The '''Delete''' button removes tasks from the Listbox, the '''Add''' button adds tasks to the Listbox and the '''Complete''' button marks tasks in the Listbox as completed. Let's add those three buttons to WebPage1:

Text Field

The Text Field is where the user types the Task to add to the list.

After adding all the controls, your web page should now look like this:

Properties

What is a Property?

Controls have various values associated with them such as their caption, height, width and more. Because they help describe the control, they are called ''Properties''. Changing property values allows you to change the look and behavior of the object. For this project, let's change various properties of the webpage and the controls you added. Some of the things you need to do are:

Inspector

The Inspector is used to change web page 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).

Web Page Properties

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 of the web page:

ListBox Properties

The Listbox is where the tasks that your user enters are displayed and stored. You need to change the following properties: Name, ColumnCount, Initial Value, ColumnWidths and Locking.

Button Properties

The three buttons are used to perform actions. You need to change the following properties for each button: Name, Caption and Locking.

Delete Button

The Delete button is used to remove tasks from the TaskList.

Button

The Add button is used to add the task entered in the TextField to the Task List.

Complete Button

The Complete button is used to mark a task as completed.

In the Project List, the newly renamed controls show under the Controls for TaskManagerPage.

Text Field Properties

The TextField is where your user will type the task to add to the list. You need to change the following properties: Name and Locking.

Final Layout

After adjusting all the properties for the web page and its controls, your layout should look like this:

Running the App

Your user interface layout is now complete, so it’s time to try it out. But before you go further, you should first save your work.

Saving the Project


Now you can test your app:


Of course, Task Manager doesn’t do anything yet! For that you need to add some code, which is what you'll do next.

Adding Code

Add Button

The Add button adds tasks to the list. The code you add to the button needs to take what was typed in TaskField and add it as a new row to the list.

Follow these steps to add the code:

Complete Button

When the user clicks the Complete button, the selected task in the Listbox should be marked as completed. This is indicated by showing a checkmark (✓) in the Completed column.

Let's add code to the Complete button in the same way we added code for the Add button:

Delete Button

The Delete button is used to remove tasks from the list. The code you add to the button needs to determine the selected row in the list and remove it from the list.

Let's add code to the Delete button in the same way we added code for the Complete button:

Debugging

Finding Bugs is part of creating apps. A bug is when your code or app does something unexpected, often leading to a crash. Although your app works just fine, there are a couple of lingering bugs that need addressing. Have you figured out what the problem is?

Here’s a hint: What happens if you you click on the Complete or Delete buttons but have not selected a task? Try it.

The code to do this uses what you have already learned.

Finishing the App

Testing

Just because your app seems to work, doesn’t mean you are finished with it. A good developer always thoroughly tests their apps to look for possible problems.

You already found and fixed one problem (pressing the Completed or Delete button when no row was selected). Do you think there are other problems to fix? Run the app and play around with it a bit. Make a note of things you want to change. In the next section, you will add some improvements to Task Manager.

Improvements

Did you notice that there are times when the buttons in Task Manager probably should be disabled? For example, the Complete button should not mark a task as completed if one is not selected. Right now you can click it, but nothing happens. Also, you are not going to want to add a task to the list if nothing has been entered in the Taskfield.

There are several ways to accomplish this, but one way is to disable the buttons when they should not be used.

Follow these steps to add this improvement:

Notice that the Add button is initially disabled. But try typing some text in the TaskField. The Add button immediately become enabled. And if you remove the value from the TaskField, the buttons again become disabled. Similarly, when you click on a row in the Task List, the Delete and Complete buttons become enabled.

Deploying the App

There are several ways to deploy a Xojo web app. The easiest way is to use Xojo Cloud so that you can just click "Deploy" on the main toolbar to send your app to web server where it can be used.

You can also deploy apps yourself as a ''standalone application'' that is a self-contained app and web server which can be run on any computer or server. Users can access the app by using the computer's URL and port number.

To learn more about these options, refer to Web App Deployment Overview in the User Guide.

Next Steps

Congratulations, you have successfully completed the Web Tutorial and now have a fully functional app. To continue on your journey of learning Xojo, you should next move on to the User Guide, which covers Xojo in its entirety. You will also want to refer to the Reference Guide, which covers the specifics of language elements, classes and other details of Xojo.