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

Home / ForeUI Blog /

All posts in Update

June 21, 2014

ForeUI V3.8: Use ClipArt to Make HTML5 Simulation Smaller and Faster

by ForeUI

ForeUI V3.80 is released today. This version introduces a new approach to optimize your HTML5 simulation, which is extremely useful for people who want to create big, complex prototype with ForeUI.

After actively working on a plot for some time, you may find out that your plot becomes bigger and bigger. Loading and saving the plot file is slow, and it may take several minutes to launch the simulation in web browser. When this happens, we would suggest you to optimize your plot before adding more content into it. Actually, the best practice is to understand how to avoid unnecessarily increase your plot size, and keep your plot small and neat at the beginning. We have a document to introduce all currently known tricks for this topic.

Before version 3.8, those tricks focus on avoiding duplicated or useless content in your plot. Since this new version, we have a new approach, which is to reduce the number of DOM objects that need to be loaded by the web browser, hence directly make your HTML5 simulation smaller and faster. Consider such an example: on the page you have a chart created with basic shape elements, such as rectangle, arrow line, text box etc., and you have two buttons to navigate between pages. Actually only these two buttons have their behavior defined, and other elements are just shapes or text, which are completely static. If you use older version of ForeUI to generate HTML5 simulation for it, all those elements will be converted to DOM objects, which have to be loaded by the web browser. If your plot has a lot of shape elements which are actually static during the simulation, loading them as DOM objects is a waste of resource for web browser, and you will see the simulation loading time meaninglessly prolonged.I guess you already know what I am going to say, the best way to treat those “static” element is to put them into an image and let them display as a static background, while those buttons that have behavior defined should be kept as they are. So to simulate the page mentioned above, the web browser just need to load 3 DOM objects: the static chart image and two buttons, which will be very fast! Now the question is: how to tell ForeUI to do so?

ClipArt Element

The answer is to use ClipArt element, which is newly included in ForeUI V3.80. This new ClipArt element is not an element that you can directly drag and add into your plot. You will need to select one or more elements and then click the button in the tools panel to wrap it/them as a ClipArt. ClipArt is just like a Group, but it will be output as a static picture in the HTML5 simulation, which means all its members will not be interactive during the simulation. So please make sure not to abuse it, and do not put any element that has (or will have) behavior defined into the ClipArt, otherwise ForeUI will warn you in the behavior editor:

Wrapping some elements into a ClipArt looks like to put a static picture into your page, but there is difference: you can not modify the content of static picture in ForeUI, but you can edit the members of ClipArt as you wish. What’s more, you can always restore those elements from the ClipArt. This is extremely useful when you need to modify the diagram frequently.

You maybe interested in how good this kind of optimization can be, let’s see some comparisons.

The two plots in the comparison have the same content and behavior, the only difference is the second one converts all static elements into ClipArt elements. The plot files and HTML5 simulations are available in the table, so you can do the test by yourself. Your result may vary a little bit, depends on the hardware and software environment, but you will see the similar result, that the plot use ClipArt can be loaded much faster.

If you have a big plot, try using the methods mentioned in this document to optimize its size. If you are just starting a new plot, please also learn those tricks and keep your plot small. If you just want to create a prototype with less than 20 pages, it should be fine to ignore all these optimizations. However, if you are targeting a prototype with 100+ pages and still want it to be small and fast (it is possible, we have saw people did it), those optimizations are almost mandatory.

April 21, 2014

Happy Easter! V3.70 is Released Today

by ForeUI

Happy Easter! We hope you enjoy your Easter holiday. Today we are pleased to announce the release of ForeUI V3.70.

New Action to Call Javascript Code

You may want to integrate your ForeUI simulation with existing application, which may need to call Javascript function in your simulation. Although there are some workarounds to achieve this in previous versions, they are kind of hacking and doesn’t look good. Now we have a new action named “Call Javascript Snippet”, which allows you to write any Javascript code you want to be called, thus you can call any existing Javascript function in it.

Remarks: just like the “Javascript Code” element, this new action is prepared for advanced users. You should know what you are doing when using it, calling incorrect Javascript may bring strange behavior to your HTML5 simulation, and sometimes even halts the entire simulation.

New Actions to Change Background for Basic Shapes

Now we have a new action for those “basic shape” elements to change their background color and opacity on the fly. Previously only the TextBox element supports the “Change Backround Color” and “Change Opacity” actions, now the Rectangle, Ellipse, Triangle and Polygon elements all support these two actions.

No Need to Escape the Quotation Marks in Expression

There was an annoying issue when you use quotation marks in the expression: you simulation may not work if you didn’t escape the quotation marks (you can read this, this and this for more details). Now the problem has been solved and you don’t need to put something like “”good”” in your expression any more. If you have escaped quotation marks in your existing plot files, no worry and they will still work as they did.

Other Changes

There are other enhancements and bug fixings in this version. Please read the list of all changes here.

Feature | ForeUI | Update

3.70 | call javascript | change background | change opacity | easter

March 3, 2014

ForeUI V3.60 is Released

by ViVi

ForeUI V3.60 is now released. This version brings you the official support of multi-threading simulation, new action for string processing and new option to show/hide non-current pages in the online view. Please read the details below:

