Creating the GUI

We will use today a StaticText, TextArea and Canvas control to create our GUI. Simply drag and drop this controls to Window1 so they will be placed to something similar to the picture below.

Drag and drop controls

The firs thing we will do in this tutorial is dragging a StaticText control to TextArea control and displaying in it StaticText1.Text. To do this go to StaticText1 Function MouseDown () and use this code.

1
2
3
4
5

Dim d As DragItem
 
d = NewDragItem(me.left,me.top,me.width,me.height)
d.text = me.text
d.drag

Now you can drag and drop StaticText to TextArea control. Isn’t this easy or what?

Drag and drop text file from desktop into TextArea

In this part of tutorial we will learn how can we drag and drop text file from desktop to our REALbasic application. In this case we will use TextArea control as a object into we will drag and drop text file and display all content in it available. Firs go to Project tab and add new File type set and as Display Name type special/any.

Next go to code editor and in TextArea1 Sub Open () enter code… Of course you can be more detailed by allowing only a specify format for drag and drop in this control.

1

me.AcceptFileDrop("special/any")

We will create a Drag and drop event in TextArea1 Sub DropObject ()

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

Dim text As TextInputStream
Dim f As FolderItem
 
do
   if obj.FolderItemAvailable then
 
    f = obj.FolderItem
 
      if f < >  Nil then // f various Nil
        text =  f.OpenAsTextFile
        TextArea1.Text = text.ReadAll
        text.close
    else
        //User Cancelled
    end if
 
  end if
loop until not obj.NextItem

As you can imagine if you will now drag and drop a text file to this control it will read and display the text inside the text file.

Drag and drop image file from desktop into Canvas

Getting a picture or graphic from desktop (or should say from hard drive) into Canvas using drag and drop method is similar to previous paragraph. Go to code editor and in Canvas1 Sub Open () enter code:

1

me.AcceptFileDrop("special/any")

Create a Drag and drop event in Canvas1 Sub DropObject ()

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

Dim f As FolderItem
Dim p As Picture
 
do
  if obj.FolderItemAvailable then
    f = obj.FolderItem
 
    if f < >  Nil then // f various Nil
        p = f.OpenAsPicture  // load picture to memory
        Canvas1.Backdrop = p // load image from memory to canvas
    else
        //User Cancelled
    end if
 
  end if
loop until not obj.NextItem

If you like you can add to this project some image manipulation techniques like fit to canvas, crop etc. from tutorial Creating ImageViewer in REALbasic. See you next time!

ListBox Control Setup

Add to your Window ListBox Control and set the DefaultRowHeight property value to 32. Next prepare a 32×32 picture (called tutspolis) and drag it to your Project Tab.

Adding text to ListBox control

In code editor go to ListBox Sub Open () and insert this code:

1
2
3
4
5
6
7
8
9
10

Dim i As Integer
 
for i = 1 to 5
  ListBox1.AddFolder "REALbasic City"
  ListBox1.Cell(Me.LastIndex, 1) = "F"
  ListBox1.AddFolder "REALbasic City 2"
  ListBox1.Cell(Me.LastIndex, 1) = "F"
next
 
 Me.ColumnAlignmentOffset(0)= 35

Drawing a graphic in ListBox

In REALbasic code editor go to ListBox Function CellTextPaint () and use this code:

1
2
3
4
5
6
7

if column = 0 then
  if Me.cell(row,1) = "F" then
     g.DrawPicture(tutspolis,2,2)
  else
     g.DrawString "Fake Line", 29,9
   end if
end if

ListBox DoubleClick event

Using this code in the ListBox Sub DoubleClick () event you can get the string, number of the cell, row that was double-clicked.

1
2
3
4
5
6

Dim row, column As Integer
 
row=Me.RowFromXY(System.MouseX - Me.Left - Self.Left, System.MouseY - Me.Top - Self.Top)
column=Me.ColumnFromXY(System.MouseX - Me.Left - Self.Left, System.MouseY - Me.Top - Self.Top)
 
MsgBox "You double-clicked on "+ Me.list(row)

Creating the About Window

Go to Window1 Property panel and configure this values: Width: 308, Height: 372, BackColor: true, BackColor: &cFFFFFF, Resizeable: false. Insert to the Window a Canvas Control and as Backdrop use the graphics you like. Now insert on Windows TextArea Control and configure this values: Top: 376, Width: 308, Height: 173, ScrollbarHorizontal: false, Border: false, BackColor: &cFFFFFF, Enabled: false and insert in Text 10 positions. If you like have more data there you should increase some values (Height, Top).

Text scrolling effect

Add to Window Time Control and in Property panel change Period property value to 10. Now double click on Timer icon in Window1 (you are now in Timer Sub Action()) and copy this code.

1
2
3
4
5

TextArea1.Top = TextArea1.Top - 1 // scrolling the text up
 
if TextArea1.Top = -50 then // if text position top is -50
    TextArea1.Top = 376 // then begin scrolling text again
end

This is a very basic conception of creating this kind of text scrolling effect. If you are more advanced you can for example create a dynamic picture displayed on canvas control and scrolling it up. The effect will be similar.