This iOS Tutorial is an introduction to the Xojo development environment and will lead you through the development of a real iOS app. It should take you 30 to 45 minutes to complete this tutorial. We’ll walk you through building a Task Manager app from start to finish. If you are new to programming and to Xojo, we recommend you first complete the iOS QuickStart.
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, you need to run it one time to accept its License Agreement. After doing that, you can quit Xcode and will never have to use it again as Xojo will automatically launch the iOS Simulator for you. If you have not yet downloaded and installed Xcode, do that now before continuing with the tutorial.
Launch Xojo. After it finishes loading, the Project Chooser window appears. If Xojo is already running, choose File > New Project.
Xojo lets you build several different types of apps (Desktop, Web, Console and iOS).
For this Tutorial, you are building an iOS app, so click on iOS.
You should now see three fields that need values: Application Name, Company Name and Application Identifier.
Application Name: the name of your app. This will be the filename of the actual app file that gets created.
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.
TaskManageras the Application Name.
Click OK to open the main Xojo window (called the Workspace) where you will begin designing your app.
Xojo opens the Workspace with the default View 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 Screen1 (which is selected), the App object, the iPhone and iPad Layout objects and items for the App Icon and optional Launch Screen. 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 Screens in your app. It shows the Screen and previews how it looks when the app runs on an iOS device. In this image, the Screen 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 Screen or to the project. You design the Screen by dragging controls from the Library to the Screen layout. You can also add a control to the Screen 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 image is the Inspector, which allows you to see and change the properties for the selected control. This area of the Workspace 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.
About the app
In this tutorial you will create an app to manage tasks. Not surprisingly it is called Task Manager. When finished, the app will let you add tasks, mark them as completed (and unmark them if it turns out they are not) and delete them.
For the Task manager app, you enter tasks in the text field and tap Add to add them to the table. You can tap on individual tasks in the table to delete them or mark them as complete.
Task Manager uses these controls:
A TextField control is used to enter text. In this project, the task to add is entered into an TextField at the top of the Screen.
A Button is used to trigger an action. This project uses a Button to add a task to the table.
A Table is used to display a list of data. In this project, it is what displays the tasks entered in the TextField.
Designing the user interface
Xojo is displaying Screen1 open in the Layout Editor. You are now going to add the controls to the Screen and position them.
Adding a text field
The TextField is where the user types the Task to add to the list.
In the Library, click on TextField and drag it to the Screen so that it is at the top left just below the Navigation Bar. As you drag you will notice alignment guides that will help you align the TextField with the Button as pictured below.
Grab the right handle of the TextField and drag it to make the control wider until you reach the button’s left alignment guide.
Adding a table
The Table displays the tasks.
In the Library, click on the Table and drag it to the center of the Layout Editor below the Button and TextField. As you drag the Table onto the Screen, you will see alignment indicators that help you position the control. Drop the Table when you are happy with its position on the Screen.
Grab the bottom handle of the Table and drag it downward to make it taller. Stop dragging when the bottom edge is right up against the bottom of the Screen:
What is a property?
A property is a value of a class. Changing property values allows you to change the behavior of the object. For this project, you want to change various properties for the Screen and the controls you added. Some of the things you need to do are:
Rename all controls (and the Screen) so that they describe their behavior and are easy to refer to in code.
Add a Caption to the Button.
Add a hint to the TextField to help the user know what to enter.
Using the 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.
In order to show the Inspector, click the Inspector button on the toolbar or press ⌘-I on macOS or Ctrl-I on Windows and Linux.
Changing screen properties
You need to change the Name and Title properties of Screen1:
In the Layout Editor click anywhere on the background (or phone UI) to select the Screen (rather than a control). The Inspector now shows the properties of the Screen.
Change the Name property from
TaskManagerScreen. Press Return to see the name change in the Navigator.
Change the Title property from
Task Manager. Press Return to see the name change in the Navigation Bar of the screen.
Changing textfield properties
The TextField is where the user types the task to add to the Table. You’ll be changing the Name, Text and Hint properties.
Click on the TextField to select it so that its properties are displayed in the Inspector.
Change the Name property from
TaskField. Press Return to see the name change in the Navigator.
Untitledin the Text property so that the property is blank.
Change the Hint property to
Enter a task.
To make it easier for the user to type, switch on the Allow Spell Checking and Allow Auto Correction properties.
Changing table properties
The table displays the tasks and will also show a check mark next to ones marked as completed. Let’s change the Name property to something that is more descriptive.
Click on the table to select it and display its properties in the Inspector.
Change the Name property from
TaskTable. Press Return to see the name change in the Navigator.
In the Auto-Layout section of the Inspector, look at the first row. The Edge column has the value Bottom. The Rule column should have the value BottomLayoutGuide.Bottom. If it doesn’t, resize the Table control using its bottom handle until that value changes to BottomLayoutGuide.Bottom. This will ensure that the bottom of the table is locked to the bottom of the layout.
Running the app
Your user interface layout is now complete, so it’s time to try it out. But before you go further, you should first save your work.
Save the project by selecting File > Save.
This means select Save from the File menu and is the standard way choosing menu items are notated in the Xojo documentation.
Name the project
iOSTaskManagerand click Save.
To test the app you use the iOS Simulator. To get the iOS Simulator from Apple you’ll have to first download, install and run Xcode once so it installs its components. You do not need to keep Xcode running or otherwise use it when developing with Xojo. To learn more about Xcode and the iOS Simulator, refer to the Installing Xcode and Apple Certificates and iOS Simulator topics.
If the iOS Simulator window is quite small the first time you run your app, in the iOS Simulator choose Physical from the Window menu. That will permanently resolve the issue.
Now you can test your app:
Click the Run button in the toolbar to run the project. This builds your app and runs it in the iOS Simulator.
When your app appears in the iOS Simulator, you can interact with the buttons by clicking on them or you can type in the TextField.
When you are finished, switch back to Xojo and click the Stop button.
Of course, Task Manager doesn’t do anything yet! For that you need to add some code, which is what you’ll do next.
If you want to change the type of iOS device that the iOS Simulator runs your project in, choose Project > Run On then choose another iOS device from the list. You can even run directly on your iPhone or iPad by plugging it into your Mac.
To complete the Task Manager, you will need to:
Make the Add Button add a task.
Make the Add Button only be enabled after the user has entered text into the TaskField.
Allow the user to swipe left to mark a task as completed.
Allow the user to swipe left to delete a row.
Allowing row editing
In the Navigator, click on the TaskManagerScreen to select it.
In the Inspector, click the Choose… button next to Interfaces.
In the Interfaces dialog box, click the checkbox for iOSMobileTableDataSourceEditing.
Click OK to add the interface to the TaskManagerScreen.
Add the following code:
Returning True in this method tells the TaskTable that the user can edit rows.
Deploying your app
There are several ways to deploy a Xojo iOS app. You can build your app with Xojo and manually copy it to an iOS device using Xcode. Or you can build your app with Xojo and submit it to the App Store. Both of these options require you to create certificates, IDs and distributions profiles with Apple and use Xcode to install them. You can find more information here:
Congratulations, you have successfully completed the iOS Tutorial and now have a fully functional app. You learned a lot in this tutorial. You may be wondering how you’ll remember it all. The good news is that you don’t have to remember it. Xojo comes with documentation that will help you every step of the way. The User’s Guide will give you a general overview of the different parts of Xojo and of all the various controls and things you can use in your projects. The Language Reference will give you the all the details specific controls. After you feel you’ve reviewed enough of the documentation, choose a small project to build that will benefit you or others. The best way to learn is to have a reason to learn. A small project will provide that. When you need extra help, contact us at email@example.com or go to our helpful community forum.