iOS QuickStart

This iOS QuickStart will give you an introduction to the Xojo development environment and lead you through the development of a working iOS app, a simple web browser. It should take you 15 minutes or less to complete this.

../../_images/iphone1.png

iOS development requirements

A Mac is required to develop iOS projects with Xojo. To run/test/debug an iOS project you create in Xojo requires the iOS Simulator which is provided with Apple's Xcode development tool. You can download Xcode for free from the Mac App Store. After you have downloaded and installed Xcode, run it one time to accept its License Agreement. After that, quit Xcode. If you have not yet downloaded and installed Xcode, do that now before continuing with the QuickStart.

Shortcuts

We've provided a video of the QuickStart, in case you'd rather watch than go through the steps yourself.

You can download the finished Xojo project as well if you'd prefer.

Getting started

  1. Launch Xojo. After it finishes loading, the Project Chooser window appears.

../../_images/new_project_chooser1.png

You see three fields that need values:

  • Application Name will be the filename of the actual app file that you create.

  • Company Name is the name of your company. You may choose to leave this blank.

  • Application Identifier is a unique identifier for this app.

  1. Enter SimpleBrowser as the Application Name.

  2. Click OK to open the Workspace, the main Xojo window, where you will begin designing your app.

Workspace

The Workspace opens with the default screen.

../../_images/ide_for_docs_ios1.png

Making the simple browser app

Overview

A Xojo app consists of a collection of objects, called classes. Nearly everything in Xojo is a class, including screens and controls. In the SimpleBrowser project, you use the default Screen class to create your screen and you add controls (user interface classes) to the screen to create the design.

The app 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 screen.

  • Button: A Button is used to trigger an action. The user presses the button to load the web page at the URL into the HTML Viewer.

  • HTML Viewer: An HTML Viewer is used to display a web page.

Building the user interface

With Screen1 open in the Layout Editor, you are ready to start adding controls to the screen.

  1. In the Library, click on the Text Field icon and drag it to the top-left corner of the screen in the Layout Editor. As you get close to the edges of the screen, you will see alignment indicators that help you position the control.

../../_images/drag_first_control_to_layout1.png

  1. In the Library, click on the Button icon and drag it to the top-right corner of the screen.

../../_images/drag_second_control_to_layout1.png

  1. Drag the HTML Viewer icon to the remaining empty area on the screen. Resize this control (using the selection handles so that it fills most of the screen below the Text Field and Button).

../../_images/drag_third_control_to_layout1.png

  1. 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 screen layout should look like this:

../../_images/finished_layout1.png

Setting the properties

A property is a value of a class. Changing property values allows you to change the behavior of the class.

Inspector

The Inspector is used to change screen and control properties. It shares the same area on the right of the Workspace as the Library.

Setting the properties for the screen

  1. In order to show the Inspector, click the Inspector button on the toolbar or press ⌘-I (Ctrl-I on Windows and Linux).

../../_images/inspector_browserscreen1.png

  1. In the Layout Editor, click on the iPhone screen (not on any control) to select it. The Inspector now shows the properties for the screen.

  2. In the Name field (located in the ID group), change the name from Screen1 to BrowserScreen. Press RETURN to see the name change in the Navigator.

  3. In the Title field, change the name to SimpleBrowser.

Setting the properties for the text field

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

../../_images/urlfield_inspector1.png

  1. In the Navigator, select the TextField1 control on BrowserScreen. The Inspector changes to show the Text Field properties.

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

  3. In the InputType field, select URL from the popup menu. This displays the special URL keyboard on the iOS device when the user taps in the field.

  4. In the Text field, change the text from Untitled to https://www.wikipedia.org.

Setting the properties for the button

When running the app, pressing the button displays the web page.

../../_images/ios_quickstart_buttonios1.png

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

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

  3. Give your button a caption by changing the Caption field from Button to Show.

Setting the properties for the HTML viewer

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

../../_images/inspector_webviewer1.png

  1. On BrowserScreen, 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.

Adding code

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

Follow these steps to add the code:

  1. On BrowserScreen, double-click the ShowButton control. It's labelled "Show".

../../_images/add_event_handler_dialog1.png

  1. The Add Event Handler window appears. Event Handlers occur when the user initiates an action. In this case, when a user presses on a Button, your app runs any code in its Pressed event handler. Select Pressed from the Event Handler list and click OK. Notice the Navigator updates to show the Pressed event underneath the ShowButton control and the Code Editor displays.

  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. Then you want to have the WebViewer display the web page. This is done by calling the LoadURL method of the HTML Viewer control and sending it the URL that the user typed. So, you need to 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(URLField.Text)

That's it! Your first app is complete.

Saving your work

Before you go any further, save your work:

  1. Save the project by choosing File > Save As.

  2. Click Save.

Running your project

  1. In order to run an iOS project, you first need to download and install Xcode in order to get the iOS Simulator app that is used to run iOS apps on a Mac. You can download Xcode for free from the Mac App Store. After you have downloaded and installed Xcode, you need to run it one time to accept its License Agreement. After doing this, you can quit Xcode as you will not need it.

  2. Click the Run button in Xojo to run the app in the iOS Simulator. By default the Simulator chooses the smallest device. You can choose other simulated devices (or even an actual device if you have it plugged in to your Mac) by choosing Project > Run On, then choosing a device from the menu.

  3. Type a (secure, https) URL of your choice (or use the default) and click the Show button.

  4. You will see the web page.

  5. When you are finished experimenting with the Simple Browser app, you can quit the iOS Simulator to return to Xojo.1.

What's next

This QuickStart has introduced you to Xojo and showed you how to make a simple app. Next, try this iOS Tutorial that walks you through building a Task Manager app.

For more details, view the Topics and API sections of the documentation.