Add data to REALbasic Listbox Control

Simply add a Listbox Control to Window1 and then in Listbox1 Sub Open () enter some code… Set also the DefaultRowHeight Property to 24.

1
2
3
4
5

Listbox1.AddRow("Folders")
Listbox1.AddRow("Files")
Listbox1.AddRow("Pictures")
Listbox1.AddRow("Movies")
Listbox1.AddRow("Music")

Add info effect and format data in REALbasic Listbox

At this part we will format the look of our data, and we will also add row info effect with some random numbers inside. Add this code to Listbox1 Function CellTextPaint ().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Dim r As New Random
 
 
if column = 0 then
 
    g.DrawString (me.Cell(row, 0), x, 18, g.Width - x, true) //draw the Listbox1.AddRow("Folders") etc.
 
end
 
 
  g.ForeColor = &cCDCDCD //change color to silver
  g.FillRoundRect(me.Width - 33, 3, 22,17, 15,15) //paint a round rectangle
 
 
  g.ForeColor = &cFDFFFB //change color to white
  g.Bold = true //bold on
  g.TextSize = 11 //change font size to 11
 
  g.DrawString(Str(r.InRange(0,9)),me.Width - 26, 15, g.Width - x, true) //draw a String with random number
 
return true

Creating iPhone App Listbox GUI

Add a Listbox Control to REALbasic and insert it on left side of Window1. Now in Property and Value panel lock the Listbox to left, top and bottom, disable UseFocusRing property, and change DefaultRowHeight to 40. Look on the screenshot to see what we will create.

Listbox hierarchical property

Enabling Listbox hierarchical property in REALbasic will allows us to disclosure triangles for rows added via the AddFolder method. On Windows, plus and minus signs are used instead of disclosure triangles.

Creating TreeView in REALbasic

Add to Window1 a Listbox Control and go to it Sub Open () event available in REALbasic Code Editor. Few things will happen here so look into the code comments. Before this I will explain you what NthField Function can do. The NthField function returns the field value from the source that precedes the fieldNumber occurrence of the separator in the source – NthField(source, separator, fieldNumber). We will use this to get our category menu and submenu options for each category (DEVICES,PLACES).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Dim menucat, submenu As String
Dim i As Integer
 
me.Hierarchical = true //enabling the hierarchical Listbox property
me.ColumnWidths = "125,0" //setting the Listbox column width
 
menucat = "DEVICES,PLACES" //creating the menu category list for Listbox
submenu = "Macintosh HD;Desktop,qbap,Applications,Documents,Downloads,Movies" //creating submenu list for menucat
 
for i = 1 to CountFields (menucat, ",") //count the category list by "," mark
 
  if NthField (submenu, ";", i) < > "" then
    me.AddFolder "" //add a submenu 
    me.Cell (i-1,1) = NthField (submenu, ";", i) //add submenu to menucat and separate the data by finding ";" mark
  end if
    me.Cell (i-1,0) = NthField (menucat, ",", i) //add menucat items to Listbox
 
next
 
me.ColumnCount = 1

Expand TreeView category menu

As you probably can see our menu is now available in Listbox1 but it can’t expand. To get this effect done we must go to Listbox1 Sub ExpendRow () and make some fixes. Simply copy and paste this code there:

1
2
3
4
5
6
7
8
9
10

Dim menucat As String
Dim i As Integer
 
menucat = me.Cell (row,1)
 
//show or hide the submenu items  
for i = 1 to CountFields (menucat, ",")
   me.AddRow ""
   me.Cell(me.LastIndex,0) = NthField (menucat, ",", i)
next

Download

Enable drag reorder in Listbox

Add a Listbox Control to Window1 in REALbasic. Now select it and in control Property and Value find EnableDragReorder and make sure it is enabled. And this is all.. from this moment you can reorder the items by drag and drop method.

Listbox list count

Begin with adding a Listbox and some data to this control to REALbasic Window class. Now drag and drop PushButton Control to Window1 and in PushButton Sub Acton () insert this code.

1
2
3
4
5
6
7
8
9

Dim i As Integer
 
if  ListBox1.ListCount > 0 then
  for i = 0 to ListBox1.ListCount -1
    Window1.Title = "Inbox (" + Str(i + 1)  + " messeges)"
 next
else
    Window1.Title = "Inbox (0 messeges)"
