Upload the ESR GUI seed code

Issue-ID: AAI-68

Change-Id: Ia50ce0570c2fabecd77199d4e8454f56fe587c4e
Signed-off-by: lizi00164331 <li.zi30@zte.com.cn>

16 files changed, 504 insertions, 0 deletions

diff --git a/common/src/main/webapp/usageguide/appserver/data/accordionData.json b/common/src/main/webapp/usageguide/appserver/data/accordionData.json
new file mode 100644
index 0000000..367cf5f
--- /dev/null
+++ b/common/src/main/webapp/usageguide/appserver/data/accordionData.json
@@ -0,0 +1,24 @@
+{

+  "accordion_data": {

+    "items": [

+      {

+        "tabId": "tab1",

+        "header": "Tab1",

+        "isActive": true,

+        "msg": "This is in Collapsible Group 1 and this attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown."

+      },

+      {

+        "tabId": "tab2",

+        "header": "Tab2",

+        "isActive": false,

+        "msg": "This is in Collapsible Group 2 and this attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown."

+      },

+      {

+        "tabId": "tab3",

+        "header": "Tab3",

+        "isActive": false,

+        "msg": "This is in Collapsible Group 3 and this attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown."

+      }

+    ]

+  }

+}

diff --git a/common/src/main/webapp/usageguide/appserver/data/buttonsData.json b/common/src/main/webapp/usageguide/appserver/data/buttonsData.json
new file mode 100644
index 0000000..0176461
--- /dev/null
+++ b/common/src/main/webapp/usageguide/appserver/data/buttonsData.json
@@ -0,0 +1,30 @@
+{

+  "default_btn_data" : {

+    "def_button" : {"title":"Default"},

+    "def_print_button" : {"title":"Print", "type":"btn btn-default", "gType": "glyphicon-print", "iconPosition":"left"},

+    "def_print_button_right" : {"title":"Search", "type":"btn btn-default", "gType": "glyphicon-search", "iconPosition":"right"}

+  },

+

+  "visual_btn_data" : {

+    "vis_pri_btn_data" : {"title":"Primary", "type":"primary"},

+    "vis_sec_btn_data" : {"title":"Secondary", "type":"secondary"},

+    "vis_succ_btn_data" : {"title":"Success", "type":"success"},

+    "vis_inf_btn_data" : {"title":"Info", "type":"info"},

+    "vis_warn_btn_data" : {"title":"Warning", "type":"warning"},

+    "vis_dang_btn_data" : {"title":"Danger", "type":"danger"},

+    "vis_link_btn_data" : {"title":"Link", "type":"link"}

+  },

+

+  "diffSize_btn_data" : {

+    "size_small_btn_data" : {"title": "Small Button", "type": "primary", "size": "btn-sm"},

+    "size_large_btn_data" : {"title": "Large Button", "type": "primary", "size": "btn-lg"},

+    "size_block_btn_data" : {"title": "Large Block Button", "type": "primary", "size": "btn-lg btn-block"}

+  },

+

+  "icon_btn_data" : {

+    "search_icon_btn_data" : {"title": "Search Icon", "type": "btn-default", "gType": "glyphicon-search"},

+    "search_icon_styled_btn_data" : {"title": "Styled Search Icon", "type": "primary", "gType": "glyphicon-search"},

+    "print_icon_btn_data" : {"title": "Print", "type": "primary btn-lg", "gType": "glyphicon-print"}

+  }

+

+}

