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
Top Related