Creating the portal application user interface
To create an application user interface, you must create forms to connect the application with your data sources and screens to display the information.
Developing new portlet screens
Your application must contain at least one screen. Screens collect and lay out forms, controls, and sub-layouts.
Create a new screen for your portlet application in the NexJ Studio Presentation layer.
To create a new screen:
The new screen has been created.
You can now add controls (including tile controls), layouts, form references, and portlet references to the new screen.
For more information see Screens.
User interface elements for portlet screens
Use controls (including tile controls), layouts, form references, and portlet references to develop a portlet screen in NexJ Studio.
You can add the following types of user interface elements to a screen.
Controls
Button
Triggers a UI event when clicked.
Label
Displays text, text and icons, icons only, or collections.
Menu
Displays a collection of MenuItem controls and separators as items in a pull-down menu. Compare with Toolbox, which displays the items as buttons in a horizontal bar.
You must add this element using the Outline view or the Source tab in NexJ Studio. It can only be added to a form or a screen.
MenuItem
Displays 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.
MenuLink
Displays a non-clickable menu item which has a required submenu.
Toolbox
A specialized case of menu. Toolboxes display a collection of MenuItem controls as buttons in a horizontal bar. Compare with Menu, which displays items in a pull-down menu.
Tile controls
ActionTile
Add an ActionTile to your application to display summary information about an individual with buttons to perform related actions.
CaptionValueTile
Add a CaptionValueTile to your application to display basic information. CaptionValueTile controls can also collect information using controls, including menus and fields.
DetailEditTableTile
Add a DetailEditTableTile to your application to create a simple one or two column table with one or two items per row.
ExpandableTextTile
Add an ExpandableTextTile to your application to display summary information when collapsed and detailed information when expanded. It can only contain text.
ExpandableTile
Add an ExpandableTile to your application to display summary information when collapsed and detailed information when expanded. It can contain plain text, formatted text, and images.
MultilineRepeaterTile
Add a MultilineRepeaterTile to your application to display images with one, two, or three lines of related text.
PopupTile
Use a PopupTile in your application to display information in a popup dialog with a specific style that can have scrolling enabled.
SectionHeaderTile
Add a SectionHeaderTile to your application to display a title at the beginning of a section.
TwoColumnTableTile
A TwoColumnTableTile can display information in an ExpandableTile. These tiles contain basic information in a two column table.
TwoLineCaptionTile
A TwoLineCaptionTile can display information in an ExpandableTile. These tiles contain two lines of text using four containers with predefined alignments.
Layouts
GroupLayout
Displays a collection of zero or more sub-layouts (group, splitter, or table) where only one sub-layout is visible at a time.
CaptionLayout
Appears at the top of its parent layout. Typically used to display a summary of the information from other parts of the parent layout. You must add this element using the Outline view or the Source tab in NexJ Studio. It can only be added to another layout.
SplitterLayout
Displays a collection of one or more splitter zones separated by a slider (horizontal or vertical), allowing users to resize the zone.
TableLayout
Partitions an area into columns and rows.
References
FormRef
Use when you want to include a form. The form reference should be associated with the form specified in the second part of the reference.
PortletRef
Use when you want to include a portlet. The portlet reference should be associated with the portlet-enabled screen specified in the second part of the reference.
Developing a new portlet form
Forms contain user interface controls to display data for querying, viewing, creating, or editing.
Forms are bound to classes. They contain a root layout of controls such as buttons, labels, or grids, and additional optional sub-layouts.
Create a new form in the NexJ Studio Presentation layer.
To create a new form:
The new form has been created.
You can now add controls (including tile controls), layouts, and portlet references to the new form. You can also edit a screen to add a reference to this new form.
For more information, see Forms.
User interface elements for portlet forms
Use controls (including tile controls and chart controls), layouts, and portlet references to develop a form in NexJ Studio.
You can add the following types of user interface elements to a form.
Controls
Browser
Embeds a web browser.
Button
Triggers a UI event when clicked.
Calendar
Displays a small calendar.
Checkbox
Creates 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
.
Combo
Creates an entry field in which a user can type or select one of a list of possible values.
CustomControl
The use of CustomControl varies for each instance.
Grid
Presents a set of records as clickable rows of data. Used along with GridColumn controls, 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.
GridColumn
Contained within a grid. Allows a grid row to display additional attributes for each record.
HTMLLabel
Displays a label in an HTML format.
Image
Displays an image. Input Creates a single or multi-line text entry field.
Label
Displays text, text and icons, icons only, or collections.
Menu
Displays a collection of MenuItem controls and separators as items in a pull-down menu. Compare with Toolbox, which displays the items as buttons in a horizontal bar. You must add this element using the Outline view or the Source tab in NexJ Studio. It can only be added to a form or a screen.
MenuItem
Displays 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.
MenuLink
Displays a non-clickable menu item which has a required submenu.
Picker
Creates a button that launches a popup. Commonly used to launch more complex selection screens.
Previewer
Displays a preview of any attachments. Can also be used for uploading attachments.
Report
Displays a report viewer.
Schedule
Displays a schedule.
Toolbox
A specialized case of menu. Toolboxes display a collection of MenuItem controls as buttons in a horizontal bar. Compare with Menu, which displays items in a pull-down menu.
Tree
Displays a tree-based navigation view of hierarchical information.
Chart controls
Chart controls in NexJ Studio use the Highcharts JavaScript library. For more information about these controls, see https://www.highcharts.com/docs/index.
- BarAndLineChart
- BarChart
- FunnelChart
- LineChart
- PieChart
Tile controls
ActionTile
Add an ActionTile to your application to display summary information about an individual with buttons to perform related actions.
CaptionValueTile
Add a CaptionValueTile to your application to display basic information. CaptionValueTile controls can also collect information using controls, including menus and fields.
DetailEditTableTile
Add a DetailEditTableTile to your application to create a simple one or two column table with one or two items per row.
ExpandableTextTile
Add an ExpandableTextTile to your application to display summary information when collapsed and detailed information when expanded. It can only contain text.
ExpandableTile
Add an ExpandableTile to your application to display summary information when collapsed and detailed information when expanded. It can contain plain text, formatted text, and images.
MultilineRepeaterTile
Add a MultilineRepeaterTile to your application to display images with one, two, or three lines of related text.
PopupTile
Use a PopupTile in your application to display information in a popup dialog with a specific style that can have scrolling enabled.
SectionHeaderTile
Add a SectionHeaderTile to your application to display a title at the beginning of a section.
TwoColumnTableTile
A TwoColumnTableTile can display information in an ExpandableTile. These tiles contain basic information in a two column table.
TwoLineCaptionTile
A TwoLineCaptionTile can display information in an ExpandableTile. These tiles contain two lines of text using four containers with predefined alignments.
Layouts
GroupLayout
Displays a collection of zero or more sub-layouts (group, splitter, or table) where only one sub-layout is visible at a time.
CaptionLayout
Appears at the top of its parent layout. Typically used to display a summary of the information from other parts of the parent layout. You must add this element using the Outline view or the Source tab in NexJ Studio. It can only be added to another layout.
SplitterLayout
Displays a collection of one or more splitter zones separated by a slider (horizontal or vertical), allowing users to resize the zone.
TableLayout
Partitions an area into columns and rows.
References
PortletRef
Use when you want to include a portlet. The portlet reference should be associated with the portlet-enabled screen specified in the second part of the reference.
Adding user interface elements in the Layout tab
You can add most user interface elements, including controls, layouts, and references, to screens and forms using the Layout tab in the screen or form editor.
Info
Some elements cannot be added to screens or forms using the Layout tab, because they are only supported in specific locations in a screen or form. These elements need to be inserted using the Outline view. These elements are the following:
- Menu controls, including MenuItem controls and MenuLink controls
- CaptionLayout elements
To add a user interface element to a screen or a form:
The user interface element is added to the screen or form.
Adding user interface elements in the Outline view
You cannot add certain user interface elements to screens and forms using the Layout tab. You need to add these elements using the Outline view instead.
You may add any user interface element to a form or a screen using the Outline view. However, you must use the Outline view to add the following elements:
- Menu controls, including MenuItem controls and MenuLink controls
- CaptionLayout elements
To add a user interface element to a screen or a form:
- In NexJ Studio, navigate to the Presentation layer.
The user interface element is added to the screen or form.