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 in Feature

ForeUI V2.50: Auto Updater and Extended Free Upgrade Period

Hello everybody, we are pleased to release ForeUI V2.50 today.  From this version a brand new auto updater of ForeUI will be available.

Auto Updater

Since we update ForeUI frequently, an updater that can download and install updates automatically is really useful.  From V2.50, the updater will be shipped with every downloadable package.  When you launch ForeUI, it will detect the new version from Internet.   If new version exist, ForeUI will ask whether to update, if you choose “Yes, Sure”, ForeUI will quit and the updater will be launched.  The updater can work under Windows, Mac OS X and Linux systems.

The updater will download and verify the update package, then install it automatically.  It will definitely save your time 🙂

With this updater, releasing minor version for bug fixings become much easier.  If we confirm a serious bug, we can fix it immediately and push the update package to all users.

Fixed Bugs:

This version include three bug fixings, they are:

  • Bug_0246: The exported DHTML does not respect the ImageBox’s background color and opacity. (Thank John Giddings for reporting)
  • Bug_0247: If an ImageBox is embedded into Tabs, it can not be displayed in the exported DHTML. (Thank Boris for reporting)
  • Bug_0248: Copy selected element(s) into clipboard and paste into Microsoft Word, the transparent background is black. (Thank Tim for reporting)
    The figure below shows the effect of the fixing:

Extended Free Upgrade Period

The End User License Agreement (EULA) has been updated today.  Customers who purchase ForeUI license can update to new versions for FREE if any of the conditions below is satisfied:

  1. The new version has the same major version number with the old version.
  2. The license is purchased within one year.

The first condition exists at the very beginning, and the second condition is added in this update.

For existing ForeUI users, this change may bring you several months’ free upgrade period, without any additional payment.

For coming ForeUI users, this change is also a good news, since you will have free upgrade for at least one year, even another major version will be released soon.

The chart below shows the difference between previous and new license agreement:

The chart is created with ForeUI, and you can run its interactive simulation here.

ForeUI V2.47: Many New Features and Enhancements

Hello everyone, ForeUI V2.47 is out today and you can download now.  There are many new features and enhancements included in this version.  Please read on.

Exchange Data with Outside World

Now ForeUI can exchange data with external applications via clipboard.  You can copy image from any application and paste it into ForeUI as an ImageBox element; you can also copy the selected elements in ForeUI and paste them as an image into other drawing applications.

What’s more, you can directly drag image or plot file into ForeUI now.  The image file will be converted to an ImageBox element if you drag it to the editing area.  If you drag an image file into the image dock, it will be stored there.  Dragging a plot file to editing area or the tabs for plot will load the plot in ForeUI immediately.

More Powerful Actions

Now you can use properties in the “Pause a While” action, that means the delay time can be changed during the simulation.

What’s more, you can use properties in the loop:

Another enhancement is that you can change the size of ImageBox during the simulation:

And you can specify the target window for “Visit URL” action now:

Specify the Plot’s Default Font

From now on, you can specify the default font for every plot in the plot configure window:

The actual font for element rendering will be determined by the process below:

Reduce Redundant Files in DHTML

In previous versions, all ImageBox elements will be exported as a PNG files, even if they all link to the same image in image dock.  Now we reduce the redundant files, if multiple ImageBox elements link to the same image, only one PNG file will be exported for their references.

This enhancement will gain a very good result if many ImageBox elements are used in the plot.  Below is a comparison between the DHTML for “Fwitter.4ui” by V2.45 and V2.47:

Move Element Out of Bounds

From this version, you can move element out of the plot’s bounds.  You can turn on / off this in the settings window (default is on)

Other Enhancements:

  • Improve image dock rendering performance.
  • Auto add backslash before ” or ‘ when editing message of User Decision branching and Show Message action.
  • Generate log files to user’s directory.

Fixed Bugs:

  • Bug_0240: Line and Arrow Line elements can not be displayed in V2.45.
  • Bug_0241: Right-clicking element which is placed over a container (to bring out context menu), the element should not be embedded.
  • Bug_0242: Text element editor does not select all editable content when show up in V2.45.
  • Bug_0243: Move embeded element to upper/lower layer, may duplicate the element.
  • Bug_0244: If custom element contains embedded element, creating multiple instances of the custom element may cause duplicated ids.
  • Bug_0245: Sometimes the element id in action expression is not replaced correctly when doing copy/paste or creating custom element instance.

