Web Controls

Web Controls

What Are the Different Types of Controls?

  1. 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 (named parameter), and are included with the /(!example) marker 

  1. Control Templates (*.ctrl)  

contain scripts to mimic default Plex behavior. Default templates can be overridden the control name property  template=  followed by the control template name without the extension, e.g. template=DojoDateEdit 

  1. Page Templates (*-page.wcli)  

must be below the root template function in the Plex inheritance path. It does not contain a complete HTML page, but it can contain any components that you want to manually add to any function in the inheritance path other than the root. It is always processed before the Control Template and applied by inheriting from the function with the same implementation name. Multiple Page templates can be applied and adds contents to defined attach points in the root template, e.g.: 

/(!MainArea)
Anything here will be generated in the MainArea
/(!MainArea)

  1. Root Templates (*-root)  

contain a complete HTML page, but nothing corresponds to a Plex panel control. It’s analogous to a root function (function shell) in Plex. It does not have to be the action diagram root, but it can be any function in the inheritance path. It’s the first template to be expanded during template generation. Each panel can only have one root, which contains ‘attach points’ to include later templates, e.g. /(!AttachPoint:name=MainArea) 

List of SysTemplates 

  1. AjaxDoEvent.inc  

This control is used by the WebClient templates to initiate a Plex Panel Event.

Example
/(!AJAXDoEvent:phys=Double Click)       

  • AjaxDoEventButton.inc  

This control is used by the WebClient templates to initiate a Plex Button Event. 

Example
/(!AJAXDoEventButton:phys=Double Click) 

  1. AjaxDoEventCell.inc 

This control is used by the WebClient templates to initiate a Plex Panel Event in a Plex Grid.

Example 
/(!AJAXDoEventCell:phys=Updated)  

  1. AjaxDoEventCellDblClick.inc 

This control is used by the WebClient templates to initiate the double-click Plex Panel Event in a Plex cell grid. 

Example 
/(!AJAXDoEventCellDblClick:phys=Double Click) 

  1. AjaxDoEventLF.inc  

This control is used by the WebClient templates to initiate Plex panel event when lost focus event is triggered.

Example
/(!AJAXDoEventLF:phys=Modified) 

  1. AjaxDoEventToolbar.inc 

This control is used by the WebClient templates to initiate Plex panel event on toolbar control.

Example
/(!AJAXDoEventLF:phys=Select Menu) 

  1. AjaxDoMenuEvent.inc 

This control is used to initiate Plex Panel events from the WebMenu item control.

Example
/(!AJAXDoMenuEvent:phys=Select Menu) 

  1. AjaxDoPanelEvent.inc 

This control is used to initiate Plex Panel's Close Event.

Example
/(!AJAXDoPanelEvent:phys=Query Close:pnlid=/(!ChildPanel:PNLID))

  1. AlignButtonTextandImage.inc  

This control and other child controls are used to lay out the button image and text based on what is set in the Plex Panel Editor.
Child Controls 

  1. ButtonImageAboveText.inc

This will show the button image above the button text in the button control.

  1. ButtonImageBelowText.inc

This will show the button image below the button text in the button control.

  1. ButtonImageLeftofText.inc

This will show the button image and button text on the same line in the button control. The Image will be shown to the left of the text.

  1. ButtonImageRightOfText.inc

This will show the button image and button text on the same line in the button control. The Image will be shown to the right of the text.

  1. ButtonImageSameLineAsText.inc

This is used if the button image and text are shown on the same line. It decides if the button image should be shown before or after the button text.

  1. ButtonTextAlignBottom.inc

This is used if the button text is set to be shown on the bottom. It decides how it should show the button image and text based on what is set for the alignment of the button image.

  1. ButtonTextAlignCenter.inc

This is used if the button text is set to be shown in the center. It decides how it should show the button image and text based on what is set for the alignment of the button image.

  1. ButtonTextAlignTop.inc

This is used if the button text is set to be shown on the top. It decides how it should show the button image and text based on what is set for the alignment of the button image. 

  1. ContextMenu.inc 

This control is used if there is a Right Context Menu setup for the Plex control. 

  1. CreateCSSStyle.inc

