Screens

Screens We call ’screen` the collection of components and views that are concurrently displayed in Effector. A screen may be built of one or more components. Screens comprising more components are called split screens. On these screens, users have the opportunity to define so-called splits, which may be vertical or horizontal. These splits define the size of the area the components can take up. The size of individual components is not fixed: by dragging these splits the user can resize them.

Single-component screen:

Single-component screen

Split screen:

Split screen

Location in the system

The primary task of the screens is to organize the components representing data in the browser for the user. It is practical to position the more important data to the left and the less important or secondary components on the right-hand side. As for their physical location, the screen defining files are stored in the ’screen` folder.

The following figure illustrates its direct connection/location in the system, which is also in line with its main tasks.

Screen in the system

Available features

  • Defining the structure of the screen
  • Connecting components to one another
  • Setting screen style
  • Setting screen size
  • Regulating screen visibility

Examples

Single-component screen:

<Screen xmlns="http://effector.hu/schema/ns/screen">  
    <Caption>Admin</Caption>
    <Component>ComponentAdmin</Component>  
</Screen>

Split screen (complex example):

<Screen xmlns="http://effector.hu/schema/ns/screen">
    <Caption>MasterData</Caption>
    <Splits>
        <Split id="1" orientation="Vertical" splitterDistance="50%">
            <Component1 type="Component" id="1">ComponentMasterData</Component1>
            <Component2 type="Component" id="2">ComponentMasterDataEdit</Component2>
        </Split>
    </Splits>
    <Connections>
        <Connection fromComponent="1" toComponent="2" />
    </Connections>
</Screen>

Screen split into 4 sections:

<Screen>
    <Caption>DashBoard</Caption>
    <Splits>
          <Split id="1" orientation="Horizontal" splitterDistance="50%">
                <Component1 type="Split">11</Component1>
                <Component2 type="Split">12</Component2>
        </Split>
        <Split id="11" orientation="Vertical" splitterDistance="50%">
            <Component1 type="Component" id="1">ComponentChart1</Component1>
            <Component2 type="Component" id="2">ComponentChart2</Component2>
        </Split>
            <Split id="12" orientation="Vertical" splitterDistance="50%">
                <Component1 type="Component" id="3">ComponentChart3</Component1>
                <Component2 type="Component" id="4">ComponentChart4</Component2>
        </Split>
    </Splits>
    <Connections />
</Screen>

Screen structure definition

In case of a single-component screen, the name of its component, that is, the XML file name without extension, is specified in a <Component> tag. See the above example. The <Caption> tag will be the screen’s name. This name will appear on the Effector Studio interface.

  • Users can also specify the maximum width and maximum height of the individual screens, however, the values will only be e recognized as pop-up windows. In case of a pop-up screen, the maximum size of the screen can be defined by setting the <Width> and <Height>, so the displayed screen will not take up too much space when there is only few data or entry fields. The values to be set here can be defined in percentage or pixels. In case of pixels only the value has to be given, whereas in case of percentage the unit (%) should also be provided. Optional tags.

First, we define a simple, single-component screen:

<Screen xmlns="http://effector.hu/schema/ns/screen">  
    <Caption>AdminEdit</Caption>
    <Component>ComponentAdminEdit</Component>
    <Height>50%</Height><!—interpreted as percentage -->
    <Width>550</Width><!-- interpreted as pixel -->
</Screen>

Optionally, a visibility rule may be set, for further information on this see below.

Defining split screens:

We can define split screens by using the so-called <Splits> container node. This container contains the <Split> definitions representing the splits, of which any number can be added.

Every <Split> has to contain an ID which will play a role in setting up the hierarchy and embedding the splits into one another. This ID can be set in the id attribute, its type is a whole number.

Further attributes:

  • orientation: it defines the direction of the split. Its possible values can be Horizontal and Vertical.
  • ’splitterDistance`: it defines the ratio of the split. This value can be specified in percentage or pixels. In case of percentage the unit (%) must be clarified, while in case of pixels no unit should be stated.
  • disableDrag : optional logical attribute; the dragging of splits between certain panels can be disabled with it, for example if the value of the ’splitterDistanceis set to 30% and thedisableDragtotrue, the user will not be able to resize the ratio of the split. It defaults tofalse`.

Split content:

The inner structure of the ’splitnode is fixed, each containing precisely two nodes (Component1andComponent2nodes), which may be a specificComponent` object or a further split. Below is an example for a screen split into two.

Attributes of Component1 and Component2 nodes:

The type attribute defines if the given node signifies a specific component or another split. Its value may be:

  • Component: in this case the node’s value is the name of a specific component (file name without extension). Accordingly, the id attribute must be filled in because this will identify the individual components in the connection network to be set up later. The value of the id attribute must be unique on the given screen with respect to the components.

  • ’split: In this case the give node represents another split. Its value should be set to the ID of the ’split that we would like to display in place of the panel. This way a screen can be split almost to an arbitrary depth. The example below shows that Component2 of the first split references the second split.

Example: 2-panel screen (Component):

<Splits>
    <Split id="1" orientation="Vertical" splitterDistance="50%" disableDrag="true">
        <Component1 type="Component" id="1">ComponentDummy1</Component1>
        <Component2 type="Component" id="2">ComponentDummy2</Component2>
    </Split>
</Splits>

Example: 3-panel screen (’split`):

<Splits>
    <Split id="1" orientation="Vertical" splitterDistance="50%">
        <Component1 type="Component" id="1">ComponentDummy6</Component1>
        <Component2 type="Split">2</Component2>
    </Split>
    <Split id="2" orientation="Horizontal" splitterDistance="50%">
        <Component1 type="Component" id="2">ComponentDummy7</Component1>
        <Component2 type="Component" id="3">ComponentDummy8</Component2>
    </Split>
</Splits>

Connecting components to one another

Once the location of the components has been defined, the connections among the different components should also be specified. The direction of filtering can be set by connecting the components. This determines the filters` direction.

We can define the connections in the ’screen\Connectionscollection using theConnection` nodes. These definitions assign two components and specify the direction of their relation.

A circular reference is not allowed.

What does it mean?

If several (minimum 3) components are defined, a circular reference is possible: one component filtering a second, the second filtering the third and the third filtering the first.

<Connections>
    <Connection fromComponent="1" toComponent="2" />
    <Connection fromComponent="1" toComponent="3" />
</Connections>

A unique HTML can be generated for the screen with which its appearance can be modified. This HTML code section can be inserted by using the Form\TemplateURL node. In the node, the path of the template related to the screen should be defined.

  • Last update: 25 weeks 5 days ago
  • Effector