Layout Editor

The Layout Editor has been enhanced with two settings that can adjust the layout.

The command bar has two toggle buttons. The first one already existed and it is for displaying the layout in portrait (the default) or landscape.

The new toggle button displays the layout in a phone size (the default) or a tablet size. When you switch between any of these toggles, the locking is applied to the controls on the layout.

The layout editor also remembers the selections so that the next time you visit the layout, it will be where you left it. Here you can see a landscape tablet layout:

Default Screen

The App Inspector has an additional Default Tablet Screen property. When your app is launched on a phone or tablet-sized device, the specified screen is what gets displayed.

You can also choose “None” for a default screen if you just want to share a single screen across both types of devices.

If you choose “None” for the Default Phone Screen, then the app won’t launch on a phone. If you choose “None” for a Default Tablet Screen, the app will launch on the tablet using the Default Phone Screen, which matches prior behavior.

Design Considerations

Xojo for Android uses locking to automatically adjust controls on the layout. Locking will work for certain types of layouts that you want to run on both phones and tablets, but may not be sufficient for more complex layouts. In these situations, you are better served by designing completely separate layouts for phone and tablet and then using the above Default Screen properties to show the correct one.

When you need to show additional screens, you can show the phone or tablet screen in code by checking the device using DeviceData.Orientation and DeviceData.UserInterfaceType.

If System.Device.UserInterfaceType = SystemDeviceData.UserInterfaceTypes.Tablet Then
  // Show tablet screen
  myTabletScreen.Show
Else
  // Show phone screen
  myPhoneScreen.Show
End If

When you have multiple screens, it often makes sense to put the UI in containers and then use the containers on the different screens.

You can run your apps on a Tablet emulator for testing (you can create one using Android Studio) or you can debug directly on device. I enabled on-device debugging for a Lenovo Tab M10 Plus 3rd Gen with these steps:

• Go to Settings.
• Select About tablet.
• Tap 7 times in a row on the build number. This enabled Developer options. You may be prompted to enter your PIN.
• Select System and then Developer Options.
• Turn on USB debugging and give it permission.

The tablet will now appear as a debug device in Xojo, allowing you to run your Android projects on it.

What about Chromebook?

Some Chromebooks are able to run Android apps and those that can are also able to run Xojo’s Android apps. Android apps can be installed via the Play Store (give CatsUp a try) or manually, although doing it manually is rather difficult (I have not yet gotten that working on my Chromebook). The Play Store options works well, however. Here’s CatsUp from the Play Store running on my Lenovo 300e Chromebook:

When run on the Chromebook, Android apps can have a size of Phone, Tablet or Resizable. You can see that as an option in the title bar of the above screenshot. For best results you probably want to design your apps for a landscape tablet.

Xojo for Android does not have direct support for Chromebook features at this time, but if there is something you’d like to see, be sure to create an Issue so that we can look into it.

Since Chromebooks are just (low-end) Linux machines at their core, they can technically run Xojo Linux apps (x86 or ARM depending on the Chromebook), but this usually requires some sort of additional Linux installation.

And of course, Chromebooks are typically meant to run web apps, which Xojo can also do quite well.

Eddie’s Electronics Example Project

The Android Eddie’s Electronics example project has been updated to run on both phones and tablets. It makes use of Containers to contain the UI and displays them using screens for the appropriate device type.

Here you can see the Customer screen for a tablet displays the list of customers on the left, with details and invoices on the right.

Compare that to the phone version which has you navigate between that information using separate screens.

Tablet supports opens up a whole other category of users for your Android apps and should be particularly useful to those making bespoke apps for clients.

Paul learned to program in BASIC at age 13 and has programmed in more languages than he remembers, with Xojo being an obvious favorite. When not working on Xojo, you can find him talking about retrocomputing at Goto 10 and on Mastodon @lefebvre@hachyderm.io.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

With just a few lines of code, you can create a mobile app that shows a new cat picture each time you launch it. I call this app “CatsUp!”. It’s a play on ketchup/catsup, get it?

