Xplat Toolbar Control

DaveS · August 26, 2013, 11:16pm

If anyone is interested… I am putting the finishing touches on a Toolbar control (yes… another one)…
This one however… looks EXACTLY like the Cocoa toolbar (unified look etc)… supports Large/Small icons, Icon Only, Text only etc…
Supports Flexible space on BOTH OSX and WIN, Supports proper “checkbox” selection (OSX doesn’t with the native control)
Supports a VISIBLE property so buttons can be displayed or not
Supports access to ToolButton data via Index AND by NAME
is based on a single CANVAS control (but it autolocks itself to top of window)
All methods and properties are exact duplicates of TOOLBAR and TOOLBUTTON as they exist now with a few minor exceptions

Since it is based on a standard control, you need to instantiate it. This will create the toolbar, and the unified background (OSX). But since it is a control, the developer has to manage the space below it… Only major drawback I’ve seen so far
You have to add the toolbar as part of creating a toolbutton (ie. tb=new rdsTOOLBUTTON(self) )
there are EZ methods in the toolbar to quickly create Toolbuttons, such as
rdsToolbar1.EZ_Button rdsToolButton.ToolStyledropdown,“Open”,icon_blank,“test1”
rdsToolbar.EZ_Flex
Almost all the properties of any toolbutton can be altered “on the fly” and the toolbar will automatically reflect the change (change captions, change icons, heck even change the TYPE of button)
Supports 24x24 and 32x32 icons independantly, if you only supply one, it will build the other for you, but this way you can have the best quality icons (or even different ones) for each toolbar size.

I currently have almost everything in place for OSX… .and it is “working” with Windows7, just need to tweak the visual part for Windows and it will be ready.

If there is any interest, I will (in a few days) post a copy of the control with a fixed expiration for you all to play with…
and then make available an encrypted class version, and source code version for sale if the interest is still there.

Roger_Clary · August 27, 2013, 12:38am

Here’s the first indication of interest. Will look forward to your announcement.

Merv_Pate · August 27, 2013, 12:49am

I’ll certainly download it and see if it works for what I do. Always interested in more 3rd party controls for sale.

DaveS · August 27, 2013, 2:30am

Here is a comparison shot of a native toolbar from my current project, compared to my own toolbar control.
The main reason I went to all this trouble, was I need to be able to select multiple buttons at once, and OSX doesn’t let you do that.
THIS toolbar does … plus all the other things mentioned above

still needs a little tweaking on disabled buttons… and the spacing is a tiny bit off… but unless you compared them side by side you’d never know (or care)

and as an idea… here is the code it took to build that menu.

  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"Open",icon_open
  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"New",icon_new
  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"Save",icon_save
  rdsToolbar1.EZ_Space
  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"Cut",icon_cut
  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"Copy",icon_copy
  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"Paste",icon_paste
  rdsToolbar1.EZ_Space
  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"Undo",icon_undo
  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"Redo",icon_redo
  rdsToolbar1.EZ_Space
  rdsToolbar1.EZ_Button rdsToolButton.ToolStyleTogglebutton,"Select",icon_select
  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"Text",icon_text
  rdsToolbar1.EZ_Space
  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"Line",icon_line
  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"Curve",icon_curve
  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"Connect",icon_connect
  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"Image",icon_image
  rdsToolbar1.EZ_Space
  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"Painter",icon_fmt_painter
  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"Style",icon_palette
  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"Fill",icon_fill
  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"Stroke",icon_border
  rdsToolbar1.EZ_Button rdsToolButton.ToolStylePushbutton,"Arrows",icon_arrow
  
  rdsToolbar1.Item("Select").Pushed=true
  rdsToolbar1.Item("Redo").Enabled=false
  rdsToolbar1.Item("Arrows").Enabled=false

Markus_Winter · August 27, 2013, 6:21am

What do you mean by “selecting more than one button”? You don’t mean toggle buttons on and off?

Beatrix_Willius · August 27, 2013, 9:25am

Does your toolbar have Retina support?

Carl_Clarke · August 27, 2013, 11:53am

I am hoping that it will look the same on Windows and Linux, it will certainly help me if it does - well done Dave.

PS. My only slight negative is the use of ‘weird’ method and property names in 3rd party components, do the button methods really need to be prefixed with EZ_ (or as in other 3rd party suffixed with something like MBS)?

Why? Well apart from looking more elegant and being more consistent and readable, generally it actually helps when using introspection, to keep method names (+signatures) and property names (+types) inline with other components where possible. To give an example (I know your EZ_Button method is probably unique in its use) when every UI component has a BackColor property you can loop through all controls and with introspection check if the control has a writeable BackColor property and then set the property to a Color. That saves having to write a huge Case statement with loads of ‘IsA’ tests that you have to maintain whenever you add a UI control of a new type. You can do the same thing with TextColor, HasBackColor, Transparent and the Refresh() method and recolour your UI in a few lines of code.

