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

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
|
November 1, 2015

ForeUI V4.0: Dynamically Manipulate Elements

by

ForeUI V4.0 implements a very useful enhancement on manipulating elements. If you choose “Manipulate Elements…” from the “Add Action” menu, you will see this window:

insert_prop_as_target

Since version 4.0, you can find the small “…” button beside the targets’ id input field. That means you can use properties to specify target elements dynamically. Because the target elements are not confirmed at the editing phase, only some common actions are available in this case, such as moving, resizing and show/hide elements.

Example: Move Up Selected Element

In this simple example you will see how to dynamically manipulate elements in ForeUI HTML5 simulation. Put three elements into your plot and put their ids into a Spinner element, then you place a button aside and define its behavior as shown below:

dynamic_manipulate_edit

As you can see, the behavior is very simple, and it even doesn’t mention any element that it will move. Once the button gets clicked, it will move an element up, whose id equals to the current value of the Spinner element. How the HTML5 simulation will look like? Please see the animation below:

dynamic_manipulate_simulation

The target element is decided in the run-time, and the user/reviewer has the chance to specify the target element. If you replace the Spinner element with TextEditBox element, you can choose any element on the page to move.

Conclusion

This enhancement looks very small, but it is very useful and makes ForeUI simulation more powerful. If you have ever used ForeUI before, you know how difficult it will be to implement such a scenario in older versions of ForeUI, basically you will have to predict all possible target elements and make a branch of behavior for each of them. Now with this small enhancement, things become so easy and you just need to define one line of behavior for all of them.

Feature | ForeUI
| |
October 19, 2015

ForeUI V4.0: Translate/Customize Text in ForeUI

by

ForeUI V4.0 brings a lot of new features, one of the most interesting new feature is that you can localize ForeUI by yourself, which means you can translate the text you see in ForeUI into the language you want.

Why we make it?

Previously we include language packs translated by volunteers, which works well. However, the translations need to be updated according to software update, and we have more languages to support. We want to build a platform for it, so everyone can very easily contribute his/her translation.

How it works?

Translating all texts will be a lot of workload, but you don’t have to translate all of them. Sentence or phrase is the minimum unit for translation. You can translate just one sentence or phrase and submit it. Once you do that, your translation will be automatically applied on your ForeUI, and you can enjoy your work immediately.

foreui_connect

All translations will be public shared. When you try to translate a sentence or phrase, you may see that someone already did it before, and you can use his work instead of translating by yourself. Your translation may also be used by others, the more users choose your translation, the more credit points you will get, and those credit points can be used to get discount on buying/renewing ForeUI license in the future.

We will put those translations that are widely used into language pack and push it to all users during software upgrade.

How to use it?

You may already notice the new tab foreui_connect_tab on the right side of ForeUI’s main window, and the view has title “ForeUI Connect”, which is the entrance of this feature. ForeUI Connect is a platform for online activity, and translating ForeUI is just the first feature we implement on it.

You will need to login before using this feature. The login account/password is the same you used to login our website. If you don’t have an account yet, you can register one here, or click the “Not a member yet?” link in the view.

foreui_connect_login

After login you will see the “Translation” tab inside the view, and you are ready to go:

Screen Shot 2015-09-05 at 11.07.12 AM

Here you need to specify which language do you want to translation ForeUI to. Then you can input a keyword in English to find the text to translate. Below is an example, I input “New Plot” as the keyword and then click “Search” button, and 7 results a listed:

Screen Shot 2015-09-05 at 11.22.25 AM

There are two “New Plot” phrases in the list, because we have two places in ForeUI that use this phrase (one is for menu/toolbar/welcome page,  and the other is for the settings window). Now you can choose the phrase to translate. If someone else (or you) has ever submitted a translation for this phrase, you will see it in the “Available Translations:” list. As shown below:

Screen Shot 2015-09-05 at 1.35.44 PM

If you like this translation, you can select it and the click the “Use It” button. The more users use a translation, the higher chance that it will get included in future language pack. If the translation was submitted by you, you can also edit or delete it here. If you don’t find any existing translation can satisfy you, you can submit your own by clicking the “Add…” button above the list. A window will pop-up and accept your new translation.

Screen Shot 2015-09-05 at 1.41.39 PM

After clicking the “Submit” button, congratulations! You just contributed one translation to the repository! Meanwhile you will be able to switch to the language that you are translating ForeUI to, and see the translated text in ForeUI immediately.

We hope you like this new feature, and wish more users to contribute their translations 🙂

Feature | ForeUI
| | | | | |
August 8, 2015

ForeUI V4.0: Adding Files into Your Plot

by

Since V4.0, ForeUI allows you to add any file into your plot, such as video, PDF document, and ZIP archive etc.. Once you add the file into your plot, it will be stored in your .4ui file and get extracted to output directory, when you export your plot to HTML5 simulation.

How to add File?

The new “Add Attachment” button in the page management view is added for this purpose. Once you click this button, you will be asked to choose the file to add. Any type of file can be added, and there is no limitation on the files number. However, please keep in mind the files will be saved into your plot file (.4ui file). If you put too many files, or too big file into your plot, your .4ui file might become much bigger.

add_attachement

After you add the file into your plot, you can still change its file name. The file name must be unique in the plot, since all attached files will be exported to the same directory.

Screen Shot 2015-08-08 at 9.47.27 AM

How to Access the Attached File in HTML5 Simulation?

Once you run HTML5 simulation, or export your plot to HTML5 simulation, all attached files will be extracted to the “files” folder under the simulation directory. So it is possible to access them via relative URLs in the simulation.

If you want to make a hyperlink to the attached file. You can use the Hyperlink element and specify its URL to “files/<file_name>”. Please see the example below:

Screen Shot 2015-08-08 at 10.27.43 AM

Or if you want to use Button element, it is possible to link an attached file to the button with “Go to URL” action. You just need to set its URL to “files/<file_name>”:

Screen Shot 2015-08-08 at 10.31.04 AM

Of course you can link the file to any other elements with the same approach.

Attach Javascript Library File

Thanks to this new feature, now you can easily add Javascript library file as attachment, and then use Html element to import it into your HTML5 simulation. Below is an example for Html element that add jQWidgets library files into HTML5 simulation, all these Javascript files are attached into the plot beforehand:

Screen Shot 2015-08-08 at 10.51.48 AM

Conclusion

This new feature is very useful, as it allows you to add any type of file into your plot (and HTML5 simulation).

With this feature, you can let people to download video or document from your HTML5 simulation, without manually modifying anything in the code.

You can even use this feature to add new Javascript library into your HTML5 simulation, so you can use the feature provided by other Javascript libraries.

Feature | ForeUI
| | |
1234…23