i4designer Knowledgebase

The design area


Check out this article to learn more about the areas and behaviours we can distinguish in the i4designer workspace.

The main view of the Designer page is the design area which is the actual work-space, split up between:


The design area

The navigation page bar

At the top of the design area the page navigation bar is available. When building projects with multiple pages and navigation structures, the user can easily switch between pages or add new ones. Even though multiple pages can be opened at the same time, the number of page tabs is limited by the amount of space required by the quick actions toolbar.

To avoid confusion, when multiple pages are being managed, the page that is currently in work can be easily distinguished due to the red highlight.


The navigation page bar

The user can also add pages to the current project, without switching to the Pages entry. By clicking the Add_button.jpg button in the navigation page bar, a new page with a system allocated name is added.


The Add page button

Further on, the navigation page bar allows the user to hide the contextual and global actions area, by using the close_button.jpg button and to unhide them by clicking the open.jpg button.

The drawing surface

The drawing surface is the area where the actual design actions take place. Depending on the project page size and the user's screen resolution, the i4designer drawing surface is equipped with a a vertical and a horizontal scroll bar, hence allowing the user to have a complete overview upon the project in work.

This view is also split up into two sections:

The white board

The so called white board is the actual work space, where the user can start building the project, by adding controls to the page. Controls can be added to the page either by double-clicking them in the Toolbox panel or by dragging and dropping them on the page.


Dragging and dropping controls on the page

The user can easily interact with the i4designer controls available on the project page in multiple ways:

  • Editing the properties of a control - by clicking or double-clicking on a control the Properties panel is opened in the i4designer global actions area. Here, the user can change the control configuration, appearance, size, typography, layout, security, color pallet and many others. Each control features it's own set of properties, that will be described in the upcoming chapters.


    The Control properties editor

  • Manually adjusting a control position on the project page by clicking and dragging the control.


    Drag control on the project page

  • Manually adjusting a control size by clicking and dragging the control's margins and edges. During the resizing process, a text overlay is displayed over the component indicating the width and height of the control. The resize behaviour can be constrained to only one direction (e.g. only width resizing) or to aspect ratio-based resizing (e.g. keeping the shape square).


    Resize control

  • Rotating a control by clicking and dragging the rotate handle on the top of the control. The rotate handle allows the user to drag it with the mouse and applying rotation to the shape.


    Rotate control

Due to the multi-select functionality, the user can interact with multiple page components, as follows:

  • via mouse selection - by holding down the right or left mouse button and dragging a selection rectangle over the components of interest. Once the button is released, the contained components are selected for further actions.


    Selecting multiple components via mouse selection

  • via Control click - by holding the CTRL key and alternatively clicking on the components of interest, with the left mouse button. The selected components can be positioned anywhere on the drawing surface, not necessarily next to each other. To deselect any of the components in the collection, the user can click it again, while holding the CTRL key.


    Selecting multiple components via Control click

  • via Control all - By clicking the CTRL key and alternatively clicking the A key, applies a selection upon all page components. To deselect any of the components in the collection, the user can click it again, while holding the CTRL key.


    Selecting multiple components via Control All

Once multiple components have been selected, the user can manage them as follows:

  • move them on the drawing surface (via drag and drop)

  • copy all the selected components (via CTRL + C keys) and paste them (via CTRL + V keys)

  • cut all the selected components (via CTRL + X keys) and paste them elsewhere (via CTRL + V keys)

  • duplicate all the selected components (via CTRL + D keys)

  • remove all the selected components (via Delete key)

When selecting multiple components, the user can access the Components group Properties panel. In this view the user can manipulate the position of the components group, by changing the values of the following properties:

  • Properties_of_group_of_components.jpg

    The Components group Properties

    Left - adjusts the components group position horizontally.

  • Top - adjusts the components group position vertically.

As we learned by reading the quick actions area article, the user can enable or disable further visual aids such as the grid view, the ruler views and the guide lines.

To avoid data loss due to a crash, freeze or user error, each of the above listed changes are saved automatically by the i4designer. A visual cue is also provided each time changes on the white board occur.


Auto save visual cue


Objects positioned outside the white board will not be visible at run-time.

The "chess" board

The so called "chess" board is the area surrounding the white board. Unlike the white board, elements positioned on this area will not be visible at run-time.

Besides serving as a frame for the white board, the chess board area does not provide further actions or settings to the user.