You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by mo...@apache.org on 2015/08/18 22:13:32 UTC
incubator-zeppelin git commit: Add 'Notebook as Homepage' page to the
manual
Repository: incubator-zeppelin
Updated Branches:
refs/heads/gh-pages a322528c2 -> 1179e9083
Add 'Notebook as Homepage' page to the manual
This pull request add the 'Notebook as Homepage' to the manual section and re-arrange the manual to a separate directory.
Author: eranwitkon <go...@gmail.com>
Closes #214 from eranwitkon/gh-pages and squashes the following commits:
7225513 [eranwitkon] Add note about how to run Zeppelin server in development mode
100f947 [eranwitkon] fiz typo in docs/manual/notebookashomepage.md
edc6404 [eranwitkon] Add 'Notebook as Homepage' page to the manual and rearrange manual section to a separate directory
Project: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/commit/1179e908
Tree: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/tree/1179e908
Diff: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/diff/1179e908
Branch: refs/heads/gh-pages
Commit: 1179e90834674f5c97db2c2d544f2b0c687a4a8a
Parents: a322528
Author: eranwitkon <go...@gmail.com>
Authored: Mon Aug 17 15:41:49 2015 +0300
Committer: Lee moon soo <mo...@apache.org>
Committed: Tue Aug 18 13:13:28 2015 -0700
----------------------------------------------------------------------
.../img/screenshots/homepage_notebook_id.png | Bin 0 -> 18950 bytes
.../img/screenshots/homepage_notebook_list.png | Bin 0 -> 35186 bytes
docs/development/howtocontribute.md | 1 +
docs/dynamicform.md | 65 -------------
docs/index.md | 3 +-
docs/manual/dynamicform.md | 65 +++++++++++++
docs/manual/notebookashomepage.md | 96 +++++++++++++++++++
7 files changed, 164 insertions(+), 66 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/1179e908/assets/themes/zeppelin/img/screenshots/homepage_notebook_id.png
----------------------------------------------------------------------
diff --git a/assets/themes/zeppelin/img/screenshots/homepage_notebook_id.png b/assets/themes/zeppelin/img/screenshots/homepage_notebook_id.png
new file mode 100644
index 0000000..ac6ceef
Binary files /dev/null and b/assets/themes/zeppelin/img/screenshots/homepage_notebook_id.png differ
http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/1179e908/assets/themes/zeppelin/img/screenshots/homepage_notebook_list.png
----------------------------------------------------------------------
diff --git a/assets/themes/zeppelin/img/screenshots/homepage_notebook_list.png b/assets/themes/zeppelin/img/screenshots/homepage_notebook_list.png
new file mode 100644
index 0000000..a5ac6f2
Binary files /dev/null and b/assets/themes/zeppelin/img/screenshots/homepage_notebook_list.png differ
http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/1179e908/docs/development/howtocontribute.md
----------------------------------------------------------------------
diff --git a/docs/development/howtocontribute.md b/docs/development/howtocontribute.md
index b2eea1e..0de1e78 100644
--- a/docs/development/howtocontribute.md
+++ b/docs/development/howtocontribute.md
@@ -76,6 +76,7 @@ mvn install -Dspark.version=1.0.1 -Dhadoop.version=2.2.0
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=""
```
+NOTE: make sure you first run ```mvn clean install -DskipTests``` on your zeppelin root directory otherwise your server build will fail to find the required dependencies in the local repro
or use daemon script
http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/1179e908/docs/dynamicform.md
----------------------------------------------------------------------
diff --git a/docs/dynamicform.md b/docs/dynamicform.md
deleted file mode 100644
index 36d1a0c..0000000
--- a/docs/dynamicform.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-layout: page
-title: "Dynamic Form"
-description: ""
-group: manual
----
-{% include JB/setup %}
-
-
-## Dynamic Form
-
-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.
-
-<br />
-### Using form Templates
-
-This mode creates form using simple template language. It's simple and easy to use. For example Markdown, Shell, SparkSql language backend uses it.
-
-<br />
-#### Text input form
-
-To create text input form, use _${formName}_ templates.
-
-for example
-
-<img src="../assets/themes/zeppelin/img/screenshots/form_input.png" />
-
-
-Also you can provide default value, using _${formName=defaultValue}_.
-
-<img src="../assets/themes/zeppelin/img/screenshots/form_input_default.png" />
-
-
-<br />
-#### Select form
-
-To create select form, use _${formName=defaultValue,option1|option2...}_
-
-for example
-
-<img src="../assets/themes/zeppelin/img/screenshots/form_select.png" />
-
-Also you can separate option's display name and value, using _${formName=defaultValue,option1(DisplayName)|option2(DisplayName)...}_
-
-<img src="../assets/themes/zeppelin/img/screenshots/form_select_displayname.png" />
-
-<br />
-### Creates Programmatically
-
-Some language backend uses programmatic way to create form. For example [ZeppelinContext](./interpreter/spark.html#zeppelincontext) provides form creation API
-
-Here're some examples.
-
-Text input form
-
-<img src="../assets/themes/zeppelin/img/screenshots/form_input_prog.png" />
-
-Text input form with default value
-
-<img src="../assets/themes/zeppelin/img/screenshots/form_input_default_prog.png" />
-
-Select form
-
-<img src="../assets/themes/zeppelin/img/screenshots/form_select_prog.png" />
http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/1179e908/docs/index.md
----------------------------------------------------------------------
diff --git a/docs/index.md b/docs/index.md
index 8267685..d82b9dd 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -34,7 +34,8 @@ group: nav-right
### Manual
-* [Dynamic Form](./dynamicform.html)
+* [Dynamic Form](./manual/dynamicform.html)
+* [Notebook as Homepage](./manual/notebookashomepage.html)
### Development
http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/1179e908/docs/manual/dynamicform.md
----------------------------------------------------------------------
diff --git a/docs/manual/dynamicform.md b/docs/manual/dynamicform.md
new file mode 100644
index 0000000..2b58c93
--- /dev/null
+++ b/docs/manual/dynamicform.md
@@ -0,0 +1,65 @@
+---
+layout: page
+title: "Dynamic Form"
+description: ""
+group: manual
+---
+{% include JB/setup %}
+
+
+## Dynamic Form
+
+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.
+
+<br />
+### Using form Templates
+
+This mode creates form using simple template language. It's simple and easy to use. For example Markdown, Shell, SparkSql language backend uses it.
+
+<br />
+#### Text input form
+
+To create text input form, use _${formName}_ templates.
+
+for example
+
+<img src="../../assets/themes/zeppelin/img/screenshots/form_input.png" />
+
+
+Also you can provide default value, using _${formName=defaultValue}_.
+
+<img src="../../assets/themes/zeppelin/img/screenshots/form_input_default.png" />
+
+
+<br />
+#### Select form
+
+To create select form, use _${formName=defaultValue,option1|option2...}_
+
+for example
+
+<img src="../../assets/themes/zeppelin/img/screenshots/form_select.png" />
+
+Also you can separate option's display name and value, using _${formName=defaultValue,option1(DisplayName)|option2(DisplayName)...}_
+
+<img src="../../assets/themes/zeppelin/img/screenshots/form_select_displayname.png" />
+
+<br />
+### Creates Programmatically
+
+Some language backend uses programmatic way to create form. For example [ZeppelinContext](./interpreter/spark.html#zeppelincontext) provides form creation API
+
+Here're some examples.
+
+Text input form
+
+<img src="../../assets/themes/zeppelin/img/screenshots/form_input_prog.png" />
+
+Text input form with default value
+
+<img src="../../assets/themes/zeppelin/img/screenshots/form_input_default_prog.png" />
+
+Select form
+
+<img src="../../assets/themes/zeppelin/img/screenshots/form_select_prog.png" />
http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/1179e908/docs/manual/notebookashomepage.md
----------------------------------------------------------------------
diff --git a/docs/manual/notebookashomepage.md b/docs/manual/notebookashomepage.md
new file mode 100644
index 0000000..f1c0fae
--- /dev/null
+++ b/docs/manual/notebookashomepage.md
@@ -0,0 +1,96 @@
+---
+layout: page
+title: "Notebook as Homepage"
+description: ""
+group: manual
+---
+{% include JB/setup %}
+
+## Customize your zeppelin homepage
+ 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.
+
+ <br />
+### How to set a notebook as your zeppelin homepage
+
+The process for creating your homepage is very simple as shown below:
+
+ 1. Create a notebook using zeppelin
+ 2. Set the notebook id in the config file
+ 3. Restart zeppelin
+
+ <br />
+#### Create a notebook using zeppelin
+ Create a new notebook using zeppelin,
+ you can use ```%md``` interpreter for markdown content or any other interpreter you like.
+
+ You can also use the display system to generate [text](../displaysystem/display.html),
+ [html](../displaysystem/display.html#html),[table](../displaysystem/table.html) or
+ [angular](../displaysystem/angular.html)
+
+ Run (shift+Enter) the notebook and see the output. Optionally, change the notebook view to report to hide
+ the code sections.
+
+ <br />
+#### Set the notebook id in the config file
+ To set the notebook id in the config file you should copy it from the last word in the notebook url
+
+ for example
+
+ <img src="../../assets/themes/zeppelin/img/screenshots/homepage_notebook_id.png" />
+
+ Set the notebook id to the ```ZEPPELIN_NOTEBOOK_HOMESCREEN``` environment variable
+ or ```zeppelin.notebook.homescreen``` property.
+
+ You can also set the ```ZEPPELIN_NOTEBOOK_HOMESCREEN_HIDE``` environment variable
+ or ```zeppelin.notebook.homescreen.hide``` property to hide the new notebook from the notebook list.
+
+ <br />
+#### Restart zeppelin
+ Restart your zeppelin server
+
+ ```
+ ./bin/zeppelin-deamon stop
+ ./bin/zeppelin-deamon start
+ ```
+ ####That's it! Open your browser and navigate to zeppelin and see your customized homepage...
+
+
+<br />
+### Show notebooks list in your custom homepage
+If you want to display the list of notebooks on your custom zeppelin homepage all
+you need to do is use our %angular support.
+
+ <br />
+ Add the following code to a paragraph in you home page and run it... walla! you have your notebooks list.
+
+ ```javascript
+ println(
+ """%angular
+ <div class="col-md-4" ng-controller="HomeCtrl as home">
+ <h4>Notebooks</h4>
+ <div>
+ <h5><a href="" data-toggle="modal" data-target="#noteNameModal" style="text-decoration: none;">
+ <i style="font-size: 15px;" class="icon-notebook"></i> Create new note</a></h5>
+ <ul style="list-style-type: none;">
+ <li ng-repeat="note in home.notes.list track by $index"><i style="font-size: 10px;" class="icon-doc"></i>
+ <a style="text-decoration: none;" href="#/notebook/{{note.id}}">{{note.name || 'Note ' + note.id}}</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ """)
+ ```
+
+ After running the notebook you will see output similar to this one:
+ <img src="../../assets/themes/zeppelin/img/screenshots/homepage_notebook_list.png" />
+
+ The main trick here relays in linking the ```<div>``` to the controller:
+
+ ```javascript
+ <div class="col-md-4" ng-controller="HomeCtrl as home">
+ ```
+
+ Once we have ```home``` as our controller variable in our ```<div></div>```
+ we can use ```home.notes.list``` to get access to the notebook list.
\ No newline at end of file