Quick Start Desktop

7/29/2019 Quick Start Desktop

1/20

Desktop

QuickStart

2013 Release 1 Xojo, Inc.


2/20

Chapter 1

Introduction

Welcome to Xojo, the easiest way to create cross-platform desktop and web applications.


3/20

About the Desktop QuickStartWelcome 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 cross-

platform 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 files may be reproduced or transmitted in any form,

Section 1

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

2
http://www.xojo.com/downloadshttp://www.xojo.com/downloads


4/20

by any means (electronic, photocopying, recording, or other-

wise) without the prior written permission of the publisher.

Trademarks

Xojo is a trademark of Xojo, Inc.

This book identifies 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 at-

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

3


5/20

The QuickStart uses screen snapshots taken from the Windows,OS X and Linux versions of Xojo. The interface design and fea-

ture set are identical on all platforms, so the differences between

platforms are cosmetic and have to do with the differences be-

tween the Windows, OS X, and Linux graphical user interfaces.

Bold type is used to emphasize the first 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 Pro-

ject. 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 modifier; on OS X, the (Command)

key is the modifier. 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 re-

lease the modifier key only after you press the shortcut key.

Something that you are supposed to type is quoted, such asGoButton.

Some steps ask you to enter lines of code into the Code Edi-

tor. They appear in a shaded box:

ShowURL(SelectedURL.Text)

When you enter code, please observe these guidelines:

Type each printed line on a separate line in the Code Editor.

Dont try to fit 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 first 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.

Section 2

Presentation Conventions

4


6/20

Start XojoIf you havent done so already, now is the time to start Xojo.

1. Double-click the Xojo application icon to start Xojo. After it

finishes loading, the Project Chooser window appears.

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.

3. You should now see three fields to specify: ApplicationName, Company Name and Application Identifier.

Application Name is the name of your application. This

will be the filename of the actual application 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 applica-

tion. 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 Work-

space), where you will begin designing your application.

Section 3

Getting Started

5

Figure 1.1


7/20

OverviewXojo opens the Workspace with the default window for your

application 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 se-

lected), the App object and the MainMenuBar object. You usethe 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 win-

dow is blank because you haven't yet added any user inter-

face 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 differentsetting.

Note: If the Library is not visible, click the Library button on

the toolbar to show it.

Section 4

Workspace

6

Figure 1.2


8/20

Inspector: Not shown in the above illustration is the Inspector,

which allows you to see and change the properties for the se-

lected 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 ofthe 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.

7


9/20

Chapter 2

Simple

BrowserApplication

Learn how to create a simple web browserapplication.


10/20

About the ApplicationThe 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 col-

lection of objects, called classes.

Nearly everything in Xojo is a class,

including your windows and its con-trols. In the SimpleBrowser project,

you use the default Window class to

create your window and you add con-

trols (user interface classes) to the

window to create the design.

The application uses three controls:

Text Field: A Text Field control isused to enter text. In this project,

the URL to display is typed into a

Text Field at the top of the win-

dow.

Button: A Button is used to trigger an action. The userclicks 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 pro-

ject, 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 application

work.

Section 1

Overview

9

Figure 2.1


11/20

Designing the WindowYou 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 top-

left corner of the window in the

Layout Editor.

As you get close to the edges of

the window, you will see align-

ment indicators that help you po-

sition the control.

2. Next is the Button:

In the Library, click on the Default Button icon and drag itto 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 con-

trols to see it).

Resize this control (using the selec-

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

Section 2

Building the User Interface

10

Figure 2.2

Figure 2.3


12/20

Your finished window layout should look like this:

11

Figure 2.4


13/20

What is a Property?A property is a value of a class. Changing property values al-

lows 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 de-

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

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

Section 3

Properties

12


14/20

If you havent already, display the Inspector by clicking the In-spector 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 Win-

dow1 to BrowserWindow. Press Re-

turnto see the name change in the

Navigator.

3. In the Title field (located in the Frame

group), change the name from Unti-

tled to Web Browser. Press Return

and you will see the name change in

the title bar of the window.

Section 4

Window Properties

13

Figure 2.5


15/20

The Text Field is where your user enters the URL they want tosee in the browser. You want to change the following proper-

ties: Name and Locking

1. On the window, select the TextField1 control. The Inspec-

tor changes to show the Text Field properties.

2. In the Name field, change the name from TextField1 to

AddressField. Press Returnto 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

resizes.

In the Locking group

look at the image thatshows 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 bot-tom is unlocked.

Section 5

Text Field Properties

14

Figure 2.6


16/20

Your users click the button to display the web page. You needto change these properties: Name, Locking and Caption.

1. On the window, select the PushButton1 control. The In-

spector changes to show the Button properties.

2. In the Name field, change the name from PushButton1 to

GoButton. Press Returnto 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

when it is resized.

In the Locking group look at

the image that shows the

window with small lockedicons for the top and left and

small unlocked icons for bot-

tom 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 Cap-tion field (located in the Behavior group), change the cap-

tion from OK to Go.

Section 6

Button Properties

15

Figure 2.7


17/20

The last user interface change you need to make is for theHTML Viewer. Here you need to change these properties:

Name and Locking

1. On the window, select the HTMLViewer1 control. The In-

spector changes to show the HTML Viewer properties.

2. In the Name field, change the name from HTMLViewer1

to WebViewer. Press Returnto see the name change in

the Navigator.

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 thewindow with small locked

icons for the top and left and

small unlocked icons for bot-

tom and right.

Click the locks so that top, bottom, left and right arelocked.

Section 7

HTML Viewer Properties

16

Figure 2.8


18/20

Code EditorYour application is almost complete. Now it is time to add the

code that will tell the HTML Viewer which web page to dis-

play. 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, la-belled Go.

The Add Event Handler window appears. When a user

clicks on a Button, your application runs any code in its Ac-

tion event handler.

This means you wantto add your code to

the Action event han-

dler, so select Action

from the Event Han-

dler list and click OK.

Notice the Navigator

updates to show theAction event under-

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

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

Section 8

Adding Code

17

Figure 2.9


19/20

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 nameand then type this code (do type it rather than copy and

pasting it):

WebViewer.LoadURL(AddressField.Text)

That's it! Your first application is complete.

18


20/20

Saving Your ProjectYou should save your work periodically and always before running your pro-

ject.

1. Save the project by choosing File Save.

2. Name the project SimpleBrowser and click Save.

Running Your Project

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

Section 9

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.

Testing Simple Browser

19
http://www.wikipedia.org/http://www.wikipedia.org/

Quick Start Desktop

Documents

Transcript of Quick Start Desktop