One of the first games I made using Xojo was a clone of Atari Tank (based on the version included with the Combat Atari 2600 cartridge).

The core of Tank served as the basis for the XojoWars game contest, where it was re-imagined as a space battle.

Tank is a rather simple game and really needs to be two-players, which is why I added the ability for two people to play it over the network using UDPSocket. This version, which I called NetTank, is available on GitLab.

On the mobile side, I’ve made a 2048 sliding-tiles game and Turtle, which I suppose is kind of an infinite version of Frogger.

However, I’ve had the most fun making clones of Asteroids and Space Invaders. I wrote some about Invaders in xDev Magazine last year, but at some point I’ll get it enhanced enough to share in a blog post.

With that lengthy pre-amble I can now share my game for this month’s project, which is a clone of Asteroids that I uncreatively call Space Rocks. Although an older version of this game has been included with the Xojo examples for several years, this is an updated version with some new features:

• Smaller ship to better match proportions of the rocks.
• Improved ‘heartbeat’ sound.
• High Score is saved and restored.
• Level increases as you clear all the rocks, which adds even more rocks that also move faster.
• Command or Shift key now work for firing missiles.

Yes, 14340 is my high score. So far. I dare you to beat it!

The full project is on GitHub: https://github.com/paullefebvre/SpaceRocks

Keep in mind that you don’t have to make an arcade-style game. Strategy and turn-based games are a lot of fun and also great candidates for Xojo. For reference, take a look at the web-based Cosmic Trader game that Ricardo made last year. A platform-style or maze game might also be interesting. I can’t wait to see (and play) what you make!

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

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Year of Code Project

• Year of Code: Kickoff
• January Project: Desktop Apps | Forum Discussion
• February Project: Database Apps | Forum Discussion
• March Project: Web Apps | Forum Discussion
• April Project: User Interface | Forum Discussion
• May Project: Mobile Apps | Forum Discussion
• June Project: Code Sharing | Forum Discussion
• July Project: Charting | Forum Discussion
• August Project: Console Apps | Forum Discussion
• September Project: Games | Forum Discussion
• October Project: Multi-Platform | Forum Discussion
• November Project: PDF | Forum Discussion

How to Play:

Each month we’ll announce a new theme and share an example project of our own. Share your projects to the Xojo Forum thread for that month via GitHub (all the links you need are posted above ↑ ). Learn how to use Xojo and GitHub.

The Prizes:

Monthly winners get $100 at the Xojo store. Every month you submit a project is another chance to win the grand prize. The grand prize is $250 cash plus a Xojo Pro license and a year of GraffitiSuite and will be announce in December. Learn more about the prizes.

In order for the MobileCanvas to receive KeyDown events, the control instance needs to be Enabled and have its focus set. In addition, the new AllowKeyEvents property needs to be set to True.

If the Canvas receives the KeyDown event, the on-device keyboard will be hidden as soon its focus is cleared or the control Enabled property is set to False.

In addition to the new KeyDown event, there is also a new TextReceived event that, if implemented in the instance, will be fired when the control receives, for example, text from the Dictation feature when the text is more than just one character in length.

Lastly, while MobileCanvas, MobileTextField and MobileTextArea can only receive KeyDown events, the MobileScreen object can also receive KeyUp events. See this in action in this short video: KeyDown events on MobileCanvas on iOS.

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

In mathematics, (0,0) is typically at the center with positive X being to right, negative X to the left. Positive Y is up and negative Y is down.

This means if you are trying to draw the graphs of some standard math functions you have to do some translating. With Xojo you can use the Graphics.Translate() function to relocate the origin point. This makes it easy to move (0,0) from the top left to the center with code like this in the Paint event:

g.Translate(g.Width / 2, g.Height / 2)

Switching the Y from going from the top down to the bottom up is just a matter of negating it. With a translated origin, this would draw a line above the baseline:

g.DrawLine(1, -2, 1, -2)

I thought it might be interesting to try and wrap this up in some subclasses to make it a little more automatic, work with the smaller scale typically used for these type of graphs and even graph some functions.

The result is a project, MathGraph, which can draw some shapes on the graph and also graph simple functions that work with x.

Here’s an example of a graph for the cubic polynomial function y = x^3:

Keep in mind that this only solves for x.

Other functions you might want to try:

