Drag and Drop Support

The biggest thing this time is that we’ve added general drag and drop support for web. From now on, any visual control can be dragged or accept drops.. That includes controls created using the Web SDK, allowing you (and third-party developers!) to increase the user experience on your web projects.

Now, imagine new ways of updating a Database application. For example, creating a “Form Builder”, a full “Website Builder” or even a “Database Schema” web application where the user can drag elements from a library and drop them into the editor. Are you scheduling posts on social networks using a WebDatePicker? What about using a calendar view with drag and drop support?

We’ve included a drag and drop Kanban board example. Take a look at the blog post to learn more about it.

How cool is that?

While drag and drop can make your app easier to work with for some users, it can also be an accessibility barrier for other users. Just remember to offer an alternative way for interacting with your application. In a full featured Kanban app, for example, the user should still be able to change the status of a task from the task details screen, using a regular WebPopupMenu (or any other accessible method)

WebListBox Updates

Speaking of dragging things, WebListBox also now supports reordering rows using the mouse. Just enable the new Allow Row Reordering property (which is Off by default) and you are all set.

This can also be set programmatically at runtime with AllowRowReordering. Once the user finishes a reorder, the RowsReordered event is called, allowing you to persist the changes in your database, for example.

Another requested feature was to allow users to perform inline edits. WebListBox received some new methods and events to handle this:

• ColumnTypeAt: To make a whole column editable
• CellTypeAt: To override the ColumnTypeAt on specific cells
• EditCellAt: A method you can use to begin the edit on specific cells
• CellAction Event: Allowing you to persist the changes made by the user

This is also supported when using a WebDataSource.

And not only are TextField and TextArea supported, CheckBox is also part of the WebListBox.CellTypes enumeration, to match what DesktopListBox supports:

Last, but not least, we’ve decided to split CellTextAt into two different methods. Until now, you could get and set the caption of a cell using CellTextAt, but also a WebListBoxCellRenderer. This could cause trouble because a Variant was being returned, that could be either a String or a WebListBoxCellRenderer so, when not being used carefully, it could raise IllegalCastException at runtime.

From now on, CellTextAt will only support String. If you want to get or set a cell renderer, you will have to use CellRendererAt instead. This makes the API more obvious.

If you were using CellTextAt for getting and setting cell renderers, you will need to update your code to use CellRendererAt instead.

Wrapping Up

This release empowers Xojo Web projects to meet more user needs, no JavaScript required. Drag and drop finally joins the party, filling a critical gap from the old Web 1 framework.

Be sure to dig into the release notes, as 2025r1 packs over 40 changes for the web target alone.

I’d love to hear how you’re weaving these updates into your projects! Drop some screenshots or screen recordings in a new forum thread or shoot me a private message if you prefer.

Happy coding!

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.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

What are Transactions?

A transaction is a sequence of SQL commands executed as a single unit, adhering to the ACID properties:

• Atomicity: All or none of the changes are applied.
• Consistency: The database remains in a valid state.
• Isolation: Concurrent transactions do not interfere with each other.
• Durability: Once committed, changes are permanent.

Basic Transaction Commands

SQLite supports three main commands for transactions:

• BEGIN TRANSACTION: Starts a new transaction.
• COMMIT: Finalizes changes and makes them permanent.
• ROLLBACK: Reverts changes made since the last BEGIN TRANSACTION.

Sample in Xojo

Let’s consider a banking application where money is transferred between accounts. Without transactions, inconsistencies might occur. For example, if the first update (deducting money from one account) succeeds but the second update (adding money to another account) fails, the database will be left in an inconsistent state, reflecting a transfer that didn’t fully happen. Using transactions ensures that both updates either succeed or fail together, maintaining consistency.

Var db As New SQLiteDatabase
db.DatabaseFile = FolderItem.ShowOpenFileDialog("bank.db")
If db.Connect Then
  Try
    db.BeginTransaction
    db.ExecuteSQL("UPDATE accounts SET balance=balance-100 WHERE account_number=123")
    db.ExecuteSQL("UPDATE accounts SET balance=balance+100 WHERE account_number=456")
    db.CommitTransaction
  Catch e As DatabaseException
    db.RollbackTransaction
    MessageBox("Transaction failed: " + e.Message)
  End Try
Else
  MessageBox("Failed to connect to the database")
End If

In this example, BeginTransaction starts the transaction. The UPDATE commands perform the transfer. If successful, CommitTransaction finalizes the changes. If an error occurs, RollbackTransaction reverts all changes.

Advanced Transaction Control

SQLite also offers advanced transaction modes: DEFERRED, IMMEDIATE, and EXCLUSIVE.

• DEFERRED: Default mode, acquires a write lock only when the first write operation occurs.
• IMMEDIATE: Acquires a write lock immediately upon transaction start.
• EXCLUSIVE: Prevents all other read and write operations during the transaction.

Choosing the transaction type depends on the application’s specific requirements. DEFERRED balances concurrency and consistency, while IMMEDIATE and EXCLUSIVE provide higher isolation at the cost of concurrency.

Example of Advanced Transaction

If db.Connect Then
  Try
    db.ExecuteSQL("BEGIN IMMEDIATE TRANSACTION")

    ' Perform read and write operations here

    db.CommitTransaction
  Catch e As DatabaseException
    db.RollbackTransaction
    MessageBox("Transaction failed: " + e.Message)
  End Try
Else
  MessageBox("Failed to connect to the database")
End If

In this example, an IMMEDIATE transaction ensures exclusive access from the start.

Transaction Speed Considerations

The speed of transactions in SQLite can be influenced by various factors:

• Batching Operations: Grouping multiple operations in a single transaction can significantly improve performance.
• Disk I/O: The underlying storage medium and its I/O performance impact transaction speed.
• Transaction Type: IMMEDIATE and EXCLUSIVE transactions might be slower due to locking mechanisms but provide higher isolation.

Batching multiple operations into a single transaction reduces the overhead of repeatedly acquiring and releasing locks, leading to faster execution.

Benefits of Using Transactions

Using transactions offers numerous benefits:

