OS X Interface Elements

I’ve been looking at several interface design options and because of the amount and type of data I need to display, my options are limited. However, I’ve found an example of something I would like to try, or at least similar. I think it is using elements that belong to OSX itself (I cant think how to implement these in Xojo).

In the picture below, Im considering the 2 left most columns. The first is similar to what we see a lot in OS X, such as the Finder and several Apple apps. The second, which looks like a custom listbox design, is also seen in several OS X apps, particularly mail clients, but others as well.

Does anybody know of any examples which would allow me to implment something along these lines, plugins that would allow me to create them, or maybe code examples to call these from within OS X ?

leftmost - custom list box subclass
middle one - custom listbox subclass

really

[quote=132144:@Norman Palardy]leftmost - custom list box subclass
middle one - custom listbox subclass

really[/quote]

Do you have any pointers to any examples ?

FGSourceList at https://bitbucket.org/garrypettet/fgsourcelist

We’ve used it in a couple of projects.

[quote=132153:@Bob Keeney]FGSourceList at https://bitbucket.org/garrypettet/fgsourcelist

We’ve used it in a couple of projects.[/quote]

Thankyou Bob, that looks exactly what Im looking for.

The second column, which I can see is a custom listbox would be an ideal approach because it has multiple lines in each row (I anticipate needing no more than 3), an in the case shown, the top line is obviously split into 2. Is this simply a case of using taller row heights and then drawing in between them to split them up ?

Edit : The authors website seems inaccessible for the fgsourcelist.

The 2nd listbox is indeed just a large row height and doing your own drawing in the CellTextPaint event.

It was for me too. I bought the package back when it was commercial. I can probably send you whatever documentation I have without violating any licensing agreements.

[quote=132158:@Bob Keeney]The 2nd listbox is indeed just a large row height and doing your own drawing in the CellTextPaint event.

It was for me too. I bought the package back when it was commercial. I can probably send you whatever documentation I have without violating any licensing agreements.[/quote]

I would appreciate the documentation or a link to it.

Does this not work for you?
https://bitbucket.org/garrypettet/fgsourcelist/downloads

Temporarily mirrored in my dropbox for you :slight_smile:
https://dl.dropboxusercontent.com/u/10504478/garrypettet-fgsourcelist-c0464afcfed5.zip

[quote=132160:@Tim Parnell]Does this not work for you?
https://bitbucket.org/garrypettet/fgsourcelist/downloads

Temporarily mirrored in my dropbox for you :slight_smile:
https://dl.dropboxusercontent.com/u/10504478/garrypettet-fgsourcelist-c0464afcfed5.zip[/quote]

Grabbed it, thanks!

I started work on this https://github.com/shaosean-tk/UI due to the lack of a group container and the different examples out there having issues with the scrollbars… You design out your rows in a ContainerControl, assign the class interface and then add them to the group… You need to return TRUE from the MouseDown event and the group handles the MouseUp event (through AddHandler)… When a row is selected the group will set a property (custom or normal) called IsSelected to either true or false and you can handle what normally would be in the MouseUp event in there… I will upload an example later tonight when I get to work… If you need help, feel free to ask or if there are features that you want added, just let me know (I am building this for my program, but maybe others could use it too)

For the left one, it’s a NSSourceList, it’s on my list of things to get working in Xojo. If you use the NS control it will look right one sticks and adopt the ‘Vibrant’ style on Yosemite.

Look right on Mavericks!

I was writing a tutorial, but realized I dislike writing tutorials so just made a screen capture video instead… Sorry about the wasted time in the middle, but Xojo glitched and would not allow me to add events to the button, so I needed to copy a button from another project…

http://shaosean.tk/xojo/scrollinggroup.mov

When it happens, I usually just duplicate the control that does not accept add event, and it fixes the issue. Then all I have to do is to remove the duplicate.

Depending on what I am doing, I either just copy the event from another control (or copy another control as I had to do in the video) or restart Xojo…

That scrolling group looks very interesting indeed! I like the look of that, a lot. I haven’t really worked with container controls up to now but I can see how flexible that might be. Pleasee continue working on it :slight_smile:

I have been… Adding lots of features over the last day, so check out the GitHub thingy for new stuff…

  • each row can be a different container
  • each row can be different heights
  • can modify the row’s height when selected
  • added DeleteAllRows
  • added RowTag
  • added IndexOf (to look up rows based on the tag)

@shao sean I’m interest in your project, but unfortunately was unable to run it. How does it work when there are 100, 1000 or more rows? I’m guessing not that great.

Any reason given you couldn’t “run it”?

Probably not all that great, but my own needs shouldn’t hit that high, but I am sure there are ways to make it more responsive for large numbers of rows…

Seems I used one of my constants in the code (copy and paste error, sorry)… Fixed it on GitHub…

For 100 rows it was pretty quick… At 1000 rows the scrollbar was non-existent so will need to fix that…