Set Up The Project

Create a new iOS project called “CatsUp”. Drag an ImageViewer control onto Screen1, make it fill most of the area and change its Name to “CatImage”. Drag a Button to the bottom and change its Caption to “Cat Me!”. Also change the Screen Title to be “CatsUp!”. The result should look something like this:

The Cat API

The Cat API documentation page describes the full API. For access to most features you will want to sign up for a free account and use an API key. For the purposes of this post, I will just use it without an API key. The URL for the method to get a random cat picture is:

https://api.thecatapi.com/v1/images/search

The above URL returns JSON that contains the location of a picture to display. Paste it into a web browser to try it. In my test I got this JSON:

[{"breeds":[],"id":"99v","url":"https://cdn2.thecatapi.com/images/99v.jpg","width":384,"height":384}]

To make CatsUp, we will essentially add some code to 1) send the first request, 2) get the JSON and pull out the picture URL, 3) get the picture and display it.

Add Code

Add the Pressed event to the Button with this code:

CatConnection.Send("GET", "https://api.thecatapi.com/v1/images/search")

This calls the Send() method on a URLConnection object, called CatConnection, to get the JSON with the picture URL.

So now you need to drag a URLConnection object from the Library onto the Screen. Click on this newly added URLConnection1 item in the Tray and in the Inspector change its name to “CatConnection”. Add its ContentReceived event with this code:

Var json As JSONItem = New JSONItem
json.Load(content)

Var catItem As JSONItem
catItem = json.ValueAt(0)

Var picURL As String
picURL = catItem.Value("url").StringValue

ImageDownload.Send("GET", picURL)

The above code loads the JSON into a JSONItem and then fetches the “url” value. It sends this URL to another URLConnection, called ImageDownload, to get the actual picture to display.

Drag a second URLConnection onto the screen and change its name to “ImageDownload”. Add its ContentReceived event with this code:

Var pic As Picture = Picture.FromData(content)
CatImage.Image = pic

Try running the project in the iOS Simulator. Click the button to see a new cat picture.

This is what I see:

Oops, silly me. I actually created this as an Android project and ran it in the Android Emulator. Sorry about that, here is what it looks like as an iOS project running in the iOS Simulator:

That’s right, the exact same code for this project can be used in both iOS and Android projects! And for another bit of Android news, this CatsUp! app, with a couple minor enhancements, is now available in the Google Play Store:

Have fun with this and may every day be a Caturday!

Recently they just announced a web services API for accessing their articles and other information. And as I’ve talked about in other posts and webinars, it’s often quite easy to use web services with Xojo apps.

I’ll show you how you can quickly create an iOS app that shows the most recent TDWTF posts and then displays them when you tap on their title.

To start, create a Xojo iOS project.

On the default View (View1), use the Inspector to set a couple properties:

• BackButtonTitle: Articles
• Title: The Daily WTF

Now drag a Table from the Library onto the View and stretch it to fit the entire layout area. Name the table ArticleTable. This Table will be used to display the list of recent articles.

To get the articles, you just have to make the appropriate API call. Looking at the API docs, there is an API command called /articles/recent which returns a JSON document of the recent articles and related information. This is the actual API call. To see its JSON results, use a tool like Paw (now with Xojo extensions) or RESTy with this URL (a browser will also show the unformatted JSON):

http://thedailywtf.com/api/articles/recent

If you look at the JSON results, you’ll see that it returns an array of articles with a “Title” entry containing the title of the article and a “Url” entry containing the URL of the article.

To call this in the Xojo app, I’ll use an HTTPSocket. In the Library, drag the item called “Generic Object” onto the Layout. It will appear in the Shelf at the bottom. In its Inspector, change the name to WTFSocket and set its super to “Xojo.Net.HTTPSocket”.

Now add an event handler to the socket, right->click on the socket, select “Add To” and then “Event Handler”. Add the PageReceived event handler. In it, put this code to request the articles:

