Author: buildbot
Date: Wed Jul 2 17:36:42 2014
New Revision: 914786
Log:
Staging update by buildbot for thrift
Modified:
websites/staging/thrift/trunk/content/ (props changed)
websites/staging/thrift/trunk/content/tutorial/js.html
Propchange: websites/staging/thrift/trunk/content/
------------------------------------------------------------------------------
--- cms:source-revision (original)
+++ cms:source-revision Wed Jul 2 17:36:42 2014
@@ -1 +1 @@
-1607326
+1607428
Modified: websites/staging/thrift/trunk/content/tutorial/js.html
==============================================================================
--- websites/staging/thrift/trunk/content/tutorial/js.html (original)
+++ websites/staging/thrift/trunk/content/tutorial/js.html Wed Jul 2 17:36:42
2014
@@ -123,65 +123,65 @@ function calc() {
<h3 id="inspecting-the-generated-javascript-code-and-html-code">Inspecting the
generated Javascript code and HTML code</h3>
<p>Inside the html file is the entry point of using the Thrift.js and compiled
Javascript files. The main section code from the tutorial.html fileis the
Thrift client as shown above.</p>
<p>The first thing for using the Thrift files is setting up your Transport
protocol. At this time, it only supports AJAX and is as follows:</p>
-<div class="codehilite"><pre> <span class="n">var</span> <span
class="n">transport</span> <span class="p">=</span> <span class="n">new</span>
<span class="n">Thrift</span><span class="p">.</span><span
class="n">Transport</span><span class="p">(</span>"<span
class="o">/</span><span class="n">thrift</span><span class="o">/</span><span
class="n">service</span><span class="o">/</span><span
class="n">tutorial</span><span class="o">/</span>"<span class="p">);</span>
+<div class="codehilite"><pre><span class="n">var</span> <span
class="n">transport</span> <span class="p">=</span> <span class="n">new</span>
<span class="n">Thrift</span><span class="p">.</span><span
class="n">Transport</span><span class="p">(</span>"<span
class="o">/</span><span class="n">thrift</span><span class="o">/</span><span
class="n">service</span><span class="o">/</span><span
class="n">tutorial</span><span class="o">/</span>"<span class="p">);</span>
</pre></div>
<p>After that the protocol needs setup using the transport object, which for
Javascript is JSON:</p>
-<div class="codehilite"><pre> <span class="n">var</span> <span
class="n">protocol</span> <span class="p">=</span> <span class="n">new</span>
<span class="n">Thrift</span><span class="p">.</span><span
class="n">Protocol</span><span class="p">(</span><span
class="n">transport</span><span class="p">);</span>
+<div class="codehilite"><pre><span class="n">var</span> <span
class="n">protocol</span> <span class="p">=</span> <span class="n">new</span>
<span class="n">Thrift</span><span class="p">.</span><span
class="n">Protocol</span><span class="p">(</span><span
class="n">transport</span><span class="p">);</span>
</pre></div>
<p>Now we are setup for the full Thrift communications, so we can start
instantiating the Thrift objects, which define our Services and Objects.</p>
-<div class="codehilite"><pre> <span class="n">var</span> <span
class="n">client</span> <span class="p">=</span> <span class="n">new</span>
<span class="n">CalculatorClient</span><span class="p">(</span><span
class="n">protocol</span><span class="p">);</span>
+<div class="codehilite"><pre><span class="n">var</span> <span
class="n">client</span> <span class="p">=</span> <span class="n">new</span>
<span class="n">CalculatorClient</span><span class="p">(</span><span
class="n">protocol</span><span class="p">);</span>
</pre></div>
<p>Now that we have a functional Service Interface object created, we can can
setup the JSON object, which gets is needed by the service routine and gets
passed to it:</p>
-<div class="codehilite"><pre> <span class="n">var</span> <span
class="n">work</span> <span class="p">=</span> <span class="n">new</span> <span
class="n">Work</span><span class="p">()</span>
- <span class="n">work</span><span class="p">.</span><span
class="n">num1</span> <span class="p">=</span> $<span
class="p">(</span>"#<span class="n">num1</span>"<span
class="p">).</span><span class="n">val</span><span class="p">();</span>
- <span class="n">work</span><span class="p">.</span><span
class="n">num2</span> <span class="p">=</span> $<span
class="p">(</span>"#<span class="n">num2</span>"<span
class="p">).</span><span class="n">val</span><span class="p">();</span>
- <span class="n">work</span><span class="p">.</span><span
class="n">op</span> <span class="p">=</span> $<span
class="p">(</span>"#<span class="n">op</span>"<span
class="p">).</span><span class="n">val</span><span class="p">();</span>
+<div class="codehilite"><pre><span class="n">var</span> <span
class="n">work</span> <span class="p">=</span> <span class="n">new</span> <span
class="n">Work</span><span class="p">()</span>
+<span class="n">work</span><span class="p">.</span><span class="n">num1</span>
<span class="p">=</span> $<span class="p">(</span>"#<span
class="n">num1</span>"<span class="p">).</span><span
class="n">val</span><span class="p">();</span>
+<span class="n">work</span><span class="p">.</span><span class="n">num2</span>
<span class="p">=</span> $<span class="p">(</span>"#<span
class="n">num2</span>"<span class="p">).</span><span
class="n">val</span><span class="p">();</span>
+<span class="n">work</span><span class="p">.</span><span class="n">op</span>
<span class="p">=</span> $<span class="p">(</span>"#<span
class="n">op</span>"<span class="p">).</span><span
class="n">val</span><span class="p">();</span>
</pre></div>
<p>Once the object is created, we can now pass </p>
-<div class="codehilite"><pre> <span class="k">try</span> <span
class="p">{</span>
- <span class="n">result</span> <span class="p">=</span> <span
class="n">client</span><span class="p">.</span><span
class="n">calculate</span><span class="p">(</span>1<span class="p">,</span>
<span class="n">work</span><span class="p">);</span>
- <span class="o">//</span><span class="n">etc</span><span
class="p">......</span>
+<div class="codehilite"><pre><span class="k">try</span> <span
class="p">{</span>
+ <span class="n">result</span> <span class="p">=</span> <span
class="n">client</span><span class="p">.</span><span
class="n">calculate</span><span class="p">(</span>1<span class="p">,</span>
<span class="n">work</span><span class="p">);</span>
+ <span class="o">//</span><span class="n">etc</span><span
class="p">......</span>
</pre></div>
<p>Now, when the calculate button on the html page is clicked, the calc()
function as defined above is called and we get an AJAX call, which blocks and
waits for the response. This then updates the result from the calculation.</p>
<h3 id="inspecting-the-generated-tutorial_typesjs-file">Inspecting the
generated tutorial_types.js file</h3>
<p>Each Thrift struct will have properties associated with it. For our
tutorial object, Work, this is as shown above. For example:</p>
-<div class="codehilite"><pre> <span class="n">var</span> <span
class="n">work</span> <span class="p">=</span> <span class="n">new</span> <span
class="n">Work</span><span class="p">();</span>
- <span class="n">work</span><span class="p">.</span><span
class="n">num1</span> <span class="p">=</span> 1<span class="p">;</span>
- <span class="n">work</span><span class="p">.</span><span
class="n">num2</span> <span class="p">=</span> 2<span class="p">;</span>
- <span class="n">work</span><span class="p">.</span><span
class="n">op</span> <span class="p">=</span> <span class="n">ADD</span><span
class="p">;</span>
+<div class="codehilite"><pre><span class="n">var</span> <span
class="n">work</span> <span class="p">=</span> <span class="n">new</span> <span
class="n">Work</span><span class="p">();</span>
+<span class="n">work</span><span class="p">.</span><span class="n">num1</span>
<span class="p">=</span> 1<span class="p">;</span>
+<span class="n">work</span><span class="p">.</span><span class="n">num2</span>
<span class="p">=</span> 2<span class="p">;</span>
+<span class="n">work</span><span class="p">.</span><span class="n">op</span>
<span class="p">=</span> <span class="n">ADD</span><span class="p">;</span>
</pre></div>
<p>In addition, there is a read(input) and write(output) function created on
the object as well. For the end user, these are not functions to be used as
they are mainly just used by the Thrift.js file for accessing objects.</p>
<h3 id="inspecting-the-generated-calculatorjs-file">Inspecting the generated
Calculator.js file</h3>
<p>The Calculator.js file is the services created and defined in the .thrift
file. The two services defined are:</p>
-<div class="codehilite"><pre> <span class="n">i32</span> <span
class="n">add</span><span class="p">(</span>1<span class="p">:</span><span
class="n">i32</span> <span class="n">num1</span><span class="p">,</span> 2<span
class="p">:</span><span class="n">i32</span> <span class="n">num2</span><span
class="p">),</span>
- <span class="n">i32</span> <span class="n">calculate</span><span
class="p">(</span>1<span class="p">:</span><span class="n">i32</span> <span
class="n">logid</span><span class="p">,</span> 2<span class="p">:</span><span
class="n">Work</span> <span class="n">w</span><span class="p">)</span> <span
class="n">throws</span> <span class="p">(</span>1<span class="p">:</span><span
class="n">InvalidOperation</span> <span class="n">ouch</span><span
class="p">),</span>
+<div class="codehilite"><pre><span class="n">i32</span> <span
class="n">add</span><span class="p">(</span>1<span class="p">:</span><span
class="n">i32</span> <span class="n">num1</span><span class="p">,</span> 2<span
class="p">:</span><span class="n">i32</span> <span class="n">num2</span><span
class="p">),</span>
+<span class="n">i32</span> <span class="n">calculate</span><span
class="p">(</span>1<span class="p">:</span><span class="n">i32</span> <span
class="n">logid</span><span class="p">,</span> 2<span class="p">:</span><span
class="n">Work</span> <span class="n">w</span><span class="p">)</span> <span
class="n">throws</span> <span class="p">(</span>1<span class="p">:</span><span
class="n">InvalidOperation</span> <span class="n">ouch</span><span
class="p">),</span>
</pre></div>
<p>To start using this, the Calculator object has to be created and accessed
as shown above. The Javascript Object, whichi is your interface to the services
created looks like this:</p>
-<div class="codehilite"><pre> <span class="n">CalculatorClient</span> <span
class="p">=</span> <span class="k">function</span><span class="p">(</span><span
class="n">input</span><span class="p">,</span> <span
class="n">output</span><span class="p">){}</span>
+<div class="codehilite"><pre><span class="n">CalculatorClient</span> <span
class="p">=</span> <span class="k">function</span><span class="p">(</span><span
class="n">input</span><span class="p">,</span> <span
class="n">output</span><span class="p">){}</span>
</pre></div>
<p>Then, to access your defined services, the functions created look like
this:</p>
-<div class="codehilite"><pre> <span class="n">CalculatorClient</span><span
class="p">.</span><span class="n">prototype</span><span class="p">.</span><span
class="n">add</span> <span class="p">=</span> <span
class="k">function</span><span class="p">(</span><span
class="n">num1</span><span class="p">,</span> <span class="n">num2</span><span
class="p">)</span> <span class="p">{}</span>
+<div class="codehilite"><pre><span class="n">CalculatorClient</span><span
class="p">.</span><span class="n">prototype</span><span class="p">.</span><span
class="n">add</span> <span class="p">=</span> <span
class="k">function</span><span class="p">(</span><span
class="n">num1</span><span class="p">,</span> <span class="n">num2</span><span
class="p">)</span> <span class="p">{}</span>
</pre></div>
<p>and</p>
-<div class="codehilite"><pre> <span class="n">CalculatorClient</span><span
class="p">.</span><span class="n">prototype</span><span class="p">.</span><span
class="n">calculate</span> <span class="p">=</span> <span
class="k">function</span><span class="p">(</span><span
class="n">logid</span><span class="p">,</span> <span class="n">w</span><span
class="p">)</span> <span class="p">{}</span>
+<div class="codehilite"><pre><span class="n">CalculatorClient</span><span
class="p">.</span><span class="n">prototype</span><span class="p">.</span><span
class="n">calculate</span> <span class="p">=</span> <span
class="k">function</span><span class="p">(</span><span
class="n">logid</span><span class="p">,</span> <span class="n">w</span><span
class="p">)</span> <span class="p">{}</span>
</pre></div>
@@ -201,7 +201,7 @@ function calc() {
<p>This does not change the default behavior of the library, i.e. service
calls will be done synchronously. However, services will use jQuery.ajax if a
callback function is provided as showed below.</p>
-<div class="codehilite"><pre><span class="n">client</span><span
class="p">.</span><span class="n">calculate</span><span
class="p">(</span>1<span class="p">,</span> <span class="n">work</span><span
class="p">,</span> <span class="k">function</span><span class="p">(</span><span
class="n">result</span><span class="p">)</span> <span class="p">{</span> <span
class="n">alert</span><span class="p">(</span><span
class="n">result</span><span class="p">);</span> <span class="p">});</span>
+<div class="codehilite"><pre><span class="n">client</span><span
class="p">.</span><span class="n">calculate</span><span
class="p">(</span>1<span class="p">,</span> <span class="n">work</span><span
class="p">,</span> <span class="k">function</span><span class="p">(</span><span
class="n">result</span><span class="p">)</span> <span class="p">{</span> <span
class="n">alert</span><span class="p">(</span><span
class="n">result</span><span class="p">);</span> <span class="p">}</span> <span
class="p">);</span>
</pre></div>
@@ -214,7 +214,7 @@ function calc() {
<p>For more information refer to the <a
href="http://api.jquery.com/jquery.ajax/";>jQuery API documentation</a>.</p>
-<p>Note: Synchronously calls are easy to debug and good for testing but should
not be used on a front-end browser in production, as it will normally result on
a full-browser freeze until the response has returned from the server.</p>
+<p>Note: Synchronously calls are easy to debug and good for testing but should
not be used on a front-end browser in production, as it will normally result on
a full browser freeze until the response has returned from the server.</p>
</div>
<div class="container">
<hr>
