Xojo Documentation 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 app's web pages 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 web app (a simple YouTube video player). 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.

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 Web app, so click on Web.
3. You should now see three fields that need values: Application Name, Company Name and Application Identifier.
   • Application Name is the name of your app. This will be the filename of the actual app 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 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 "YouTubePlayer" 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 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. 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 YouTube Player 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 plays a YouTube video using its video ID.

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 YouTubePlayer 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.

YouTubePlayer uses these controls:

• Text Field: A Text Field control is used to enter text. In this project, the YouTube video ID entered into a Text Field at the top of the window.
• Button: A Web Button is used to trigger an action. The user clicks the button to load the video specified by the ID into the YouTube player.
• YouTubeMovie: A YouTubeMovie control is used to show and play a YouTube video. In this project, it is what displays the video of the ID 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 Xojo running and WebPage1 open in the Layout Editor. Now you are ready to start adding controls to the web page. You will add a Text Field, Button and YouTube Movie.

1. Starting with the Text Field: In the Library, click on the Text Field and drag it to the top-left corner of the web page in the Layout Editor. As you get close to the edges of the page, you will see alignment indicators that help you position the control.
2. Next is the Button: In the Library, click on the Button and drag it to the top-right corner of the web page.
3. The final control is YouTube Movie: Drag the YouTube Movie control to the remaining empty area on the page.
4. The final step to do 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 web page 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 Web Page

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 web page editing area, click on the title bar of the web page to select it. The Inspector now shows the properties for the web page.
2. In the Name field (located in the ID group), change the name from “WebPage1” to “PlayerPage”. 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 “YouTube Player”. Press Return and you will see the name change in the title bar of the web page.

Setting the Properties for the Text Field

The Text Field is where your user will enter the location to display. You want to change the following properties: Name and Locking

1. On the Web Page, select the TextField1 control. The Inspector changes to show the Text Field properties.
2. In the Name field, change the name from “TextField1” to “IDField”. 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 web page size changes. In the Locking group look at the image that shows the web page 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 location. You need to change these properties: Name, Locking and Caption

1. On the Web Page, select the Button1 control. The Inspector changes to show the WebButton properties.
2. In the Name field, change the name from “Button1” to “LoadVideoButton”. 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 web page as the web page size changes. In the Locking group look at the image that shows the web page 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 “Untitled” to “Load Video”.

Setting the Properties for YouTube Movie

The last user interface change you need to make is for YouTube Movie. Here you need to change these properties: Name and Locking

1. On the Web Page, select the YouTubeMovie1 control. The Inspector changes to show the YouTubeMovie properties.
2. In the Name field, change the name from “YouTubeMovie1” to “YouTubePlayer”. 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 video player continues to fill the web page as its size changes. In the Locking group look at the image that shows the web page 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 application is almost complete. Now it is time to add the code that will tell the YouTubePlayer the location to display. Xojo uses an object-oriented programming language that is quite easy to learn. You need only four lines of code to finish your project!

The steps you need to do are:

1. Figure out when your user clicks the LoadVideoButton, called “Load Video” on the web page.
2. Get the ID that your user entered in IDField.
3. Have YouTubePlayer display the video.

Follow these steps to add the code:

1. On the web page, double-click the LoadVideoButton control, labelled “Load Video”. The Add Event Handler window appears. When a user clicks on a WebButton, the code in its Action event handler is run. This means you want to add your code to the Action event handler, so select Action from the Event Handler list and click OK.
   
   Notice the Navigator updates to show the Action event underneath the LoadVideoButton control and the Code Editor displays. This step solves your first problem of when to know when the user clicks on the LoadVideoButton.
2. Now you need to load the video and there are two parts to this:
   1. The video ID that the user typed is stored in a property of the Text Field class called Text. You access property values by specifying the name of the class, followed by a “.” and then the name of the property. In this case the Text Field is called IDField so you would access it using IDField.Text (don't type this into the code editor now -- you'll do that in the next step).
   2. You need a convert this ID into an actual YouTube video URL and tell the YouTubePlayer to load it. You can do that with this code that adds the ID to the URL to create an actual YouTube video URL:
      YouTubePlayer.URL = "https://www.youtube.com/watch?v=" + IDField.Text
      

That's it! Your first web application 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 “YouTubePlayer” and click Save.

Now you can test your finished app:

1. Click the Run button in the toolbar to run your project. The web app opens in the default web browser.
2. Enter a YouTube video ID. Here's a good one to try: BeW8O0GIwMo
3. Click the “Load Video” button.
4. You will see the video appear. Click the Play button on the video itself to play it.
5. When you are finished experimenting with YouTubePlayer app, you can close the browser (tab or window depending on how it launched) to return to Xojo.

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 GettingStarted:Web Tutorial and then explore the [Introduction to Programming with Xojo book.

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