From d80f661757a86abdb2a4fec137cc34aed6250e17 Mon Sep 17 00:00:00 2001
From: Seshu-Kumar-M <seshu.kumar.m@huawei.com>
Date: Thu, 2 Feb 2017 10:29:38 +0530
Subject: OPEN-O GUI Framework for container

sample code of OPEN-O GUI Framework for container.

Issue-Id : CLIENT-128

Change-Id: I9fe1bd1546aad06a5c2846913f0b2aeb36c386dd
Signed-off-by: Seshu-Kumar-M <seshu.kumar.m@huawei.com>
---
 .../webapp/usage guide/browser/templates/home.html | 154 +++++++++++++++++++++
 .../webapp/usage guide/browser/templates/list.html |  47 +++++++
 .../usage guide/browser/templates/login.html       |  40 ++++++
 .../usage guide/browser/templates/management.html  | 130 +++++++++++++++++
 .../browser/templates/notification.html            |  30 ++++
 .../browser/templates/radioButtons.html            |  28 ++++
 .../usage guide/browser/templates/register.html    |  47 +++++++
 .../usage guide/browser/templates/table.html       |  48 +++++++
 .../webapp/usage guide/browser/templates/tabs.html |  27 ++++
 .../usage guide/browser/templates/textarea.html    | 121 ++++++++++++++++
 .../webapp/usage guide/browser/templates/tree.html |  25 ++++
 11 files changed, 697 insertions(+)
 create mode 100644 common/src/main/webapp/usage guide/browser/templates/home.html
 create mode 100644 common/src/main/webapp/usage guide/browser/templates/list.html
 create mode 100644 common/src/main/webapp/usage guide/browser/templates/login.html
 create mode 100644 common/src/main/webapp/usage guide/browser/templates/management.html
 create mode 100644 common/src/main/webapp/usage guide/browser/templates/notification.html
 create mode 100644 common/src/main/webapp/usage guide/browser/templates/radioButtons.html
 create mode 100644 common/src/main/webapp/usage guide/browser/templates/register.html
 create mode 100644 common/src/main/webapp/usage guide/browser/templates/table.html
 create mode 100644 common/src/main/webapp/usage guide/browser/templates/tabs.html
 create mode 100644 common/src/main/webapp/usage guide/browser/templates/textarea.html
 create mode 100644 common/src/main/webapp/usage guide/browser/templates/tree.html