This contains javascript that will dynamically create CSS classes on your control. It also contains a method to remove the dynamically created classes. 

  1. CustomClass.inc 

This allows user to add a custom CSS class to a control by putting "class=" in the control name.

  1. DefaultCSS.inc

This is used to assign the Plex Panel properties for position and size of a control to your WebClient control. Usually this is done by default. But if a custom ControlName is used, this can be done by putting the "default" parameter in your ControlName.

  1. DetailPopup-root.wcli

This is a root template which allows your panel to show a floating popup dialog on the page.
Panel Requirements
For this root template, you are required to have your Plex Panel type be "Dialog".
Other Notes
Unlike the normal WebShell root template, DetailPopups do not have a "HeadArea" to attach controls. So, if you need to initialize any javascript files or anything like that, you will need to do this in the "LinkArea" if you are using this root template.

  1. DojoChart.ctrl

This is not currently supported. It is used to display a simple chart on a webpage.

  1. DojoDateEdit.ctrl

This is used for Date Edit fields by default. When in focus, a date picker control is popped up.
WebClient Control Name Properties

default :
This give the control its Plex size and position on the panel.

  1. DojoFade.inc 

This file is used to fade a control in and out. This is primarily used in the WebSlider and WebProgress controls.

  1. DojoTab.ctrl

This is used automatically with Plex Tab controls.

  1. DojoTimePicker.ctrl 

This control gives an edit field the time picker javascript control when the edit field is selected. This is not done by default. You will need to use this and change the control name to something similar to this: 
myTimeEdit:MainArea:template=DojoTimePicker:default
WebClient Control Name Properties
default :
This give the control its Plex size and position on the panel. 

  1. EditEvents.inc

This file handles the Updated and Modified events for the WebEdit and WebTextbox controls.

  1. EventCalendar.ctrl

This file is used to display Plex grid data in Outlook-style calendar.

  1. FixPosition.inc

This is used to assign the Plex Panel properties for position and size of a control to your WebClient control. This can only be activated by adding Define.FixedPositioning=Y in the WebClient.properties. The web templates will need to be regenerated to have the Plex properties set in the web templates.

  1. GridFilterCell.ctrl

This template is automatically used and does not need to be referenced. This handles Set State commands for the Plex Grid.

  1. GridPDFExport.ctrl

This template enables Plex grid data to be exported into a PDF format.

  1. IMEMode.inc

This allows for support of a Input Method Editor (IME) for user text entry fields. An IME is used in Asian languages to assist in the creation of characters from a medium character set, using an entry device that contains only a small subset or an entirely different set of characters than the medium character set.

  1. LiteralHTML.ctrl

This control is used to run hard-coded HTML that  is entered in the Plex panel text property.
WebClient Control Name Properties
default :
This gives the control its Plex size and position on the panel

  1. MDIActions.js

This file allows for support for MDI panels.

  1. MultilineEditCSS.inc

This handles the Scrollbar Plex Panel setting used for the MultilineEdit control.

  1. StaticBorder.inc

This handles the border used by the Plex Panel item that uses the WebStatic control.

  1. WebAccordionTree.ctrl

