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 in ForeUI

ForeUI V2.70: Accordion Element

Hello everyone, ForeUI V2.70 is now available!  This update brings you a brand new Accordion element and some other enhancements.

Accordion Element

This element is requested by Jeffrey Werner about 1 year ago, Audrey Taylor and Tim have the same suggestion recently.  We are so glad that we finally have this done.

The accordion element is actually a set of partly overlapped panels (sections), each panel has a header on top.  Clicking on the header of panel will expand/collapse the panel thus the content in panel will be show/hide as well.  It is a container element, so you can drag element into it with right mouse button hold.

There are many options for accordion element in the floating tool pane.  The “Multiple Expansions” checkbox can control whether the element support multiple expanded section.  You can specify the border color and the header background color, set the icons for collapsed/expanded sections etc.  Here is a tips: if you like to use different icons on different sections, try dragging icon from image dock and drop to the header for sepcific section.

Here is an example for accordion element usage.  There are two accordion elements in the plot.  The accordion on the left supports multiple expansions, and it is simulating an expandable menu; The accordion on the right only allow single expansion, and it is simulating a set of sliding contact groups.  This example is uploaded to the community site and can be reviewed here.

Enhanced “Set Table Cell Value” Action

From now on you could use properties (variables) in the row/column indices for “Set Table Cell Value” action.   Thus you can use two text input boxes in prototype and accept the row and column indices input by user in the simulation.

Fixed Bugs:

  • Bug_0286: For button with icon only, turn on the ‘underline’ decoration, then error happens and current action will halt.
  • Bug_0287: If table’s actual row height is different than default value, the alternate color filling is incorrect in Hand Drawing, Windows XP and Windows 7 themes.
  • Bug_0288: Hide the default icons for tree element, the icons are still visible in simulation.
  • Bug_0289: Lock the position of the element and unselect it, the element become invisible if you drag it.
  • Bug_0290: Can not directly click specific regions of element to change selection if zoom ratio is not 100%. (Tree, Table, Tabs, VerticalTabs and MultilevelMenu)
  • Bug_0291: Hold SHIFT to resize element with aspect locked, the aspect is not accurate when any snap action is performed.
  • Bug_0292: Select user-defined category in ‘Manage Category’ window, all buttons hover on element in the category are not clickable until restarting ForeUI.
  • Bug_0293: Add custom element with duplicated name, should update its reference in the list instead of adding new reference.
  • Bug_0294: In image dock, if the image ids are not sequential, dragging image to plot may not work correctly.

ForeUI V2.67: Add Note in Action Editor

Hello everyone,  we are back from vacation so it is time to roll out a new version 🙂

Comparing to previous updates, it one is not so big and it contains one new feature and three enhancements, as we need some time to warm up after the long vacation.

Input Note in Action Editor

This feature is scheduled for quite long time.  It is very useful to explain the actions associated with element or page, just like the comments on source code.

In V2.67, when you open the action editor for element or page, you will see a new sub view on the right, which can list all notes for the actions.

To add or edit the note for entity, just choose the “Edit Note” item from the context menu, or just double click the row in the not view.

The note view is resizable and you can hide it by dragging it to rightmost border.  The note can still be shown in the floating tooltip.

Multirow Note Editing

Now the note editing can support multirow, no matter for element’s note or action’s note.  Just click the “Multirow Note” checkbox to toggle the single/multiple row modes.

Other Enhancements:

  • Allow selecting previous/next entity with UP/Down arrow in action editor.
  • Show warnning message if the plot to load does not exist.  (Thank Mario Gonzalez’s suggestion)

ForeUI V2.65: Animated GIF Support and More

3

Happy New Year to you all!

Today ForeUI’s first release in Year 2011 is out!  Want to know what’s new in V2.65?  Please read on.

Animated GIF Support

Now you can insert animated GIF files into your prototype, and they will be really animated in simulation!  So far there are four types of elements support this feature: Image Box, Window, Tree and Multilevel Menu.  With our on-going effort, more elements will support this.

Use Animated GIF in ForeUI Elements

Change  Window Title in Simulation

The Window element supports a new “Set Window Title” action, which allows you to change the window title in simulation.  The new title supports property, so you can include some dynamic value in the window title.

Set Focus in Simulation

The TextEditBox and Spinner elements now support a new “Set Focus” action, which will set focus on the specific element.  This can be used to set the default focused element when page is loaded.

Some Enhancements:

  • Show image button on floating tool pane for MultilevelMenu element.
  • Enable hotkeys for cut/copy/paste/delete on embedded element.

