First Name: Cyril Last Name: Ferlicot-delbecque Email: cyril@ferlicot.me Title: Seaside Add-ons Abstract: Seaside is a heretic web framework with an unique design that have the advantage of been more productive than most web framework. One of its current downside is the fact that it has only few known libraries built on top of it to be even more productive. To correct this problem, some developers try to build reusable libraries to covers some common needs. This presentation will cover some of those recent projects: - Material Design Lite - Telescope-Cytoscape - ChartJs for Seaside - Prism code displayer for seaside - Heimdall Bio: Cyril is currently a research and development engineer at Synectique, a company specialized in software analysis, after obtaining a Master of Business Informatics at the University of Lille. He is building tools to reduce maintenance cost of applications. He likes participation to open sources projects on its free time such has Pharo, Moose, Telescope, Material Design Lite...

1. Developing the Seaside
ecosystem to increase its
productivity
Cyril Ferlicot-Delbecque - cyril@ferlicot.me

2. Seaside
2
● Web Framework
● Programmatic XHTML generation
● Callback-based request handling
● Embedded components
● Modal session management

3. 3

4. ChartJs
for
Seaside
Prism
Code
Displayer
Material
Design
Lite
4
Telescope
Cytoscape

5. Material Design Lite
A front-end template that helps you build
fast, modern mobile web apps

6. Web Components
6
Gracefull
Optimized
Light

7. Web Components
html mdlButton
raised;
primaryColor;
with: 'Button'
7

8. Web Components
8

9. Widgets
9

10. Widgets
10
html render:
(MDLSortableTable new
header: {'Class' . 'SuperClass' . 'Number of subclasses'};
rows: [ WAObject allSubclasses
collect: [ :class |
{class printString.
class superclass printString.
class subclasses size} ] ];
rowsPerPagePossibilities: #(10 50 100 200))

11. Extensions
● Based on Traits
● Root Dialog
● Resizable left panel
● Resizable right panel with tabs
11

12. Coming soon: v1.3.0
● Compatibility with Gemstone
● Coverage rose from 3% to > 60%
● Lot of cleaning
● More demos
12

13. Repository: https://github.com/DuneSt/MaterialDesignLite
Script:
Metacello new
githubUser: 'DuneSt' project: 'MaterialDesignLite' commitish: 'v1.x.x' path: 'src';
baseline: 'MaterialDesignLite';
load
Demo: http://localhost:8080/MDLDemo / https://mdl.ferlicot.fr
13

14. Telescope Cytoscape
An engine for efficiently creating
meaningful web visualizations

15. Telescope
● Create meaningful Visualizations
● Render them with Connectors
○ Roassal (Currently obsolete)
○ Cytoscape (Web connector)
○ Bloc soon?
15

16. Simple example
visu := TLVisualization new
addNodesFromEntities: String withAllSubclasses;
connectFollowingProperty: #superclass;
layout: TLTreeLayout;
yourself.
visu styleSheet
width: 30;
height: 30;
nodeLabel: #asString
16

17. Style customizations
visu := TLVisualization fromEntities: (1 to: 60).
visu styleSheet
backgroundColor:
((MDLColor red property: #yourself gradientAt: 5)
to: MDLColor orange at: 15;
to: MDLColor yellow at: 30;
to: MDLColor green at: 50)
17

18. Layouts & Interactions
(visu := TLVisualization fromEntities: (1 to: 9))
layout:
((TLTreeLayout angle: 270)
useOutgoingLinks;
leavesGap: 20;
levelGap: 80;
yourself);
addInteraction:
(TLExpandCollapseNodesAction property: [ :n | (0 to: 9)
collect: [ :i | n * 10 + i ] ]) onClick.
visu styleSheet nodeLabel: #asString
18

19. Repository: https://github.com/TelescopeSt/TelescopeCytoscape
Script:
Metacello new
githubUser: 'TelescopeSt' project: 'TelescopeCytoscape' commitish: 'v1.x.x' path: 'src';
baseline: 'TelescopeCytoscape';
load
Demo: http://localhost:8080/TelescopeDemo /
https:/demos.ferlicot.fr/TelescopeDemo
19

20. ChartJs for Seaside
Simple charting for your web application

21. 1D Charts
21

22. 2D Charts
22

23. Features
23
● Interactions on clicks
● Style customization
● Tooltips aware of values

24. Repository: https://github.com/DuneSt/ChartJs
Script:
Metacello new
githubUser: 'DuneSt' project: 'ChartJs' commitish: 'v1.x.x' path: 'src';
baseline: 'ChartJs';
load
Demo: http://localhost:8080/ChartJsDemo / https://demos.ferlicot.fr/ChartJsDemo
24

25. Prism Code Displayer
Display, highlight and interact with code

26. Usage
code := (PrismComponent >> #renderContentOn:) sourceCode.
html
render:
(PrismComponent new
sourceCode: [ code ];
language: #smalltalk;
yourself)
26

27. Features
● Strategies to:
○ Customize the CSS
○ Add anchors to intervals
● Dynamic loading
● Integrated search
● Copy option
● Menu
27

28. Repository: https://github.com/DuneSt/PrismCodeDisplayer
Script:
Metacello new
githubUser: 'DuneSt' project: 'PrismCodeDisplayer' commitish: 'v1.x.x' path: 'src';
baseline: 'PrismCodeDisplayer';
load
Demo: http://localhost:8080/PrismDemo / https://demos.ferlicot.fr/PrismDemo
28

29. “
Thank you!
29

30. “
Thank you!
30

31. “
Thank you!
31