ForeUI Product Blog

Archive for May, 2009

The customized element is supported from ForeUI V1.20.  Here is an article to introduce this new featue.

It is for sure that we will add more and more elements into ForeUI, but our policy is NOT just to expand the library as big as possible.  Since we believe that the huge library will bring the inconvenience to user: too hard to find the element to use.   So we’d like to provide the essential elements for prototyping, which is flexible to be customized.

For example, we only provide a “TextEditBox” element in ForeUI, but actually it support “Mutirow” and “Encrypt” properties, which can make it become a multiline text edit area or password input field.

Also we provide the facility to keep your customization or future usage, that is what we call “Customized Element”. In the article you can learn how to create, manage and use the customized elements.

To quick start, click the “Customization” button on the bottom left corner of ForeUI to check the new element category:

             

I have just put a new article to introduce the interactive simulation feature in ForeUI.

The key point to create interactive prototype is to define the behavior of element, i.e. create a tree structure to represent the workflow of event handler, like the figure below:

So far there are 3 kinds of nodes in the tree: Event, Branching and Action.  An event handler should include Event and Action, maybe with optional branching.

In the article, I create 3 small examples to demonstrate the facilities, you will see how to define the behavior of element step by step to make it interactive during the simulation.  This tutorial is basic, actually we have much more content to introduce, I will put the advanced skills in another article.

I believe the fastest way to master ForeUI interactive simulation is to try it, just click the  button to see what’s happening

I hope this article is helpful for you, please let me know if there is anything unclear.

I am so proud to announce that ForeUI V1.20 is released today.  Different than previous minor update versions, V1.20 is really a milestone!  Many important features are available from this version, here is the list:

I can not introduce all these features detailly today, instead I will write some other articles to do that.  The most important new features are the first two:  Interactive Simulation & Customized Element Support

As we promised before, ForeUI provides interactive simulation feature now.  The prototype will be simulated as DHTML and run in your web browser.   It is definitely different than slide show, it is interactive so that your prototype can provide real user experience.

Customizing element is also important, we can create our own element now!   The customized element can have its behavior, so it is not only a reusable GUI but also a reusable logic component!  The customized element will be stored as *.fce files, the installation package contains some examples in the “customize” folder (they are some message windows, you can close the window by clicking the button on it in simulation mode).

More details will be introduced latter

When we create UI prototype with ForeUI, we need to input the text on different elements.  There are several ways to launch the inline text editor in ForeUI.  When we select the element that can perform text editing, we will find the menu item or tool button for opening the text editor:

What’s more, we can always double-click the element to popup its text editor.  According to the element type, there will be two kinds of text editor to show up:  single line text editor and multiple lines text editor.

The single line text editor is applicable for elements that has one row of  text only, such as button, menu bar, tabs etc.

The multiple lines text editor is applicable for list, table, menu etc, which contains several rows of content.

Another interesting feature of ForeUI is the text editing within the group.  As we know we can group several elements into a group element, can we edit the text of element within a group? Yes!  Please see the animation below:

ForeUI V1.10 bring us three interesting features:

Slide Show

Now we can view our screen mockups with full-screen slide show, we can even make some annotations on it.  The figure below shows how it looks like:

PDF Exporting

We can now export our design to PDF file, which is more easy to distribute.

Multiple States

Now most elements support multiple states.  For example, you can set the button within the mockup to a ”disabled”  state.

This version also make some enhancements. For example, a progress dialog will show up when performing I/O actions; The tool bar will become scrollable if the window is not big enough.

Two bugs are fixed:

[Bug_0042] Pages list should auto-scroll to make new added item visible.

[Bug_0043] Plot with empty page can not save.

This version bring us four new features:

1. Multipage Exporting:

Now we can export  the multipage mockup to images with only one action.

2. Export to More Image Formats:

Now we can export mockup to PNG, JPG, GIF, BMP and WBMP images.

3. New Element — Triangle:

It is useful when we want to create irregular shapes in our prototype.