Fixed Bugs:

  • Bug_0271: “Mouse Out” event for Multilevel Menu is triggered when mouse is hovering on the element.
  • Bug_0272: The delay value in “Pause a while” window should be selected by default.
  • Bug_0273: Can not start selecting from above of plot.
  • Bug_0274: The title of Window element does not respect the default font settings.
  • Bug_0275: Table column become wider in simulation.
  • Bug_0276: Table column widths should be synchronized in edit/view modes.

Use MockGen to Generate Mockups from Website

4

Several months ago, I had post a review of Looksie, Looksie can generate detailed reports for ForeUI plots.  This morning Xemware just announced the beta version of their brand new web service: MockGen, which can generate (ForeUI or Balsamiq) mockups from existed website online!  It sounds very promising so I try it immediately and write down my experience here 🙂

The web page of MockGen is very simple (as shown below).  There are just a few input fields to accept the parameters for mockups generation.  Some fields have a blue question icon on the right, and you can click the icon to show the explanation of the field.

There are just two required fields: one is your email address and the other is the URL of the existed website.  Other fields can control the pages included in mockups, and you can choose the output format (ForeUI plot or Balsamiq mockups).

I decided to generate a ForeUI plot from LinkedIn website:

So I input my email address to receive the plot, and then input the target URL as “http://www.linkedin.com”:

After clicking the “Generate!” button, I can see a message as below.  So I cross fingers and wait for my plot 😀

It is better than my expection, an email arrived within one minute and it contains a ZIP archive.

The plot file is just in the ZIP archive.  After extracting the file and open the plot in ForeUI, a prototype for LinkedIn website is ready.  The first page is a navigating page and it can bring you to any page within the plot when running the simulation.

This page is the front page in real website.  It is almost perfect, even the hyperlinks are converted to actions in plot.  However the background color is changed to light gray:

After changing the plot background color to white, the final result is very good:

What if we run the generated plot in web browser?  I can’t help trying this and below is the comparation.

As you can see, there is a little offset between real website and the generated plot.  But it is not a big problem and I believe it can be improved in the future, as it is still in Beta state for now.

Dear friends, if you plan to create a prototype base on an existed website, the MockGen service will save you lot of time!  You can click here to try the service, please feel free to leave your comment here if you have any feedback on it.  Tim (the developer of MockGen) will be glad to hear from you 🙂

Goodbye to 2010, Look Forward to 2011

Dear friends, year 2010 will elapse soon and year 2011 is coming.  I must, on behalf of ForeUI’s R&D team and EaSynth company, say “HAPPY NEW YEAR” to you all 🙂

Year 2010 really meant a lot to ForeUI.  The summary below shows what we did in year 2010:

Summary of Year 2010

Official Releases: 28 (V2.00 ~ V2.62)
New Features: 82
Enhancements: 86
Fixed Bugs: 141

Now let’s review the great updates in year  2010:

Windows 7 UI Theme

The UI theme to simulate the Windows 7’s UI is available from V2.00.  This theme is very helpful for creating high-fidelity prototypes for Windows 7 apps.

User Community

V2.00 also introduced a brand new user community site for ForeUI resource sharing.  The community site is fully integrated with ForeUI software and provides the easiest way to download more interesting examples, elements and libraries.

German Language Support

From V2.15, ForeUI supports German language.  We should give the credit to Marcus Barkhahn since he translate all text scripts to German voluntarily, thank you Marcus 🙂

Zoom In/Out

This handy feature is implemented in V2.20.  You can zoom in to see the the details of a region, or zoom out to preview the entire page.

Container Support

From V2.22, ForeUI supports a new “container” concept.  You can embed other elements into a container, thus they are tightly joined and can be moved together.  Table became the first container element, and then we have Scrollable Container (V2.32), Tabs (V2.37), Vertical Tabs (V2.37), Tree (V2.60), Window (V2.62) joined the containers family.  You can hold the right mouse button and drag elements into container.

Online Updater

This feature is shipped with V2.50.  With its help you can upgrade your ForeUI to latest version without visiting our website.

I just listed the most important updates in year 2010.  Of course there are still many great updates remained, you can find them here.  However the items above should not be missed.

We must thank you all who report bugs or share ideas with us.  Thank you all for the help!

Forecast Year 2011

Year 2011 is coming and we have started to think about the roadmap of  2011.  In year 2011, we will use more time on polishing the current features, providing more documents and tutorial videos.  The V3.0 may be launched at Q4 of 2011.  We are also considering the development of ForeUI server side application, which will integrate version control, prototypes management, resource sharing and feedback collecting platform.  What’s more, we may release mobile version of ForeUI in year 2011.

If you have any idea on ForeUI’s roadmap, please let us know your great idea, thanks!