diff --git a/common/src/main/webapp/usageguide/appserver/data/checkboxData.json b/common/src/main/webapp/usageguide/appserver/data/checkboxData.json
new file mode 100644
index 0000000..cf8e78c
--- /dev/null
+++ b/common/src/main/webapp/usageguide/appserver/data/checkboxData.json
@@ -0,0 +1,8 @@
+{

+  "checkbox_default_data" : {"id":1, "label":"Default check box", "type":"default", "checked":true},

+  "checkbox_primary_data" : {"id":2, "label":"Primary check box", "type":"primary", "checked":false},

+  "checkbox_success_data" : {"id":3, "label":"Success check box", "type":"success", "checked":true},

+  "checkbox_danger_data" : {"id":4, "label":"Error check box", "type":"danger", "checked":true},

+  "checkbox_warn_data" : {"id":5, "label":"Warn check box", "type":"warning", "checked":false},

+  "checkbox_info_data" : {"id":6, "label":"Info check box", "type":"info", "checked":true}

+}
\ No newline at end of file
diff --git a/common/src/main/webapp/usageguide/appserver/data/dropdownData.json b/common/src/main/webapp/usageguide/appserver/data/dropdownData.json
new file mode 100644
index 0000000..43235d5
--- /dev/null
+++ b/common/src/main/webapp/usageguide/appserver/data/dropdownData.json
@@ -0,0 +1,18 @@
+{

+  "dropped_down_data" :{"title":"DropDown","position":"down", "items":[{"itemLabel": "Node JS"},{"itemLabel": "JS"}]},

+  "dropped_up_data" : {"title":"DropUp","position":"up", "items":[{"itemLabel": "PHP"},{"itemLabel": "ASP"}]},

+  "dropHeader_data" :{"title":"DropHeader","position":"down",

+    "items":[{"itemLabel": "Web UI", "isheader":true},

+      {"itemLabel": "HTML", "isheader":false},

+      {"itemLabel": "CSS", "isheader":false},

+      {"itemLabel": "JS", "isheader":false},

+      {"itemLabel": "Programming", "isheader":true},

+      {"itemLabel": "C", "isheader":false},

+      {"itemLabel": "C++", "isheader":false}]

+  },

+  "dropSimple_data" : {"title":"--Please Select--",

+    "items":[

+      {"itemLabel": "Cameras"},{"itemLabel": "Mobile Phones"},{"itemLabel": "Computers"},{"itemLabel": "Monitors"},{"itemLabel": "Tablets"},{"itemLabel": "Others"}

+    ]

+  }

+}
\ No newline at end of file
diff --git a/common/src/main/webapp/usageguide/appserver/data/functionalData.json b/common/src/main/webapp/usageguide/appserver/data/functionalData.json
new file mode 100644
index 0000000..35b66f4
--- /dev/null
+++ b/common/src/main/webapp/usageguide/appserver/data/functionalData.json
@@ -0,0 +1,6 @@
+{

+  "create_data" : {"title":"Create", "labels":[{"text": "Username", "input_id":"username", "type":"text"},{"text": "Password", "input_id":"username", "type":"password"}], "showClose":"true","closeBtnTxt":"Cancel","msg":"This is Create dialog box", "buttons":[{"text": "Ok"}]},

+  "modify_data" : {"title":"Modify", "labels":[{"text": "Username", "input_id":"username", "type":"text"},{"text": "Password", "input_id":"username", "type":"password"}], "showClose":"true","closeBtnTxt":"Cancel","msg":"This is Modify dialog box", "buttons":[{"text": "Ok"}]},

+  "delete_data" : {"title":"Delete", "showClose":"true","closeBtnTxt":"Cancel","msg":"This is Delete dialog box", "buttons":[{"text": "Ok"}]},

+  "workflow_data" : {"title":"Workflow","showClose":"true","closeBtnTxt":"Cancel","msg":"This is Workflow dialog box", "buttons":[{"text": "Ok"}]}

+}

