Creating the GUI for twitter client

We will use in this project controls: 2x StaticText, 1x TextArea, 1x TextField and 2x PushButton. Try to get results close to the screenshot below. Change in StaticText1 -> Appearance -> Text Value to What are you doing? and in StaticText2 change text to 140 and the Font to bold style. In TextArea1 change the property LimitText value to 140 (this way we will add a limit for character in this control). On bottom insert PushButton1 control and change it Caption to “Update on twitter”. Add also one TextField for our URL and one PushButton2 control with Caption “Insert Short URL”. You should get something like that:

Count remaining characters…

Twitter allows using only 140 characters per update so we will create a character counter in our application. Go to TextArea1 Sub TextChange() and insert there the code.

1

StaticText2.Text = CStr(140 - Len(TextArea1.Text))

CStr function converts the number to string and in () we count how many characters are left in our TextArea1 control. Len function give us how many character are in TextArea1 control.

Creating Download Manager GUI

We will create a very basic GUI for our app so add to Window1 2x StaticText Control (File URL, Status), one TextField Control (for file url location), one Listbox Control (for displaying download status) and one PushButton Control (Download button). When you finish you should get something like this:

HTTPSocket Class in REALbasic

At this moment we will create a class named hget with Super Value HTTPSocket. We will use it to download a file and show the progress of download. If you don’t know how to do this simply go to my article Creating a Class in REALbasic and you will find there all answers you need to go next.

Now inside hget Class go to Event Handlers Sub Connected () we can display info that our download has started. We can do this with one line of code and our Listbox Control.

1

Window1.Listbox1.AddRow "Download Started"

Remaining in hget Class code editor go to Event Handlers Sub DownloadComplete () and enter there:

1
2
3

me.Close //closing the connection when download finish
 
Window1.Listbox1.AddRow "Download Complete" //add info to Listbox

The last thing we will do in hget Class is making visual progress of file download. We do this in Event Handlers Sub ReceiveProgress.

1
2
3
4
5

Window1.ProgressBar1.Maximum = totalbytes
 
Window1.ProgressBar1.Value = bytesReceived
 
Window1.ProgressBar1.Refresh

Get file name and extension from URL

Well how can we do this? The best way to do this is knowing that URL is constructed in such a way that mark / separates the file locations, folders. If we know that we can find the last mark / and then we will copy everything before it (this will be the file name and extension). The easiest method to do it is finding the first mark / from the right of URL.

For example when we use this link:

http://realbasic.tutspolis.com/files/tutorials/downloadmanager.png

we will find this:

/downloadmanager.png

We can find the file name and extension from URL using this method:

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

Dim i, n As Integer
Dim s, a, filename As String
Dim b As Boolean
 
b = true
 
for i = 0 to Len(TextField1.Text) //check all mark in URL - Len returns the number of characters in the specified string
 
  s = Right(TextField1.Text, i) //get mark from right i + 1
 
  a = Mid(s, 1 ,1) //check the firs mark from s Right count
 
  if a = "/" and b = true then //when we find the first mark / we will save the position to n and stop replacing it because in URL are more / marks
 
    b= false
    n = i 
  end
 
next
 
filename = Right(TextField1.Text, n - 1) //returns the file name

Download a file using HTTPSocket

To download a file with displaying the progress in ProgressBar control using HTTPSocket.Get you must remember to have it like in example below. If you try to use only something like HTTPSocket.get(string,f,10) the class will not react for displaying the download progress or other Event Handlers.

One tip more – When you are using synchronous HTTP, your application may need to wait a noticeable amount of time to get or post a page. Setting Yield to True allows for events and other code to execute while waiting for a page.

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

Dim d As New hget
Dim f As FolderItem
Dim filename As String
 
f = SpecialFolder.Desktop.Child(filename) // saves the file on Desktop
 
d.Yield = True
 
if f.Exists = false then //if file doesn't exists then 
    
  Window1.Listbox1.AddRow "Creating file: " + Str(f.DisplayName)
 
  d.get (TextField1.Text,f) //downloading file  to desktop
 
elseif f.Exists = true then
  Return
end

So to get everything work combine our two last methods into one and insert them to PushButton1 Sub Action () like here:

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
32
33
34
35
36
37
38

Dim d As New hget
Dim f As FolderItem
Dim i, n As Integer
Dim s, a, filename As String
Dim b As Boolean
 
b = true
 
  for i = 0 to Len(TextField1.Text)
 
    s = Right(TextField1.Text, i)
 
    a = Mid(s, 1 ,1)
 
    if a = "/" and b = true then
 
      b= false
      n = i
 
    end
 
  next
 
  filename = Right(TextField1.Text, n - 1)
 
  f = SpecialFolder.Desktop.Child(filename)
 
  d.Yield = True
 
  if f.Exists = false then
 
    Window1.Listbox1.AddRow "Creating file: " + Str(f.DisplayName)
 
    d.get (TextField1.Text,f)
 
  elseif f.Exists = true then
    Return
end

Download

Creating the GUI

Add to your Window Class 8 x StaticText Control and 1 x Canvas Control. Try to put this controls like on the screenshot below. In our example we will download and format weather data for Polish city Wroclaw. Of course there are no problems to change it for your city. Add in code editor a New Property s As String. We will hold there the downloaded web page.

Before we start please notice that the data (conditions, forecasts, news, images, logos) contained in weather.yahoo.com are copyrighted by Yahoo! Inc. and the Weather Channel Enterprises, Inc. You are prohibited from using or repurposing this data in any way without express written consent from Yahoo! Inc. and the Weather Channel Enterprises, Inc. If you are looking for a source of weather data, please see the National Weather Service Website at http://www.nws.noaa.gov/. Their data is public information, to be used with appropriate byline/photo/image credits. This tutorial shows only some techniques allowing you download a file and render some data.

