Skip to main content
Skip table of contents

Presentation layer elements and naming conventions

The following topics describe the core Presentation layer elements, and provide information on their naming conventions. Maintaining these conventions aids in model consistency and clarity. Additionally, it facilitates model maintenance and customization.

Applications

An application is a collection of screens.
Application configurations include specifying a caption, a description, an icon, a stylesheet, a menu, and a toolbar. Applications also specify a list of fixed screens and the initial screen.

Screens

Screens collect and lay out forms, controls, and sub-layouts. Screen names use camelcase capitalization with an initial capital letter and end with a suffix based on the screen type. For example, a command screen might have the name AllReportCommand.

The following table lists the screen types you can create in the Screens tab. The Format column provides a name template for the screen type. The italicized portion of the format represents the variable part of the screen name. The non-italicized portion should remain standard for all screens of the given type.

Presentation layer screen naming convention

Screen typePurposeFormatExample
CommandDisplays configurable
parameters.
<Name>CommandAllReportCommand
CreateCreates a business class
instance for persisting in
the application.
<Name>CreateCompanyCreate
PickerDisplays a list of objects
that can be associated with
a given class instance.
<Name>PickerEntityPicker
PortletDefines the screen as a
portlet, which can be added
to a workspace.
<Name>PortletImportProcessPortlet
PropertiesDisplays properties of a
business class instance,
which a user may choose
to modify.
<Name>PropertiesTaskProperties

Developing new portlet screens

Forms

Forms contain user interface controls to display data for querying, viewing, creating, or editing class instances. Forms contain a root layout of controls and optional additional sub-layouts. Form names use camelcase capitalization with an initial capital letter and ending with a suffix based on the form type. For example, a detail form might have the name TaskDetail.

The following table lists the form types you can create in the Forms tab. The Format column provides a name template for the screen type. The italicized portion of the format represents the variable part of the form name. The non-italicized portion should remain standard for all forms of the given type.

Presentation layer form naming convention

FormPurposeFormatExample
DetailDisplays the details of a
single object for viewing or
editing.
<Name>DetailTaskDetail
ListDisplays a collection of
objects, typically the results of a query.
<Name>ListEntityList
QueryProvides the parameters
used for a search.
<Name>SearchDocumentMgrSearch

Related links

Developing a new portlet form

Layouts

Layouts manage the arrangement of UI controls within a form or screen. Layout names begin with a prefix based on the screen type and use camelcase capitalization with an initial lowercase letter. For example, a caption layout might be named capWorkQueues.

The following table lists the layout types available in the Screens and Forms tabs. The Format column provides a name template for the layout type. The italicized portion of the format represents the variable part of the layout name.
The non-italicized portion should remain standard for all layouts of the given type.

Presentation layer layout naming convention

Layout typePurposeFormatExample
CaptionLayoutAppears at the top of its
parent layout. Typically
used to display a summary
of the information from
other parts of the parent
layout.
cap<Name>capWorkQueues
GroupLayoutDisplays a collection of
zero or more sub-layouts
(group, splitter, or table)
where only one sub-layout
is visible at a time.
grp<Name>grpEntityTelcoms
GroupLayout TabsDisplays each sub-layout
within a GroupLayout.
tab<Name>tabDetails
SplitterLayoutDisplays a collection of
one or more splitter zones
separated by a slider
(horizontal or vertical),
allowing users to resize the
zone.
splt<Name>spltRootLayout
TableLayoutPartitions an area into
columns and rows.
tbl<Name>tblEntitySearch

UI events

A UI event is a notification object that communicates context information associated with a user interface event, such as when a user clicks a button or selects a menu item. You can override the default framework behavior of UI events
by writing custom business logic in a UI action.

For more information about the properties of UI events, see UI Events.

Stylesheets and styles

Stylesheets specify how user interface elements look in NexJ applications. Stylesheets are collections of styles. A style specifies colors, fonts, borders, and other visual elements that affect how controls look.

The following sections describe the naming conventions and properties for stylesheets and styles:

Stylesheets

