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

ForeUI Blog

May 31, 2009

Using Customized Element in ForeUI

by

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:

customization_category             customization_menu

Feature | ForeUI | Uncategorized
May 30, 2009

Create Interactive Prototype with ForeUI

by

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:

behavior_editor

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 run-sim button to see what’s happening 🙂

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

Feature | ForeUI | Uncategorized
May 29, 2009

Milestone: ForeUI V1.20 Released!

by

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:

  • New Feature: Interactive simulation on web browser.
  • New Feature: User customized element supported.
  • New Feature: Export prototype to DHTML.
  • New Feature: Allow adding note to element.
  • New Feature: All elements support visible property.
  • New Feature: Text edit box support multirow property and encrypt property.
  • Enhancement: allow closing the page management dialog by clicking the plot area.
  • Fixed Bug_0044: Save plot file may meet exception.
  • Fixed Bug_0045: Caret display incorrect when text edit box is empty.
  • Fixed Bug_0046: Changing UI theme should affect all pages.
  • Fixed Bug_0047: Without copying first, cut an element then undo the action, exception will occur.

    • 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 🙂

    Feature | ForeUI | Uncategorized | Update
    |
    May 21, 2009

    Text Editing in ForeUI

    by

    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:

    buttons-to-edit

    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.

    single-line-edit

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

    multi-line-edit

    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:

    edit_in_group

    Feature | ForeUI | Uncategorized
    May 17, 2009

    ForeUI V1.10 Released!

    by

    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:

    slide_show1

    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.

    buttons_wf buttons_xp buttons_mac

    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.

    Feature | ForeUI | Uncategorized | Update
    | |
    12