Multi-Threading Simulation

You may already know that Javascript runs in single thread. If you write Javascript manually, you will pay extra efforts to simulate multi-threading. When your scenario becomes complicated, simulating parallel tasks will become more and more difficult, and sometimes even not doable. Before V3.60, we could use this workaround to simulate the multi-threading. Now we have the official solution: the new “Parallel Branching” flow control allows you to run multiple tasks parallelly.

Here is a video that demonstrate an HTML5 animation that uses this new feature. You may also run it on your own browser.

Text String Processing

When you store the custom property as string type, it will be converted to string variable during the simulation. So you can always use the Javascript built-in functions for string processing. However, not everyone is familiar with Javascript APIs, and some ForeUI users are not programers. An easier way for string processing will be very useful, so here it comes.

The new “Grab Value from Property” action provides what you want. You simply specify an property as input string, which could be a custom property, element property or system property; then you choose whether to trim the white characters and/or tags, and maybe specify the range of position so you just grab part of the string, finally save what you get in a custom property for future usage.

Instead of grabbing the content from input string, you can also take the length of content, just choose “Length of Content” from the “Grab Value” drop-down list.

This new action will be very useful for processing the result of “Get JSON Object” and “Get Remote Content” actions, since the data returned from Internet may contain white characters and tags, and you may want to check if it really contains what you want.

Show/Hide Non-Current Pages in Outline View

Outline view can show you what elements are stored in every page. However if your plot is complex, you may want to show only the current page content in the outline view. This could be achieved by turning on the new option on the bottom of the outline view:

Other Changes

In V3.60, we make a lot of efforts to optimize the performance of Table element (in simulation). We are happy to announce that we have accelerated the action for appending/inserting/deleting table row, and the speed to perform the same operation is increased for more than 500%! What’s more, selecting row/column/cell within the Table is also speed up for 300%+! So the Table in the HTML5 simulation is much more responsive now.

We also fixed some bugs in this update, please check out the update history for more details.

ForeUI | Update

multi-threading | outline | string processing

December 16, 2013

ForeUI V3.50: Many Useful New Features

by ViVi

ForeUI V3.50 is released today. This version brings us a lot of new features.

Run Simulation on Touch Screen Device

One of the most interesting new feature is to get much better experience on running ForeUI simulation on touch screen device.

It is now possible to switch page by sliding the touch screen, which makes the simulation looks cool and is easier to play with when running on a touch screen device (smart phone, tablet, touch screen laptop etc.). The tapping on touch screen could also be converted to normal mouse clicking. To enable these features, you need to turn on two new options in settings window:

We also make some enhancements to make sure all elements could work well on touch screen device. The video below shows how good it could be:

Embed Raw HTML/CSS/Javascript Code into Simulation

Since this version, ForeUI supports 3 new, special elements: Html, Css and Script. They are special because they are not visible in HTML5 simulation, instead they insert their content (raw HTML, CSS or Javascript code) into the simulation.

That will be very cool as you could define and call your own Javascript function in ForeUI simulation, override some elements’ look by embedding a CSS block, or add new HTML content into ForeUI simulation. These new elements give you the flexibility to do almost anything you want. However please keep in mind that, embedding incorrect raw code may cause unexpected result in your simulation. So please don’t use it until you think you have to, and you know how to do it correctly.

New “Get Remote Content” Action (Cross Domain)

ForeUI supports the “Get JSON Object” action since 3.0 version, which allows your simulation to retrieve data from remote server. We have a blog post to introduce how to use it. That action uses JSON-P technology to cross domain (work around “The Same Origin Policy“). The limitation is that, the remote server need to provide the JSON-P API, which is not so common. You will have to implement the JSONP API if you could not find one on the internet.

That’s why we introduce the new “Get Remote Content” action. It actually uses YQL proxy to retrieve data from remote sever, and it doesn’t require the remote server to support JSONP API. So this action could be used in much more scenarios. The only limitation is that, it relays on YQL proxy server provided by Yahoo, so it could not work if YQL proxy is down.

New “Page Scrolled” and “Content Scrolled” Events

Now it is possible to define behavior for scrolling events. “Page Scrolled” is a new event for page, which will be triggered when the page is scrolled. “Content Scrolled” is a new event for the ScrollableContainer element, which will be triggered when the content of the ScrollableContainer is scrolled.

If you wish to know how many pixels are actually scrolled, you could get the “scrollLeft” and “scrollTop”values in the CURRENT_EVENT system property.

The CURRENT_EVENT a new system property, which is an object type property, and represents the current event that being handled. This property may give you some useful information about the current processing event. For example, the “scrollLeft” and “scrollTop” values means the number of pixels that actually scrolled horizontally and vertically.

Fixed Bugs

Bug_0432: If table is wider than its preferred size, each editing will reduce its actual width.
Bug_0433: The toolbar for table editor may not be display if the table is close to the top border.
Bug_0434: Open plot that has page behavior, with behavior filter turned on, the page behavior is not listed by default.
Bug_0435: Behavior entities may be hidden, after adding event or action in behavior editor.

Feature | ForeUI | Update

September 27, 2013

ForeUI V3.40 is Released!

by ViVi

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

Blueprint | mouse wheel | UI Theme Editor | zoom