Stylesheets do not have a strict naming convention. However, it is useful to give stylesheets a descriptive name, for example, naming the default stylesheet for an application DefaultControls, and the stylesheet for the tablet application DefaultControlsTablet. Use camelcase capitalization with an initial capital letter to name stylesheets.

You can base stylesheets on other stylesheets. A child stylesheet inherits its propeties from the parent stylesheet  on which it is based. For example, if the DefaultControls stylesheet uses the font Verdana-regular-8, basing a
new stylesheet on DefaultControls sets the new stylesheet's font to Verdana-regular-8. You can then customize the new stylesheet's properties. This method is useful for quickly creating stylesheets that are variants of existing stylesheets.

Styles

You typically create two types of styles for each control: a base style and state-specific styles.

Base style
Base styles determine how controls normally look. For example, the base style for buttons is called Button.

State style
State styles determine how controls look when the control's state is modified. For example, the Button-pressed style indicates how a button looks when clicked by a user. State styles are typically based on a base style, but have one or more properties modified to change their appearance. For example, the Button-disabled style is based on the Button style, but specifies a different color to distinguish disabled buttons from normal buttons.

Name styles to indicate the controls they apply to. For example, name a style Input to indicate that it applies to input fields. Use camelcase capitalization with an initial capital letter to name styles.

Name state styles using the format <Control>-<state>, where <Control> is the name of the base style, written using camelcase, and state is the control's state, written in lowercase. For example, name the style for disabled input fields
Input-disabled.

You can include custom CSS in styles to provide additional styling for controls. This is useful when you want to specify style properties that are not otherwise available. To add custom CSS to a style, enter the CSS text in the style's Extra CSS field.

Info

Text entered in the Extra CSS field must be valid CSS, and must not conflict with any properties already specified in the style. If the extra CSS does conflict with a property, the resulting style might not render predictably.

Colors

A colorsheet is a collection of named colors for use by stylesheets. This provides a single place for consistent, system-wide modification of an application's color scheme.

Icons

An icon is an image file, typically PNG format, that is used in user interface controls to provide an end-user with a quick, intuitive representation of an application function.

Controls

Controls provide the most granular user interface functionality within a screen or a form.

Control names begin with a prefix based on the control type and use camelcase capitalization with a generally lowercase initial letter. For example, a button control might be named btnTypeSelect.

The following table lists the controls available for use in the Screens and Forms tabs. Note that the Format column illustrates the format that should be used in naming controls. The italicized portion of the format represents the name of the control, which changes for every control. The non-italicized portion of the format specifies the layout type.

Presentation layer control naming convention

ControlPurposeFormatExample
BarChartCreates a bar chart for
collecting and displaying
user data.
bar<Name>barCampaignParticipant
StatusChart
BrowserEmbeds a web browser.browse<Name>browseWebsite
ButtonTriggers a UI event when
clicked.
btn<Name>btnTypeSelect
CalendarDisplays a small calendar.call<Name>calBusiness
CheckboxCreates a selection box
that takes on a value of
#t when selected and #f
when cleared.
If tristate checkboxes are
enabled, it is also possible
to return a third state, with
the value of null.
chk<Name>chkActive
ComboCreates an entry field in
which a user can type
or select one of a list of
possible values.
cbo<Name>

cboHouseholdRole

CustomControl

The use of CustomControl varies for each instance.

The naming convention of the control type CustomControl differs from the other
controls. However, the name should start with a lowercase word followed by an
uppercase format; for example, transactionHistoryChart.

