Desktop QuickStart

Welcome to Xojo! Xojo is made up of a rich set of graphical user interface objects, the modern object-oriented Xojo programming language, an integrated debugger, and a multi-platform compiler. Together they make up the Xojo Integrated Development Environment or IDE. You'll use the IDE to build your app's interface by dragging and dropping interface objects onto the apps's windows and dialogs, then you'll add your code to each of these objects.

This QuickStart is for people who are new to Xojo. It will give you an introduction to the Xojo development environment and lead you through the development of a working desktop web browser app. It may take you up to 15 minutes to complete this QuickStart.

Getting started

Launch Xojo.

  1. Double-click the Xojo app icon to start Xojo. After it finishes loading, the Project Chooser window appears.

../../_images/simplebrowserdesktopchooser.png

  1. You are building a Desktop app, if it's not already selected, click on Desktop.

The dialog has three fields:

  • Application Name: the name of your app.

  • Company Name: the name of your company.

  • Application Identifier: 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.

  1. Enter your company name, your own name or leave it blank.

  2. Enter SimpleBrowser as the Application Name.

  3. Click OK.

IDE workspace

The Workspace is the main window in Xojo where you design your app.

../../_images/desktop_ide_parts2.png

  • Navigator: Shows all the items in your project like windows, menus, pictures, sounds and more. Click on items in this list to edit them.

  • Layout Editor: Use this to create layouts for windows and dialog boxes. It's blank now because you haven't added any controls to it yet.

  • Library: Shows all the controls and other widgets you can drag to your layout to create your user interface.

Making a browser app

In this Desktop QuickStart, you will create a simple web browser. 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 app uses these 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).

../../_images/inspector_-_library1.jpg

Building the user interface

Window1 is open in the Layout Editor. Let's start adding controls.

  1. 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 alignment indicators that help you position the control.

  2. In the Library, click on the Default Button icon and drag it to the top-right corner of the window.

  3. Drag the HTML Viewer icon to the remaining empty area on the page (you may have to scroll down through the controls to see it).

  4. Resize the HTML Viewer control (using the selection handles so that it fills most of the window below the Text Field and Button).

  5. Resize the Text Field by clicking 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 window layout should look like this:

../../_images/simple_browser_initial_layout1.png

Setting the properties

A property describes something about an object such as a window or button. Changing property values allows you to change the look or behavior of that object.

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.

Setting the properties for the window

  1. Display the Inspector by clicking the Inspector button on the toolbar or press ⌘-I if you're on macOS or Ctrl+I on Windows and Linux.

You need to change the Name and Title properties:

  1. 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 Window1 to BrowserWindow. Press RETURN to see the name change in the Navigator.

../../_images/window_name1.png

  1. In the Title field (located in the Frame group), change the name from Untitled to Web Browser.

../../_images/window_title1.png

Setting the properties for the text field

The Text Field is where your user enters the URL they want to see in the browser.

  1. On the window, select the TextField control. The Inspector changes to show the Text Field properties.

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

../../_images/textfield_name1.png

  1. Now make changes to the locking so that the Text Field gets larger or smaller as the window resizes. Click the locks so that top, left and right are locked and bottom is unlocked.

../../_images/locking_properties1.png

Setting the properties for the button

Your users click the button to display the web page.

  1. On the window, select the Button1 control. The Inspector changes to show the Button properties.

  2. In the Name field, change the name from Button1 to GoButton.

../../_images/button_name1.png

  1. 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. Click the locks so that top and right are locked and left and bottom are unlocked.

../../_images/button_locking1.png

  1. Give your button a caption. In the Caption field (located in the Appearance group), change the caption from OK to Go.

../../_images/button_caption1.png

Setting the properties for the HTML viewer

The last user interface change you need to make is for the HTML Viewer.

  1. On the window, select the HTMLViewer1 control. The Inspector changes to show the HTML Viewer properties.

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

../../_images/htmlviewer_name1.png

  1. Finally, you need to make changes to the locking so that the HTML Viewer continues to fill the window when it is resized. Click the locks so that top, bottom, left and right are locked.

../../_images/htmlviewer_locking1.png

Adding code

Your app is almost complete. Now it is time to add the code that will tell the HTML Viewer which web page to display.

  1. On the window, double-click the Button control, that you named Go. The Add Event Handler window appears. When a user presses a Button, your app runs the code in its Pressed event handler.

  2. Make sure Pressed is selected in the Event Handler list and click OK.

  3. Notice the Navigator updates to show the Pressed event underneath the GoButton control and the Code Editor displays.

  4. Go ahead and add this code to the Code Editor. If you don't see the cursor flashing in the Code Editor (the text editing area in the middle of the window), click in that area below the Pressed() event name and then type this code: (It's good practice to type it rather than copy and pasting it)

WebViewer.LoadURL(AddressField.Text)

What does this code do? The URL that a user will type into the Text Field is stored in its Text property, AddressField.Text. Then we want our code to display the web page in the WebViewer, which is done by calling the LoadURL method and sending it to the URL that the user typed.

That's it! Your first app is complete.

Saving your project

You should save your work periodically and always before running your project. To do so:

  1. Save the project by choosing File > Save.

  2. Click Save.

Running the app

Now you can test your finished app:

  1. Click the Run button in the toolbar to run your project. The app opens in its own window.

  2. Type a URL of your choice, remembering to start with https://.

  3. Click the OK button. Your webpage appears.

  4. Try resizing the window to make it bigger so you can see more of the page. Notice the controls resize or move when you do this.

  5. Try another URL. This time, enter https://showcase.xojo.com.

  6. You will see the web page with the Xojo Showcase.

  7. When you are finished experimenting with the Simple Browser app, you can close the window to return to Xojo. On macOS, choose SimpleBrowser.debug > Quit to Quit the app.

../../_images/completed_desktop_quickstart_app1.png

Next steps

This QuickStart has introduced you to Xojo and you've learned how to make your first app by designing a window, adding controls and writing code. A good next step is the Desktop Tutorial. Then explore the Topics and API sections of the documentation to continue learning how to create great apps using Xojo.