ForeUI V2.45: Optimize DHTML Generating and More

2

Hello everyone, ForeUI V2.45 is out today as scheduled.  This version is focusing quality and performance.  Enhancements cover DHTML generating optimization, new id allocate algorithm, popup tool windows management and much more.

DHTML Generating Optimization

This is an exciting enhancement as it decrease the file number and total file size, thus reduce the time for simulation loading.  How did we do achieve this?  It’s simple and straightforward: we merged the script files and images files for each elements, thus the file number can be decreased and the space for image file headers can be saved.  The effect of this kind of optimization will be quite significant when plot become big and complex.

Here are some testing results against V2.45 and V2.42, which use the “Fwitter.4ui” plot as testing sample.  We exported the plot to DHTML simulation using V2.42 and V2.45 respectively.  The file number and total file size are measured.  We open the native simulation in different web browsers to measure the local loading time, and then upload the DHTML simulations to web server and open the remote simulation in different web browsers to measure the remote loading time.

V2.42 V2.45
Number of DHTML files
676
308
Total size of DHTML files (bytes)
1293111
1095213
V2.42 V2.45
Time to load simulation locally (seconds)
IE 6.0
16
3
Firefox 3.6
~2
<1
Chrome 6.0
~2
<1
Safari 5.0
~2
<1
Opera 6.2
~2
<1
V2.42 V2.45
Time to load simulation from web server (seconds)
IE 6.0
252
43
Firefox 3.6
61
33
Chrome 6.0
59
30
Safari 5.0
60
32
Opera 6.2
180
31

It is not a strict testing, however the result can still give us a rough idea of the effect.  The good news is that the effect will be enlarged as the plot become bigger and more complex.  You may notice that the loading time on IE (and Opera for remote loading) is much longer than that on other browsers.  After optimize the loading performance on IE is improved a lot and the difference is much smaller now.

New Algorithm for Id Allocation

In this version we introduce a new new algorithm for id allocation, I bet you will like it 🙂

Before V2.45, if you copy an element with id “Button_1”, and paste into the same plot, the newly pasted element will have an id like “Button_1_1”.  If you repeat the steps several times, you may get an element with a very long id like “Button_1_1_1_1_1_1_1_1_1_1”.  That’s very bad thing as you can not count out how many “1” in the id by first glance, the ids are long and not readable.

Now in V2.45, if you copy and paste an element with id “Button_1”, the newly pasted element will have an id like “Button_2”.  After several repeats, you will get an element with id like “Button_18”, this is much better, isn’t it?

What’s more, the new algorithm will try to keep the additional info in ids.  e.g. if you copy and paste an element with id “CheckBox_Option_1”, you can get the new element with id “CheckBox_Option_2”.  That can help you to understand the new element is similar with the source element.

We are quite excited about the new algorithm as it can significantly reduce the average length of element ids, and make ids more readable.  We should really make it earlier 😛

Tool Windows Management

There are some tool windows in ForeUI, such as element selector, page manage window, category manage window etc.  Usually these window will be closed when focus is lost, however you can pin the window to keep it in the screen.  Before V2.45, if a tool window is pinned on screen, it will be placed at top and all popup stuffs like message box, popup menu, element editor etc. will be covered by the tool window.  Now we have enhanced this situation, see comparison below:

Another enhancement is that when minimizing the window of ForeUI, all opened tool windows will be hidden as well, thus you can work on other applications without interference.  When you restore ForeUI window, these tool windows will be restored too.

Avoid Negative Z Value

It is recommended not to use negative Z value, because in web browsers other than IE, the element with negative Z value can not receive any mouse event.  So we make some enhancements to avoid the negative Z value being used.

Now the and buttons on floating tool pane can only reduce the Z value down to zero.  If you are sure you need a negative Z value, you can input it directly, like this

Also the Auto Adjust Z Value feature will not set a negative Z value anymore.

Other Enhancements:

  • Validate path before saving the plot file.
  • Highlight the editable part of id when element id editor window shown up.
  • Allow setting z value for embedded element.