end if

Add Checkbox to Listbox

Place a Listbox on Window1 Class and enter in this control some data in Listbox1 Property InitalValue. Now can you add for example to Listbox1 Sub Open () a code to display a Checkbox in each row available in column 0.

1

me.ColumnType(0) = ListBox1.TypeCheckBox // ColumnType(column number)

Checkbox status in Listbox Control

In this part we will count how many Checkboxes are checked in our Listbox Control. To do this we will add to Window1 a PushButton control and by double clicking on it we will go to Code Editor PushButton1 Sub Action (). Here we enter this code.

1
2
3
4
5
6
7
8
9
10
11
12
13

Dim i, c As Integer
 
c = 0
 
for i = 0 to ListBox1.ListCount-1 // check every cell in Listbox control
 
  if ListBox1.CellCheck(i,0) = true then // if checked state = true
    c = c + 1
  end if
 
next i
 
MsgBox "You selected " + Str(c) + " items" //display how many items are checked

ListBox.CellType

We can also beyond TypeCheckBox add some other settings to Lisbox Cell. Sets the type of the passed cell. Row and Column are zero-based. Use the following class constants to set the CellType. TypeDefault (0): Default, same as its column type; TypeNormal (1): Normal, not editable; TypeCheckBox (2): Add checkbox; TypeEditable (3): Inline editable.

1

Listbox1.CellType(1,1) = ListBox1.TypeEditable

The values of CellType > 0 override ColumnType. For example, if ColumnType is 2, but a cell in the column has CellType set to 1, the cell will be normal.

Creating iTunes Sidebar GUI

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.

Change Listbox control background

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

Change default Listbox item heightlight

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

Gradient Listbox item select

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

Add row and column to Listbox

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

Listbox Clear

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"

Displaying icons in Listbox Control

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

Listbox and TreeView effect

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

Listbox click check method

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

Listbox and TreeView effect

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

Download

Listbox Cell Background Paint

Everything what we need is a Listbox control available on Window1 class and a code in Listbox1 Function CellBackgroundPaint (). After compiling the project we will get a nice looking Listbox control that we can admire in our application.

1
2
3
4
5
6

if row mod 2 = 0 then
   g.ForeColor = &cFFFFFF // white color
else
   g.ForeColor = &cf3f7fb // blue color
end if
  g.FillRect 0,0, g.Width, g.Height

Speed up solution

The solution for increasing the speed of some actions made in REALbasic controls is practically easy. We will use our Listbox Control example. REALbasic redraws the Listbox each time we AddRow to our control. To make it 5-7 times faster we must hide it for the time of using loop for i = 1 to 1000000. And this works!

1
2
3
4
5
6
7
8

Dim i As Integer
 
Listbox1.Visible = false
 
for i = 1 to 1000000
    Listbox1.AddRow Str(i)
next
    Listbox1.Visible = true

Creating the GUI

We will use in this tutorial Listbox Control, TextField Control and PushButton Control. Drag and drop this controls on Window1 Class wherever you like and fill Listbox with some data. If you have no idea what data can you insert there use this code in Listbox1 Sub Open ().

1
2

Listbox1.ColumnCount = 2
Listbox1.InitialValue = "United Nations Day" + chr(9) + "UFC 104" + EndOfLine + "Halloween Costumes" + chr(9) + "Garth Brooks" + EndOfLine + "Los Angeles Angels" + chr(9) + "Hilary Swank" // chr(9) = Tab key

Search Listbox Control

Ok, in this moment we will search in Listbox all data (irrespective of number of rows and columns) to find our words for search. Add to PushButton1 Sub Open () some code… Please have in mind that our search code can return more than one result.

1
2
3
4
5
6
7
8
9
10
11

Dim i, c As Integer
 
for i = 0 to ListBox1.ListCount -1 
    for c = 0 to ListBox1.ColumnCount - 1
      if InStr(ListBox1.Cell(i,c), TextField1.Text)  < > 0 then // different from 0 
        ListBox1.CellBold(i,c) = true // make the text bold
      else
        ListBox1.CellBold(i,c) = false 
      end if
    next
next

Enter key event in TextField Control

To know if the users is pressing the Enter key in TextField go to code editor TextField Function Key Down () and enter there:

1
2
3

if key = chr(13) then 
// code from Search Listbox Control
end if