The official IDE (Integrated Development Environment) from Microsoft is the "Visual Studio". If you are developing a system using C++ and C#, by example, you will create any application using the "Visual Studio" but you will generate, at the end, an executable file (.EXE). The user will need to receive some parts of of the "Visual Studio" (the Visual C++ Redistributable and the Microsoft Framework Runtime, by example) but they will be invisible at the execution of the application.
The "Cobalt Studio & Navigator" is an IDE where you, programmer, will develop the appications of a system but the user will need to receive all the "Cobalt Studio & Navigator" and it will be visible for this user.
You will understand this better soon.
At this lesson we will create an application that will show to you the basics of the creation of a graphic interfaces for your applications. The application is a digital clock, created using some Classes that we have presented in previous lessons. Lets go, step by step:
1 - Click in the empty (black) part of the "Cobalt Studio & Navigator" and will appear a "World Window".
2 - Click in the line: "open" and will appear another window. Click: "morphic project". Now you will have an orange little window.
3 - Click the orange window. All is white, empty now! You have opened a new page (form) for a new application. In Cobalt we say: a new "project".
Like any other IDE, we will work using form controls. In Java or C# we have the control: Label. In Cobalt this control has the name: Text. How to have a Text inside our white form?
4 - In the "World Window" click: "objects". Appear what we call: the "Green Window",
5 - The Text is instancialized (it's a Class, like any other) graphically, dragging it from this " Green Window" to the white form:
6 - Pressing the reel of your mouse (central button) having the pointer over any Cobalt control, like our Text, appears some icons around it. If the pointer is over the icon will appear a tip about it. The name of this group of icons is: "halo". It's an important resource of Cobalt.
Some of these icons doesn't make sense sometimes. The more important are:
To use the function represented by an icon, click it. Clicking in any empty place, the halo disappears.
7 - Clicking the blue icon having an eye appears a new window. It's the "Object Viewer" (for this object). It has many sub-divisions (basic, color & border etc.). You can see new divisions clicking the "two-arrows" button at any division.
Any line of the "Object Viewer" is a graphic representation of a method/function of the Class (here, the Class Text) having, if adequate, values for its parameters. Or something like this...
A graphic object can have one script (or more) glued to it.
8 - We will create an script for our Text, dragging, from the sub-division "scripts" of the Object Viewer, the line "Text emptyScript" .
9 - Click in the square (3th from left) and a window will open having only the name of an script and one line of code returning: "self". "self" means: "me", this Text... "self" is the object-reference, the "prefix", the pointer of this instancialization of the Class Text.
10- The lines of code for our application (the "digital clock") will use many things we have presented at previous lessons:
|arrDT t | arrDT:= Date dateAndTimeNow. t:=arrDT at:2. self setCharacters:t. self setScaleFactor: 4.0
What you haven't seen yet are the last two lines. They are methods of the Class Text. We will present a "Quick Reference" of this Class in the next lesson. Explainning by now: "setCharacters" writes the string "t" and "setScaleFactor" changes the size of the letters/numbers.
11 - You can do this exercice: copy and paste (you need to use paste(v)) these lines of code inside the window of the "script1" (something like we did at the "Workspace window"). Doing an "accept", you will need to type the initials of your name (for register) and will have the script saved.
12 - Click in the "normal" button of the superior Bar of the Script Viewer and choose: "ticking". The script will run in loop, showing an actualized time at each second.
13 - You need now to "clean" the page of the project, closing (sometimes clicking a circle - not an "X" - and sometimes the usual "X" ) all the auxiliary windows and moving the Text (use its "Halo") to the center.
14 - Clicking in any place the "halo" disapears. And you need now to do a "little save" of your project (we will talk about the "big save" soon): click to open the "World window" again and click: "save project on file". Will appear a window where you type the name of the application ("clock", by example) and some other optional informations.
15 - Clickink "OK", will appear a blue window. Press "Save" and the project will be saved on the folder "Squeaklets" inside the main folder of Cobalt. The name of the file will be: clock.001.pr. If you modify your appplication and save it again we will have a clock.002.pr file (a new version).
16 - Open the "World window" again, and click: "previous project". You will go back to the main page of the "Cobalt Studio & Navigator". The icon (?) of the application appears and can be moved. Clicking in the icon, the application opens. To close it ? "World window" and "previous project".
17 - To finish, open again the "World window" and click: "Save".
You did a "big save". Your "Cobalt Studio & Navigator" is updated now and, if you close it an open tomorrow, the application "Clock" will be there. BUT BE CAREFULL ! Your version of "Cobalt Studio & Navigator" is different of the original version you have downloaded. May be it's a better option to save using "Save as..." and choose a new name for a new .IMAGE file. The inconvenience is: you can't use the standard .BAT file to open this version.
You have finished your first Cobalt appication. It's not a "multiplayer application". We will learn how to do "multiplayers applications" soon.
PREVIOUS LESSON NEXT LESSON TABLE OF CONTENTS HOMEPAGE