You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@thrift.apache.org by bu...@apache.org on 2014/07/02 19:36:42 UTC
svn commit: r914786 - in /websites/staging/thrift/trunk/content: ./
tutorial/js.html
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>