1. Atomicity: Prevents the database from being left in an inconsistent state due to partial updates.
2. Consistency: Ensures the integrity of the database by transitioning only to valid states.
3. Isolation: Prevents interference between concurrent transactions.
4. Durability: Ensures that committed changes are permanent, even in the event of a system failure.

By understanding and applying transactions, developers can create robust applications that handle data modifications seamlessly, minimizing the risk of errors and inconsistencies.

Based on the Ducklet Blog article. Happy coding!

Martin T. is a Xojo MVP and has been very involved in testing Android support.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Database Support

Xojo works with a wide variety of databases. SQLite is bundled with your Xojo license and is a great beginner database for desktop, web and mobile apps. Xojo includes direct support for SQLite, PostgreSQL and MySQL. Plus, you can use ODBC to connect to just about anything else, such as Oracle, MS-SQL Server, Microsoft Access, Firebird or even IBM iSeries.

Examples

To help you get started, there are many examples in the Examples/Databases folder included with the Xojo Download, including examples that connect to each of the supported databases. You can find a breakdown of the examples included in the Examples folder in the Xojo Programming Language Documentation.

Additionally, you can check out the Eddie’s Electronics sample app (located in Examples/Sample Applications/EddiesElectronics) to see how to share database code between Xojo desktop and Xojo web apps.

DBKit is an example project designed to make it easier to build desktop and web applications that are front-ends to databases. Specifically, DBKit makes it easy to connect a database table to the user interface controls on a layout. DBKit also handles a lot of the interface for you. You can read more about DBKit in the Xojo Documentation.

Read: Documentation

After you have reviewed the examples, the Database Overview in the Xojo Documentation will help with next steps. Remember, Xojo comes bundled with SQLite which is an excellent database for desktop, web and mobile apps. Read more about using SQLite in the Xojo Documentation and check out this SQLite Tutorial for more detail.

Watch: Videos

The Xojo YouTube channel has hundreds of videos on all things Xojo. Here are the most recent Xojo Database videos and playlists:

• Video: Connecting to a Database from Xojo
• Video: Updating a Database from Xojo
• Video: Querying a Database from Xojo
• Video: Managing the UI when Updating a Database
• Video: Using DBKit to easily connect databases to Xojo applications
• Playlist: Using Databases with Xojo – A growing, catch-all playlist for videos related to Xojo and databases.
• Playlist: Xojo and SQLite – SQLite comes bundled with Xojo and is a great database for beginners building desktop, web and mobile apps with Xojo.

Vendor Documentation

Lastly, you should always refer to the vendor-specific documentation for the database you are using to learn the specifics about how that database works, including SQL syntax.

• SQLite
• PostgreSQL
• MySQL
• Oracle Database
• Microsoft SQL Server

Xojo simplifies the development process, reduces complexity and empowers developers to create efficient and functional database applications with relative ease. The Xojo IDE is free to use for development and testing – design, develop, run and debug your app all without a license. Purchase a license when you are ready to compile your apps, licenses start at $149. Visit the Xojo Store to find the license right for your project.

If you have questions after you have reviewed these materials, the Xojo Forum is an accessible and essential resource for Xojo users of all levels. You can also contact Xojo directly with your questions.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Conference Apps

The XDC App is available on both iOS and Android for the first time ever! Search ‘XDC 2023’ in the Google Play Store or iOS App Store. A shoutout and big thank you to Xojo MVPs Martin T and Jérémie Leroy for making these apps. Martin wanted to test out the Android pre-release by developing a real world Android app. Jeremie then used Martin’s project to create an iOS version in a few days.

XDC Videos

We are pleased to announce that all of the XDC session videos and keynote will be available free on Xojo’s YouTube channel (XDC 2023 Playlist). You can subscribe to the YouTube channel to receive notifications when new videos are posted.

Bug Bash

As we announced at the last conference, we are spending two weeks per release cycle working on bug bash type bugs. This means we are looking for bugs that do not meet the regular criteria, so they are old, only affect one person or a small number of people, etc. For Xojo 2023r2 there are already 17 issues of this sort that have been resolved. One of them, for example, was reported twelve years ago. We are committed to focus on bug fixes and will continue to fix these types of bugs during each release cycle. As a reminder, if you have a bug that is a showstopper for you, something you cannot work around, please contact us – our technical support team may be able to help you or can escalate it to an engineer.

Recent New Features

In his Keynote, Geoff discussed some recent new features, including PDF, the ChartControl, Filtering the Debugger and more.

DesktopXAMLContainer: This is the foundation for what will be our updated Windows controls. We will start with using the new controls in the Desktop XAML container but in the future they will replace the Win32 controls with modern controls. William will be talking more about this in his session.

Popover Control: A dialog-like layout that can pop-up over the existing layout is in the works.

DatabaseConnection Class: A lot of work has been done to make connecting to databases easier with more on the way.

Xojo Libraries (formerly Xojo Plugins): Using Xojo libraries, you will be able to take some portion of a Xojo project and compile to a library you can distribute or use in your other projects.

Sales & Community Growth

Sales of Xojo licenses continue to grow in 2023! This year-to-date, license renewals are up 10% over the same period last year and new license sales are up 20%.

In-Person Events

Apple, Google and others have moved to mostly online events. And in that same light, Xojo will be focusing more on on-demand events and videos. Given peoples’ comfort and preference for online, on-demand content, we do not plan on having an XDC 2024.

Android

Xojo Android is currently at 96% completion with only a handful of things remaining. Android will be shipping in the next release of Xojo, 2023r2 (marked as beta). If you have a current Xojo iOS, Pro or Pro Plus license, Android will be included at no additional charge. The iOS license will become a Mobile license and will build for both iOS and Android.

Android in the Future

Initially, you will need to develop separate Android and iOS projects. The end that we are working towards will be a single mobile project that builds for both Android and iOS similar to how Desktop projects build for Mac, Windows an Linux.

Now that we are getting closer to Android shipping, we look forward to more time for us to focus on other things.

Artificial Intelligence

AI may not be on the roadmap but we are definitely thinking about it. There are some significant gains in the apps and how you create them. If you have input please reach out to us and let us know how you could use AI in your projects, or create a feature request. We are excited to see how the world of development and software in general will change with AI.

