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 by vivi

ForeUI V3.40 is Released!

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.

ForeUI V3.3 is Available Now

ForeUI V3.3 is just released today!  It has been a while since our last release, so thank you for the patience :-).  In this version we have made some internal alignments between ForeUI and the UI theme editor (as ForeUI plugin), so I guess you will see the brand new UI theme editor very soon.  Of course this new version contains many useful new features and enhancements, and fixed some annoying bugs.  Now let’s check them out.

Quick Define Behavior

This new feature allows you to quickly define some simple behaviors by much easier way.  After selecting an element (e.g. a button), you will see the “Quick Define…” button in behavior editor is enabled, which will bring you a list of quick define wizards.  You will be asked to choose target page, select target element, input message to display or the URL to go, as long as ForeUI collects enough information, it will generate the behavior definition for you.  This can significantly simplify your work.

Quick Define BehaviorThe same wizard lists are also present in the context menu (right click to show it).

Quick Define Wizards

“Mini” Sub Style

Since this version, all default UI themes support the “Mini” sub style for window, check box, radio button and radio button group. When you select one of these elements, you can find a drop-down list in the “Style” row in the tools panel, then you can choose between the default style and the “Mini” style.

Here is the comparison between default style and the “Mini” style, on different UI themes.

"Mini" Sub Style

In the future, with the UI theme editor, you will be able to create your own sub style, and easily apply it on your design (just like this “Mini” one).

Default Text Size

In previous versions you could specify the default font of the plot, but could not change the default text size.  Now you can!

Open the plot configuration window via the “Plot Settings…” button, you will see a new option that allows you to do that.

Set default text size

Please notice that, the default text size will only be applied to the elements that you NEVER changed its font size.  If you have ever changed it, it will remember your modification and will not take the default text size.  Is there a way to reset it to use the default font?  Yes, you just need to choose the element you want to reset, and then click the “Reload Style” button in the “Style” row in tools panel, as shown below:

Reload Style

Better Behavior Diagnose

We received some complains from customers that their HTML5 simulations stopped working, and they didn’t know why.  After we investigated the issues, it turned out that in 90% cases, the problem is in the expression in behavior.  To be precise, it was the lack of quote marks for string value in the expression that caused the issue.  The string value without quote marks could kill the whole simulation since it brings Javascript syntax error.  It was a shame that ForeUI could not automatically detect this kind of error in behavior.  Now after a lot of work on this, we are glad that ForeUI can finally prevent customers from this kind of errors.

Any illegal value in the expression will be detected and make the behavior entity unavailable (displayed with strike-through), and it will not really be included in the simulation.  Thus the simulation is protected and you also have the information to find out which line is wrong in behavior.  The example below was a killer to the simulation (because the “ForeUI Test” string value does not have quote marks enclosed).  Now it is detected as an error and will not harm your simulation anymore, and you can fix it by knowing it is wrong.

Wrong Expression

Hide Text on Behavior Editor Toolbar Button

This is really a minor enhancement, but I’d like to mention it, otherwise you may not notice it is there :-)

The idea is to allow hiding the text on the toolbar button, in behavior editor.  Thus you don’t need to scroll the toolbar if you are running a lower resolution.  The new option can be found in the settings window, under the display tab.

Hide Text on Toolbar

This option is on by default (show text on button).  If you turn it off.  You will have a much smaller toolbar in the behavior editor and the button text will be displayed as tool-tip instead.

Behavior Editor Toolbar

Other New Stuff

There are more new features, enhancements and bug fixings.  I am not going to introduce them one by one since they are quite easy to understand if you check them out in the update history page.

Enjoy using ForeUI and feel free to contact us :-)

Tutorial: Use ForeUI to Make an Icon Search Engine

1

Although we have the online documents for ForeUI, many new users still wish to have more detailed tutorial.  Today I will create a (working) icon search engine with ForeUI, and I believe it will be very interesting!  I will give the icon search engine a cool name: ICOOGLE.  It is a combination of two words: “Icon” and “Google” :-)

Create the GUI

There will be two pages to create:

  1. Home page that allows user to input parameters for searching.
  2. Result page that display the current page of results.  This page can also accept user’s new search request.

Create a new plot, and set its page size to 1000×750, via the “Plot Settings…” button on the bottom right corner.  Now we are editing the first page (home page).

Drag a Text Box (text label) element from the element list on the left, and drop it into the page.  Double click the Text Box and change its content to “ICOOGLE”, set its font size to 65, use bold font, change text color to light blue, set elements size to 350×70, vertically and horizontally center the content, and move element to (325, 200).  This will be the logo, as shown below:

Drag another Text Box, a Text Edit Box and a Button element into the page, set their font size to 16, and set their height to 28, then align them in the same line, and put them in under the logo.  Here is how the home page looks like:

