Creating the GUI for TextArea Syntax highlighting

Add to Window1 one TextField Control. Now go to TextField Sub () TextChange and enter some code… Before we start there are some things to clarify. First – this is only a starting point for creating inline text checking and it works only after typing. So I mean by this that there is no option to get for example to first line (after typing 10) and add some change to code (at least as expected). But as I mentioned earlier this is a good start tutorial, so you can create own REALbasic TextArea Syntax highlighting Class. Hope you will enjoy it!

StyledText Class in REALbasic

Because the TextArea already has selection style attributes, the StyledText class honors that information. This means that you can set the style information using the selection methods that are available within the TextArea class, and they will be reflected when getting StyleRun information (and vice versa). Not all of the style attributes for selections in the TextArea class are available in the StyleRun class, such as Outline, Condense, Shadow, and Extend. These were supported only on Mac OS “classic”.

StyledText Class example in REALbasic

The following example uses the methods of the StyledText class to mark up and align text and display it in a TextArea. In order for the styled text to display, you must turn on the Multiline and Styled properties of the TextArea.

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
29
30
31

Dim Text As String  // text to be displayed in TextArea
Dim st,ln As Integer  // start and length values of a paragraph
 
//define four paragraphs in Text
Text = "This is the text that we are going to save " _
+"into our file from the TextArea."+EndofLine _
+"Isn't that interesting?"+EndofLine _
+"Man, I sure do love using RB to take care of my projects."+EndofLine _
+"That's because the RS Engineering staff is just so awesome!"
 
TextArea1.StyledText.Text = text //four paragraphs in Text
TextArea1.StyledText.Bold(5, 2) = True
TextArea1.StyledText.TextColor(5, 2) = &cFF0000 //bold and red
TextArea1.StyledText.Size( 7, 10) = 16
TextArea1.StyledText.Underline(12, 4) = True //16 pt underline
TextArea1.StyledText.Size(100, 4) = 18
TextArea1.StyledText.TextColor(100, 4) = &cFF00FF //18 pt and Magenta
TextArea1.StyledText.Font(0, Len(text) ) = "Comic Sans MS"
 
//center aliign second paragraph
TextArea1.StyledText.ParagraphAlignment(1)=Paragraph.AlignCenter 
//set this paragraph in Helveticta, 18 pt bold, red
//first get the start and length values for this paragraph...
st=TextArea1.StyledText.Paragraph(1).StartPos
ln=TextArea1.StyledText.Paragraph(1).Length+1
 
//next apply attributes...
TextArea1.StyledText.Bold(st,ln)=True
TextArea1.StyledText.Font(st,ln)="Helvetica"
TextArea1.StyledText.Size(st,ln)=18
TextArea1.StyledText.TextColor(st,ln)=&cFF0000

Save StyledText to file in REALbasic

The following code, appended to the end of the previous method, saves the styled text to disk in RTF format. It assumes that the File Type Set, “TextTypes” has one item, TextRTF, that defines the RTF file type

1
2
3
4
5
6
7

Dim s As TextOutputStream
Dim f As Folderitem
 
f=GetSaveFolderItem(TextTypes.TextRtf,"TestSaveRTF")
s=TextOutputStream.Create(f)
s.Write TextArea1.StyledText.RTFData
s.Close

Creating the GUI

Insert to Window Class one TextArea Control and 3 x PushButton Control. Here is my example of GUI look for this application. You can make it the same or insert the controls where you like.

Save text to file

To save all text available in TextArea to text file insert to PushButton1 Sub Open() this code. Please have in mind that you can save the file without interacting with user for example: f = GetFolderItem(“textfile.txt”)

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

Dim t As TextOutputStream
Dim f As FolderItem
Dim dlg As SaveAsDialog
 
dlg = New SaveAsDialog 
 
f = dlg.ShowModal() // open save as dialog for entering the file name and selecting location to save
 
if f < > nil then // f different from nil
    t = f.CreateTextFile // create file in selected location
    t.Write (TextArea1.Text) // write date from TextArea to file
    t.Close // close file
