Desktop QuickStart

2013 Release 1 Xojo, Inc.

Chapter 1

Introduction

Welcome to Xojo, the easiest way to create crossplatform desktop and web applications.

Section 1

About the Desktop QuickStart

STARTING XOJO 1. Download the installer for your operating system from: http://www.xojo.com/downloads. 2. Run the installer. 3. Run Xojo. 4. In the Project Chooser, select Desktop and click OK.

About the Desktop QuickStart

Welcome to Xojo, the easiest tool for creating cross-platform desktop and web applications. Xojo is made up of a rich set of graphical user interface objects, a modern object-oriented language, an integrated debugger, and a crossplatform compiler. Together they make up the Xojo Integrated Development Environment or IDE. With the IDE, you can build your applications interface simply by dragging and dropping interface objects into the applications 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 2013 by Xojo, Inc. All rights reserved. No part of this document or the related les may be reproduced or transmitted in any form,

by any means (electronic, photocopying, recording, or otherwise) without the prior written permission of the publisher. Trademarks Xojo is a trademark of Xojo, Inc. This book identies 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 attest 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.

Section 2

Presentation Conventions
The QuickStart uses screen snapshots taken from the Windows, OS X and Linux versions of Xojo. The interface design and feature set are identical on all platforms, so the differences between platforms are cosmetic and have to do with the differences between the Windows, OS X, and Linux graphical user interfaces. Bold type is used to emphasize the rst 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 Project. 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 modier; on OS X, the (Command) key is the modier. 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 release the modier key only after you press the shortcut key. Type each printed line on a separate line in the Code Editor. Dont try to t two or more printed lines into the same line or split a long line into two or more lines. Dont 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 rst 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. Something that you are supposed to type is quoted, such as GoButton. Some steps ask you to enter lines of code into the Code Editor. They appear in a shaded box:

ShowURL(SelectedURL.Text)

When you enter code, please observe these guidelines:

Section 3

Getting Started
Start Xojo If you havent done so already, now is the time to start Xojo. 1. Double-click the Xojo application icon to start Xojo. After it nishes loading, the Project Chooser window appears. Figure 1.1 Project Chooser Window 3. You should now see three elds to specify: Application Name, Company Name and Application Identier. Application Name is the name of your application. This will be the lename of the actual application le that gets created. Company Name is the name of your company. You may choose to leave this blank. Application Identier is a unique identier for this application. 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 Workspace), where you will begin designing your application.

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.

Section 4

Workspace
Overview
Xojo opens the Workspace with the default window for your application selected in the Navigator and displayed in the Layout Editor. Figure 1.2 The Xojo Workspace lected), 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 application. It shows the window and previews how it looks when the application 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 setting. Navigator: The area on the top left shows you all the items in your project. By default you can see Window1 (which is seNote: If the Library is not visible, click the Library button on the toolbar to show it. and choosing a different

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 eld to the right of the eld label.

Chapter 2

Simple Browser Application

Learn how to create a simple web browser application.

Section 1

Overview
About the Application
The best way to quickly learn how to use Xojo is to create an application. For this QuickStart, you will create a simple web browser. A Xojo application 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 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 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 Figure 2.1 The Completed Simple Web Browser Application the web site at the URL. The next sections walk you through creating the user interface and adding the necessary code to make the application work.

Section 2

Building the User Interface

Designing the Window
You should have Xojo running and Window1 open in the Layout Editor. If not, please refer to the Preface, Sections 3 and 4. Now you are ready to start adding controls to the window. 1. Starting with Text Field: In the Library, click on the Text Field icon and drag it to the topleft 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: Figure 2.2 Choosing a Text Field in the Library In the Library, click on the Default Button icon and drag it to the top-right corner of the window. 3. The nal control is the HTML Viewer: Drag the HTML Viewer icon to the remaining Figure 2.3 Choose HTMLViewer in the empty area on the page Library (you may have to scroll down through the controls to see it). Resize this control (using the selection handles so that it lls most of the window below the Text Field and Button). 4. The nal 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.
10

Your nished 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 allows 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 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 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 havent 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 eld (located in the ID group), change the name from Window1 to BrowserWindow. Press Return to see the name change in the Navigator. 3. In the Title eld (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. Figure 2.5 Window Inspector

13

Section 5

Text Field Properties

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 eld, 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 AddressField 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.
14

Click the locks so that top, left and right are locked and bottom is unlocked.

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 Inspector changes to show the Button properties. 2. In the Name eld, 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 bottom and right. Click the locks so that top and right are locked and left and bottom are unlocked.
15

4. Lastly, you want to give your button a caption. In the Caption eld (located in the Behavior group), change the caption from OK to Go.

Section 7

HTML Viewer Properties

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 eld, 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 ll the the window when it Figure 2.8 Locking for WebViewer 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.

16

Section 8

Adding Code
Code Editor
Your application 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 nish 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 application runs any code in its Action event handler. This step solves your rst problem of when to know when the user clicks on the GoButton. 2. 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 Notice the Navigator updates to show the Action event underneath the GoButton control and the Code Editor displays. This means you want to add your code to the Action event handler, so select Action from the Event Handler list and click OK. Figure 2.9 Add Event Handler Window

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 rst application is complete.

18

Section 9

Testing Simple Browser

WHATS NEXT? The QuickStart has introduced you to Xojo. Youve learned how to design a window, add controls, add code and then run your project. You should next work through the Tutorial and then explore the Guide and Language Reference to continue learning how to create great applications using Xojo.

Saving Your Project

You should save your work periodically and always before running your project. 1. Save the project by choosing File Save. 2. Name the project SimpleBrowser and click Save.

Running Your Project

Now you can test your nished 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 nished 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