anybox

1/32
Christophe Combelles OpenDays 2014
Integrating
third-party Javascript libraries

anybox
2/32
1) Context
2) Howto with JSColor :
3) other exaples : Dynatree,
D3Chart

3/32
!ho "

#Christophe Cobelles$ %ccob)

& Jean-Sbastien Suzanne, @jssuzanne

& Pierre Verkest, @petrusv84

4/32
'ission (a)*+e ,ran-aise

,rench .ssociation$ /o+nded in 1012

2rooting the /rench lang+age and c+lt+re

Sec+lar and interc+lt+ral teaching

1314 /rench schools worldwide

5/32
'ission (a)*+e ,ran-aise

6/32
!or5s done #or re-+sed) /or the '(,

Soc5et6io integration

https:77bitb+c5et6org7anybox7web8soc5etio

https:77bitb+c5et6org7anybox7web8live

9is+al export #export to :pen;oc+ent)

https:77bitb+c5et6org7anybox7vis+al8export7

(ist view with +ltiple headers

https:77bitb+c5et6org7anybox7list8+ltiheader

,+llCalendar integration #/ro 9alentin (ab)

https:77gith+b6co7157web8/+llcalendar7

JSCoor inte!ration

https:77bitb+c5et6org7anybox7widget8color7

Dynatree inte!ration

https:77bitb+c5et6org7anybox7web8dynatree

D3 Chart inte!ration

https:77bitb+c5et6org7anybox7web8d38chart

7/32
JSC:(:< : http:77=scolor6co

8/32
https:77bitb+c5et6org7anybox7"i#!et$%oor

anybox
9/32
Step 1
Create yo+r od+le str+ct+re

10/32
widget8color

11/32
widget8color 88openerp886py

12/32
Creating a od+le

>+ic5 s5eleton o/ a od+le :

anybox6paster6openerp

anybox
13/32
Step 2
Incl+de the 3rd-party JS lib

14/32
widget8color =scolor

15/32
2atched =scolor6=s

16/32
widget8color Handle static reso+rces

anybox
17/32
Step 3
!rite a =avascript ?od+le?

18/32
widget8color Javascript ?od+le?

19/32
Javascript ;esign 2atterns

'+st <ead :

http:77addyosani6co7reso+rces7essential=sdesignp
atterns7boo57

20/32
Javascript od+le

21/32
Javascript od+le

anybox
22/32
Step 3
!rite the server side in 2ython
#i/ needed)

23/32
widget8color @ew 2ython /ield

anybox
24/32
Step A
!rite the teplate and CSS

25/32
widget8color >!BC teplates

26/32
widget8color CSS

anybox
27/32
Step D
.dd tests

anybox
28/32
:ther exaples

29/32
https:77bitb+c5et6org7anybox7"eb$#ynatree

30/32
Bxaple +sage : +lti-axis analytic

31/32
https:77bitb+c5et6org7anybox7"eb$#3$%hart

anybox
32/32
Ehan5 yo+
https:77bitb+c5et6org7anybox7widget8color
https:77bitb+c5et6org7anybox7web8dynatree
https:77bitb+c5et6org7anybox7web8d38chart