Web Accordion Menu

Web Accordion Menu

This template will allow you to use a framed menu screen, which uses an Accordion Menu and loads menu functions into a ChildSite.

1) In your eclipse workspace, save WebMenuFrame-page.wcli file (ZIP attached in this article with the files) to your Custom Template Project.

2) In your obclient.properties, create an entry similar to this: "webclient.topAppMode=one". The value for this can also be set to "many". If the value is "one", then only one child panel can be open at a time. If it tries to load another child panel, any open ones will close. If it is set to "many", then any number of children can be left open.

3) In your CSS file that your are using for your application, please make sure that you have the following entries

  2. body, div, dl, dt, dd, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  3. margin: 0;
  4. padding: 0;
  5. }

  7. html {
  8. height: 100%;
  9. width: 100%;
  10. }

  12. body{
  13.   overflow: hidden;
  14.   height: 100%;
  15.   width: 100%;
  16. }

  18. body form {
  19.   height: 100%;
  20.   width: 100%;
  21. }
  23. #container{
  24. height: 100%;
  25. width: 100%;
  26. background: none;
  27. }

  29. #titlebar{
  30. width: 100%;
  31. height: 68px;
  32. background: white url("../images/header-deco.gif") repeat-x 0% 0%;
  33. border: 1px solid #99BBE8;
  34. }

  36. #titlebar h1{
  37. text-align: center;
  38. padding-top: 10px;
  39. font-family: Helvetica;
  40. color: #15428B;
  41. }

  43. #navigationbar{
  44. height: 25px;
  45. width: 100%;
  46. background: #D0DEF0 url("../images/bg.gif");
  47. border: 1px solid #A9BFD3;
  48. }
  49. #navigationbar DIV{
  50. float: right;
  51. padding-right: 5px;
  52. }

  54. #navigationbar SPAN{
  55. padding-left: 2px;
  56. position: relative;
  57. top: -4px;
  58. }

  60. #footerbar{
  61. height: 20px;
  62. background: #D0DEF0 url("../images/bg.gif");
  63. border: 1px solid #A9BFD3;
  64. }
  66. #about{
  67. height: 16px;
  68. width: 16px;
  69. margin-top: 4px;
  70. }

  72. #leftcontainer{
  73. width: 250px;
  74. border: 1px solid #99BBE8;
  75. background: white;
  76. }

  78. #gridbottom{
  79. height: 30px;
  80. background: #D0DEF0 url("../images/bg.gif");
  81. border: 1px solid #A9BFD3;
  82. }

  84. #gridbottom BUTTON{
  85. margin-top: -5px;
  86. }

  88. #functiontitle{
  89. height: 25px;
  90. background: url("../images/white-top-bottom.gif") repeat-x;
  91. font-weight: bold;
  92. color: #15428B;
  93. font-size: 11px;
  94. font-family: tahoma, arial, verdana, sans-serif;
  95. }

  97. #functiontitle SPAN{
  98. position: relative;
  99. top: 6px;
  100. left: 5px;
  101. }
  102. /*
  103. .titlearea{
  104. height: 25px;
  105. background: url("../images/white-top-bottom.gif") repeat-x;
  106. font-weight: bold;
  107. color: #15428B;
  108. font-size: 11px;
  109. font-family: tahoma, arial, verdana, sans-serif;
  110. width: 250px;
  111. }

  113. .titlearea SPAN{
  114. position: relative;
  115. top: 6px;
  116. left: 5px;
  117. }
  118. */
  119. #split{
  120. width: 5px;
  121. background-color: #D0DEF0;
  122. }
  123. #accContainer{
  124. /*height: 100%;*/
  125. overflow-y: auto;
  126. overflow-x: hidden;
  127. }


  130. .tabcontainer{
  131. width: 100%;
  132. height: 100%;
  133. }

  135. .childcontainer{
  136. height: 100%;
  137. width: 100%;
  138. }

  140. .childbottom{
  141. height: 1px;
  142. background: #D0DEF0 url("../images/bg.gif") no-repeat;
  143. background-size: 100%;
  144. border: 1px solid #A9BFD3;
  145. }

  147. .claro .childbottom BUTTON{
  148. margin-top: 3px;
  149. }

  151. .childdetail{
  152. height: 1px;
  153. background: #D0DEF0 url("../images/bg.gif") no-repeat;
  154. background-size: 100%;
  155. border: 1px solid #A9BFD3;
  156. }

  158. .claro .childdetail BUTTON{
  159. margin-top: 3px;
  160. }

  162. .childtop{
  163. height: 50px;
  164. }

  166. .companylogo{
  167. background: url("../images/dsi.png") no-repeat;
  168. width:160px;
  169. height:68px;
  170. }

  172. .statusmessage{
  173. text-align: right;
  174. }


  177. .dijitTextBoxError .dijitValidationIcon
  178. {
  179.       width: 0px;
  180. }

  182. .claro .dijitValidationIcon
  183. {
  184.       width: 0px;
  185. }

  187. .exporticon {
  188. background-image: url("../images/export.png");
  189. width: 16px;
  190. height: 16px;
  191. }

  193. .dijitButtonNode {
  194. z-index: 2;
  195. }

  197. .loadingSpinner{
  198.        width: 100%;
  199.        height: 100%;
  200.        background: transparent url("../images/busy.gif") no-repeat center;
  201.        position: absolute;
  202.        z-index: 10000;
  203. }

  205. .loadShow .LoadScreen{
  206.        display: none;
  207. }

  209. .LoadScreen{
  210. width: 100%;
  211. height: 100%;
  212. background: transparent url("../images/busy.gif") no-repeat center;
  213. position: absolute;
  214. z-index: 10000;
  215. }

  217. .menubar{
  218. visibility: hidden;
  219. }

  221. #titlebar h1{
  222. color:red !important;
  223. }

  225. .dijitInputField input{
  226. padding-left:5px;
  227. }

