Window definition


2. window definition

2.1 general informations

Window is basic root component. It can contain all types of components (besides another 'window'). Window is represented in browser as 'white page'. Every window has ribbon on top.

2.2 xml structure

Window can be defined in two modes:

2.2.1 Basic window

Definition of basic window is simillar to definitions of other components:

<component type="window" name="windowName" reference="windowReferenceName">
      <ribbon alignment="alignValue">

            // HERE YOU PUT RIBBON GROUP DEFINITIONS

      </ribbon>

      // HERE YOU PUT WINDOW CONTENT COMPONENTS DEFINITIONS

</component>

Where:

  • windowName - is a name of window component
  • windowReferenceName - is a reference name of window component
  • alignValue - see ribbon definition

2.2.2 Tabbed window

Tabbed window defines window which content is splitted into one or more tabs. Its definition is:

<component type="window" name="windowName" reference="windowReferenceName">
      <ribbon alignment="alignValue">

            // HERE YOU PUT COMMON RIBBON GROUP DEFINITIONS

      </ribbon>
      <windowTab name="tabName" reference="tabReferenceName" defaultVisible="boolean">
            <ribbon>

                  // HERE YOU PUT RIBBON GROUP DEFINITIONS FOR THIS TAB

            </ribbon>

            // HERE YOU PUT TAB CONTENT COMPONENTS DEFINITIONS

      </windowTab>

      // HERE YOU CAN PUT ANOTHER TAB DEFINITIONS

</component>

Notice, that every tab has structure simillar to window component.

If tabbed window contains only one tab, it looks exacly the same as basic window.

2.2.3 extra options

Window component can have extra options:

  • header:

This option defines if window has header. It can contain two values: 'true' or 'false'. Default value is 'true'.

  • fixedHeight

This option defines if window has fixed height. It can contain two values: 'true' or 'false'. If set to 'true', window will be always resizying to fit to the browswer's screen (vertical scroll will be inside). Default value is 'false'.

2.3 ribbon definition

Ribbon is menu-like structure. It contains buttons that performs action on click. Ribbon section in window content is defined by 'ribbon' tag:

<ribbon alignment="alignValue">

      // HERE YOU PUT RIBBON GROUP DEFINITIONS

</ribbon>

Where:

  • alignValue - defines ribbon items alignment. Supported values: "left", "center" and "right" (optional, default "left")

2.3.1 general ribbon group structure

To define a ribbon group you can use template:

<group template="templateName" defaultAuthorizationRole="ROLE_defaultAuthorizationRole"/>

or define your own group:

<group name="groupName" defaultAuthorizationRole="ROLE_defaultAuthorizationRole">

      // HERE YOU PUT GROUP ITEM DEFINITIONS

</group>

Where:

  • defaultAuthorizationRole - defines default role necessary to access this ribbon group. Values can be one of roles defined for application. (optional, default value: ROLE_USER)
2.3.2 ribbon group templates

Available ribbon group templates are:

template name

description

presumptions

navigation

Contains 'back' button

- window has reference name 'window'

gridNewAndRemoveAction

Contains 'new' and 'delete' buttons for grid

- window contains grid
- grid has reference name 'grid'

gridNewCopyAndRemoveAction

Contains 'new', 'copy' and 'delete' buttons for grid

- window contains grid
- grid has reference name 'grid'

gridNewAndCopyAction

Contains 'new' and 'copy' buttons for grid

- window contains grid
- grid has reference name 'grid'

gridNewActionContains 'new' buttons for grid- window contains grid
- grid has reference name 'grid'
gridRemoveActionContains 'delete' buttons for grid- window contains grid
- grid has reference name 'grid'
gridActivateAndDeactivateActionContains 'activate' and 'deactivate' buttons for grid- window contains grid
- grid has reference name 'grid'
gridGenericExportActionContains 'pdf' and 'csv' buttons for grid - to export elements to appropriate files.- window contains grid
- grid has reference name 'grid'

formSaveCopyAndRemoveActions

Contains 'save', 'saveBack', 'saveNew', 'copy', 'cancel' and 'delete' buttons for form

- window contains form
- form has reference name 'form'

formSaveAndRemoveActions

Contains 'save', 'saveBack', 'cancel' and 'delete' buttons for form

- window contains form
- form has reference name 'form'

formCopyAndSaveNewActionsContains 'saveNew' and 'copy' buttons for form- window contains form
- form has reference name 'form'

formSaveAndBackAndRemoveActions

Contains 'saveBack', 'cancel' and 'delete' buttons for form

- window contains form
- form has reference name 'form'

formSaveAndCancelActionsContains 'save', 'saveBack' and 'cancel' buttons for form- window contains form
- form has reference name 'form'

formSaveAction

Contains 'saveBack' button for form

- window contains form
- form has reference name 'form'

formActivateAndDeactivateActionContains 'activate' and 'deactivate' buttons for form- window contains form
- form has reference name 'form'
2.3.3 ribbon item definition

Basic ribbon item definition can be described by schema:

<itemType name="itemName" icon="itemIcon" action="itemAction" state="initializeState" message="initializeMessage">

      // HERE CAN PUT ITEMS OF DROPDOWN MENU

</itemType>

Where:

  • itemType - type of item (see below)
  • itemName - is an identifier of this item
  • itemIcon - defines what icon should be used (optional)
  • itemAction - defines action on click on this item (see below)
  • initializeState - defines state of button ('enabled' or 'disabled') - state of button can be changed later via script, listener or hook.
  • initializeMessage - defines info message of button (translation code) - it can be changed later via script, listener or hook.
2.3.4 avalible ribbon items

Available item types are:

name

description

bigButton

Simple big button

bigButtons

Big button, that can contain dropdown menu

smallButton

Simple small button

smallButtons

Small button, that can contain dropdown menu

smallEmptySpace

Empty space size of small button, used to position ribbon items more precisely

2.3.5 ribbon item actions
  • general informations

Ribbon action can be defined as list of ';' separated commands. When define more than one command, next command will be started after end of execution of previous one. If any command in flow fail (ex. unsuccessful form validation in 'save') next defined commands will not be executed. Each command is defined as:

#{componentReferenceName}.commandName(commandArguments);

Where:

  • componentReferenceName - reference name of component on which command will be executed
  • commandName - name of command (see below)
  • commandArguments - arguments of command (optional)
  • avalibleCommands

Currently system supports command fireEvent:

#{componentReferenceName}.fireEvent(eventPerformer, eventName, eventArgs...);

// or
#{componentReferenceName}.fireEvent(eventPerformer, {
   name : eventName,
   args : eventArgs, // optional
   callback : eventCallback // optional
});

Where:

  • componentReferenceName - reference name of component on which command will be executed
  • eventPerformer - reference to the component which performs event (optional)
  • eventName - name of event
  • eventArgs - Array cotaining more arguments of event (optional)
  • eventCallback - parameterless function which will be called after event handler completes its job. (optional)

and generateReportForEntity

#{componentReferenceName}.generateReportForEntity('pluginIdentifier', 'reportName', 'fileExtension');

Where:

  • pluginIdentifier - plugin identifier
  • reportName - report name
  • fileExtension - extension for the report file: pdf or xls