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

All posts tagged simulation

Lazy Loading of HTML5 Simulation

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.

Operate Multiple Elements in Simulation

When we define the behavior of element, we can operate on selected element in the event handler.

operate_on_elem

After we click the “Operate on Element…” menu item, we can create a new action that operate on selected element.

three_steps

We can click the “Browse…” button to choose the element to be operated on, but we can only pick one element at a time.  What if we need to operate on multiple elements?  Should we repeat creating actions for those elements?  Can we work on multiple elements at a time?

The first solution in my mind is to us the grouping, as we all know that in ForeUI we can group multiple elements as a group, which will be regarded as one element.  So we can group multiple elements together and operate on the group.

select_group

There is another workaround, some actions (such as change location, change visibility etc) provide the option to include other elements in the area.

include_others1

What does this option mean? let’s take a look at the figure below:

include_example1

We can see element B and C are located within the area of element A, while element D is not in the area.  When we create the action to hide element A and checked the “Include elements within the area” option, element A, B and C will all be hidden in simulation.  

What if we don’t have such kind of element like element A? There is an interesting skill: we can create a transparent element A (can be a rectangle element, without border, set its opacity to zero), and operate on the invisible element A.

invisible_elem

Some Tips for ForeUI Simulation

In ForeUI, we can define the behavior of elements and run the simulation in web browser.  Here are some tips about running the simulation:

If you have defined multiple pages in a plot, you can use “Page Up” and “Page Down” key to switch the pages, even if you havn’t defined any behavior of elements.

If you are running ForeUI in Windows VISTA and your are not using an administrator account, you may meet a “Page Not Found” error in your web browser when launching the simulation.  That’s because ForeUI need the right to create a folder for storing DHTML files.  The workaround is to run ForeUI in administrator account, or to assign the right to ForeUI application.

If you meet any problem in using ForeUI, please feel free to contact us, we are making an FAQ page for ForeUI.