Fixed Bugs:

  • Bug_0236: Double clicking embedded element can not open its editor.
  • Bug_0237: Disabled Spinner element should not be able to spin.
  • Bug_0238: Can not disable Tabs/Vertical Tabs element in simulation.
  • Bug_0239: Button text is not correctly align with icon when icon is on top/bottom of text, and text width is less than icon, and using center alignment.

ForeUI V2.42: Export/Import Element Library File

3

Hello dear friends, ForeUI V2.42 is out today!  This version focus on simplifying the way to share custom element library internally, and has 6 bugs fixed.

Export/Import the .fcl File

Actually the .fcl file is a ZIP archives that contains one or more custom elements (.fce files).  When you submit your custom element library into our community site, your library will be packed into an .fcl file, which can be downloaded and extracted into a new category.  However we realize some companies need to share their libraries internally, so we accept the suggestion from Ari and Mark, and provide some facilities for this. As you can see we have added some new items in the popup menu for the button in “Custom Elements” category.  They are:

  • Load Elements from .fcl file…: Pick an .fcl file and then load all its elements into the “Custom Elements” category.
  • Load Elements from Directory…: Specify a directory and then load all elements inside into the “Custom Elements” category.
  • Clear Listed Elements: Remove all elements that listed in the “Custom Elements” category, will not delete the .fce files for them.
  • Export Listed Elements as .fcl File…: Export all elements that are currently listed in the “Custom Elements” category.

So the .fcl file becomes the reuseable file for internal library sharing, you can share it with your colleagues or friends via email, USB Disk etc.  Also the .fcl file can be loaded to any element category you created, the figure below shows how:

Resize Scrollable Container in Simulation

This is a small feature requested by purplebluegreen.  Now you can change the size of scrollable container during the simulation.  This may be quite useful when creating  interactive prototype.

Fixed Bugs:

6 bugs are fixed in this version.

  • Bug_0230: Can not export plot to images with command line if the plot contains element group. (V2.40 only) (Tim reported via email, Thanks)
  • Bug_0231: Use arrow keys to move embedded element, the wrapper group is not updated as well.
  • Bug_0232: Copy element and paste into different pages in the same plot, the location of element should not be changed. (Thank Ari for reporting)
  • Bug_0233: Embedded element may be positioned incorrectly at the first time that launch the simulation.
  • Bug_0234: Embed two or more ComboBox elements into Tabs container and then run simulation, only the first ComboBox has correct position.  (Thank Ed for reporting via email)
  • Bug_0235: Embed ComboBox element into Scrollable Container, the ComboBox’s popup should be displayed over the container.

ForeUI V2.40: Easier Container Usage & Element Path Links

6

Hello everyone, after one month holiday, we release V2.40 today.  This release includes some important new features and enhancements to ease the container usage, 7 bug fixings are also included.

Easier Container Usage

We have implemented some useful new features for Group container, including:

  1. Allow moving member within element group.
  2. Allow adding member to existing element group.
  3. Allow extracting member from existing element group.

Also we have made two related enhancements:

  • Auto grouping multi-selected elements before embedding into non-group container.
  • Can embed element into nested container.

All these together provide a much better experience on container usage.  You can embed multiple elements into container a time; you can embed more element into a container even it has embedded element already; you can extract any embedded element from its container; you can move or resize the embedded element…  The animation below shows the example of container usage, which has become much more flexible.

Element Path Links

If you use container a lot in your plot, sometimes you may feel difficult to select a specific container or embedded element.  From this version you can find the “Element Path Links” in the floating tool pane if you select an embedded element or a non-empty container element.  These links can help you to quickly select the container, the sibling or child element for current selected element.

Fixed Bugs:

  • Bug_0223: “Manage Categories” window (not pinned) will be hidden time by time if floating tool pane is translucent.  (Thank Mark for reporting)
  • Bug_0224: Multiple instances of custom element may have duplicated ids for embedded element.
  • Bug_0225: Element is not valid after being embedded into ScrollableContainer, until moving the container a bit.
  • Bug_0226: Copy a Tabs (or Vertical Tabs) element that contains image elements, then paste it to another plot, the images are not migrated to the plot.
  • Bug_0227: Can not click to switch tab in edit area for Tabs or Vertical Tabs if they are embedded.
  • Bug_0228: Element chooser: select an embedded element, then select a non-embedded element, the embedded element should be unselected.
  • Bug_0229: Newly created, unsaved plot can not use the display controller to show/hide elements.