ForeUI Product Blog

This is a minor update that aim to fix some bugs in V2.00, and support multiple selection in action editor.

Multiple Selection in Action Editor

Action editor allows us to drag and drop, copy/cut/paste item in the behavior tree.  In previous versions we can manipulate one item a time, which is not convenient enough.  Now we implement the multiple selection support in action editor, thus we can manipulate a batch of items a time.

We can press the SHIFT key on keyboard to perform the multiple selection, the animation below shows the new way to move or copy items in action editor:

Also we can press the right key to bring out the context menu for manipulating the multiple selected items.

Fixed Bugs:

• Bug_0133: V1.xx plot that contains conditional branchings may not be loaded in V2.0.  Thanks Wolfgang for reporting this bug.
• Bug_0134: Loading rectangle element with width=20 or height=20 in V1.xx plot file, the rectangle will be resized.  Thanks Tim for reporting this bug.
• Bug_0135: Create several instances of same custom element, move the newly created element, its action will be messed up.
• Bug_0136: Single row table (without header) shows nothing in simulation.
• Bug_0138: Custom event (and its child nodes) can not be pasted.

2010-02-03 Update:

Some bugs are found today and one of them is quite serious, so we provide a non-offical update for bug fixings.  Please read this thread for details: http://tinyurl.com/yzwxkcu

Yesterday I’ve submitted a brand new “iPhone Widgets” library in the ForeUI community site.  Now it is very easy to create prototype for iPhone App in ForeUI.

You can download the library from ForeUI directly.  Just click the “Resource Sharing” button on the bottom left corner:

Then in the popup window, click the download link under the “Library: iPhone Widgets V1.00″ item, ForeUI will download and deploy the library automatically.

After the download you can find a new element category named “iPhone”, so you can use the now elements now:

You can also download the library from web browser, just go to the URL http://www.foreui.net/node/16 and then click the download link for the .fcl file.  The .fcl file is a ZIP file actually, you can extract all its content to a directory, you will see some .fce files (element files) inside, you need to import them one by one (not so convinient yet, we need a library import feature).

The iPhone elements are real scaled, the screen in iPhone element is 320×480 pixels, which is the same with the real iPhone screen,  thus we can make iPhone app mockup in 1 : 1 scale.

So far there are 14 elements in the library, I will add more convenient elements in the future.  Thanks Natasha Nayberg for the good suggestions in this thread.

I’ve just create a simple prototype with this elements, it just take me two minutes:

I will keep improving this library, so if you have any suggestion, please feel free to let us know, thanks.

Today I am so happy to announce that ForeUI V2.00 is released!  As a major upgrade, ForeUI 2.0 is so exciting.  You can find improvements here and there, it is quite hard for me to introduce all of them.  So I will just pick a few big updates to write up.

Windows 7 UI Theme

Now you can create prototype with the brand new Windows 7 UI theme.  Although many people are still using Windows XP, more and more people are moving to Windows 7.  So Windows 7 UI theme may be frequently used in the future.

Community Site Integration

About 3 months ago, we have considered such a community site for users to share their resources.  Now the site is online!  The community site provides user a new channel to get more plot examples and custom elements.  User will be able to get new examples and elements more quickly and more frequently, since they don’t have to wait for our new release.  Please keep in mind that the community site is not only powered by us, but also by all ForeUI users.  So if you have any plot or custom element that you think is interesting or may be useful to others, please consider uploading it to the community site.  You may not get paid by submiting the resource, but you will definitely get return from the community

The community web site has been integrated with ForeUI 2.0.  You don’t have to visit the site in web browser, just open the community window from ForeUI via the “Resource Sharing” button (on the bottom left corner), then you can do the resource download / upload.

Element Categories Management

Now you can configure the element categories on the left.  You can hide the category that you don’t like by setting it to “inactive” state.  You can also create new category and manage the elements inside.  To open the element categories management window, please click the “Manage Categories” button (on the bottom left corner).

Page Management Window

In 2.0 we implement a new page management window.  The pages are managed as tree structure, page can have its child page so that the entire sitemap structure can be built.  You can also create folder in the tree structure.  Folders can help organizing the pages, they can also control the content to be exported.  When the “Excluded from export and simulation” option is checked, all pages under the folder will not be included image/pdf/dhtml export.  This feature is useful when we want to hide the master pages from output.

Global Properties

Global properties are some properties that do not belongs to any element, it can be a system property (read-only) or a user defined property.  System property will be updated by system in the background, we can retrive its value when we need; User defined property can be a String or Integer, we can set its value via the “Set Global Property” action.  We can always insert a global property into the expression.

Custom Event