• quadratic polynomial: x^2
• line: x
• absolute value: abs(x)
• reciprocal of x: 1/x
• reciprocal of x²: 1/x^2
• square root: sqrt(x)
• exponential: exp(x)
• logarithmic: log(x)
• sin wave: sin(x)
• sin(x)/cos(x)

Try multiplying and dividing some of the above in combination. You can use any valid Xojo math expression and any of the math functions. If there is an error in your function, then the error message is shown in the graph itself.

There are also some built in functions to draw text, rectangles, ovals and plot points that you can use in the Paint event handler.

This is provided as a Canvas subclass, called MathCanvas. It has companion classes MathGraphics and Grapher. MathGraphics is used to draw using math coordinates. Grapher is a subclass of XojoScript and is what processes the function for graphing (it is based on the Evaluator example project included with Xojo).

Download the MathGraph project to try it for yourself.

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.

Create a new iOS project and on Screen1 add a couple Buttons and a Canvas, the buttons at the top and the Canvas using up the rest of the space. Also add a Timer.

Add some properties to track the ball’s position and direction:

• Public Property XDirection as Integer = 10
• Public Property XPosition as Integer = 10
• Public Property YDirection as Integer = 10
• Public Property YPosition as Integer = 10

In the Opening event for Screen1, initialize the Timer (which I’ve named MoveTimer):

MoveTimer.Period = 50
MoveTimer.RunMode = Timer.RunModes.Multiple
MoveTimer.Enabled = False

Speaking of the Timer, in its Run event put this code to move the ball:

XPosition = XPosition + XDirection
YPosition = YPosition + YDirection
BounceCanvas.Refresh

Add the Paint and PointerDown events to the Canvas. In the Paint event draw the ball with this code:

Var size As Integer = 25
g.DrawingColor = Color.RGB(255, 0, 0)
g.DrawRectangle(0, 0, g.Width, g.Height)
g.FillOval(XPosition, YPosition, size, size)
If (XPosition + size) > g.Width Then
  XDirection = -XDirection
End If
If ( YPosition + size) > g.Height Then
  YDirection = -YDirection
End If
If XPosition < 0 Then
  XDirection = -XDirection
End If
If YPosition < 0 Then
  YDirection = -YDirection
End If

And in the PointerDown event, reset the ball’s position to the touch:

XPosition = position.X
YPosition = position.Y
XDirection = -XDirection
YDirection = -YDirection

Lastly you can add the Pressed event to the Start button and tell it to start the Timer:

MoveTimer.Enabled = True

Similarly add the Pressed event to the Stop button and tell it to stop the Timer:

MoveTimer.Enabled = False

That’s it. Run the project, click start to watch the ball bounce. Tap on the screen to change its position and direction. You could probably use this as the start of a Pong game!

Oh, and I forgot to mention that the code above was actually copied from the Android project where I first created this. The exact code copied over to iOS and worked as is with no changes. For a little teaser, here’s Bounce running on Android:

The most common situation is that you want to show a menu when the right mouse button is pressed. You can do this using the ConstructContextualMenu and ContextualMenuAction events.

For example, say you have a Canvas on a Window and want to display a menu when the user right-clicks in it. Add the CreateContextualMenu event to create your menu like this:

base.AddMenu( New MenuItem("Test 1"))
base.AddMenu( New MenuItem("Test 2"))
base.AddMenu( New MenuItem("Test 3"))

Then add the ContextualMenuAction event to check which menu was selected (provided by the hitItem parameter) and perform a corresponding action:

If hitItem <> Nil Then MessageBox(hitItem.Value)
Return True

Alternatively you may want to just know if the right mouse button was pressed so that it can perform another action rather than displaying a menu. For example, in the case of a Canvas maybe it changes a drawing color or marks a location. In situations like this you can also check for a right mouse button press in the MouseDown event handler by using the IsContextualClick method like this:

If IsContextualClick Then
  MessageBox("Right mouse button clicked.")
Else
  MessageBox("Left mouse button clicked.")
End If

Sometimes, subclassing the available controls is the answer to add specific behaviors you need. But what happen when none of the controls offer what you need, whether visually or functionally? The answer is the Canvas class (for Desktop projects), WebCanvas class (for Web projects) and iOSCanvas class for iPhone and iPad devices. But how do you create your own UI controls from scratch? Read on to learn…