else
    // user cancelled
end if

Open text from file

To open a text file and load it content to TextArea Control use this code in PushButton2 Sub Open().

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

Dim t As TextInputStream
Dim f As FolderItem
Dim dlg As OpenDialog
 
dlg = New OpenDialog 
 
f = dlg.ShowModal() // open open dialog for selecting a file to load
 
if f < > nil then // f different from nil
    t = f.OpenAsTextFile // open selected text file
    TextArea1.Text = t.ReadAll // read data from text file into TextArea control
    t.Close // close the file
else
    // user cancelled
end if

Convert text encoding

When you need to write text to a file that will be opened by other application that expects a particular encoding, you should convert the encoding before you call the Write method. You can do this by using ConvertEncoding function. Look on this example that converts the text from a TextArea1 to the UTF8 encoding. Code from PushButton3 Sub Open().

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

Dim t As TextOutputStream
Dim f As FolderItem
Dim dlg As SaveAsDialog
Dim s As String
 
dlg = New SaveAsDialog 
 
f = dlg.ShowModal() // open save as dialog for entering the file name and selecting location to save
 
if f < > nil then // f different from nil
    t = f.CreateTextFile // create file in selected location
    s = ConvertEncoding(TextArea1.Text, Encodings.UTF8) // convert encoding to UTF8
    t.Write (s) // write date from string to file
    t.Close // close file
else
    // user cancelled
end if

BinaryStream Class

BinaryStream objects are used to read and write data to and from a binary file. The benefit of using BinaryStreams rather than text streams is that you can read from and write to any position in the file. Text files must be read sequentially from the start to the end. On Windows and Macintosh only, BinaryStream objects can work with files larger than 2 gigabytes. This example reads each pair of bytes from a file and writes them in reverse order to a new file. The user chooses the source file using the Open-file dialog box and saves the new file using the Save as dialog box

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

Dim WriteToFile as BinaryStream
Dim ReadFromFile as BinaryStream
Dim f as FolderItem
 
f = GetOpenFolderItem("text")
 
if f < > nil then // if f different nil then
ReadFromFile = BinaryStream.Open (f,False)
ReadFromFile.littleEndian = True
f = GetSaveFolderItem ("","")
 
if f < > nil then // if f different nil then
WriteToFile = BinaryStream.Create (f,False)
while not ReadFromFile.EOF
WriteToFile.WriteShort ReadFromFile.ReadShort
wend
WriteToFile.Close
end if
ReadFromFile.Close
end if

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!

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.

Creating the GUI

Add to our Window one TextArea, one PushButton and one Timer control. In TextArea property Text put for example GNU GPL License Agreement. Now to the property Enabled of PushButton type false. You can do this by clicking on PushButton control and in Property Panel find and disable Enabled property.

Checking the end of ScrollBar position

In this part of tutorial we will create a Action in Timer control to check if the user has scroll to the end of License Agreement. If he has we will active the PushButton for next action. Double click on Timer1 control and use this code below:

1
2
3
4
5
6

if TextArea1.ScrollPosition = 456 then
    PushButton1.Enabled = True
    Timer1.Enabled = False
else
    PushButton1.Enabled =  False
end if

How we know that 456 is the end of our TextArea.ScrollPosition? The License Agreement has got always the same length so we have easier task. We can check the end of scroll position in TextArea1 with this code (create a new PushButton and when you scroll to the end of TextArea1 click on it).

1

msgBox = CStr(TextArea1.ScrollPosition)

OK, but somebody can ask how can we get the end of text available in TextArea1 when we don’t know the length of string inside it. The answer is easy:

1

msgBox = CStr(TextArea1.LineNumAtCharPos(TextArea1.Text.Len) + 2)

Of course every code from this tutorial can be used in Windows, Linux and Mac OS version of REALbasic. I use Mac OS and I prefer it to show my tutorials. REALbasic is cross-platform and you can use your favourite system to create great applications in this IDE.

Adding text to a TextArea

