ForeUI is an easy-to-use UI prototyping tool, designed to create mockup / wireframe / prototypes for any application or website you have in mind.

All posts tagged reference

ForeUI V4.3: Dynamically Set Reference Target

ForeUI V4.3 is released today, and it has a new feature that allows you to dynamically set the target of Reference elements.

Dynamically Set Reference Target

The Reference element is available since ForeUI V3.0 and it is very useful to make a “copy” of existing element in your plot. After specifying the target element, the Reference element will behave exactly like the referred element. In previous versions, the target element has to be specify during the editing phase, and now it is possible to dynamically specify the reference target during the simulation. This makes Reference element very suitable for working as a placeholder, and you can dynamically specify its content. Below is an example that dynamically set the target of a Reference element to different existing elements (hidden Calendar, Table, Tree and PieChart).


You might wonder what does the button exactly do after you click it? Very simple, it just set the target of Reference_1 element to different element’s id. For example, when Button_1 is clicked, it sets the target of Reference_1 to {} (equals to “Calendar_1”). As a result, the Reference_1 becomes a reference of Calendar_1.


It is true that you can achieve the same effect by overlapping four hidden elements, and use buttons to control their visibilities. But setting target of Reference element is much more easier and will significantly simplify the behavior definition.

Highlight Current Selected Color

Now the color chooser will highlight the current selected color and mark it with a white frame. Now you can easily know what color is currently selected (mark with white frame), and what color will be selected (mark with black frame).


Improve Page Duplication

We improve the page duplication a little bit. Now the duplicated pages will have shorter default names, and they will be placed just under the page being duplicated.


How to Install the New Version?

If you haven’t installed ForeUI yet, you can download it here and then install it.

If you already installed ForeUI V4.x, you will receive a update notification and then you can update to newest version online.

ForeUI V3 Forecast 1: Reference Element


First of all we have to say sorry to whom are waiting for V3.0.  We are still working hard as we were, the new version is delayed because of some technical problems and force majeure.  We appreciate your patience and understanding.  Today the new version is not available yet, but we are entering the last phase before the delivery, the 3.0 beta should be delivered in May.  I will write some blog posts to introduce the new, exciting features in coming V3.0.

PS: recently we were frequently asked if newly bought license can be used in 3.0, our answers are “Yes”, since the paid user will have one year free upgrade period, including major updates.  So if you buy ForeUI license now, your license key can be used in V3.0 when it is released.

There are many new features in 3.0, today we will introduce one of them: Reference Element.  This is a actually killer feature, it is not just cool, it is a real time saver for creating big prototype project.  The new element, just as its name implies, can “point to” another element and emulate its appearance and behavior, i.e. work as a reference of that element.

When you drag the Reference element from element list into the editing area, its default look may like this:

Default look for Reference Element

The big question marks in the center implies that it does not point to any element yet, you can specify the target element from the tool pane:

Sepcify Reference Target

After selecting the target element, it will simulate the original (target) element’s look.  For example, you select a TextBox as the original element, then you will see:

They look totally the same.  But wait, it is not a static clone, when you modify the content of the original element, the reference element will change its content accordingly.  What’s more, you can move or resize the reference element as you need, without affecting the original element!

As you can see, the reference element can override the location, size and visibility properties of the original element.  This will be extremely useful when you need to create a set of elements with same content but with different layout parameters.

Reference element is not just a rendering trick, it actually emulate the behavior of the original element in the simulation, and keep synchronizing their state on the fly.  Please take a look at the example below:

Although the reference element can be interactive, you don’t need to define any event handler for it, since it will trigger event on the original element.  For example, when you click a reference button, it will trigger the “Element Clicked” event on the original button, thus the corresponding event handler will be invoked.

Reference element is also a good idea to share element between multiple pages.  Comparing with using master page, Reference element is much more flexible and will be suitable for more actual cases.  The Reference element can partially cover the requirements of “multi master page”, which are discussed here.

That’s Reference element, hope you will like it 🙂



New Documentation Online!

Hello everyone, recently we were working on the new documentation of ForeUI, and now it is online!  The new documentation has much more content than then previous document.  It includes about 200 pages and have all features introduced, and you will find the full reference for all elements, events, flow controls, actions and properties.  You could also make good use of the keyword index and full text searching tool.

We will keep improving the documentation.  If you have any comment or suggestion on it, please feel free to contact us.

Batch Changing Image Reference

Today I’d like to introduce an interesting feature in ForeUI: batch changing image reference.  Sometimes we have used an image a lot in a plot, but want to change it to another image.  How can we achieve that?  Changing the image reference one by one?  It works but very time consuming.  In this case we need to use the batch changing image reference feature in ForeUI.

Let’s expand the image dock by clicking the  button, then click the image that we want to change, a popup menu will be shown and we can find a  button on it, then we click it and choose the target file we want to change to, that’s all.  The GIF animation below shows the details:   change_img_link