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 /

All posts by ForeUI

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
| | | |
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
| |
April 25, 2016

ForeUI V4.2: Enhanced Menu and System Properties

by

ForeUI V4.2 is out today. The new version makes some important enhancements, which were strongly requested by our customers.

Disabling Specific Menu Items

Now you can disable one or more menu items. The disabled items will be grayed out and they become unselectable in the HTML5 simulation. This new feature is available on both Menu and Multilevel Menu elements. To disable a menu item, you just need to put a “#” at the beginning of its text. The example below disable the “Save” and “Word Document” items:

DisableMenuItem

When you run the HTML5 simulation, these two items are not selectable any more.

DisableMenuItem

If you really need to display a “#” character at the beginning of the menu item, you can still use a “\” to escape it.

New/Enhanced System Property

Since this new version, you can use the new {CURRENT_DAY_OF_WEEK} system property, which is an object type property and contains the current day of week in different display formats, as shown below:

day_of_week_property

What’s more, the existing {“CURRENT_MONTH”} system property gets changed to object type too, to include different display formats as well. The figure below shows the new content of this system property in the HTML5 simulation.

cur_month_property

If you have used {“CURRENT_MONTH”} system property in your plot file, don’t worry and they will be automatically replaced by {“CURRENT_MONTH”}[“number”] once you load your plot file with the new version.

Gaussian Blur for Shadow

Shadow for element  is fully supported since version 4.0. By default the shadow is blurred with box blur algorithm to get better rendering speed. Now you can choose Gaussian blur algorithm if your machine is fast enough. The new option is available in the settings window, under the “Display” tab:

gaussian_blur_option

This option only affects the plot rendering in editing mode, and has nothing to do with the HTML5 simulation (the shadow in HTML5 simulation is rendered by the web browser).

How much nicer will the Gaussian Blur be? The figure below can give you an example. It is the Window element in “Ubuntu” UI theme, and the shadow gets rendered with box blur (left) and Gaussian blur (right).

blur_modesIt is no doubt that Gaussian blur is nicer, but please notice that Gaussian blur algorithm is quite CPU consuming. If your machine is not fast enough and your plot has many elements that has shadow, you may feel the slowing down of rendering. So use it wisely 🙂

Feature | ForeUI | Update
| | |
January 4, 2016

ForeUI V4.1: Local Storage Element

by

ForeUI V4.1 is released now. This update introduces a new element named “Local Storage”, which is a representative of the “local storage” concept in HTML5. As you may have already known that, in ForeUI we have the “Html” and “Script” elements, which could be used to access the local storage in HTML5 directly. However, the new local storage element still bring you some benefits.

The Local Storage Element

The local storage element is just like the “Html”, “Css” and “Script” elements, they could be dragged and dropped into the editing area but they are not visible in the simulation.

LocalStorage_Element

One advantage of using this Local Storage element is that it provides a namespace for each instance of this element. So you can use this element like a database table, and different instances of this element can store values with the same key. In the “Manipulate Elements…” window, you can choose the “Set Local Storage Data” action and then specify the data as a key-value pair.

set_value

As you may already know that, the local storage in HTML5 can only store data as text string. The local storage element in ForeUI however, can store any data type supported by ForeUI, which are number, string, array and object. You don’t need to worry about how they get stored, ForeUI will take care of that for you.

The data stored in the local storage could then be retrieved as an element property (associative array type).

get_value

Communication between Simulations

This is the most interesting part. The data stored in local storage are persisted even the browser window gets closed, and they could be retrieved and used later. This could be used as an approach for communication between ForeUI simulations!

By using this local storage element, multiple ForeUI simulations can talk to each other. Of course you can achieve the same effect by directly using the local storage in HTML5, but ForeUI’s local storage element has its own namespace, and can easily help you to make sure the simulations can (or can not) share certain data.

The video below shows an example, there are two ForeUI plots and we launch two instances of simulation for each. Thanks to the local storage, these simulations are sharing the same data (x and y positions of the object). As you can see, the object locations are synchronized between all simulations.

local_sync_550

You may wonder how this is achieved. The magic is that both plots have a local storage element named “LocalStorage_GreenBall” (so they share the same namespace), and both plots are using the values with the same key (“x” and “y”) in this local storage element.

If you are interested in these example plots, they could be downloaded from the ForeUI store, or you can run the simulation directly from here and here.

It can be a Game Changer

It is cool that ForeUI simulations can communicate to each other, it could be useful to simulate the interaction between two or more applications. But it is not just that, this local storage element can actually change the whole game.

Have you ever tried to design a huge plot with ForeUI? When the plot becomes very big and complex (let’s say 100 pages with full of elements and behavior), it will be much harder to manage. The application will eat a lot of memory and becomes much slower. What’s more, loading the simulation for such a huge plot will be extremely slow, and sometimes your browser just lose response forever.

In this case, our suggestion is to split your design into multiple plots. But there is a problem followed, after splitting the plot, how can they share data between each other? There was no easy way to solve the problem before, but now we have one. By putting the data into the local storage, they could be accessed by multiple plots, which will work together and behave like just one plot.

split_plot

There is more. ForeUI has “iFrame” element at the very beginning, so it is possible to embed a simulation in another. Now we can make it even better, the simulation within iFrame can communicate with the outer simulation via local storage. That actually provides a new idea to design your plot. Some heavy-weight, reusable content could be created as a separated plot, and get embedded (maybe multiple times) in another plot’s simulation.

embed_plot

What do you think? With this new local storage element, you can design your plot in new ways, and implement much more exciting things in ForeUI!

Feature | ForeUI | Update
|
1234