Headline

Web programming in Language:Python with Technology:Pyjamas

Motivation

Technology:Pyjamas offers the possibility to generate pure Language:JavaScript-Code out of Language:Python source code. One advantage of pyjamas is, that it is very simple to understand. Apart from that, there is no need for complicated Language:HTML or JavaScript programming. Technology:Pyjamas is combined with Language:CSS. It also can be considered as a "spin off" of Technology:GWT.

Illustration

Although pyjamas demands no specific architecture, the main parts of the application are located in a simple Language:Python file this!!101Companies.py. Nevertheless, we have devided the code into two concerns encapsulated into different classes. One class contains the GUI, another class contains the company data and manages the major functionalities of the app. There are further classes for each company, department and employee. The complete Python code illustrated in this section is translated directly to Language:JavaScript.

GUI implementation

The GUI is implemented with the help of pre defined Technology:Pyjamas classes. There is a grid with all necessary components like labels, textfields, listboxes and buttons. The following method of the class

101CompaniesAppGUI
shows the initialization of the employee part of the GUI:

# initializes the GUI for the employee view
def initEmployeeGUI(self):
	self.grid.clear()
	self.grid.resize(4, 3)
		
	# row 1
	self.grid.setWidget(0, 0, Label("Name:"))	# column 1 = name
	self.grid.setWidget(1, 0, Label("Address:"))	# column 2 = address
	self.grid.setWidget(2, 0, Label("Salary:"))	# column 3 = salary
	
	# row 2
	self.grid.setWidget(0, 1, self.name)
	self.grid.setWidget(1, 1, self.address)
	self.grid.setWidget(2, 1, self.total)
		
	# row 3
	self.grid.setWidget(0, 2, self.save)
	self.grid.setWidget(2, 2, self.cut)
	self.grid.setWidget(3, 2, self.back)

	# initialize content for current employee
	self.name.setText(self.current.name)
	self.address.setText(self.current.address)
	self.total.setText(self.current.salary)

The three textfields

self.name
,
self.address
and
self.total
and the buttons
self.save
,
self.cut
and
self.back
are initialized in the constructor of the class
101CompaniesAppGUI
. The
self
parameter represents the current instance of the class.

Feature implementation

There is only one handler for each button located in the class

101CompaniesAppGUI
. The handler is implemented by the function
onClick
. It contains a control structure, which determines the clicked button:

def onClick(self, sender):
	self.errors.clear()
	if sender == self.cut:
		self.current.cut()
		self.total.setText(self.current.total())
	else if sender == ...

In case of cut, this method cuts the current entity and refreshes the the total textfield. Every class, be it the company, department or employee, implements such a cut method. In case of employee, the specific implementation looks like:

class Employee:
	...

	def cut(self):
	self.salary = self.salary / 2

	...

Architecture

There are three files, which are not generated:

The file 101Companies.py is divided into three parts:
  • The Feature:Hierarchical company and most of the Feature:Editing is provided by the classes company, department and employee.
  • The GUI is provided by the class 101CompaniesAppGUI.
  • The company initialization and the low-level management of the departments and employees is provided by the class 101CompaniesApp.

Usage

If you only want to watch the Language:HTML/JavaScript-result of the compile process, please:

Metadata


There are no revisions for this page.

User contributions

    This user never has never made submissions.

    User edits

    Syntax for editing wiki

    For you are available next options:

    will make text bold.

    will make text italic.

    will make text underlined.

    will make text striked.

    will allow you to paste code headline into the page.

    will allow you to link into the page.

    will allow you to paste code with syntax highlight into the page. You will need to define used programming language.

    will allow you to paste image into the page.

    is list with bullets.

    is list with numbers.

    will allow your to insert slideshare presentation into the page. You need to copy link to presentation and insert it as parameter in this tag.

    will allow your to insert youtube video into the page. You need to copy link to youtube page with video and insert it as parameter in this tag.

    will allow your to insert code snippets from @worker.

    10 most similar pages:

    Syntax for editing wiki

    For you are available next options:

    will make text bold.

    will make text italic.

    will make text underlined.

    will make text striked.

    will allow you to paste code headline into the page.

    will allow you to link into the page.

    will allow you to paste code with syntax highlight into the page. You will need to define used programming language.

    will allow you to paste image into the page.

    is list with bullets.

    is list with numbers.

    will allow your to insert slideshare presentation into the page. You need to copy link to presentation and insert it as parameter in this tag.

    will allow your to insert youtube video into the page. You need to copy link to youtube page with video and insert it as parameter in this tag.

    will allow your to insert code snippets from @worker.