Antes de realizar este tutorial se recomienda la lectura de Conceptos Fundamentales
Para nuestra primer clase planteemos un objetivo simple. Supongamos que queremos crear cuadrados, preguntarles el área y pedirles que se dibujen en la pantalla.
Para esto, necesitaremos crear una clase Cuadrado. En esta clase deberemos contemplar la definición de nombres de variables de instancia y métodos para responder a la funcionalidad requerida. Empezaremos a crear la clase y a medida que lo hagamos definiremos estas cuestiones.
Abramos un System Browser. Haciendo clic en cualquier lugar aparecerá el "World" menú. Seleccionemos "open" y luego "browser". Aparecerá un System Browser como el siguiente.
El System Browser contiene cuatro paneles superiores y un panel inferior. Los paneles superiores los identificaremos como: panel de categorías de clases, panel de clases, panel de categorías de métodos, panel de métodos (en ese orden).
En Squeak existen muchísimas clases. A los efectos de hacer más simple el acceso a ellas, se las ha agrupado en categorías. Estas categorías no cumplen ninguna función salvo el hecho de agrupar las clases para ordenar las mismas. Empezaremos creando una categoría de clase nueva. Vayamos al panel de categorías de clases, desplacemos el mismo hasta poder observar la ultima categoría, con el mouse arriba de este panel, apretemos el botón derecho y elijamos "add-item". Aparecerá una ventana preguntándonos el nombre de esta nueva categoría, escribamos Curso-Smalltalk y apretemos "Accept". Volvamos a desplazar el panel para ver la última categoría.
Ahora que hemos creado nuestra categoría de clase, podemos definir nuestra clase Cuadrado. La misma la definiremos como una subclase de Object. En el panel grande inferior observarán un template (un molde) para guiarnos. Reemplacemos NameOfSubclass por Cuadrado y agreguemos en las variables de instancia lado y posicion (sin acento). Debería quedar así
Luego con el mouse en el mismo panel, presionemos el botón derecho y elijamos "accept". Ya hemos definido nuestra primer clase. Noten que hemos definido dos nombres de variables de instancia: lado y posicion. Estos nombres les permitirán a las instancias (cuadrados) conocer su dimensión y su posición en la pantalla para dibujarse.
Ahora definiremos los métodos que servirán para, mediante mensajes, dar dimensión y posicionar a los futuros cuadrados. Al igual que las clases, los métodos se agrupan (ordenan) en categorías. Crearemos primero una categoría de método llamada accessing. Posicionemos el mouse en el panel de categorías de metodos, apretemos el botón derecho , elijamos new category, luego elijamos new y aparecerá una ventana donde podremos escribir el nombre de categoría. Escribamos accesing y presionemos "accept".
Ahora definamos el método que servirá para darle dimensión al cuadrado. En el panel grande inferiro, tenemos nuevamente un template en el cual basarnos. Escribamos para que quede de la siguiente forma
Tenga en cuenta que el símbolo flechita para el costado se escribe apretando
la tecla del guión bajo_ .
Luego, nuevamente con el mouse arriba del panel inferior, apretemos el botón
derecho y elijamos "accept". Aparecerá una ventana que le pedirá
sus iniciales, ingréselas y elija "accept". Ya hemos definido
el primer método. Ahora modifiquemos el texto del panel inferior para
definir el método que servirá para posicionar los cuadrados. No
hay inconveniente en borrar lo que recién hemos escrito. Que quede de
la siguiente manera:
Ahora, siempre en el panel inferior apretemos el botón derecho del mouse y elijamos "accept". Ya hemos definido nuestro segundo método. Ahora definamos el método con el cual los cuadrados responderán su área. Modifiquemos el panel inferior para que quede así:
Tenga en cuenta que el símbolo flechita para arriba se escribe apretando
la tecla sombrerito: ^ . Ahora apretemos el botón derecho del
mouse y elijamos "accept".
Ya hemos terminado de definir el tercer método.
Ahora probemos nuestra clase. Abramos un workspace y evaluemos con "do it"
pepe := Cuadrado new.
pepe lado: 50.
pepe posicion: 100 @ 100.
Y ahora en el mismo workspace evaluemos con "print it"
pepe area.
pepe nos respnderá con el objeto número 2500 que representa el
valor de su área.
Inspeccionemos pepe: seleccionemos en el workspace la palabra pepe, apretemos
el botón derecho y elijamos "inpect it". Dentro del inspector
veamos a que objetos hacen referencia las variables de instancia lado y posicion.
Pero aún falta cumplir con un objetivo. Tenemos que lograr que los cuadrados se dibujen en la pantalla. Para eso volvamos al System Browser y modifiquemos el panel inferior de manera que quede así:
Apretemos el botón derecho y elijamos "accept". Ahora estamos en condiciones de pedirle a nuestro cuadrado que se dibuje. Para eso volvamos al workspace y evaluemos con "do it"
pepe dibujate
Hemos cumplido con el objetivo planteado. Podemos crear cuadrados y preguntarles el área y pedirles que se dibujen en la pantalla.