// Convert the binary Content data to JSON text and then
// parse it to an array.
Dim jsonText As Text = TextEncoding.UTF8.ConvertDataToText(Content)
Dim jsonArray() As Auto = Data.ParseJSON(jsonText)

// Loop through the array and add each article to
// the table.
ArticleTable.AddSection("")
For i As Integer = 0 To jsonArray.Ubound
  Dim article As Dictionary = jsonArray(i)

  Dim cell As iOSTableCellData = ArticleTable.CreateCell
  cell.Text = article.Value("Title")
  cell.Tag = article.Value("Url")

  Dim author As Dictionary = article.Value("Author")
  cell.DetailText = article.Value("DisplayDate") + " by " + author.Value("Name")
  ArticleTable.AddRow(0, cell)
Next

The URL is being put into the Tag for the cell so that it can be used later to display the article when its row is tapped.

You’ll also see I’m also accessing the “DisplayDate” value and grabbing the “Name” from the “Author” object in the JSON.

Now you’ll want to call the web service. Add the Open event handler to the View with this code:

// Call the /articles/recent web service
WTFSocket.Send("GET", "http://thedailywtf.com/api/articles/recent")

Run the project and you’ll see the list of recent article appear:

The final step is to display the article when it is tapped in the list. You’ll want another View to display the article (Insert->View). Name the view ArticleView. On this View, set the NavigationBarVisible property to ON and drag an HTML Viewer onto it. Make the HTML Viewer fill the entire View layout and name it ArticleViewer.

Add a method to ArticleView called ShowArticle(url As Text) with this code:

ArticleViewer.LoadURL(url)

This method loads the URL into the HTML Viewer and is called when its row is tapped in the list of articles.

Speaking of which, back on View1 add the Action event handler to the table with this code:

// Get the URL from the tag for the tapped row
Dim url As Text = Me.RowData(section, row).Tag

// Display the article on the new view and show it
Dim v As New ArticleView
v.ShowArticle(url)
PushTo(v)

Now run the project. You’ll see the list of article as before. Tap on an article to show the new view with the article.

Take a look at the full API to see what other cool features you can add to the app. Here are some suggestions:

• Display a random article
• Display more than the last 8 recent articles
• Cache the article contents on the device and use the cache when the article is displayed again
• Display articles by month/year

Slack has an API called “slash commands” that lets a user type a slash (/) followed by a command name in order to perform a special action. For example, Slack has many built-in slash commands, one example is /help. Here’s how you can easily add your own slash commands using a Xojo web app and the HandleSpecialURL (or HandleURL) method.

Your slash command makes an HTTP request to your Xojo web service app. The web services does its thing and then returns the result back to Slack to display.

A Xojo Web Service

For demonstration, I’m going to show you how to create a Slackbot that returns a “cat fact”. The slash command will be /catfact. When you use the /catfact command, Slack calls a Xojo web service which then makes a call to the Cat Fact API, parses the resulting JSON and returns an interesting cat fact back to Slack to display in your channel.

As I’ve covered in a couple Web Services webinars last year, it is pretty easy to make a web service using Xojo. For this example, create a new web project and name it CatFact.

First you will create a simple method that will fetch a Cat Fact. Create a method on the App object, GetCatFact As String, with this code:

// New request came in, so create a new HTTPSocket
Dim catSocket As New HTTPSocket

// Get a cat fact and wait for it to be returned
Dim factData As String = catSocket.Get("http://catfacts-api.appspot.com/api/facts?number=1", 30)

// Once the cat fact is returned, parse the JSON and send it to the original requester.
Dim jsonText As Text = DefineEncoding(factData, Encodings.UTF8).ToText
Dim jsonDict As Xojo.Core.Dictionary = Xojo.Data.ParseJSON(jsonText)
Dim facts() As Auto = jsonDict.Value("facts")

// Extract the fact text from the JSON
Dim fact As Text
If facts.Ubound >= 0 Then
  fact = facts(0)
End If

Return fact