Before starting with this basic tutorial about customized UI controls, there is much more to take into consideration about providing the same behavior on your designed controls for multiplatform deployments. For example, in the case of desktop projects, we should add to the mix some things like HiDPI / Retina detection and adaptation on the fly (specially in the case of Windows deployment, with multiple dpi / Windows OS version combinations), and Dark Mode support for macOS. A well as other performance hints and differences when it’s about doing desktop multiplatform layouts; for example, when to set the Transparent or DoubleBuffer properties to True or not.

As the name implies, the Canvas control acts like a painting canvas and you can set its look for all the supported states based on the available events. This is done through the Paint Event and all the Graphic classes availables in the Framework. In fact, the Paint event provides as a parameter the graphical context (canvas height and width) you can paint on. In addition, you can combine these graphic classes (or completely substitute them) with any prepared Picture of your choice as the customize control background (ImageSet recommended, so it supports all the needed resolutions based on display dpi). In addition, and as you can do with the drawing via the Graphic class and functions, you can choose to use a different Picture as the control background based on several events, for example, when the mouse pointer is entering or exiting the control limits in a Desktop or Web app, or as response to the user clicking on it.

Canvas: A matter of Events

The Canvas class provides all the needed Events you probably would want to implement in order to react to the user interaction. These are listed and described in the available documentation online and as part of the Xojo IDE interactive Help.

While you can drag and drop a Canvas instance directly to your project layout window or view, implementing and writing the code associated with  any of the available Events, the recommended way to go is to create your own subclass taking as its parent the Canvas class. This way, you can implement and fine-tune every aspect that makes you control unique and, most importantly, re-use your customized UI controls as many times you want both in current and future projects (or even offer them to the Xojo community or sell them to other developers!).

As you probably already know, in an OOP programming language, subclassing is the method to get a specialized behavior from an existing Class: We get for free all the available properties, methods and events from the parent (and all its parent hierarchy), including also the code executed in the Paint event to truly paint or provide its look on screen; so we just need to implement the specific behavior and/or control drawing/painting we need over these.

This is also the way to go when you are in the inital stages of designing your own customized UI control: will you need to create even more specialized behaviors based on a “parent” or base customized control? Maybe variations on the behavior? In cases like these, you should define your UI control base class at the bare-minimum set of painting, behavior (events and methods) and properties that will be shared from all the future UI Controls inherited from your base/parent UI Control class. (i.e: more specialized or with behavior variations).

Creating a subclass in Xojo is truly simple: just drag and drop the Canvas icon from the Library to the Navigator (the leftmost column in the Xojo IDE), or choose Insert > Class from the Insert menu.

Points vs Pixels: HiDPI and Retina

Once you have added the new Class to your project, select it, go to the Inspector and set the name you want to use for your new Class (using a “company” or personal prefix it’s always a good idea to avoid collision with other existing or future classes in the Xojo Framework, or when using third party classes). Then, in the Super field of the Inspector Panel, type Canvas and confirm the entry. You’ll see how your class icon changes to the one that uniquely identifies Canvas based classes and instances. The most important thing: your new subclass will have all the properties, events and methods you may expect from a Canvas.

This will be the base class in our short tutorial for creating a customized button that will change its associated image (picture) when the mouse pointer is inside the button area, outside the button bounds or when the user click on the control. In the last case, the button will change both the image and its internal state represented by a property as a Boolean value (named Status).

As our customized UI control will not draw itself via the Paint event, we will need to design the images so these precisely fit in the size we want to use for our button. In this example a size of 32 x 32 points.

In general, when designing images to use in our Xojo projects we need to change our mindset from thinking in pixels to points. That’s because Xojo apps do support HiDPI on Windows/Linux and Retina on macOS; that is: hi-def graphics. Thus, it’s important to use a design tool that simplifies the process. Personally, I use the vectorial app Sktech on macOS because it automates the 2x creation of the final images. (Remember that HiDPI/Retina is enabled by default in the Building Settings on every new Desktop project.)

How do you support HiDPI/Retina if you want to draw the control look on the fly? Avoid the use of pixels in your calculations or when setting the values of the existing Graphic class properties, and use Points instead. If you really need to access the Pixels values underneath, then you can resort to the RGBSurface class (if available) and make use of the ScaleFactorChanged event available on the Canvas class. This way, your class will be notified on every change between displays with or withour Retina/HiDPI support.

