Squeak
  QotD    "To be or not to be" – Shakespeare
View this PageEdit this PageUploads to this PageHistory of this PageTop of the SwikiRecent ChangesSearch the SwikiHelp Guide
Calculator Tutorial
Last updated at 3:12 am UTC on 22 December 2006
A spanish tutorial at http://ar.geocities.com/edgardec2001/CalcuMorph.htm
The bad english version for upcoming 3.10 CalcuMorph fur dummies

Una calculadora Morphic


Tratando de orientar a quienes ven por primera vez Squeak y lo encuentran muy diferente a todo lo que han conocido hasta ahora, incluso a otros Smalltalks, veremos como podriamos implementar una calculadora elemental en Squeak.
Para que no se tienten, no traten de importar código de otro Smalltalk.

Al ser diferente la interfaz gráfica, seguramente ni siquiera podrán hacer un fileIn en forma completa.

Para no empezar desde cero, si pueden leer el código e intentar copiar los métodos que no tengan nada relacionado con la interfase.

Por ejemplo, estoy intentando leer un Calculator.st de VisualWorks como inspiración.

Desde un FileList o via drag and drop (Para SqueakLight y Squeak 3.8/3.9) pueden elegir "code", con le que les saldra un File Contents Browser como el que se ve aquí. External Image Pueden leer que proviene del VisualWorks y que tiene dos partes, en la tradición MVC que la mayoría de los Smalltalks sigue separando el modelo de la vista y del controlador.


Se puede hacer MVC en Squeak, incluso si solo desean eso pueden tener una imagen extra chica. Pero la verdad es que casi nadie que use Squeak usa MVC, sino Morph.

El gran problema para los que han visto otros Smalltalks, es que Morph nunca fue Smalltalk sino Self, y por tanto es una forma completamente distinta de pensar los objetos (y por consecuencia como programar con objetos).

Pero Morph, a pesar de todos los detractores, es sencillo y divertido. Así que basta de protestas.

Presionado el boton que dice dual change sorter, con el menú contextual hacer new change set y usar como nombre CalculadoraMorphica.


Luego de esto, en el system browser hacer una nueva categoría CalculadoraMorphica.

En la definición de clase debe quedar

BorderedMorph subclass: #CalcMorph
instanceVariableNames: 'display memoria'

classVariableNames: ''
poolDictionaries: ''
category: 'CalculadoraMorphica'

En el panel de categorías de métodos, con el menú contextual hacer new category y despues elegir "initialization", para seguir las normas de estilo usadas en Squeak.

Todo objeto responde a intialize cuando se envia el mensaje new , por lo que debería ser el primer metodo.

Veremos como combinar la manipulacion directa de los objetos gráficos y como traducir esto a código.

En el menú del "Mundo" External Image elegir new morphExternal Image y despues from alphabetical list elegir BorderedMorph.


Repetir para elegir SimpleButtonMorph. A esta altura ya se sospecharán que trabajar con SqueakLight es mejor para principiantes, pero cada uno elije.

Con el SimpleButtonMorph, via halo y boton menu del halo elegir change label, tipear 1.

Nuevamente via halo, seleccionar siblings, multiple siblings instances para obtener nueve botones iguales

Seleccionando cada boton y moviendo via halo para que quede por encima del BorderedMorph, a cada uno via halo le damos la orden enbed into y elegimos el BorderedMorph.

Va a quedar algo así External Image para que quede arreglado como en External Image,


External Image seleccionando el BorderedMorph via halo, menu layout que quede selecionado table layout y left to right para la direccion

de la lista y top to bottom en wrap direction.

Via halo nuevamente, deformar el Morph hasta que quede como se desea.

Supongamos que esto que vemos es lo que deseamos, veremos como transformarlo en código.

Seleccionado via halo, elegimos debug, inspect para obtener el inspector del objeto.

Se verá algo como External Image

Así que comenzamos tipeando lo siguiente en el panel del código.

initialize
"Aqui intentamos llevar a código lo que manipulamos directamente"

super initialize.
self extent: 57@140.
self color: Color black.
self layoutPolicy: TableLayout new.
self listDirection: #leftToRight.
self wrapDirection: #topToBottom.

self layoutInset: 5@5.

Sugiero que lean directamente el resto en el código, que ya subi a la seccion Archivos del grupo.

Solamente implemente que sume, External Image pero la pregunta inicial fue como hacer botones y cajas de texto.

Investigar las clases utilizadas y preguntar dudas