Django and Pyjamas. Django and Pyjamas mariage as an alternative way to create Web Applications. Pawel Prokop.

(1)

Ecosystem Django Pyjamas Django+Pyjamas Summary

Django and Pyjamas

Django and Pyjamas mariage as an alternative way to

create Web Applications

Pawel Prokop

[email protected]

November 24, 2011

Copyright cPawel Prokop <[email protected]>

(2)

Introduction

I’ll tell a story about some mariage...

...Django

(3)

Part I: Introduction

but first...

Ecosystem

(4)

Ecosystem Django Pyjamas Django+Pyjamas Summary ECOSYSTEM hosting applications Database systems Mantaining

(5)

Web application architecture

Hosted on server...

(6)

(7)

Web application architecture

...from many browsers

(8)

(9)

Hosting applications (servers & frameworks)

(10)

Database systems

(11)

Upgrading...

...the server

...client not involved

(12)

Ecosystem Django Pyjamas Django+Pyjamas Summary Introduction Installation Model Templates Viewer

Part II: Django

Ecosystem

Django

(13)

Who the hell is...

framework

written in python

talks:

python

HTTP

JSONRPC

(14)

Philosophy

(15)

Django installation

Get latest official - stable version

1 wget h t t p : / / www. d j a n g o p r o j e c t . com / download / 1 . 3 . 1 / t a r b a l l / 2 t a r x z v f Django−1.3.1.t a r. gz

3 cd Django−1.3.1

4 sudo python se tup . py i n s t a l l

Get latest from repository

1 svn co h t t p : / / code . d j a n g o p r o j e c t . com /svn/ django / t r u n k / d j a n g o _ t r u n k

(16)

Verification

Verify installation

(from python console) 1 i m p o r t django

(17)

Project creation

Create project filesystem

1 django−admin . py s t a r t p r o j e c t m y p o r t a l

Files created:

./manage.py

./myportal

./myportal/urls.py

./myportal/settings.py

Info

wrapper for

django-admin.py

that

contains

my-portal

application

maps URL to python

callback

functions

configuration file for

the project

(18)

Create application

Create application structure

1 python manage . py s t a r t a p p myapp

Files created:

./models.py

./views.py

./tests.py

Info

update settings after creating myapp database schema as django classes controller unit tests for controller

(19)

(20)

Database

create database manualy

let django to generate database

from django model

(21)

Django model

models.py

1 from django. db i m p o r t models 2

3 c l a s s Users ( models . Model ) :

4 l o g i n = models . C h a r F i e l d ( max_length =32) 5 name = models . C h a r F i e l d ( max_length =256) 6 a c t i v i t y = models . B o o l e a n F i e l d ( d e f a u l t =F al se) 7 e x p i r e = models . D a t e F i e l d ( n u l l =True, b l a n k =True) 8 passwd = models . C h a r F i e l d ( max_length =256)

Built-in field classes:

AutoField,BigIntegerField,BooleanField,

CharField,DateField,DateTimeField,

DecimalField,EmailField,FileField,

FloatField,ImageField,IntegerField,

IPAddressField,SmallIntegerField,TextField,

TimeField,URLField,XMLField

...and more...

(22)

Field arguments

null

- field can be null

blank

- field can be blank

choices

- choices will be displayed for field on admin

panel

db_column

- customize column name

db_index

- create index for this field

db_tablespace

- defines name of tablespace

default

- default value for this field

(23)

...field arguments, cont.

help_text

- specifies text that will be displayed next to

field on admin panel

primary_key

- specifies if the field is primary key

unique

- specifies if the field is unique for the table

unique_for_date

- specifies DateField within this field

should be unique

unique_for_month

- specifies month field within this

field should be unique

unique_for_year

- specifies year field within this field

should be unique

verbose_name

- defines verbose field name

validators

- allows to append custom validation method

(this method should raise ValidationError)

(24)

Populate model to database

1 python manage . py syncdb

(25)

Customize model

validate model

1 python manage . py v a l i d a t e

display customized sql

1 python manage . py sqlcustom myapp

display all drops

1 python manage . py s q l c l e a r myapp