However if it looks the same and that good on Windows and Linux I will buy it

DaveS · August 27, 2013, 1:18pm

To be honest… I have yet to figure out what “Retina Support” really means.

The Toolbar and ToolButton DO need to be prefixed with SOMETHING… TOOLBAR/TOOLBUTTON are already “taken”… as far as the EZ methods… its just a name… All the other properties/methods were purposely named to match those of the existing TOOLBAR/TOOLBUTTON controls. The rest are inheriited from the base Canvas Control. So I am not sure where introspection and ISA even enters the conversation here. And I am NOT targeting Linux as I do not have a Linux machine… so if it works there it will be gravy

DaveS · August 27, 2013, 1:19pm

Yes I do. This is actually how the LR describes the toolbar. and it is the behaviour under Windows (ie. like a checkbox)… but under OSX it works like a radiobutton.

Mine works like a checkbox…like it should

Dwane_Malotte · August 27, 2013, 1:44pm

Will it be able to right-align / center buttons? Would like to have that functionality for Mac / Windows.

DaveS · August 27, 2013, 1:46pm

Using FlexibileSpace? yes

This works on OSX with the native toolbar… but not on Windows… mine works that way for both

DaveS · August 27, 2013, 1:52pm

[quote=29697:@Dave S]Using FlexibileSpace? yes

This works on OSX with the native toolbar… but not on Windows… mine works that way for both[/quote]

like this?

Carl_Clarke · August 27, 2013, 2:07pm

Its cool, I am not being negative, the toolbar looks very good. Have you tried making components within a Module? I have not tried this extensively with UI components other than to have a few Windows in a Module but I used them for classes. If this works then you could do this in a Module, maybe not today as I am sure that you are busy enough, then you would get your own Namespace and hopefully avoid the name clashes with exiting components. So you could have a Toolbar and a RDS.Toolbar etc.

[quote=29699:@Dave S]
[/quote]

Just a question, is that a Windows screen shot? If so then can the title/close/minimise/maximise buttons be suppressed so that the normal Window frame deals with them? A bit how Xojo works on Windows.

DaveS · August 27, 2013, 2:17pm

Yes that is a windows screen shot… and yes the windows borders are controlable just as they are now.
My toolbar does NOT have any affect on the window… remember it is just a canvas… nothing more.
It just turns out this canvas sets its own left/top/width based on the window, and sets the unified area to match the bottom edge of that canvas (on OSX)… on Windows it will draw its own background

And I fail to see where the complexity of creating my own namespace to simple “insert” a period into the name justifies the effort. The way it is now there are two objects… rdsTOOLBAR and rdsTOOLBUTTON (I saw no need for a TOOLITEM)

Markus_Winter · August 27, 2013, 6:22pm

I have problems with readability of prefixes. Postfixes are much easier for me.

So Toolbar_EZ is easier for me than EZ_Toolbar.

Also works better when programming. I want a toolbar, I type Tool and hit tab and presto, I have both the normal one and the _EZ one in the selection.

With prefixes it is like “what was that prefix again?”

Beatrix_Willius · August 29, 2013, 9:34am

For retina support in the toolbar you only need to assign Retina icons. The rest is done by Xojo.

Greg_O_Lone · August 29, 2013, 11:00am

That better not be a “Windows” screen shot, its got the OS X close, minimize and maximize buttons on it.

DaveS · August 29, 2013, 1:01pm

Sorry… that is a shot of an OSX “WINDOW”… I thought you were asking if my toolbar stopped the window frame (min/max/close buttons, title etc) from being dealt with in a normal manner.

I am just now getting it working on WIN7 (the flicker was terrible, but I have it all gone now)…

Retina support : assign Retina Icons.?.. this assigns “PNG” images that it internally resizes, and builds masks etc for the different states… it insures there is a 32x32 version and 24x24 version… and uses DRAWPICTURE to put them on the canvas

Beatrix_Willius · August 29, 2013, 1:17pm

For retina you need 64x64 pixel icons. And of course, you need to change the plist file. If you talk about drawpicture, then your toolbar is not a simple Xojo toolbar I gather. Have you looked at the retina examples which explain how to draw in hi-dpi?

DaveS · August 29, 2013, 1:32pm

No it is not a XOJO toolbar… it is a canvas control that does everything the toolbar is supposed to do (on both platforms) as well as add a few features.

No I have not delved into Retina at all… since I have no way to even test it anyways…

If is just a matter of detecting a Retina display and using 64x64 and 48x48 instead of 32x32 and 24x24 … then it should be easy to implement