Hi Guys,
Hobbiest programmer here with couple of own Mac apps. Some of you have helped (brilliantly) before, wondering if you can do so again.
I want to add “button type” controls with the current Apple symbols format. That is, ones like those along the top of the XOJO programming interface (eg the Run, Build, Help or even the Library or Inspector).
I’ve had a look at the various Button types and don’t think they are the correct ones. It is my understanding that the XOJO interface is built with XOJO so I’m assuming the correct controls are there. Am I right or is it something that has to be modified from another control? I can’t quite figure it out.
Also, where do the current Apple symbols come from and how are they applied? I’ve downloaded an app from the Apple Developer site called SF Symbols. Is this it and, if so, how does it work? It only seems to bring up the symbols and not much else?
You will notice in the Xojo toolbar and also in the SF symbols that the weight of the lines is very thin. I’ve tried to make the lines just a tiny bit thicker so that the user can actually see the different between active and inactive buttons.
For the buttons themselves I use the PDF export of Affinity Designer. I had to make the buttons smaller and give them some whitespace. In the original size the buttons looked too large.
Although Xojo is built with Xojo, there is no easy way to get a system (symbol) picture in a Desktop app. This is available in Xojo for iOS but not yet for macOS
Update: It doesn’t. I just finished the article, that should not be shared as an example. That’s a hack at best, and the headline misleads to make Xojo sound more capable than it is.
I create Pictures on macOS Big Sur in the Background and draw the Symbols on them. After, you can use it as ToolbarButton.Icon. You still need Declares on macOS to set it as a Template Picture.
You need to properly set a template image and Xojo can’t. I remember reading problems with doing so and changing the Enabled state of a button wiping out the changes.
The thing here is, I really want to be able to do it the right way. Color icons on 10.15 and lower, line icons on big sur. The problem is, I haven’t seen anyone get it done except the IDE. (My understanding is that what Beatrix has done is line icons on all versions)
Hey guys, thanks for all the suggestions, I’m slowly working through them. I may have accidentally misled some of you though. I didn’t realise that the examples I quoted at the top of the XOJO interface are a toolbar, I thought they were just buttons. The info is still good but I’m really trying to create individual buttons. For example, I have some text displayed and want to have a “button” next to it to edit. When clicked a new window will appear to edit the text. I want that button to have eg a pencil or pentip in the new formats rather than text saying “edit”. Hope that’s clearer.
What “button” or other control would you use here and how do I embed the graphic onto it?
I thought the article provided enough info to figure out how to do it.
So, for example, with this code in the Open event from a Toolbar:
Var item As New ToolbarButton
Var p As New Picture(32,32)
Var s As String = SFSymbol.Name("house")
Var g As Graphics = p.Graphics
g.DrawingColor = Color.red
g.FontSize = 22
g.DrawText(s,0,22)
item.Icon = p
item.Caption = "Hello"
Me.AddButton item
You can get this glyph in the icon for the toolbar (red coloured):
For a button I subclass a canvas of the right size. That way I can give it some of the basic things like change colour when you hover over it, or change colour when you click it, cancel all that it you drag the mouse pointer out of the button and then let go (and restore its colour), etc. Use the paint event to define its actual shape and put an icon on it.
Then if I have different types of button I can subclass my base type and add events there, too.
This minimises the amount of code in each actual button (for me, just MouseUp and Open), while Paint, MouseExit, MouseDown are to be found in the base class.