The rest of the sessions today will be presented by the Xojo Engineers. We look forward to hearing from Paul, William, Travis and Ricardo. We will keep this blog post updated and will let you all know when the videos are ready to watch! We look forward to the next few days and a great conference!

For most Xojo users, this update won’t require any changes at all to your existing projects. For those that create their own controls using the Web SDK, there will likely be a minor bit of work.

Dark Mode Support

The Web framework is currently the only Xojo framework that doesn’t support Dark Mode. Fortunately, Bootstrap 5 does. As with Desktop targets, users of your web projects will be able to decide between the light and dark modes. We plan for this to work identically to the way it works for your Desktop projects now. There will be a Supports Dark Mode Build Setting that will be off by default for existing projects and on by default for new ones.

More than Dark Mode

Visually, Bootstrap 5 comes with some subtle changes. For example the blue color it uses is still blue… but not that blue, helping to increase the contrast of your buttons.

You may notice that the buttons are a little bit rounder by default, following the latest design trends.

The look and feel of some input controls, like checkboxes and radio buttons, will be more similar between different browsers and operating systems.

Bootstrap 5 also includes new components and features, like Accordion and Offcanvas. These may find their way into future releases via the Web framework or from one of the third-party control developers.

Finally, Bootstrap 5 no longer depends on jQuery and it makes use of the latest CSS features which brings us to the next section.

Potential Migration Challenges

We’ve made it so most Xojo users won’t need to make any changes to their web projects. For example, we’ve adapted the Breadcrumb control to look like Bootstrap 4 by default. Generally speaking, if you are using the default theme and you aren’t using third-party controls, you won’t need to do anything special.

However, if you are currently using a custom Bootstrap 4 theme that uses a custom bootstrap.min.css file, it may not work properly. If you’ve downloaded the theme from a website such as Bootswatch, you can download an updated Bootstrap 5 compatible theme from the same site. Bootstrap 5 themes are actually easier to find than those for v4.

We are announcing this change to v5 in advance to allow third-party library developers the time to adapt their code and make use of the new Bootstrap 5 HTML and JavaScript API. If you rely upon any third-party controls for your web projects, you will need to upgrade them when new Bootstrap 5-compatible versions become available.

To make the migration as smooth as possible for everyone, we will continue including jQuery and provide independent betas, prior to releasing a version of Xojo with Bootstrap 5.

In the Bootstrap 5 Migration Guide you can find an extensive list of changes and improvements since Bootstrap 4.6.

If you have any questions, please feel free to ask on the Forum. Users attending the Xojo Developer Conference can also meet and talk in person with Xojo engineers, about this or any other topic.

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.

Prior to Xojo 2022r4 the preview for WebListBox instances was a mere gray box with a small icon inside. This isn’t very helpful for visualizing how your design will look when the control is filled with data.

Now, you will get a preview that more closely resembles to the one provided by the ListBox in Desktop projects. That means the WebListBox preview will display the columns adjusted to the provided columns width and also the initial values (if any). Additionally, WebListBox will react to the change of width in the Layout Editor.

This improvement gives you a much better idea on how your WebListBox will look when the app is run in a browser.

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

Depending on your flavor of Linux (in this example we’re using Gnome on Ubuntu 20.04), you can change themes from your Settings/Appearance sidebar:

And for those interested in other themes, you can also change themes at the command line:

gsettings set org.gnome.desktop.interface gtk-theme 'Yaru-dark'

Xojo will be able to determine which themes are dark mode savvy. Now you are ready to enjoy the dark side of Linux along with Xojo!

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

Xojo’s team was all vaxxed-up and so happy to get together in Nashville for #XDC2022. Tennessee’s Music City was a delightful backdrop for the first in-person Xojo event since 2019. Check out the short highlights video from Nashville and then join us for #XDC2023 in London, UK. You can register here.

This year the Xojo team and community welcomed a new Xojo engineer, Ricardo Cruz. Ricardo has applied his expertise to advance and improve Xojo Web. To quote one of Xojo’s engineers, “Ricardo coming in has been awesome,” a sentiment echoed on the Forum and the community in Nashville.

Xojo Web has come so far this year. Control reliability has improved, IDE previews have improved and reconnections have really improved. The web framework can now more often reconnect back to the same web session if it still exists. This is one of the things Ricardo is really happy about, “You can switch to your email app in your mobile, copy something to the clipboard, come back to the web app and it is still there, ready to continue.” Under the hood, some dependencies received updates, like jQuery. As a user, you don’t have to do anything, just use the new Xojo version! Try to tell that to another web developer, that’s sci-fi outside of Xojo. Also, thanks to the community, the memory and CPU usage continues to be improved release after release. “Honestly from my perspective it is just fun to play with little projects in it because it has really matured,” says Xojo’s Director of Engineering, Travis Hill.

Speaking of technical achievements, this year we added two new targets to Xojo: Windows on ARM 64 and Linux on ARM 64. On Windows, you can natively deploy to ARM-based tablets and laptops that run Windows. On Linux, you can deploy to 64-bit Raspberry Pi which can address significantly more RAM than 32-bit versions.

We built the Xojo Cloud Control Panel with an updated version of Xojo, and thanks to some Web framework improvements the controls now stay more responsive under load. Plus we’ve added Xojo Cloud servers in Sydney, Australia for web developers in Australia and New Zealand. We also continued improving and testing our upcoming support for Android, which is now feature complete and awaiting some remaining bug fixes before we make it available to everyone.

In addition, we want to brag about a few technical improvements, including the numerous PDF updates implemented by Xojo Engineer and now PDF expert, Javier Menéndez. Also there is the option to generate Program Database (PDB) files on Windows and improved multi-monitor support shepherded by Xojo Engineer William Yu. The list goes on: Code Assistants, on-device debugging in iOS, new Xojo Documentation site, adding Controls at runtime, loading speed faster for big projects, and the time team-Lefebvre built a web app to Calculate Combat Rolls in Twilight Imperium…

Inside Xojo we improved a lot too. Besides welcoming Ricardo and his beard to the team, we migrated Xojo’s bug and feature reporting platform from the internally managed Feedback tool to the much loved Issues. This has increased productivity, streamlined work flow, made it easier to search and find, comment, edit. The team couldn’t be happier!