This control takes the place of the normal Plex TreeView, and replaces it with an Accordion style tree. Please note that this control will take the size of it's container.
So, it will need to be used in conjuction with a custome page template.
WebClient Control Name Properties
No Control Name changes are needed to use this Control.
To use this control, set the Java Bean Class for the TreeView Plex Control to "WebAccordionTree".
WebCheckbox.ctrl
    • This control is used for Checkboxes by Default.
    • WebClient Control Name Properties

      default :

      This gives the control its Plex size and position on the panel.

  • WebCombo.ctrl
    • This is the control that is used for Plex ComboBoxes by default.
    • WebClient Control Name Properties

      default :

      This gives the control its Plex size and position on the panel .

      protect :

      This disables cursor positioning inside the combo input box without disabling the entire combo box.

      space :

      This adds spaces in between ComboBox and other controls.

  • WebDocFrame.ctrl
    • This control is used to display Word document in an iframe using Google Docs.
    default :

    This gives the control its Plex size and position on the panel.
  • WebEdit.ctrl
    • This control handles all Edit fields from the Plex Panel by default.
    • WebClient Control Name Properties

      default :

      This gives the control its Plex size and position on the panel.

      hint:  String

      This is the placeholder text that is displayed in a text field when the field value is empty.

  • WebFileFrame.ctrl
    • This control is used to display document in an iframe.
    default :

    This gives the control its Plex size and position on the panel.
  • WebFilteringSelect.ctrl
    • This control is similar to the WebCombo control except that a user may enter more than one character in the input field. This is not used by default. If used, set the Control Name of the Combo Edit to something similar to this:

      myComboEdit:MainArea:template=WebFilteringSelect:escapChar=3:default.
    • WebClient Control Name Properties

      default :

      This gives the control its Plex size and position on the panel .

      escapChar : Numeric

      The number entered represents how many characters you enter before the combo box to display the list based on the character you enter.

      space :

      This adds spaces in between ComboBox and other controls.

  • WebFlexGrid.ctrl
    • This control adds support for the Active/MSFlexGrid pattern allowing different colors, sizes, font-sizes, images, etc. per cell in the grid.
  • WebGrid.ctrl
    • This template is used by default for Plex Grids.
    • WebClient Control Name Properties

      default :

      This gives the control its Plex size and position on the panel .

      stretch :

      If used, columns will stretch automatically to fit the medium-width string in the column. The column widths from the Plex Panel Editor will be ignored.

      cellTitle : String

      When a user hovers over the cell, ‘string’ is what will be displayed.

      ColumnToggling : Boolean

      This gives the user the ability to dynamically show/hide and reorder grid columns. These settings will be saved in the cookies for later use.

      allowCellColor : Boolean

      This is needed to dynamically change the color of the grid cell.

  • WebGridExport.ctrl
    • This control template provides a button that exports the grid contents to a CSV file. There is already a function set up to use this in the WebClient Group Model. Just inherit from " ~WebExportGrid ".
    • WebClient Control Name Properties

      default :

      This gives the control its Plex size and position on the panel .

  • WebGridFilter.ctrl
    • This is used to filter grid data based on the column name. Set the control name of the combo box to something similar to this: myGrid:MainArea:template=WebGridFilter:GridId=Grid1P:TextId=filterContains:default
    • WebClient Control Name Properties

      default :

      This gives the control its Plex size and position on the panel.

      GridId : String

      This should be set to the control name of the grid.

      TextId : String

      This should be set to the control name of the filter field.

      space :

      This adds spaces in between ComboBox and other controls within the grid.

  • WebHTMLLogMessages-page.wcli
    • This page template is used to display enquiry, log and dialog messages from Plex in HTML format in a browser.
  • WebHTMLMessages-page.wcli
    • This page template is used to display dialog and enquiry messages from Plex in HTML format in a browser.
  • WebLabel.ctrl
    • This control creates a static label using the Plex panel text property.
    • WebClient Control Name Properties

      default :

      This gives the control its Plex size and position on the panel.

  • WebList.ctrl
    • This control is used by default for ListBox items in the Plex panel.
    • WebClient Control Name Properties

      default :

      This gives the control its Plex size and position on the panel .

      protect :

      This disables cursor positioning inside the combo input box without disabling the entire combo box.

      space :

      This adds spaces in between ComboBox and other controls.

  • WebLocale.ctrl
    • This control template is used to set the locale of the web application.
  • WebLogMessages-page.wcli
    • This page template is used to display dialog, enquiry and log messages from Plex on the browser.
  • WebMenu.ctrl
    • This control is used for Plex Menu items by default. No action should be necessary by the user.
  • WebMenubar.ctrl
    • This control sets up the Menu Bar where the menu will be placed. This is done by default for Plex menus. No action is needed by the user.
  • WebMenuitem.ctrl
    • This control is used for the actual items in the Plex menu. This is done by default.
  • WebMessages-page.wcli
    • This page template is used to display Plex dialog and enquiry messages in WebClient.
  • WebMultilineEdit.ctrl
    • This control is used to display multiline edit fields in WebClient.
    • WebClient Control Name Properties

      default :

      This gives the control its Plex size and position on the panel.

      zindex : Numeric

      This gives the element the CSS style tag of zindex, which sets the stacking order of the element.

  • WebPassword.ctrl
    • This control is used by default for any edit field that is set to Password Yes. It will behave the same way that the Password Yes fields behave in Plex.
    • WebClient Control Name Properties

      default :

      This gives the control its Plex size and position on the panel.

  • WebProgress.ctrl
    • This control template is used for Plex progress bar control to monitor the progress of a task.
  • WebPortlet-root.wcli
    • This root template gives Portlet support, which allows you to embed a WebClient application into a web portal.
  • WebPushbutton.ctrl
    • This control applies to Plex buttons by default.
    • WebClient Control Name Properties

      default :

      This gives the control its Plex size and position on the panel.

      shortcut : String

      The shortcut parameter lets you specify an Alt key combination, e.g. for a button showing an icon only.  For example, shortcut=r would allow the button to be triggered with Alt+R.

  • WebRadiobutton.ctrl
    • This control is used for Plex radio buttons by default.
    • WebClient Control Name Properties

      default :

      This gives the control its Plex size and position on the panel.

  • WebSeparator.ctrl
    • This control is used for Plex menu separators. This is used by default. No additional action is needed by the user.
  • WebShell-root.html

    • This is the root template for the web application. The following attachpoints are defined.

      HeadArea

      Contains HTML elements that appear in the HTML <head> tag.

      JSInit

      Contains Javascript statements that will be executed upon initialization before the first panel is loaded.

      FormArea

      Contains controls that appear before the main area.

      MainArea

      Contains controls that appear at the content pane of the web panel.

      JSOnLoad

      Contains Javascript statements that will be executed after the panel is loaded.

      CSSInitArea

      Contains CSS references for the current panel.

      LinkArea

      Contains HTML link elements.

      DataArea

      Contains items after the LinkArea.

  • WebSite.ctrl
    • This control automatically handles ChildSites in the Panel. This should never have to be specifically referenced.
  • WebSlider.ctrl
    • This control is used for Plex slider control to set a numeric value.
    • WebClient Control Name Properties

      default :

      This gives the control its Plex size and position on the panel

  • WebSpinEdit.ctrl
    • This controls adds a Spinner javascript control to the field in WebClient.
    • WebClient Control Name Properties

      default :

      This gives the control its Plex size and position on the panel

  • WebStatic.ctrl
    • This control is used for Static controls on the Plex Panel by default.
    • WebClient Control Name Properties

      default :

      This gives the control its Plex size and position on the panel

  • WebTextbox.ctrl
    • This control is very similar to the WebEdit control. The only difference is how it displays read-only fields. This control puts a border around the edit box.
    • WebClient Control Name Properties

      default :

      This gives the control its Plex size and position on the panel.

      hint:  String

      This is the placeholder text that is displayed in a text field when the field value is empty.

      space :

      This adds spaces in between ComboBox and other controls

  • WebToolbar.ctrl
    • This control is used for the Plex toolbar control. This is handled by default.
  • WebToolbarButton.ctrl
    • This control is used for buttons in a Plex toolbar control. This is handled by default.
  • WebTreeview.ctrl
    • This control is used for Plex TreeView controls by default.
  • WebURLGrid.ctrl
    • This control is a prototype control that is used to convert data in the grid column to a URL with the text "Link". The control name of the column heading will need to be set to something similar to this: myGridColumn:Grid1P.ColumnsArea:template=WebURLGrid:<ColumnsHeadingText>
    • WebClient Control Name Properties

      stretch :

      If used, columns will stretch automatically to fit the medium-width string in the column. The column widths from the Plex Panel Editor will be ignored.


      • Related Articles

      • Mobile 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 ...

      • 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, ...

      • 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 ...

      • Web Embedded File

        This control template will allow you to display files within your WebClient page. Primarily this is used to display images dynamically on your page. 1) Copy WebEmbeddedFile.ctrl into your Custom Templates folder so that it can be referenced by ...

      • 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 ...