In this Xojo project you’ll now create a simple web page UI to test that calling the Cat Fact API works. On the default page (WebPage1), add a Button and a TextField. In the Button’s Action event handler, add this code:

CatFactArea.Text = App.GetCatFact

Run the web app and on click the button. You should see a cat fact appear in the Text Area. The fact I got was:

The cat has 500 skeletal muscles (humans have 650).

Now you can add the code to process the web service request. Add the HandleSpecialURL event to the App object and use this code:

If Request.Path = "CatFact" Then
  Request.Print(GetCatFact)
  Return True
End If

You can test this by running the web project and then in a new tab entering the API URL, which displays a cat fact in the browser:

http://127.0.0.1:8080/api/CatFact

Hook Up Web Service to Slack

Now that you know the web service works, the next step is to hook it up to Slack. But before you can do that, you have to host the web app somewhere on the Internet; Slack can’t see your local web app! For this example, I’ve published the Cat Fact web service to Xojo Cloud because it’s fast and easy. This is the URL to the Cat Fact web service on Xojo Cloud:

http://demos.xojo.com/CatFacts/index.cgi/api/CatFact

Now you need to go to your Slack team settings to add a slash command. On that screen you’ll want to set the name of the Command to “/catfact” and the URL to “http://demos.xojo.com/CatFacts/index.cgi/api/CatFact” (the URL from above). Also change the Customize Name field to “CatFact”. You can ignore all the other fields and click the Save Integration button at the bottom.

That’s it. The slash command is now active. Head on over to your Slack team and type /catfact into a channel. You’ll get back a fact from “CatFact”.

And it took less than 20 lines of code! You can now use this technique to integrate your own web services into Slack.

By default, only you will see the cat fact returned by the Slashbot; it is not broadcast to the entire channel. You can change this by returning specifically formatted JSON rather than just a text string (as described on the Slack Commands API page).

If you come up with a great slash command and want to make it available to the world, you can attach it to a Slack app and publish it to the App Directory. The steps for this are also in the Slash Commands API page.

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)

When preparing materials for the HTTPSocket webinar I came across The Cat API. This wonderful site provides a REST (web services) API that sends you random cat pictures. What a perfect way to demonstrate HTTPSocket!

With just a few lines of code, I’m going to show you how to create an iPhone app that will show you a new cat picture each time you launch it. I call this app “Cats Up”.

Set up the iOS Project

Launch Xojo and create a new iOS project called “CatsUp”. Drag an ImageView control onto the View and make it fill most of the area. Drag a Button to the View and place it at the bottom with the title “Cats Up!”. The result should look like this:

View the Cat API

The Cat API documentation page describes the full API, but this project only needs to use the get method to get you “all the fancy cat images you can handle”. The URL for this method is:

http://thecatapi.com/api/images/get

Add Code

It is time to add a tiny amount of code. First, you need to create an HTTPSocket subclass.

1. Click the Insert button on the toolbar and select Class. Name the class CatCloud.
2. Set the class Super to “Xojo.Net.HTTPSocket”.
3. Add a method to the class called GetCat with this code:

Try
  Self.Send("GET","http://thecatapi.com/api/images/get")
Catch t As UnsupportedOperationException
  Return
End Try

Now select your view (View1) and drag the CatCloud class onto it. This adds it to the Shelf at the bottom on the layout editor. It will automatically be named CatCloud1.

Double-click CatCloud1 to add the PageReceived event handler and add this code:

Dim catPic As iOSImage 
catPic = iOSImage.FromData(content)
ImageView1.Image = catPic

Next double-click the button to add the Action event handler and add this code:

CatCloud1.GetCat

Lastly, add an Open event handler to the View and add this code:

CatCloud1.GetCat

Test

Run your project to launch it in the iOS Simulator. An initial cat picture should appear. Click the “Cats Up!” to show a new picture.

May the cat be with you.

• Download the iOS project

March 2022 UPDATE: Get Cats Up! for Android in the Google Play Store!