Find text between two strings

Add a New Method and enter for Method Name: getData for Parameters: KeyQuery As String, KeyQuery2 As String, data As String and for Result: String. Insert then the code below. If you don’t understand what is going here please visit Mid and InStr Functions in REALbasic tutorial for better orientation.

1
2
3
4

Dim KeyStart As String = KeyQuery
Dim KeyEnd As String = KeyQuery2
 
Return Mid( Data, InStr( Data, KeyStart ) + Len(KeyStart), InStr( Data, KeyEnd ) - (InStr( Data, KeyStart) + Len(KeyStart) ) )

Download image using HTTPSocket

Create a New Method and name it getImage. In this method we will find the graphics on the web page, download it to our hard drive and load it to our application.

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

Dim f As FolderItem
Dim p As Picture
Dim http as New HTTPSocket
Dim pictureurl As String
 
f = getTemporaryFolderItem() //temporary folder location to save image
 
pictureurl = getData("http://l.yimg.com/a/i/us/nws/weather/gr/", ".png", s) //find the picture name from source code
 
dim result as boolean = http.get("http://l.yimg.com/a/i/us/nws/weather/gr/" + pictureurl + ".png", f, 10) //download and save the picture
 
if result then
    f.MacCreator = "prvw"
    f.MacType = "PNG"
    p = f.openAsPicture() //load the picture from hard drive to memory
    Canvas1.Backdrop = p //load the picture to Canvas1 Control
end if
 
http.Close

Download and format Yahoo! Weather data

Ok, when we view http://weather.yahoo.com/Wroclaw-Poland/PLXX0029/forecast.html page source we will find a HTML dl Tag with all data we like to use in our REALbasic Weather application.

1
2
3
4
5
6
7
8
9
10

<dl>
<dt>Feels Like:</dt><dd>57°</dd>
<dt>Barometer:</dt><dd>30 in and steady</dd>
<dt>Humidity:</dt><dd>72%</dd>
<dt>Visibility:</dt><dd>6.21 mi</dd>
<dt>Dewpoint:</dt><dd>48°</dd>
<dt>Wind:</dt><dd>ESE 8 mph</dd>
<dt>Sunrise:</dt><dd>6:32 am</dd>
<dt>Sunset:</dt><dd>4:40 pm</dd>
</dl>

Now we try to find and format this data and display it in our StaticText Controls. Let’s do it!

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
32
33
34
35
36
37
38

Dim http as New HTTPSocket
Dim part As String
 
s = http.Get("http://weather.yahoo.com/Wroclaw-Poland/PLXX0029/forecast.html",30)
 
part = getData("<dl>","</dl>", s) //grab only the data we will need 
 
StaticText1.Text = "Feels Like: " + getData("Feels Like:</dt><dd>","</dd>", part)
 
part = Replace(part, "</dd>", "") //this will give us a option to find next end of </dd>
 
StaticText2.Text = "Barometer: " + getData( "Barometer:</dt><dd>" ,"</dd>" , part)
 
part = Replace(part, "</dd>", "")
 
StaticText3.Text = "Humidity: " + getData("Humidity:</dt><dd>","</dd>", part)
 
part = Replace(part, "</dd>", "")
 
StaticText4.Text = "Visibility: " + getData("Visibility:</dt><dd>","</dd>", part)
 
part = Replace(part, "</dd>", "")
 
StaticText5.Text = "Dewpoint: " + getData("Dewpoint:</dt><dd>","</dd>", part)
 
part = Replace(part, "</dd>", "")
 
StaticText6.Text = "Wind: " + getData("Wind:</dt><dd>","</dd>", part)
 
part = Replace(part, "</dd>", "")
 
StaticText7.Text = "Sunrise: " + getData("Sunrise:</dt><dd>","</dd>", part)
 
part = Replace(part, "</dd>", "")
 
StaticText8.Text = "Sunset: " + getData("Sunset:</dt><dd>","</dd>", part)
 
getImage //download and load the image into Canvas1 Control

Download

Definition of Class by Wikipedia

In object-oriented programming, a class is a programming language construct that is used as a blueprint to create objects of that class. This blueprint describes the state and behavior that the objects of the class all share. An object of a given class is called an instance of the class. The class that contains that instance can be considered as the type of that object, e.g. a type of an object of the “Fruit” class would be “Fruit”.

Creating a Class in REALbasic

Run REALbasic IDE and go to Project TAB. Click there on Add Class button and select created Class1.

Now go to Property and Value and change the Name from Class1 to cHTTP and add to Super value HTTPSocket. Double click on cHTML Class in Project TAB.

Add Method and Add Property

In code editor for this class we will create a new Property, so click Add Property and in Declaration type Data in As type String.

Our next step will be creating a new Method. Click on Add Method button next to Add Property and enter for Method Name downloadHTML. Now insert this code below.

1
2
3

Data = Me.Get ("http://tutspolis.com", 3 )
 
Me.Close

The HTTPSocket has got a option called Get with will simply in this case get the html code of indicated URL. Our class will download for us the HTML from tutspolis.com.

Using a Class in REALbasic project

Now in GUI builder we will have a new control called cHTML. We can simply drag and drop it to our Window. To try out our new class add to the Window controls TextArea and PushButton. Double click on PushButton and enter the code:

1
2
3
4

Dim tuts As new cHTML
 
tuts.downloadHTML // get the html code
TextArea1.Text =  tuts.Data // display it in TextArea control

The effect

When we will press PushButton, TextArea will fill up with HTML code of tutspolis.com home page. You can now for example render the code, modify it or get only some important for you information. It can be also done in class cHTML on other Method.