You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by mi...@apache.org on 2017/09/21 20:34:02 UTC
svn commit: r1809223 [8/30] - in /zeppelin/site: ./ contribution/
contribution/zeppelinweb/ docs/0.7.3/ docs/0.7.3/assets/
docs/0.7.3/assets/themes/ docs/0.7.3/assets/themes/zeppelin/
docs/0.7.3/assets/themes/zeppelin/bootstrap/ docs/0.7.3/assets/theme...
Added: zeppelin/site/docs/0.7.3/development/writingzeppelinvisualization.html
URL: http://svn.apache.org/viewvc/zeppelin/site/docs/0.7.3/development/writingzeppelinvisualization.html?rev=1809223&view=auto
==============================================================================
--- zeppelin/site/docs/0.7.3/development/writingzeppelinvisualization.html (added)
+++ zeppelin/site/docs/0.7.3/development/writingzeppelinvisualization.html Thu Sep 21 20:33:57 2017
@@ -0,0 +1,402 @@
+
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Apache Zeppelin 0.7.3 Documentation: Writing a new Visualization(Experimental)</title>
+ <meta name="description" content="Apache Zeppelin Application is a package that runs on Interpreter process and displays it's output inside of the notebook. Make your own Application in Apache Zeppelin is quite easy.">
+ <meta name="author" content="The Apache Software Foundation">
+
+ <!-- Enable responsive viewport -->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+
+ <!-- Le styles -->
+ <link href="/docs/0.7.3/assets/themes/zeppelin/bootstrap/css/bootstrap.css" rel="stylesheet">
+ <link href="/docs/0.7.3/assets/themes/zeppelin/css/style.css?body=1" rel="stylesheet" type="text/css">
+ <link href="/docs/0.7.3/assets/themes/zeppelin/css/syntax.css" rel="stylesheet" type="text/css" media="screen" />
+ <!-- Le fav and touch icons -->
+ <!-- Update these with your own images
+ <link rel="shortcut icon" href="images/favicon.ico">
+ <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
+ -->
+
+ <!-- Js -->
+ <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/bootstrap/js/bootstrap.min.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/js/docs.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/js/anchor.min.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/js/toc.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/js/lunr.min.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/js/search.js"></script>
+
+ <!-- atom & rss feed -->
+ <link href="/docs/0.7.3/atom.xml" type="application/atom+xml" rel="alternate" title="Sitewide ATOM Feed">
+ <link href="/docs/0.7.3/rss.xml" type="application/rss+xml" rel="alternate" title="Sitewide RSS Feed">
+ </head>
+
+ <body>
+
+ <div id="menu" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+ <div class="container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <div class="navbar-brand">
+ <a class="navbar-brand-main" href="http://zeppelin.apache.org">
+ <img src="/assets/themes/zeppelin/img/zeppelin_logo.png" width="50" alt="I'm zeppelin">
+ <span style="vertical-align:middle">Zeppelin</span>
+ </a>
+ <a class="navbar-brand-version" href="/docs/0.7.3">
+ <span><small>0.7.3</small></span>
+ </a>
+ </div>
+ </div>
+ <nav class="navbar-collapse collapse" role="navigation">
+ <ul class="nav navbar-nav">
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Quick Start <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="/docs/0.7.3/index.html">What is Apache Zeppelin ?</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Getting Started</b><span></li>
+ <li><a href="/docs/0.7.3/install/install.html">Install</a></li>
+ <li><a href="/docs/0.7.3/install/configuration.html">Configuration</a></li>
+ <li><a href="/docs/0.7.3/quickstart/explorezeppelinui.html">Explore Zeppelin UI</a></li>
+ <li><a href="/docs/0.7.3/quickstart/tutorial.html">Tutorial</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Basic Feature Guide</b><span></li>
+ <li><a href="/docs/0.7.3/manual/dynamicform.html">Dynamic Form</a></li>
+ <li><a href="/docs/0.7.3/manual/publish.html">Publish your Paragraph</a></li>
+ <li><a href="/docs/0.7.3/manual/notebookashomepage.html">Customize Zeppelin Homepage</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>More</b><span></li>
+ <li><a href="/docs/0.7.3/install/upgrade.html">Upgrade Zeppelin Version</a></li>
+ <li><a href="/docs/0.7.3/install/build.html">Build from source</a></li>
+ <li><a href="/docs/0.7.3/quickstart/install_with_flink_and_spark_cluster.html">Install Zeppelin with Flink and Spark Clusters Tutorial</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Interpreter <b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu">
+ <li><a href="/docs/0.7.3/manual/interpreters.html">Overview</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Usage</b><span></li>
+ <li><a href="/docs/0.7.3/manual/interpreterinstallation.html">Interpreter Installation</a></li>
+ <!--<li><a href="/docs/0.7.3/manual/dynamicinterpreterload.html">Dynamic Interpreter Loading</a></li>-->
+ <li><a href="/docs/0.7.3/manual/dependencymanagement.html">Interpreter Dependency Management</a></li>
+ <li><a href="/docs/0.7.3/manual/userimpersonation.html">Interpreter User Impersonation</a></li>
+ <li><a href="/docs/0.7.3/manual/interpreterexechooks.html">Interpreter Execution Hooks (Experimental)</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Available Interpreters</b><span></li>
+ <li><a href="/docs/0.7.3/interpreter/alluxio.html">Alluxio</a></li>
+ <li><a href="/docs/0.7.3/interpreter/beam.html">Beam</a></li>
+ <li><a href="/docs/0.7.3/interpreter/bigquery.html">BigQuery</a></li>
+ <li><a href="/docs/0.7.3/interpreter/cassandra.html">Cassandra</a></li>
+ <li><a href="/docs/0.7.3/interpreter/elasticsearch.html">Elasticsearch</a></li>
+ <li><a href="/docs/0.7.3/interpreter/flink.html">Flink</a></li>
+ <li><a href="/docs/0.7.3/interpreter/geode.html">Geode</a></li>
+ <li><a href="/docs/0.7.3/interpreter/hbase.html">HBase</a></li>
+ <li><a href="/docs/0.7.3/interpreter/hdfs.html">HDFS</a></li>
+ <li><a href="/docs/0.7.3/interpreter/hive.html">Hive</a></li>
+ <li><a href="/docs/0.7.3/interpreter/ignite.html">Ignite</a></li>
+ <li><a href="/docs/0.7.3/interpreter/jdbc.html">JDBC</a></li>
+ <li><a href="/docs/0.7.3/interpreter/kylin.html">Kylin</a></li>
+ <li><a href="/docs/0.7.3/interpreter/lens.html">Lens</a></li>
+ <li><a href="/docs/0.7.3/interpreter/livy.html">Livy</a></li>
+ <li><a href="/docs/0.7.3/interpreter/markdown.html">Markdown</a></li>
+ <li><a href="/docs/0.7.3/interpreter/pig.html">Pig</a></li>
+ <li><a href="/docs/0.7.3/interpreter/python.html">Python</a></li>
+ <li><a href="/docs/0.7.3/interpreter/postgresql.html">Postgresql, HAWQ</a></li>
+ <li><a href="/docs/0.7.3/interpreter/r.html">R</a></li>
+ <li><a href="/docs/0.7.3/interpreter/scalding.html">Scalding</a></li>
+ <li><a href="/docs/0.7.3/interpreter/scio.html">Scio</a></li>
+ <li><a href="/docs/0.7.3/interpreter/shell.html">Shell</a></li>
+ <li><a href="/docs/0.7.3/interpreter/spark.html">Spark</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Display System <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li class="title"><span><b>Basic Display System</b><span></li>
+ <li><a href="/docs/0.7.3/displaysystem/basicdisplaysystem.html#text">Text</a></li>
+ <li><a href="/docs/0.7.3/displaysystem/basicdisplaysystem.html#html">Html</a></li>
+ <li><a href="/docs/0.7.3/displaysystem/basicdisplaysystem.html#table">Table</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Angular API</b><span></li>
+ <li><a href="/docs/0.7.3/displaysystem/back-end-angular.html">Angular (backend API)</a></li>
+ <li><a href="/docs/0.7.3/displaysystem/front-end-angular.html">Angular (frontend API)</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">More<b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu" style="right: 0; left: auto;">
+ <li class="title"><span><b>Notebook Storage</b><span></li>
+ <li><a href="/docs/0.7.3/storage/storage.html#notebook-storage-in-local-git-repository">Git Storage</a></li>
+ <li><a href="/docs/0.7.3/storage/storage.html#notebook-storage-in-s3">S3 Storage</a></li>
+ <li><a href="/docs/0.7.3/storage/storage.html#notebook-storage-in-azure">Azure Storage</a></li>
+ <li><a href="/docs/0.7.3/storage/storage.html#storage-in-zeppelinhub">ZeppelinHub Storage</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>REST API</b><span></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-interpreter.html">Interpreter API</a></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-notebook.html">Notebook API</a></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-notebookRepo.html">Notebook Repository API</a></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-configuration.html">Configuration API</a></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-credential.html">Credential API</a></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-helium.html">Helium API</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Security</b><span></li>
+ <li><a href="/docs/0.7.3/security/shiroauthentication.html">Shiro Authentication</a></li>
+ <li><a href="/docs/0.7.3/security/notebook_authorization.html">Notebook Authorization</a></li>
+ <li><a href="/docs/0.7.3/security/datasource_authorization.html">Data Source Authorization</a></li>
+ <li><a href="/docs/0.7.3/security/http_security_headers.html">HTTP Security Headers</a></li>
+ <li><a href="/docs/0.7.3/security/helium_authorization.html">Helium Authorization</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Advanced</b><span></li>
+ <li><a href="/docs/0.7.3/install/virtual_machine.html">Zeppelin on Vagrant VM</a></li>
+ <li><a href="/docs/0.7.3/install/spark_cluster_mode.html#spark-standalone-mode">Zeppelin on Spark Cluster Mode (Standalone)</a></li>
+ <li><a href="/docs/0.7.3/install/spark_cluster_mode.html#spark-on-yarn-mode">Zeppelin on Spark Cluster Mode (YARN)</a></li>
+ <li><a href="/docs/0.7.3/install/spark_cluster_mode.html#spark-on-mesos-mode">Zeppelin on Spark Cluster Mode (Mesos)</a></li>
+ <li><a href="/docs/0.7.3/install/cdh.html">Zeppelin on CDH</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Contibute</b><span></li>
+ <li><a href="/docs/0.7.3/development/writingzeppelininterpreter.html">Writing Zeppelin Interpreter</a></li>
+ <li><a href="/docs/0.7.3/development/writingzeppelinvisualization.html">Writing Zeppelin Visualization (Experimental)</a></li>
+ <li><a href="/docs/0.7.3/development/writingzeppelinapplication.html">Writing Zeppelin Application (Experimental)</a></li>
+ <li><a href="/docs/0.7.3/development/howtocontribute.html">How to contribute (code)</a></li>
+ <li><a href="/docs/0.7.3/development/howtocontributewebsite.html">How to contribute (website)</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="/docs/0.7.3/search.html" class="nav-search-link">
+ <span class="fa fa-search nav-search-icon"></span>
+ </a>
+ </li>
+ </ul>
+ </nav><!--/.navbar-collapse -->
+ </div>
+ </div>
+
+
+
+ <div class="content">
+
+<!--<div class="hero-unit Writing a new Visualization(Experimental)">
+ <h1></h1>
+</div>
+-->
+
+<div class="row">
+ <div class="col-md-12">
+ <!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<h1>Writing a new Visualization (Experimental)</h1>
+
+<div id="toc"></div>
+
+<h2>What is Apache Zeppelin Visualization</h2>
+
+<p>Apache Zeppelin Visualization is a pluggable package that can be loaded/unloaded on runtime through Helium framework in Zeppelin. A Visualization is a javascript npm package and user can use them just like any other built-in visualization in notebook.</p>
+
+<h2>How it works</h2>
+
+<h4>1. Load Helium package files from registry</h4>
+
+<p>Zeppelin needs to know what Visualization packages are available. Zeppelin searches <em>Helium package file</em> from local registry (by default helium/ directory) by default.
+<em>Helium package file</em> provides informations like name, artifact, and so on. It's similar to <em>package.json</em> in npm package.</p>
+
+<p>Here's an example <code>helium/zeppelin-example-horizontalbar.json</code></p>
+<div class="highlight"><pre><code class="text language-text" data-lang="text">{
+ "type" : "VISUALIZATION",
+ "name" : "zeppelin_horizontalbar",
+ "description" : "Horizontal Bar chart (example)",
+ "artifact" : "./zeppelin-examples/zeppelin-example-horizontalbar",
+ "license" : "Apache-2.0",
+ "icon" : "<i class='fa fa-bar-chart rotate90flipX'></i>"
+}
+</code></pre></div>
+<p>Check <a href="#3-create-helium-package-file">Create helium package file</a> section to learn about it.</p>
+
+<h4>2. Enable packages</h4>
+
+<p>Once Zeppelin loads <em>Helium package files</em> from local registry, available packages are displayed in Helium menu.</p>
+
+<p>Click 'enable' button.</p>
+
+<p><img class="img-responsive" style="width:70%" src="../assets/themes/zeppelin/img/docs-img/writing_visualization_helium_menu.png" /></p>
+
+<h4>3. Create and load visualization bundle on the fly</h4>
+
+<p>Once a Visualization package is enabled, <a href="https://github.com/apache/zeppelin/blob/master/zeppelin-zengine/src/main/java/org/apache/zeppelin/helium/HeliumVisualizationFactory.java">HeliumVisualizationFactory</a> creates a js bundle. The js bundle is served by <code>helium/visualization/load</code> rest api endpoint.</p>
+
+<h4>4. Run visualization</h4>
+
+<p>Zeppelin shows additional button for loaded Visualizations.
+User can use just like any other built-in visualizations.</p>
+
+<p><img class="img-responsive" style="width:70%" src="../assets/themes/zeppelin/img/docs-img/writing_visualization_example.png" /></p>
+
+<h2>Write new Visualization</h2>
+
+<h4>1. Create a npm package</h4>
+
+<p>Create a <a href="https://docs.npmjs.com/files/package.json">package.json</a> in your new Visualization directory. Normally, you can add any dependencies in package.json however Zeppelin Visualization package only allows two dependencies: <a href="https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/visualization">zeppelin-vis</a> and <a href="https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/tabledata">zeppelin-tabledata</a>.</p>
+
+<p>Here's an example</p>
+<div class="highlight"><pre><code class="text language-text" data-lang="text">{
+ "name": "zeppelin_horizontalbar",
+ "description" : "Horizontal Bar chart",
+ "version": "1.0.0",
+ "main": "horizontalbar",
+ "author": "",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "zeppelin-tabledata": "*",
+ "zeppelin-vis": "*"
+ }
+}
+</code></pre></div>
+<h4>2. Create your own visualization</h4>
+
+<p>To create your own visualization, you need to create a js file and import <a href="https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/visualization/visualization.js">Visualization</a> class from <a href="https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/visualization">zeppelin-vis</a> package and extend the class. <a href="https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/tabledata">zeppelin-tabledata</a> package provides some useful transformations, like pivot, you can use in your visualization. (you can create your own transformation, too).</p>
+
+<p><a href="https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/visualization/visualization.js">Visualization</a> class, there're several methods that you need to override and implement. Here's simple visualization that just prints <code>Hello world</code>.</p>
+<div class="highlight"><pre><code class="text language-text" data-lang="text">import Visualization from 'zeppelin-vis'
+import PassthroughTransformation from 'zeppelin-tabledata/passthrough'
+
+export default class helloworld extends Visualization {
+ constructor(targetEl, config) {
+ super(targetEl, config)
+ this.passthrough = new PassthroughTransformation(config);
+ }
+
+ render(tableData) {
+ this.targetEl.html('Hello world!')
+ }
+
+ getTransformation() {
+ return this.passthrough
+ }
+}
+</code></pre></div>
+<p>To learn more about <code>Visualization</code> class, check <a href="https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/visualization/visualization.js">visualization.js</a>.</p>
+
+<p>You can check complete visualization package example <a href="https://github.com/apache/zeppelin/tree/master/zeppelin-examples/zeppelin-example-horizontalbar">here</a>.</p>
+
+<p>Zeppelin's built-in visualization uses the same API, so you can check <a href="https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/visualization/builtins">built-in visualizations</a> as additional examples.</p>
+
+<h4>3. Create <strong>Helium package file</strong></h4>
+
+<p><strong>Helium Package file</strong> is a json file that provides information about the application.
+Json file contains the following information</p>
+<div class="highlight"><pre><code class="text language-text" data-lang="text">{
+ "type" : "VISUALIZATION",
+ "name" : "zeppelin_horizontalbar",
+ "description" : "Horizontal Bar chart (example)",
+ "license" : "Apache-2.0",
+ "artifact" : "./zeppelin-examples/zeppelin-example-horizontalbar",
+ "icon" : "<i class='fa fa-bar-chart rotate90flipX'></i>"
+}
+</code></pre></div>
+<h5>type</h5>
+
+<p>When you're creating a visualization, 'type' should be 'VISUALIZATION'.
+Check <a href="./writingzeppelinapplication.html">application</a> type if you're interested in the other types of package.</p>
+
+<h5>name</h5>
+
+<p>Name of visualization. Should be unique. Allows <code>[A-Za-z90-9_]</code>.</p>
+
+<h5>description</h5>
+
+<p>A short description about visualization.</p>
+
+<h5>artifact</h5>
+
+<p>Location of the visualization npm package. Support npm package with version or local filesystem path.</p>
+
+<p>e.g.</p>
+
+<p>When artifact exists in npm repository</p>
+<div class="highlight"><pre><code class="text language-text" data-lang="text">artifact: "my-visualiztion@1.0.0"
+</code></pre></div>
+<p>When artifact exists in local file system</p>
+<div class="highlight"><pre><code class="text language-text" data-lang="text">artifact: "/path/to/my/visualization"
+</code></pre></div>
+<h5>license</h5>
+
+<p>License information.</p>
+
+<p>e.g.</p>
+<div class="highlight"><pre><code class="text language-text" data-lang="text">license: "Apache-2.0"
+</code></pre></div>
+<h5>icon</h5>
+
+<p>Icon to be used in visualization select button. String in this field will be rendered as a HTML tag.</p>
+
+<p>e.g.</p>
+<div class="highlight"><pre><code class="text language-text" data-lang="text">icon: "<i class='fa fa-coffee'></i>"
+</code></pre></div>
+<h4>4. Run in dev mode</h4>
+
+<p>Place your <strong>Helium package file</strong> in local registry (ZEPPELIN_HOME/helium).
+Run Zeppelin. And then run zeppelin-web in visualization dev mode.</p>
+<div class="highlight"><pre><code class="text language-text" data-lang="text">cd zeppelin-web
+yarn run visdev
+</code></pre></div>
+<p>You can browse localhost:9000. Everytime refresh your browser, Zeppelin will rebuild your visualization and reload changes.</p>
+
+ </div>
+</div>
+
+
+ <hr>
+ <footer>
+ <!-- <p>© 2017 The Apache Software Foundation</p>-->
+ </footer>
+ </div>
+
+
+
+
+ <script type="text/javascript">
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-45176241-5', 'zeppelin.apache.org');
+ ga('require', 'linkid', 'linkid.js');
+ ga('send', 'pageview');
+
+</script>
+
+
+
+ </body>
+</html>
+
Added: zeppelin/site/docs/0.7.3/displaysystem/back-end-angular.html
URL: http://svn.apache.org/viewvc/zeppelin/site/docs/0.7.3/displaysystem/back-end-angular.html?rev=1809223&view=auto
==============================================================================
--- zeppelin/site/docs/0.7.3/displaysystem/back-end-angular.html (added)
+++ zeppelin/site/docs/0.7.3/displaysystem/back-end-angular.html Thu Sep 21 20:33:57 2017
@@ -0,0 +1,414 @@
+
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Apache Zeppelin 0.7.3 Documentation: Back-end Angular API in Apache Zeppelin</title>
+ <meta name="description" content="Apache Zeppelin provides a gateway between your interpreter and your compiled AngularJS view templates. You can not only update scope variables from your interpreter but also watch them in the interpreter, which is JVM process.">
+ <meta name="author" content="The Apache Software Foundation">
+
+ <!-- Enable responsive viewport -->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+
+ <!-- Le styles -->
+ <link href="/docs/0.7.3/assets/themes/zeppelin/bootstrap/css/bootstrap.css" rel="stylesheet">
+ <link href="/docs/0.7.3/assets/themes/zeppelin/css/style.css?body=1" rel="stylesheet" type="text/css">
+ <link href="/docs/0.7.3/assets/themes/zeppelin/css/syntax.css" rel="stylesheet" type="text/css" media="screen" />
+ <!-- Le fav and touch icons -->
+ <!-- Update these with your own images
+ <link rel="shortcut icon" href="images/favicon.ico">
+ <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
+ -->
+
+ <!-- Js -->
+ <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/bootstrap/js/bootstrap.min.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/js/docs.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/js/anchor.min.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/js/toc.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/js/lunr.min.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/js/search.js"></script>
+
+ <!-- atom & rss feed -->
+ <link href="/docs/0.7.3/atom.xml" type="application/atom+xml" rel="alternate" title="Sitewide ATOM Feed">
+ <link href="/docs/0.7.3/rss.xml" type="application/rss+xml" rel="alternate" title="Sitewide RSS Feed">
+ </head>
+
+ <body>
+
+ <div id="menu" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+ <div class="container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <div class="navbar-brand">
+ <a class="navbar-brand-main" href="http://zeppelin.apache.org">
+ <img src="/assets/themes/zeppelin/img/zeppelin_logo.png" width="50" alt="I'm zeppelin">
+ <span style="vertical-align:middle">Zeppelin</span>
+ </a>
+ <a class="navbar-brand-version" href="/docs/0.7.3">
+ <span><small>0.7.3</small></span>
+ </a>
+ </div>
+ </div>
+ <nav class="navbar-collapse collapse" role="navigation">
+ <ul class="nav navbar-nav">
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Quick Start <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="/docs/0.7.3/index.html">What is Apache Zeppelin ?</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Getting Started</b><span></li>
+ <li><a href="/docs/0.7.3/install/install.html">Install</a></li>
+ <li><a href="/docs/0.7.3/install/configuration.html">Configuration</a></li>
+ <li><a href="/docs/0.7.3/quickstart/explorezeppelinui.html">Explore Zeppelin UI</a></li>
+ <li><a href="/docs/0.7.3/quickstart/tutorial.html">Tutorial</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Basic Feature Guide</b><span></li>
+ <li><a href="/docs/0.7.3/manual/dynamicform.html">Dynamic Form</a></li>
+ <li><a href="/docs/0.7.3/manual/publish.html">Publish your Paragraph</a></li>
+ <li><a href="/docs/0.7.3/manual/notebookashomepage.html">Customize Zeppelin Homepage</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>More</b><span></li>
+ <li><a href="/docs/0.7.3/install/upgrade.html">Upgrade Zeppelin Version</a></li>
+ <li><a href="/docs/0.7.3/install/build.html">Build from source</a></li>
+ <li><a href="/docs/0.7.3/quickstart/install_with_flink_and_spark_cluster.html">Install Zeppelin with Flink and Spark Clusters Tutorial</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Interpreter <b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu">
+ <li><a href="/docs/0.7.3/manual/interpreters.html">Overview</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Usage</b><span></li>
+ <li><a href="/docs/0.7.3/manual/interpreterinstallation.html">Interpreter Installation</a></li>
+ <!--<li><a href="/docs/0.7.3/manual/dynamicinterpreterload.html">Dynamic Interpreter Loading</a></li>-->
+ <li><a href="/docs/0.7.3/manual/dependencymanagement.html">Interpreter Dependency Management</a></li>
+ <li><a href="/docs/0.7.3/manual/userimpersonation.html">Interpreter User Impersonation</a></li>
+ <li><a href="/docs/0.7.3/manual/interpreterexechooks.html">Interpreter Execution Hooks (Experimental)</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Available Interpreters</b><span></li>
+ <li><a href="/docs/0.7.3/interpreter/alluxio.html">Alluxio</a></li>
+ <li><a href="/docs/0.7.3/interpreter/beam.html">Beam</a></li>
+ <li><a href="/docs/0.7.3/interpreter/bigquery.html">BigQuery</a></li>
+ <li><a href="/docs/0.7.3/interpreter/cassandra.html">Cassandra</a></li>
+ <li><a href="/docs/0.7.3/interpreter/elasticsearch.html">Elasticsearch</a></li>
+ <li><a href="/docs/0.7.3/interpreter/flink.html">Flink</a></li>
+ <li><a href="/docs/0.7.3/interpreter/geode.html">Geode</a></li>
+ <li><a href="/docs/0.7.3/interpreter/hbase.html">HBase</a></li>
+ <li><a href="/docs/0.7.3/interpreter/hdfs.html">HDFS</a></li>
+ <li><a href="/docs/0.7.3/interpreter/hive.html">Hive</a></li>
+ <li><a href="/docs/0.7.3/interpreter/ignite.html">Ignite</a></li>
+ <li><a href="/docs/0.7.3/interpreter/jdbc.html">JDBC</a></li>
+ <li><a href="/docs/0.7.3/interpreter/kylin.html">Kylin</a></li>
+ <li><a href="/docs/0.7.3/interpreter/lens.html">Lens</a></li>
+ <li><a href="/docs/0.7.3/interpreter/livy.html">Livy</a></li>
+ <li><a href="/docs/0.7.3/interpreter/markdown.html">Markdown</a></li>
+ <li><a href="/docs/0.7.3/interpreter/pig.html">Pig</a></li>
+ <li><a href="/docs/0.7.3/interpreter/python.html">Python</a></li>
+ <li><a href="/docs/0.7.3/interpreter/postgresql.html">Postgresql, HAWQ</a></li>
+ <li><a href="/docs/0.7.3/interpreter/r.html">R</a></li>
+ <li><a href="/docs/0.7.3/interpreter/scalding.html">Scalding</a></li>
+ <li><a href="/docs/0.7.3/interpreter/scio.html">Scio</a></li>
+ <li><a href="/docs/0.7.3/interpreter/shell.html">Shell</a></li>
+ <li><a href="/docs/0.7.3/interpreter/spark.html">Spark</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Display System <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li class="title"><span><b>Basic Display System</b><span></li>
+ <li><a href="/docs/0.7.3/displaysystem/basicdisplaysystem.html#text">Text</a></li>
+ <li><a href="/docs/0.7.3/displaysystem/basicdisplaysystem.html#html">Html</a></li>
+ <li><a href="/docs/0.7.3/displaysystem/basicdisplaysystem.html#table">Table</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Angular API</b><span></li>
+ <li><a href="/docs/0.7.3/displaysystem/back-end-angular.html">Angular (backend API)</a></li>
+ <li><a href="/docs/0.7.3/displaysystem/front-end-angular.html">Angular (frontend API)</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">More<b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu" style="right: 0; left: auto;">
+ <li class="title"><span><b>Notebook Storage</b><span></li>
+ <li><a href="/docs/0.7.3/storage/storage.html#notebook-storage-in-local-git-repository">Git Storage</a></li>
+ <li><a href="/docs/0.7.3/storage/storage.html#notebook-storage-in-s3">S3 Storage</a></li>
+ <li><a href="/docs/0.7.3/storage/storage.html#notebook-storage-in-azure">Azure Storage</a></li>
+ <li><a href="/docs/0.7.3/storage/storage.html#storage-in-zeppelinhub">ZeppelinHub Storage</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>REST API</b><span></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-interpreter.html">Interpreter API</a></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-notebook.html">Notebook API</a></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-notebookRepo.html">Notebook Repository API</a></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-configuration.html">Configuration API</a></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-credential.html">Credential API</a></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-helium.html">Helium API</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Security</b><span></li>
+ <li><a href="/docs/0.7.3/security/shiroauthentication.html">Shiro Authentication</a></li>
+ <li><a href="/docs/0.7.3/security/notebook_authorization.html">Notebook Authorization</a></li>
+ <li><a href="/docs/0.7.3/security/datasource_authorization.html">Data Source Authorization</a></li>
+ <li><a href="/docs/0.7.3/security/http_security_headers.html">HTTP Security Headers</a></li>
+ <li><a href="/docs/0.7.3/security/helium_authorization.html">Helium Authorization</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Advanced</b><span></li>
+ <li><a href="/docs/0.7.3/install/virtual_machine.html">Zeppelin on Vagrant VM</a></li>
+ <li><a href="/docs/0.7.3/install/spark_cluster_mode.html#spark-standalone-mode">Zeppelin on Spark Cluster Mode (Standalone)</a></li>
+ <li><a href="/docs/0.7.3/install/spark_cluster_mode.html#spark-on-yarn-mode">Zeppelin on Spark Cluster Mode (YARN)</a></li>
+ <li><a href="/docs/0.7.3/install/spark_cluster_mode.html#spark-on-mesos-mode">Zeppelin on Spark Cluster Mode (Mesos)</a></li>
+ <li><a href="/docs/0.7.3/install/cdh.html">Zeppelin on CDH</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Contibute</b><span></li>
+ <li><a href="/docs/0.7.3/development/writingzeppelininterpreter.html">Writing Zeppelin Interpreter</a></li>
+ <li><a href="/docs/0.7.3/development/writingzeppelinvisualization.html">Writing Zeppelin Visualization (Experimental)</a></li>
+ <li><a href="/docs/0.7.3/development/writingzeppelinapplication.html">Writing Zeppelin Application (Experimental)</a></li>
+ <li><a href="/docs/0.7.3/development/howtocontribute.html">How to contribute (code)</a></li>
+ <li><a href="/docs/0.7.3/development/howtocontributewebsite.html">How to contribute (website)</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="/docs/0.7.3/search.html" class="nav-search-link">
+ <span class="fa fa-search nav-search-icon"></span>
+ </a>
+ </li>
+ </ul>
+ </nav><!--/.navbar-collapse -->
+ </div>
+ </div>
+
+
+
+ <div class="content">
+
+<!--<div class="hero-unit Back-end Angular API in Apache Zeppelin">
+ <h1></h1>
+</div>
+-->
+
+<div class="row">
+ <div class="col-md-12">
+ <!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<h1>Back-end Angular API in Apache Zeppelin</h1>
+
+<div id="toc"></div>
+
+<h2>Overview</h2>
+
+<p>Angular display system treats output as a view template for <a href="https://angularjs.org/">AngularJS</a>.
+It compiles templates and displays them inside of Apache Zeppelin. Zeppelin provides a gateway between your interpreter and your compiled <strong>AngularJS view</strong> templates.
+Therefore, you can not only update scope variables from your interpreter but also watch them in the interpreter, which is JVM process.</p>
+
+<h2>Basic Usage</h2>
+
+<h3>Print AngularJS view</h3>
+
+<p>To use angular display system, you should start with <code>%angular</code>.
+<img src="/assets/themes/zeppelin/img/screenshots/display_angular.png" width="60%" /></p>
+
+<p>Since <code>name</code> is not defined, <code>Hello</code> will display <code>Hello</code>.</p>
+
+<blockquote>
+<p><strong>Please Note:</strong> Display system is backend independent.</p>
+</blockquote>
+
+<p><br /></p>
+
+<h3>Bind / Unbind Variables</h3>
+
+<p>Through <strong>ZeppelinContext</strong>, you can bind / unbind variables to <strong>AngularJS view</strong>. Currently, it only works in <strong>Spark Interpreter ( scala )</strong>.</p>
+<div class="highlight"><pre><code class="scala language-scala" data-lang="scala"><span class="c1">// bind my 'object' as angular scope variable 'name' in current notebook.</span>
+<span class="n">z</span><span class="o">.</span><span class="n">angularBind</span><span class="o">(</span><span class="nc">String</span> <span class="n">name</span><span class="o">,</span> <span class="nc">Object</span> <span class="n">object</span><span class="o">)</span>
+
+<span class="c1">// bind my 'object' as angular scope variable 'name' in all notebooks related to current interpreter.</span>
+<span class="n">z</span><span class="o">.</span><span class="n">angularBindGlobal</span><span class="o">(</span><span class="nc">String</span> <span class="n">name</span><span class="o">,</span> <span class="nc">Object</span> <span class="n">object</span><span class="o">)</span>
+
+<span class="c1">// unbind angular scope variable 'name' in current notebook.</span>
+<span class="n">z</span><span class="o">.</span><span class="n">angularUnbind</span><span class="o">(</span><span class="nc">String</span> <span class="n">name</span><span class="o">)</span>
+
+<span class="c1">// unbind angular scope variable 'name' in all notebooks related to current interpreter.</span>
+<span class="n">z</span><span class="o">.</span><span class="n">angularUnbindGlobal</span><span class="o">(</span><span class="nc">String</span> <span class="n">name</span><span class="o">)</span>
+</code></pre></div>
+<p>Using the above example, let's bind <code>world</code> variable to <code>name</code>. Then you can see <strong>AngularJs view</strong> is immediately updated.</p>
+
+<p><img src="/assets/themes/zeppelin/img/screenshots/display_angular1.png" width="60%" /></p>
+
+<p><br /></p>
+
+<h3>Watch / Unwatch Variables</h3>
+
+<p>Through <strong>ZeppelinContext</strong>, you can watch / unwatch variables in <strong>AngularJs view</strong>. Currently, it only works in <strong>Spark Interpreter ( scala )</strong>.</p>
+<div class="highlight"><pre><code class="scala language-scala" data-lang="scala"><span class="c1">// register for angular scope variable 'name' (notebook)</span>
+<span class="n">z</span><span class="o">.</span><span class="n">angularWatch</span><span class="o">(</span><span class="nc">String</span> <span class="n">name</span><span class="o">,</span> <span class="o">(</span><span class="n">before</span><span class="o">,</span> <span class="n">after</span><span class="o">)</span> <span class="k">=></span> <span class="o">{</span> <span class="o">...</span> <span class="o">})</span>
+
+<span class="c1">// unregister watcher for angular variable 'name' (notebook)</span>
+<span class="n">z</span><span class="o">.</span><span class="n">angularUnwatch</span><span class="o">(</span><span class="nc">String</span> <span class="n">name</span><span class="o">)</span>
+
+<span class="c1">// register for angular scope variable 'name' (global)</span>
+<span class="n">z</span><span class="o">.</span><span class="n">angularWatchGlobal</span><span class="o">(</span><span class="nc">String</span> <span class="n">name</span><span class="o">,</span> <span class="o">(</span><span class="n">before</span><span class="o">,</span> <span class="n">after</span><span class="o">)</span> <span class="k">=></span> <span class="o">{</span> <span class="o">...</span> <span class="o">})</span>
+
+<span class="c1">// unregister watcher for angular variable 'name' (global)</span>
+<span class="n">z</span><span class="o">.</span><span class="n">angularUnwatchGlobal</span><span class="o">(</span><span class="nc">String</span> <span class="n">name</span><span class="o">)</span>
+</code></pre></div>
+<p>Let's make a button. When it is clicked, the value of <code>run</code> will be increased 1 by 1.</p>
+
+<p><img src="/assets/themes/zeppelin/img/screenshots/display_angular2.png" width="60%" /></p>
+
+<p><code>z.angularBind("run", 0)</code> will initialize <code>run</code> to zero. And then, it will be also applied to <code>run</code> in <code>z.angularWatch()</code>.
+When the button is clicked, you'll see both <code>run</code> and <code>numWatched</code> are incremented by 1.</p>
+
+<p><img src="/assets/themes/zeppelin/img/screenshots/display_angular3.png" width="60%" /></p>
+
+<h2>Let's make it Simpler and more Intuitive</h2>
+
+<p>In this section, we will introduce a simpler and more intuitive way of using <strong>Angular Display System</strong> in Zeppelin.</p>
+
+<p>Here are some usages.</p>
+
+<h3>Import</h3>
+<div class="highlight"><pre><code class="scala language-scala" data-lang="scala"><span class="c1">// In notebook scope</span>
+<span class="k">import</span> <span class="nn">org.apache.zeppelin.display.angular.notebookscope._</span>
+<span class="k">import</span> <span class="nn">AngularElem._</span>
+
+<span class="c1">// In paragraph scope</span>
+<span class="k">import</span> <span class="nn">org.apache.zeppelin.display.angular.paragraphscope._</span>
+<span class="k">import</span> <span class="nn">AngularElem._</span>
+</code></pre></div>
+<h3>Display Element</h3>
+<div class="highlight"><pre><code class="scala language-scala" data-lang="scala"><span class="c1">// automatically convert to string and print with %angular display system directive in front.</span>
+<span class="o"><</span><span class="n">div</span><span class="o">></</span><span class="n">div</span><span class="o">>.</span><span class="n">display</span>
+</code></pre></div>
+<h3>Event Handler</h3>
+<div class="highlight"><pre><code class="scala language-scala" data-lang="scala"><span class="c1">// on click</span>
+<span class="o"><</span><span class="n">div</span><span class="o">></</span><span class="n">div</span><span class="o">>.</span><span class="n">onClick</span><span class="o">(()</span> <span class="k">=></span> <span class="o">{</span>
+ <span class="n">my</span> <span class="n">callback</span> <span class="n">routine</span>
+<span class="o">}).</span><span class="n">display</span>
+
+<span class="c1">// on change</span>
+<span class="o"><</span><span class="n">div</span><span class="o">></</span><span class="n">div</span><span class="o">>.</span><span class="n">onChange</span><span class="o">(()</span> <span class="k">=></span> <span class="o">{</span>
+ <span class="n">my</span> <span class="n">callback</span> <span class="n">routine</span>
+<span class="o">}).</span><span class="n">display</span>
+
+<span class="c1">// arbitrary event</span>
+<span class="o"><</span><span class="n">div</span><span class="o">></</span><span class="n">div</span><span class="o">>.</span><span class="n">onEvent</span><span class="o">(</span><span class="s">"ng-click"</span><span class="o">,</span> <span class="o">()</span> <span class="k">=></span> <span class="o">{</span>
+ <span class="n">my</span> <span class="n">callback</span> <span class="n">routine</span>
+<span class="o">}).</span><span class="n">display</span>
+</code></pre></div>
+<h3>Bind Model</h3>
+<div class="highlight"><pre><code class="scala language-scala" data-lang="scala"><span class="c1">// bind model</span>
+<span class="o"><</span><span class="n">div</span><span class="o">></</span><span class="n">div</span><span class="o">>.</span><span class="n">model</span><span class="o">(</span><span class="s">"myModel"</span><span class="o">).</span><span class="n">display</span>
+
+<span class="c1">// bind model with initial value</span>
+<span class="o"><</span><span class="n">div</span><span class="o">></</span><span class="n">div</span><span class="o">>.</span><span class="n">model</span><span class="o">(</span><span class="s">"myModel"</span><span class="o">,</span> <span class="n">initialValue</span><span class="o">).</span><span class="n">display</span>
+</code></pre></div>
+<h3>Interact with Model</h3>
+<div class="highlight"><pre><code class="scala language-scala" data-lang="scala"><span class="c1">// read model</span>
+<span class="nc">AngularModel</span><span class="o">(</span><span class="s">"myModel"</span><span class="o">)()</span>
+
+<span class="c1">// update model</span>
+<span class="nc">AngularModel</span><span class="o">(</span><span class="s">"myModel"</span><span class="o">,</span> <span class="s">"newValue"</span><span class="o">)</span>
+</code></pre></div>
+<p><br/></p>
+
+<h3>Example: Basic Usage</h3>
+
+<p>Using the above basic usages, you can apply them like below examples.</p>
+
+<h4>Display Elements</h4>
+<div class="highlight"><pre><code class="scala language-scala" data-lang="scala"><span class="o"><</span><span class="n">div</span> <span class="n">style</span><span class="o">=</span><span class="s">"color:blue"</span><span class="o">></span>
+ <span class="o"><</span><span class="n">h4</span><span class="o">></span><span class="nc">Hello</span> <span class="nc">Angular</span> <span class="nc">Display</span> <span class="nc">System</span><span class="o"></</span><span class="n">h4</span><span class="o">></span>
+<span class="o"></</span><span class="n">div</span><span class="o">>.</span><span class="n">display</span>
+</code></pre></div>
+<h4>OnClick Event</h4>
+<div class="highlight"><pre><code class="scala language-scala" data-lang="scala"><span class="o"><</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s">"btn btn-success"</span><span class="o">></span>
+ <span class="nc">Click</span> <span class="n">me</span>
+<span class="o"></</span><span class="n">div</span><span class="o">>.</span><span class="n">onClick</span><span class="o">{()</span> <span class="k">=></span>
+ <span class="c1">// callback for button click</span>
+<span class="o">}.</span><span class="n">display</span>
+</code></pre></div>
+<h4>Bind Model</h4>
+<div class="highlight"><pre><code class="scala language-scala" data-lang="scala"> <span class="o"><</span><span class="n">div</span><span class="o">>{{{{</span><span class="n">myModel</span><span class="o">}}}}</</span><span class="n">div</span><span class="o">>.</span><span class="n">model</span><span class="o">(</span><span class="s">"myModel"</span><span class="o">,</span> <span class="s">"Initial Value"</span><span class="o">).</span><span class="n">display</span>
+</code></pre></div>
+<h4>Interact With Model</h4>
+<div class="highlight"><pre><code class="scala language-scala" data-lang="scala"><span class="c1">// read the value</span>
+<span class="nc">AngularModel</span><span class="o">(</span><span class="s">"myModel"</span><span class="o">)()</span>
+
+<span class="c1">// update the value</span>
+<span class="nc">AngularModel</span><span class="o">(</span><span class="s">"myModel"</span><span class="o">,</span> <span class="s">"New value"</span><span class="o">)</span>
+</code></pre></div>
+<p><img src="../assets/themes/zeppelin/img/docs-img/basic-usage-angular.png" width="70%"></p>
+
+<h3>Example: String Converter</h3>
+
+<p>Using below example, you can convert the lowercase string to uppercase.</p>
+<div class="highlight"><pre><code class="scala language-scala" data-lang="scala"><span class="c1">// clear previously created angular object.</span>
+<span class="nc">AngularElem</span><span class="o">.</span><span class="n">disassociate</span>
+
+<span class="k">val</span> <span class="n">button</span> <span class="k">=</span> <span class="o"><</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s">"btn btn-success btn-sm"</span><span class="o">></span><span class="nc">Convert</span><span class="o"></</span><span class="n">div</span><span class="o">>.</span><span class="n">onClick</span><span class="o">{()</span> <span class="k">=></span>
+ <span class="k">val</span> <span class="n">inputString</span> <span class="k">=</span> <span class="nc">AngularModel</span><span class="o">(</span><span class="s">"input"</span><span class="o">)().</span><span class="n">toString</span>
+ <span class="nc">AngularModel</span><span class="o">(</span><span class="s">"title"</span><span class="o">,</span> <span class="n">inputString</span><span class="o">.</span><span class="n">toUpperCase</span><span class="o">)</span>
+<span class="o">}</span>
+
+<span class="o"><</span><span class="n">div</span><span class="o">></span>
+ <span class="o">{</span> <span class="o"><</span><span class="n">h4</span><span class="o">></span> <span class="o">{{{{</span><span class="n">title</span><span class="o">}}}}</</span><span class="n">h4</span><span class="o">>.</span><span class="n">model</span><span class="o">(</span><span class="s">"title"</span><span class="o">,</span> <span class="s">"Please type text to convert uppercase"</span><span class="o">)</span> <span class="o">}</span>
+ <span class="nc">Your</span> <span class="n">text</span> <span class="o">{</span> <span class="o"><</span><span class="n">input</span> <span class="n">type</span><span class="o">=</span><span class="s">"text"</span><span class="o">></</span><span class="n">input</span><span class="o">>.</span><span class="n">model</span><span class="o">(</span><span class="s">"input"</span><span class="o">,</span> <span class="s">""</span><span class="o">)</span> <span class="o">}</span>
+ <span class="o">{</span><span class="n">button</span><span class="o">}</span>
+<span class="o"></</span><span class="n">div</span><span class="o">>.</span><span class="n">display</span>
+</code></pre></div>
+<p><img src="../assets/themes/zeppelin/img/docs-img/string-converter-angular.gif" width="70%"></p>
+
+ </div>
+</div>
+
+
+ <hr>
+ <footer>
+ <!-- <p>© 2017 The Apache Software Foundation</p>-->
+ </footer>
+ </div>
+
+
+
+
+ <script type="text/javascript">
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-45176241-5', 'zeppelin.apache.org');
+ ga('require', 'linkid', 'linkid.js');
+ ga('send', 'pageview');
+
+</script>
+
+
+
+ </body>
+</html>
+
Added: zeppelin/site/docs/0.7.3/displaysystem/basicdisplaysystem.html
URL: http://svn.apache.org/viewvc/zeppelin/site/docs/0.7.3/displaysystem/basicdisplaysystem.html?rev=1809223&view=auto
==============================================================================
--- zeppelin/site/docs/0.7.3/displaysystem/basicdisplaysystem.html (added)
+++ zeppelin/site/docs/0.7.3/displaysystem/basicdisplaysystem.html Thu Sep 21 20:33:57 2017
@@ -0,0 +1,291 @@
+
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Apache Zeppelin 0.7.3 Documentation: Basic Display System in Apache Zeppelin</title>
+ <meta name="description" content="There are 3 basic display systems in Apache Zeppelin. By default, Zeppelin prints interpreter responce as a plain text using text display system. With %html directive, Zeppelin treats your output as HTML. You can also simply use %table display system to leverage Zeppelin's built in visualization.">
+ <meta name="author" content="The Apache Software Foundation">
+
+ <!-- Enable responsive viewport -->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+
+ <!-- Le styles -->
+ <link href="/docs/0.7.3/assets/themes/zeppelin/bootstrap/css/bootstrap.css" rel="stylesheet">
+ <link href="/docs/0.7.3/assets/themes/zeppelin/css/style.css?body=1" rel="stylesheet" type="text/css">
+ <link href="/docs/0.7.3/assets/themes/zeppelin/css/syntax.css" rel="stylesheet" type="text/css" media="screen" />
+ <!-- Le fav and touch icons -->
+ <!-- Update these with your own images
+ <link rel="shortcut icon" href="images/favicon.ico">
+ <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
+ -->
+
+ <!-- Js -->
+ <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/bootstrap/js/bootstrap.min.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/js/docs.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/js/anchor.min.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/js/toc.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/js/lunr.min.js"></script>
+ <script src="/docs/0.7.3/assets/themes/zeppelin/js/search.js"></script>
+
+ <!-- atom & rss feed -->
+ <link href="/docs/0.7.3/atom.xml" type="application/atom+xml" rel="alternate" title="Sitewide ATOM Feed">
+ <link href="/docs/0.7.3/rss.xml" type="application/rss+xml" rel="alternate" title="Sitewide RSS Feed">
+ </head>
+
+ <body>
+
+ <div id="menu" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+ <div class="container">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <div class="navbar-brand">
+ <a class="navbar-brand-main" href="http://zeppelin.apache.org">
+ <img src="/assets/themes/zeppelin/img/zeppelin_logo.png" width="50" alt="I'm zeppelin">
+ <span style="vertical-align:middle">Zeppelin</span>
+ </a>
+ <a class="navbar-brand-version" href="/docs/0.7.3">
+ <span><small>0.7.3</small></span>
+ </a>
+ </div>
+ </div>
+ <nav class="navbar-collapse collapse" role="navigation">
+ <ul class="nav navbar-nav">
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Quick Start <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="/docs/0.7.3/index.html">What is Apache Zeppelin ?</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Getting Started</b><span></li>
+ <li><a href="/docs/0.7.3/install/install.html">Install</a></li>
+ <li><a href="/docs/0.7.3/install/configuration.html">Configuration</a></li>
+ <li><a href="/docs/0.7.3/quickstart/explorezeppelinui.html">Explore Zeppelin UI</a></li>
+ <li><a href="/docs/0.7.3/quickstart/tutorial.html">Tutorial</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Basic Feature Guide</b><span></li>
+ <li><a href="/docs/0.7.3/manual/dynamicform.html">Dynamic Form</a></li>
+ <li><a href="/docs/0.7.3/manual/publish.html">Publish your Paragraph</a></li>
+ <li><a href="/docs/0.7.3/manual/notebookashomepage.html">Customize Zeppelin Homepage</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>More</b><span></li>
+ <li><a href="/docs/0.7.3/install/upgrade.html">Upgrade Zeppelin Version</a></li>
+ <li><a href="/docs/0.7.3/install/build.html">Build from source</a></li>
+ <li><a href="/docs/0.7.3/quickstart/install_with_flink_and_spark_cluster.html">Install Zeppelin with Flink and Spark Clusters Tutorial</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Interpreter <b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu">
+ <li><a href="/docs/0.7.3/manual/interpreters.html">Overview</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Usage</b><span></li>
+ <li><a href="/docs/0.7.3/manual/interpreterinstallation.html">Interpreter Installation</a></li>
+ <!--<li><a href="/docs/0.7.3/manual/dynamicinterpreterload.html">Dynamic Interpreter Loading</a></li>-->
+ <li><a href="/docs/0.7.3/manual/dependencymanagement.html">Interpreter Dependency Management</a></li>
+ <li><a href="/docs/0.7.3/manual/userimpersonation.html">Interpreter User Impersonation</a></li>
+ <li><a href="/docs/0.7.3/manual/interpreterexechooks.html">Interpreter Execution Hooks (Experimental)</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Available Interpreters</b><span></li>
+ <li><a href="/docs/0.7.3/interpreter/alluxio.html">Alluxio</a></li>
+ <li><a href="/docs/0.7.3/interpreter/beam.html">Beam</a></li>
+ <li><a href="/docs/0.7.3/interpreter/bigquery.html">BigQuery</a></li>
+ <li><a href="/docs/0.7.3/interpreter/cassandra.html">Cassandra</a></li>
+ <li><a href="/docs/0.7.3/interpreter/elasticsearch.html">Elasticsearch</a></li>
+ <li><a href="/docs/0.7.3/interpreter/flink.html">Flink</a></li>
+ <li><a href="/docs/0.7.3/interpreter/geode.html">Geode</a></li>
+ <li><a href="/docs/0.7.3/interpreter/hbase.html">HBase</a></li>
+ <li><a href="/docs/0.7.3/interpreter/hdfs.html">HDFS</a></li>
+ <li><a href="/docs/0.7.3/interpreter/hive.html">Hive</a></li>
+ <li><a href="/docs/0.7.3/interpreter/ignite.html">Ignite</a></li>
+ <li><a href="/docs/0.7.3/interpreter/jdbc.html">JDBC</a></li>
+ <li><a href="/docs/0.7.3/interpreter/kylin.html">Kylin</a></li>
+ <li><a href="/docs/0.7.3/interpreter/lens.html">Lens</a></li>
+ <li><a href="/docs/0.7.3/interpreter/livy.html">Livy</a></li>
+ <li><a href="/docs/0.7.3/interpreter/markdown.html">Markdown</a></li>
+ <li><a href="/docs/0.7.3/interpreter/pig.html">Pig</a></li>
+ <li><a href="/docs/0.7.3/interpreter/python.html">Python</a></li>
+ <li><a href="/docs/0.7.3/interpreter/postgresql.html">Postgresql, HAWQ</a></li>
+ <li><a href="/docs/0.7.3/interpreter/r.html">R</a></li>
+ <li><a href="/docs/0.7.3/interpreter/scalding.html">Scalding</a></li>
+ <li><a href="/docs/0.7.3/interpreter/scio.html">Scio</a></li>
+ <li><a href="/docs/0.7.3/interpreter/shell.html">Shell</a></li>
+ <li><a href="/docs/0.7.3/interpreter/spark.html">Spark</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Display System <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li class="title"><span><b>Basic Display System</b><span></li>
+ <li><a href="/docs/0.7.3/displaysystem/basicdisplaysystem.html#text">Text</a></li>
+ <li><a href="/docs/0.7.3/displaysystem/basicdisplaysystem.html#html">Html</a></li>
+ <li><a href="/docs/0.7.3/displaysystem/basicdisplaysystem.html#table">Table</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Angular API</b><span></li>
+ <li><a href="/docs/0.7.3/displaysystem/back-end-angular.html">Angular (backend API)</a></li>
+ <li><a href="/docs/0.7.3/displaysystem/front-end-angular.html">Angular (frontend API)</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">More<b class="caret"></b></a>
+ <ul class="dropdown-menu scrollable-menu" style="right: 0; left: auto;">
+ <li class="title"><span><b>Notebook Storage</b><span></li>
+ <li><a href="/docs/0.7.3/storage/storage.html#notebook-storage-in-local-git-repository">Git Storage</a></li>
+ <li><a href="/docs/0.7.3/storage/storage.html#notebook-storage-in-s3">S3 Storage</a></li>
+ <li><a href="/docs/0.7.3/storage/storage.html#notebook-storage-in-azure">Azure Storage</a></li>
+ <li><a href="/docs/0.7.3/storage/storage.html#storage-in-zeppelinhub">ZeppelinHub Storage</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>REST API</b><span></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-interpreter.html">Interpreter API</a></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-notebook.html">Notebook API</a></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-notebookRepo.html">Notebook Repository API</a></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-configuration.html">Configuration API</a></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-credential.html">Credential API</a></li>
+ <li><a href="/docs/0.7.3/rest-api/rest-helium.html">Helium API</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Security</b><span></li>
+ <li><a href="/docs/0.7.3/security/shiroauthentication.html">Shiro Authentication</a></li>
+ <li><a href="/docs/0.7.3/security/notebook_authorization.html">Notebook Authorization</a></li>
+ <li><a href="/docs/0.7.3/security/datasource_authorization.html">Data Source Authorization</a></li>
+ <li><a href="/docs/0.7.3/security/http_security_headers.html">HTTP Security Headers</a></li>
+ <li><a href="/docs/0.7.3/security/helium_authorization.html">Helium Authorization</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Advanced</b><span></li>
+ <li><a href="/docs/0.7.3/install/virtual_machine.html">Zeppelin on Vagrant VM</a></li>
+ <li><a href="/docs/0.7.3/install/spark_cluster_mode.html#spark-standalone-mode">Zeppelin on Spark Cluster Mode (Standalone)</a></li>
+ <li><a href="/docs/0.7.3/install/spark_cluster_mode.html#spark-on-yarn-mode">Zeppelin on Spark Cluster Mode (YARN)</a></li>
+ <li><a href="/docs/0.7.3/install/spark_cluster_mode.html#spark-on-mesos-mode">Zeppelin on Spark Cluster Mode (Mesos)</a></li>
+ <li><a href="/docs/0.7.3/install/cdh.html">Zeppelin on CDH</a></li>
+ <li role="separator" class="divider"></li>
+ <li class="title"><span><b>Contibute</b><span></li>
+ <li><a href="/docs/0.7.3/development/writingzeppelininterpreter.html">Writing Zeppelin Interpreter</a></li>
+ <li><a href="/docs/0.7.3/development/writingzeppelinvisualization.html">Writing Zeppelin Visualization (Experimental)</a></li>
+ <li><a href="/docs/0.7.3/development/writingzeppelinapplication.html">Writing Zeppelin Application (Experimental)</a></li>
+ <li><a href="/docs/0.7.3/development/howtocontribute.html">How to contribute (code)</a></li>
+ <li><a href="/docs/0.7.3/development/howtocontributewebsite.html">How to contribute (website)</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="/docs/0.7.3/search.html" class="nav-search-link">
+ <span class="fa fa-search nav-search-icon"></span>
+ </a>
+ </li>
+ </ul>
+ </nav><!--/.navbar-collapse -->
+ </div>
+ </div>
+
+
+
+ <div class="content">
+
+<!--<div class="hero-unit Basic Display System in Apache Zeppelin">
+ <h1></h1>
+</div>
+-->
+
+<div class="row">
+ <div class="col-md-12">
+ <!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<h1>Basic Display System in Apache Zeppelin</h1>
+
+<div id="toc"></div>
+
+<h2>Text</h2>
+
+<p>By default, Apache Zeppelin prints interpreter response as a plain text using <code>text</code> display system.</p>
+
+<p><img src="../assets/themes/zeppelin/img/screenshots/display_text.png" /></p>
+
+<p>You can explicitly say you're using <code>text</code> display system.</p>
+
+<p><img src="../assets/themes/zeppelin/img/screenshots/display_text1.png" /></p>
+
+<h2>Html</h2>
+
+<p>With <code>%html</code> directive, Zeppelin treats your output as HTML</p>
+
+<p><img src="../assets/themes/zeppelin/img/screenshots/display_html.png" /></p>
+
+<h3>Mathematical expressions</h3>
+
+<p>HTML display system automatically formats mathematical expression using <a href="https://www.mathjax.org/">MathJax</a>. You can use
+<code>\\( INLINE EXPRESSION \\)</code> and <code>$$ EXPRESSION $$</code> to format. For example</p>
+
+<p><img src="../assets/themes/zeppelin/img/screenshots/display_formula.png" /></p>
+
+<h2>Table</h2>
+
+<p>If you have data that row separated by <code>\n</code> (newline) and column separated by <code>\t</code> (tab) with first row as header row, for example</p>
+
+<p><img src="../assets/themes/zeppelin/img/screenshots/display_table.png" /></p>
+
+<p>You can simply use <code>%table</code> display system to leverage Zeppelin's built in visualization.</p>
+
+<p><img src="../assets/themes/zeppelin/img/screenshots/display_table1.png" /></p>
+
+<p>If table contents start with <code>%html</code>, it is interpreted as an HTML.</p>
+
+<p><img src="../assets/themes/zeppelin/img/screenshots/display_table_html.png" /></p>
+
+<blockquote>
+<p><strong>Note :</strong> Display system is backend independent.</p>
+</blockquote>
+
+ </div>
+</div>
+
+
+ <hr>
+ <footer>
+ <!-- <p>© 2017 The Apache Software Foundation</p>-->
+ </footer>
+ </div>
+
+
+
+
+ <script type="text/javascript">
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-45176241-5', 'zeppelin.apache.org');
+ ga('require', 'linkid', 'linkid.js');
+ ga('send', 'pageview');
+
+</script>
+
+
+
+ </body>
+</html>
+