It’s time again for Hour of Code! The Hour of Code is a global movement reaching tens of millions of students in 180+ countries. Anyone, anywhere can participate in Hour of Code, from ages 4 to 104. At Xojo, we are again participating in this wonderful way to help people learn to program.
Catsup
In this tutorial, you’ll learn how to create an iOS app that displays random cat pictures, which I call “Catsup”. Meow!
To get started, you’ll need the following:
- A Mac with OS X 10.7 or later. Creating iOS apps requires OS X.
- Xojo (the free version works for this tutorial)
- Xcode (for the iOS Simulator, which is part of the installation)
Download and install Xojo and then download and install Xcode from the App Store. After Xcode is installed, you’ll need to run it once to accept its license agreement and allow it to finish the installation. After that you can quit Xcode; you will not need it again.
Start Xojo and in the Project Chooser window that appears click on iOS and in the Application Name field, enter the name for you app (“CatsUp”) and click OK.
This displays the Xojo main Workspace where you will create your app. In the Workspace, View1 is selected by default. This is where you will design the layout (aka user interface or UI) for you app. You do this using simple drag and drop. You’ll drag controls from the Library area on the right onto the layout area in the center.
Since this is your first app, it is pretty simple. You’ll only need two controls: an ImageView and a Button.
First, find the ImageView in the Library (on the right) and drag it onto the View in the center. Place the ImageView near the top of the area and resize it so that it uses about 3/4 of the space. It should look something like this:
Now you can drag a button from the Library onto the layout. Place the button near the bottom of the layout and center it. Your layout should now look like this:
Now you need to clean up the layout a bit to prepare for writing code later. When writing code, it is helpful to have descriptive names for things so that your code makes more sense when you read it. The ImageView and the Button you added to the layout were just given default names of ImageView1 and Button1, which is not all that descriptive and certainly doesn’t make their purpose clear. So you should rename them.
Click on the ImageView in the layout and then in the toolbar at the top of the window, click the Inspector button. This displays the “properties” for the ImageView on the right side in what is called the Inspector. A property is a specific detail about something. For example, a property of the sky is that it is blue. As you can see, an ImageVIew has several property values that you can change. The first one to change is the “Name” property.
Click in the field next to Name and change its text from “ImageView” to something more descriptive, such as “CatImage”. Since you are making property changes with the Inspector, this is also a good time to change another property to make the pictures display better. Change the ContentMode property (using the dropdown) from “ScaleToFill” to “ScaleAspectFill”. What is the difference you ask? ScaleToFill just enlarges (or shrinks) the picture so that it uses all the space in the ImageView. But this can result is weird stretching of cat pictures, making cats appear fatter or skinnier. Of course, maybe you might prefer that! With “ScaleAspectFill”, the picture will be enlarged or shrunk as necessary to fit the space in the ImageView, but the proportions of the picture will remain the same. This might the picture might not use all the available space, but it will look the way it is supposed to, without scary resizing.
The Properties for the ImageView should now look like this:
Now click on the Button to change its properties. You will not be referring to the Button in code, so you don’t have to change its name, but I like to change it anyway to better describe its purpose. This may be a simple project, but it is a good habit to get into doing and is especially important when projects get more sophisticated.
Change the name of the Button from “Button1” to “ShowCatPictureButton”. You might also have noticed that the button Caption says “Untitled”. That is not helpful. How will the user know what happens when they click it? So you also need to change the Caption property text from “Untitled” to something like “Show a Cat”.
The Properties for the Button should now look like this:
Even though you haven’t yet written any code, you have already created an app. Sure, the app doesn’t technically do anything, but you can at least run it to take at look at how your user interface (UI) looks in the iOS Simulator. To do so, click the big “Run” button on the toolbar at the top of the window. This creates your app and runs it on the iOS Simulator. It should look like this:
That’s not all that interesting, so now it is time to start adding some code to actually get cat pictures and display them!
Your app will get pictures from the Internet using a web site called TheCatAPI. This website gives you a different cat picture each time you call it. The process for your app will be to call the web site (using a special URL for accessing its “web service”) when the button is clicked and then display the picture using the CatImage control after it is received.
Xojo uses an object-oriented programming language, which means that you create things (aka objects) to contain information or perform actions. In order to get a cat picture from the Internet, you need an object that can connect to the Internet and receive information as needed. In Xojo, this is called an HttpSocket.
HttpSocket is a class that is built-in to Xojo. A class is essentially an object definition. With this information, you can now add an object to your view and tell it to use HttpSocket as it definition.
But before you proceed here is a public service announcement: Now is a good time to make sure you save your project. Just like when writing a document in a word processor, you should always save your work often so that you don’t lose changes in case something bad happens, such as a power failure or an system crash. In the File menu, select Save As and save your project somewhere on the computer, such as the Desktop or Documents folder.
Back in Xojo, you’ll want to click the Library button on the toolbar to show the list of Library controls. You’ll want to drag the “Generic Object” control from the Library onto the layout area of the view. Since a Generic Object is not an actual UI control, it will not appear within the View, but will instead appear at the bottom (the Shelf).
Now click on Generic Object and then click the Inspector button on the toolbar to show its properties. You need to give it a better name and tell it to use the HttpSocket class. Change the Name property to “CatConnector” since this object will be responsible for connecting to the Internet to get cat pictures.
Change the Super property to “Xojo.Net.HttpSocket”. This tells the the object that it is based on the HttpSocket, which exposes the capabilities to connect to the Internet and receive information.
(Now is a good time to save your project.)
It time to add the first bit of code that displays the picture that was received. Right-click on the CatConnector object in the Shelf and select “Add to CatConnector” in the menu, from the submenu select “Event Handler”. This displays the Event Handler window.
In addition to being object-oriented, Xojo is event-based. Events are actions that occur when something happens in your app, such as the user tapping on the UI or data being received from the Internet.
In the list of event handlers, you want to click the PageReceived and then click the OK button to add the event handler to the CatConnector. The PageReceived event handler is what is called when the picture is received from the web site.
If you look back at the CatConnector in the Navigator on the left, you’ll now see that “PageReceived” is displayed below it. This is where you will put the code to display the picture.
Click on “PageReceived” to display the Code Editor where you can enter this code:
Dim catPic As iOSImage = iOSImage.FromData(Content) CatImage.Image = catPic ShowCatPictureButton.Enabled = True
This code converts the data received by the CatConnector to an Image, then tells the CatImage control to display it and enables the button so you can request another picture.
Speaking of the button, the last bit of code to add is to actually request a cat picture from the web site, which is what the button is for. Double-click on the button to display the Add Event Handler window. The Action event handler is what gets called when the button is tapped, so click on that and then click the OK button.
This adds an Action event handler to ShowCatPictureButton. Click on the Action event in the Navigator on the left.
This displays the code editor where you can add this code to request a cat picture:
CatConnector.Send("GET", "http://thecatapi.com/api/images/get")
Me.Enabled = False
The CatConnector.Send line of code is requesting a cat picture from the web site. The second line of code disables the button so that you cannot request another picture until the first one is received.
That is it for code. Now is a great time to save your project.
And now you can Run it. The finished app will display a new cat picture each time you click the button.
Here is the completed project: Catsup
Now that you’ve created your first, fun app, it’s time for you to try to modify it a bit on your own.
Here are some additional things you can add to Catsup:
- Easy: Increase the size of the Button text and maybe change its font and color.
- Play around with different values for the Button properties to change its color, font and size. Be sure to click the “Gear” button on the Inspector to see additional properties.
- Medium: Play a “Meow!” sound when a new picture is displayed.
- Find a “Meow” MP3 sound on the Internet and drag it in the Navigator (on the left) of you project.
- Use the name of the sound in the project followed by “.Play” to play the sound when the picture is displayed.
- Harder: Save the picture to the Camera Roll.
- Store the picture in a property when it is received. Refer to Properties in the Xojo User Guide.
- Add a Save button to the Navigation Bar. Refer to Toolbars in the Xojo User Guide for tips.
- When the Save button is pressed, save the picture to the Camera Roll. Refer to Toolbars in the Xojo User Guide to determine when the button was pressed.
- You’ll need to call the Apple iOS library to save to the Camera Roll with this code:
Declare Sub UIImageWriteToSavedPhotosAlbum Lib "UIKit" ( _ img As Ptr, target As Ptr, sel As Ptr, info As Ptr) UIImageWriteToSavedPhotosAlbum(CatImageProperty.Handle, _ Nil, Nil, Nil)