GridPresents a set of records
as clickable rows of
data. Used along with
GridColumns, it can create
tabular data displays.
Each row of a grid can be
selected individually. In
addition, you can add a
multiselect tristate parent
checkbox to enable the
user to select multiple
rows in a grid. The parent
checkbox takes on a value
of #t when selected, #f
when cleared, and null
when any child checkboxes
have been selected
individually. For example,
when a user selects the
parent checkbox and then
clears one or more child
checkboxes or when a user
clears the parent checkbox
and then selects one or
more child checkboxes.
grd<Name>grdClientStmtAccts
GridColumnContained within a grid.
Allows a grid row to display
additional attributes for
each record.
col<Name>colRegTypeName
HTMLLabelDisplays a label in an
HTML format.
HTML<Name>HTMLLicense
ImageDisplays an image.img<Name>imgCompany
InputCreates a single or multiline
text entry field.
inp<Name>inpEditTime
LabelDisplays text, text and
icons, icons only, or
collections.
lbl<Name>lblDashboardIcon
MenuDisplays a collection of
MenuItems and separators as items in a pull-down menu. Compare with
Toolbox, which displays
the items as buttons in a horizontal bar.
mnu<Name>mnuMainAppToolbar
MenuItemDisplays one of the items
that will be displayed in a menu or toolbox. Menu
items can have other
menu items as children,
which creates a cascading
menu. Menu items without
children will trigger a UI
event when selected.
mit<Name>mitSave
LineChartDisplays a collection of
related data sets using a line chart visualization.
line<Name>lineStatusChart
PickerCreates a button that
launches a popup.
Commonly used to launch
more complex selection
screens.
pick<Name>pickViewPrincipal
PieChartDisplays a collection of
related data sets using a ine chart visualization.
pie<Name>pieAssetChart
PreviewerDisplays a preview of any attachments. Can also be used for uploading
attachments.
prev<Name>prevPortalAttachment
ScheduleDisplays a schedule.sched<Name>schedContact
ToolboxA specialized case of
menu. Toolboxes display a collection of MenuItems as buttons in a horizontal
bar. Compare with Menu, which displays items in a pull-down menu.
tbx<Name>tbxEdit
TreeDisplays a tree-based
navigation view of
hierarchical information.
tree<Name>treeHierarchy

Popups

Popups are modal dialogs that trigger UI actions. They are launched when users click a related picker control. Popup names use camelcase capitalization with an initial capital letter and end with a suffix based on the popup type. For example, a properties popup might have the name CampaignParticipantProperties.

The following table lists the layout types available in the Presentation layer. The Format column provides a name template for the popup type. The italicized portion of the format represents the variable part of the popup name. The non-italicized portion should remain standard for all popups of the given type.

Presentation layer popup naming convention

Popup typePurposeFormatExample
CreateClass creation dialog.ClassnameCreateHouseholdCreate
PropertiesDetailed edit dialog.ClassnamePropertiesCampaignParticipant
Properties
PickerAssociated collection
editing dialog.
ClassnamePickerEntityParticipantPicker

Form and portlet references

Form and portlet references embed forms and portlets within a screen of the application. Form and portlet reference names begin with a prefix based on the type of object being referenced, followed by the name of the referenced object. The result of this concatenation is a name using camelcase capitalization with a lowercase initial letter. For example, a form reference to the TrnEntityList form would have the name frmTrnEntityList.

The following table lists the reference types that you can include on a screen. Note that the Format column illustrates the format that should be used in naming references. The italicized portion of the format represents the name, which changes for every reference. The non-italicized portion of the format specifies the reference type.

Presentation layer screen reference naming convention

ReferencePurposeFormatExample
FormRefUse when you want to include a form. The form
reference should be associated with the form
specified in the second part of the reference.
frm<FormName>frmTrnEntityList
PortletRef UseUse when you want to include a portlet. The
portlet reference should be associated with the portletenabled
screen specified in the second part of the reference.
ref<ScreenName>refEntityNavigatorPortlet
PortletLayoutRef


Portal containers

Portal containers provide the architecture that allows you to create user interfaces to display or collect information.

NexJ CRM applications contain one or more workspaces. Each workspace will consist of portlets that contain elements which should follow standardized naming conventions.

The following table lists the elements of NexJ CRM that you will create and name. The Format column provides a name template for the element type. The italicized portion of the format represents the variable part of the name. The non-italicized portion should remain standard for all elements.

Portal container naming convention

NexJ CRM elementPurposeFormatExample
Context variableProvides a mechanism for changes in one portlet in a
workspace to be reflected in others in the same
workspace.
<ClassName>IdEntityId
Docked workspacesEnables instances of active workspaces to be
minimized on the NexJ application toolbar for later
use in their current state.
Docked<ClassName>DockedEntity
Global properties variableProvides a mechanism for sharing the value of variables between portlets
belonging to different workspaces.
ClassName (camel case)ContactListSearchContext


JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.