Smallfaces y Seaside Builder. Burella, Juan M. Morales, Hernán Manzanos, Norberto

Transcripción

1 Smallfaces y Seaside Builder Burella, Juan M. Morales, Hernán Manzanos, Norberto

2 Objetivos Smallfaces Aprender sobre Smallfaces Qué es? Cómo pensar una aplicación web con Smallfaces? Mostrar su uso y extensibilidad. Mostrar el uso dado actualmente. SeasideBuilder Qué es? Mostrar su uso y extensibilidad.

3 Presunciones Familiarizado con alguno de los dialectos más importantes de Smalltalk (Squeak, VisualWorks, etc.) Interesado en desarrollar aplicaciones web con Smalltalk.

4 Agenda Seaside Cascading Style Sheets (CSS) Controles Smallfaces SeasideBuilder

5 Seaside Seaside es un framework para desarrollar aplicaciones web en Smalltalk

6 Seaside Características Importantes Componentes Embebidos Reifica el concepto de Sesión Soporte de Debugging Request basado en Callbacks Generación de HTML en forma Programática Soporte de CSS & Javascript

7 responsabilidad dibujarse sobre un Canvas, para ello colabora con un Renderer Seaside: Generación de HTML Dibujado: Cada Componente tiene como

8 Seaside: Generación de HTML En forma Programática acomponent>>rendercontenton: arenderer. arenderer textinput. arenderer radiobutton. arenderer textarea. arenderer submitbutton.

9 Agenda Seaside Cascading Style Sheets (CSS) Controles Smallfaces SeasideBuilder

10 Cascading Style Sheets (CSS) Def 1: Tecnología de presentación de documentos XHTML. Def 2: Lenguaje para separar estructura (cómo está organizado) de presentación (cómo se ve) en un documento XHTML. Orientado a archivo(s).

11 Cascading Style Sheets (CSS) en Seaside Soporte de CSS es orientado a Script acomponent>>style ^ p { background-color: red }

12 Modelo de objetos CSS aselector { border-style: ridge; border-color: red; border-width: medium }

13 Modelo de objetos CSS: ventajas Ventajas Simplifica al usuario no familiarizado con CSS. Unifica la creación de páginas web, mediante conceptos provistos por el paradigma: objetos y mensajes. Desventajas El usuario familiarizado con CSS le es más natural la metodología tradicional

14 Agenda Seaside Cascading Style Sheets (CSS) Controles Smallfaces SeasideBuilder

15 Smallfaces Qué es? Conjunto de controles básicos para Seaside NO es un reemplazo del protocolo de Seaside. NO es solo simplificar los métodos de dibujado Implicar pensar un documento en objetos. Promueve el reuso pensando en controles compuestos y personalizados más naturalmente. La idea es dejar de pensar en XHTML, CSS y Javascript. Extensible a otros frameworks web. AIDA?

16 Smallfaces : Generación de XHTML De Forma Programática Creación + Dibujado Utilizando Controles Creación Dibujado acomponent>>rendercontenton: arenderer. arenderer select size: 3; list: #( 'Seinfield' 'The Simpsons' 'South Park'); selected: 'South Park ; callback: [ :item value := item ].. acomponent>>initialize... programs := SFListBox new. programs lines: 3; name: 'programs'; list: #( 'Seinfield' 'The Simpsons' 'South Park'); selectindex: 3. self addsubpane: programs acomponent>>rendercontenton: arenderer arenderer render: (self panenamed: 'programs').

17 Modelo de CSS en Smallfaces listbox := SFListBox new. listbox label: 'Favorite TV programs ; list: #( 'Sanfield' 'The Simpson' 'South Park ); selectitem: 'South Park ; lines: 3; printselector: #asstring; borderstyle: CSSBorder ridge; borderwidth: 10; bordercolor: Color red; centered; extent: 80; font: (CSSFont familynames: 'Verdana' withsize: 15 withweight: CSSFontWeight

18 Smallfaces: Ejemplos Veamos Ejemplos!!!!! Class Browser Seaside: Class Browser Smallfaces:

19 Smallfaces: Uso actual Opus: Modelo para registro de material bibliográfico basado en IFLA-FRBR. Interface de usuario compleja.

20 Smallfaces: Uso actual Opus UI

21 Smallfaces: Manejo de Eventos Ejemplo

22 Smallfaces: Manejo de Eventos Scriptaculous Smallfaces

23 Smallfaces To Do Modelar los widgets faltantes. Layout: posicionamiento y disposición de controles. Refactorización del Modelo Desacoplar SmallFaces de Seaside, permitiendo variar el framework de dibujado. Desacoplar Smallfaces de la tecnología de presentación.

24 Agenda Seaside Cascading Style Sheets (CSS) Controles Smallfaces SeasideBuilder

25 SeasideBuilder Qué es? Herramienta de construcción de componentes Seaside Caracteristicas No necesita instalador Trabaja sobre el navegador. Genera código automáticamente

26 SeasideBuilder: Ejemplos Veámoslo Funcionando!!!!! SeasideBuilder:

27 SeasideBuilder To Do Refactorización del Modelo Completar la herramienta para los widgets faltantes. Completar la herramienta para los controles compuestos. Layout: posicionamiento y disposición de controles. Configuración de eventos. Edición de componentes previamente construidos mediante la herramienta. Personalización de una biblioteca de controles. Orden de tabulaciones (Tab Order)

28 Preguntas?

29 Muchas Gracias!