Add to the Window PushButton Control and double click on it. Then enter there the code below. It’s simply like in TextField.

1

TextArea.Text = "REALbasic City sample text"

Reading text from a TextArea

Reading the content from TextArea is extreme easy like this s = TextArea.Text. Here you got a example that shows Message Box:

1
2
3
4
5
6
7

Dim s As String
Dim d as New MessageDialog //declare the MessageDialog object
Dim b as MessageDialogButton //handling the result
 
s = TextArea.Text
d.Message = s
b = d.ShowModal

Changing selected text in TextArea

Every text editor has a option to change the style of the text. Here you can look how you can simple change the selected text in TextArea control to new color and new font with bold style. Add the code to PushButton Sub Action()

1
2
3
4
5
6
7

Dim Black As Color
 
Black = RGB(0,0,0)
 
TextArea.SelTextFont = "Arial"
TextArea.SelBold = true
TextArea.SelTextColor = Black

Changing string with TextArea

We can also change the text in string ex. by finding the word or by putting the cursor on indicated line. We will change the word “my” form text string by putting the cursor on 8 position and changing the next 2 letters to bold and red color.

1
2
3
4
5
6
7
8

Dim text As String
 
text = "This is my string"
 
TextArea.StyledText.Text = text
 
TextArea.StyledText.Bold( 8, 2 ) = true
TextArea.StyledText.TextColor( 8, 2 ) = &cFF0020

Using Mask

Simply select TextArea in GUI builder Tab and then in Property and Value find Behavior -> Mask and place there ex. ###-##-####. You can also add a code in TextArea Sub Open(). Go to Window1 code editor Controls -> TextArea -> Open.

1
2

TextArea.Mask = "###-##-####" //US Social Security number
TextArea.Mask = "(###) ###-####" //US Phone number, with area code

Mask Character in TextArea

# – The single digit placeholder. Entry optional. If this position is left blank in the mask, it will be rendered as a space. Plus and minus signs are allowed. The user can type only a digit character in this position.
. – Decimal placeholder. The decimal placeholder that is actually used is specified in the user’s International settings. The character is treated as a literal (formatting) character for masking purposes.
, – Thousands separator. The thousands separator that is actually used is specified in the user’s International settings. The character is treated as a literal (formatting) character for masking purposes.
: – Time separator. The time separator that is actually used is specified in the user’s International settings. The character is treated as a literal (formatting) character for masking purposes.
/ – Date separator. The date separator that is actually used is specified in the user’s International settings. The character is treated as a literal (formatting) character for masking purposes.
\ – Mask escape character. Treat the next character in the mask as a literal. The escape character enables you to use the ‘#’, ‘&’, ‘A’, ‘?’ (and so on) characters in the mask. The escapted character is treated as a literal (formatting) character.
& Character or space placeholder. Valid values are the ASCII characters 32-126 and the non-ASCII characters 128-255.
C – Character or space placeholder, where entry is optional. It operates like the ‘&’ placeholder.
> – Convert all the characters that follow to uppercase. Uppercasing works beyond the ASCII range where appropriate, e.g., ü becomes Ü.
< – Convert all the characters that follow to lowercase. Lowercasing works beyond the ASCII range where appropriate, e.g., Ü becomes ü.
A – Alphanumeric character placeholder, where entry is mandatory.
For example, the spec “AAA” specifies three alphanumeric characters.
a -Alphanumeric character placeholder, where entry is optional.
0 – Any single digit between 0 and 9. Entry is required.
9 – Digit or space where entry is optional.
? – Alphabetic placeholder. Entry is optional.
L – Alphabetic placeholder. Entry is required. Any literal. All other symbols are displayed as literals for formatting purposes.
~ – Reserved for future use. If you use “~” it will trigger an exception error. Use \~ instead.

Using TextArea Property and Value

When you select TextArea in GUI builder you can change some Property and Value for this control. We have got there position properties (width, height), appearance (text color, border), font (text size, text font), initial state (default text), behaviors (mask, read only) or database binding. Please play with them for a wile to understand what is happening when you change the values.