From now on, we can define event handler for custom event.  That means we can define a complex action in a custom event handler and then trigger the custom event from different places.  It is a powerful machanism to reuse the defined logic and make our work more easy.

There are still many new features, enhancements and bug fixings.  I do not have enough time to introduce here, so I will list them below.

Other New Features:

• Display settings for toolbar icon, toolbar text, action flag and element button size.
• Table element supports “Table Cell Values” property.
• New placeholder element.

Enhancements:

• Table content should not be wrapped, unless ‘\n’ is used.
• When inputing the target element id, the id list should include ids for group members.
•  Property chooser also allow inputing element id directely.
• Add page navigation buttons on bottom tool bar.
• Improved some dialogs UI (page management, plot configure, element selector etc.)
• Avoid selecting text within table body by double-clicking in the simulation. 
• “Show Message” action can do optional calculation within the message.
• Allow specifying the loop interval in behavior editor.
• Adjust the title position for window element.
• Rectangle, ellipse, triangle and placeholder support line stye (solid, dashed, dot).

 Fixed Bugs:

• Bug_0126: The table element with spaces in content will be shows as “&nbsp…” when export html more than one time.
• Bug_0127: If one row of table element contains less columns than other rows, error occur when exporting to html.
• Bug_0128: Post commands list is disabled by default, even the post commands are enabled.
• Bug_0129: ComboBox element can not contain “<”, “>” sysmbols.
• Bug_0130: Delete a master page may cause the page manage window crash.
• Bug_0131: Page management window should be closed when the plot is closed.
• Bug_0132: The window icon and title is not aligned well when title contains parenthesis.

Try ForeUI V2.00  Now:

You can run ForeUI V2.00 in your browser via this URL:  http://www.foreui.com/demos/demo0/

 You can also download ForeUI and install it:

For Windows: http://www.foreui.com/download/V2_00/ForeUI_Setup.exe

For Mac OS X: http://www.foreui.com/download/V2_00/ForeUI.dmg

For Linux/Unix: http://www.foreui.com/download/V2_00/ForeUI.tar.gz

About the ForeUI 2.xx License

The price of ForeUI 2.xx license is $99 per user, if you buy license for multiple users, you can also get volumn discounts.  You can use the license on ANY V2.xx versions.  You can use the license on any machine you own.

To ForeUI V1.xx customers, you can upgrade your license with just $10 per user.   Comment: Since V1.xx is $79 per user, and now you can have the 2.xx license with another $10, so you totally pay $79 + $10 = $89, which is still less than $99.

Hello everybody,  I haven’t updated this blog for a while since we are working hard at ForeUI V2.00.  We planned to give you a surprise, but many friends send mails to ask for the progress.  To avoid replying emails with similar content, I decide to write something here

Actually the launch date of ForeUI 2.0 has been finalized a few days ago,  we will release ForeUI V2.00 on next Monday, that will be 25th, January.  It is a little delayed than our estimation at the end of Year 2009, but you will understand the reason when you see what’s new in this release

We’ve produced a short video to demonstrate the new generation ForeUI, enjoy it!

HAPPY NEW YEAR!  Year 2009 is such an exciting year, we launched ForeUI product and achieved unbelievable success.  Here I must on behalf of our company thank you again for your generous help, it is your ideas and creativity that push ForeUI become better and better.  Can you imagine what will we do today?  Yes we just released ForeUI V1.90!  This version will be our last update in year 2009, and it will also be the last one of the V1.xx serial.  As we’ve mentioned in our newsletter, ForeUI 2.0 is coming soon!  No doubt the 2.0 will be very exciting but today’s leading role is still V1.90

V1.90 is a big update actually; it contains many things.  Now let me show you the details.

Enhanced Table Element

Table Scrolling

In previous versions the table element is just a static image during the simulation, but now things have been changed.  Table element will be converted to real HTML table and support scrolling (if you enabled it).

The animation below shows how the scrollbar works in the simulation:

Table Cell Alignment

The table cell alignment can be configured independently, with the “<”, “=” and “>” prefix for the text.  The text alignment of the whole table will be the default alignment for each cell.  We can use “<”, “=” or “>” at the beginning of cell text to specify the alignment for the cell.

Set Cell Value Action

The enhanced table element supports the “Set Cell Value” action, this allow you to change the table cell value dynamically.

Input Action Target Element Id

This feature is requested by Ulrich, it can save your time to find element in a big plot.  Thanks for the good idea Ulrich    Now you can input the target element id for the action.  We also provide an auto-complete assistent when you type the id, it will show all candidates in a popup list and you can pick one with mouse or keyboard.

Post Commands for DHTML Export