This year also included Xojo’s first Bug Bash in a long time! During the Bug Bash, Xojo’s Code Editor got some much needed improvements resulting in noticeably faster updates. Plus updates to the Syntax Help Area thanks to Xojo Engineer and retro-computing expert, Paul Lefebvre. Besides the very real smashing of 100 bugs, the bash had the unintended consequence of giving the engineers an opportunity to work on things they don’t normally work on, giving engineers opportunities to collaborate and better solve things.

All in all, 2022 was a year of forward movement for Xojo. Which has us leaning into 2023 with a lot of excitement and expectation. Our team is committed to continuing to make Xojo the best cross-platform development tool and we thank you for being part of Xojo’s continued success!

I first made a desktop Secret Santa app back in 2015 for an event with friends. We were tired of drawing names out of a hat and having couples being paired together. The app I created solved that problem because couples were excluded from offering a gift to each other. And we didn’t need a hat!

In November of 2018, I had the idea of making a Secret Santa iOS app so that anyone with an iPhone or iPad could benefit from the same features I had been enjoying for the past 3 years.

The app would need to be easy to use, avoid couples getting matched with each other, send notifications by email without letting the organizer know which pairs were matched, and of course make sure no name would be assigned twice.

After just 8 days of development, the app was ready to ship and sent to the App Store.

Within 5 days, the app had been downloaded from 35 different countries and was my fastest app to reach 1000 downloads!

Having the app translated to English, French, Italian, and Spanish in the initial release helped to reach more users.

Version 1.1 of the app was released a few days later with German and Portuguese translations.

That’s when I realized that Secret Santa is something extremely common in Latin America. Many families draw names for Christmas so that they can give and receive one big gift instead of smaller trivial gifts for each family member.

Most updates of the app came with new localizations, which really helped in realizing more and more downloads. After 3 years of updates, the app is now available in 32 languages.

A high quantity of downloads also meant that I received a lot of feedback from users. Many users were happy with the current features, but I started getting feature requests to send the gift pairs by SMS or WhatsApp instead of by email. We all have a parent or grand-parent who isn’t tech-savvy and doesn’t have an email address.

Leveraging the biggest advantage of Xojo – Sharing code across platforms

From 2018 until 2022, I had become used to updating the Secret Santa app itself to add new features and new translations while also fixing bugs. This year, I received a message from an unhappy user stating that they really need a wishlist feature and downloaded my app thinking it already had one.

A valid wishlist feature needed to be accessible to anyone with an Internet connection, whether they used a computer, an iPhone, or an Android device.

Using Xojo Web and a coding language I already knew was the obvious choice for this task. Sharing important bits of code from my main iOS project to the web wishlist project was as easy as copy and paste.

As with any Xojo project, copying classes from one project to the other was a real time saver, especially for the API layer required to communicate between Xojo and the online database that holds all the Secret Santa data.

The main difficulty working on a web project came from the UI. Not that Xojo Web’s UI is difficult, but I am so used to designing mobile apps that my brain didn’t know where to start.

I knew I wanted to display two columns of data:

• The user’s wishlist
• The wishlist from the person they are offering a gift to

The layout had to be responsive to be accessible on both mobile and desktop devices.

Graffitisuite from Anthony Cyphers came to mind, and within a few minutes of reviewing the online demo, I was convinced to use GraffitiKanban web control. I am a big fan of Trello for organizing my work, displaying cards in labeled columns. That’s exactly what I needed for the wishlist feature.

GraffitiKanban is “responsive” (Web Design term), meaning the display changes to adapt to smaller screens such as mobile devices.

GraffitiSuite also offers a wide variety of UI elements that made me save a lot of time.

7 days after the initial feature request, the wishlist feature was available to all.

Wishlist on a desktop browser:

Wishlist on a mobile browser:

Deploying the app to Xojo Cloud was extremely easy.

A single button press in Xojo, a subdomain DNS record, 2 minutes of configuration in Cloudflare, and the web app was up, running, and accessible through HTTPS.

Customer use of the wishlist feature has blown-up more than I ever would have expected. So far 30,000 gift ideas have been added to the wishlist (and counting).

The next feature request

With an app that sees 60,000 new users per month, I receive a lot of feature requests. Most recently, I received a one star review on the app store because my app isn’t accessible to the Visually Impared. When VoiceOver is activated, all it says is “button”, “button”, “button”, with no explanation.

Adding voice-over capabilities in Xojo is simple. The MobileUIControl class has two String properties, AccessibilityHint and AccessibilityLabel.

But it actually is a lengthy task to check each control on each screen and make sure that the translations are correct.

VoiceOver support will soon be released in English and French, but all other localizations will be only ready next year. It is currently a bad time to get 30 different translators to work on the project under such short notice.

Xojo has enabled me to create a business out of developing iOS apps for the App Store. Including all of my apps, I have had over 6.5 million downloads and counting. Secret Santa is a prime example of what is possible and how you can leverage your Xojo skills to expand to other platforms when you need to. I look forward to what’s to come and will be at XDC London to learn more about the future.

If you are organizing a Secret Santa event or just curious to see the app, download Secret Santa on the App Store.

Jérémie Leroy has been using Xojo since 2008, he won two Xojo Design Awards in the iOS App category and has released over 13 iOS apps made with Xojo on the App Store. He also released iOSDesignExtensions on Github to help style and polish your Xojo made iOS apps.

Place a WebCheckbox into your WebPage. Add the Opening Event Handler to your checkbox.

Inside, paste this code:

Me.ExecuteJavaScript("document.getElementById('" + Me.ControlID + "').classList.add('custom-switch');")
Me.Style.Value("padding-left") = "32px" // Adjust if needed

Run the project. Enjoy!

If you like this control, consider creating a WebCheckbox subclass so you can easily reuse it.

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.

But first, what’s an Extension Method anyway?

There are situations where you want to add functionality to a Xojo Framework class. Let’s say we want to add a method to every visual web control. We know that every visual control inherits from WebUIControl. This class can’t be modified, as it’s part of the framework. One option would be subclassing each control and adding new methods… but that’s so boring…

Extension Methods are part of the Modules feature, allowing us to extend classes with methods, even if we don’t have access to their source code.

Adding SetBadge and RemoveBadge methods to every visual control