Good rule of thumb: do all your control drawing inside the Paint event! And, when you need to update or redraw it (maybe as consequence of some change in the app behavior, or from the change made in other UI control), invoke the method Invalidate instead of Refresh. In general, this will speed up the drawing and, thus, the main app performance.

If you use an existing Event… Define the Event again

As our customized class makes use of the Open, MouseEnter, MouseExit and MouseDown Events, we need to make sure we define these events again to the class, so they are also available for the developer using our canvas-based UI subclass. After all, it’s very probable he needs or wants to add extra code on top of ours! This is something we can do choosing Add to "class_name" > Event definition when our subclass icon is selected in the Navigation Browser.

Thus, once we have created the same events (using the same parameters and returning the same kind of Type values as the original ones), we need to make sure we call them; usually as the last line of code for the already used Event. For example, this is the code for our implementation of the MouseDown event in our Canvas subclass:

me.Backdrop = if(me.Status = false, ShellRunSelected, ShellRun)
me.Status = not me.Status
return RaiseEvent MouseDown(X, Y)

Note how, in this case, our implementation of the MouseDown event returns the value returned by the consumer of our subclass instances, called with the RaiseEvent statement. Just remember that returning the True value from this event means that such events will not be propagated further along the Events Chain.

Putting it all Together

With this information at hand, and the basic concepts explained, this video (in Spanish) shows how you can join all the needed pieces: pictures, events, definition of already consumed events by the subclass; creating a new very basic control from scratch. Obviously, from this point on, you can find in the available documentation all the information needed to create more complex UI controls based on the Canvas class (WebCanvas or iOSCanvas). The possibilities are limitless!

Other useful topics:

• User Guide: Desktop Canvas
• Canvas, Graphics classes
• User Guide: iOS Canvas
• User Guide: Web Canvas

Javier Rodri­guez has been the Xojo Spanish Evangelist since 2008, he’s also a Developer, Consultant and Trainer who has be using Xojo since 1998. He manages AprendeXojo.com and is the developer behind the GuancheMOS plug-in for Xojo Developers, Markdown Parser for Xojo, HTMLColorizer for Xojo and the Snippery app, among others.

*Read this post in Spanish

Starting with Xojo 2018r3, this Graphics property was removed from Window and Canvas so if you had code that was still relying on it, that code will no longer compile. Here are some tips on how you can migrate your code to use the Paint event handlers and tell the Canvas to update with a call to Invalidate.

If your code was simple and just drawing a Picture to the Graphics property, then you would just move the code to the Paint event handler. For example, this code is drawing a picture:

Canvas1.Graphics.DrawPicture(MyPic, 0, 0)

Where that code existed, you would tell it to redraw Canvas1:

Canvas1.Invalidate(False)

And then in the Canvas.Paint event handler you would draw the picture:

g.DrawPicture(MyPic, 0, 0)

Related to this is another thing to keep in mind. Do not use this Graphics object (g) outside the lifetime of the Paint event. You can certainly pass the Graphics parameter from the Paint event to other methods, but you should not keep a reference of it in a property or elsewhere. When the Paint event eventually completes, this Graphics object is no longer valid and the copy you’ve saved in a property also becomes invalid. Attempting to use a saved Graphics object outside of the Paint event’s lifetime may raise an exception in future versions of Xojo.

For more information and other strategies to handle more advanced situations, refer to the topic in the documentation: Updating Code That Used the Graphics Property

I’ve had many people ask for an example for how to create a Canvas that allows you to:

• Draw pictures within it (as objects)
• Move these objects
• Remove them
• Add labels to them
• Programmatically select one

This example demonstrates how to do all these things. It has a large Canvas on the window with several buttons that let you add and manage the objects on the Canvas.

Use the SegmentControl to select the type of object you want to add to the Canvas and click the Add Object button.  You can optionally specify text to label the object using the field below the button.

Add as many objects as you want. You can click to select an object and it will have a black border drawn around it. You can drag any object within the Canvas.

The other buttons center or remove a selected object.  You can use the Select Object # button to select the object number you specify (objects are numbered starting at 0).

About the Project

The concept is pretty simple. Essentially you have a class that represents objects to draw on the Canvas and that knows how to draw itself on a Canvas.

