-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathOverview.html
More file actions
114 lines (108 loc) · 6.5 KB
/
Copy pathOverview.html
File metadata and controls
114 lines (108 loc) · 6.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pyjs</title>
<link rel="stylesheet" type="text/css" media="screen" href="assets/main.css"/>
</head>
<body>
<div id="menu">
<div id="logo"><a href="./" title="Pyjs!"><img src="assets/images/pyjs.128x128.png" alt="Pyjs Logo" /></a></div>
<ul class="simple">
<li class="section">About</li>
<li><a class="reference external" href="About.html">About</a></li>
<li><a class="reference external" href="Overview.html">Overview</a></li>
<li><a class="reference external" href="Translator.html">Translator</a></li>
<li><a class="reference external" href="Download.html">Download</a></li>
<li><a class="reference external" href="GettingHelp.html">Getting Help</a></li>
<li class="section">Documentation</li>
<li><a class="reference external" href="examples">Examples</a></li>
<li><a class="reference external" href="UIHierarchy.html">UI Hierarchy</a></li>
<li><a class="reference external" href="api">API Docs</a></li>
<li><a class="reference external" href="book/Bookreader.html">Book</a></li>
<li><a class="reference external" href="https://github.com/pyjs/pyjs/wiki">Wiki</a></li>
<li class="section">Development</li>
<li><a class="reference external" href="Developing.html">Develop</a></li>
<li><a class="reference external" href="Optimize.html">Optimize</a></li>
<li><a class="reference external" href="Contribute.html">Contribute</a></li>
<li><a class="reference external" href="Roadmap.html">Roadmap</a></li>
</ul>
</div>
<div id="body">
<h1 class="title">Overview</h1>
<p>Like GWT, pyjs translates a Python application and libraries (including UI widgets and DOM classes) into a JavaScript application and libraries, and packages it all up:</p>
<img alt="Overview of pyjs' components" class="align-center" src="assets/images/overview.png" />
<ol class="arabic simple">
<li><strong>pyjs</strong> translates Python code to JavaScript by walking the Python abstract syntax tree and generating JavaScript.</li>
<li><strong>pyjslib</strong> takes care of Python types that require a custom JavaScript implementation for pyjs to work. For example, even though Python lists are similar to JavaScript arrays, Python lists are converted to custom objects that implement methods such as <tt class="docutils literal">append</tt>.</li>
<li><strong>UI widgets and a DOM library</strong> are provided as a convenience. They are written in Python and, like everything else, they are translated to JavaScript for deployment. These are based on those in GWT.</li>
<li><strong>build</strong> manages the overall translation of individual components and creates a set of <tt class="docutils literal">.html</tt> and <tt class="docutils literal">.js</tt> files that can be served up by a Web server.</li>
</ol>
<div class="section" id="features">
<h1>Features</h1>
<p>This is a list of the overall pyjs features, including the
Python-to-JavaScript translator as well as the UI Widget Set.
For specific language features supported by the Python-to-JavaScript
translator, see the <a class="reference external" href="Translator.html">translator description</a>.</p>
<ul class="simple">
<li>Dynamic and reusable UI components: programmers can use
pre-designed classes to implement otherwise time-consuming
dynamic behaviors, such as drag-and-drop or sophisticated visual
tree structures.</li>
<li>Supports basic Python types, emulated in JavaScript, such as List,
Dictionary, Tuple, string; many of the standard Python built-in
functions, such as map, filter, range; and some of the standard
Python Exceptions are supported.</li>
<li>Declarative style of "desktop" widget programming (almost identical to
python-qt4, python-gtk2 and python-wxWidgets), yet the applications
are compiled to JavaScript and run in all major web browsers.</li>
<li>Simple RPC mechanism</li>
<li>Browser history management, covering "Back", "Forward" with no hassle
for the developer. AJAX applications typically break the "Go Back"
button: use the History module to provide your application with
History management.</li>
<li>Run-time Support for runtime errors: a function call stack can be kept
in debug mode, and displayed when a runtime error occurs. This is
incredibly useful in situations where installing a JavaScript debugger
is inconvenient or impossible.</li>
<li>pyjs handles all cross-browser issues for the developer.</li>
<li>The developers can mix handwritten JavaScript in the Python source code,
including plumbing in to other JavaScript frameworks and libraries.</li>
<li>Beginnings of support for using Google APIs in GWT applications
(initially, support for Google Gears Database)</li>
<li>pyjs is entirely Free Software.</li>
<li>The developers can design and develop their application in a pure
object-oriented fashion, since they're using Python (instead of
JavaScript).</li>
</ul>
</div>
<div class="section" id="hello-world">
<h1>Hello World</h1>
<p>A quick example to give you an idea of what it feels like working with pyjs:</p>
<pre class="literal-block">
from pyjamas.ui.RootPanel import RootPanel
from pyjamas.ui.Label import Label
l = Label('Hello pyjs')
RootPanel().add(l)
</pre>
<p>Now run <tt class="docutils literal">pyjsbuild hello.py</tt> to generate a plain JavaScript application: pyjs creates an <tt class="docutils literal">./output</tt> folder containing all files you need to move to your webspace later. Of course you can test locally,
too.</p>
<p>Add 3 additional lines in total and your application can run with both
pyjs (i.e. plain JavaScript) <em>and</em> pyjs Desktop:</p>
<pre class="literal-block">
<strong>import pyjd</strong> # this is dummy in pyjs
from pyjamas.ui.RootPanel import RootPanel
from pyjamas.ui.Label import Label
<strong>pyjd.setup('public/hello.html')</strong>
l = Label('Hello pyjs')
RootPanel().add(l)
<strong>pyjd.run()</strong>
</pre>
<p>Execute <tt class="docutils literal">pyjd hello.py</tt>, or <tt class="docutils literal">python hello.py</tt>, to run the very same application native on Python, giving you a Python stack trace on errors. pyjs Desktop gives you much more control making testing and debugging
a piece of a cake. Note the <tt class="docutils literal">hello.html</tt> file referenced above: this is a container for your application generated by pyjs that you can adjust to your needs.</p>
<p>Ready for more? <a class="reference external" href="GettingHelp.html">Let's get started</a>!</p>
</div>
</div>
</body>
</html>