It will be better to rename the elements with some meaningful ids, so we can easily find them when defining the behavior.  Don’t forget to group the “Search Icon” label, the Text Edit Box and the “Search” button together, this will help us to reuse it in the second page (using Reference).  Open the outline view by clicking the “Outline” button on the left bar, you should see the outline like this:

Click the  button at the bottom to open the page management view, set the current page title (on the right of the view) to “Home Page”. Click the  button to add a new page, and set its title to “Results”.  The newly created page will be selected automatically, so now we can edit its content.

Now we are goint to make use of the Reference element.  The Reference element is quite special: it can simulate the look and functionality of another element (which is called “reference target”), this can help us to reuse the previously defined elements to build new content.

Drag a Refernce element from the element list into the result page, then click the  button in the tool pane to specify the reference target.  You will see this window:

Once you see this window, you can browse to any page to pick the element you want, as the reference target.  Here I will choose the logo text box, because I will also need the logo in the result page.

Adding another Reference element into the page, and set its target to the group we created before (so it will emulate the entire searching function block, fancy :D).  Rearrange the position of these two references and adding a horizontal Line element to finish the header of the result page:

The results page will display 10 results per page, each result will be displayed in an iFrame element.  So we need to create 10 iFrame elements, set there default size to 64×64, and layout them in two rows (5 elements for each row).  You can make use of the alignment buttons () and layout buttons () in the tool pane to do it quickly.  Could not find these buttons? Try to select 2 or 3 elements together to show them :-)

Finally, we add two Button elements and one Text Box element to create the pagination bar on the bottom.

Now we have finished the GUI creation.  Although no behavior is defined yet, you can still run the simulation and browse the two pages via the navigation bar.

    

Prepare for the API Calling

As I said, I will create a working icon search engine with ForeUI.  I could achieve it thanks to the possibility that ForeUI could talk to the web service via JSONP API.

In this example, I will use the JSONP API provided by IconFinder.  You can find more details about this API here.  In order to use the API, you will need to sign up on IconFinder and get your own API key.  For testing purpose, you could temporarily use our API key (8b3d4114b9994b188cef5bcef9765444).

The API will return a JSON object like this:

That means we can get total results number (the “totalResults” field) and all icons’ information (the “icons” array field) from the JSON object, which can make ICOOGLE functional.

Define the Behavior

Behavior definition is very interesting, and could be challenging in some cases.  Since ForeUI allows you to define behavior in a simple and direct way, you don’t have to be a programmer.  However it will be better if you could think like a programmer, since that will help you to make neat design of the behavior.

First we need to define a custom property to store the current page.  We will include this property value in the URL for calling the API.  The custom property can be defined in the custom property view, which can be opened by clicking the “Custom Property” button in the right bar.

The main logic of this web application is to call the JSON API and retrieve the icons’ URLs.  We will need to call the API when:

  1. User click the “Search” button in the home page.
  2. User click the “Previous 10 Results” button in the results page.
  3. User click the “Next 10 Results” button in the results page.

We can let these three cases to share the same behavior, with different parameter (the page index and searching keyword).  So I defined a global custom event and put the searching logic into its handler.  This is very similar with the “function” concept in programing world:  Three buttons will call this “function” to do the searching.

As you can see I define this “Do_Searching” custom event for the home page.  Since it is a global event, it could be triggered in any place, so it is not a must to define it in the home page.  The most important part is the “Get JSON” action.  It should be defined like this:

The actual value of the URL is:

http://www.iconfinder.com/json/search/?q={TextEditBox_Keyword.value}&c=10&p={startPage}&min=1&max=64&api_key=8b3d4114b9994b188cef5bcef9765444 

You can see the keyword and the page index is included in the URL.  This API call will return a JSON object, which will be assigned to a custom property named “result”.  That means, when the Get JSON action finished, we will have a custom property (with “object” type) that includes all needed information for showing the result.

As you can see, there are two actions to trigger another two custom events (line 4 and line 5): Update_Result_List and Update_Pagination_Info.  It is not a must to define these two custom events, since you can put their logic into the Do_Search event handler.  The reason that I do so is to make the structure more clean.  The triggering of another custom event is quite similar with the “function call” in the programing world.  The final step is go to the results page, using the “Go to Page” action (line 6).

Here is how the “Update_Result_List” event handler looks like:

It is just getting the  icon URLs from the “result” object, and assign them to the iFrame elements (so you will see the icon in results page).  Keep in mind that arrays in ForeUI is 1-based, so first member in array is array[1].

And here is the “Update_Pagination_Info” event handler:

It makes use of the information in the “result” property and constructs the current paging information.

So far we have define the main logic of searching, but no one is using it yet!  We need to handle the “Element Clicked” event for all the three buttons and trigger the “Do_Search” custom event in the event handlers.