The first thing you need is a Module. Press on the Add button from the toolbar and select Module. The name of the module is up to you, I’ll be using WebExtensions in this example.

Now add a new method into that module, called “SetBadge”. Then, in the inspector, ensure its visibility is set to Global, instead of Public or Protected.

The magic happens in the first parameter of this method. “Extends” is the reserved keyword for this feature, for example:

Extends myInstance As ExampleClass

Above method would be extending an imaginary class called “ExampleClass”, and its instance would be available inside that method, accessible from the variable “myInstance”.

In our case, for SetBadge, we want to use this method signature instead:

Extends control As WebUIControl, caption As String, indicator As String = "danger", top As Integer = -10, right As Integer = -10

Inside, paste the method contents:

Var classes() As String = Array("xojo-badge", "d-flex", "p-2", _ 
"border", "border-light", "bg-" + indicator) 
classes.Add(If(caption.Length < 2, "rounded-circle", "rounded-pill"))

Var styles() As String = Array("height: 21px", "font-size: 10px", _ 
"align-items: center", "color: white", "position: absolute", _ 
"top: " + top.ToString + "px", "right: " + Right.ToString + "px", _ 
"z-index: 10")

If caption = "" Or caption = " " Then caption = "&nbsp;"
Var html As String = "<span class=""" + String.FromArray(classes) + _
""" style=""" + String.FromArray(styles, ";") + """>" + caption + "</span>"

Var js() As String
js.Add("$('#" + control.ControlID + " .xojo-badge').remove();") 
js.Add("$('#" + control.ControlID + "').append(`" + html + "`);")
control.ExecuteJavaScript(String.FromArray(js))

What this little sorcery does is appending a new HTML layer into our control, using some Bootstrap’s component CSS classes. Did you notice we are using “control” instead of “Self”? It matches the “control” variable from the method definition.

Add another Extension Method for removing the badges, called “RemoveBadge”.

The method definition reads like this:

Extends control As WebUIControl

The content is a bit easier this time:

Var js As String = "$('#" + control.ControlID + " .xojo-badge').remove();"
control.ExecuteJavaScript(js)

That’s it. Plumbing done.

Now, if you have a WebButton called… “AwesomeButton”, you can set its badge using this code:

AwesomeButton.SetBadge("Hello!")

And to remove it:

AwesomeButton.RemoveBadge()

You can use these badges in different scenarios. From displaying a pending notifications counter in a WebButton, to validation errors in a WebTextField.

Adjust and play with the code to meet your needs! 

You can download the example from the GitHub code repository.

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.

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

The solution is to use the PageCount and CurrentPage properties in Xojo’s PDFDocument class. The PageCount property gives the total number of pages in the PDF, and the the CurrentPage property (read/write) can be used to reach a given page within a PDF being created. This way, when we assign a new value to the CurrentPage property, it will retrieve the current Graphics context for that page in order to continue adding new content.

Let’s see how this works through this example. Let’s create a 10 page PDF and then add the numbered footer on every page of the document:

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

// Adding a total of 10 pages to the PDF
For n As Integer = 1 To 9
  g.DrawText("Some sample text in page #" + n.ToString, 20, 20)
  g.NextPage
Next n

// Once we create the pages with some content on them,
// we iterate on every page in order to add the footer.
// Remember that the first page in a PDF document starts at 1!
Var x As Integer = d.PageCount
For i As Integer = 1 To x

// Here is where we set which will be the current "active" page;
// that is, the one retrieving the current Graphics context.
d.CurrentPage = i
g.DrawText("Page " + i.ToString + " of " + x.ToString, 20, g.Height - 30)
Next i

// Lastly, we save our PDF to a FolderItem.
d.Save(SpecialFolder.Desktop.Child("CurrentPage.PDF"))

Run this sample snippet of code and you’ll get a PDF on your computer Desktop. Open it using your preferred PDF viewer app and you’ll see how the second loop was able to draw again on every one of the pages from the PDF we created.

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

To start, create a Web project, select WebPage1 in the Navigator and drop a WebButton from the Library onto the upper-center of the page in the Layout Editor. In the associated Inspector Panel for the button change the following property:

• Caption: Create PDF

Next, add the Pressed Event Handler to it and type the following snippet of code in the associated Code Editor:

// Nothing really interesting here
// Create a new PDFDocument instance
// and assign its Graphic context to
// a variable
Var d As New PDFDocument
Var g As Graphics = d.Graphics

// The content of the PDF
// not that much, but it works for the
// main topic we are interested in
g.DrawText("Really simple PDF content", 20, 20)

// Here is where the **important** thing starts
// Creating a new WebFile instance and assigning it
// to the wf property added to the WebPage1 page
wf = New WebFile

// This is the thing: the PDFDocument.ToData method
// returns as a MemoryBlock (Direct conversion to String)
// the inner contents of the PDF document at this point
// so assign that to the "data" property of the
// WebFile instance
wf.Data = d.ToData

// It's important to set the right MIMEType for the file
// in this case, it's a PDF file
wf.MIMEType = "application/pdf"

// We assign the file name…
wf.Filename = "SamplePDF.pdf"

// …and set the ForceDownload to true…
wf.ForceDownload = True

// …so the file is, in effect, downloaded when calling
// the Download method on our WebFile instance
Call wf.Download

// Because we want to display the PDF file in an HTMLViewer
// set the ForceDownload property back to False
wf.ForceDownload = False

// And, finally, preview the PDF Document loading it in the
// HTMLviewer added to the WebPage1 page
HTMLViewer1.LoadURL(wf.URL)

As you can see here, this simple fragment of code is in charge of creating a sample PDF document, downloading it and also previewing it in an HTMLViewer instance. Now, add an HTMLViewer control to the WebPage1 page.

Select the WebPage1 item in the Navigator again so it is visible in the Layout Editor. Next, drag the HTMLViewer control from the Library and drop it below the WebButton added in the previous step.

With the HTMLViewer1 control selected in the Layout Editor, click on the four lock icons under the Locking section from the associated Inspector Panel so they are closed.

Finally, add the expected WebFile property to the WebPage1 page using the following values in the associated Inspector Panel:

• Name: wf
• Data Type: WebFile
• Scope: Private

You’ll probably want to move this property to the Session object in your Web projects so every connected user to the app can handle their own generated PDF documents.

And… that’s all! Run the project, click the button and see how it works.

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

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

Download mp3 or watch on Xojo’s YouTube Channel.

Topics include:

• Xojo Team
• New Xojo Documentation
• Xojo 2022 Release 1 Release Notes

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.

Setup

Debugging on device requires your device be connected to your computer using a lightning cable.

Computer
You’ll need to launch Xcode, plug your phone in using USB and open Xcode’s Devices and Simulators window. In the navigation pane on the left, select the device and check the Show as run destination checkbox.

Device
If you’ll be debugging over USB, go to the Settings app on your device, select Personal Hotspot and turn that on.

Apple Developer Portal

For on-device debugging, your app profiles must be set up properly. For help on this, read The Crazy Exercise That Is The Apple Signing Process.

1. Certificates: You will need a Development certificate for yourself. Download it and double-click the file to install it.
2. Identifiers: You will need an Application Identifier that matches the Bundle Identifier in your app.
3. Devices: You must register all of the devices that you intend to debug on.
4. Profiles: You will need to create a Development profile for the app and make sure it contains your Development certificate (from step 1) as well as each of the devices that you want to debug on (step 3). Download the profile and double-click the file to install it.

Xojo

Debugging on-device requires that you set the Team from your account as well as setting the Build For property to App Store.

When you’re ready to run on a device, from the menu select Project > Run On and select your device from the list. If everything is configured properly, your app should be transferred to the device and automatically run for you.

Notes

The first time you debug an app, you will get a dialog on the device asking if your app can connect to the local network. You will need to allow that and then run your app from Xojo again.

Don’t allow your device to go to sleep while waiting for the app to build and transfer or the app won’t be able to launch. You can increase the amount of time on the device by going to Settings > Display & Brightness and selecting a new Auto-Lock timeout. The options are 2, 5, 10 or 15 Minutes or Never.

With Xojo 2022r1 I am happy to say we have achieved that goal! The best part is that you don’t need to do anything to take advantage of the update. Keep your code as it is now and, the next time you output your report into a PDF document you’ll get the full vectorial quality you expect!

As you can see, the difference is quite notable. Additionally, because the new Reports rendering is full vectorial quality, that means that you will be able to select the text or even using the Search capability provided by your PDF viewer app.

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.

There are a lot of free websites you can use to extract the individual styles and weights from a .ttc file and create .ttf files. But why not do this with Xojo, just for fun … or because I need it! Keep reading and I will show you how.

Extracting the available styles and weights from TTC files requires parsing its data to find the data chunks required to compose the TTF. That is what we are going to do. Start by creating a new Desktop project (you can adapt it later for any supported Xojo targets like Web or Mobile).

Building the TTC to TTF Converter

All the work is going to be done via a method; but because it will be dealing with font files, it would be a good idea to start by creating our own FontUtilities module. So, add a new module to the project and name it “FontUtilities” in the Inspector Panel.

Next, with FontUtilities selected in the Navigator, add a new method to it using the following signature:

• Method Name: ExtractTTFStylesFromTTC
• Parameters: inputFile As FolderItem, outputFolder As FolderItem
• Scope: Public

And add the following code into the associated Code Editor:

#Pragma DisableBackgroundTasks
#Pragma DisableBoundsChecking
#Pragma StackOverflowChecking False

If inputFile = Nil Or Not inputFile.Exists Then Return
If outputFolder = Nil Or Not outputFolder.IsFolder Or Not outputFolder.IsWriteable Then Return

Var mb As MemoryBlock

Var rb As BinaryStream = BinaryStream.Open(inputFile)
mb = rb.Read(inputFile.Length)
mb.LittleEndian = False
rb.Close

If mb <> Nil Then
  
  Var OutputBuffers() As MemoryBlock
  
  // Let's make sure this is a .ttc file by checking the first four bytes of the header
  
  If mb.StringValue(0, 4) <> "ttcf" Then Return
  
  // offset for the total of faces/styles in the ttc file
  Var totalFaces As Integer = mb.UInt32Value(8)
  
  Var tableHeaderOffset As Integer
  Var tableCount As UInt16
  Var headerLength, tLength, tableLength, totalLength, currentOffset As Integer
  
  Var outputBuffer As MemoryBlock
  
  For n As Integer = 0 To totalFaces - 1
    
    // 0x0c is the first possition of the tableHeader offsets
    tableHeaderOffset = mb.UInt32Value(12 + (n * 4))
    
    // offset to the table count from the current table header offset
    tableCount = mb.UInt16Value(tableHeaderOffset+4) 
    
    headerLength = 12 + tableCount * 16
    
    tableLength = 0 
    
    For j As Integer = 0 To tableCount - 1
      
      tLength = mb.UInt32Value(tableHeaderOffset+12+12+(j*16))
      tableLength = tableLength + Bitwise.BitAnd(tLength + 3, Bitwise.OnesComplement(3)) // next value multiple of four
    Next
    
    totalLength = headerLength + tableLength
    
    outputBuffer = New MemoryBlock(totalLength)
    outputBuffer.LittleEndian = False
    
    //Copy table to the buffer for the new file
    outputBuffer.StringValue(0,headerLength - 1) = mb.StringValue(tableHeaderOffset, headerLength - 1)
    
    currentOffset = headerLength
    
    Var tOffset, tOtherLength As Integer
    
    For j As Integer = 0 To tableCount - 1
      tOffset = mb.UInt32Value(tableHeaderOffset + 12 + 8 + (j * 16))
      tOtherLength = mb.UInt32Value(tableHeaderOffset + 12 + 12 + (j * 16))
      outputBuffer.UInt32Value(12 + 8 + (j * 16)) = currentOffset
      
      // Copy data to the buffer for the new file
      outputBuffer.StringValue(currentOffset, tOtherLength - 1) = mb.StringValue(tOffset, tOtherLength - 1)
      
      outputBuffer.UInt32Value(currentOffset) = mb.UInt32Value(tOffset)
      currentOffset = currentOffset + Bitwise.BitAnd(tOtherLength + 3, Bitwise.OnesComplement(3)) // next value multiple of four
    Next
    outputBuffers.Add(outputBuffer)
  Next
  
  // Let's create the .ttf files in the output folder
  Var max As Integer = outputBuffers.Count - 1
  Var outputFile As FolderItem
  
  For n As Integer = 0 To max
    outputFile = outputFolder.Child(inputFile.Name.NthField(".", 1) + " " + n.ToString + ".ttf")
    Var ob As BinaryStream = BinaryStream.Create(outputFile)
    ob.Write(outputBuffers(n))
    ob.Close
  Next
End If

Testing the TTC to TTF Converter

Now, let’s create a minimal user interface in order to test it. Select the Window1 window in the Navigator in order to bring up the Layout Editor. Next, drag a DesktopButton from the Library and drop it inside the window area in the Layout Editor. Use the alignment guides to help you to leave enough room between the button and the window margins.

Double click the button in the Layout Editor to open the Add Event Handler dialog box. The Pressed Event Handler should be selected already, so simply confirm it clicking on the “OK” button.

The Pressed Event Handler has been added under Button1 in the Navigator and with its associated Code Editor visible in the main area, type the following lines of code:

Var inputFontFile As FolderItem = FolderItem.ShowOpenFileDialog(".ttc")
Var outputFolder As FolderItem = FolderItem.ShowSelectFolderDialog

FontUtilities.ExtractTTFStylesFromTTC(inputFontFile, outputFolder)

The first line of code will ask the user to select the “.ttc” font file to process, and the second line will ask for the destination folder where the output (the converted .ttf font files) will be stored. Finally, the third line of code is the one calling our ExtractTFFStylesFromTTC method passing along both the file to process and the output folder.

That’s all! Click on the Run button in the main toolbar of the Xojo IDE. Once the app is running, click on the button to select any “.ttc” file you want to process. Next, the app will ask you to select the output folder and you will be able to see the extracted files inside the selected output folder.

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 get started by creating a new Desktop project. We’ll add two colour groups, one for the border which we’ll name Border, choosing Named and selecting Active Border from the menu.

The second is for the background which we’ll name Background, choosing Named and selecting Window.

Now add a ContainerControl to the project and call it myTabpanel. Set its background colour to background.

Next add a SegmentedButton to the top left corner of the container.

In the Inspector for the SegmentedButton edit the segments.

Set the first segment as selected.

Now add a rectangle and set its left position to 0 and its top position to 24 (the height of the segemented button) and drag the bottom right corner to fit the container.

Lock its bottom and right boundaries.

We’ll now set its border colour to border. This will provide the outline of the panel.

Now we’ll add a PagePanel to the project to fit just inside the rectangle. Set its Left position to 1 and its Top position to 25. Its Width and Height should be 2 less than the rectangle – let the Xojo IDE do this for you.

and

on moving away from the field the IDE will replace the entry with the result. Again, we’ll set the border locks for bottom and right.

Next, we’ll set the code for the Pressed event on the SegmentedButton.

Sub Pressed(segmentIndex as integer) Handles Pressed
  PagePanel1.SelectedPanelIndex = segmentIndex
End Sub

This will change the panel each time a button is pressed.

Now we’ll add a PanelChanged event to the container.

And name it PanelChanged. We’ll now implement the PanelChanged event on the PagePanel:

Sub PanelChanged() Handles PanelChanged
  RaiseEvent PanelChanged
End Sub

Which will passes it along to the new PanelChanged event on the container.

Wayne Golding has been a Xojo developer since 2005 and is a Xojo MVP. He operates the IT Company Axis Direct Ltd which primarily develops applications using Xojo that integrate with Xero www.xero.com. Wayne’s hobby is robotics where he uses Xojo to build applications for his Raspberry Pi, often implementing IoT for remote control.

Step 1

Create a new Xojo Desktop project.

Step 2

Drag a TextField from the Library to the Navigator.

Step 3

Add a private property userEntered As Boolean = True.  This will be used to determine whether the user has entered the text, or if the text has been set via the application.

Step 4

Add a method Value as below:

Add the following code:

userEntered = False
Text = value
userEntered = True

As you can see the userEntered property is set to false. The text is changed which will raise the TextChanged event and the userEntered property is set back to true.

Step 5

Add an Event Definition named TextChanged

Step 6

Add an Event Handler for TextChanged

Add this code:

If userEntered Then
  RaiseEvent TextChanged
End If

This method handles the default TextChanged event from the Super Class and if the userEntered property is true, raises the defined TextChanged event.

To use this control, you would drag it from the navigator or library onto your window or container as you would a normal TextField control. However, you can now set the text in the control using Value = “Some Text” and the TextChanged event won’t be raised. You can still set the Text property directly which will continue to raise the event.

For the sake of consistency I also have custom Web and Mobile TextFields that have the Value method. This allows the same code to be used on all project types.

You can also use this technique on other controls that automatically raise a “changed” event.

Wayne Golding has been a Xojo developer since 2005 and is a Xojo MVP. He operates the IT Company Axis Direct Ltd which primarily develops applications using Xojo that integrate with Xero www.xero.com. Wayne’s hobby is robotics where he uses Xojo to build applications for his Raspberry Pi, often implementing IoT for remote control.

The new AddControl method on DesktopWindow and DesktopContainer accepts any DesktopUIControl instance you want to add to a window or container.

To make the new DesktopUIControl instance really visible in the target window or container, you’ll need to set some basic properties; specifically the desired width and height values for the new instance control and also the left and top coordinate values where you expect the control to be added. These values are relative to the left/top corner of the target window/container, so a value of top = 0 and left = 0 means to add the control at the top/left corner of the target window itself.

In order to see how this works, this example creates a Desktop project that includes multiple DesktopButton instances at runtime while also removing them from the target DesktopContainer (calling the Close method on the instance to do that). Plus we’ll make them adjust as the size of the Container changes like you see in this example below.

1. Creating the Base Container

Open Xojo and create a new Desktop project. Double click on the Container in the Library so it is added to the Navigator in the IDE. Use the Inspector panel to change the following properties:

• Name: BaseContainer

Add a new property to the BaseContainer subclass in the Navigator (use the contextual menu for that), setting the following values in the Inspector panel:

• Name: Controls()
• Type: DesktopUIControl
• Scope: Public

2. Adding New Controls to the BaseContainer

We are going to need some Methods in the BaseContainer, starting with the one responsible for adding new DesktopButton instances. Add a new Method setting the following values in the associated Inspector Panel:

• Method Name: AddNewControl
• Scope: Public

Write the following snippet of code in the associated Code Editor for the Method:

// Setting static values for the new Button instances
// Width and Name values
Static cWidth As Integer = 40
Static cInitialName As String = "ControlName"

// Initial X and Y coordinates for the control instance
Var startX As Integer = If(Controls.Count = 0, 20, Controls(Controls.LastIndex).Left + cWidth + 20)
Var startY As Integer = If(Controls.Count = 0, 20, Controls(Controls.LastIndex).Top)

// We need to adjust the X/Y coordinates if the control
// exceeds the available BaseContainer width
If startX + cWidth > Me.Width Then
  startX = 20
  startY = startY + Controls(Controls.LastIndex).Height + 20
End If

// Creating the new DesktopButton instance to be added
// and setting the expected values so it is visible
// at the desired size and position.
Var nControl As New DesktopButton
Var idxNumber As Integer = Controls.LastIndex + 1
nControl.Name = cInitialName + idxNumber.ToString
nControl.Caption = idxNumber.ToString
nControl.Left = startX
nControl.Top = startY
nControl.Width = cWidth

// On macOS we get the default height for free
// this is not the case on Windows
#If TargetWindows Then
  nControl.Height = 22
#EndIf

// We set the method to be called by the instance
// when the user presses the button
// so we can catch it and forward it to the
// BaseControl instance
AddHandler nControl.Pressed, AddressOf ControlActionCallback

// Adding the new control instance to the array
controls.Add(nControl)

// …and adding it to the BaseContainer
// calling the new AddControl method for that
Me.AddControl(nControl)

As you can see, we are using the AddHandler method to substitute the original Event fired by the control with our own Method; so let’s create that. Add a new Method to BaseContainer using the following values in the Inspector Panel:

• Name: ControlActionCallback
• Parameters: tControl As DesktopUIControl
• Scope: Public

And write this line of code in the associated Code Editor:

RaiseEvent ControlPressed(tControl)

3. Removing Controls From the BaseContainer

The third and last method we need to add to our BaseContainer subclass is the one responsible of removing the last added control; add a new method to the BaseContainer subclass using the following values:

• Method Name: RemoveLastControl
• Scope: Public

And write the following snippet of code in the associated Code Editor for the Method:

If Controls.LastIndex <> -1 Then

  Var tControl As DesktopUIControl = Controls.Pop

  // We need to remove the callback method from the original
  // Pressed event on the instance
  RemoveHandler DesktopButton(tControl).Pressed, AddressOf ControlActionCallback

  // Closing the control instance so it is removed from the
  // containing BaseControl
  tControl.Close

End If

4. Forwarding Events

Because we are forwarding the received Pressed event from the DesktopButton to the ControlActionCallback method, and it is raising the ControlPressed method passing along the received instance, we need to define that Event in our BaseContainer subclass using the following values in the associated Inspector Panel:

• Event Name: ControlPressed
• Parameters: tControl As DesktopUIControl

5. Reacting to Resizing

We want our BaseContainer to react to changes in its width and/or height, so it has the chance to change the layout (position) of the controls added to it. With the BaseContainer selected in the Navigator, add the Resizing Event and type the following code in the associated Code Editor:

#Pragma DisableBackgroundTasks
#Pragma DisableBoundsChecking

Var startX As Integer = 20
Var startY As Integer = 20

Var lastIndex As Integer = Controls.LastIndex
Var tControl As DesktopUIControl

For n As Integer = 0 To lastIndex

  tControl = Controls(n)

  If n <> 0 Then startX = Controls(n - 1).Left + Controls(n - 1).Width + 20

  If startX > Me.Width - tControl.Width Then
    startx = 20
    If n <> 0 Then startY = startY + tControl.Height + 20
  End If

  tControl.Left = startX
  tControl.top = startY

Next n

6. Designing the User Interface

Select the Window1 window in the Navigator so it is displayed in the Layout Editor. Next, drag a Button from the Library and place it at the top/left corner leaving the expected margins recommended by the Layout Guides.

With the just added button still selected, change the following values in the associated Inspector Panel:

• Name: AddControlButton
• Caption: “Add Control”

Add the Pressed Event to the button and type the following line of code in the associated Code Editor:

BaseContainer1.AddNewControl

Add a second button and place it just below the previous one. Use the associated Inspector Panel to set the following values:

• Name: RemoveControlButton
• Locking: Left and Top locks closed
• Caption: “Remove Control”

Use the resizing handlers on the control to make its width enough to display the Caption properly.

Add the Pressed Event to just added button and type the following line of code in the associated Code Editor:

BaseContainer1.RemoveLastControl

Add a Label from the Library and place it to the right of the first button. Use the Inspector Panel to set the following values:

• Locking: Left and Top locks closed
• Text: “Control Pressed:”

Use the resizing handlers on the control to make its width enough to display the Text properly.

Add a second Label and place it to the right of the previous one, using the Inspector Panel to set the following values:

• Name: ControlPressedName
• Locking: Left and Top locks closed
• Text: “”

Finally, drag the BaseContainer from the Navigator and place it below the second button. Use the resizing handlers on the control to make it width and tall enough to fill all the remaining area on the window. The final layout should look more or less like this:

Use the Inspector Panel to set the following values:

• Locking: left, top, right and bottom clocks closed (locked)

With the BaseContainer1 instance selected in the Layout Editor, add the ControlPressed Event to it and write the following line of code in the associated Code Editor:

ControlPressedName.Text = tControl.name

7. Running the App

All set! Run the App, press the “Add Control” button to add as many buttons you want to the BaseContainer1 control, and press the “Remove Control” button to remove controls. Try to resize the window and you’ll see how the controls change their position as needed.

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.

Once you start using AddControl in your new Desktop projects (we definitely recommend that!) you’ll see it’s more convenient, plus you aren’t required to have a control to be used as a template already on the Window.

Related: Read “Simplified: Adding User Interface Controls at Runtime“