In this project, the CanvasObject class represents an object to draw on the Canvas. It contains everything it needs to know to draw itself, such as its coordinates, label text, the icon to display and other properties.

The ObjectContainerCanvas class is a subclass of Canvas that is responsible for all the drawing, moving and removing of CanvasObjects. This class has an array of CanvasObjects that it knows about. The objects in this array are drawn by the Canvas Paint event handler when appropriate by calling the Draw method on the object itself.

To allow you to drag an object within the Canvas, the MouseDrag event handler is used. It knows what the currently selected CanvasObject is and as you drag the mouse, it updates the coordinates for the CanvasObject.

When the Canvas is told to update itself, usually through a call to Invalidate, the Paint event is called. Here each CanvasObject in the array is drawn on the screen.  This is the Paint event:

If Background <> Nil Then
  g.DrawPicture(Background, 0, 0)
End If

For Each co As CanvasObject In mCanvasObjects
  co.Draw(g)
Next

The CanvasObject’s Draw method draws itself at its coordinates and also draws a selection rectangle around itself if it is selected. This is the Draw method:

// Draws the object on the canvas.
g.DrawPicture(Image, Left, Top)

If Selected Then
  Const kBorder = 2
  // Draw selection rectangel around the image
  g.PenHeight = kBorder
  g.PenWidth = kBorder
  g.ForeColor = TextColor
  g.DrawRect(Left - kBorder, Top - kBorder, Width + kBorder * 2, Height + kBorder * 2)
End If

In addition, ObjectContainerCanvas has two events that are called when an object is selected (ObjectSelected) and when an object is moved (ObjectMoved).

Download the ObjectsInCanvas example.

Check out the other methods on ObjectContainerCanvas that are used to add, move, remove and select objects. I hope you find this technique useful in your projects.

However, by using a little JavaScript you can easily add this capability to Xojo.

In order to follow this tutorial, create a new Web project and add a new WebCanvas control from the Library to the default Web Page added to the project: WebPage1. With the WebCanvas selected in the Navigator, change its name to cCanvas using the Inspector and add the Paint Event Handler to it using the Insert > Event Handler option from the menu. Use the following code to draw a black colored rectangle:

g.FillRect 0, 0, g.Width, g.Height

Obviously, you can draw anything you want in the WebCanvas or even paint a picture on it. The achieved result will be the same. For example, we can draw a picture added to our project (with the filename “landscape”), using this line of code in the Paint event of our cCanvas instance:

g.DrawPicture landscape, 0, 0, g.Width, g.Height

Retrieving the WebCanvas image data

The first interesting step is retrieving the underlying image represented by the WebCanvas and that is something we can get using a fragment of JavaScript code executed from the Xojo side. This is the process we will execute from the Action Event Handler of a WebButton added to the WebPage1 from the Library. In fact, this will be the button in charge of calling the process to save the image as a picture file on the user disk.

Once the WebButton has been added to the WebPage from the Library, put the following code in its Action Event Handler:

Dim js() As String
js.Append "var canvas = document.getElementById('" + cCanvas.ControlID + "_canvas');" // We get the item reference based on its ID
js.Append "var img = canvas.toDataURL(""image/png;base64;"");" // We access to the image data, encoded as a base64 string
js.Append "document.location.hash=img" // We assign that data to the document Hash property, so we can retrieve it from the Xojo side

Dim execute As String = Join(js,"")

ExecuteJavaScript execute // Finally, we execute the JavaScript code

As you can see, the first line of the JavaScript code is in charge of retrieving the cCanvas reference from the DOM (document object model) of the Web Page. For that, we use the ControlID property on our WebCanvas instance, adding the “canvas” appended by Xojo to all these kind of objects when generating the source code for the page.

Once we get the reference to our Canvas instance, the following line of code retrieves the picture content itself and assigns it to the img variable. The trick here is that we retrieve that information in its URL format and, thus, encoded as Base64 data that we can assign to other document properties without losing its original meaning.

Then, we assign the data to the document Hash property. This is the property that allows us to jump to other page sections previously tagged. However, we will use this property as a temporary storage container for passing the data between the HTML/JavaScript side of the web page and the Xojo side of our code. Why we do this? Well, because we can add the HashTagChanged Event Handler to the Session object so it will fire every time we change the value of the Hash property and we will be able to retrieve the data from that property.

Retrieving the image, from the Xojo side