diff --git a/common/src/main/webapp/usage guide/browser/templates/home.html b/common/src/main/webapp/usage guide/browser/templates/home.html
new file mode 100644
index 00000000..796c82e1
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/home.html	
@@ -0,0 +1,154 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    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.
+
+-->
+
+<div class="homecontent center" ng-init="loadTemplate()">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-4 col-md-3 col-lg-3 rmpadding">
+                <div id="menu_accordion" class="openoAccordian_accordionmenu">
+                    <div id="container" class="panel panel-default panelbr">
+                        <h5 class="panel-title">
+                            <a data-toggle="collapse" data-target="#panel1"><span>Container</span></a>
+                        </h5>
+                        <div id="panel1" class="panel-collapse collapse in">
+                            <ul>
+                                <li>
+                                    <a ui-sref=".tree" ui-sref-active="link_active">Tree</a>
+                                </li>
+                                <li>
+                                    <a ui-sref=".accordion" ui-sref-active="link_active">Accordian</a>
+                                </li>
+                                <li>
+                                    <a ui-sref=".tabs" ui-sref-active="link_active">Tabs</a>
+                                </li>
+                                <li>
+                                    <a ui-sref=".vtabs" ui-sref-active="link_active">Vertical Tab</a>
+                                </li>
+                                <li>
+                                    <a ui-sref=".table" ui-sref-active="link_active">Table</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div id="widgets" class="panel panel-default panelbr">
+                        <h5 class="panel-title">
+                            <a data-toggle="collapse" data-target="#panel2"><span>Widgets</span></a>
+                        </h5>
+                        <div id="panel2" class="panel-collapse collapse in">
+                            <li>
+                                <a ui-sref=".buttons" ui-sref-active="link_active">Buttons</a>
+                            </li>
+                            <li>
+                                <a ui-sref=".dropdown" ui-sref-active="link_active">Drop Down</a>
+                            </li>
+                            <li>
+                                <a ui-sref=".radiobuttons" ui-sref-active="link_active">Radio Button</a>
+                            </li>
+                            <li>
+                                <a ui-sref=".checkboxes" ui-sref-active="link_active">Check Box</a>
+                            </li>
+                            <li>
+                                <a ui-sref=".tooltip" ui-sref-active="link_active">Text Fields</a>
+                            </li>
+                            <li>
+                                <a ui-sref=".list" ui-sref-active="link_active">List</a>
+                            </li>
+                            <li>
+                                <a ui-sref=".provinceMgmt" ui-sref-active="link_active">Management</a>
+                            </li>
+                        </div>
+                    </div>
+                    <div id="notifications" class="panel panel-default panelbr">
+                        <h5 class="panel-title">
+
+                            <a ui-sref=".notification" ui-sref-active="noChid_link_active">Notification & Messages</a>
+                        </h5>
+                    </div>
+                    <div id="functional" class="panel panel-default panelbr">
+                        <h5 class="panel-title">
+
+                            <a ui-sref=".functional" ui-sref-active="noChid_link_active">Functional Flow</a>
+
+                        </h5>
+                    </div>
+
+                </div>
+                <!--<div id="accordionmenuid" allow-resize="true" dataset="dataArr" height="resHeight"
+                     listeners="callBacklisteners" resize-callback="resizehandler"
+                     current-select="currentselect" click="clickHandler"
+                     class="ng-isolate-scope accordion_parent openo_accordion_main_menu">
+                    <div class="openo-accordion-resizable-handle" style="cursor: auto;"></div>
+                    <ul id="accordionmenuid_ul" class="openoAccordian_accordionmenu">
+                        <li id="accordionmenuid_ul_0_0_brAppTopMenuID" nodeid="brAppTopMenuID">
+                            &lt;!&ndash;<span class="openo_accordion_ui-icon-expand" style="padding-left: 20px;cursor: pointer;"></span>&ndash;&gt;
+                            <span class="openoAccordian_showHideArrow_hide" id="accordionmenuid_arrow" style="cursor: pointer;"></span>
+                            <a title="brApp" class="header opened" style="padding-left: 10px; cursor: pointer;">Container</a>
+                            <ul>
+                                <li nodeid="brAppSiteMenuID" class="" style="display: list-item;">
+                                    <a ui-sref=".tree" ui-sref-active="link_active" class="" style="padding-left: 62px;">Tree</a>
+                                </li>
+                                <li nodeid="brAppMeMenuID" style="display: list-item;">
+                                    <a ui-sref=".accordion" ui-sref-active="link_active" style="padding-left: 62px;">Accordian</a>
+                                </li>
+                                <li nodeid="brAppTpMenuID" style="display: list-item;">
+                                    <a ui-sref=".tabs" ui-sref-active="link_active" style="padding-left: 62px;">Tabs</a>
+                                </li>
+                                <li nodeid="brAppTlMenuID" style="display: list-item;">
+                                    <a ui-sref=".vtabs" ui-sref-active="link_active" style="padding-left: 62px;">Vertical Tab</a>
+                                </li>
+                                <li nodeid="brAppTlMenuID" style="display: list-item;">
+                                    <a ui-sref=".table" ui-sref-active="link_active" style="padding-left: 62px;">Table</a>
+                                </li>
+                            </ul>
+                            <a title="brApp" class="header opened" style="padding-left: 10px; cursor: pointer;">Widgets</a>
+                            <ul>
+                                <li nodeid="brAppSiteMenuID" class="" style="display: list-item;">
+                                    <a ui-sref=".buttons" ui-sref-active="link_active" style="padding-left: 62px;">Buttons</a>
+                                </li>
+                                <li nodeid="brAppMeMenuID" style="display: list-item;">
+                                    <a ui-sref=".dropdown" ui-sref-active="link_active" style="padding-left: 62px;">Drop Down</a>
+                                </li>
+                                <li nodeid="brAppTpMenuID" style="display: list-item;">
+                                    <a ui-sref=".radiobuttons" ui-sref-active="link_active" style="padding-left: 62px;">Radio Button</a>
+                                </li>
+                                <li nodeid="brAppTlMenuID" style="display: list-item;">
+                                    <a ui-sref=".checkboxes" ui-sref-active="link_active" style="padding-left: 62px;">Check Box</a>
+                                </li>
+                                <li nodeid="brAppTlMenuID" style="display: list-item;">
+                                    <a ui-sref=".tooltip" ui-sref-active="link_active" style="padding-left: 62px;">Tool Tip</a>
+                                </li>
+                                <li nodeid="brAppTlMenuID" style="display: list-item;">
+                                    <a ui-sref=".list" ui-sref-active="link_active" style="padding-left: 62px;">List</a>
+                                </li>
+                                </li>
+
+                            </ul>
+                            <a ui-sref=".notification" ui-sref-active="link_active" class="header opened" style="padding-left: 10px; cursor: pointer;">Notification & Messages</a>
+                            <a ui-sref=".functional" ui-sref-active="link_active" class="header opened" style="padding-left: 10px; cursor: pointer;">Functional Flow</a>
+
+                        </li>
+                    </ul>
+                </div>-->
+            </div>
+            <div id="rightContainer" class="col-sm-8 col-md-9 col-lg-9">
+                <!--<div id="sampleArea"></div>-->
+                <ui-view></ui-view>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/common/src/main/webapp/usage guide/browser/templates/list.html b/common/src/main/webapp/usage guide/browser/templates/list.html
new file mode 100644
index 00000000..1051a6ac
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/list.html	
@@ -0,0 +1,47 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    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.
+
+-->
+
+<div class="container col-sm-12 col-md-12 col-lg-12">
+    <h4>{{message}}</h4>
+
+    <div id="listArea" class="container col-sm-12 col-md-12 col-lg-12" ng-init="init()">
+        <div id="list1" class="list col-sm-4 col-md-4 col-lg-4">
+            <div ng-repeat="item in mainlistItem">
+                <button type="button" class="btn btn-primary btn-block" ng-click="loadSubMenuPage($index)">{{item.title}}</button>
+            </div>
+        </div>
+        <div id="list2" class="list col-sm-4 col-md-4 col-lg-4">
+            <div ng-repeat="subitem in subMenuListItem">
+                <button type="button" class="btn btn-primary btn-block" ng-click="loadSubSubMenuPage($index)">{{subitem.title}}</button>
+            </div>
+        </div>
+        <div id="list3" class="list col-sm-4 col-md-4 col-lg-4">
+            <div ng-repeat="subsubitem in subsubMenuListItem">
+                <button type="button" class="btn btn-primary btn-block">{{subsubitem.title}}</button>
+            </div>
+        </div>
+
+    </div>
+
+    <!--    <test method='parentClick()'></test>-->
+    <div class="col-sm-12 col-md-12 col-lg-12 shortnote">
+        <div class="shortnoteHeader">Usage</div>
+        <div class="shortnoteText">{{listTipData}}</div>
+    </div>
+</div>
+
diff --git a/common/src/main/webapp/usage guide/browser/templates/login.html b/common/src/main/webapp/usage guide/browser/templates/login.html
new file mode 100644
index 00000000..026b670d
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/login.html	
@@ -0,0 +1,40 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    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.
+
+-->
+
+<div class="col-sm-offset-3 col-sm-6 col-md-offset-3 col-md-6 col-lg-offset-4 col-lg-4">
+    <h3>Login</h3>
+
+    <form ng-submit="formSubmit()" class="form">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+            <div class="form-group">
+                <input type="text" class="form-control" ng-model="user.username" placeholder="username" required=""/>
+            </div>
+
+            <div class="form-group">
+                <input type="password" class="form-control" ng-model="user.password" placeholder="password" required=""/>
+            </div>
+
+            <div class="form-group">
+                <button type="submit" class="btn btn-success">Login</button>
+                <span class="text-danger">{{ error }}</span>
+            </div>
+            <a ui-sref="register">Register</a>
+
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/common/src/main/webapp/usage guide/browser/templates/management.html b/common/src/main/webapp/usage guide/browser/templates/management.html
new file mode 100644
index 00000000..5afca760
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/management.html	
@@ -0,0 +1,130 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    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.
+
+-->
+
+<h4>{{message}}</h4>
+<br><br>
+<div id="provinceAction" ng-init="init()">
+    <!--<button ng-click="showAddModal()" class="btnDefault pull-left">Add</button>-->
+    <!--<button ng-click="deleteData()" class="btnDefault pull-left prvdel">Delete Selected</button>-->
+</div>
+<br>
+<br>
+<!--<table id="provinceTable" class="table table-bordered table-striped">
+    <tr>
+        <th class="chkboxAlign"><input type="checkbox"  ng-model="selectAll" ng-click="checkAll()" /></th>
+        <th>Province Name</th>
+        <th>IP Address</th>
+        <th>Port</th>
+        <th></th>
+    </tr>
+    <tr ng-repeat="data in provinceData">
+        <td>
+            <input type="checkbox" ng-model="data.select">&lt;!&ndash;ng-true-value="'data.id'" ng-false-value="''"  ng-model="province.rows[$index]"&ndash;&gt;
+        </td>
+        <td class="tableAlign">{{data.province_name}}</td>
+        <td class="tableAlign">{{data.ip}}</td>
+        <td class="tableAlign">{{data.port}}</td>
+        <td>
+            <span class="pull-right glyphicon glyphicon-edit" ng-click="editData(data.id)" style="cursor: pointer;margin: 0 5px"></span>
+            <span class="pull-right glyphicon glyphicon-trash" ng-click="editData(data.id)" style="cursor: pointer;margin: 0 5px"></span>
+        </td>
+    </tr>
+</table>-->
+
+<table ng-table="tableParams" class="table table-bordered table-striped customtable" show-filter="true">
+    <tr ng-repeat="provinceData in $data">
+        <td header="'ng-table/headers/checkbox.html'">
+            <input type="checkbox" ng-model="checkboxes.items[provinceData.id]" />
+        </td>
+        <td title="'Name'" filter="{ province_name: 'text'}" sortable="'province_name'">
+            {{provinceData.province_name}}
+        </td>
+        <td title="'IP Address'" filter="{ ip: 'text'}" sortable="'ip'">
+            {{provinceData.ip}}
+        </td>
+        <td title="'Port'" filter="{ port: 'number'}" sortable="'port'">
+            {{provinceData.port}}
+        </td>
+        <td title="'Action'">
+            <span class="pull-right glyphicon glyphicon-edit" ng-click="editData(provinceData.id)" style="cursor: pointer;margin: 0 5px"></span>
+            <span class="pull-right glyphicon glyphicon-trash" ng-click="deleteIndividualData(provinceData.id)" style="cursor: pointer;margin: 0 5px"></span>
+        </td>
+    </tr>
+</table>
+
+
+<script type="text/ng-template" id="ng-table/headers/checkbox.html">
+    <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />
+</script>
+
+<div id="myTable"></div>
+
+
+<!-- Modal -->
+<div id="myModal" class="modal fade" role="dialog">
+    <div class="modal-dialog">
+
+        <!-- Modal content-->
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+                <h5 class="modal-title titlestyle">Modal Header</h5>
+            </div>
+            <form name="provinceForm" method="post"><!-- ng-submit="saveData(province.id)"-->
+                <div class="modal-body">
+
+                    <div class="form-group row">
+                        <label class="col-xs-4 col-form-label labelstyle">Name</label>
+                        <div class="col-xs-8 provinceName" >
+                            <!--<input class="form-control" ng-model="province.province_name" type="text" value="" placeholder="Province Name" id="pname" required><br>-->
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <label class="col-xs-4 col-form-label labelstyle">IP Address</label>
+                        <div class="col-xs-8 ipAddress" >
+                            <!--<input class="form-control" ng-model="province.ip" type="ipv4" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" value="" placeholder="IP Address" id="ipaddress" required><br>-->
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <label for="port" class="col-xs-4 col-form-label labelstyle">Port</label>
+                        <div class="col-xs-8 port" >
+                            <!--<input class="form-control" ng-model="province.port" type="number" value="" placeholder="Port" id="port"  required>-->
+
+                        </div>
+                    </div>
+
+                    <!--<input type="submit" class="btn btn-default" value="validate"/>-->
+
+                </div>
+
+                <div id="footerBtns" class="modal-footer">
+                    <!--<button type="button" class="btn btn-default" ng-click="addData(province._id)" data-dismiss="modal" ng-disabled="provinceForm.$invalid">OK</button>-->
+                    <!--<input type="submit" class="btn btn-default" value="Submit"/>-->
+                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
+                </div>
+            </form>
+        </div>
+
+
+    </div>
+</div>
+
+<div class="shortnote">
+    <div class="shortnoteHeader">Usage</div>
+    <div class="shortnoteText"> {{provinceTipData}}</div>
+</div>
diff --git a/common/src/main/webapp/usage guide/browser/templates/notification.html b/common/src/main/webapp/usage guide/browser/templates/notification.html
new file mode 100644
index 00000000..86d640ca
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/notification.html	
@@ -0,0 +1,30 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    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.
+
+-->
+
+<h4>{{message}}</h4>
+
+<div id="notificationArea" ng-init="init()">
+    <button type="button" class="btn btn-default" ng-click="showError()">Error</button>
+    <button type="button" class="btn btn-default" ng-click="showWarning()">Warning</button>
+    <button type="button" class="btn btn-default" ng-click="showInfo()">Information</button>
+    <button type="button" class="btn btn-default" ng-click="showConfirm()">Confirm</button>
+    <div class="shortnote">
+        <div class="shortnoteHeader">Usage</div>
+        <div class="shortnoteText">{{notificationTipData}}</div>
+    </div>
+</div>
diff --git a/common/src/main/webapp/usage guide/browser/templates/radioButtons.html b/common/src/main/webapp/usage guide/browser/templates/radioButtons.html
new file mode 100644
index 00000000..d0ae5331
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/radioButtons.html	
@@ -0,0 +1,28 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    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.
+
+-->
+
+
+<h4>Radio Buttons</h4>
+
+<div id="radioBtnArea"  ng-init="init()"></div>
+<div class="shortnote">
+    <div class="shortnoteHeader">Usage</div>
+    <div class="shortnoteText">{{radioTipData}}</div>
+</div>
+
+
diff --git a/common/src/main/webapp/usage guide/browser/templates/register.html b/common/src/main/webapp/usage guide/browser/templates/register.html
new file mode 100644
index 00000000..ff934267
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/register.html	
@@ -0,0 +1,47 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    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.
+
+-->
+
+<div class="col-sm-offset-3 col-sm-6 col-md-offset-3 col-md-6 col-lg-offset-4 col-lg-4">
+    <h3>Register</h3>
+
+    <form ng-submit="formSubmit()" class="form">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+            <div class="form-group">
+                <input type="text" class="form-control" ng-model="user.username" placeholder="Username" required=""/>
+            </div>
+
+            <div class="form-group">
+                <input type="email" class="form-control" ng-model="user.email" placeholder="Email" required=""/>
+            </div>
+
+            <div class="form-group">
+                <input type="password" class="form-control" ng-model="user.password" placeholder="Password" required=""/>
+            </div>
+
+            <div class="form-group">
+                <input type="password" class="form-control" ng-model="user.confpassword" placeholder="Confirm password" required=""/>
+            </div>
+
+            <div class="form-group">
+                <button type="submit" class="btn btn-success">Register</button>
+            </div>
+            <a ui-sref="login">Login</a>
+
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/common/src/main/webapp/usage guide/browser/templates/table.html b/common/src/main/webapp/usage guide/browser/templates/table.html
new file mode 100644
index 00000000..592b66d5
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/table.html	
@@ -0,0 +1,48 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    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.
+
+-->
+
+<div class="container col-sm-12 col-md-12 col-lg-12">
+    <h4>{{message}}</h4>
+
+    <div id="tableArea" class="container col-sm-12 col-md-12 col-lg-12" ng-init="init()">
+
+        <h3 class="col-sm-12 col-md-12 col-lg-12">Basic Table<span> (with hover)</span></h3>
+        <div id="basictableArea" class="col-sm-12 col-md-12 col-lg-12"></div>
+
+        <h3 class="col-sm-12 col-md-12 col-lg-12">Stripped Table<span> (Condensed & with border)</span></h3>
+        <div id="strippedtableArea" class="col-sm-12 col-md-12 col-lg-12"></div>
+
+        <h3 class="col-sm-12 col-md-12 col-lg-12">Search Table</h3>
+        <div id="condensedtableArea" class="col-sm-12 col-md-12 col-lg-12">
+            <table ng-table="tableParams" class="table table-bordered table-striped customtable" show-filter="true">
+                <tr ng-repeat="siteData in $data">
+                    <td title="'Country'" filter="{ countryName: 'text'}" sortable="'countryName'">
+                        {{siteData.countryName}}
+                    </td>
+                    <td title="'Language'" filter="{ type: 'text'}" sortable="'type'">
+                        {{siteData.language}}
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+    <div class="col-sm-12 col-md-12 col-lg-12 shortnote">
+        <div class="shortnoteHeader">Usage</div>
+        <div class="shortnoteText">{{tableTipData}}</div>
+    </div>
+</div>
diff --git a/common/src/main/webapp/usage guide/browser/templates/tabs.html b/common/src/main/webapp/usage guide/browser/templates/tabs.html
new file mode 100644
index 00000000..1be3b968
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/tabs.html	
@@ -0,0 +1,27 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    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.
+
+-->
+
+<div class="container col-sm-12 col-md-12 col-lg-12">
+    <h4>{{message}}</h4>
+    <div id="tabArea" ng-init="init()"></div>
+
+    <div class="col-sm-12 col-md-12 col-lg-12 shortnote">
+        <div class="shortnoteHeader">Usage</div>
+        <div class="shortnoteText">{{tabTipData}}</div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/common/src/main/webapp/usage guide/browser/templates/textarea.html b/common/src/main/webapp/usage guide/browser/templates/textarea.html
new file mode 100644
index 00000000..b305b275
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/textarea.html	
@@ -0,0 +1,121 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    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.
+
+-->
+
+<h4>Text Area</h4>
+<body>
+<div name="myForm"  method="post">
+    <div class="form-group row">
+        <label for="fname" class="col-xs-2 col-form-label labelstyle">Text</label>
+        <div class="col-xs-10">
+            <div id="fname"></div>
+
+        </div>
+    </div>
+
+    <div class="form-group row">
+        <label for="email" class="col-xs-2 col-form-label labelstyle">Email</label>
+        <div class="col-xs-10">
+            <div id="email" ></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="url" class="col-xs-2 col-form-label labelstyle">URL</label>
+        <div class="col-xs-10">
+            <div id="url"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="password" class="col-xs-2 col-form-label labelstyle">Password</label>
+        <div class="col-xs-10">
+            <div id="password"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="numeric" class="col-xs-2 col-form-label labelstyle">Numeric</label>
+        <div class="col-xs-10">
+            <div id="numeric"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="dot" class="col-xs-2 col-form-label labelstyle">Date and time</label>
+        <div class="col-xs-10">
+            <div id="dot"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="dateinput" class="col-xs-2 col-form-label labelstyle">Date</label>
+        <div class="col-xs-10">
+            <div id="dateinput"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="monthinput" class="col-xs-2 col-form-label labelstyle">Month</label>
+        <div class="col-xs-10">
+            <div id="monthinput"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="weekinput" class="col-xs-2 col-form-label labelstyle">Week</label>
+        <div class="col-xs-10">
+            <div id="weekinput"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="timeinput" class="col-xs-2 col-form-label labelstyle">Time</label>
+        <div class="col-xs-10">
+            <div id="timeinput"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="ipv4" class="col-xs-2 col-form-label labelstyle">IPV4 Address</label>
+        <div class="col-xs-10">
+            <div id="ipv4"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="ipv6" class="col-xs-2 col-form-label labelstyle">IPV6 Address</label>
+        <div class="col-xs-10">
+            <div id="ipv6"></div>
+        </div>
+    </div>
+
+
+    <div class="form-group row">
+        <label for="textarea" class="col-xs-2 col-form-label labelstyle">Text Area</label>
+        <div class="col-xs-10">
+            <div id="textarea"></div>
+
+        </div>
+    </div>
+
+    <div class="form-group row">
+        <label for="note" class="col-xs-2 col-form-label labelstyle">Note</label>
+        <div class="col-xs-10">
+            <div id="note">
+            </div>
+
+        </div>
+    </div>
+
+</div>
+<div class="shortnote">
+    <div class="shortnoteHeader">Usage</div>
+    <div class="shortnoteText">{{toolTipData}}</div>
+</div>
+</body>
+
diff --git a/common/src/main/webapp/usage guide/browser/templates/tree.html b/common/src/main/webapp/usage guide/browser/templates/tree.html
new file mode 100644
index 00000000..fd2e8579
--- /dev/null
+++ b/common/src/main/webapp/usage guide/browser/templates/tree.html	
@@ -0,0 +1,25 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    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.
+
+-->
+
+<h4>{{message}}</h4>
+<div id="tree1" class="ztree" ng-init="init()"></div><!-- ng-if="treeLoaded()"-->
+
+<div class="shortnote">
+    <div class="shortnoteHeader">Usage</div>
+    <div class="shortnoteText">{{treeTip}}</div>
+</div>
-- 
cgit 1.2.3-korg