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

March 29, 2019

ForeUI 5.0: Retina Support, Bezier Curve, and Better Code Editor

by

Hello everyone, today we are so glad to announce the release of ForeUI version 5.0!

What’s New?

Since this version, ForeUI fully supports Retina and other HD displays. The icons in ForeUI are remade so they have can high quality in Retina display.

maingui

You will notice a new element named “Bezier Curve” is added into the element panel now. You can freely control the shape of bezier curve by dragging its 4 control points in the editing area.

bezier_curves

The bezier curve element unlocks a lot of possibilities for creating complex geometric figure in ForeUI, and you can still get the identical look of these figure in exported PDF and HTML5 simulation.

The Html, Css and Script elements have much better code editors now. The code editor can now highlight the syntax and allows folding the code, which makes reviewing and editing much easier.

code_editors

The table editor can now import CSV file as the table content. Just click this new button in the toolbar and you can choose to import different formats of CSV files.

csv_import

A full list of new features and enhancements can be found here.

How to Update?

The version 5.0 is a major update. If you are using older version already, you will not be able to update it via the online updater, and you will have to download the new installer here and install it.

Feature | ForeUI | Update
| | | |
March 13, 2018

ForeUI V4.6: Dynamically Add/Remove ComboBox Item in Simulation

by

ForeUI V4.6 is just released. Since this version, it is possible to dynamically add or remove item for the ComboBox element in HTML5 simulation.

Add/Remove ComboBox Item on the Fly

This is achieved by the two new actions supported by ComboBox element. You can find the “Add ComboBox Item” and “Delete ComboBox Item” actions in the drop down list in “Manipulate Elements…” window:

new_combobox_actions

By invoking these new actions, you will be able to add new item into ComboBox, or remove specific item from ComboBox in the HTML5 simulation. Below is a very simple example to show how to make use of these new actions:

add_remove_item_comobox

With these two actions your HTML5 simulation can show the audience different drop-down list according to previous interactions, and make the simulation much more like the real web application.

Interactive Elements in Edit Mode

Now the Menu, Menu Bar, List and Radio Button Group are interactive elements in edit mode now. It means you can click on these elements and interact with them in edit mode, just like interacting with them in HTML5 simulation. This makes it more intuitive to specify the current selection of these elements in edit mode.

interactive_elem

How to Get the New Version?

You can download the latest version from the download page, or upgrade directly within ForeUI if you already have any 4.x version installed.

If your ForeUI license is more than one year old, you may need to renew your license to use this version.

Feature | ForeUI | Update
| | | |
July 12, 2017

ForeUI V4.5: Set Starting Page for Simulation

by

Dear ForeUI users, ForeUI V4.5 is now available! Let’s see what’s included in this new version:

Set Starting Page for Simulation

Now you can set the starting page for HTML5 simulation, no matter where the page is located. Before V4.5, the starting page is always the first available page, and you need to define some behavior in the first page to jump to the starting page you want. This task can be done much easier now, and you only need to tick the checkbox in the page information panel.

SetAsStartingPage

It is as simple as that, once you set a page as the starting page, it will be the default page when you run the HTML5 simulation in web browser.

Quick Define “Manipulate Element…” Action

In this version, we added another quick define action, which allows you to quickly manipulate elements.

OnClicked_Manipulate_Element

After clicking this new menu item, the “Manipulate Elements…” window will show up and you can immediately choose which elements, and how to manipulate them. The behavior will be defined automatically and added into the behavior panel.

Support Undo/Redo for Table Editing

A rather big enhancement in this new version is to support undo and redo operation for table editing. In previous versions you can not undo any modification when the table editor is opened, now you can undo/redo every step of your table editing. This enhancement makes table editing much easier as you don’t need to be too careful, and every mistake could be undone.

UndoTableEditing

How to Get New Version

You can download the latest version from the download page, or upgrade directly within ForeUI if you already have any 4.x version installed.

Feature | ForeUI | Update
| | | | | |
February 12, 2017

ForeUI 4.4: Significantly Improve Performance

by

Recently we made some important optimisations on performance, and the newly released V4.4 includes all those changes and gets much lower CPU usage and shorter response time. The difference is very significant, especially when editing bigger plot with a lot behaviors defined. Using newer version of Java Runtime could get even better performance, although we haven’t included the newer JRE into the installation bundle yet.

Since this version, the GroupFrame element becomes a container, which allows you to embed other elements into it. Although in the major of cases, GroupFrame doesn’t have to work as container and other elements can just float on it, it is still more intuitive to put those element into GroupFrame.

EmbedIntoGroupFrameWe also made some enhancements on opacity adjusting in either the tools panel and the behavior editor. In previous versions, you can input the opacity value as 0~255 integer, and when you define the action to change the opacity, you will input a percentage. It is not comfortable that they use different system, while they are actually setting the same thing. However we prefer to keep both systems as they are all useful. Adjusting number between 0 and 255 is more accurate, while displaying % is more intuitive. So we finally implement it like this:

AdjustOpacity

The input box on the left allows you to input number between 0 to 255, while the one on the right allows you to input 0~100%. The slider between them allows you to adjust the value with drag and drop. They are all linked, so if you change one value, other two controls will reflect that quickly. You will find the same implementation in the behavior editor, when you try to change the opacity with action.

We also enhance the Button element a little bit, and now it will automatically use grey icon when it becomes disabled. This is very convenient and it is available in both editing mode and the simulation mode. As shown in the animation below:

EnableDisableButtonEnjoy 🙂

Feature | ForeUI | Update
| | |
August 17, 2016

ForeUI V4.3: Dynamically Set Reference Target

by

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

setRefTarget

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 {Calendar_1.id} (equals to “Calendar_1”). As a result, the Reference_1 becomes a reference of Calendar_1.

behavior_def

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

hl_sel_color

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.

duplicate_page

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.

Feature | ForeUI | Update
| |
123…31