display indexes

1 python manage . py s q l i n d e x e s myapp

display all

1 python manage . py s q l a l l myapp

(26)

Adding custom sql

Create

./myapp/sql/users.sql

file that contains:

1 i n s e r t i n t o myapp_users ( l o g i n , name , a c t i v i t y , passwd ) 2 v a l u e s (’ pa blo ’, ’ Pawel Prokop ’, ’ t ’,

(27)

(28)

Forms

In application directory create file:

credential_forms.py

1 from django i m p o r t forms 2

3 c l a s s LoginForm ( forms . Form ) : 4

5 l o g i n = forms . C h a r F i e l d ( )

6 password = forms . C h a r F i e l d ( w i d g e t =forms . PasswordInput )

Built-in field classes:

BooleanField,CharField,

ChoiceField,DateField,DecimalField,

EmailField,FileField,IPAddressField,

FloatField,IntegerField,

(29)

Field arguments

required

- field is required and validation will fail

label

- defines display for the field

initial

- defines initial value

widget

- specifies a class to render this field

help_text

- text that will be displayed next to the field

error_messages

- allows to override default error

messages

validators

- allows to append custom validation method

(this method should raise ValidationError)

localize

- enables localization of form rendering

(30)

Templates

Create directory

templates

and put there all template files

Let

credential_template.html

be like follow:

1 <h t m l> 2 <form a c t i o n=" / m y p o r t a l / l o g i n " method=" p o s t "> 3 4 {% c s r f _ t o k e n %} 5 { { l o g i n F o r m } } 6 7 <i n p u t t y p e=" s u b m i t " v a l u e=" Lo gin "/ > 8 < /form> 9 < /h t m l>

(31)

(32)

Spin Model and Template with Viewer

Create file

views.py

as follows:

1 from django. t e m p l a t e i m p o r t RequestContext , Context , l o a d e r 2 from django. h t t p i m p o r t HttpResponse

3 from django. core . c o n t e x t _ p r o c e s s o r s i m p o r t c s r f 4 from django. s h o r t c u t s i m p o r t r e n d e r _ t o _ r e s p o n s e 5 6 i m p o r t c r e d e n t i a l _ f o r m s 7 8 9 d e f i n d e x ( r e q u e s t ) : 10 11 l o g i n F o r m = c r e d e n t i a l _ f o r m s . LoginForm ( ) 12 13 params = {’ l o g i n F o r m ’: l o g i n F o r m } 14 15 r e t u r n r e n d e r _ t o _ r e s p o n s e (’ c r e d e n t i a l _ t e m p l a t e . h t m l ’,

(33)

Append bussiness rule for login feature

To

views.py

append implementation of login logic:

1 d e f l o g i n ( r e q u e s t ) : 2 3 params = { } 4 5 i f r e q u e s t . method == ’POST ’: 6 7 l o g i n F o r m = c r e d e n t i a l _ f o r m s . LoginForm ( r e q u e s t . POST) 8 9 username = ’ Unknown ’ 10 11 i m p o r t models

12 user = models . Users . o b j e c t s \

13 . f i l t e r ( l o g i n = l o g i n F o r m [’ l o g i n ’] . v a l u e ( ) ) \ 14 . f i l t e r ( passwd= e n c r y p t ( l o g i n F o r m [’ passwd ’] . v a l u e ( ) ) ) 15

16 i f l e n ( user ) == 1 :

17 username = user [ 0 ] . name

18

19 params = {’ name ’ : username } 20

21 r e t u r n r e n d e r _ t o _ r e s p o n s e (’ u s e r _ i n f o . h t m l ’, params , 22 c o n t e x t _ i n s t a n c e =RequestContext ( r e q u e s t ) )

(34)

...and one convenience method

1 d e f e n c r y p t ( s t r i n g ) : 2 i m p o r t h a s h l i b 3 s = h a s h l i b . sha1 ( ) 4 s . update ( s t r ( s t r i n g ) ) 5 r e t u r n s . h e x d i g e s t ( )

(35)

...and one more template

Create template file:

user_info.html

in

templates

...and create interface

Add the following to

myportal/urls.py

1 ( r’ ^ m y p o r t a l / $ ’, ’ myapp . views . i n d e x ’) , 2 ( r’ ^ m y p o r t a l / l o g i n $ ’, ’ myapp . views . l o g i n ’) ,

(37)

Model-Template-Viewer

(38)

Let’s Rock

Launch django server

1 python manage . py r u n s e r v e r

Launch the browser and type:

(39)

Ecosystem Django Pyjamas Django+Pyjamas Summary Introduction From python Widgets

Part III: Pyjamas

Ecosystem

Django

Pyjamas

(40)

Who the hell is Pyjamas?

API compatibile with GWT

python implementation of java

script

compiler

java script generator

talks

python

javascript

(41)

What Pyjamas gives?

dynamic and reusable UI components

python types simulated in JavaScript

RPC mechanism

handles cross-browser issues

allows mix .js code with .py code

design of application in python object oriented fashion

itself for free

(42)

Supported modules from python

base64.py

binascii.py

csv.py

datetime.py

math.py

md5.py

os.py

random.py

re.py

sets.py

struct.py

sys.py

time.py

urllib.py

(43)

Supported built-in types

dict

frozenset

int

list

long

object

set

tuple

(44)

Requirements

pyjamas

1 g i t c l o n e g i t: / / p y j s . org /g i t/ pyjamas .g i t 2 cd pyjamas 3 python b o o t s t r a p . py

libcommondjango

(

for

JSONRPCService

and

jsonremote

)

1 svn checkout h t t p : / /svn. pimentech . org / pimentech / libcommonDjango 2 cd libcommonDjango

(45)

Create pyjamas application

Create file:

MyApp.py

in

myapp

directory:

1 from pyjamas . u i . RootPanel i m p o r t RootPanel 2 3 i m p o r t LoginPanel 4 5 c l a s s MyApp : 6 7 d e f _ _ i n i t _ _ (s e l f) :

8 s e l f. mainPanel = LoginPanel . LoginPanel ( ) 9

10 d e f onModuleLoad (s e l f) :

11 RootPanel ( ) . add (s e l f. mainPanel ) 12

13

14 i f __name__ == ’ __main__ ’: 15 app = MyApp ( ) 16 app . onModuleLoad ( )

(46)

Create a panel

Create file:

LoginPanel.py

in

myapp

directory:

1 from pyjamas . u i . TextBox i m p o r t TextBox 2 from pyjamas . u i . Lab el i m p o r t La bel

3 from pyjamas . u i . H o r i z o n t a l P a n e l i m p o r t H o r i z o n t a l P a n e l 4 5 c l a s s LoginPanel ( H o r i z o n t a l P a n e l ) : 6 7 d e f _ _ i n i t _ _ (s e l f) : 8 H o r i z o n t a l P a n e l . _ _ i n i t _ _ (s e l f) 9 s e l f. s e t B o r d e r W i d t h ( 0 ) 10 s e l f. l a y o u t ( ) 11 12 d e f l a y o u t (s e l f) : 13 s e l f. l o g i n L a b e l = L abe l (’ Lo gin ’) 14 s e l f. l o g i n L a b e l . s e t H e i g h t (" 20px ") 15 16 s e l f. l o g i n T e x t = TextBox ( ) 17 s e l f. l o g i n T e x t . s e t H e i g h t (" 20px ")

(47)

Widgets

Pyjamas offers a lot of widgets in package:

pyjamas.ui.widgets

Button

Calendar

CheckBox

DialogBox

DockPanel

FlowPanel

FormPanel

Frame

HTML

HorizontalPanel

HorizontalSlider

Hyperlink

Image

Label

ListBox

MenuBar

MenuItem

Panel

PasswordTextBox

PushButton

RadioButton

ScrollPanel

TextArea

TextBox

Tooltip

Tree

TreeItem

(48)

Add more controls

Add password control to

LoginPanel

class

1 s e l f. l o g i n T e x t . a d d K e y b o a r d L i s t e n e r (s e l f) 2

3 s e l f. passwdLabel = L abe l (’ Password ’) 4 s e l f. passwdLabel . s e t H e i g h t (" 20px ") 5 6 s e l f. passwdText = PasswordTextBox ( ) 7 s e l f. passwdText . s e t H e i g h t (" 20px ") 8 s e l f. passwdText . s e t W i d t h (" 60px ") 9 s e l f. passwdText . a d d K e y b o a r d L i s t e n e r (s e l f) 10 11 s e l f. add (s e l f. passwdLabel ) 12 s e l f. add (s e l f. passwdText )

(49)

Listeners

ClickListener

FocusListener

KeyboardListener

MouseListener

MultiListener

(50)

Compile to javascript

Use

pyjsbuild

:

1 p y j s b u i l d MyApp . py 2 p y j s b u i l d LoginPanel . py

to generate

output/

directory containing html files with

(51)

Update

urls.py

to see Pyjamas application

Add the following line to

urls.py

1

2 ( r’ ^ m y p o r t a l / myapp / ( ? P<path > .∗) $ ’, ’ django . views . s t a t i c . s er ve ’, 3 {’ document_root ’:

4 s t r ( os . path . j o i n ( os . path . dirname ( _ _ f i l e _ _ ) , 5 ’ . . / myapp / o u t p u t ’) . r e p l a c e (’ \ \ ’,’ / ’) ) } ) ,

Do not forget to:

1 i m p o r t os

(52)

Implement KeyboarListener methods

add the following code to

LoginPanel

1 d e f onKeyPress (s e l f, sender , keyCode , m o d i f i e r s ) : 2 3 i f keyCode == K e y b o a r d L i s t e n e r . KEY_ENTER : 4 i f sender == s e l f. l o g i n T e x t : 5 i f s e l f. passwdText . g e t T e x t ( ) == " ": 6 s e l f. passwdText . setFocus ( ) 7 e l s e: 8 s e l f. doLogin (s e l f. l o g i n T e x t . g e t T e x t ( ) , 9 s e l f. passwdText . g e t T e x t ( ) ) 10 11 e l i f sender == s e l f. passwdText : 12 s e l f. doLogin (s e l f. l o g i n T e x t . g e t T e x t ( ) , 13 s e l f. passwdText . g e t T e x t ( ) )

(53)

Ecosystem Django Pyjamas Django+Pyjamas Summary Introduction

Part IV: Django+Pyjamas

Ecosystem

Django

Pyjamas

Django+Pyjamas

(54)

Connect

LoginPanel

to django application

create connection point in

LoginPanel.py

1 c l a s s D a t a S e r v i c e ( JSONProxy ) : 2 d e f _ _ i n i t _ _ (s e l f) :

3 JSONProxy . _ _ i n i t _ _ (s e l f, " / l o g i n _ s e r v i c e / ", [" Lo gin "] ,

4 headers= { ’ X−CSRFToken ’: Cookies . getCookie (’ c s r f t o k e n ’) } )

do not forget imports

1 from pyjamas . JSONService i m p o r t JSONProxy 2 from pyjamas i m p o r t Cookies

add member to

LoginPanel

constructor

(55)

Handle response from server

add response method to

LoginPanel

class

1 d e f onRemoteResponse (s e l f, response , r e q u e s t _ i n f o ) : 2 s e l f. l a y o u t ( )

3

4 i f response [’ name ’] :

5 s e l f. add ( L abe l ( response [’ name ’] ) )

(56)

Implement Login method on server-side

1 from django. pimentech . network i m p o r t JSONRPCService , j s o n r e m o t e 2 3 s e r v i c e = JSONRPCService ( ) 4 5 @jsonremote ( s e r v i c e ) 6 d e f Lo gin ( r e q u e s t , l o g i n , passwd ) : 7 8 i m p o r t models 9 10 username = ’ Unknown ’ 11

12 user = models . Users . o b j e c t s \

13 . f i l t e r ( l o g i n = l o g i n ) . f i l t e r ( passwd= e n c r y p t ( passwd ) ) 14

15 i f l e n ( user ) == 1 : 16 username = user [ 0 ] . name 17

(57)

Let’s Rock!

(58)

Part IV: Pyjamas+Tuning

Ecosystem

Django

Pyjamas

(59)

Tune up with CSS (Cascade Style Sheet)

in

myapp

create directory

public

for CSS and overriden

htmls

use generated

MyApp.html

1 <h t m l>

2 < !−−auto−generated h t m l−you s h o u l d c o n s i d e r e d i t i n g and 3 a d a p t i n g t h i s t o s u i t your r e q u i r e m e n t s

4 −−> 5 <head>

6 <meta name=" pygwt : module " c o n t e n t=" Lo gin "> 7 <l i n k h r e f=" MyApp . css " r e l=" s t y l e s h e e t "> 8 <t i t l e> Log in module< /t i t l e> 9 < /head> 10 <body b g c o l o r=" w h i t e "> 11 <s c r i p t language=" j a v a s c r i p t " s r c=" b o o t s t r a p . j s ">< /s c r i p t> 12 <i f r a m e i d= ’ __pygwt_historyFrame ’ s t y l e= ’w i d t h: 0 ;h e i g h t: 0 ;b o r d e r: 0 ’ >< /i f r a m e> 13 < /body> 14 < /h t m l>

(60)

Create

MyApp.css

1 . g r a y b u t t o n 2 { 3 f o n t−s i z e : 1 1 px ; 4 f o n t−f a m i l y : Verdana , sans−s e r i f ; 5 f o n t−w e i g h t : b o l d ; 6 c o l o r : # 8 8 8 8 8 8 ; 7 w i d t h :100 px ; 8 background−c o l o r : # eeeeee ; 9 border−s t y l e : s o l i d ; 10 border−c o l o r : #BBBBBB ; 11 border−w i d t h : 1 px ; 12 } 13 14 . g r a y b u t t o n l i g h t 15 { 16 f o n t−s i z e : 1 1 px ; 17 f o n t−f a m i l y : Verdana , sans−s e r i f ; 18 f o n t−w e i g h t : b o l d ; 19 c o l o r :#66 aaaa ; 20 w i d t h :100 px ; 21 background−c o l o r : # eeeef4 ;

(61)

Create custom highlight button

1 from pyjamas . u i . B u t t o n i m p o r t B u t t o n 2

3 c l a s s H i g h l i g h t B u t t o n ( B u t t o n ) : 4

5 d e f _ _ i n i t _ _ (s e l f, h t m l =None , l i s t e n e r =None , ∗∗kwargs ) : 6 B u t t o n . _ _ i n i t _ _ (s e l f, html , l i s t e n e r , ∗∗kwargs ) 7 s e l f. n o r m a l S t y l e = s e l f. getStyleName ( ) 8 s e l f. h i g h l i g h t S t y l e = s e l f. getStyleName ( ) 9 s e l f. addMouseListener (s e l f) 10 11 d e f s e t N o r m a l S t y l e (s e l f, s t y l e ) : 12 s e l f. n o r m a l S t y l e = s t y l e 13 14 d e f s e t H i g h l i g h t S t y l e (s e l f, s t y l e ) : 15 s e l f. h i g h l i g h t S t y l e = s t y l e 16

17 d e f onMouseEnter (s e l f, sender , e ven t ) : 18 B u t t o n . onMouseEnter (s e l f, sender , e ven t ) 19 s e l f. setStyleName (’ g r a y b u t t o n l i g h t ’) 20

21 d e f onMouseLeave (s e l f, sender , e ven t ) : 22 B u t t o n . onMouseLeave (s e l f, sender , e ven t ) 23

24 s e l f. setStyleName (’ g r a y b u t t o n ’)

(62)

Logout functionality

JSONProxy (same as Login)

button on GUI

(63)

Let’s Rock!

(64)

Summary

complex

technology

advanced

object oriented

all with python

open and free

(65)

Part VI: Questions

Ecosystem

Django

Pyjamas

Django+Pyjamas

Pyjamas+Tuning

Questions

(66)

Usefull links

http://djangoproject.com

http://pyjs.org

http://pyjs.org/api/

(67)

Credits

1. flickr/python/raym5 2. flickr/server upgrade/msarturlr 3. flickr/drinks/kdinuraj