I’m very excited to show you my new tutorial about creating a iTunes or Finder like Sidebar for REALbasic using standard Listbox control and some easy steps to follow. Watch it, learn it, enjoy it!
Add a Listbox Control to REALbasic Window1 and insert it on left side of class. Now in Property and Value panel lock the Listbox to left, top and bottom, disable UseFocusRing property, change DefaultRowHeight to 20 and set up TextFont to Lucida Grande and TextSize to 10. Look on the screenshot to get what will happen next.
Go to Listbox1 Function CellBackgroundPaint in REALbasic Code Editor and use this code to replace the standard white color with Finder Sidebar color.
1 2 | g.ForeColor = RGB(214,221,229) //iTunes Sidebar background color g.FillRect (0,0,g.Width,g.Height) //paint the color into Listbox |
To change Listbox heightlight color we can simply use this code in Listbox1 Function CellBackgroundPaint ().
1 2 3 4 5 6 7 | if me.Selected(row) and row > 0 then //and if selected row is bigger than 0 (position of our PLACES) then draw green select g.ForeColor = RGB(39,170,45) //green color g.FillRect (0,0,g.Width,g.Height) else end if return true //paint it, it's very impotent to have return true because without it this won't work |
We can make this even better by creating in fly a nice blue gradient with option to make it go to gray when the Window or Listbox Control isn’t active. Add a New Method and as method name enter selectgradient and in parameters write g as graphics. Now insert some code there… This gradient technology was created by Alex Restrepo and it’s very easy to understand. You can also find some gradient algorithms in ImagePlay Effect classes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | Dim i As integer, ratio, endratio As Double Dim StartColor, EndColor, TopColor As Color // select colors for not active Window if Listbox1.Active = false or Listbox1.Enabled = false then StartColor = RGB(168, 168, 168) EndColor = RGB(121, 121, 121) TopColor = RGB(145, 145, 145) else // select colors for active Listbox StartColor = RGB(80, 171, 233) EndColor = RGB(0, 117, 215) TopColor = RGB(15, 145, 224) end if // Draw the gradient for i = 0 to g.Height // Determine the current line's color ratio = ((g.Height-i)/g.Height) endratio = (i/g.Height) g.ForeColor = RGB(EndColor.Red * endratio + StartColor.Red * ratio, EndColor.Green * endratio + StartColor.Green * ratio, EndColor.Blue * endratio + StartColor.Blue * ratio) // Draw the step g.DrawLine 0, i, g.Width, i next g.ForeColor = TopColor g.DrawLine 0, 0, g.Width, 0 |
In this moment your Listbox1 Function CellBackgroundPaint () should look like this:
1 2 3 4 5 6 | g.ForeColor = RGB(214,221,229) //iTunes Sidebar background color g.FillRect (0,0,g.Width,g.Height) if me.Selected(row) and row > 0 then selectgradient(g) //and if selected row is bigger than 0 (position of our PLACES) then draw gradient select return true //paint it |
Now is time to add some live to our Listbox Control. Create a new method and name it showplaces.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | Dim i As Integer Listbox1.DeleteAllRows //clear Listbox control Listbox1.AddRow "PLACES" //add row ListBox1.AddRow "REALbasic City" //add REALbasic City to row 1 and 1 column ListBox1.Cell(1, 1) = "R" //and remember this row and column as R ListBox1.AddRow "Movies" ListBox1.Cell(2, 1) = "M" ListBox1.AddRow "Downloads" ListBox1.Cell(3, 1) = "D" ListBox1.AddRow "Desktop" ListBox1.Cell(4, 1) = "De" ListBox1.AddRow "Music" ListBox1.Cell(5, 1) = "Mu" ListBox1.AddRow "System" ListBox1.Cell(6, 1) = "S" Listbox1.ColumnAlignmentOffset(0)= 38 //set the text position offset |
Enter to Listbox1 Sub Open () code:
1 | showplaces |
To clear our Listbox we will create a method that will delete all rows from this control. In REALbasic Code Editor add a new method and name it hideplaces and enter code.
1 2 3 4 | Dim g As Graphics Listbox1.DeleteAllRows //clear Listbox Listbox1.AddRow "PLACES" |
You can find some Finder icons at Finder Sidebar for Explorer by ~Ausrif. Add few to Project Tab by drag and drop method. Now is time to attach them to appropriate rows. Go to Listbox1 Function CellTextPaint () and enter there:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | if column = 0 then if Me.cell(row,1) = "R" then g.DrawPicture(Applications,15,2) //(graphic name from Project Tab, x position, y position) elseif Me.cell(row,1) = "M" then g.DrawPicture(Movies,15,2) elseif Me.Cell(row,1) = "D" then g.DrawPicture(Downloads,15,2) elseif Me.Cell(row,1) = "De" then g.DrawPicture(Desktop,15,2) elseif Me.Cell(row,1) = "Mu" then g.DrawPicture(Music,15,2) elseif Me.Cell(row,1) = "S" then g.DrawPicture(System1,15,2) end if end if |
In this part of Creating iTunes like Sidebar for REALbasic tutorial we will hide the Listbox item selection heightlight for the first row (PLACES) and hide all items available under the PLACES “group” after double clicking on row 0 and showing it again after next double clicking. Add a New Property and as Declaration type showlist and Value: Boolen and = true. Now in Listbox1 Function CellTextPaint () enter this code.
1 2 3 4 5 6 7 8 9 10 11 12 13 | if showlist = true and row = 0 then g.Bold = true //make the font bold g.ForeColor = RGB(60,60,60) //change color g.DrawPicture(Arrow01,2,2) //draw Arrow01 image elseif row = 0 then g.Bold = true g.ForeColor = RGB(60,60,60) g.DrawPicture(Arrow02,2,2) end if |
The last thing we will do in Listbox1 Function CellTextPaint () today is checking if the user has clicked on selected row and if he is we execute a action (renaming Window title). So add this code below.
1 2 3 4 5 | if Me.Selected(row) and row = 1 then //when we select row and the row number will be 1 (REALbasic City) then Window1.Title = Me.list(row) //change the Window title text to row text elseif Me.Selected(row) and row = 2 then //when we select row and the row number will be 2 (Movies) then Window1.Title = Me.list(row) //change the Window title text to row text end if |
To make our TreeView effect complete we must add to Listbox1 Sub DoubleClick () a code that will check if the users has double clicked on PLACES and what is the status of PLACES (the item are visible or not).
1 2 3 4 5 6 7 | if Listbox1.Selected(0) and showlist = true then hideplaces showlist = false elseif showlist = false then showplaces showlist = true end |
If you see this message you probably want access special material for Premium Members (Source Files, Bonus Tutorials, free Classes and More). You can do this by subscribing REALbasic City site for 10 USD (access for 3 months). There is also a option to buy access only to this material. Login or register to get option to buy and support REALbasic City.
Log in
REALbasic City is a part of TUTSPOLIS where you can find tutorials about creating cross-platform software for Mac, Windows and Linux using REALbasic 2009. Learn a object-oriented dialect of the BASIC programming language and create your own games and software such as browsers, periodic tables, catalogs for your
personal book library, e-mail clients, weather clients, instant messengers, unarchivers etc.
why not put the sourcecode?
Because this is a tutorial website and when there will be a source code for download people will not read but only download it. Reading this tutorial = learning how this code is working and making better applications
I spend a lot of time to prepare this tutorial, and I think that reading it in 5-10 minutes is a good price if my work can solve your problem 
There’s a syntax error in your code:
> should be =
with > I meant “& g t ;” without the spaces.
This example is for row > 0 because it is PLACES text and we don’t wont to select it.
if me.Selected(row) and row > 0 then selectgradient(g) //and if selected row is bigger than 0 (position of our PLACES) then draw gradient select
If you like to select every row you can enter simply
if Listbox1.Selected(row) then selectgradient(g)
I don’t know why but Wordpress + plugin to display Code is cutting > < symbols from HTML.
OK, I fixed this bug
Thanksfor the tutorials, I love commibg to this site for little things such as the scorlling text tutorial you did for the about window
Wish there was more sites like this
Best regards
Kai
Thank you Kai! I hope that in near future REALbasic City will offer much more great tutorials and that this place will be the 1st site to visit when goes about learning REALbasic for everyone.
Although it could be too much trouble to administer, maybe offer code downloads for some minimal donation…although it really isn’t THAT hard to copy/paste the code, someone may find it worthwhile.
Just a thought. Thanks for all the good tutorials!
I will think about your idea Bill.
One tip more… if you like to have selection color similar to Apple Mail use this values:
StartColor = RGB(172, 184, 216)
EndColor = RGB(130, 147, 188)
TopColor = RGB(130, 147, 188)
Very cool tutorial! Man, you made it *so* easy to create a great-looking sidebar. I’m using a commercial tool for my current project and I’m happy with it, but if I had seen this when I first started it I might have just done it all from scratch. =:)
Jay Jennings
RBNation.com
Thx Jay! And I hope that you will come here back often
Nice work on this tutorial.
I’m working on a system to deliver source code download (mac os, windows, linux versions) options for 2-3 USD per month. The special accounts can offer also maybe some bonus materials, more tricks in standard tutorials, discounts offer for REALbasic, maybe conquest to win some plugins etc.
I hope that 2-3 USD is a good price for this kind of bonus and it can relay make this site run always fresh and deliver even better tutorials.
Dear Author realbasic.tutspolis.com !
Yes, really. All above told the truth.
Dear loko9988,
thank you for nice comments, this motivates me!
P.S. And you can streamline the other code in CellTextPaint too – you do not need the letters, and a select case statement is easier to read
if column = 0 then
select case Me.cell(row,0)
case “REALbasic City”
g.DrawPicture(Applications,15,2) //(graphic name from Project Tab, x position, y position)
case “Movies”
g.DrawPicture(Movies,15,2)
case “Downloads”
g.DrawPicture(Downloads,15,2)
case “Desktop”
g.DrawPicture(Desktop,15,2)
case “Music”
g.DrawPicture(Music,15,2)
case”System”
g.DrawPicture(System1,15,2)
end select
end if
Thx for tip Markus
Hmmm, my fist long tip did not get through it seems (only the later add-on) so here it is again:
There is some code duplication in the CellTextPaint which you can avoid with this version:
if row = 0 then
g.Bold = true //make the font bold
g.ForeColor = RGB(60,60,60) //change color
if showlist = true then
g.DrawPicture(Arrow01,2,2) //draw Arrow01 image
else
g.DrawPicture(Arrow02,2,2)
end if
end if
You can also make the little triangle work by adding this code to the CellClick event
if me.Selected(0) and showlist = true and x < 25 then
hideRows
showlist = false
elseif showlist = false and x < 25 then
addRows
showlist = true
end
Window1.Title = Me.list(row)
Keep up the good work – I really enjoy these tutorials.
Maybe Markus you have some time to share your knowledge and write a tutorial for REALbasic City?
One of the best tutorials I’ve seen! Thanks!
Can you expand this tutorial by showing how to add another hierarchy set that can expand/contract independent of Places?
I think that in future I will expand this tutorial for this kind of option
I found some really excellent icons for this listbox method.
http://www.pinvoke.com/
I want to quote your post in my blog. It can?
And you et an account on Twitter?
You can quote this post on your blog but you must add a link to the orginal location and you must write from where have you quote this material.
My twitter account: http://twitter.com/REALbasicCity
iPhone Listbox style inspired by iTunes:
http://realbasic.tutspolis.com/tutorials/pm-iphone-app-listbox-for-realbasic/
If you like this tutorial you should also look at Listbox row info effect (you can see this in Apple Mail) in REALbasic.
http://realbasic.tutspolis.com/tutorials/listbox-row-info-effect-in-realbasic/