Author: moon
Date: Tue Aug 18 20:17:23 2015
New Revision: 1696495
URL: http://svn.apache.org/r1696495
Log:
https://github.com/apache/incubator-zeppelin/pull/214
Added:
incubator/zeppelin/site/assets/themes/zeppelin/img/screenshots/homepage_notebook_id.png
(with props)
incubator/zeppelin/site/assets/themes/zeppelin/img/screenshots/homepage_notebook_list.png
(with props)
incubator/zeppelin/site/docs/manual/
incubator/zeppelin/site/docs/manual/dynamicform.html
incubator/zeppelin/site/docs/manual/notebookashomepage.html
Removed:
incubator/zeppelin/site/docs/dynamicform.html
Modified:
incubator/zeppelin/site/docs/development/howtocontribute.html
Added:
incubator/zeppelin/site/assets/themes/zeppelin/img/screenshots/homepage_notebook_id.png
URL:
http://svn.apache.org/viewvc/incubator/zeppelin/site/assets/themes/zeppelin/img/screenshots/homepage_notebook_id.png?rev=1696495&view=auto
==============================================================================
Binary file - no diff available.
Propchange:
incubator/zeppelin/site/assets/themes/zeppelin/img/screenshots/homepage_notebook_id.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Added:
incubator/zeppelin/site/assets/themes/zeppelin/img/screenshots/homepage_notebook_list.png
URL:
http://svn.apache.org/viewvc/incubator/zeppelin/site/assets/themes/zeppelin/img/screenshots/homepage_notebook_list.png?rev=1696495&view=auto
==============================================================================
Binary file - no diff available.
Propchange:
incubator/zeppelin/site/assets/themes/zeppelin/img/screenshots/homepage_notebook_list.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Modified: incubator/zeppelin/site/docs/development/howtocontribute.html
URL:
http://svn.apache.org/viewvc/incubator/zeppelin/site/docs/development/howtocontribute.html?rev=1696495&r1=1696494&r2=1696495&view=diff
==============================================================================
--- incubator/zeppelin/site/docs/development/howtocontribute.html (original)
+++ incubator/zeppelin/site/docs/development/howtocontribute.html Tue Aug 18
20:17:23 2015
@@ -140,6 +140,10 @@
+
+
+
+
@@ -189,13 +193,17 @@
+
+ <li><a href="/docs/index.html">Docs</a></li>
+
+
-
- <li><a href="/docs/index.html">Docs</a></li>
-
+
+
+
@@ -329,6 +337,8 @@ Apache Maven</p>
<div class="highlight"><pre><code class="text language-text"
data-lang="text">cd zeppelin-server
HADOOP_HOME=YOUR_HADOOP_HOME JAVA_HOME=YOUR_JAVA_HOME mvn exec:java
-Dexec.mainClass="org.apache.zeppelin.server.ZeppelinServer"
-Dexec.args=""
</code></pre></div>
+<p>NOTE: make sure you first run <code>mvn clean install -DskipTests</code> on
your zeppelin root directory otherwise your server build will fail to find the
required dependencies in the local repro</p>
+
<p>or use daemon script</p>
<div class="highlight"><pre><code class="text language-text"
data-lang="text">bin/zeppelin-daemon start
</code></pre></div>
Added: incubator/zeppelin/site/docs/manual/dynamicform.html
URL:
http://svn.apache.org/viewvc/incubator/zeppelin/site/docs/manual/dynamicform.html?rev=1696495&view=auto
==============================================================================
--- incubator/zeppelin/site/docs/manual/dynamicform.html (added)
+++ incubator/zeppelin/site/docs/manual/dynamicform.html Tue Aug 18 20:17:23
2015
@@ -0,0 +1,363 @@
+
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Dynamic Form</title>
+ <meta name="description" content="">
+ <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]-->
+
+ <!-- Le styles -->
+ <link href="/assets/themes/zeppelin/bootstrap/css/bootstrap.css"
rel="stylesheet">
+ <link href="/assets/themes/zeppelin/css/style.css?body=1" rel="stylesheet"
type="text/css">
+ <link href="/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">
+ -->
+
+ <!-- atom & rss feed -->
+ <link href="/atom.xml" type="application/atom+xml" rel="alternate"
title="Sitewide ATOM Feed">
+ <link href="/rss.xml" type="application/rss+xml" rel="alternate"
title="Sitewide RSS Feed">
+ </head>
+
+ <body>
+
+ <div 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>
+ <a class="navbar-brand" href="/">
+ <img src="/assets/themes/zeppelin/img/zeppelin_logo.png"
width="50" alt="I'm zeppelin">
+ Apache Zeppelin <small>(incubating)</small>
+ </a>
+ </div>
+ <nav class="navbar-collapse collapse" role="navigation">
+ <ul class="nav navbar-nav">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ </ul>
+ <ul class="nav navbar-nav navbar-right">
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li><a href="/community.html">Community</a></li>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li><a href="/docs/index.html">Docs</a></li>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li><a href="/download.html">Download</a></li>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li><a
href="https://github.com/apache/incubator-zeppelin";>GitHub</a></li>
+ <li id="apache">
+ <a href="#" data-toggle="dropdown"
class="dropdown-toggle">Apache<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a
href="http://www.apache.org/foundation/how-it-works.html";>Apache Software
Foundation</a></li>
+ <li><a href="http://www.apache.org/licenses/";>Apache
License</a></li>
+ <li><a
href="http://www.apache.org/foundation/sponsorship.html";>Sponsorship</a></li>
+ <li><a
href="http://www.apache.org/foundation/thanks.html";>Thanks</a></li>
+ </ul>
+ </li>
+ </ul>
+ </nav><!--/.navbar-collapse -->
+ </div>
+ </div>
+
+
+
+
+ <div class="container">
+
+<!--<div class="hero-unit Dynamic Form">
+ <h1></h1>
+</div>
+-->
+
+<div class="row">
+ <div class="col-md-12">
+ <h2>Dynamic Form</h2>
+
+<p>Zeppelin dynamically creates input forms. Depending on language backend,
there're two different ways to create dynamic form.
+Custom language backend can select which type of form creation it wants to
use.</p>
+
+<p><br /></p>
+
+<h3>Using form Templates</h3>
+
+<p>This mode creates form using simple template language. It's simple and
easy to use. For example Markdown, Shell, SparkSql language backend uses it.</p>
+
+<p><br /></p>
+
+<h4>Text input form</h4>
+
+<p>To create text input form, use <em>${formName}</em> templates.</p>
+
+<p>for example</p>
+
+<p><img src="../../assets/themes/zeppelin/img/screenshots/form_input.png"
/></p>
+
+<p>Also you can provide default value, using
<em>${formName=defaultValue}</em>.</p>
+
+<p><img
src="../../assets/themes/zeppelin/img/screenshots/form_input_default.png" /></p>
+
+<p><br /></p>
+
+<h4>Select form</h4>
+
+<p>To create select form, use
<em>${formName=defaultValue,option1|option2...}</em></p>
+
+<p>for example</p>
+
+<p><img src="../../assets/themes/zeppelin/img/screenshots/form_select.png"
/></p>
+
+<p>Also you can separate option's display name and value, using
<em>${formName=defaultValue,option1(DisplayName)|option2(DisplayName)...}</em></p>
+
+<p><img
src="../../assets/themes/zeppelin/img/screenshots/form_select_displayname.png"
/></p>
+
+<p><br /></p>
+
+<h3>Creates Programmatically</h3>
+
+<p>Some language backend uses programmatic way to create form. For example <a
href="./interpreter/spark.html#zeppelincontext">ZeppelinContext</a> provides
form creation API</p>
+
+<p>Here're some examples.</p>
+
+<p>Text input form</p>
+
+<p><img src="../../assets/themes/zeppelin/img/screenshots/form_input_prog.png"
/></p>
+
+<p>Text input form with default value</p>
+
+<p><img
src="../../assets/themes/zeppelin/img/screenshots/form_input_default_prog.png"
/></p>
+
+<p>Select form</p>
+
+<p><img
src="../../assets/themes/zeppelin/img/screenshots/form_select_prog.png" /></p>
+
+ </div>
+</div>
+
+
+ <hr>
+ <footer>
+ <!-- <p>© 2015 The Apache Software Foundation</p>-->
+ </footer>
+ </div>
+
+
+ <script src="https://code.jquery.com/jquery-1.10.2.min.js";></script>
+
+ <script
src="/assets/themes/zeppelin/bootstrap/js/bootstrap.min.js"></script>
+ </body>
+</html>
+
Added: incubator/zeppelin/site/docs/manual/notebookashomepage.html
URL:
http://svn.apache.org/viewvc/incubator/zeppelin/site/docs/manual/notebookashomepage.html?rev=1696495&view=auto
==============================================================================
--- incubator/zeppelin/site/docs/manual/notebookashomepage.html (added)
+++ incubator/zeppelin/site/docs/manual/notebookashomepage.html Tue Aug 18
20:17:23 2015
@@ -0,0 +1,396 @@
+
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Notebook as Homepage</title>
+ <meta name="description" content="">
+ <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]-->
+
+ <!-- Le styles -->
+ <link href="/assets/themes/zeppelin/bootstrap/css/bootstrap.css"
rel="stylesheet">
+ <link href="/assets/themes/zeppelin/css/style.css?body=1" rel="stylesheet"
type="text/css">
+ <link href="/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">
+ -->
+
+ <!-- atom & rss feed -->
+ <link href="/atom.xml" type="application/atom+xml" rel="alternate"
title="Sitewide ATOM Feed">
+ <link href="/rss.xml" type="application/rss+xml" rel="alternate"
title="Sitewide RSS Feed">
+ </head>
+
+ <body>
+
+ <div 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>
+ <a class="navbar-brand" href="/">
+ <img src="/assets/themes/zeppelin/img/zeppelin_logo.png"
width="50" alt="I'm zeppelin">
+ Apache Zeppelin <small>(incubating)</small>
+ </a>
+ </div>
+ <nav class="navbar-collapse collapse" role="navigation">
+ <ul class="nav navbar-nav">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ </ul>
+ <ul class="nav navbar-nav navbar-right">
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li><a href="/community.html">Community</a></li>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li><a href="/docs/index.html">Docs</a></li>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li><a href="/download.html">Download</a></li>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li><a
href="https://github.com/apache/incubator-zeppelin";>GitHub</a></li>
+ <li id="apache">
+ <a href="#" data-toggle="dropdown"
class="dropdown-toggle">Apache<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a
href="http://www.apache.org/foundation/how-it-works.html";>Apache Software
Foundation</a></li>
+ <li><a href="http://www.apache.org/licenses/";>Apache
License</a></li>
+ <li><a
href="http://www.apache.org/foundation/sponsorship.html";>Sponsorship</a></li>
+ <li><a
href="http://www.apache.org/foundation/thanks.html";>Thanks</a></li>
+ </ul>
+ </li>
+ </ul>
+ </nav><!--/.navbar-collapse -->
+ </div>
+ </div>
+
+
+
+
+ <div class="container">
+
+<!--<div class="hero-unit Notebook as Homepage">
+ <h1></h1>
+</div>
+-->
+
+<div class="row">
+ <div class="col-md-12">
+ <h2>Customize your zeppelin homepage</h2>
+
+<p>Zeppelin allows you to use one of the notebooks you create as your zeppelin
Homepage.
+ With that you can brand your zeppelin installation,
+ adjust the instruction to your users needs and even translate to other
languages.</p>
+
+<p><br /></p>
+
+<h3>How to set a notebook as your zeppelin homepage</h3>
+
+<p>The process for creating your homepage is very simple as shown below:</p>
+
+<ol>
+<li>Create a notebook using zeppelin</li>
+<li>Set the notebook id in the config file</li>
+<li><p>Restart zeppelin</p>
+
+<p><br /></p>
+
+<h4>Create a notebook using zeppelin</h4>
+
+<p>Create a new notebook using zeppelin,
+you can use <code>%md</code> interpreter for markdown content or any other
interpreter you like.</p>
+
+<p>You can also use the display system to generate <a
href="../displaysystem/display.html">text</a>,
+<a href="../displaysystem/display.html#html">html</a>,<a
href="../displaysystem/table.html">table</a> or
+<a href="../displaysystem/angular.html">angular</a></p>
+
+<p>Run (shift+Enter) the notebook and see the output. Optionally, change the
notebook view to report to hide
+the code sections.</p>
+
+<p><br /></p>
+
+<h4>Set the notebook id in the config file</h4>
+
+<p>To set the notebook id in the config file you should copy it from the last
word in the notebook url </p>
+
+<p>for example</p>
+
+<p><img
src="../../assets/themes/zeppelin/img/screenshots/homepage_notebook_id.png"
/></p>
+
+<p>Set the notebook id to the <code>ZEPPELIN_NOTEBOOK_HOMESCREEN</code>
environment variable
+or <code>zeppelin.notebook.homescreen</code> property. </p>
+
+<p>You can also set the <code>ZEPPELIN_NOTEBOOK_HOMESCREEN_HIDE</code>
environment variable
+or <code>zeppelin.notebook.homescreen.hide</code> property to hide the new
notebook from the notebook list.</p>
+
+<p><br /></p>
+
+<h4>Restart zeppelin</h4>
+
+<p>Restart your zeppelin server</p>
+<div class="highlight"><pre><code class="text language-text"
data-lang="text">./bin/zeppelin-deamon stop
+./bin/zeppelin-deamon start
+</code></pre></div>
+<h4>That's it! Open your browser and navigate to zeppelin and see your
customized homepage...</h4></li>
+</ol>
+
+<p><br /></p>
+
+<h3>Show notebooks list in your custom homepage</h3>
+
+<p>If you want to display the list of notebooks on your custom zeppelin
homepage all
+you need to do is use our %angular support.</p>
+
+<p><br />
+ Add the following code to a paragraph in you home page and run it... walla!
you have your notebooks list.</p>
+<div class="highlight"><pre><code class="javascript language-javascript"
data-lang="javascript"> <span class="nx">println</span><span class="p">(</span>
+ <span class="s2">"""%angular </span>
+<span class="s2"> <div class="</span><span
class="nx">col</span><span class="o">-</span><span class="nx">md</span><span
class="o">-</span><span class="mi">4</span><span class="s2">"
ng-controller="</span><span class="nx">HomeCtrl</span> <span
class="nx">as</span> <span class="nx">home</span><span
class="s2">"></span>
+<span class="s2"> <h4>Notebooks</h4></span>
+<span class="s2"> <div></span>
+<span class="s2"> <h5><a href=""
data-toggle="</span><span class="nx">modal</span><span class="s2">"
data-target="</span><span class="err">#</span><span
class="nx">noteNameModal</span><span class="s2">" style="</span><span
class="nx">text</span><span class="o">-</span><span
class="nx">decoration</span><span class="o">:</span> <span
class="nx">none</span><span class="p">;</span><span class="s2">"></span>
+<span class="s2"> <i style="</span><span
class="nx">font</span><span class="o">-</span><span class="nx">size</span><span
class="o">:</span> <span class="mi">15</span><span class="nx">px</span><span
class="p">;</span><span class="s2">" class="</span><span
class="nx">icon</span><span class="o">-</span><span
class="nx">notebook</span><span class="s2">"></i> Create new
note</a></h5></span>
+<span class="s2"> <ul style="</span><span
class="nx">list</span><span class="o">-</span><span
class="nx">style</span><span class="o">-</span><span
class="nx">type</span><span class="o">:</span> <span
class="nx">none</span><span class="p">;</span><span class="s2">"></span>
+<span class="s2"> <li ng-repeat="</span><span
class="nx">note</span> <span class="k">in</span> <span
class="nx">home</span><span class="p">.</span><span
class="nx">notes</span><span class="p">.</span><span class="nx">list</span>
<span class="nx">track</span> <span class="nx">by</span> <span
class="nx">$index</span><span class="s2">"><i
style="</span><span class="nx">font</span><span class="o">-</span><span
class="nx">size</span><span class="o">:</span> <span class="mi">10</span><span
class="nx">px</span><span class="p">;</span><span class="s2">"
class="</span><span class="nx">icon</span><span class="o">-</span><span
class="nx">doc</span><span class="s2">"></i></span>
+<span class="s2"> <a style="</span><span
class="nx">text</span><span class="o">-</span><span
class="nx">decoration</span><span class="o">:</span> <span
class="nx">none</span><span class="p">;</span><span class="s2">"
href="</span><span class="err">#</span><span class="o">/</span><span
class="nx">notebook</span><span class="o">/</span><span
class="s2">"></a></span>
+<span class="s2"> </li></span>
+<span class="s2"> </ul></span>
+<span class="s2"> </div></span>
+<span class="s2"> </div></span>
+<span class="s2"> """</span><span class="p">)</span>
+</code></pre></div>
+<p>After running the notebook you will see output similar to this one:
+ <img
src="../../assets/themes/zeppelin/img/screenshots/homepage_notebook_list.png"
/></p>
+
+<p>The main trick here relays in linking the <code><div></code> to the
controller:</p>
+<div class="highlight"><pre><code class="javascript language-javascript"
data-lang="javascript"> <span class="o"><</span><span class="nx">div</span>
<span class="kr">class</span><span class="o">=</span><span
class="s2">"col-md-4"</span> <span class="nx">ng</span><span
class="o">-</span><span class="nx">controller</span><span
class="o">=</span><span class="s2">"HomeCtrl as home"</span><span
class="o">></span>
+</code></pre></div>
+<p>Once we have <code>home</code> as our controller variable in our
<code><div></div></code>
+ we can use <code>home.notes.list</code> to get access to the notebook
list.</p>
+
+ </div>
+</div>
+
+
+ <hr>
+ <footer>
+ <!-- <p>© 2015 The Apache Software Foundation</p>-->
+ </footer>
+ </div>
+
+
+ <script src="https://code.jquery.com/jquery-1.10.2.min.js";></script>
+
+ <script
src="/assets/themes/zeppelin/bootstrap/js/bootstrap.min.js"></script>
+ </body>
+</html>
+
