
Ricardo has always been curious about how things work.
#Xojo array of controls code#
You can download the example from the GitHub code repository. From displaying a pending notifications counter in a WebButton, to validation errors in a WebTextField.Īdjust and play with the code to meet your needs! 🙂 You can use these badges in different scenarios. Now, if you have a WebButton called… “AwesomeButton”, you can set its badge using this code: AwesomeButton.SetBadge("Hello!")Īnd to remove it: AwesomeButton.RemoveBadge() The content is a bit easier this time: Var js As String = "$('#" + control.ControlID + ". The method definition reads like this: Extends control As WebUIControl Did you notice we are using “control” instead of “Self”? It matches the “control” variable from the method definition.Īdd another Extension Method for removing the badges, called “RemoveBadge”. What this little sorcery does is appending a new HTML layer into our control, using some Bootstrap’s component CSS classes. Js.Add("$('#" + control.ControlID + "').append(`" + html + "`) ")Ĭontrol.ExecuteJavaScript(String.FromArray(js)) "border", "border-light", "bg-" + indicator)Ĭlasses.Add(If(caption.Length " + caption + "" Inside, paste the method contents: Var classes() As String = Array("xojo-badge", "d-flex", "p-2", _ 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 “Extends” is the reserved keyword for this feature, for example: Extends myInstance As ExampleClassĪbove method would be extending an imaginary class called “ExampleClass”, and its instance would be available inside that method, accessible from the variable “myInstance”. The magic happens in the first parameter of this method. Then, in the inspector, ensure its visibility is set to Global, instead of Public or Protected. Now add a new method into that module, called “SetBadge”. The name of the module is up to you, I’ll be using WebExtensions in this example. Press on the Add button from the toolbar and select Module. Adding SetBadge and RemoveBadge methods to every visual control One option would be subclassing each control and adding new methods… but that’s so boring…Įxtension 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. This class can’t be modified, as it’s part of the framework. We know that every visual control inherits from WebUIControl. Let’s say we want to add a method to every visual web control. There are situations where you want to add functionality to a Xojo Framework class. But first, what’s an Extension Method anyway?

I’ve ended up writing a few extension methods to use them on almost any WebUIControl.
#Xojo array of controls windows#
Supports Retina on macOS systems and Hi-DPI on Windows systems.I was having some fun with badges, trying to recreate a design.Can be configured to let search trigger by enter key or click on search icon.Can be configured to let search trigger time delayed when typing.Can be configured to let search trigger instantly when typing.Optional cancel button on the right side.

This also works for the native control on Cocoa.