So, the next step is adding the HashTagChanged event to the Session object of our example project, writing the following snippet of code in the associated Code Editor:

Dim data As String = DecodeBase64(Hashtag.NthField(",",2) ) // We retrieve the information saved in the Hash, but just the relevant data for the image and not the URL part.
wp = New WebPicture(data,"My_Picture.png") // We create a new WebPicture instance using the previously retrieved image data in the constructor, and giving a default file name for the image
wp.ForceDownload = True // We want to force the file download instead of showing it
ShowURL wp.URL // and finally we start the file download process.

Hashtag = "" // Let's empty the hash property, just to make sure that the event will fire even if the WebCanvas doesn't change its contents

As you can see, in the first line of code we retrieve the image data. We do that using the NthField command because we are only interested in the image data and not in the URL information that precedes it. In addition, we decode the previously encoded data as Base64, so we really get the bytes of the image in PNG format.

Once we get the picture data, we can use any of the available constructors for the WebPicture class; in this case the one that lets us create a new image from the passed data. In addition, we use this class because it is a subclass of WebFile, and that means that it is simpler to force the download as an image file instead of showing its contents in a new web page.

In fact, this is what we achieve setting the ForceDownload property to True, so when in the following line we use ShowURL we will be forcing the download of the file instead of displaying the image as a new page in the browser. Goal achieved!

Download persistence

You probably noted that the wp variable is not declared in the previous fragment of code. This is because we need to make sure that the object it points to is in scope during the file downloading process and won’t get destroyed once we exit the Event Handler (we would want a message error from the web browser in that case). The solution is pretty easy – we only need to add a new property to our Session object, using the following values:

• Name: wp
• Type: WebPicture
• Scope: Private

Now, every time you run the app web and click the button, you’ll see how the web browser downloads the WebCanvas image as a PNG file to disk.

To summarize, in this tutorial we have seen a way to “communicate” between the data generated executing JavaScript code in our web app so we can retrieve and use it from the Xojo side of our Web App; in this case applied to the retrieval and saving of the underlying picture represented by a WebCanvas object.

*Watch a video of this Tutorial in Spanish

*Read this Tutorial in Spanish

Javier Rodri­guez has been the Xojo Spanish Evangelist since 2008, he’s also a Developer, Consultant and Trainer who has be using Xojo since 1998. He manages AprendeXojo.com and is the developer behind the GuancheMOS plug-in for Xojo Developers, Markdown Parser for Xojo, HTMLColorizer for Xojo and the Snippery app, among others

When I got my first modem I went online with Genie and Delphi and uploaded JumpSTART as freeware. Even though it was freeware, I got a few checks in the mail from people that liked it.

I was reminded of JumpSTART when I saw my dock getting crowed. I thought replicating JumpSTART in Xojo would be a good project for week 8 of #JustCode. Though let’s just call it JumpStart this time around.

This is what JumpSTART looked like on monochrome 640×480 screen:

JumpStart in Xojo is greatly simplified and looks like this:

The Xojo version automatically saves and loads the apps you’ve added so there was no need for separate Load/Save, Re-Read buttons. Technically they don’t have to be apps as even a document file can be launched as well.

You can right-click on an app button after you’ve added it to Rename, Change or Clear it so that also removed the need for some UI controls. And you just click on an empty button to add an app to it. When you click on a button with an app assigned, the app is launched and JumpStart hides itself.

This Xojo app demonstrates the use of a Canvas-based button, ContainerControls added dynamically to a window, and saving/loading JSON. The Canvas-based button will let me tweak the display, colors and maybe display an icon there.

You can download the project or check it out on GitLab.

As an added code treat, I’ve posted the original JumpSTart Pascal code to GitHub. FWIW, the original Pascal source is just over 1300 lines of code. The Xojo version is about 180.

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

Download and check out earlier projects:

• 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

This iOS app demonstrates the use of a Canvas and the detection of taps. When all the bubbles have been popped, more are added. It never ends!

Download the project or check it out on GitLab.

Enhancements idea include:

• Add more bubble colors.
• Keep track of how many bubbles are popped.
• Handle screen rotations so that bubbles that are off screen get repositioned.
• Take advantage of multi-touch to allow multiple bubbles to be popped at once.

Add your project to the week 6 forum conversation.

Download and check out earlier projects:

