Introducing the Xojo IDE for Linux ARM64

With the release of Xojo 2025r1, however, everything has changed. Now, for the first time, developers can run the Xojo IDE directly on their Raspberry Pi 64-bit device. This means you can write, build, and test your applications all from within the same environment. The seamless integration allows for faster iteration and a smoother workflow, giving you more control over your development process. Not only can you now run the Xojo IDE on a Pi, but also on any Linux ARM64 distro.

What is Supported?

Nearly all the features you love about working in the Xojo IDE on other platforms are now available with the Linux ARM64 IDE, with the exception of building macOS and Mobile (Android/iOS) apps. Instead of remotely debugging your Raspberry Pi app using the Xojo IDE on Windows, you can now remotely debug your Windows app using the Xojo IDE on Pi!

For best results, we recommend a Raspberry Pi 5 or 500 with 8GB of RAM.

Xojo Loves Pi!

With the Xojo IDE now available for Linux ARM64, we’re making our case as the go-to solution for Raspberry Pi developers. The simplicity, cross-platform support, and power makes Xojo an attractive choice for those looking to build apps on the Pi, without the complexity of traditional programming environments.

NOTE: You can build Linux apps with Xojo for free, no license required. Just select Linux in Build Settings, then choose ARM or x86 architecture in the Inspector.

William Yu grew up in Canada learning to program BASIC on a Vic-20. He is Xojo’s resident Windows and Linux engineer, among his many other skills. Some may say he has joined the dark side here in the USA, but he will always be a Canadian at heart.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

I’ve had the pleasure of working with Tim multiple times over nearly 10 years now. Tim is one of those people who makes a community, he’s a connector, bringing people into a group and highlighting common ground for the benefit of us all. It’s not hard to find out what Tim is doing these days, you can read all about it on his blog, watch his videos and webinars and read his Xojo interview series in xDev Magazine. In this month’s Spotlight On feature, Tim answers questions about his latest, and biggest, project and his ongoing success using Xojo.

Mac, Windows or Linux?

All three.

I do all of my work on a MacBook Pro. That’s where I’m running the Xojo IDE, doing testing, and so on. But I’m developing apps that also run on Windows and Linux, too. When I’m developing a Windows app, I usually do my initial testing using a Windows VM running in Parallels. Over the past few years, the amount of Linux projects that I work on has increased significantly. I’m developing a lot of console apps that run on Linux.

Here’s something that I discovered about a year ago, and that your readers might find interesting. Xojo apps that are compiled for Linux (Linux x86 64-bit in particular) will run on servers that are running Oracle’s “Oracle Linux Server” operating system. Oracle’s cloud (which they call “Oracle Cloud Infrastructure” or “OCI” for short) run that version of Linux, which is similar to Fedora. A lot of companies that are running on NetSuite (which Oracle owns) are “all in” with OCI. So the fact that Xojo apps can be compiled to run on OCI servers is a pretty big deal. I think there’s a lot of opportunity for Xojo developers to meet the demand for custom software coming from companies that are in investing in OCI.

What do you wish more people would ask/talk to you about regarding programming?

I have a pretty popular blog, and I do get a lot of technical questions from readers. Occasionally, I get questions like “How can I break into the NetSuite space?” What they’re really asking about are strategies for finding opportunities, technical things that they should learn about, and so on.

But it’s the non-technical things that they don’t ask about that I think are really important. For example, learning about business in general. Learning about accounting. And if they’re looking to “go solo,” learning how to build authority, stay organized, and so on.

How would you explain your most recent project to a new developer?

One of the biggest challenges that companies face when they’re switching from one business system to another is migrating data between the two systems. Some companies think that this is the final step before “going live” with the new system – and it certainly is.

But the reality is that they’ll likely need to do this data migration several times, especially as they test the new system. In some cases, they’ll run the two systems in parallel and compare the results of the two systems, to make sure the new system is being implemented correctly.