This feature is requested by Tim, we find it very useful when you want to do some successor task after the exporting, thanks Tim for the idea!  Now you can input some commands in the “Export” tab of settings window, they will be invoked in turn after the DHTML is generated.  Here is an example, we will run the simulation in FireFox, Opera and Safari when the DHTML is generated.

“Set Selected Index” Action

In order to provide more flexibility for behavior definition, we implemented a new “Set Selected Index” action.  This action is supported by  Table, List, Tree, Tabs and VerticalTabs elements.  So you can change the selection of these elements in the simulation.

Other Enhancements

• Avoid selecting header of table element in edit mode.
• Press Backspace to delete element for non-Mac system.

Fixed Bugs

• Bug_0120: Main window may be hidden when click the action button on page management window.
• Bug_0122: Calendar element is not displayed correctly in FireFox.
• Bug_0123: Tabs/VertcialTabs/Tree/List/Table elements should invoke the handler for “Selection Changed” event when default selection is changed.
• Bug_0124: Sometimes Page Up/Down can not switch page in simulation after clicking some element.
• Bug_0125: List/Tree element without selected item is not painted correctly in simulation.

Hello everyone, it is my pleasure to announce that ForeUI V1.85 is released today!  In this version, we added a new vertical tabs element, improved the combo box element, implemented some useful enhancements and fixed a few bugs.

Vertical Tabs

We’ve put this vertical tabs in our TODO list for a while, and finally it is available now.  It is very similar with the Tabs element, but it will place the tabs on the left or right side.  Also the vertical tabs has four different looks according to the current UI theme.

 
The vertical tabs also supports the “Selection Changed” event, just like the tabs element does.  You can handle this event, and control the visibility of elements within the tabs, just like this:

Enhanced ComboBox

Now we have more options to manipulate the ComboBox element during simulation.  The ComboBox element now provides “Selection Changed” event, “Selected Index” property and “Set Selected Index” action.

This example demonstrates the usage of the “Selection Changed” event and “Selected Index” property:

We can also use “Set Selected Index” action to change the selection of ComboBox:

Pin Windows

The element selector window and the page management window will be closed automatically once they lose focus, now you can pin it and keep it opened. Just click the small pin icon on the top-right corner, the window will be pinned and will not close until you click the “x” button.

Other Enhancements:

• Ctrl+Click to bring up context menu in Mac.  (Thanks Todd Sieling for the suggestion!)
• Command+Click to remove element from selection in Mac.  (Thanks Todd Sieling for the suggestion!)
• Store last modify time in .4ui and .fce files for future usage. 

Fixed Bugs:

• Bug_0117: Page name editing should be stopped when closing the page manage window.  (Ulrich reported, thanks!)
• Bug_0118: Page information in status bar is not correct if switching page in “Page Loaded” event handler. (Thanks Ulrich for the reporting!)
• Bug_0119: Empty tab in Tabs element can not be selected in simulation.

Hi everyone, I’m here to proudly announce that ForeUI V1.80 is released today! This version bring us two new events and interactive ComboBox element, with some bugs fixed.

MouseOver and MouseOut Events

Now you can use these two new events in the behavior editor, they will be very useful to implement tooltip or element rollover effect.  The MouseOver event will be fired when you move your mouse cursor over the element; and the MouseOut event will be fired when you move your mouse cursor out of the element’s area.

Interactive ComboBox

The ComboBox element is improved a lot in this update, it is no longer an image during the simulation, you can now interact with it.  In order to support multiple items, ComboBox element can have multi-line content now, one row for one item, you can assign the default selected item in edit mode.

When you run simulation, you can click the ComboBox and then the drop down list will be poped up, the ComboBox will have different appearance according to currently used UI theme.

Other Enhancements

We changed the default state for newly created radio buttons and checkboxes, this is suggested by Ulrich and we really think the “Normal” default state is more reasonable.

Fixed Bugs:

Bug_0114: Can not add more cases after defining the switch branching.  (Thanks Trevor Keegan for reporting)
Bug_0115: The “Element Clicked” event should also be fired when clicking on the Menu element. (Thanks Trevor Keegan again for reporting)
Bug_0116: Should not allow changing plot via Undo/Redo when editing element content.

Trial Duration Changed

BTW, the trial duration is changed to 15 days from this version, you can still contact us to extend the trial for another 30 days :-)

With ForeUI we can define actions for each element, thus we can create interactive prototype and run simulation in web browser.  The behavior of element can be described as one or more event handlers, each handler is a flowchart that indicate the way to perform actions.  Here are some tips to help defining a clear and effective flowchart.

Don’t Place Pause Action at the End