diff --git a/common/src/main/webapp/usageguide/appserver/data/input.json b/common/src/main/webapp/usageguide/appserver/data/input.json
new file mode 100644
index 0000000..7126e78
--- /dev/null
+++ b/common/src/main/webapp/usageguide/appserver/data/input.json
@@ -0,0 +1 @@
+[{"name":"shahid","pswd":"shahid","email":"shahid@gmail.com"},{"name":"noor","pswd":"noor","email":"noor@lnt.com"}]
\ No newline at end of file
diff --git a/common/src/main/webapp/usageguide/appserver/data/list.json b/common/src/main/webapp/usageguide/appserver/data/list.json
new file mode 100644
index 0000000..505bbcc
--- /dev/null
+++ b/common/src/main/webapp/usageguide/appserver/data/list.json
@@ -0,0 +1,76 @@
+[

+  {

+    "id": "113",

+    "title": "Movies",

+     "subMenu": [

+       {

+         "title":"Sci-fi",

+         "subsubMenu":[

+           {"title":"Intersteller"},

+           {"title":"Inception"},

+           {"title":"The Arrival"},

+           {"title":"The Paycheck"}

+         ]

+       },

+       {

+         "title":"Animation",

+         "subsubMenu":[

+           {"title":"Big Hero"},

+           {"title":"Monster University"},

+           {"title":"Frozen"},

+           {"title":"Car"}

+         ]

+       },

+       {

+         "title":"Action",

+         "subsubMenu":[

+           {"title":"Mission Impossible"},

+           {"title":"The Expendables"}

+         ]

+       },

+       {

+         "title":"Horror",

+         "subsubMenu":[

+           {"title":"Evil Dead"},

+           {"title":"Anebelle"}

+         ]

+       },

+       {

+         "title":"Comedy",

+         "subsubMenu":[

+           {"title":"Superbad"},

+           {"title":"Airplane"},

+           {"title":"Clueless"}

+         ]

+       }

+     ]

+  },

+  {

+    "id": "211",

+    "title": "Games",

+    "subMenu": [{"title":"Outdoor Games", "subsubMenu":[{"title":"Cricket"},{"title":"Football"}, {"title":"Volleyball"}, {"title":"Hockey"}]}, {"title":"Indoor Games", "subsubMenu":[{"title":"Carroms"},{"title":"Table Tennis"}]}, {"title":"Puzzles", "subsubMenu":[{"title":"Sudoku"},{"title":"Chess"}]}, {"title":"Card Games", "subsubMenu":[{"title":"UNO"},{"title":"RUMMY"}]}]

+  },

+  {

+    "id": "037",

+    "title": "Animals",

+    "subMenu": [{"title":"Mammals", "subsubMenu":[{"title":"Monkey"},{"title":"Elephant"}]}, {"title":"Birds", "subsubMenu":[{"title":"Parrot"},{"title":"Ostrich"},{"title":"Eagle"}]}, {"title":"Reptiles", "subsubMenu":[{"title":"Snake"},{"title":"Lizard"},{"title":"Cameleon"}]}]

+  },

+  {

+    "id": "127",

+    "title": "Vehicles",

+    "subMenu": [{"title":"Cars", "subsubMenu":[{"title":"Audi"},{"title":"Range Rover"}]}, {"title":"Bikes", "subsubMenu":[{"title":"Apache"},{"title":"Pulsar"},{"title":"FZ"},{"title":"Jupiter"},{"title":"Victor"},{"title":"Avengers"}]}, {"title":"Cycles", "subsubMenu":[{"title":"Hero"},{"title":"Lady Bird"},{"title":"Firefox"}]}]

+  },

+  {

+    "id": "181",

+    "title": "Languages",

+    "subMenu": [{"title":"English"}, {"title":"French"}, {"title":"Chinese"}, {"title":"Hindi"}]

+  },

+  {

+    "id": "210",

+    "title": "Continents",

+    "subMenu": [{"title":"Asia", "subsubMenu":[{"title":"India"},{"title":"China"}]}, {"title":"Africa", "subsubMenu":[{"title":"South Africa"},{"title":"Kenya"},{"title":"Zimbabwe"}]}]

+  }

+]

+

+

+

diff --git a/common/src/main/webapp/usageguide/appserver/data/notificationData.json b/common/src/main/webapp/usageguide/appserver/data/notificationData.json
new file mode 100644
index 0000000..a532151
--- /dev/null
+++ b/common/src/main/webapp/usageguide/appserver/data/notificationData.json
@@ -0,0 +1,42 @@
+{

+  "err_data" : {

+    "title": "Error",

+    "showClose": "true",

+    "closeBtnTxt": "Ok",

+    "icon": "glyphicon glyphicon-exclamation-sign",

+    "iconColor": "icon_error",

+    "msg": "<<Please input your message here>>",

+    "buttons": []

+  },

+  "warn_data" : {

+    "title": "Warning",

+    "showClose": "true",

+    "closeBtnTxt": "Ok",

+    "icon": "glyphicon glyphicon-warning-sign",

+    "iconColor": "icon_warning",

+    "msg": "<<Please input your message here>>",

+    "buttons": []

+  },

+  "info_data" : {

+    "title": "Information",

+    "showClose": "true",

+    "closeBtnTxt": "Ok",

+    "icon": "glyphicon glyphicon-info-sign",

+    "iconColor": "icon_info",

+    "msg": "<<Please input your message here>>",

+    "buttons": []

+  },

+  "confirm_data" : {

+    "title": "Confirmation",

+    "showClose": "true",

+    "closeBtnTxt": "Cancel",

+    "icon": "glyphicon glyphicon-info-sign",

+    "iconColor": "con_confirm",

+    "msg": "<<Please input your message here>>",

+    "buttons": [

+      {

+        "text": "Ok"

+      }

+    ]

+  }

+}

diff --git a/common/src/main/webapp/usageguide/appserver/data/provinceData.json b/common/src/main/webapp/usageguide/appserver/data/provinceData.json
new file mode 100644
index 0000000..8fed9ec
--- /dev/null
+++ b/common/src/main/webapp/usageguide/appserver/data/provinceData.json
@@ -0,0 +1 @@
+[{"id":7560,"province_name":"Data 1","ip":"1.2.3.4","port":1234},{"id":7561,"province_name":"Data 2","ip":"1.2.3.4","port":1234},{"id":7562,"province_name":"Data 3","ip":"1.2.3.4","port":1234}]
\ No newline at end of file
diff --git a/common/src/main/webapp/usageguide/appserver/data/radioData.json b/common/src/main/webapp/usageguide/appserver/data/radioData.json
new file mode 100644
index 0000000..aab9436
--- /dev/null
+++ b/common/src/main/webapp/usageguide/appserver/data/radioData.json
@@ -0,0 +1,14 @@
+{

+  "radio_btn_default_data" : {"id":1, "label":"Default Radio Btn", "type":"default", "checked":false},

+  "radio_btn_primary_data" : {"id":2, "label":"Primary Radio Btn", "type":"primary", "checked":false},

+  "radio_btn_success_data" : {"id":3, "label":"Success Radio Btn", "type":"success", "checked":true},

+  "radio_btn_danger_data" : {"id":4, "label":"Error Radio Btn", "type":"danger", "checked":false},

+  "radio_btn_Warn_data" : {"id":5, "label":"Warn Radio Btn", "type":"warning", "checked":false},

+  "radio_btn_info_data" : {"id":6, "label":"Info Radio Btn", "type":"info", "checked":false}

+}

+

+

+

+

+

+

diff --git a/common/src/main/webapp/usageguide/appserver/data/shortNote.json b/common/src/main/webapp/usageguide/appserver/data/shortNote.json
new file mode 100644
index 0000000..6c182b4
--- /dev/null
+++ b/common/src/main/webapp/usageguide/appserver/data/shortNote.json
@@ -0,0 +1,17 @@
+{

+  "treeTip":"Ztree",

+  "accordionTip":"Use the data-parent attribute to make sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.", 

+  "tabTip":"Tabs are created with <ul class=nav nav-tabs> Tip: Also mark the current page with <li class=active>",

+  "vtabTip":"Pills can also be displayed vertically. Just add the .nav-stacked class",

+  "tableTip":"The .table class adds basic styling to a table, The .table-hover class adds a hover effect (grey background color) on table rows,The .table-striped class adds zebra-stripes to a table,Loop through all table rows, and hide those who don't match the search query",

+  "buttonTip":"Default Buttons-To achieve the button styles above, Bootstrap has the following classes like .btn-default, Visual Buttons- To achieve the button styles above, Bootstrap has the following classes like .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link,Different Sized Buttons-To achieve the button styles above, Bootstrap has the following classes like .btn-lg .btn-md .btn-sm .btn-xs,Icon Buttons- Bootstrap provides 260 glyphicons from the Glyphicons Halflings set. Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc.",  

+  "dropdownTip":"Dropdown- A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list,The .dropdown class indicates a dropdown menu,To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle=dropdown attribute. The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown. Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu. Dropdown Header-The .dropdown-header class is used to add headers inside the dropdown menu. Dropup Header-If you want the dropdown menu to expand upwards instead of downwards, change the <div> element with class=dropdown to dropup",

+  "radioTip":"Use the type as Radio to use radio buttons",

+  "checkboxTip":"use the following classes funkyradio-default funkyradio-primary funkyradio-success funkyradio-info funkyradio-danger funkyradio-warning",

+  "toolTip":"Tooltip",

+  "listTip":"Listtip",

+   "provinceTip":"It allows you to add,delete records from the server",

+    "notificationTip":"notificationTip",

+     "functionalTip":"functionalTip"

+

+}
\ No newline at end of file
diff --git a/common/src/main/webapp/usageguide/appserver/data/tabData.json b/common/src/main/webapp/usageguide/appserver/data/tabData.json
new file mode 100644
index 0000000..e2032e4
--- /dev/null
+++ b/common/src/main/webapp/usageguide/appserver/data/tabData.json
@@ -0,0 +1,21 @@
+{

+  "tabData":

+  {

+    "items": [{

+      "tablabel": "Why AngularJS?",

+      "isActive": true,

+      "target": "tab1",

+      "msg": "HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop."

+    }, {

+      "tablabel": "Alternatives",

+      "isActive": false,

+      "target": "tab2",

+      "msg": "Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views."

+    }, {

+      "tablabel": "Extensibility",

+      "isActive": false,

+      "target": "tab3",

+      "msg": "AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how."

+    }]

+  }

+}
\ No newline at end of file
diff --git a/common/src/main/webapp/usageguide/appserver/data/tableData.json b/common/src/main/webapp/usageguide/appserver/data/tableData.json
new file mode 100644
index 0000000..12c1a8e
--- /dev/null
+++ b/common/src/main/webapp/usageguide/appserver/data/tableData.json
@@ -0,0 +1,71 @@
+{

+  "basic_table_data": {

+    "itemHeader": ["First Name", "Last Name", "Age"],

+    "rowitem": [

+      {"values": ["A", "B","1"]},

+      {"values": ["C", "D", "2"]},

+      {"values": ["E", "F", "3"]}

+    ],

+    "striped": false,

+    "border": false,

+    "hover": true,

+    "condensed": false,

+    "filter": false,

+    "action": "",

+    "searchField": ""

+  },

+

+  "str_table_data": {

+    "itemHeader": [

+      "First Name",

+      "Last Name",

+      "Age"

+    ],

+    "rowitem": [

+      {

+        "values": [

+          "A",

+          "B",

+          "1"

+        ]

+      },

+      {

+        "values": [

+          "C",

+          "D",

+          "2"

+        ]

+      },

+      {

+        "values": [

+          "E",

+          "F",

+          "3"

+        ]

+      }

+    ],

+    "striped": true,

+    "border": true,

+    "hover": false,

+    "condensed": true,

+    "filter": false,

+    "action": "",

+    "searchField": ""

+  },

+

+  "cond_table_data": [

+    {

+      "countryName": "China",

+      "language": "Mandrain"

+    },

+    {

+      "countryName": "India",

+      "language": "English"

+    },

+    {

+      "countryName": "USA",

+      "language": "English"

+    }

+  ]

+}

+

diff --git a/common/src/main/webapp/usageguide/appserver/data/textArea.json b/common/src/main/webapp/usageguide/appserver/data/textArea.json
new file mode 100644
index 0000000..eee18f3
--- /dev/null
+++ b/common/src/main/webapp/usageguide/appserver/data/textArea.json
@@ -0,0 +1,111 @@
+{

+  "Note" : {

+    "message" : "Hi I am Note",

+    "placement" : "bottom"

+ },

+ 

+ "Textbox" : {

+    "errmsg" : "The name is required.",

+    "placeholder" : "Text",

+    "modalVar":"textbox",

+    "errtag":"textboxErr",

+    "errfunc":"validatetextbox"

+},

+

+ "Email" : {

+    "errmsg" : "The email is required.",

+    "placeholder" : "Email",

+    "modalVar":"email",

+    "errtag":"emailErr",

+    "errfunc":"validateemail"

+},

+

+"Url" : {

+    "errmsg" : "The url is required.",

+    "placeholder" : "Url",

+    "modalVar":"url",

+    "errtag":"urlErr",

+    "errfunc":"validateurl"

+},

+

+"Password" : {

+    "errmsg" : "The password is required.",

+    "placeholder" : "Password",

+    "modalVar":"password",

+    "errtag":"passwordErr",

+    "errfunc":"validatepassword"

+},

+

+"Number" : {

+    "errmsg" : "The number is required.",

+    "placeholder" : "Number",

+    "modalVar":"number",

+    "errtag":"numericErr",

+    "errfunc":"validatenumeric"

+},

+

+"Datetime" : {

+    "errmsg" : "The datetime is required.",

+    "placeholder" : "Datetime",

+    "modalVar":"datetime",

+    "errtag":"dotErr",

+     "errfunc":"validatedot"

+},

+

+"Date" : {

+    "errmsg" : "The date is required.",

+    "placeholder" : "Date",

+    "modalVar":"date",

+    "errtag":"dateinputErr",

+    "errfunc":"validatedateinput"

+},

+

+"Month" : {

+    "errmsg" : "The month is required.",

+    "placeholder" : "Month",

+    "modalVar":"month",

+    "errtag":"monthinputErr",

+    "errfunc":"validatemonthinput"

+},

+

+"Week" : {

+    "errmsg" : "The week is required.",

+    "placeholder" : "Week",

+    "modalVar":"week",

+    "errtag":"weekinputErr",

+    "errfunc":"validateweek"

+},

+

+"Time" : {

+    "errmsg" : "The time is required.",

+    "placeholder" : "Time",

+    "modalVar":"time",

+    "errtag":"timeinputErr",

+    "errfunc":"validatetime"

+},

+

+"Ipv4" : {

+    "errmsg" : "The Ipv4 is required.",

+    "placeholder" : "Ipv4",

+    "modalVar":"ipv4",

+    "errtag":"ipv4Err",

+    "errfunc":"validateipv4"

+},

+

+"Ipv6" : {

+    "errmsg" : "The Ipv6 is required.",

+    "placeholder" : "Ipv6",

+    "modalVar":"ipv6",

+    "errtag":"ipv6Err",

+    "errfunc":"validateipv6"

+},

+

+"TextArea" : {

+    "errmsg" : "The textarea is required.",

+    "placeholder" : "Textarea",

+    "modalVar":"textarea",

+    "errtag":"ipv6Err",

+    "errfunc":"validateipv6"

+}

+

+}

diff --git a/common/src/main/webapp/usageguide/appserver/data/treeData.json b/common/src/main/webapp/usageguide/appserver/data/treeData.json
new file mode 100644
index 0000000..8263f3e
--- /dev/null
+++ b/common/src/main/webapp/usageguide/appserver/data/treeData.json
@@ -0,0 +1,43 @@
+[

+  {

+    "name": "Java and its divisions",

+    "open": true,

+    "children": [

+      { "name": "Java Standard Edition, J2SE" },

+      { "name": "Java Enterprise Edition, J2EE" },

+      { "name": "Java Mobile Edition, J2ME"}

+    ]

+  },

+  {

+    "name": "UI",

+    "open": true,

+    "children": [

+      { "name": "Hyper Text Markup Language, HTML"},

+      { "name": "Cascading Style Sheets, CSS"},

+      { "name": "JavaScript, JS",

+        "children": [

+          { "name": "Bootstrap JS" },

+          { "name": "Mustache JS" },

+          { "name": "Angular JS" }

+        ]

+      }

+    ]

+  },

+  {

+    "name": "Server",

+    "open": true,

+    "children" : [

+      { "name": "Node JS"},

+      { "name": "Express JS"},

+      { "name": "PHP"}

+    ]

+  },

+  {

+    "name": "Java backend",

+    "open": true,

+    "children" : [

+      { "name": "Spring MVC"},

+      { "name": "Hibernate"}

+    ]

+  }

+]
\ No newline at end of file
diff --git a/common/src/main/webapp/usageguide/appserver/data/vtabData.json b/common/src/main/webapp/usageguide/appserver/data/vtabData.json
new file mode 100644
index 0000000..a87e82f
--- /dev/null
+++ b/common/src/main/webapp/usageguide/appserver/data/vtabData.json
@@ -0,0 +1,21 @@
+{

+  "vtabData":

+  {

+    "items": [{

+      "tablabel": "Why AngularJS?",

+      "isActive": true,

+      "target": "tab1",

+      "msg": "HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop."

+    }, {

+      "tablabel": "Alternatives",

+      "isActive": false,

+      "target": "tab2",

+      "msg": "Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views."

+    }, {

+      "tablabel": "Extensibility",

+      "isActive": false,

+      "target": "tab3",

+      "msg": "AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how."

+    }]

+  }

+}
\ No newline at end of file