The remainder of these changes will be in Plex.

4) Make sure the Variant for the WebClient Advanced Controls group model is set to "WebClient".

5) Create the following 2 functions to act as Page Templates using Plex Triples:

~WebMenuFrame
impl name NME
WebMenuFrame
~WebAlert
impl name NME
WebAlert

6) Create a function that will be your accordion menu function. Have it inherit from "_Abstract.~TreeView", "~WebShell", "~WebAlert", and "~WebMenuFrame", in that order.

7) Add a region to the panel of your menu function called "ChildSiteP".

8) In the panel editor for your menu function, for ChildSiteP, set the following:
           Control Name = ChildSiteP:DetailArea
           Type = Site

9) In the panel editor for your menu function, for TreeView, set the following:
           Java Bean Class = WebAccordionTree
           Control Name = PVTree1
           Control Type = PVTree Bean Control

10) In the action diagram for your menu function, in the Pre Point Start Initialize, you will need to set ChildSiteP as your child site. The code will look like this:



The field mapping in the API call will look like this:


11) In the action diagram for your menu function, in the Pre Point Process Options, you will need to add your TreeView parent and child nodes. This is done the same as a normal TreeView in Plex. After this is done, you will need to do a "Go Sub TreeView Refresh".

12) Just as with a normal Plex TreeView, you will need to add code in the "TreeView Node Clicked" subroutine to call the necessary function when a node is clicked.

13) For functions that you would like to load into the child site, they DO NOT need to inherit from the normal Plex Parent/Child patterns. Instead, they will need to inherit from "~WebShell" and have their Window Type set to "Top Application".


    • Related Articles

    • Web Controls

      What Are the Different Types of Controls? Include files (*.inc)   are evaluated within the referencing template and can be useful for repeated blocks of code. They can have parameters, such as :nc (do not evaluate comments) or :parameterName=pValue ...

    • Dynamic Tree Menu Implementation

      This article describes you how to create a dynamic tree menu in WebClient, this menu generate its nodes according to the data defined in a database table. Considerations: Before continue this guide you should read the following manuals: Web Accordion ...

    • TrafficCam for Web

      Watch the Walkthrough We are going to develop a web application with CA Plex and CM First's WebClient templates. The application will allow us to access a network of real-time traffic cameras around the State of Maryland, view their live video feeds, ...

    • Incident Reporter for Web

      Video Walkthrough Pattern Functions All functions will be under "Patterns.Web". GoogleMap This pattern is a simple UIBasicShell.  It displays a single field: GoogleMap for GoogleMap.  This field has a Control Name of ...

    • Menu Management

      1. How to open Menu Editor 2. Menu Editor UI 3. Menu Editor Actions New Menu: To add a new Menu. Click on Add button to open the pop-up Input menu data and click save menu New Menu: To edit menu and create a relationship between the menu and other ...