The Pause action will pause the current thread and wait for a while before executing the subsequent actions.  In other words, Pause action can delay the subsequent actions. So if no action is defined after the Pause action, the Pause action will not really take effect, even if you place it in a loop, the Pause action will not pause anything in the next circle.

So placing the  Pause action at the end is not a good idea, the table below show some good and bad cases:

Use Only One Pause Action In the Loop

When you are defining animation, Pause action will be very useful.  Sometimes we need to place the Pause action in a loop.  But there is a limitation: if you place multiple Pause actions in one loop, the loop will not really work.  So please use one Pause action in one loop.  The table below shows a good case and a bad case:

If you really need the behavior showed in the bad case, you can use this structure to workaround:

Thus you can perform one action in one circle, with one second interval.

Make Good Use of Copy and Paste

The behavior editor is improved a lot in V1.70 and provides copy and paste feature.  You cut, copy or paste item in the behavior tree via the context menu.  You can do these cross items, cross events, or even cross elements. That will a lot of time when you try to define similar behavior for multiple elements.

Of course you can also use drag and drop to move or copy items in the behavior tree.

Hello my friends, today we just released ForeUI V1.77!  This version bring us a new Arrow Line element and some interesting features / enhancements.

Arrow Line

The Arrow Line element is in our TODO list for a long time, and today we finally make it.   Arrow Line is very useful for making annotation on wireframe / mockups, so it is added to the “Annotation” category.

The new Arrow Line element provides many useful options for tweaking, you can change its color, thickness, shape and size etc.  The animation below shows the details:

Alternate Row Color for Table/List/Tree

Now you can specify the alternate row color for table, list or tree element.  Here is an animation to show how to do this:

This feature is requested by  Michael Matti, thanks for the good idea!

Color Picker Enhancement: Clear Color

We’ve made a small enhancement of Color Picker, so it can clear the editing color now. 

Just click the new button on the top-right corner can clear the current editing color.  This feature is only available for “optional color”, for now only alternate row color belongs to this category.  Once you clear the alternate row color, it’s actual value may vary according to the UI themes.

Fixed Bugs:

Bug_0111: Double-click the .4ui file to open ForeUI, sometimes it may hang.  (Reported by Michael ScolaVisa, thanks!)
Bug_0112: The group element can not be smaller than 20×20, ignoring its content’s actual size.
Bug_0113: Press Page Up/Down to switch page should not scroll the plot as well. (Reported by Ulrich Bottger, thanks!)

What is Master Page?

The master page feature is available since ForeUI V1.55, this is a very useful feature since it can simplify your prototype / wireframe a lot. Let me give a brief introduction for master page. Please take a look the the figure below, the master page works like a “background” layer, once you assign a master page to a normal page, the content on master page will be merged into the normal page. What’s more, a master page can be shared by multiple normal pages. That means you can put the common part of the prototype into the master page, thus it can be shared by several pages without copy and paste.

Although I used “Normal Page” and “Master Page” concepts to identify these two pages, they have no actual difference in ForeUI, they are just pages. In ForeUI, each page can be used as a master page, you can assign any page as the master page for your editing page. So you can assign page B as the master page for page A, and assign page C as the master page for page B, that will form a hierarchy structure like this:

When we export page A or run the simulation of page A, we will see the final result: the contents in both page B and page C are all merged into page A. So you can imagine how helpful will this feature be.

Assign Master Page in ForeUI

Now let’s see how to assign master page in ForeUI. First of all we need to create three pages, to make things simple I will use the page A, B, C mentioned above for demonstration. Here are the pages I created:

We can click the button on the bottom left corner to open the page manage window, which looks like this:

I will do it step by step, first I will select page A and click the button to choose a master page for page A:

You can see the Page A item in popup menu is gray since you can not assign the page itself as its master page. I choose Page B, so page B becomes the master page of page A, you will see the page list is updated accordingly:

I will do the similar things for page B, assign the page C as the master page for page B, so finally we get:

That’s it, we’ve created the hierarchy structure. We can switch pages to see what’s happen. The figure below shows the effect:

The content from master page will be displayed in a semitransparent channel, it is just a mechanism for reminding. When export the page to image or html, all elements will be treated in the same way. The figure below shows the html simulation for page A:

Make Good Use of Master Page

Although these three elements are on different pages, they can interact with each other via predefined actions, so there is no drawback to move the common part of multiple pages to a shared master page, this will significantly simplify your prototype / wireframe.

A very typical use case for master page is the header and footer of web site, each page of the web site has the same header and footer. You don’t have to copy header and footer then paste them here and there, you can just put the footer and header content on a single page, then assign this page as the master page for all other pages, that’s it.