Navigation:  GUI Introduction >

Plot Editing Area

Previous pageReturn to chapter overviewNext page

The plot editing area is the most important view for you to edit your prototype.

Your page will be rendered in this area and you can place as many elements here as you need to build your prototype.

Tab for Plot

ForeUI supports editing multiple plots at the same time.  Each plot will has a corresponding tab on top of the plot editing area, you can switch to certain plot by single clicking on its tab.


There is a small "x" icon in the tab of editing plot, clicking on this icon will close the corresponding plot.  If your plot is modified and not saved yet, ForeUI will prompt you to save the plot before closing. You can also Use Hotkey to close the current editing plot, which is Command+W in Mac OS and Ctrl+W in other operating systems.

Undo and Redo

You can always use the undo/redo button in the toolbar to undo/redo the operation.  You can also use Ctrl + Z and Ctrl + Y (Command + Z and Command + Y in Mac OS) to do the same.


Context Menu

At anytime, you can click the right mouse button to bring up the context menu, which can help you to access some operation quickly.  The context menu may vary according to your current selection.


Element Overlapping

When you place elements in your page, you will care about how they overlap each other.  In ForeUI, there are four factors that can affect how elements are overlapped in your page.

1.Z Value

Every element has its own Z value and this attribute will affect the overlapping order of elements.  Like HTML rendering, the elements with lower Z values will be rendered first.

It is not recommend to specify negative Z value to element, since different browsers may treat it in different way, when running the HTML5 simulation.

The default Z value for all elements are zero.

2.Order of Creation

If two elements have the same Z values, the order of their creation will determine the overlapping order: the first element will be rendered first.

3.Embedding Relationship

If an element is embedded into container element, it will be rendered above the container element.  If the container element is covered by element C, the embedded element will never cover element C, no matter how big Z value it has.

If two elements are embedded into the same container element, their overlapping order is determined by their Z values, then by their order of creation.

4.Master Page

If a page has master page.  The elements from master page always have earlier order of creation.  So usually the content from master page will be rendered as a "background" of current page.  However, if any element in the master page has higher Z value, that element can cover the content in current page.

Snapping System

When you drag and move element(s), it is possible to align the selected element(s) with other content by using the snapping system.

There are three snapping modes in ForeUI, you can switch snapping mode from the toolbar:


1.No Snap

In this mode, elements can be moved freely.

2.Object Snap

This is the default mode.  Element will try to align with each other, or keep a fixed distance to each other.


3.Grid Snap

In this mode, element will try to align with the grids in the background.