I’m currently working on a very large, very complicated NetSuite implementation, and we ran into this need. Using Xojo, I developed an app called the “Data Bridge” which we’re using to sync data between their current system (which was developed using Progress – https://progress.com) and their NetSuite instance. It takes data that was exported from Progress as pipe-delimited files, parses and validates the data, and then makes API calls to push the data into NetSuite. This is helping us test NetSuite more thoroughly, using current, real data, so that there will be no surprises when we do go live.

What’s next on your “Learn Next” list?

For the longest time, I’ve felt that AI – and especially generative AI – is overhyped. So I mostly ignored it. Now that the excitement has settled down a bit, I’ve started to look at AI in a serious way. NetSuite recently made some generative AI APIs available to developers, so I’ve been experimenting with those. One of the projects that I’m currently working on involves developing a Xojo-based mobile app that integrates with NetSuite, leveraging the data stored in NetSuite as well as its AI functionality.

What is something that has surprised you about coding in the last 10 years?

I think that like a lot of developers that have been working professionally for awhile, I was surprised by the popularity of Javascript, and how widespread it’s used, especially for developing backend Web apps. The other thing that has surprised me is the increasing number of developers that really don’t want to write code. There seem to be a lot of people that pursue careers in software development simply because they think it’s a way to “make big money.” One of the things that
I love about the Xojo community is that most of the Xojo developers that I’ve talked to seem to find joy in writing code. (You can also see this on the Forum, too.)

Xojo isn’t the only tool in your kit. What is a piece of software more people should know about?

There are a couple of other development tools that I use and recommend, and that I encourage other Xojo developers to check out.

One is DataGrip by JetBrains, which I started using about a year ago. DataGrip is a cross- platform database tool that supports a very wide range of relational databases. I use it often in my NetSuite work, especially when I need to explore the schema of the Oracle database that a NetSuite instance is powered by.

Another tool that I recommend is RapidAPI (which was formerly known as “Paw”). I’ve been using RapidAPI since it was first released, and it’s my API tool of choice. There’s another API tool called “Postman”that is certainly much more popular, but I really prefer RapidAPI. It seems to me to be much more Mac-like.

One more tool that I want to mention – and this one is brand new – is called “Framous.” Framous makes it easy to add device frames around screenshots. So you can take a screenshot of an app – such as one running on your Mac or in a simulator – and then drop the screenshot into a device frame – such as a Mac or iPhone. It’s great for creating images to be used for marketing purposes. The app is available on the Mac App Store.

When did you start using Xojo?

I started using Xojo in August of 2015 – nearly 10 years ago!

How did you find Xojo?

Hal Gumbert encouraged me to check out Xojo, and I’m so glad that he did. At the time, we were both FileMaker developers. I had grown frustrated with the FileMaker platform and was looking for a new development tool to work with.

What did you first build with Xojo?

When I first started working with Xojo, I was interested in developing iOS apps – and Xojo’s support for the iOS framework had just been released. So the timing was perfect. In fact, then first Xojo license that I purchased was only for iOS. There were two iOS apps that I immediately developed with Xojo. One integrated with FileMaker and the other integrated with Airtable. (At the time, I was serving as Airtable’s “Developer Evangelist.”)

What do you build with it now? 

I now use Xojo to develop all kinds of apps – desktop, mobile, Web, and console apps – and for all of the platforms that Xojo supports too (macOS, Windows, Linux, iOS, and Android). When I first started using Xojo, I never would have guessed that someday I’d be developing so many different types of apps.

It surprises me that out of all of the types of apps that I develop with Xojo, these days it’s Linux console apps that I’m developing the most. These apps are primarily used to automate processes involving NetSuite, such as batch file processors, webhook listeners and senders, and more. So essentially I’m using Xojo – and console apps especially – to extend NetSuite’s capabilities.

What is something you worked on recently that you want to talk about?

I mentioned a few of my current projects earlier, but two of the more interesting projects that I’m working on are Suite.js (a JavaScript runtime that’s designed to make NetSuite integration easy) and SuiteBrowser (a Web browser designed specifically for use with NetSuite). Both of those projects might sound like crazy ideas. I mean, what kind of crazy person develops their own web browser?!? But I can tell you, based on the level of interest in them from the NetSuite community, that there’s a genuine need for both of them.

Do you earn a living with Xojo? 

Absolutely. So much of my work these days – including my NetSuite work – involves Xojo. I honestly don’t know what I’d do without it.

Also, I want to give a shout out to Christian Schmitz and MonkeyBread Software. His Xojo plug-ins have enabled me to work on Xojo projects that I never would have dreamed of working on, including projects that utilize things like MQTT, Phidgets, and more.

Do you use it for your hobbies? 

Yes, I do. My main hobby these days is developing apps that run on Raspberry Pi’s, and of course, I’m using Xojo to create them. As a side note, I recently purchased my fifth Raspberry Pi – a Raspberry Pi 500 – and I love working with it. It reminds me what it was like to use Macs and PCs “back in the day.”

What’s your biggest Xojo success?

Out of all of the apps that I’ve developed with Xojo, the one that I use every day is called SuiteTransmit. SuiteTransmit is a desktop app that monitors the files that I’m working on, detects changes to them, and automatically uploads them to NetSuite. It allows me to develop NetSuite “SuiteScript” apps using my preferred IDE (BBEdit). This simple app, which, thanks to Xojo, took only a few hours to develop, has saved me a lot of time. SuiteTransmit is one of my “secret weapons,” and I don’t think I could have, or would have ever even attempted to develop it, without Xojo.

But my biggest “Xojo success” doesn’t involve any one particular app that I’ve developed with it. Over the years, I’ve blogged about my Xojo work, and been a guest on several Xojo webinars. Last summer, a company that was looking for help implementing NetSuite stumbled upon my NetSuite / Xojo work, liked what they saw, and reached out to me for help. They’re now my biggest client, and the biggest client I’ve had throughout my entire career. And I owe that to Xojo.

Thank you to Tim Dietrich for answering questions and sharing his Xojo experience with the community. Learn more about Tim on his blog, find him on LinkedIn and read his interviews in xDev Magazine.

If you have an app, a project or a person you want to see featured in Spotlight On, tell us about it!

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

And what do we mean by the transitory character of Popover windows? Well, and here comes one of the first differences from Modal windows. When a Popover is visible and the user clicks or taps on any other element of the graphical interface not contained in the Popover itself it will close, hence transitory. So, you don’t have to include the typical “Close window” button in a Popover (though you can), since it will close when the user clicks outside of it, i.e. when the Popover loses focus.

Where are the Popover Window Contents?

Where do you define the content displayed in a Popover window? While in your Web app, you can do it on any Container control added to the project. In the case of Desktop and iOS apps, you can do it on either the designs of a Container Control or any Window or Screen added to the project.

For example, here you can see that the content shown as a Popover in the previous screenshot is actually that of a Window (Window2) added to the project:

This introduces additional flexibility allowing your app’s logic to decide when to display a Window or Container instance as you have been doing until now, or display it as a Popover.

Showing a Popover

Displaying a Popover is very straightforward, whether it is created from a Container or a Window, the method is the same:

DesktopContainer.ShowPopover(parentControl As DesktopUIControl, facing As DesktopWindow.DisplaySides = DesktopWindow.DisplaySides.Bottom, detachable As Boolean = True)

The explanation of the expected parameters is as follows:

• ParentControl: The control that will act as the parent, or on which the Popover will be pointing to.
• Facing: The direction in which the Popover will point on the parent control; by default it will appear under the parent control, but you can use any of the values available in the DesktopWindow.DisplaySides enumerator (or the iOS equivalent).
• Detachable: This value only applies to macOS Popovers, since said operating system has the ability for the user to “detach” the Popover from the parent control as long as this value is defined as True. To detach, drag the Popover with the mouse cursor.

Let’s say we have a window called Window2 and a button called MyButton. In the Pressed event of MyButton we can use the following lines of code to display Window2 as a Popover:

Var w As New Window2
w.ShowPopover(me)

And that’s all!

Platform Differences

In the previous section we already pointed out the first: macOS is the only operating system that acts on the value indicated in the Detachable parameter. But there are some other considerations to keep in mind so you don’t get caught off guard:

• Beyond the limits. Although in Windows and macOS Popovers can exceed the limits of the window on which the parent control is located, the position of the popover in Linux is restricted to the limits of the window that contains the parent control. This is the same for iOS and for Web pages.
• iPhone and iPad. When a Popover is displayed on an iPhone, it will look like a modal window; while if the same application is run on an iPad, the appearance will be the typical one expected from Popovers: the window pointing to the parent control in the indicated direction.
• On the Web. The contents of a Popover are those defined in a Container control, while on the rest of the platforms you can use both Container controls and Windows / Screens.

Why the Popover doesn’t “point” in the configured direction?

By default it will try to do so according to the value that has been set in the “facing” parameter, but if it does not find enough space on the margins of the screen, then it will be displayed on the next side of the parent control in which there is available space for display the Popover in its full width and height; This is true on macOS, Linux, Web and iOS.

Can I reuse a Popover?

No, You can not. Whether you use a Container control or a window as the source of the UI design to be displayed by the Popover, do not lose sight of the fact that the Popover is just another type of window; and therefore behaves as such. That is, once it is closed either because it has lost focus or because you have closed it explicitly through code invoking the Close method, all the displayed controls and the rest of the internal structures will be closed / invalidated, so that although the instance If a Popover is not Nil (because, for example, you keep a reference to the window or container instance used as the UI source), you will not be able to invoke the ShowPopover method again on said instance but you will have to create a new instance of the Container/ Window used as the source of the UI to be displayed by the Popover.

How can I communicate with the UI elements contained in the Popover?

You would do so just as you would do with any other type of window that you have been using so far in your Xojo projects.

Conclusion

Without a doubt, Popovers are a new way to improve the design of your apps’ user interfaces, providing a more direct relationship between the user interface elements displayed in the Popover and the “parent” control in charge of displaying it. Furthermore, since you can use any window or container you want as the source of the UI to be displayed by the Popover, you will have greater flexibility about when you want to display them in a Popover or display them using any other of the available window types or, in the case of Containers, embedding them as part of other UI elements at runtime.

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

If you’re encountering display anomalies with the DesktopHTMLViewer on a Pi 5 running Bookworm OS, rest assured you’re not alone. This issue stems from the version of WebKitGTK the DesktopHTMLViewer relies on. While efforts to address this persist, a viable workaround exists: disabling hardware acceleration when utilizing WebKitGTK. Fortunately, in Xojo, we’ve facilitated this by exposing an environment variable. You can conveniently set this variable before the creation of the DesktopHTMLViewer, such as within your App.Opening event.

To turn hardware acceleration OFF, you can assign that to the WEBKIT_HARDWARE_ACCELERATION environment variable:

System.EnvironmentVariable("WEBKIT_HARDWARE_ACCELERATION") = "OFF"

By default, hardware acceleration is enabled/disabled as requested by web contents, but you can also force hardware acceleration to be enabled even for websites not requesting it:

System.EnvironmentVariable("WEBKIT_HARDWARE_ACCELERATION") = "ON"

To revert it to its default state, simply assign any value other than ON/OFF. While we remain optimistic that this issue will be resolved at some point, in the interim, this environment variable stands ready to function as a temporary solution.

William Yu grew up in Canada learning to program BASIC on a Vic-20. He is Xojo’s resident Windows and Linux engineer, among his many other skills. Some may say he has joined the dark side here in the USA, but he will always be a Canadian at heart.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Just as with Xojo’s WebChart, DesktopChart and MobileChart offer the following chart types: Line, Bar, Pie, Doughnut, PolarArea, Scatter, Bubble and Radar. You can access these charts using the Inspector Panel or via code through the Mode property. You can even change the Mode (or chart type) at runtime on Desktop and Mobile.

Line and Bar types are similar; both display sets of data that have been set to Line or Bar Modes. Display as many data sets as you need in your DesktopChart or MobileChart by setting the Mode to Line or Bar. The only difference is how these will be displayed along the x axis.

To better understand, let’s write some code in the Opening Event Handler of a DesktopChart control added to a Desktop project:

Var labels() As String
Var firstSetOfData() As Double
Var secondSetOfData() As Double
Var thirdSetOfData() As Double

For n As Integer = 0 To 9
  labels.add "LB"+n.ToString
  firstSetOfData.add System.Random.InRange(0,1000)
  secondSetOfData.add System.Random.InRange(0,1000)
  thirdSetOfData.add System.Random.InRange(0,1000)
Next

Me.mode = DesktopChart.Modes.Line
Me.Title = "Chart Example With Two Datasets"
Me.AddLabels labels

Var DS1 As New ChartLinearDataset("DS1", Color.Blue, True, firstSetOfData)
DS1.ChartType = ChartLinearDataset.ChartTypes.Line

Var DS2 As New ChartLinearDataset("DS2", Color.Red, True, secondSetOfData)
DS2.ChartType = ChartLinearDataset.ChartTypes.Bar

Var DS3 As New ChartLinearDataset("DS2", Color.Green, True, thirdSetOfData)
DS3.ChartType = ChartLinearDataset.ChartTypes.Bar

Me.AddDatasets DS1, DS2, DS3

This is how it will look when the Chart has been set to Line, displaying three data sets: one of which has been set to Line and the other two to Bar:

As you can see, when the ChartType is Line, the data sets that are set to Line start drawing at the origin of the X axis, where the labels are also drawn for each column of data. This also happens when drawing data sets whose ChartType is set to Bar; thus, the first bar on the first column has half the width.

Below shows the same data sets but the ChartType is Bar. Now the Bar data sets overlay the position for the labels drawn along the X axis (they are centered on each column), and also have full the width. However, because of that, the data set whose ChartType is set to Line starts drawing at half the width of the column.

You can add as many new data sets as you want, remove them, update their values, color, etc. The chart will update to reflect the changes, including the minimum and maximum values displayed in the Y axis. Keep in mind, if a chart’s Mode has been set to Line or Bar it will only display data sets created as ChartLinearDataset (by default they are set to the Line ChartType). WebChart will behave the same, starting with Xojo 2023r1.

One difference to note when using ChartLinearDataset is that you can set the Transparency property ranging from 0 (fully opaque) to 100 (fully transparent), as well as the CornerSize when the ChartLinearDataset ChartType is set to Bar.

ChartDataset and Chart Modes

I already showed you that a chart set to Line or Bar only displays data sets created from the ChartLinearDataset class. A similar rule applies when the chart is set to other Modes. For example, Pie, Doughnut, PolarArea or Radar charts only display data sets created from the ChartCircularDataset class.

• In the same vein, Scatter and Bubble charts only display data sets created from the ChartScatteredDataset class.

DesktopChart and MobileChart, additional Properties

DesktopChart and MobileChart offer additional customisation properties. For example, you can set the font, font size and font color for the title, legend, labels and values on the Y axis.

When setting the maximum font size used for the drawing of the Y axis values based on the chart control instance size (height), if the height of the control is not enough to display the values at the specified font size, it automatically adjusts.

Other properties to further customize the look of the chart include BackgroundColor and GridColor.

Tip: You may want to set the color to Color.Clear if you want your charts to be drawn or “visible”, like if you plan to layout the chart control on top of other UI controls.

In addition, you can control whether or not to display that popup that shows the underlying value as the user moves the cursor (or while dragging their finger, on iOS). This is done through the AllowPopover property (True, by default).

Set the background and text color in the Popover using the PopoverBackgroundColor and PopoverTextColor properties. These expect a ColorGroup instance, so they can adjust when the control is in Light or Dark Mode.

Getting informed

As you may expect from their WebChart counterpart, DesktopChart and MobileChart offer a Pressed event handler to receive the index and dataset instance over which the user clicked/tapped.

Because the chart control can handle different ChartDatasets you’ll probably want to cast the received ChartDataset instance received in the Pressed handler to the right one before proceeding with any actions that are not common to all kind of ChartDatasets.

Draw it!

You can call the DrawInto method on a chart, provide the expected graphic context and also the left and top values to proceed with the drawing. For example, this is what a DesktopChart looks like when drawn on a Picture of the same size:

It is also possible to render the chart to PDF in a vectorial way using the AddChart method on a PDFDocument instance. The parameters this method expects are the chart instance itself, the X and Y values (where it will be placed in the current PDF page), and the width and height values for the rendering.

For example, this code will create a PDF file in the Desktop with the same height value of the chart instance, with the width set to the width of the page, minus the margins:

Var d As New PDFDocument
Var g As Graphics = d.Graphics
d.AddChart(chart1, 20, 20, g.Width-40, chart1.Height )
d.Save(SpecialFolder.Desktop.Child("ChartPDF.PDF"))

In summary

As you can see, now it is possible to add Graphical Charts to your Desktop and iOS projects with the same ease and in the same way it is already possible on web projects, plus some more customization options. Watch a quick video on this topic. No license is required to learn, develop and test your projects in the latest Xojo release! Download Xojo 2023r1 today!

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

This technique is strongly based in the NiceLabels algorithm that can be found in StackOverflow ported to several programming languages, so… why not to Xojo too? In fact, it was a piece of cake porting it from JavaScript to Xojo due to the similarities of both languages,

Of course, if you just want to jump into the class itself, you can download the project from this link.

Let’s start creating the class itself. I’ve named it NiceScale with all the required properties. To begin, add a new Class to a Xojo project. Then, with the class selected in the Navigator, add the following properties:

• MaxPoint As Double, setting the Scope to Protected
• MinPoint As Double, setting the Scope to Protected
• Spacing As Double, setting the Scope to Public
• NiceMaximum As Double, setting the Scope to Public
• NiceMinimum As Double

Next, add the methods starting with the Constructor.

• Method Name: Constructor
• Parameters: min As Double, max As Double
• Scope: Public

And type the following snippet of code in the associated Code Editor:

If Min = Max Then Max = Min + 1

Self.MinPoint = Min(Min, Max)
Self.MaxPoint = Max(Max, Min)
Self.Calculate

As you can see here, the Constructor calls the Calculate method; so let’s add that one:

• Method Name: Calculate
• Scope: Protected

And type this code in the associated Code Editor:

Var range As Double

range = niceNum(MaxPoint - MinPoint, False)

Spacing = niceNum(range / 9, True)

NiceMinimum = Floor(MinPoint / Spacing) * Spacing
NiceMaximum = Ceiling(MaxPoint / Spacing) * Spacing

Once again, this method is calling the NiceNum method, so let’s add that one to the
NiceScale class:

• Method Name: NiceNum
• Parameters: range As Double, round As Boolean
• Return Type: Double
• Scope: Protected

And type the following snippet in the associated Code Editor:

Var exponent As Double
Var fraction As Double
Var niceFraction As Double

exponent = Floor(Log(range) / Log(10))
fraction = range / Pow(10, exponent)

If (round) Then
  If (fraction < 1.5) Then
    niceFraction = 1
  ElseIf (fraction < 3) Then
    niceFraction = 2
  ElseIf (fraction < 7) Then
    niceFraction = 5
  Else
    niceFraction = 10
  End If
Else
  If (fraction <= 1) Then
    niceFraction = 1
  ElseIf (fraction <= 2) Then
    niceFraction = 2
  ElseIf (fraction <= 5) Then
    niceFraction = 5
  Else
    niceFraction = 10
  End If
End If

Return niceFraction * Pow(10, exponent)

Lastly, let’s add a couple of useful methods for the class: GetValues and SetMinMaxPoints. The first one will let us get the Array of the already equally spaced Double values, while the second one will let us set a new pair of minimum and maximum values without needing to create a new instance of the class:

• Method Name: GetValues
• Return Type: Double()
• Scope: Public

Typing the following snippet in the associated Code Editor:

Var values() As Double

For n As Double = Self._NiceMinimum To Self._NiceMaximum Step Self._mSpacing
  values.add n
Next

If values(0) > 0 Then
  While values(0) <> 0
    values.AddAt(0, values(0) - Self._mSpacing)
  Wend
End If

Return values

• Method Name: SetMinMaxPoints
• Parameters: min As Double, max As Double
• Scope: Public

And type these lines of code in the associated Code Editor:

If Min = Max Then Max = Min + 1

MinPoint = Min(Min, Max)
MaxPoint = Max(Max, Min)
Calculate

NiceScale in Practice

Let’s create the UI for a Desktop project so we can put our NiceScale class in practice; and because we are going to need some custom drawing, drag a Canvas from the Library to the project Navigator. That will create a canvas subclass. With the just added Canvas subclass selected in the Navigator use the associated Inspector Panel to set the following values:

• Name: ScaleDrawing

Then, add the following property to it:

• Name: range
• Type: NiceScale
• Scope: Private

Add a new Method to our ScaleDrawing subclass using the following values:

• Method Name: Constructor

And typing these lines of code in the associated Code Editor:

Super.Constructor
Self.range = New NiceScale(0, 1)

Then, add a second method using the following values:

• Method Name: Redraw
• Parameters: minValue As Double, maxValue As Double

And typing these two lines of code in the associated Code Editor:

range.SetMinMaxPoints(minValue, maxValue)

Self.Refresh

After that, let’s do the drawing itself! So we need to add the Paint event to our ScaleDrawing class. When done, add the following lines of code to the associated Code Editor:

g.DrawRectangle(0, 0, g.Width, g.Height)

Var values() As Double = range.GetValues
Var offset As Double = (( g.Width ) / values.LastIndex) - 10
Var x As Double = 20
Var y As Double = g.Height / 2 - 5
Var tx As Double
Var Val As Double

For n As Integer = 0 To values.LastIndex
  Val = values(n)

  g.DrawLine( x, y, x, y + 10 )

  tx = x - g.TextWidth(values(n).ToString) / 2

  g.DrawText(values(n).ToString, tx, y + 10 + g.FontAscent)

  x = x + offset
Next

g.DrawLine(20, y, x - offset, y)

Creating the NiceScale Example UI

Select the Window1 window in the Navigator so it is displayed in the Layout Editor. Next drag the ScaleDrawing class from the Navigator and drop it into the Layout Editor so it looks like like this (locking the four locks for ScaleDrawing1 in the Inspector Panel):

Next, add a couple of Labels, two TextFields and a Button below ScaleDrawing1 in the Layout Editor so our final UI looks like this:

Rename Label1 as MinimumLabel, Label2 as MaximumLabel, TextField1 as MinimumTF, TextField2 as MaximumTF, and Button1 as DrawBT. Then, add the Pressed event to DrawBT and type the following code in the associated Code Editor:

ScaleDrawing1.Redraw(MinimumTF.Text.ToDouble, maximumtf.Text.ToDouble)

That’s all!

Running the app!

Everything is in place, so run the app and put some values in the Minimum and Maximum textfields, clicking the button to refresh the drawing. These are some examples you will get for the following range values:

• By Default:

• Minimum: 12, Maximum: 112

• Minimum: -345, Maximum: 835

• Minimum: -816, Maximum: 25

As you can see, having these classes in your developer bag is a good thing if you need to draw this kind of scale! Use the ScaleDrawing class as a start point for your own needs.

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Opening in Desktop and Mobile Apps

• First, the App Opening event will be fired first.
• Next, the Opening event on every control of the default Window assigned to the App project. In this case, it will follow the same order in which the controls were added to the Window in the Layout Editor. It is possible to change that order using the Order buttons in the Command Bar in the Layout Editor.
• Last, the Opening event will be fired on the default Window containing the controls.

Closing in Desktop Apps

When a Window is closed in a Desktop app, the Closing event will be fired following this order:

• First, the Closing event will be raised on every control added to the Window, following the same order used when adding the controls to the Window in the Layout Editor. It is possible to change that order using the Order buttons in the Layout Editor toolbar.
• Next, the Closing event will be raised in the Window itself.
• Last, the Closing event will be raised in the App object of the Desktop app when the user quits the application.

Opening in Web Apps

This is the event firing order for Xojo Web apps:

• First, the Opening event will be raised in the WebApp object.
• Next, the Opening event in the WebSession object.
• Next, the Opening event on every control added to the by default WebPage set in the WebApp object. In this case, it will follow the same order used when adding the controls to the web page in the Layout Editor. (It is possible to change that order using the Order buttons in the Layout Editor toolbar.)
• Next, the Opening event will be raised on the default web page itself.
• Next, the app will start to raise the Shown event on every one of the webpage controls following the same order used when they have been added to the page. (It is possible to change that order using the Order buttons in the Layout Editor toolbar.)
• Last, the Shown event will be raised in the default webpage.

Closing in Web Apps

Regarding the Closing and Closed events, the Web App will follow this order:

• First, the Closing event will be raised in the WebSession object.
• Next, the Closed event will be raised on every one of the default webpages (or the pages shown), following the same order used when adding the controls to the page in the Layout Editor. (It is possible to change that order using the Order buttons in the Layout Editor toolbar.)
• Last, the Closed event will be fired in the webpage itself.

Summary

As you can see, Xojo follows the firing same regardless of the target you choose for your project – Desktop, Web or Mobile apps. Obviously, Web apps do change a bit, because they deal with the WebSession object and also with the Shown event in addition to the Opening event. In Web projects, the Opening event happens on the server side, while the Shown event happens in the client (browser) side.

See related video at the Xojo Programming Language YouTube Channel.

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Xojo Web is an excellent way to expose the features of your electronics projects without having to attach any screen to them. It’s never been easier to build a Web GUI for your smart clocks, drones, POS, domotics, robots or just some automation services. Thinking about building a solar powered server to automate your tweets? Why not!

If you prefer, you can just expose a Web API instead that can be remotely consumed from another device.

What Raspberry Pi boards support ARM 64-bit Linux OS?

• Raspberry Pi Zero 2
• Raspberry Pi 3
• Raspberry Pi 4
• Raspberry Pi 400

Preparing your Raspberry Pi

The easiest way to get your operating system ready is by using the Raspberry Pi Imager.

At the moment of writing this article, it selects the 32-bit flavor by default. If you have one of the supported boards, go ahead and try Raspberry Pi OS (64-bit) or Raspberry Pi OS Lite (64-bit). The later won’t include any desktop environment, you’ll have to access by SSH.

Select your SD Card storage and press on Write. Optionally, if you want to set a hostname for your board, enable SSH, or even configure your Wifi, press on the gears icon.

In just a few minutes you will have a ready to boot SD card for your Raspberry Pi.

Remotely debugging your projects

This is one of my favorite features of Xojo.

In your Xojo installation Extras folder, you will find a “Remote Debugger Console” and “Remote Debugger Desktop”, that also works for your Linux 64-bit OS.

Depending on which flavor of Linux you’ve selected in the previous step, send the Console or Desktop ZIP to your board, run it and configure the settings.

Inside Xojo, go to Preferences and press on the Debugging tab.

That’s it. Now you will be able to remotely run and debug your applications. Add a few breakpoints and the execution will stop as soon as it reaches it, allowing you to explore the current state.

Deploying the final version

Once you’re ready to build the final version of your application, all the wires attached and components soldered, the last step is to “Deploy” your application.

There is a tutorial covering this step in detail: Deploying Web Apps on Linux.

If you create a Raspberry Pi project, please make sure you open a Forum thread. The Xojo community loves seeing this kind of projects!

What will you build?

Ricardo has always been curious about how things work. Growing up surrounded by computers he became interested in web technologies in the dial-up connections era. Xojo has been his secret weapon and language of preference since 2018. When he’s not online, chances are he will be scuba diving … or crocheting amigurumis. Find Ricardo on Twitter @piradoiv.

You can download the example project from this link.

Features of Tables in PDFDocument

The main features available with tables in PDFDocument are:

• PDFTable / PDFTableDataSource is compatible with Desktop, Web, Console and RaspberryPi projects
• Variable height rows
• Automatically add new pages to the PDF
• The ability to repeat (or not) the table header at the start of every new page added

In order to achieve this, the PDFTable class works side by side with the PDFTableDataSource class interface. This class interface declares the methods that will be called by a given PDFTable instance in order to generate the table on the fly.

• PDFTableDataSource

Because it is a class interface, you will be able to add it to any window/web page or any class/subclass you create, so it can work as the provider of the data in the drawing of a given PDF table.

The PDFTableDataSource has these five methods:

• AddNewRow(rowCount As Integer) As Boolean– The rowCount parameter contains the value of the rows already added to the table. Returning True from this method will add a new row to the table; otherwise it will end the creation of the associated table.
• HeaderHeight As Double– In the implementation of this method you will set the height value used in order to draw the table header.
• PaintCell(g As Graphics, row As Integer, column As Integer)– This is the method called by the PDFTable instance in order to draw the cell for the row/column pair stored in the associated parameters. The method receives its own graphic context in the ‘g’ variable, so you can use any of the supported methods and properties of the Graphic class to draw the contents in the table cell.
• PaintHeaderContent(g As Graphics, column As Integer)– This is the method called by the PDFTable instance every time it needs to draw the header of the table. As you can see, it receives as parameters the column number and its own graphic context.
• RowHeight As Double– This is the method called by the PDFTable instance so your code can set the height for the current row.

PDFTable

This is a really simple class exposing a total of four properties:

• ColumnCount As Integer– This is the property that sets the number of columns for the table to be drawn.
• ColumnWidths As String– This is the property that sets as a string the width of every column in the table, separated by the comma character.
• DataSource As PDFTableDataSource– This is the property that sets the object acting as the data source object for the table. Remember that such an object needs to implement the methods declared in the PDFTableDataSource class interface.
• HasRepeatingHeader As Boolean– Use this property to instruct the PDFTable instance if it needs to repeat the header on every new page that is added to the document as the table is generated.

For example, the following fragment of code will create a table with a total of three columns that have the same size. The table will be drawn horizontally centered in the page. The object acting as the data source for the table will be the same where this snippet of code has been added, that is: ‘Self’:

Var d As New PDFDocument

Var tTable As New PDFTable
tTable.ColumnCount = 3
tTable.ColumnWidths = "150,150,150"
tTable.DataSource = Self
tTable.HasRepeatingHeader = True

The way to add a PDFTable instance to the current page of the PDF document is through the AddTable(table As PDFTable, x As Double, y As Double) method; for example:

Var x As Double = d.PageWidth/2 - 450/2

d.addTable(tTable,x,20)

PDFTable in Practice

In this example, you can see how to create a PDF document with a table added to it (horizontally centered on the pages). This table will have three columns equally sized and a total of 100 rows with a variable —random— height—, and giving the option to the user so they can choose to repeat the table header on every new page added to the document or not.

The cell contents of the table will be chosen randomly, varying between filling the cell with a random color, drawing text with the row and column numbers for the cell, rendering an image that has been added to the project, or keeping the cell empty.

Create a new Desktop project. With the Window1 selected in the Navigator, click on the “Choose…” button found in the associated Inspector Panel under the Interface section. This action will open a new window displaying all the available Class Interfaces. Select the PDFTableDataSource entry and confirm the selection click the Ok button.

As result, the methods declared by the PDFTableDataSource are now added to the Window1 item.

Grab a CheckBox control from the Library and drop it in the upper-left corner of the window in the Layout Editor. Use the associated Inspector Panel to change the following values:

• Name: RepeatHeaderCB
• Visual State: Checked

In order to complete this basic user interface, drag a Button control from the Library and drop it in the upper-right corner of the window in the Layout Editor. With Button1 selected in the Navigator, choose the Add to “Button1” > Event Handler… option from the contextual menu. Next, select the Pressed event from the resulting window and confirm the selection so it is added to the Window1 object.

With the Pressed event selected in the Navigator, add the following fragment of code in the associated Code Editor:

Var d As New PDFDocument

Var tTable As New PDFTable
tTable.ColumnCount = 3
tTable.ColumnWidths = "150,150,150"
tTable.DataSource = Self
tTable.HasRepeatingHeader = RepeatHeaderCB.Value

Var x As Double = d.PageWidth/2 - 450/2

d.addTable(tTable,x,20)

d.Save(SpecialFolder.Desktop.Child("Table.pdf"))

Drop any image you want to use from your computer drive into the Xojo’s IDE Navigator. Our example uses an image named “XojoLogo100”. When adding your own image, you can opt to rename it to the name name used in the code of this example, or changing all the references where “XojoLogo100” is referenced to the name of your image.

Now it is time to implement the code in every one of the five methods required by the PDFTableDataSource class interface.

In the AddNewRow method:

Return rowCount < 100 // Our example table has a total of 100 rows.

In the HeaderHeight method:

Return 30 // This is the height for the cells of the header in the table.

In the PaintCell method:

Var rd As New Random

Var option As Integer = rd.InRange(1,4)

Select Case option

Case 1

  Var s As String = "row: " + row.ToString + " column: " + Column.ToString
  Var h As Double = g.Height/2 + g.TextHeight/2
  g.DrawText s,5,h

Case 2

  g.DrawPicture(XojoLogo100,0,0)

Case 3

  g.DrawingColor = Color.RGB(rd.InRange(0,255), rd.InRange(0,255), rd.InRange(0,55))
  g.FillRectangle(2,2,g.Width-4,g.Height-4)

Case 4

 // Empty cell
End Select

g.DrawingColor = Color.Black
g.DrawRectangle 0,0, g.Width,g.Height

And this is the code we will use in order to draw the content of the table Header cells in the PaintHeaderContent:

Var tRandom As New Random

Var c As Color

Select Case Column
Case 0
  c = color.Red
Case 1
  c = Color.Green
Case 2
  c = Color.Blue
End Select

g.DrawingColor = c
g.FillRectangle 0,0,g.Width,g.Height

Var s As String = "Column: " + Column.ToString

Var x, y As Double
x = (g.Width/2) - (g.TextWidth(s)/2)
y = (g.Height/2) + (g.TextHeight/2)

g.DrawingColor = color.Black
g.DrawText s,x, y

Now add the code responsible for setting the height of every new row added to the table in the RowHeight method. As you can see, this value is a random value between 25 and 100 points:

Var rd As New Random

return rd.InRange(25,100)

Running the App

Run the app, click on the button and you will see how a new PDF document named “Table.pdf” is created in your computer desktop. The number of pages of the PDF document may vary because the height of the table rows vary on every iteration.

This time, unselect the checkbox and click the button to create the PDF document again. Now, the table header is only rendered in the first page of the document.

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

More Control with PDFForm Controls

It is possible to add forms to your PDF documents using controls as text fields, text areas, list boxes, radio buttons, check boxes, popup menus, combo boxes, etc. Starting with Xojo 2022r3 you’ll be able to set if the items of PDFComboBox, PDFListBox and PDFPopupMenu are displayed sorted or as they were added using the Boolean IsSorted property.

As for the PDFTextArea and PDFTextField controls, there is a new property AllowSpellChecking so you can set if these will enable spell check or not. And in the case of the PDFTextField, it is also possible to set the HasPassword property so the text typed by the user is substituted in the PDF document with the usual replacement character, hiding what the user is typing from prying eyes!

Dealing with TOC Indexes

Lastly, there are also improvements to dealing with TOC creation in your PDF documents. For example, you can get now the Parent instance from a PDFToc entry through the Parent property; and there are new methods to get all the child items hanging from a PDFTOCEntry —Entries() As PDFTOCEntry()— and to remove existing entries from a PDFTOCEntry instance: PDFTOCEntry.RemoveEntry(ParamArray entries As PDFTOCEntry) and PDFTOCEntry.RemoveEntry(entries() as PDFTOCEntry).

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Emojis are available on every operating system and platform that Xojo supports from desktop to mobile to web. Because they are built-in to the OS as characters, they are client-side which means that web applications don’t have to load them from the server as they are already available to the browser from the user’s OS. As characters, they are scalable to any font size. There are also a lot of them. According to Emojipedia (yes, that’s a thing), there are over 3,600 emojis as of September 2021.

Emojis can be especially useful for listboxes in web applications because unlike the DesktopListBox, the WebListBox does not have a PaintCellBackground event that can be used to draw graphics into a cell. Instead, if you can find an emoji that represents what you’d otherwise draw into a cell, you can simply assign it without having to deal with graphics at all. For example, there are a series of emojis that are just boxes in different colors that could be used to indicate the state of something: . The famous web game Wordle uses these when you share your results. With over 3600 available, you can likely find an emoji to represent nearly anything you might need from the common smiling face to the less common umbrella on the ground , banjo or moai from Easter Island.

Again, emojis can be used in any type of application, desktop, mobile or web. Here’s an example of them in a web popup menu:

And here they are in a web list box:

The key thing is to realize that they are individual characters which means they can appear alone or mixed in with other characters. If you need them to be larger, increase the font size. Here’s the lion for example at 60 point size:

Because they are characters, you can copy and paste emojis anywhere you’d use a character, including in your code:

ListBox1.AddRow("Fox 🦊")
ListBox1.AddRow("Lion 🦁")
ListBox1.AddRow("Chipmunk 🐿")

Just remember that emojis are characters, not graphics, so you should treat them as such. Notice in the code above, they are inside the quotes. You could even use them to name a variable:

Var 🌋🥥💰 As String = "Yes, you can do this!"

I’m not sure that’s useful, but it clearly demonstrates how an emoji is a characters like any other.

On Emojipedia you can search for emojis by keyword and copy them to the clipboard. Again because they are simply characters, you can then paste them into a Xojo constant, make them the default value of a property or even paste them into the Code Editor to assign them in code.

Keep emojis in mind the next time you need an image in an application.

Encrypting PDF files with PDFDocument is based in the use of the PDFPermissions class. You’ll need to create a new instance of the class passing along the “Owner” and “User” passwords. For example:

Var d As New PDFDocument
Var g As Graphics = d.Graphics

Var p As New PDFPermissions("OwnerPassword","UserPassword")

In addition, you can set other properties for the PDFPermissions instance; all of them are read/write and will be applied by the PDF viewer app for when the document is opened using the “user” password.

• AllowCopyingContents is set to False by default. When set to True it will allow copying contents from the PDF, as for example the selected text or image.
• AllowModifyingContents is set to False by default. When set to True it will all to modify the contents of the protected PDF document.
• AllowPrinting is se to False by default. When it is set to True it will be possible to print the PDF.

Once the PDFPermissions instance has been created and the desired properties had been set, all you need to do is to assign such instance to the Permissions property for the PDFDocument instance you want to encrypt:

d.Permissions = p

Then, when it’s saving the document to a file, PDFDocument will encrypt all the streams of data containing sensitive information, as it can be the text or Images rendered on every one of the PDF pages plus the metadata information itself. The used encryption algorithm is AES 128 bits.

That’s all! You can distinguish an encrypted PDF file from an unencrypted one because, usually, the first one will be displayed with the image of a Lock in the icon. When you open an encrypted PDF in the viewer app you’ll be asked to type a password. If you enter the passord set to the “Owner” user, you’ll be able to do all the kind of operations allowed by the viewer app, while if you enter the “User” password, then the kind of options available will be determined by those set using the PDFPermissions properties.

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Currently, Xojo’s PDFDocument supports the most common type of annotations for PDF – you know those little yellow boxes displayed like sticky notes on the pages of the PDF document that display their contents when clicked on.

Now with Xojo 2022r2 and later you have more options! And while most of these don’t look like “real” annotations or like something made using the Graphics methods, they will behave as the annotations you are familiar with using in PDF. What I mean by this is that they will display the associated text for the annotation while also allowing the user to Accept/Decline the annotation or interact with them by adding, for example, new replies.

Before reviewing the new options, let me just remind you: The PDF Standard dictates how some features must be implemented for a PDF. After that, it is up to the developers of the PDF viewer app to decide what features are implemented, keep in mind results can vary depending on the PDF viewer you or your user chose to use. As other many things related with PDF files, don’t expect every PDF viewer apps out there to support or adhere to the annotations outside of the most basic ones.

Adobe is the original creator of the PDF specification and its free PDF viewer, Acrobat Reader app does support everything Xojo’s PDFDocument offers.

Attaching Files to the PDF

You’ll be able to embed any kind of file (except for those based in a Bundle structure) into the PDF document itself, for example an Excel file, a Hi-Res image, etc. Then the user viewing the PDF document will be able to open the attached file clicking in the annotation using whichever PDF Viewer app their computer/device has installed for the attached file format. Because this is an annotation, the user will be able to also edit the annotation or add new replies to it.

This is an example about how to create these kind of annotations:

Var d As New PDFDocument
Var g As Graphics = d.Graphics
Const kContentText As String = "Attached File Annotation: double click on me!"

g.FontSize = 20
g.DrawText(kContentText, 40, 60)

If exampleFile <> Nil Then
  
  // Creating a new EmbeddedSound.
  d.AddEmbeddedFile(exampleFile, 40, 60, g.TextWidth(kContentText), 20)
  
  // Saving the created PDF document to the selected path.
  Var f As FolderItem = FolderItem.ShowSaveFileDialog("","PDFAttachedFile.pdf")
  
  If f <> Nil Then
    
    d.Save(f)
    
  End If
End If

Here exampleFile is a FolderItem property that has been added to the project and that’s pointing to the file to embed.

And this is how it looks like in the resulting PDF file:

Callout Annotations

These kind of annotations are perfect for pointing our or calling attention to any other item in the PDF page. They are highly customizable- you can decide for example a solid or dashed line, the termination of the line, the color and, of course the text to be displayed in the annotation itself.

This is an example showing how to add a Callout annotation to a PDFDocument:

Var d As New PDFDocument
Var g As Graphics = d.Graphics
Const kContentText As String = "Callout Annotation in PDF"

g.FontSize = 40
g.Bold = True
g.DrawText(kContentText, 40, 60)

g.Bold = False
g.FontSize = 12
g.DrawText(kSampleText, 40, 100, 200)

Var originY As Double = (g.TextHeight(kSampleText, 200) / 2)

Var tCallout As New PDFCallout("Callout Example", New Point(250, originY), New Point(300, originY + 50), _
 New Point(350, originY + 50), 100, 50)

tCallout.BorderStyle = PDFAnnotation.BorderStyles.Dashed
tCallout.DashPattern = Array(2.0, 2.0)
tCallout.DrawingColor = Color.Orange
tCallout.LineEndingStyle = PDFAnnotation.LineEndingStyles.OpenArrow
tCallout.Text = "Some sample text in the annotation"
tCallout.FontSize = 9.5

d.AddCallout(tCallout)

// Saving the created PDF document to the selected path.
Var f As FolderItem = FolderItem.ShowSaveFileDialog("","PDFCalloutExample.pdf")

If f <> Nil Then
  
  d.Save(f)
  
End If

Where kSampleText is a Constant added to the project containing some sample text to be put in the page of the PDF.

And this is how the Callout will look like when opening the resulting PDF file in the viewer app:

Line Annotations

A “Line” annotation displays a straight line on the page with a text caption inside the line or above it.

It is also possible to add leader lines to both sides of the main line (with possitive or negative values) plus set other properties as the type of the line (solid, dashed, etc), the kind of termination used on both ends of the main line (i.e: open/close arrow, butt, circle, diamond, square…), the drawing color, line width or font size.

This is how a Line annotation looks like when the resulting PDFDocument is viewed using Acrobat Reader (in this case, using Leader lines):

Video Annotations

Yes, you can embed .mp4 files in the PDF created with PDFDocument, and these will be played from the PDF itself. This will increase the size of the generated PDF file because it will add the size of the embedded mp4 file itself! So it is good practice to optimize the video files as much as possible and use the video resolution you want them to be played and not a higher one.

You can also add this kind of content as an Attached File annotation too. In both cases the data of the file will be embedded in the generated PDF file. The main difference in this case is that the mp4 file will be opened using an external app and that you’ll be able to include other video file format besides .mp4.

The way to add this kind of annotation to a PDFDocument instance is quite simple, for example:

Var d As New PDFDocument
Var g As Graphics = d.Graphics
Const kContentText As String = "Embedded Video Annotation"

g.FontSize = 30
g.DrawText(kContentText, 40, 60)

If exampleVideo <> Nil Then
  
  // Creating a new EmbeddedSound.
  d.AddEmbeddedMovie(exampleVideo, 40, 100, 478, 360)
  
  // Saving the created PDF document to the selected path.
  Var f As FolderItem = FolderItem.ShowSaveFileDialog("","PDFEmbeddedVideo.pdf")
  
  If f <> Nil Then
    
    d.Save(f)
    
  End If
End If

Where exampleVideo is a FolderItem Property that has been added to the project. This is how a video annotation will look like when opening the resulting PDF in Acrobat Reader:

Sound Annotations

In addition to video annotations, it is also possible to add sound files that can be played from the PDF itself. In this case, the audio files need to be in AIFF format with 2 audio channels (stereo), 16 bits of resolution and a sampling frequency of 44,1 kHz.

As it is the case with video annotations, you can opt to add this kind of content as an Attached File annotation, so it will be opened with an external app and opens the range of sound file formats you can embed into the PDF.

The way to add Sound annotations using PDFDocument is shown here:

Var d As New PDFDocument
Var g As Graphics = d.Graphics
g.FontSize = 30

Const kContentText As String = "Embedded Sound Annotation"

Var x, y, width, height As Double

x = g.Width/2 - width/2
y = 60

width = g.TextWidth(kContentText)
height = g.TextHeight

g.DrawText(kContentText, x, y)

If exampleSound <> Nil Then
  
  // Creating a new EmbeddedSound.
  d.AddEmbeddedSound(exampleSound,x,y,width,height)
  
  // Saving the created PDF document to the selected path.
  Var f As FolderItem = FolderItem.ShowSaveFileDialog("","PDFEmbeddedSound.pdf")
  
  If f <> Nil Then
    
    d.Save(f)
    
  End If
End If

Here exampleSound is a FolderItem Property added to the project. And this is how a Sound annotation will look when the PDF document is opened using Acrobat Reader:

Markup Annotations

A Markup annotation is intended to mark an underlying text content using any of the different available types, for example “Highlight”, “Squiggly” (usually used to mark a text that needs some kind of correction), “Underline” or “Strikeout”. Besides the Markup type, it is also possible to set the color of the annotation.

For example, the following snippet of code adds two Markup annotations to the page of the PDFDocument using the Highlight and Squiggly types:

Var d As New PDFDocument
Var g As Graphics = d.Graphics
Const kContentText As String = "Markup Annotation in PDF"

g.FontSize = 40
g.Bold = True
g.DrawText(kContentText, 40, 60)

// Adding a Markup annotation with the Highlight type (Default)
d.AddMarkup(40,40,g.TextWidth(kContentText),g.FontSize,"Let's focus on this Section")

g.Bold = False
g.FontSize = 12
g.DrawText(kSampleText, 40, 100, g.Width-80)

// Adding a Markup annotation with the Squiggly type
d.AddMarkup(40,195,210,g.FontSize,"Some text to correct!",Color.Red,PDFAnnotation.MarkupTypes.Squiggly)

// Saving the created PDF document to the selected path.
Var f As FolderItem = FolderItem.ShowSaveFileDialog("","PDFMarkupExample.pdf")

If f <> Nil Then
  
  d.Save(f)
  
End If

And this is how it looks when the resulting document is opened in Adobe Acrobat Reader:

Bonus

Let me end with one other minor improvement to PDFDocument annotations: starting with Xojo 2022r2 all of them include metadata information about the creation and modification date and time. this information will be displayed as part of the annotation metadata when the item is selected in the viewer app.

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Why, you ask? What are the advantages of using a PDF for your presentations? PDF is portable, meaning you can distribute these files easily, usually, with a small file footprint. The content is vectorial (except for images), what means that it will look great no matter the screen resolution of the display/projector used for playing the presentation.

There is one current issue to watch out for, currently there’s a bug on macOS where Acrobat Reader is not able to apply the assigned transitions on Big Sur and later; they still work under Catalina and previous versions of macOS.

In this example project I will create a shortened version of the slides I used in the Using Xojo’s PDFDocument presentation. You’ll need to change the font names (and any other item) to those you are using and that are installed in your computer.

Setting the Viewer Options

Start by creating a new project for the target you’re most comfortable with – Xojo’s PDFDocument is cross-platform and supported on Desktop, Web, iOS and Console projects. Next, add the Opening Event Handler to the default DesktopWindow/WebWindow/MobileScreen, or choose the Run Event Handler if you chose to create a new Console Project.

Write the following lines of code in the associated Code Editor:

// Let's create a new PDFDocument instance with
// the page size set to HD resolution

Var Presentation As New PDFDocument(1920, 1080)

// Let's make sure that the fonts used are embedded in the
// document, so there are no unexpected problems when the
// PDF is opened in a device that doesn't have that
// same fonts installed

Presentation.EmbeddedFonts = True

The next lines of code will set the default for the View mode of the document when it is opened in Acrobat Reader or any other PDF reader. Since it’s a presentation, you’ll likely want the document to be opened in Full Screen mode by default, so let’s make that happen:

// Let's create a new Instance from the PDFViewerOptions class

Var ViewerOptions As New PDFViewerOptions

// And set the FullScreen property to True
// so the document will set that view size
// when opened in the PDF Viewer app

ViewerOptions.FullScreen = True

Drawing the Background of the Page

Use a linear gradient brush to fill in the background of all the slides. For convenience, create a new method for it using the following values in the Inspector Panel:

• Name: DrawPageBackground
• Parameters: g As Graphics

Type the following code in the associated Code Editor for the method:

Static backgroundfilling As LinearGradientBrush

If backgroundfilling = Nil Then
  backgroundfilling = New LinearGradientBrush
  backgroundfilling.StartPoint = New Point(g.Width / 2, 0)
  backgroundfilling.EndPoint = New Point(g.Width / 2, g.Height)
  backgroundfilling.GradientStops.Add(New Pair(0.0, &c000000))
  backgroundfilling.GradientStops.Add(New Pair(0.7, &c000000))
  backgroundfilling.GradientStops.Add(New Pair(1.0, &ccccccc))
End If

g.Brush = backgroundfilling
g.FillRectangle(0, 0, g.Width, g.Height)

All this code does is create a LinearGradientBrush instance ranging from full black to some degree of gray at the bottom of the page. Because we are not going to change the values of the gradient every time we need to call the method, it makes sense to assign it to a Static instead of a Variable.

Then the LinearGradientBrush is assigned to the Brush property of the received Graphic context and, finally, used as the “filling color” when drawing the filled rectangle.

Drawing the Header

Now add the method that will be responsible for drawing the header shared by all the slides. Use the following values in the Inspector Panel:

• Method Name: DrawTopHeader
• Parameters: g As Graphics

And type the following code in the associated Code Editor:

Const kPDFDocumentHeader As String = "PDFDocument"

DrawUpperBand(g, 0, 50)

g.FontName = "Helvetica"
g.FontSize = 180
g.Bold = True

Var x As Double = g.Width / 2 - g.TextWidth(kPDFDocumentHeader) / 2
Var y As Double = 220

g.DrawingColor = &cC9F2C900
g.DrawText(kPDFDocumentHeader, x + 4, 224)

g.DrawingColor = Color.Black

Static linearGradient As LinearGradientBrush

If linearGradient = Nil Then
  Lineargradient = New LinearGradientBrush
  linearGradient.StartPoint = New point(x, y - 224)
  linearGradient.EndPoint = New point(x, y)
  linearGradient.GradientStops.Add(New Pair(0.0, &c00BD4E00))
  linearGradient.GradientStops.Add(New Pair(0.7, &c00FD1F00))
  linearGradient.GradientStops.Add(New Pair(1.0, &c25712900))
End If

g.Brush = LinearGradient
g.DrawText(kPDFDocumentHeader, x, y)

As you can see, this is quite similar to the previous code. We are using a new Linear Gradient as the filling for the “PDFDocument” text. But first, it calls the DrawUpperBand method. This is a method that will draw a picture with a 50% opacity behind the header text, as well as the XDC logo in the lower left corner of the slide. Add a new method using the following values:

• Method Name: DrawUpperBand
• Parameters: g As Graphics, x As Integer, y As Integer

Type the following snippet of code in the associated Code Editor:

g.Transparency = 50.0
g.DrawPicture(UpperBand, x, y)
g.Transparency = 0
g.DrawPicture(XDC2x, 20, g.Height - XDC2x.Height)

Both “UpperBand” and “XDC2x” are PNG image files added to the project.

NextPage

Because the background and the header are common items in all the slides, we will render them every time we add a new slide (page) to the presentation (document). Create a new method using the following values:

• Method Name: NextPage
• Parameters: g As Graphics

And type the following lines of code:

g.NextPage(1920, 1080)
DrawPageBackground(g)
DrawTopHeader(g)

Creating the Content of the Slides

Now let’s add the method that will be responsible for adding the text of the main topic on every slide:

• Method Name: DrawTopic
• Parameters: g As Graphics, topic As String

And type the following code in the associated Code Editor:

Var x, y As Double
g.FontName = "Anoxic Light"
g.FontSize = 150

x = g.Width / 2 - g.TextWidth(topic) / 2
y = g.Height / 2 - g.TextHeight / 2

Static LinearGradient As LinearGradientBrush

If LinearGradient = Nil Then
  linearGradient = New LinearGradientBrush
  linearGradient.StartPoint = New Point(x, y)
  linearGradient.EndPoint = New Point(x, y - 80)
  linearGradient.GradientStops.Add(New pair(1.0, &c9FE1FF00))
  linearGradient.GradientStops.Add(New pair(0.0, &cF6F6F600))
End If

g.Brush = linearGradient
g.DrawText(topic, x, y)

Setting Transitions Between Slides

PDFDocument does support the range of transitions available under the PDF standard. In this case we are going to use the simplest: Fade. So, create a new method with the following values:

• Method Name: AddTransitions
• Parameters: d as PDFDocument

And type the following lines of code in the associated Code Editor:

// New PDFTransition instance, using the Fade style
// with one second of length.

Var t As New PDFTransition(PDFTransition.Styles.Fade, 1)

// And apply it on every page of the PDFDocument, starting on Page 2.
If d.PageCount > 2 Then
  For n As Integer = 2 To d.PageCount
    d.TransitionAt(n) = t
  Next
End If

Putting It All Together

Now we have all the pieces needed to create this small presentation in PDF. Go back to the Opening Event Handler and type the following lines of code below the last one:

DrawPageBackground(g)
DrawTopHeader(g)
DrawTopic(g, "First Slide")
NextPage(g)
DrawTopic(g, "Second Slide")
NextPage(g)
DrawTopic(g, "Third Slide")
NextPage(g)
DrawTopic(g, "Fourth Slide")

AddTransitions(d)

d.Save(SpecialFolder.Desktop.Child("Presentation.pdf"))

Done! Run the project and the PDF document will be saved to your computer Desktop. Once you open it in Adobe Reader, the app will detect that the document wants to use the full screen mode and, as soon as you confirm, it will begin the presentation. Depending on your preferences in Acrobat Reader, you may need to use the mouse button or arrow keys to change slides, or it may automatically advance to the next slide after the amount of time set.

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Graphics Extensions

To start, and because we want to provide this ability to any graphic context, it makes sense to include all our logic in a Module. Let’s name it GraphicExtensions (as usual you can opt to use any other name). Start a new Xojo project and add a new Module to it using the following values in the Inspector Panel:

• Name: GraphicsExtensions

Next, and with the GraphicsExtensions item selected in the Navigator, add a new method to it using the following values in the associated Inspector Panel:

• Method Name: DrawText
• Parameters: Extends g As Graphics, value As String, x As Double, y As Double, wrap As Double, alignment As TextAlignments = TextAlignments.Left
• Scope: Global

As you can see, it nearly replicates the standard DrawText method from the Graphics class. Some things to note here, we are using the Extends keyword in combination with the first parameter to instruct the compiler that this method will “extend” the existing functionality of the Graphics class, so you’ll be able to invoke it using the usual dot notation on any instance created from the Graphics class.

The second thing is the last of the parameters “alignment As TextAlignments” TextAlignments is a global enumeration that we are going to use to learn the text alignment the user wants to apply to the block of text.

Next, type the following snippet of code in the associated Code Editor for the method:

#Pragma DisableBackgroundTasks
#Pragma DisableBoundsChecking
#Pragma NilObjectChecking False

value = value.ReplaceLineEndings(EndOfLine)

Select Case Alignment
  
Case TextAlignments.Default, TextAlignments.Left
  
  g.DrawText(value, x, y + g.TextHeight, wrap - x)
  
Case TextAlignments.Center, TextAlignments.Right
  
  Var tOutput() As String = PrepareOutput(g, value, wrap, x)
  
  Var tx, ty As Double
  ty = y + g.TextHeight
  
  Select Case Alignment
    
  Case TextAlignments.Center
    
    For Each s As String In tOutput
      
      tx = If(Wrap = 0, ((g.Width - Wrap) / 2 - g.TextWidth(s) / 2) + (x / 2), (wrap / 2 - g.TextWidth(s) / 2) + (x / 2))
      g.DrawText(s, tx, ty)
      ty = ty + g.TextHeight
      
      If ty > g.Height Then Exit
      
    Next
    
  Case TextAlignments.Right
    
    For Each s As String In tOutput
      
      tx = If(Wrap = 0, (g.Width - g.TextWidth(s)) + x / 2, (wrap - x) - g.TextWidth(s) + x)
      g.DrawText(s, tx, ty)
      ty = ty + g.TextHeight
      
      If ty > g.Height Then Exit
      
    Next
    
  End Select
  
End Select

As you can see, this code looks into the value of the Alignment parameter to see the approach to apply. If the Alignment equals to Default or Left we simply call the standard DrawText method on the received graphics context represented by the “g” variable. If not, we need to do some stuff to the received block of text to create the required chunks (or lines) that do fit the available width plus the received wrapping value. This is done in the PrepareOutput method.

Once we have all the lines with the apropiate widths in the Output array, then we only need to do some basic maths in order to calculate the final TX coordinate for every line, incrementing the TY coordinate on every new line to draw. As you can see, and in order to speed-up things a bit more, we check if the calculated TY coordinate is beyond the visible area of the graphic context and, if it is the case, we exit the function (it wouldn’t make much sense drawing text that is not going to be visible and whose processing consumes time).

Of course, the calculation of the TX and TY coordinates depends on the value of the Alignment parameter; that is, if the block of text is going to be drawn right aligned or centered.

Calculating Every Line Width

Now add the PreapareOutput method to the GraphicsExtensions module using the following values in the associated Inspector Panel:

• Method Name: PrepareOutput
• Parameters: g As Graphics, value As string, wrap As Double, x As Double
• Return Type: String()
• Scope: Private

And typing the following snippet of code in the associated Code Editor:

#Pragma DisableBoundsChecking
#Pragma DisableBackgroundTasks
#Pragma NilObjectChecking False

Var totalWidth As Double = If(wrap = 0, g.Width - x, wrap - x)

Var Input() As String = value.ToArray(EndOfLine)
Var output() As String

For Each s As String In Input
  
  If g.TextWidth(s) <= totalWidth Then
    output.Add(s)
  Else
    AdjustWidth(g, s, totalWidth, output)
  End If
  
Next

Return output

Once again, the first lines are some pragmas put in place to speed-up things, then the totalWidth variable will store the required maximum width value for every line. The Input array is going to store every paragraph from the source text, while the Output array will store every processed line and, the one returned to the method calling PrepareOutput.

Then we need to iterate every entry in the Input array and check if its width meets the totalWidth requirement. If it does, then that entry will be added to the Output array; if not, we still need to split the “paragraph” into as many chunks of text as needed that meet the expected maximum width. That is something that’s going to be done by the AdjustWidth method.

Splitting Chunks of Text … Recursively

Add the third, and last required, method to the GraphicExtensions module using the following values in the associated Inspector Panel:

• Method Name: AdjustWidth
• Parameters: g As Graphics, s As String, width As Double, ByRef output() As String
• Scope: Private

Next, type the following lines of code in the associated Code Editor:

#Pragma DisableBoundsChecking
#Pragma DisableBackgroundTasks
#Pragma NilObjectChecking False

Var n As Integer

If g.TextWidth(s) <= width Then
  output.Add(s)
Else
  
  // This can be improved pre-calculating the initial value for "n"… so it's
  // left as an exercise for the reader :-)
  
  While round(g.TextWidth(s.Left(s.Length - n))) > width
    n = n + 1
  Wend
  
  output.Add(s.Left(s.Length - n))
  
  AdjustWidth(g, s.Right(n), width, output)
  
End If

As you can see, if the width of the received string is less than or equal to the expected width, then it is added to the Output array. If not, we are using a really less than optimal technique to calculate the appropriate one, saving the resulting string to the Output array and passing the remaining of the string again to the method. You’ll probably want to change some things here to better pre-calculate the initial value of the n variable.

Testing It

We have everything in place, so let’s test it! Start by adding a new constant to the Window1 window and name it kSampleText. Use the associated Inspector Panel to assign the block of text you want to use for testing (personally I like to use the https://www.lipsum.com website for getting sample text).

If you prefer, you can download the complete Example project from this link.

Add next the Opening Event Handler to the Window1 window and type following snippet of code in the associated Code Editor:

Var p As New Picture(612, 792)
Var d As New PDFDocument

Var g As Graphics = p.Graphics
g.FontName = "Helvetica"
Var gPDF As Graphics = d.Graphics

g.DrawText(kSampleText, 40, 10, 570, TextAlignments.Right)
gPDF.DrawText(kSampleText, 40, 10, 570, TextAlignments.Right)

Var tH As Double = g.TextHeight(kSampleText, 570) + g.TextHeight * 4
Var tPH As Double = gPDF.TextHeight(kSampleText, 570) + gPDF.TextHeight * 4

g.DrawText(kSampleText, 40, th, 570, TextAlignments.Center)
gPDF.DrawText(kSampleText, 40, tPh, 570, TextAlignments.Center)

CustomDesktopCanvas1.Image = p
d.Save(SpecialFolder.Desktop.Child("PDFTextAlignment.pdf"))

As you can see, I chose the “Helvetica” font, but you can change it to any font that is available in your OS. The point here is that we are feeding our “extended” DrawText method with the sample text and the alignment we want to use in for drawing it both in the graphic context of a Picture and the one from a PDFDocument instance. Also, CustomDesktopCanvas1 is a simple Canvas subclass with an “image” property added to it as a computed property, so when a new value is assigned it will refresh itself and the Paint event will draw the picture centered in the canvas.

Run the example project and you should see something similar to the result displayed in the screenshots. Of course, there are still some details to take care of, for example when a line is split so the last letter goes over to the next line and things like that but, as mentioned in the beginning of this post, this is just a starting point. Adapt and improve upon it as needed.

Have fun!

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Let’s start with the Desktop version. Once we’ve finished this bit, you’ll only need to repeat the same steps using the MobileImageViewer to doo the same in your iOS app- just copy and paste the events, methods and properties to your iOS project!

Begin with a new Desktop project in Xojo, add a new DesktopImageViewer by dragging it from the Library and dropping it into the Navigator. This creates a subclass of the DesktopImageViewer.

With the new CustomDesktopImageViewer still selected in the Navigator, use the associated Inspector Panel to change its name to “URLDesktopImageViewer” (of course you can use any name you want).

Adding Properties

Because we want to load an image from an URL, let’s start by adding some properties to our subclass. These will be responsible for storing the URL and the underlying URLConnection instance needed to retrieve the image data from the URL.

Start with the URL property. With URLDesktopImageViewer selected in the Navigator, choose the option “Add To URLDesktopImageViewer > Property” from the contextual menu. Once this is added, use the associated Inspector Panel to change the following fields:

• Name: URL
• Type: String
• Scope: Public

With that property still selected in the Navigator, choose the option “Convert to Computed Property”. This adds a couple of methods under the URL property: Get and Set.

Select the Set method. The code put in that method will be executed every time the user (or the code) assigns a new value to the property. Now, add the following lines of code to the associated code editor for the Set method:

mURL = value
LoadURL

You’ll likely want to display that property in the Inspector Panel so that the user can type a URL for that property using the Inspector Panel when a new instance of the class is added to the Layout Editor. In order to do that, select the URLDesktopImageViewer subclass in the Navigator and choose the Inspector Behavior option from the contextual menu. That action will bring up the following dialog:

You’ll find the URL property under the Behavior section. Make sure to select the checkbox associated with the property and confirm the change by clicking the “OK” button.

Finally, add a second property to the URLDesktopImageViewer subclass. With the new property selected in the Navigator, use the associated Inspector Panel to change the following fields:

• Name: Connection
• Type: URLConnection
• Scope: Protected

Adding (and Defining) Events

With the URLDesktopImageViewer still selected in the Navigator, choose the “Add to URLDesktopImageViewer > Event Handler…” option from the contextual menu to open the “Add Event Handler” window.

Select the Opening and Closing events and click on the “OK” button to confirm and close the window. You’ll see these two events have been added under the subclass.

Select the Opening event handler in the Navigator under the subclass hierarchy (if you don’t see the event names, then click on the disclosure triangle associated with the “Event Handlers” entry). That action will bring up the associated Code Editor for the event.

Write these two lines of code:

LoadURL
RaiseEvent Opening

And because our subclass is “consuming” the Opening Event Handler, we need to create a new Event Definition for it, so the consumers of the subclass can handle their own code in that same event. To do that, with the URLDesktopImageViewer still selected in the Navigator, choose the “Add To URLDesktopImageViewer > Event Definition” option from the contextual menu. Xojo’s IDE will now add a new entry under the Events Definitions section of the class. Select it and use the associated Inspector Panel to change the following value:

• Name: Opening

Now, select the Closing event handler for the URLDesktopImageViewer subclass in the Navigator and type the following lines of code in the associated Code Editor:

If connection <> Nil Then
    RemoveHandler connection.contentReceived, WeakAddressOf ContentReceived
End If

RaiseEvent Closing

And because the subclass is consuming the Closing event handler, you’ll need to add a new Event Definition for it using the same event handler name (Closing).

Adding Methods

As you see, the code in the Set method for the URL property and the Opening Event Handler are calling the LoadURL method. So we need to add that! With the URLDesktopImageViewer selected in the Navigator, choose the “Add to URLDesktopImageViewer > Method” option from the contextual menu using the following value in the associated Inspector Panel:

• Method Name: LoadURL

And type the following lines of code in the associated Code Editor for the method:

If Me.mURL <> "" Then
    Try
      If connection <> Nil Then
        RemoveHandler connection.ContentReceived, WeakAddressOf ContentReceived
      End If

      connection = New URLConnection
      AddHandler connection.ContentReceived, WeakAddressOf ContentReceived
      connection.Send("GET", mURL)
    End Try
End If

In short, this creates a new URLConnection instance and assigns it to the Connection property. In order to handle the events generated during the URLConnection instance execution, we need to attach its events to some methods in our code. We achieve this with the AddHandler function which provides the name of the name we want to handle, in this case ContentReceived and the address of the method that will do the work. This is done by passing the method name (ContentReceived) to the function WeakAddressOf (or AddressOf, for the case).

Then, we need only to call the Send method of the URLConnection class and provide the “GET” verb and the URL that holds the picture we want to retrieve.

The last step is adding the ContentReceived method that will substitute the functionality of the ContentReceived Event Handler for our URLConnection instance.

Add a new method to the URLDesktopImageViewer subclass using the following values in the associated Code Editor:

• Name: ContentReceived
• Parameters: tCon As URLConnection, URL As String, HTTPStatus As Integer, content As String
• Scope: Public

As you can see, when we create a method that will substitute the functionality of an Event Handler, we need to provide the same type and number of parameters used by the original Event Handler, plus a first parameter that will hold the instance itself. In this case it is the parameter tCon As URLConnection.

Now type the following lines of code in the associated Code Editor:

Try

    If httpStatus = 200 Then Me.Image = Picture.FromData(content)

End Try

If we receive the “OK” status from the connection instance, then we assign the Picture created from the received data to the Image property of the control. And because things can go wrong^TM, and we didn’t take care of all the possibilities in order to keep this tutorial short, that line of code is wrapped in a Try…Catch block.

Testing URLDesktopImageViewer

In order to test our subclassed control, select the Window1 item in the Navigator so the Layout Editor is open in the main area of the Xojo IDE. Then, drag the URLDesktopImageViewer item from the Navigator and drop it in the Window control displayed in the Layout Editor.

With the new control selected in the Layout Editor, use the Inspector panel to set its width and height values, and any other parameter you wish. The interesting thing here is that you’ll find the URL field under the Behavior section of the Inspector Panel; so go ahead and type any URL pointing to the image you want to retrieve (for example: https://www.xojo.com/assets/img/logo@2x.png)

Done! Run the app and if your computer is connected to the Internet you’ll see how the image is retrieved from the given URL and displayed by the ImageViewer!

Of course, you can repeat these steps (or copy and paste them) in order to re-create your own URLiOSImageViewer control, as you can see in the above screenshot, with the Xojo iOS app running in the Simulator.

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.

Unlike VB and VB.NET, Xojo allows you to develop on your platform of choice- Windows, Mac or Linux. But being able to develop wherever you like isn’t the only reason Xojo is a great alternative to Visual Basic. Xojo is fully object-oriented, supported and regularly updated. It allows you to cross-compile desktop apps for Windows, Mac and Linux and Raspberry Pi. Currently, a Mac is required to compile projects for macOS and for iOS development and compilation; learn why. In additional to all this, Xojo allows you to compile apps for mobile and the web with that same powerful language and IDE.

Evaluating Xojo as a Visual Basic Alternative

Xojo is free for learning and development so you can take all the time you need to evaluate. Download Xojo and start learning while you develop, run and debug your projects in Xojo’s free IDE. Going through the QuickStarts and Tutorials, you’ll recognize how your knowledge of VB leads you to quickly embrace Xojo. Purchase a license only when you are ready to compile your projects.

To help make your transition from Visual Basic to Xojo easier, download this open-source Xojo.VB library that maps many Visual Basic commands to their Xojo equivalents. Watch this Migrating from VB video to see a simple VB app get migrated to Xojo. Visit our Migrating from Visual Basic page at the Xojo Docs for more details about Data Types, Commands and Controls.

Modernize Visual Basic Apps for Web and Mobile

Xojo it is a great way to modernize legacy Visual Basic desktop apps to web and mobile platforms.

Web Development – With Xojo’s programming language and IDE, web apps are as simple to develop as desktop apps. Instead of HTML, CSS, PHP, JavaScript, and AJAX, you’ll save tons of development time using the Xojo programming language. Xojo web apps are compiled to binary code and can be deployed to any server (Linux, macOS or Windows) as standalone web apps. For simple, secure one-click deployment of web apps plus built-in SSL and database support, use Xojo Cloud.

Mobile Development – With Xojo iOS you can design your apps using drag and drop in the layout editor, add your code and build. Access the iOS-features you’d expect, like sharing panel and your photo library, and also the iPhone’s hardware-based features, like motion, location and camera. Xojo makes iOS development familiar and fast. Xojo Android is currently in development.

Similarities Between Xojo and Visual Basic

As a Visual Basic developer, you will find Xojo very familiar. VB and Visual Basic.NET use a language similar to the Xojo programming language. You will notice that many of the commands are nearly the same. The default UI controls included with VB are, for the most part, also included with Xojo. You’ll also find that Xojo has several controls that are not included by default with VB like HTMLViewer/WebHTMLViewer, MoviePlayer/WebMoviePlayer and SearchField. 

Language – The Xojo programming language has commands like If..Then..Else, For..Next, and While..Loop. You will also find the object-oriented capabilities of Xojo are quite similar to VB.NET.

Data Types – Xojo shares many of the same data types with VB6 and VB.NET, including: Integer, Double, String/Text, Currency, Boolean, Variant.

Controls – Xojo has many common controls including: Buttons, Labels, TextFields, TextAreas, ListBoxes (grids), PopupMenus, ProgressBars, toolbars and more.

Differences Between Xojo and Visual Basic

Xojo definitely feels similar to Visual Basic, but you’ll find there are differences too. Many of these differences stem from Xojo’s focus on being cross-platform.

Shared Libraries – Xojo cannot create DLLs, ActiveX controls, .NET assemblies or any kind of shared libraries. Since these are all Windows-specific technologies, that is somewhat understandable for a cross-platform tool. If you’re depending on a DLL and are planning to deploy on Mac or Linux, you’ll need another solution for those operating systems. Fortunately, Xojo supports conditional compilation which makes it easy for your code to use DLLs only when compiling for Windows. If you find another library that provides a solution for MacOS and/or Linux, you can use conditional compilation there as well.

Compiler and Run-time – Xojo apps are compiled to native code. They do not contain byte-code that is run by a virtual machine (as with .NET). The run-time library is included with your applications so there is nothing additional that needs to be installed on users’ computers.

Language and Framework – Xojo is fully object-oriented. Unlike VB6, you can have classes that use inheritance and other object-oriented features. The Xojo framework is designed to be simple to use and support cross-platform applications; it provides access to many things you’ve come to expect such as file handling, databases, graphics and more.

File I/O – One of the biggest differences between VB6 and Xojo is file I/O. Xojo consolidates all its file processing into a few classes: FolderItem, TextInputStream, TextOutputStream and BinaryStream. VB6 uses hard-coded file paths and less flexible file access methods, primarily because it only needs to work with Windows-specific file paths.

Data Types – Xojo is strongly typed, just like VB.NET. VB6 allows you to do some things the old-school, BASIC way, the most significant of which is using variables without declaring them (the type is inferred by a suffix on the name). Xojo does not allow this. Use the OPTION EXPLICIT command in all your Visual Basic code to have VB enforce explicit variable declarations.

Improved Error Handling – Xojo has modern exception handling using Try/Catch, Exception and App.UnhandledException.

Enjoy Coding Again

Whether you need VB for Mac, or VB for Linux or just an updated, rapid-application development tool for Windows, Xojo is that alternative! If you find yourself frustrated with VB.NET or you’re still looking for something to replace VB6, test out Xojo. If saving time and money is a concern, Xojo is a development tool you should consider. Go ahead and download Xojo and see how much you have missed coding like this!

Like all development tools we know Xojo isn’t a fit for every project, so all Xojo licenses come with a 90 day money-back guarantee. We’ve been around for more than 25 years now, and we’ll be here when your next project is looking for a quick way to get off the ground and into development! Questions? I’m here for that, email me, a human being and Xojo fan, anytime at hello@xojo.com.

In order to instruct a FolderItem to delete itself when it’s out of scope, we will create a new class that will act as a wrapper for the FolderItem, making use of the Operator_Convert method, so we can assign a FolderItem to it and also get the underlying FolderItem wrapped in it.

So, go ahead and create a new Class. We can name it as TempFolderItem with an empty Super class in the Inspector Panel.

Add a new property to the new TempFolderItem class, using the following values in the Inspector Panel:

• Name: mFile
• Type: FolderItem
• Scope: Protected

Next, let’s add a Constructor method to our class with the following signature:

• Name: Constructor
• Parameters: f As FolderItem
• Scope: Public

And simply put this line of code in the associated Code Editor:

mFile = f

Then, we need to add a couple of Operator_Convert methods:

• Name: Operator_Convert
• Parameters: f As FolderItem
• Scope: Public
• Code Editor: mFile = f

• Name: Operator_Convert
• Returned Type: FolderItem
• Scope: Public
• Code Editor: Return mFile

Finally, we will add the Destructor method. This one will be in charge of deleting the underlaying FolderItem once the class instance is out of scope:

• Name: Destructor
• Scope: Public
• Code Editor:

Try

  If mfile <> Nil And mfile.Exists And mfile.IsWriteable Then

    If Not mFile.IsFolder Then

    mfile.Remove

  End

End If

Catch e As IOException
  Raise e
End Try

Temporary FolderItems in Practice

That’s all – our class definition is done! In order to test it, create a Desktop project, add the Open Event Handler to the default window and write this snippet of code in the Code Editor:

Const textContent As String = "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
f = New TempFolderItem(specialfolder.desktop.child("Test.txt"))

Try

  Var tos As TextOutputStream = TextOutputStream.Open(f)
  tos.WriteLine textContent
  tos.Close

Catch e As IOException
  MessageBox(e.Message)
End Try

Next add a new Property to the default window (Window1) using the following values in the Panel Inspector:

• Property Name: f
• Type: TempFolderItem
• Scope: Public

This way, the TempFolderItem will be in Scope (this is, in memory) while the Window1 window remains opened. Once we close the window, everything will be destroyed from memory, including this property. Also the underlying FolderItem stored on it via the Destructor method of our class will be deleted.

Run the example project and see how it works. While the Window1 window remains open, our file will be available in the Desktop; but as soon we close the Window1 window… the file will be deleted automatically!

Questions? Ask me about Xojo programming on Twitter @XojoES or on the Xojo Forum.

Each year for Hour of Code, I volunteer at the local Middle School to talk to the students about what it is like to be a programmer and do a little bit of programming. This year I plan to demonstrate Xojo Dojo with a Raspberry Pi and show the kids how much fun coding and Xojo programming can be.

My wife teaches 7th grade math so I have a somewhat receptive audience, at least when it comes to middle school students. Of course, I’ll be sure to show off a few games made with Xojo. Asteroid Run was popular last year.

As Xojo developers you have a great perspective on coding, which would be wonderful to share with the youth of today. Most schools would absolutely welcome a guest speaker for a day so if you have a child in school or know someone that works at a school, I encourage you to see if you can help out by volunteering.

Looking for ideas? Here’s what we’ve done for the Hour of Code in past years:

• Hour of Code 2013: Math Facts
• Hour of Code 2013: Spelling Test
• Hour of Code 2013: Recap
• Hour of Code 2014: iOS Doodle
• Hour of Code 2014 Recap
• Hour of Code 2015: Cat Pictures
• Hour of Code 2017: Asteroid Run

Update (Dec 5, 2018):

Finished hour of code with 7th Grade students. They were very excited to learn a bit about coding and see some Xojo-made games.

Also, Xojo Dojo is now available for Mac and Windows. Download either of these from the main Xojo Dojo page.

With Xojo Dojo you get a simple code editor where you can write code using the Xojo programming language and a small set of additional commands for graphics, GPIO and some other things. It’s a great way to learn programming basics. Xojo Dojo includes several sample scripts to get you started.

For more information, check out the Xojo Dojo doc page.

Download the source from GitLab.

Add your #JustCode project to the week 11 forum conversation.

Download and check out earlier projects:

• Week 10: NetTank
• Week 9: Quote Web Service
• Week 8: JumpStart App Launcher
• Week 7: Pitch Tracker
• Week 6: Bubble Popper
• Week 5: Math Quiz
• Week 4: Mini-Golf ScoreKeeper
• Week 3: Dogs Up!
• Week 2: Password Generator
• Week 1: Color Picker

sudo apt-get install libunwind8

The Raspberry Pi OS (Raspbian) does not automatically update itself. Since it is always a good idea to keep your Pi up to date, you can do it easily from Terminal using these commands:

sudo apt-get update
sudo apt-get upgrade

To learn more about Raspberry Pi and Xojo:

• Getting Started with Raspberry Pi
• Programming the Raspberry Pi with Xojo book

And don’t forget, you can build Console and Desktop apps for Raspberry Pi with your free Xojo license.

UPDATE: Now with Xojo 2019r1, you can develop and build console and desktop apps for the Raspberry Pi for free! Download today and get started! Xojo Pi supports Raspberry Pi 2, 3 & 4.

Back at XDC 2015 when we announced Xojo would be adding support for the Raspberry Pi, we thought it was a fun extra for Xojo users. We were not expecting the overwhelming excitement and interest from the Xojo community and makers around the world! To celebrate Pi Day like the true geeks we are, we’re making Xojo Pi licenses free from Pi Day & forever!

Email hello@xojo.com for your free Xojo Pi license activation code.

Share the new with you friends, we’re on Twitter, Facebook, Instagram and LinkedIn.

UPDATED: 4/8/2019

Of course, Xojo apps work just fine on Raspbian Stretch.

The blog post does have this caveat about the upgrade:

Upgrading an existing Jessie image is possible, but is not guaranteed to work in every circumstance.

This scared me a bit, so I decided I would rebuild my SD card with Stretch so I could have a clean install. Here is how you can set up a new SD card and tweak some settings to make it easier to access the Pi remotely:

1. Download the Raspbian image from the official download page: Raspberry Pi Downloads
2. Download Etcher, which is a tool that can set up the SD card with the image.
3. Shut down your Raspberry Pi and removed its SD card. Be sure to first copy off any data you want to retain as this process will wipe the card and any data on it.
4. Plug the SD card into your computer. I used a USB micro SD card adapter for my Mac.
5. Run Etcher and select the Raspbian image you downloaded earlier.
6. Select the SD card in Etcher and click Flash. This wipes the card and installs Raspbian on it.
7. When it finishes, put the SD card back into the Raspberry Pi and power it up. You’ll also want to connect the Pi to a keyboard, mouse and display so you can do some initial configuration.
8. After the Pi boots and you are at the desktop, connect to your WiFi network.
9. Click the Pi icon in the menu and select Preferences->Raspberry Pi Configuration.
10. On the Interfaces tab, enable SSH and enable VNC.
11. You may also want to go to the Localisation tab and set the timezone.
12. Click OK.
13. Make a note of the Pi’s IP address if you do not know it. You can see the IP address by hovering the mouse over the WiFi icon in the menu.
14. Back on your computer, download RealVNC Viewer.
15. Install and run RealVNC Viewer.
16. Add a new connection and enter the IP address of your Raspberry Pi. You’ll be prompted for the username/password with is pi/raspberry unless you changed it.
17. You’ll now be remotely connected to the Pi and can use it without it being connected to a keyboard, mouse and display. This means you can also disconnect the keyboard, mouse and display if you want.
18. With this setup you can also use an FTP app to transfer files to the Pi. Just use the IP address and username/password for the Pi.
19. Lastly, refer to these steps to set up the Remote Debugger on the Pi so you can easily run and test your Xojo apps directly on the Pi.

To learn more about using the Raspberry Pi and Xojo together, refer to our free Programming the Raspberry Pi with Xojo book and the Raspberry Pi section of the User Guide.

Let’s take a closer look at what this means for your Linux apps:

Besides the benefit of not having to tell your end users to install GTK+ 2 on their particular Linux distro, here are some other notable items affected by the GTK+ 3 transition:

While there’s a short list of actual differences, there have been numerous changes underneath made during this transition. For example, features that we had to custom code because GTK+ 2 did not offer them but GTK+ 3 did. Updating to GTK+ 3 is the final piece to our cross-platform HiDPI support for Desktop apps. Until the day comes when we have to say goodbye to GTK+ 3 (GTK+ 4 is already in the works), we welcome its inclusion in Xojo with a long overdue “Hello”!

I decided what would work for me is to have demo app automatically launch when the Pi boots. This would allow me to demo the app and project anywhere just by plugging in the Pi. There are several ways that a Pi can automatically start an app. After doing a bit of Google research I decided on this approach:

1. Open the /etc/rc.local file (you’ll want to use sudo):

   sudo nano /etc/rc.local

2. Add lines to automatically start the app you want. My app was a console app that used GPIO, so I added these two lines:

   export WIRINGPI_GPIOMEM=1
   /home/pi/Documents/Xojo/LCDPanel &

For reference, this is my rc.local file contents:

#!/bin/sh -e
#
# rc.local
#
# This script is executed at the end of each multiuser runlevel.
# Make sure that the script will "exit 0" on success or any other
# value on error.
#
# In order to enable or disable this script just change the execution
# bits.
#
# By default this script does nothing.

# Print the IP address
_IP=$(hostname -I) || true
if [ "$_IP" ]; then
 printf "My IP address is %s\n" "$_IP"
fi

export WIRINGPI_GPIOMEM=1
/home/pi/Documents/Xojo/LCDPanel/LCDPanel &

exit 0

You can develop and build console and desktop apps for the Raspberry Pi using Xojo 2019r1 or later for free.

Download Xojo today and get started!

Fun times at XDC: