i4designer Knowledgebase

The design area

Abstract

Check out this article to learn more about the areas and behaviors 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.jpg

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.

Note

When opening multiple pages, the pages will be opened as tabs. When refreshing the browser or logging out of I4designer, the last edited page will be active and selected.

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.

Red_page_is_opened.jpg

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.

Add_page.jpg

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 vertical and a horizontal scroll bar, hence allowing the user to have a complete overview of the project in work.

This view is also split up into two sections:

The whiteboard

The so-called whiteboard is the actual workspace, where the user can start building the project, by adding components to the page. Components can be added to the page either by double-clicking them in the Toolbox panel or by dragging and dropping them on the page.

drag_and_drop.jpg

Dragging and dropping components on the page

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

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

    Control_properties_editor.jpg

    The Component properties editor

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

    drag_to_change_position.jpg

    Drag component on the project page

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

    drag_to_resize_png.jpg

    Resize component

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

    change_orientation_png.jpg

    Rotate component

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.

    mouse_selection_method.jpg

    Selecting multiple components via mouse selection

  • via Control click - by holding the CTRL key and alternatively clicking on the component(s) 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.

    control_and_click_method.jpg

    Selecting multiple components via Coontrol 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.

    Control_all.jpg

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

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

AutoSave.jpg

Autosave visual cue

Important

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

The "chess" board

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

Besides serving as a frame for the whiteboard, the chessboard area does not provide further actions or settings to the user.