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

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.


AutoSave 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.