It is a small enhancement, when we are editing singlerow text, we can always press ENTER to finish editing.  But if we press ENTER in multirow text editor, it will just move the caret  to the next line.   Now we can press CTRL+ENTER to finish editing for multirow text editor.

Today’s topic is… selecting elements in ForeUI.  Seems I have nothing to write so I pick such an easy thing to introduce? Maybe and maybe not.  Have you noticed the “leading selected element”?  Do you know what is it for?  If your answers are “yes” for both, you can just ignore the content below

When we are creating mockups for our software or website,  we need to select elements very frequently.  Most people know that single clicking on the element can perform the selection, draging a rectangular bounds that contains multiple elements will select those elements at a time.  Did you know that we can press SHIFT key to select in “plus” mode? When you do this the cursor will be changed to  and you can single click elements to add them into the selection.  Also you can press CTRL key to select in “minus” mode, the cursor will look like  and you can single click elements that already within the selection to exclude them.

What’s more, there is a “leading selected element” concept in ForeUI. When you select several elements at a time, there will be an element that marked as “leading selected element”, which will have a dash line border with darker  color around it.  Take a look at the animation below, then you will know what I mean.  We can change the leading selected element by clicking another element within the selection.

What is the leading selected element for?  First of all, it allow you to edit single element when you are selecting multiple elements.  You don’t have to cancel the big selection and select a single element for editing, you can just set it as the leading selected element, then work on it in the floating tool pane.  Secondly the leading selected element can work as the “reference substance” of some actions, it will be very easy to understand if you take a look at the animations below:

Hello all, today we released the V1.05 of ForeUI!   This version bring us two new features:  multiple pages support and version checking.  Four bugs are also fixed in this version.

Multiple Pages

Now we can create several pages mockup within a plot.  You can click the pages button at the bottom to launch the pages management:

After clicking this button, the pages management window will popup:

We can add, duplicate, rename, move and delete the page here.  The pages can be organized with flat or hierachical structure.  The hierachical structure is very suitable for website mockups, since it looks like a site map.  This version also enclosed a new sample mockup: multipage.4ui.  It is a website mockup and contains 6 pages:

Update Checking

Now we can check the update from menu “About->Check Update…”.  Hope people check it frequently

Fixed Bugs

Bug_0030: The text editor may be trimmed.

Bug_0037: Floating tool pane may cover the selected elements.

Bug_0038: Image id display incorrect in floating tool pane.

Bug_0040: Elements should be aligned to the lead selection.

ForeUI is on Giveawayoftheday today!  That means you can download and install full-featured, never expired ForeUI from there.  The version on GAOTD is V1.00 and can not be updated, if you like this tool, you can consider buying a license OR applying for a free license, which can be used on any 1.xx version.

Ashraf also give a review of ForeUI today, which I think is fair and decent.  He listed some shortages of ForeUI, which we think are very important, we will try to solve them ASAP.  Of course he also listed some advantages of ForeUI, we are so happy to hear that , but we do know the criticism is more useful to us at this phase.

Most criticisms are focus on the lack of some important features, we agree that ForeUI need them, actually we have a long TODO list of ForeUI.  I’d like to expose part of our delivery planning today:

1. V1.05 will be released next week, which contains a new feature:  multiple pages within a plot.
2. V1.10 will provide a new feature: slide show, which allow showing and exporting pages as slides.
3. V1.20 will provide interactive simulation feature, the simulation will base on HTML+Javascript.

We think the UI prototyping include three levels:  Rough Design -> Mockup Rendering -> Interactive Simulation.  The rough design will not contain many details, wireframes are very suitable for it.  Mockup rendering provides the visual effect that close to the final result, it is good for documentation.  Interactive simulation provides the “real” user experience,  it is a ”running” prototype of the final result.  ForeUI will provide tools to cover all these three levels, so far we have wireframe UI theme for rough design, native OS style for mockup rendering.  In the future version, ForeUI will provide slide show and Ajax like demo for interactive simulation.  It is an exciting plan, isn’t it