It is very easy to understand what they do: set the “startPage” property before doing the search, then we will get different results.

Now we have define the basic behavior of the web application.  You can run the simulation, input a keyword, press “search” button, and you will see the icons listed in the results page, you can even switch pages.

Could you believe that?  We have not defined any behavior for the search box in the results page, but it is working fine!  That is the magic of the Reference element :-)

Make It Even Better

ICOOGLE is working, but it is not good enough.  Here are some disadvantages:

  1. Can not press ENTER to start searching
  2. No limitation to the “Previous” and “Next” buttons (could go to unreasonable page that has no result at all)
  3. Icon border does not match the icon size
  4. The icon list should be cleared before listing the result, otherwise the icon from previous searching may be kept in the result page.

In order to start searching after pressing ENTER, you will need to handle the “Key Up” or “Key Down” event for the Text Edit Box element, and check the CURRENT_KEY_CODE system property value.  If the value is 13 (the code for ENTER key), we will execute the same logic with the “Search” button.  PS: all possible system properties are listed in the system property view, which can be opened by clicking the “System Property” button on the right bar.

Also I modified the “Update_Pagination_Info” event handler a little bit to enable/disable the “Previous” and “Next” buttons according to the current showing range: if the first listing result is less than or equals to 1, the “Previous” button will be disabled; if the last showing listing result is larger than or equals to the total number of results.  The “Next” button will be disabled.

The icon border is actually from the iFrame element, so we will need to resize the iFrame element according to the actual icon size (reserve 20 pixels as padding).

Simply set the source URL of the iFrame element to “about:blank” will clear its content.

There is a tricky thing: the JavaScript engine will meet error and stop the behavior if the icon information does not exist.  This could happen if you go to the last page of the searching result, ICOOGLE tries to fill all the 10 iFrame elements with icon information, but it could fail since the last page may contain less than 10 results.  To avoid this, the standard way is to check if the icon information exist before using it.  This will add many conditional branchings, which I don’t like so much.   Here I use a small trick: execute necessary tasks before trying to list the icon.  Specifically, I trigger the “Update_Pagination_Info” event before the “Update_Results_List” event since the later one may meet JavaScript error.

You can run the simulation directly from this link.  You can also download this example plot in ForeUI store.

Here is the final view of ICOOGLE:

This is a really long post.  I hope you enjoy it :-)

I’d like to use this tutorial to show what can be done with ForeUI, and attract more and more users to try the advanced features in ForeUI.

PS: ForeUI is still a prototyping tool, although it could be used to create the frontend of real web application.  You can just use the basic features to create fast prototyes of your web site or software.  If you wish to get higher fidelity of the simulation or even use it in production, ForeUI is ready for that.

ForeUI V3.2: Element Tooltip, New Events and More

Element Tooltip

The newly released V3.2 introduced a very useful feature, which allows you to set the tooltip for any element.  It is a real tooltip: once the it is set, it will take effect automatically in the simulation.  You don’t need to simulate the tooltip by yourself anymore.

Here is how it will look like in the simulation:

If the tooltip is not set (empty), the element will not have tooltip in simulation, just like it did in the previous versions.

Selected/Unselected Event for Checkbox/Radio Button

Since this version, you don’t need to check the checkbox/radio button state in a conditional branching anymore, just handle the “Element Selected” or “Element Unselected” events for checkbox/radio button, and you will get notified when the element selection state is changed.

New Action to Change Button Text

Now you can use the new “Set Button Text” action to change the text on the button.  That means you can have some dynamic button in your prototype.

Change Element Order

If you create some elements with the same Z value, the only thing that decides how to overlap them is the element order.  The element with smaller order index will be rendered earlier.  Now you can change element’s order in the outline view: just select the element and click the “move up” or “move down” button at the bottom, you will see the overlap order is changed accordingly.

Hotkey to Group/Ungroup Elements

Now you can press Ctrl+G to group the selected elements, and press Ctrl+Shift+G to ungroup the group you selected.  If you are using Mac OS X, the hotkey should be Command+G/Command+Shift+G.

There are More

There are more enhancements in this version.  Please read the update history for more details.

Renew Your ForeUIl License with 50% Discount!

Dear ForeUI customers, if your license key is older than one year, you can now renew your license with 50% discount (based on the price after applying the volume discount) :-)

Here is the URL that will give you the details and instructions:

http://www.foreui.com/misc/renew_license.htm

Remarks: to ForeUI V1, V2 customers who have purchased license key for ForeUI V3 with full price, you are eligible to get FREE license key that will cover the software upgrade for another year.  Please write to license@foreui.com with both of your license keys (one for V3, the other for older version), and we will process your case manually.  Thank you.