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

All posts in Feature

September 27, 2013

ForeUI V3.40 is Released!

by

ForeUI V3.40 is now released. At the same time the “UI Theme Editor” plugin and the “Blueprint” UI theme are also available in ForeUI store.

New UI Theme, and Themes Menagement

Since this version, you are able to use a new “Blueprint” UI theme.  This new UI theme is not included by default, but you could download it in ForeUI store.    What’s more, by using the new “UI Theme Editor” plugin, you could custom existing UI themes or create your own UI theme from scratch.

In UI theme management window, you could import UI theme file (.thm) created by others, download UI theme from ForeUI store, or delete the downloaded UI themes.

After the first time you choose the “Create/Edit UI Theme” in popup menu, you will be prompt to download and install the plugin.  If you are using Windows 7 or above, please notice that you will need to run ForeUI as administrator to allow it to save plugin file in the install directory.  If you download ForeUI and install it again, the installer will automatically configure your system to run ForeUI.exe as administrator.  After installing the UI theme editor, you use it to define UI theme:

Easily Make Element Draggable

Sometimes you may want to make an element draggable in HTML5 simulation.  This could be achieved by handling several mouse events, as introduced in this article. Manually defining the behavior is not an easy job, it could be time consuming and easy to make mistake.  Now we have a better choice!  We could make element draggable with just single click, without knowing how it works.  You can find a new option in the popup menu for “Quick Define…” button, which will automatically generate the behavior for a specific element.

Zoom In/Out with Mouse Wheel

Since V3.40, you can hold Ctrl key on keyboard, and scroll your mouse wheel to zoom in or zoom out the working area.

Better Performance

We have made a lot efforts on improving the performance of processing huge plots.  You will notice that in V3.4, even those plots with a lot of pages and complex behavior could be edited fluently, also the memory usage may be reduced.  If you need to create complex plots frequently, you will definitely like this version.

Other New Features and Improvements

There are other new features, enhancements and bug fixings in this upgrade.  If you are interested, please get the complete list of changes in this version here.

Feature | ForeUI | Update
| | |
June 18, 2013

ForeUI V3.3 is Available Now

by

ForeUI V3.3 is just released today!  It has been a while since our last release, so thank you for the patience :-).  In this version we have made some internal alignments between ForeUI and the UI theme editor (as ForeUI plugin), so I guess you will see the brand new UI theme editor very soon.  Of course this new version contains many useful new features and enhancements, and fixed some annoying bugs.  Now let’s check them out.

Quick Define Behavior

This new feature allows you to quickly define some simple behaviors by much easier way.  After selecting an element (e.g. a button), you will see the “Quick Define…” button in behavior editor is enabled, which will bring you a list of quick define wizards.  You will be asked to choose target page, select target element, input message to display or the URL to go, as long as ForeUI collects enough information, it will generate the behavior definition for you.  This can significantly simplify your work.

Quick Define BehaviorThe same wizard lists are also present in the context menu (right click to show it).

Quick Define Wizards

“Mini” Sub Style

Since this version, all default UI themes support the “Mini” sub style for window, check box, radio button and radio button group. When you select one of these elements, you can find a drop-down list in the “Style” row in the tools panel, then you can choose between the default style and the “Mini” style.

Here is the comparison between default style and the “Mini” style, on different UI themes.

"Mini" Sub Style

In the future, with the UI theme editor, you will be able to create your own sub style, and easily apply it on your design (just like this “Mini” one).

Default Text Size

In previous versions you could specify the default font of the plot, but could not change the default text size.  Now you can!

Open the plot configuration window via the “Plot Settings…” button, you will see a new option that allows you to do that.

Set default text size

Please notice that, the default text size will only be applied to the elements that you NEVER changed its font size.  If you have ever changed it, it will remember your modification and will not take the default text size.  Is there a way to reset it to use the default font?  Yes, you just need to choose the element you want to reset, and then click the “Reload Style” button in the “Style” row in tools panel, as shown below:

Reload Style

Better Behavior Diagnose

We received some complains from customers that their HTML5 simulations stopped working, and they didn’t know why.  After we investigated the issues, it turned out that in 90% cases, the problem is in the expression in behavior.  To be precise, it was the lack of quote marks for string value in the expression that caused the issue.  The string value without quote marks could kill the whole simulation since it brings Javascript syntax error.  It was a shame that ForeUI could not automatically detect this kind of error in behavior.  Now after a lot of work on this, we are glad that ForeUI can finally prevent customers from this kind of errors.

Any illegal value in the expression will be detected and make the behavior entity unavailable (displayed with strike-through), and it will not really be included in the simulation.  Thus the simulation is protected and you also have the information to find out which line is wrong in behavior.  The example below was a killer to the simulation (because the “ForeUI Test” string value does not have quote marks enclosed).  Now it is detected as an error and will not harm your simulation anymore, and you can fix it by knowing it is wrong.

Wrong Expression

Hide Text on Behavior Editor Toolbar Button

This is really a minor enhancement, but I’d like to mention it, otherwise you may not notice it is there 🙂

The idea is to allow hiding the text on the toolbar button, in behavior editor.  Thus you don’t need to scroll the toolbar if you are running a lower resolution.  The new option can be found in the settings window, under the display tab.

Hide Text on Toolbar

This option is on by default (show text on button).  If you turn it off.  You will have a much smaller toolbar in the behavior editor and the button text will be displayed as tool-tip instead.

Behavior Editor Toolbar

Other New Stuff

