SWT (Squeak Widgets Toolkit) - Algo para mostrar

Después de unos (pocos (muy pocos)) días de vacaciones, volví al trabajo con más fuerzas y, para probarlo, les muestro en que estado está el desarrollo del LiveWiki que prometí hacer.

Usando el JS2JS, ahora estoy desarrollando un juego de widgets para los navegadores de Internet. Esta primera versión es muy simple, pero ya tiene lo suficiente para ver la idea completa: Se escribe código Smalltalk y se ejecuta en los navegadores de internet (previa conversión ST > JS). Pueden descargar la versión actual en SqueakSource.

Esto es un método, de la clase SWTExampleApplication, que crea unos simples (y aburridos) textos.

SWTExampleApplication>>createSimpleTexts | root | root := self rootWidget. root addHorizontalRule. root addWidget: (SWTHeader level: 2 contents: 'Simple texts'). root addWidget: (SWTText contents: 'some plain text. bla, bla, bla, bla, bla.'). root addWidget: (SWTText contents: 'text in red'). root lastWidget color: S2SColor red. root addWidget: (SWTText contents: 'text in blue/green'). root lastWidget color: S2SColor blue; backgroundColor: S2SColor green. root addBreak.

El método que está a continuación muestra como es el manejo de eventos. Se ve claramente el uso de los bloques de Smalltalk (que se mapean a funciones de JS):

SWTExampleApplication>>createButtons | root button | root := self rootWidget. root addHorizontalRule. root addWidget: (SWTHeader level: 2 contents: 'Buttons'). root addWidget: (SWTButton caption: 'inspect event' onClick: [:event | event inspect]). root addWidget: (SWTButton caption: 'inspect root panel' onClick: [:event | root inspect]). root addWidget: (button := SWTButton caption: 'button with several event handlers'). button onClick: [:event | event inspect]. button onClick: [:event | self inform: '2st handler: ' , event asString]. button onClick: [:event | self inform: '3rd handler: ' , event asString]. button color: S2SColor blue; backgroundColor: S2SColor blue muchLighter. button onFocus: [:event | event source color: S2SColor red; backgroundColor: S2SColor red muchLighter ]. button onBlur: [:event | event source color: S2SColor blue; backgroundColor: S2SColor blue muchLighter ].

Si algo tiene de interesante esta primera versión es que ya estoy jugando con los widgets "Edit In Place" (Modificar en el Lugar) que usaré para la modificación en vivo del LiveWiki. Este es el método que crea algunos textos "EditInPlace" y, también, crea un botón para crear más textos editables.

SWTExampleApplication>>createEditableTexts | root | root := self rootWidget. root addHorizontalRule. root addWidget: (SWTHeader level: 2 contents: 'Edit-In-Place texts'). root addWidget: (SWTButton caption: 'add a new edit-in-place text' onClick: [:event | self addNewEditInPlaceText]). root lastWidget backgroundColor: S2SColor yellow muchLighter. root addBreak. root addWidget: (SWTEditInPlaceText contents: 'One edit-in-place text, click on me to edit'). root addBreak. root addWidget: (SWTEditInPlaceText contents: 'Another edit-in-place text (with background color), double click on me to edit'). root lastWidget editOnDblClick; backgroundColor: S2SColor blue muchLighter. root addBreak. root addWidget: (SWTEditInPlaceText contents: 'Just another edit-in-place text (with background color), move mouse over me to edit'). root lastWidget editOnMouseOver; backgroundColor: S2SColor red muchLighter. root addBreak. root addWidget: (SWTEditInPlaceText contents: 'And just another edit-in-place text (with background color), move mouse over me to edit'). root lastWidget editOnMouseOver; backgroundColor: S2SColor green muchLighter. root addBreak.

Para los bagos de siempre (que no quieren instalar nada en sus Squeaks) les subí un HTML 100% autónomo que incluye todo el código Javascript generado desde Smalltalk (126Kb).

Los próximos pasos, en el desarrollo, es integrar los widgets con el Asteroid (Implementación de Comet para Squeak) para poder implementar un Observer Pattern (aka un MVC) distribuido entre el Squeak y los navegadores de Internet.