• Week 5: Math Quiz
• Week 4: Mini-Golf ScoreKeeper
• Week 3: Dogs Up!
• Week 2: Password Generator
• Week 1: Color Picker

This is a desktop app that demonstrates the use of a PushButton, the SelectColor method, a simple Canvas and the Color data type. It has less than 30 lines of code.

This is the layout of the Window user interface:

Here you can see the source code that displays the selected color and the related values:

Download the Color Picker project source.

Along the way, we also will see how the Xojo IDE simplifies making subclass properties available from the Inspector Panel, so when using their instances we can set some attributes as the background color, pen size or border color in a more convenient way.

As usual, the first step to create a new subclass is adding a new class item to the Desktop project (Insert > Class). With the new class item selected, change its name to something descriptive. For this example we will use MyImageWell. The most important thing here is setting Canvas as its Super attribute. That means that the subclass will be based on the Canvas class, inheriting all its properties, Events and Methods so they will also be available for the subclass.

One of these inherited Events is Open, and we will implement it using the Event Handler option (click the + button in the toolbar to access the dropdown menu) in order to inform the class that we want to accept the dropped JPEG files. This is done with the following line of code in the Open Event Handler:

Me.AcceptFileDrop("img/jpeg")

Obviously, we can extend this support to accept other Xojo compatible graphical formats. For that, we would add a new File Type Set to the project, using it as the filter in the previous line of code.

Once we inform the class that we accept this feature, the next step is implementing the DropObject Event Handler that fires once this action is detected inside the limits of the control. The code we need to write for this Event Handler will test that the obj parameter passed along contains a valid FolderItem and, in that case, we will load such file as a new Picture object, assigning it to a property of the same Type. The code for the event is:

If obj.FolderItemAvailable Then
  image = Picture.Open(obj.FolderItem)
  Invalidate
End If

Don’t forget to add the Image computed property to the Class using Insert > Computed Property while the MyImageWell item is still selected, and using these values:

• Name: Image
• Type: Picture
• Scope: Public

As you can see, the amount of code we need to load the file as a Picture object and to assign it to the class property is minimal! Why do we use the Invalidate method call afterwards? Well, this is responsible for informing the operating system to redraw the instance when it has a chance. And when this happens it will fire the third and last Event we need to implement: Paint. Here is where we can instruct any Canvas based control how to draw itself through the graphical context represented by the g parameter passed along the Event.

Painting the control

Once we’ve added the Paint Event to the class and before writing the code responible of painting the dropped image inside its limits, we need to add three additional computed properties. We will use them to set some attributes like the color we want to use to paint the control background, the border color and even the width of the border:

• BackGroundColor As Color = &cdddddd
• BorderColor As Color = &c000000
• PenSize as Integer = 2

Add to the Setter method on every computed property the sentence me.invalidate; so every time we assign a new value to them… the control will be redrawn using the new value (background color, border color, pen size or even a new assigned picture).

The last step is writing the code responsible for drawing the control itself: filling the background with the set color, then drawing proportionally (and centered) the loaded picture pointed by the Image property, and finally drawing the border with the width and color specified. All of this is what we can do using the following snippet of code:

// We fill the control background using the set color
g.DrawingColor = BackgroundColor
g.FillRectangle(0,0,g.Width,g.Height)

// If we have a valid image object, then we draw it centered and scaled (if necessary)
If image <> Nil Then 
  Var Height, Width As Integer
  Var sourcey, sourcex As Integer = 0 
  If image.Height > image.Width Then
    Height = Me.Height
    Width = (Me.Height * image.Width) / image.Height
    sourcey = (Me.Width - Width) / 2
  Else
    Width = Me.Width
    Height = (Me.Width * image.Height) / image.Width
    sourcex = (Me.Height - Height) / 2
  End If

  // This is the line that actually draws a picture inside the graphic context of our instance
  g.DrawPicture(image,sourcey,sourcex,Width,Height,0,0,image.Width,image.Height)
End If

// We draw the control border
g.PenSize = me.PenSize
g.DrawingColor = BorderColor

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

As you can see, the code needed for this is also very simple!

Make the properties visible from the Inspector Panel

While we are on it, we can use the Inspector Behavior feature to make our specific properties visible through the Inspector Panel. This way, when we add new instances from the subclass to the layout of any window, we will be able to easily set their values directly from the Inspector Panel. With the MyImageWell item still selected in the Project Browser, use the contextual menu to select the Inspector Behavior option to access the following Window:

Here you will see all the Class properties, those common to all Canvas derived subclasses and also the ones added for us and that are specific to our class. You can find these properties listed under the Behavior section. To make them visible in the Inspector Panel we just need to check their associated checkboxes; and even modify their default values editing the associated cell if we want to.

Now, we just need to drag and drop the MyImageWell item from the Project Browser into any Window Design Layout in order to add new instances! Once we run the example project, we will see how the controls react to displaying any JPEG picture dropped on it.

If you want, you can investigate deeper into the methods provided by the Graphics class in order to make the control more glittery or more sophisticated.

You can watch this video (en español) to see this in action:

Javier Rodri­guez has been the Xojo Spanish Evangelist since 2008, he’s also a Developer, Consultant and Trainer who has be using Xojo since 1998. He manages AprendeXojo.com and is the developer behind the GuancheMOS plug-in for Xojo Developers, Markdown Parser for Xojo, HTMLColorizer for Xojo and the Snippery app, among others

*Read this post in Spanish

Set Transparent Property for Controls to False

UI controls now have a Transparent property which determines whether the control is transparent on Microsoft Windows. The default is False for new controls added to layouts. For existing projects and controls, this property is set to True for maximum compatibility.
However, controls that have Transparent set to True require more drawing, use more memory and are thus slower. For best results you should set the Transparent property to False for as many controls as possible.

Consider ContainerControl DoubleBuffer Property

Set this property to True to reduce flicker on Microsoft Windows when the ContainerControl is scrolled. Otherwise you can leave this to False.

Avoid Overlapping Controls

The easiest thing you can do to prevent flickering is to not overlap any controls. Overlapped controls result in more requests to redraw the controls which can result in flickering and slower performance.

Use a Canvas

For best results, display any graphics using the Paint event of a Canvas control. Stay away from using the Window Backdrop property, the Window Paint event, the Canvas.Backdrop property or the ImageWell control. Although those techniques work fine in certain situations, they often lead to flickering in more complex window layouts.

On the Canvas, the first thing you want to do is turn off the EraseBackground property. The EraseBackground property prevents the Canvas from being erased (and showing as a white rectangle) before it is redrawn, which is another common source of flicker. (Deprecated in Xojo 2019r2) You should also check your usage of the DoubleBuffer property. In many cases you will find you can leave it set to off (False) for best performance.

With these tweaks, you can do all your drawing in the Paint event using the supplied graphics object parameter: g.

Note: Do not do any drawing directly to the Canvas.Graphics property. This ability was deprecated in 2011 and is strongly discouraged. Drawing in this manner will likely increase flickering and will definitely slow down graphics updates.

You can have separate methods that update the graphics, but they need to be called from the Paint event with the graphics object supplied to the methods as a parameter. Another technique is to have a Picture property that you use to draw you graphics to and then in the Paint event handler you draw the Picture to the Canvas to display it.

When you want the Canvas to update itself, redrawing any changes to your graphics, you call the Invalidate method:

Canvas1.Invalidate(False)

You can also call the Refresh method:

Canvas1.Refresh(False)

The difference is that Invalidate tells the Canvas to update itself when it gets a redraw request from the operating system. The Refresh method tells the Canvas to update itself immediately. Normally you want to use Invalidate as it results in fewer draw requests, improving performance and reducing flicker.

To reduce flicker, both of the above commands pass False for the EraseBackground parameter (which defaults to True) so that the Canvas is not erased before its updated contents are drawn.

Remove or Update Older Code

If you previously had specialized code in your app to help minimize Windows flicker, you should consider removing it as the code may prove to be unnecessary and cause worse performance.

A Note About Virtual Machines

Many people run Windows in Virtual Machines. If you do so you’ll want to ensure that you have the best performance possible. Xojo apps use Direct2D for all screen drawing and not all VM software has properly accelerated graphics drivers for this.

In particular, VMware Fusion has rather poor performance when “Accelerate 3D Graphics” is enabled in the Display preferences. For best performance you should make sure that option is turned off.

Alternatively, Parallels Desktop and VirtualBox both seem to have better graphics performance with Direct2D and Xojo apps.

For more information:

• Windows UI Guidelines

*Minor update re: deprecation 3/2021