anybox

1/32Christophe Combelles – OpenDays 2014

Integratingthird-party Javascript libraries

anybox

2/32

1) Context

2) Howto with JSColor :

3) other examples : Dynatree, D3Chart

3/32

Who ?

● (Christophe Combelles, @ccomb)● → Jean-Sébastien Suzanne, @jssuzanne● → Pierre Verkest, @petrusv84

4/32

Mission Laïque Française

● French Association, founded in 1902● Promoting the french language and culture● Secular and intercultural teaching● 140+ french schools worldwide

5/32

Mission Laïque Française

6/32

Works done (or re-used) for the MLF● Socket.io integration

● https://bitbucket.org/anybox/web_socketio● https://bitbucket.org/anybox/web_live

● Visual export (export to OpenDocument)● https://bitbucket.org/anybox/visual_export/

● List view with multiple headers● https://bitbucket.org/anybox/list_multiheader

● FullCalendar integration (from Valentin Lab)● https://github.com/0k/web_fullcalendar/

● JSColor integration● https://bitbucket.org/anybox/widget_color/

● Dynatree integration● https://bitbucket.org/anybox/web_dynatree

● D3 Chart integration● https://bitbucket.org/anybox/web_d3_chart

7/32

JSCOLOR : http://jscolor.com

8/32

https://bitbucket.org/anybox/widget_color

anybox

9/32

Step 1Create your module structure

10/32

widget_color

11/32

widget_color __openerp__.py

12/32

Creating a module

● Quick skeleton of a module :● anybox.paster.openerp

anybox

13/32

Step 2Include the 3rd-party JS lib

14/32

widget_color jscolor

15/32

Patched jscolor.js

16/32

widget_color Handle static resources

anybox

17/32

Step 3Write a javascript "module"

18/32

widget_color Javascript "module"

19/32

Javascript Design Patterns

● Must Read :● http://addyosmani.com/resources/essentialjsdesignp

atterns/book/

20/32

Javascript module

21/32

Javascript module

anybox

22/32

Step 4Write the server side in Python

(if needed)

23/32

widget_color New Python field

anybox

24/32

Step 5Write the template and CSS

25/32

widget_color QWEB templates

26/32

widget_color CSS

anybox

27/32

Step 6Add tests

anybox

28/32

Other examples

29/32

https://bitbucket.org/anybox/web_dynatree

30/32

Example usage : multi-axis analytic

31/32

https://bitbucket.org/anybox/web_d3_chart

anybox

32/32

Thank you

https://bitbucket.org/anybox/widget_color

https://bitbucket.org/anybox/web_dynatree

https://bitbucket.org/anybox/web_d3_chart