There are more new features, enhancements and bug fixings.  I am not going to introduce them one by one since they are quite easy to understand if you check them out in the update history page.

Enjoy using ForeUI and feel free to contact us 🙂

Feature | ForeUI | Update
| | | | |
February 13, 2013

ForeUI V3.2: Element Tooltip, New Events and More

by

Element Tooltip

The newly released V3.2 introduced a very useful feature, which allows you to set the tooltip for any element.  It is a real tooltip: once the it is set, it will take effect automatically in the simulation.  You don’t need to simulate the tooltip by yourself anymore.

Here is how it will look like in the simulation:

If the tooltip is not set (empty), the element will not have tooltip in simulation, just like it did in the previous versions.

Selected/Unselected Event for Checkbox/Radio Button

Since this version, you don’t need to check the checkbox/radio button state in a conditional branching anymore, just handle the “Element Selected” or “Element Unselected” events for checkbox/radio button, and you will get notified when the element selection state is changed.

New Action to Change Button Text

Now you can use the new “Set Button Text” action to change the text on the button.  That means you can have some dynamic button in your prototype.

Change Element Order

If you create some elements with the same Z value, the only thing that decides how to overlap them is the element order.  The element with smaller order index will be rendered earlier.  Now you can change element’s order in the outline view: just select the element and click the “move up” or “move down” button at the bottom, you will see the overlap order is changed accordingly.

Hotkey to Group/Ungroup Elements

Now you can press Ctrl+G to group the selected elements, and press Ctrl+Shift+G to ungroup the group you selected.  If you are using Mac OS X, the hotkey should be Command+G/Command+Shift+G.

There are More

There are more enhancements in this version.  Please read the update history for more details.

Feature | ForeUI | Update
| | |
January 1, 2013

Lazy Loading of HTML5 Simulation

by

Since ForeUI V3.0, there is an “HTML5” tab in the settings window, and we can make some configurations for the HTML5 generation.  As shown in the figure below, there are two columns of configurations, and they have the same content.  The difference is that, the left column is for running HTML5 simulation (clicking the “Run Simulation” button in ForeUI), while the right column is for exporting HTML5 (clicking “Export HTML5” button in ForeUI). Most of the settings in this window explain themselves, except the “Lazy Loading”.  This option is turned off by default, which means all contents in the simulation have to be loaded by the web browser before showing the first page.  You will see the loading page before the entire loading process is done.  If the simulation is big and complex, you may have to wait for a long time, which is bad.  In this case, you can consider turning this “Lazy Loading” option on.  It will try to display the first page as soon as possible, and keep loading the rest part of simulation in the background.  If you load the simulation with a web browser that has status bar shown, you will see the loading progress like this: The first page of simulation will appear when all its content are loaded.  You can review and interact with the page and wait for the loading of other pages.  If reviewing the first page takes some time, the next page may have been loaded in the background before you switch to that page.  Thus we reduce the actual loading time for the simulation.

The figure below explains how the “lazy loading” option works:

What if the target page is not completely loaded when we try to show it?  This can happen if “Lazy Loading” option is turned on.  In this case we will see the loading page appears again and we have to wait for the loading of that page.

If the loading time of your simulation is acceptable, you don’t need to turn on the lazy loading.  If you want to shorten the loading time, you can try to turn the “Lazy Loading” option on.

I should mention that using a faster web browser (e.g. Chrome) will be a good solution to accelerate the simulation loading.  However it may not be acceptable in some cases.

Feature | ForeUI
| |
December 5, 2012

ForeUI V3.10 is Released!

by

ForeUI V3.10 is released on 5th December, 2012.  We have made a lot of optimization in this version and now it becomes much faster and smoother.  What’s more, there are some exciting new features and enhancements.

Import Plot

This feature is designed for team collaboration.  Your team members may work on different parts of the design as different plot files.  Finally you may wish to merge all plots together, and here is the way to go.  You can use the “Import Plot” feature to Import another plot into the current editing plot.  You can decide where to place the new pages (before or after current existing pages), and you can specify how to align the new pages with the old ones (if they have different size).

This feature is available in the “File” menu.  The “Import Plot…” item will be enabled if you have at least one plot opened for editing.

Background Image

From this version, you can specify the background image for the entire plot.  You will be able to find some new options after clicking the “Plot Settings…” button on bottom right corner.  The background image can be tiled horizontally, vertically or in both directions.  You can also configure how to align the background image with the page.

Compatible with Mountain Lion

We have a blog post about the issue when running ForeUI in Mountain Lion (Mac OS X 10.8).  Now the problem is solved.  ForeUI application is signed with Apple Developer ID certificate now, and you will get smooth experience when installing ForeUI into your Mountain Lion system.

What’s more, we have fixed some minor issues and made some improvements for Mac OS system.  We even created a new installer for it:

Input Element Id in Chooser

In previous versions.  When the element chooser is shown up, you will need to select element in the plot editing area.  If the target element is covered by other elements, or it is in another page, it will take you some time to find it out.  Now you have another choice: you can directly input the element’s id in the chooser.  You don’t have to remember all the IDs, just start typing the prefix of the id and you will see all candidates are listed, which is fancy 🙂

When the content assistance pops up, you can use the UP and DOWN keys on keyboard to choose the one you want.  Of course you can use mouse to select the element from the list.

Other Changes

There are more content in this update.  You can check out this page to see other new features, enhancements and fixed bugs in this release.

Feature | ForeUI | Update
| | | |
1…34567…23