In this tutorial we will learn how can we add some useful informations to our application icon displayed in Mac OS Dock. We can show there for example information about download speed like in Transmission or number of new emails if our software is a email client. Watch it, learn it, enjoy it!
The DockItem Class works only on Mac OS. It enables you to manipulate the dock item associated with your application or with the application’s windows. To manipulate the application’s dock icon, use the DockItem property of the Application class. To manipulate a window’s dock icon, use the DockItem property of the Window class.
Before we learn how can we add a icon to our application we should remember to design it as a 128×128 pixel graphic. When we have that done we can go to Project Tab. Now in App Property: Icon add a 128×128 graphics to Picture and Mask.
In this moment we will simulate that our software is a email client so we like to display in the Dock icon info how many new email are waiting for the user. We can do this by drawing a FillOval and inserting on it a text. Add in REALbasic Code Editor – Event Handler Sub Open () this code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | Dim p, m As Picture p = NewPicture (128,128,32) // (width, height, depth) p.Graphics.ForeColor = RGB (255,0,0) // red color p.graphics.FillOval (75,3,40,40) // create a oval in right top corner of our icon p.Graphics.ForeColor = RGB (255,255,255) // white color p.Graphics.TextFont = "Arial" // use font Arial p.Graphics.TextSize = 29 // text size p.Graphics.Bold = True // make the text bold p.Graphics.DrawString ("5",86,32) // draw 5 in right top corner of our icon App.DockItem.Graphics.DrawPicture (p,0,0) //draw the picture to the Dock App.DockItem.UpdateNow // update the Dock picture |
As you can probably see in this moment your app icon in dock is a white square with nice looking email notification. But where is the Icon you have created, why it isn’t displaying on the Dock? The answer is simple, we must create a picture mask to hide the white square and show the icon.
To create a mask we must add some code in 13 line before App.DockItem.Graphics.DrawPicture (p,0,0). When we do this we will get the effect we have expected.
1 2 3 4 5 6 7 8 9 10 11 12 | m = NewPicture (128,128,32) m.Graphics.ForeColor = RGB (0,0,0) m.graphics.FillOval (75,3,40,40) p.Graphics.ForeColor = RGB(255,255,255) // delete white color m.Graphics.TextFont = "Arial" m.Graphics.TextSize = 29 m.Graphics.Bold = True m.Graphics.DrawString ("5",86,32) p.Mask.Graphics.DrawPicture (m,0,0) //add the Mask to our picture |
If we like to reset the Icon to default look we can use this code.
1 | App.DockItem.ResetIcon |
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.
Hello i follow this tutorial, if I wanted to check in for Windows saying that it must process this piece of code as I do?
Sorry for my english, i’m italian
Hello,
no, the code is only available for making some cool stuff in Mac OS Dock. If you are using MS Windows you can use only the part that tell you how to add a Icon to your REALbasic app
I understand this, but i want know if i must make a control for windows for hide this piece of code.
EXAMPLE:
if p nil then ‘control for windows
App.DockItem.Graphics.DrawPicture (p,0,0) //draw the picture to the Dock
App.DockItem.UpdateNow // update the Dock picture
end if
i’m beginner realbasic developer and i don’t know if what I just wrote is right
thank you for your Help
If I understand you correctly you like to know how to make a code working only with specific platform, so if yes then this is the solution:
#if TargetWin32
//Windows specific code here
#elseIf TargetMacOS
//Macintosh code goes here.
#elseIf TargetLinux
//Linux code goes right here.
#endIf
Thanks for your help, worked everything perfectly!
Hi Jakub, if I wanted to put an image instead of filloval how do I do?
Hi,
simple use Graphics.DrawPicture method.
OK, but how do I take the image from my application?
I don’t understand the question.
How do I take the image in the Resources folder of my application?
Mail application on Mac, not use the FillOval method for display the number of emails received, but an image called “dragBadge1-2.tiff”. If I wanted to also make the picture as I do?
dim f as folderItem
dim img,p,m as picture
f = GetFolderItem(“dragBadge1-2.tiff”)
if f.Exists then
img = f.OpenAsPicture
p = NewPicture (26,26,32)
p.graphics.drawpicture img,75,3
…..
else
msgbox “The image dragBadge1-2.tiff not exist!”
end if
I receive a error msgbox, where is the “dragBadge1-2.tiff” image in my app? If i check into my App Resources i found the dragBadge1-2.tiff image
Simple add the image (dragBadge1-2.tif) to project tab and then use the image name to display: p.graphics.drawpicture (dragBadge1-2,75,3)
Thanks Jakup,
I display a trasparent dragBadge and the dragBadge is smaller than mail application dragBadge. Here my code
Dim p, m As Picture
p = NewPicture (128,128,32) // (width, height, depth)
‘p.Graphics.ForeColor = RGB (202,38,10) // red color
‘p.graphics.FillOval (75,3,40,40) // create a oval in right top corner of our icon
p.Graphics.drawpicture (dragBadge,75,3)
p.Graphics.ForeColor = RGB (255,255,255) // white color
p.Graphics.TextFont = “Arial” // use font Arial
p.Graphics.TextSize = 12 // text size
p.Graphics.Bold = True // make the text bold
p.Graphics.DrawString (count,85,20) // draw 5 in right top corner of our icon
m = NewPicture (128,128,32)
‘m.Graphics.ForeColor = RGB (0,0,0)
‘m.graphics.FillOval (75,3,26,26)
m.Graphics.drawpicture (dragBadge,75,3)
p.Graphics.ForeColor = RGB(255,255,255) // delete white color
m.Graphics.TextFont = “Arial”
m.Graphics.TextSize = 12
m.Graphics.Bold = True
m.Graphics.DrawString (count,85,20)
p.Mask.Graphics.DrawPicture (m,0,0) //add the Mask to our picture
App.DockItem.Graphics.DrawPicture (p,0,0) //draw the picture to the Dock
App.DockItem.UpdateNow // update the Dock picture
You can use simple Canvas Control available in REALbasic. Then you change the backdrop to image file.
I wonder if you can make a tutorial about how to add image to your Window.
Thanks for your helps.